/* Cars.Auction - styles.css */

/* Odblokuj kliknięcia w głównym kontenerze (edytor może ustawiać pointer-events: none na #root i .app) */
#root, .app, .app > main, .app > section { pointer-events: auto !important; }

:root {
  --accent: #2f6df6;
  --radius: 14px;
  --dens: 1;

  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #0d1726;
  --ink-2: #3a4658;
  --muted: #6b7688;
  --faint: #97a1b2;
  --line: #e6eaf0;
  --line-2: #eef1f6;

  --accent-ink: color-mix(in oklab, var(--accent), black 22%);
  --accent-soft: color-mix(in oklab, var(--accent), white 88%);
  --accent-soft2: color-mix(in oklab, var(--accent), white 80%);

  --live: #17b877;
  --soon: #f29c1f;
  --danger: #e5484d;
  --buy: #12b35f;

  --shadow-sm: 0 1px 2px rgba(13,23,38,.05), 0 1px 3px rgba(13,23,38,.06);
  --shadow-md: 0 4px 16px rgba(13,23,38,.07), 0 1px 4px rgba(13,23,38,.05);
  --shadow-lg: 0 18px 50px rgba(13,23,38,.12), 0 4px 14px rgba(13,23,38,.07);

  --maxw: 1480px;
  --fs: calc(1px * var(--dens));
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html, body { overflow-x: hidden; max-width: 100%; }
/* Zawsze rezerwuj miejsce na pasek przewijania — bez tego przełączanie zakładek
   o różnej wysokości (np. Wpłać depozyt / Zwrot kaucji) przesuwa stronę w bok. */
html { scrollbar-gutter: stable; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: "Plus Jakarta Sans", "Manrope", sans-serif; margin: 0; letter-spacing: -.02em; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
.app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: calc(var(--radius) * .72);
  font-weight: 700; font-size: 14px; padding: 11px 18px; white-space: nowrap;
  transition: transform .12s, background .15s, box-shadow .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn.sm { padding: 8px 13px; font-size: 13px; }
.btn.lg { padding: 14px 22px; font-size: 15px; }
.btn.full { width: 100%; }
.btn-accent { background: linear-gradient(135deg, #4f80ff 0%, var(--accent) 52%, #2456d8 100%); color: #fff; border: none; box-shadow: 0 6px 18px color-mix(in oklab, var(--accent), transparent 66%); transition: filter .2s, transform .15s, box-shadow .2s; }
.btn-accent:hover { filter: brightness(1.06); background: linear-gradient(135deg, #5f8cff 0%, var(--accent) 52%, #2a5fe6 100%); box-shadow: 0 8px 22px color-mix(in oklab, var(--accent), transparent 58%); }
.btn-accent:active { transform: translateY(1px); box-shadow: 0 4px 12px color-mix(in oklab, var(--accent), transparent 66%), 0 1px 3px rgba(13,23,42,.16); }
.sp-go { background: linear-gradient(135deg, #3f74f0 0%, var(--accent) 52%, #2a5fdf 100%); box-shadow: 0 8px 20px color-mix(in oklab, var(--accent), transparent 62%); }
.sp-go:hover { filter: brightness(1.06); background: linear-gradient(135deg, #3f74f0 0%, var(--accent) 52%, #2a5fdf 100%); }

/* Subtelna animacja poświaty na przycisku "Licytuj" (strona pojazdu) */
.det-bid-glow:not(:disabled) {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, var(--accent) 0%, #4f86ff 25%, #6f9dff 50%, #4f86ff 75%, var(--accent) 100%);
  background-size: 260% 100%;
  animation: detBidGradient 6s ease-in-out infinite, detBidPulse 3.4s ease-in-out infinite;
}
.det-bid-glow:not(:disabled):hover { background: linear-gradient(110deg, var(--accent) 0%, #4f86ff 25%, #6f9dff 50%, #4f86ff 75%, var(--accent) 100%); background-size: 260% 100%; }
/* delikatny przesuwający się refleks */
.det-bid-glow:not(:disabled)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: detBidSheen 11s ease-in-out infinite;
  pointer-events: none;
}
@keyframes detBidGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes detBidPulse {
  0%, 100% { box-shadow: 0 6px 18px color-mix(in oklab, var(--accent), transparent 65%); }
  50% { box-shadow: 0 6px 26px color-mix(in oklab, var(--accent), transparent 45%); }
}
@keyframes detBidSheen {
  0% { transform: translateX(-120%); }
  12% { transform: translateX(120%); }
  12.01%, 100% { transform: translateX(-120%); }
}
@media (prefers-reduced-motion: reduce) {
  .det-bid-glow:not(:disabled) { animation: none; }
  .det-bid-glow:not(:disabled)::after { animation: none; }
}
/* Przycisk "Licytuj $kwota" (karta licytacji + potwierdzenie) — zielony,
   te same efekty (gradient, poświata, puls), inny odcień. Biały napis. */
.det-bid-glow:not(:disabled),
.bidc-confirm:not(:disabled) {
  background: linear-gradient(110deg, #15803d 0%, #22c55e 25%, #4ade80 50%, #22c55e 75%, #15803d 100%);
  background-size: 260% 100%;
  color: #fff;
}
.det-bid-glow:not(:disabled):hover,
.bidc-confirm:not(:disabled):hover {
  background: linear-gradient(110deg, #15803d 0%, #22c55e 25%, #4ade80 50%, #22c55e 75%, #15803d 100%);
  background-size: 260% 100%;
  box-shadow: 0 8px 22px rgba(21,128,61,.42), 0 3px 7px rgba(13,23,42,.2);
}
.det-bid-glow:not(:disabled) { animation: detBidGradient 6s ease-in-out infinite, detBidPulseGreen 3.4s ease-in-out infinite; box-shadow: 0 6px 18px rgba(21,128,61,.35), 0 2px 5px rgba(13,23,42,.16); }
@keyframes detBidPulseGreen {
  0%, 100% { box-shadow: 0 6px 18px rgba(21,128,61,.35); }
  50% { box-shadow: 0 6px 26px rgba(21,128,61,.55); }
}

.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: #d8dee8; }
.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #f1f4f9; }
.btn-danger { background: #e5484d; color: #fff; box-shadow: 0 6px 18px rgba(229, 72, 77, .28); }
.btn-danger:hover { background: #cf3b40; }

/* Auth pill buttons (Zaloguj / Rejestracja) */
.btn-login, .btn-register {
  border-radius: 999px; gap: 9px; padding: 9px 18px; font-size: 14px; font-weight: 700;
}
.btn-login {
  background: #fff; color: var(--ink);
  border: 1px solid #eef0f4;
  box-shadow: 0 4px 14px rgba(15, 23, 38, .07);
}
.btn-login svg { color: var(--accent); }
.btn-login:hover { border-color: #dce1ea; box-shadow: 0 6px 18px rgba(15, 23, 38, .11); }
.btn-register {
  color: #fff; border: 1px solid transparent;
  background: linear-gradient(135deg, #3f74f0 0%, var(--accent) 52%, #2a5fdf 100%);
  box-shadow: 0 8px 20px color-mix(in oklab, var(--accent), transparent 62%);
}
.btn-register svg { color: #fff; }
.btn-register:hover { filter: brightness(1.04); box-shadow: 0 10px 24px color-mix(in oklab, var(--accent), transparent 54%); }

/* Hamburger logowania/rejestracji — domyślnie ukryty (widoczny tylko mobilnie) */
.auth-burger-wrap { position: relative; display: none; }
.auth-burger { width: 48px; height: 42px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #fff; border: 1px solid #eef0f4; border-radius: 11px; box-shadow: 0 4px 14px rgba(15,23,38,.07); transition: border-color .15s, box-shadow .15s; }
.auth-burger span { display: block; width: 26px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s, opacity .2s; }
.auth-burger.on { border-color: var(--accent); box-shadow: 0 6px 18px color-mix(in oklab, var(--accent), transparent 70%); }
.auth-burger.on span:nth-child(1) { transform: translateY(7.2px) rotate(45deg); }
.auth-burger.on span:nth-child(2) { opacity: 0; }
.auth-burger.on span:nth-child(3) { transform: translateY(-7.2px) rotate(-45deg); }
.auth-burger-drop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; min-width: 184px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15,23,38,.18); padding: 7px; display: flex; flex-direction: column; gap: 2px; animation: authDropIn .18s cubic-bezier(.22,1,.36,1); }
.auth-burger-drop button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px 13px; border: none; background: none; border-radius: 9px; font-size: 15px; font-weight: 700; color: var(--ink); transition: background .14s; }
.auth-burger-drop button svg { color: var(--accent); flex-shrink: 0; }
.auth-burger-drop button:hover { background: var(--accent-soft); }
@keyframes authDropIn { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(13, 23, 38, .06), 0 1px 3px rgba(13, 23, 38, .05); }
@media (min-width: 861px) {
  .hdr { width: 100%; max-width: calc(var(--maxw) - 48px); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
  .hdr-sub { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
}
.hdr-top { display: flex; justify-content: space-between; align-items: center; max-width: var(--maxw); margin: 0 auto; padding: 6px 24px; font-size: 12px; color: var(--muted); }
.hdr-top span { display: inline-flex; align-items: center; gap: 6px; }
.hdr-top { border-bottom: 1px solid var(--line-2); }
.hdr-main { display: flex; align-items: center; gap: 16px; max-width: var(--maxw); margin: 0 auto; padding: 13px 24px; }
.hdr-sub { border-top: 1px solid var(--line-2); background: var(--surface-2); }
.hdr-sub-inner { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; }
.lang-switch { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid transparent; padding: 5px 8px; border-radius: 9px; color: var(--ink-2); cursor: pointer; transition: background .15s, border-color .15s; }
.lang-btn:hover, .lang-btn.open { background: var(--surface); border-color: var(--line); }
.lang-btn svg:last-child { color: var(--faint); transition: transform .18s; }
.lang-btn.open svg:last-child { transform: rotate(180deg); }
.flag { width: 22px; height: 15px; border-radius: 3px; display: block; box-shadow: 0 0 0 1px rgba(13,23,38,.1); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 190px; z-index: 60; display: flex; flex-direction: column; gap: 2px; animation: authDropIn .16s ease; }
.lang-opt { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: none; padding: 9px 11px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.lang-opt:hover { background: var(--surface-2); }
.lang-opt.on { color: var(--accent-ink); }
.lang-opt .flag { flex-shrink: 0; }
.lang-opt span { flex: 1; }
.lang-opt > svg { color: var(--accent); }
.subnav-sep { width: 1px; height: 14px; background: var(--line); flex-shrink: 0; }
.subnav { background: none; border: none; padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); position: relative; }
.subnav:hover { color: var(--accent-ink); }
.subnav.active { color: var(--accent-ink); }
.subnav.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--accent); border-radius: 2px; }
.logo { display: inline-flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; cursor: pointer; }
.logo:focus { outline: none; }
.logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.logo { position: relative; }
.logo img { height: 54px; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); transition: filter .2s; }
.logo:hover img { opacity: .88; filter: drop-shadow(0 3px 10px rgba(0,0,0,.25)); }

.logo-footer { background: #fff; padding: 12px 16px; border-radius: 14px; }
.logo-footer img { height: 38px; }
.logo-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-ink)); display: grid; place-items: center; box-shadow: 0 4px 12px color-mix(in oklab, var(--accent), transparent 65%); }
.logo-bid { color: #fff; font-size: 16px; line-height: 1; transform: translateY(-1px); }
.logo-word { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.03em; color: var(--ink); }
.logo-dot { color: var(--accent); }
.hdr-nav { display: flex; gap: 4px; margin-right: auto; }
.hdr-search { flex: 1 1 auto; min-width: 280px; display: flex; align-items: center; gap: 9px; margin: 0; padding: 0 6px 0 18px; height: 50px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; color: var(--faint); transition: border-color .15s, background .15s, box-shadow .15s; }
.hdr-search:focus-within { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 88%); }
.hdr-search input { flex: 1; border: none; background: none; padding: 0; font-size: 15px; font-weight: 500; color: var(--ink); }
.hdr-search input:focus { outline: none; }
.hdr-search-btn { border: none; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; padding: 0 20px; height: 38px; border-radius: 999px; flex-shrink: 0; transition: background .15s; }
.hdr-search-btn:hover { background: var(--accent-ink); }
.navlink { background: none; border: none; color: var(--ink-2); font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 9px; position: relative; }
.navlink:hover { background: var(--surface-2); color: var(--ink); }
.navlink.active { color: var(--accent-ink); }
.navlink.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--accent); border-radius: 2px; }
.hdr-actions { display: flex; align-items: center; gap: 8px; }
.watch { position: relative; padding: 8px; }
.power-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px 7px 12px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-soft2); color: var(--accent-ink); cursor: pointer; transition: background .14s, border-color .14s, transform .12s; }
.power-chip:hover { background: color-mix(in oklab, var(--accent), white 80%); border-color: var(--accent); }
.power-chip:active { transform: translateY(1px); }
.power-chip > svg { color: var(--accent); flex-shrink: 0; }
.power-txt { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.power-txt em { font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-ink); opacity: .72; line-height: 1; white-space: nowrap; }
.power-txt b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; font-weight: 700; color: var(--accent-ink); letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.power-k { display: none; }
.watch-badge { position: absolute; top: 0; right: 0; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 3px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 56px 24px 40px; background: linear-gradient(180deg, #0c1424, #0f1d33); }
/* Tło hero wjeżdża pod header (widoczne w bocznych marginesach paska) — tylko desktop */
@media (min-width: 861px) {
  .hero { margin-top: calc(-1 * var(--hdr-h, 145px)); padding-top: calc(28px + var(--hdr-h, 145px)); }
}
.hero-bg { position: absolute; inset: 0; }
.hero-photo { position: absolute; inset: -8px; background: url("hero-port.webp?v=20260718") center 38% / cover no-repeat; opacity: .26; filter: blur(3px) brightness(.78); mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 90%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 90%); }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 80% 72% at 50% 0%, #000 38%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse 80% 72% at 50% 0%, #000 38%, transparent 76%); }
.hero-glow { position: absolute; top: -180px; left: 50%; width: 760px; height: 460px; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent), transparent 55%), transparent); filter: blur(20px); opacity: .7; transform: translateX(-50%); animation: heroGlowPulse 7s ease-in-out infinite; }
.hero-bg::before, .hero-bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 1; }
.hero-bg::before { width: 520px; height: 360px; top: 4%; left: 8%; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent), transparent 60%), transparent); opacity: .55; animation: heroGlowDriftA 16s ease-in-out infinite; }
.hero-bg::after { width: 560px; height: 400px; bottom: -6%; right: 6%; background: radial-gradient(closest-side, color-mix(in oklab, #4f9bff, transparent 62%), transparent); opacity: .5; animation: heroGlowDriftB 19s ease-in-out infinite; }
@keyframes heroGlowPulse { 0%,100% { opacity: .55; transform: translateX(-50%) scale(1); } 50% { opacity: .85; transform: translateX(-50%) scale(1.12); } }
@keyframes heroGlowDriftA { 0%,100% { transform: translate(0,0) scale(1); opacity: .45; } 50% { transform: translate(60px,30px) scale(1.15); opacity: .65; } }
@keyframes heroGlowDriftB { 0%,100% { transform: translate(0,0) scale(1.05); opacity: .4; } 50% { transform: translate(-50px,-26px) scale(.92); opacity: .62; } }
@media (prefers-reduced-motion: reduce) { .hero-glow, .hero-bg::before, .hero-bg::after { animation: none; } }
.hero-inner { position: relative; z-index: 2; max-width: 920px; margin: 0 auto; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #c7d3e6; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); padding: 6px 14px; border-radius: 999px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); }
.dot.live { background: var(--live); box-shadow: 0 0 0 4px color-mix(in oklab, var(--live), transparent 75%); animation: pulse 2s infinite; }
.dot.soon { background: var(--soon); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.hero-h1 { color: #fff; font-size: clamp(34px, 5vw, 56px); line-height: 1.04; margin: 18px 0 0; text-shadow: 0 2px 14px rgba(0,0,0,.32); }
.hero-h1 .hl { background: linear-gradient(120deg, var(--accent), #76a9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: #b9c4d6; font-size: 17px; max-width: 620px; margin: 16px auto 0; text-wrap: pretty; }
.hero-sub-1l { max-width: none; white-space: nowrap; text-wrap: nowrap; }
.glow-word { position: relative; display: inline-block; color: #fff; font-weight: 700; padding: 2px 12px; border-radius: 8px; white-space: nowrap; isolation: isolate; }
.glow-word::before { content: ""; position: absolute; inset: 0; border-radius: 8px; padding: 1.5px; background: linear-gradient(110deg, var(--accent), #76a9ff, #b388ff, var(--accent)); background-size: 300% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: glowshift 4s linear infinite; z-index: -1; }
.glow-word::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(110deg, var(--accent), #76a9ff, #b388ff, var(--accent)); background-size: 300% 100%; filter: blur(11px); opacity: .55; animation: glowshift 4s linear infinite, glowpulse 2.6s ease-in-out infinite; z-index: -2; }
@keyframes glowshift { to { background-position: 300% 0; } }
@keyframes glowpulse { 0%,100% { opacity: .35; } 50% { opacity: .7; } }
.hero-trust { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 18px; color: #aebbcf; font-size: 13px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust svg { color: var(--live); }

/* ---------- Search panel ---------- */
.search-panel { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 11px 16px 16px; margin-top: 26px; margin-bottom: 6px; text-align: left; }
.search-panel.sp-hero { margin-top: 28px; }
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.sp-cats { display: flex; gap: 4px; }
.sp-cat { appearance: none; border: none; background: none; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; font-weight: 700; padding: 9px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; }
.sp-cat svg { opacity: .65; transition: opacity .15s; }
.sp-cat:hover { color: var(--ink); }
.sp-cat:hover svg { opacity: 1; }
.sp-cat.on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.sp-cat.on svg { opacity: 1; color: var(--accent); }
.sp-head .sp-arch { padding-bottom: 6px; }
.sp-grid { display: grid; grid-template-columns: 1.3fr 1.3fr .8fr .8fr 1fr; gap: 10px; }
.sp-field { display: flex; flex-direction: column; gap: 5px; }
.sp-lab { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sel { position: relative; display: flex; align-items: center; }
.sel svg { position: absolute; right: 10px; color: var(--faint); pointer-events: none; }
.sel select { width: 100%; appearance: none; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 10px 30px 10px 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
.sel select:focus { outline: none; border-color: var(--accent); background: #fff; }
.sel select:disabled { opacity: .5; }
.sel.sm select { padding: 8px 26px 8px 10px; font-size: 13px; }
/* Rozwijana lista z wyszukiwaniem (Marka / Model) */
.combo { position: relative; width: 100%; }
.combo-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.combo.is-open .combo-btn, .combo-btn:focus { outline: none; border-color: var(--accent); background: #fff; }
.combo.is-disabled .combo-btn { opacity: .5; cursor: default; }
.combo-btn svg { color: var(--faint); flex: none; transition: transform .15s; }
.combo.is-open .combo-btn svg { transform: rotate(180deg); }
.combo-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-val.is-ph { color: var(--muted); font-weight: 600; }
.combo-pop { position: fixed; z-index: 3000; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; }
.combo-search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line-2); }
.combo-search svg { color: var(--faint); flex: none; }
.combo-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 14px; font-weight: 600; color: var(--ink); }
.combo-search input::placeholder { color: var(--faint); font-weight: 500; }
.combo-list { max-height: 260px; overflow-y: auto; padding: 5px; display: flex; flex-direction: column; gap: 1px; }
.combo-opt { display: block; width: 100%; text-align: left; border: none; background: none; padding: 9px 11px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.combo-opt:hover { background: var(--surface-2); }
.combo-opt.on { background: var(--accent-soft); color: var(--accent-ink); }
.combo-empty { padding: 14px 11px; text-align: center; font-size: 13px; color: var(--muted); }
.sp-bottom { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.src-toggles { display: flex; gap: 8px; }
.src-toggle { display: inline-flex; align-items: center; gap: 8px; border: none; background: none; border-radius: 999px; padding: 7px 10px; font-size: 13px; font-weight: 800; color: var(--muted); cursor: pointer; }
.src-toggle:not(.on) { opacity: .8; }
.src-check { width: 17px; height: 17px; border-radius: 5px; border: 1px solid #cfd6e0; background: #fff; display: grid; place-items: center; color: #fff; }
.src-mini { position: relative; width: 26px; height: 15px; border-radius: 999px; flex-shrink: 0; background: #cfd6e0; transition: background .16s; display: inline-block; }
.src-mini-thumb { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(13,23,42,.3); transition: transform .16s; }
.src-toggle.on .src-mini-thumb { transform: translateX(11px); }
.src-toggle.on .src-mini-copart { background: #1568c4; }
.src-toggle.on .src-mini-iaai { background: #c0392b; }
.src-toggle.on { color: var(--accent-ink); background: none; }
.src-toggle.on .src-check { background: var(--accent); border-color: var(--accent); }
.src-toggle-copart.on { border-color: transparent; color: #1568c4; background: none; }
.src-toggle-copart.on .src-check { background: #1568c4; border-color: #1568c4; }
.src-toggle-iaai.on { border-color: transparent; color: #c0392b; background: none; }
.src-toggle-iaai.on .src-check { background: #c0392b; border-color: #c0392b; }
.src-check svg { opacity: 0; }
.src-toggle.on .src-check svg { opacity: 1; }
.sp-vin { flex: 1; min-width: 150px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 0 12px; color: var(--faint); }
.sp-vin input { flex: 1; border: none; background: none; padding: 11px 0; font-size: 14px; color: var(--ink); }
.sp-vin input:focus { outline: none; }
.sp-vin:focus-within { border-color: var(--accent); background: #fff; }
.sp-arch { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.sp-arch-lab { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sp-go { min-width: 213px; justify-content: center; flex-shrink: 0; }
.sp-go-txt { display: inline-flex; align-items: baseline; gap: .32em; white-space: nowrap; }
.sp-go-num { font-weight: 800; font-variant-numeric: tabular-nums; transition: opacity .15s; }

/* Przełącznik Archiwum (suwak on/off, w miejscu dawnej Generacji) */
.sp-mode-field { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.sp-mode-field .sp-lab { text-align: center; }
.sp-switch { appearance: none; border: none; background: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; }
/* Usuń duży niebieski/szary box podświetlenia przy dotknięciu na mobile */
.sp-switch, .src-toggle, .sp-cat, .auth-burger { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.sp-switch:focus, .src-toggle:focus, .sp-cat:focus { outline: none; }
.sp-switch:focus-visible, .src-toggle:focus-visible, .sp-cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-switch-track { position: relative; width: 52px; height: 28px; border-radius: 999px; background: var(--line); border: 1px solid var(--line); transition: background .18s; display: block; }
.sp-switch-thumb { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(13,23,42,.28); transition: transform .18s; }
.sp-switch.on .sp-switch-track { background: var(--accent); border-color: var(--accent); }
.sp-switch.on .sp-switch-thumb { transform: translateX(24px); }
/* Archiwum nad markami — domyślnie ukryte, pokazywane tylko na mobile */
.sp-arch-row { display: none; align-items: center; gap: 10px; margin-top: 12px; margin-bottom: 18px; }
.sp-arch-row-hint { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sp-arch-row-ctl { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; }
.sp-arch-row-lab { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.sp-switch-sm .sp-switch-track { width: 42px; height: 24px; }
.sp-switch-sm .sp-switch-thumb { width: 18px; height: 18px; }
.sp-switch-sm.on .sp-switch-thumb { transform: translateX(18px); }

/* Wyniki w trybie archiwum */
.res-layout.res-archive { grid-template-columns: 1fr; }
.res-arch-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; margin-right: 8px; vertical-align: middle; }
.res-arch-tag svg { opacity: .85; }
.sp-go-num.counting { opacity: .55; }
.sp-foot { position: absolute; left: 22px; bottom: 0; transform: translateY(calc(100% - 9px)); z-index: 2; }
.sp-advanced-link { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px 9px 9px; background: var(--surface); border: 1px solid var(--line); border-top: none; border-radius: 0 0 12px 12px; box-shadow: 0 10px 16px -6px rgba(13,23,38,.18); font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: color .15s, background .15s, transform .15s; }
.sp-advanced-link:hover { color: var(--accent-ink); background: var(--accent-soft); transform: translateY(2px); }
.sp-adv-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); flex-shrink: 0; }
.sp-advanced-link:hover .sp-adv-ic { background: #fff; }

/* ---------- Stats strip ---------- */
.stats-strip { max-width: var(--maxw); margin: -22px auto 0; padding: 0 24px; position: relative; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stats-strip.stats-3 { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.stats-3 .stat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; padding: 18px 22px; min-height: 84px; }
.stat-n { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; }
.stat-n.stat-glow { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(110deg, #0c9d57, #34e08a, #19c37d, #0c9d57); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: glowshift 4s linear infinite; filter: drop-shadow(0 2px 3px color-mix(in oklab, #19c37d, transparent 65%)); }
.stat-money { display: inline-flex; align-items: center; color: #0c9d57; -webkit-text-fill-color: #0c9d57; }
.stat-ic-plain { color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); }
.stats-3 .stat-n { font-size: 24px; gap: 8px; line-height: 1.1; text-transform: uppercase; text-wrap: balance; }
.stats-3 .stat-n-text { font-size: 17px; }
.stats-3 .stat-n svg { width: 21px; height: 21px; }
.stat-l { font-size: 13px; color: var(--muted); }
.stats-3 .stat-l { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; font-size: 13px; text-align: center; line-height: 1.2; }
.stat-action { cursor: pointer; flex-direction: row !important; gap: 12px !important; border: 1px solid var(--line); background: var(--surface); transition: border-color .15s, box-shadow .15s, transform .12s; }
.stat-action:hover { border-color: var(--accent); box-shadow: 0 6px 18px color-mix(in oklab, var(--accent), transparent 82%); transform: translateY(-2px); }
.stat-action:active { transform: translateY(0); }
.stat-action-txt { font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.stat-diamond { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; }
.diamond-shape { width: 20px; height: 20px; border: 2.5px solid var(--accent); border-radius: 4px; transform: rotate(45deg); animation: diamondPulse 1.8s ease-in-out infinite; }
@keyframes diamondPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent), transparent 100%); transform: rotate(45deg) scale(1); } 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent), transparent 80%); transform: rotate(45deg) scale(.9); } }

/* ---------- Sections ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: 46px 24px 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
.sec-head.center { flex-direction: column; align-items: center; text-align: center; }
.sec-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.kicker-pulse { animation: kickerPulse 1.8s ease-in-out infinite; }
.kicker-pulse .dot.soon { animation: pulse 1.8s ease-in-out infinite; box-shadow: 0 0 0 4px color-mix(in oklab, var(--soon), transparent 75%); }
@keyframes kickerPulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.sec-title { font-size: clamp(22px, 3vw, 30px); margin-top: 6px; }
.sec-desc { color: var(--muted); max-width: 540px; margin-top: 8px; }

.grid { display: grid; gap: 18px; }
/* Popularne marki — siatka kafelków z szarym logo i nazwą pod spodem */
.brand-grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 14px; }
.brand-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.brand-tile:hover { border-color: #c7d0dc; box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.brand-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); overflow: hidden; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; filter: grayscale(1); opacity: .8; }
/* Aston Martin: szerokie skrzydła — powiększamy samo logo w obrębie kółka */
.brand-logo img[src*="aston-martin"] { transform: scale(1.15); }
.brand-logo img[src*="audi"] { transform: scale(1.2); }
.brand-logo img[src*="bentley"] { transform: scale(1.3); }
.brand-logo img[src*="chevrolet"] { transform: scale(1.35); }
.brand-logo img[src*="cadillac"] { transform: scale(1.25); }
.brand-logo img[src*="chrysler"] { transform: scale(1.3); }
.brand-logo img[src*="dodge"] { transform: scale(2.4); }
.brand-logo img[src*="ferrari"] { transform: scale(1.45) translateY(3%); }
.brand-logo img[src*="fiat"] { transform: scale(1.6); }
.brand-logo img[src*="ford"] { transform: scale(1.7); }
.brand-logo img[src*="gmc"] { transform: scale(1.7); }
.brand-logo img[src*="honda"] { transform: scale(1.7); }
.brand-logo img[src*="hyundai"] { transform: scale(1.8); }
.brand-logo img[src*="infiniti"] { transform: scale(1.8); }
.brand-logo img[src*="jaguar"] { transform: scale(1.7); }
.brand-logo img[src*="jeep"] { transform: scale(1.9); }
.brand-logo img[src*="kia"] { transform: scale(1.55) translateX(-3%); }
.brand-logo img[src*="lamborghini"] { transform: scale(1.3); }
.brand-logo img[src*="land-rover"] { transform: scale(1.9); }
.brand-logo img[src*="lexus"] { transform: scale(1.7); }
.brand-logo img[src*="maybach"] { transform: scale(1.35); }
.brand-logo img[src*="mazda"] { transform: scale(1.7); }
.brand-logo img[src*="mclaren"] { transform: scale(1.6); }
.brand-logo img[src*="mercedes-benz"] { transform: scale(1.3) translate(1%, 2%); }
.brand-logo img[src*="mini"] { transform: scale(1.8); }
.brand-logo img[src*="mitsubishi"] { transform: scale(1.55); }
.brand-logo img[src*="nissan"] { transform: scale(1.6); }
.brand-logo img[src*="porsche"] { transform: scale(1.4); }
.brand-logo img[src*="rolls-royce"] { transform: scale(1.7); }
.brand-logo img[src*="subaru"] { transform: scale(1.35); }
.brand-logo img[src*="renault"] { transform: scale(1.35); }
.brand-logo img[src*="suzuki"] { transform: scale(1.6); }
.brand-logo img[src*="tesla"] { transform: scale(1.6); }
.brand-logo img[src*="toyota"] { transform: scale(1.7); }
.brand-logo img[src*="volkswagen"] { transform: scale(1.35); }
.brand-logo img[src*="volvo"] { transform: scale(1.5); }
.brand-logo img[src*="cadillac"] { transform: scale(1.2); }
.brand-mono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: #8a94a6; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.brand-name { font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.15; }
@media (max-width: 1200px) { .brand-grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 860px) { .brand-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 560px) { .brand-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; } .brand-name { font-size: 11.5px; } }
/* Filtry w wynikach: Marka/Model/Generacja/Aukcja są już w panelu wyszukiwania
   nad wynikami — na desktopie ukrywamy je w sidebarze, by nie dublować.
   Na mobile (≤860px) zostają, bo tam panel bywa zwinięty. */
@media (min-width: 861px) {
  .filters .filt-dup { display: none; }
}
.grid-4 { grid-template-columns: repeat(5, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Vehicle card ---------- */
.vcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform .16s, box-shadow .16s, border-color .16s; }
.vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d6dde7; }
.vcard-media { position: relative; }
.vcard-media .photo { aspect-ratio: 4 / 3; height: auto !important; }

/* WYDAJNOŚĆ: pomiń renderowanie kart poza ekranem (layout+paint). Bezpieczna
   alternatywa dla wirtualizacji listy - przy setkach kart mocno ścina zużycie
   pamięci i pracę renderera (to duża część tych ~500 MB w Chrome). JS (timery,
   fetch) działa dalej; pomijane jest tylko rysowanie niewidocznych kart.
   Gdyby powodowało to skakanie scrolla - usuń ten blok, reszta działa dalej. */
.vcard { content-visibility: auto; contain-intrinsic-size: auto 320px; }
/* Neutralny placeholder pod zdjęciem, zanim się wczyta (bez pustego błysku).
   Wczytany obraz (object-fit: cover) i tak go zakrywa. */
.vcard-media .photo-real { background: #e7ecf2; }
.photo { position: relative; overflow: hidden; background: linear-gradient(135deg, hsl(var(--hue, 220), 18%, 90%), hsl(calc(var(--hue, 220) + 30), 16%, 82%)); display: grid; place-items: center; }
.photo-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 2px, transparent 2px 12px); opacity: .5; }
.photo-label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; color: hsl(var(--hue, 220), 22%, 42%); font-family: "Plus Jakarta Sans", monospace; font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.photo-count { position: absolute; z-index: 3; bottom: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; background: rgba(13,23,38,.62); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 7px; backdrop-filter: blur(3px); }
.vcard-top { position: absolute; top: 9px; left: 9px; right: 9px; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.heart { position: absolute; bottom: 9px; left: 9px; width: 32px; height: 32px; border-radius: 9px; border: none; background: rgba(255,255,255,.92); color: var(--ink-2); display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: transform .12s; }
.heart:hover { transform: scale(1.08); }
.heart.on { color: var(--accent); }
.heart.lg { position: static; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--surface); }

.src-badge { font-family: "Plus Jakarta Sans", sans-serif; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 7px; color: #fff; letter-spacing: .02em; }
.src-copart { background: #1568c4; }
.src-iaai { background: #c0392b; }
.src-badge.sm { font-size: 10px; padding: 3px 6px; }
.src-outline { font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 7px; border: 1.5px solid; background: #fff; letter-spacing: .02em; }
.src-outline-copart { color: #1568c4; border-color: #1568c4; }
.src-outline-iaai { color: #c0392b; border-color: #c0392b; }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); }
.pill .dot { width: 6px; height: 6px; }
.pill-live { color: #0c7a4d; } .pill-live .dot { background: var(--live); }
.pill-soon { color: #b5710b; } .pill-soon svg { color: var(--soon); }
.pill-buy { color: var(--buy); }
.pill-ended { color: var(--muted); } .pill-ended .dot { background: var(--faint); }
/* Zakończona aukcja (archiwum) — czerwony napis i kropka */
.pill-ended.pill-fin { color: var(--danger); } .pill-ended.pill-fin .dot { background: var(--danger); }
/* Data zakończenia aukcji w szczegółach (zakończone / sprzedane) */
.bid-ended-date { display: flex; align-items: center; justify-content: center; text-align: center; gap: 7px; margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: color-mix(in oklab, var(--danger) 10%, transparent); color: color-mix(in oklab, var(--danger), black 20%); font-size: 13px; font-weight: 600; }
.bid-ended-date b { color: color-mix(in oklab, var(--danger), black 30%); font-weight: 700; }
.bid-ended-date svg { color: var(--danger); flex: none; }
/* Aukcja na żywo — licytacja zablokowana, pojazd nadal widoczny */
.pill-onair { color: #0c7a4d; } .pill-onair .dot { background: var(--live); box-shadow: 0 0 0 3px color-mix(in oklab, var(--live), transparent 78%); animation: pulse 1.5s infinite; }
.vd-live { color: #0c7a4d; }
.vd-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px color-mix(in oklab, var(--live), transparent 80%); animation: pulse 1.5s infinite; }

.vcard-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.vcard-title { font-size: 16px; font-weight: 700; line-height: 1.2; }
.spec-row { display: flex; flex-wrap: wrap; gap: 10px; }
.spec { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.spec svg { color: var(--faint); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 7px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.tag-ok { color: #0c7a4d; background: #e7f7ef; border-color: #c5ecd8; }
.tag-warn { color: #b5710b; background: #fdf3e3; border-color: #f6e2bf; }
.tag-dmg { color: var(--muted); }
.tag-cf { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-soft2); }
.loc-row { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.loc-row svg { color: var(--faint); flex-shrink: 0; }
.vcard-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line-2); }
.price-block { display: flex; flex-direction: column; }
.price-label { font-size: 11px; color: var(--muted); font-weight: 600; }
.price-main { font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.price-sub { font-size: 11px; color: var(--faint); font-weight: 600; white-space: nowrap; }
.cta-block { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.buynow { font-size: 11px; font-weight: 700; color: var(--buy); }

/* ---------- Steps (oś procesu) ---------- */
.how { position: relative; background: none; }
.how::before { content: ""; position: absolute; inset: 0; left: calc(50% - 50vw); width: 100vw; background: linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 28%, var(--surface-2) 72%, var(--bg) 100%); z-index: -1; pointer-events: none; }
.proc5 { --proc-ink: #5b54e6; max-width: 1180px; margin: 12px auto 0; }
.proc5-badges { display: grid; grid-template-columns: repeat(5, 1fr); }
.proc5-badge { width: 78px; height: 78px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; color: var(--proc-ink); background: var(--surface); box-shadow: 0 10px 26px -8px rgba(91,84,230,.28), 0 3px 8px rgba(13,23,38,.06), inset 0 0 0 1px #eceefb; }
.proc5-track { position: relative; height: 120px; }
.proc5-wave { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.proc5-dash { fill: none; stroke: #cfd1ee; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 8; }
.proc5-arrow { fill: none; stroke: var(--proc-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.proc5-nodes { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.proc5-col { display: flex; flex-direction: column; align-items: center; }
.proc5-stem { width: 2px; height: 47px; background: var(--proc-ink); opacity: .9; }
.proc5-node { width: 15px; height: 15px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--proc-ink); margin-top: -1px; box-shadow: 0 2px 5px rgba(91,84,230,.25); }
.proc5-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 10px; }
.proc5-step { text-align: center; padding: 0 12px; }
.proc5-head { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 9px; }
.proc5-head h4 { font-size: 17px; letter-spacing: -.01em; }
.proc5-step p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0; text-wrap: pretty; }
/* Holograficzny numerek z animacją shimmer */
.proc5-num { position: relative; overflow: hidden; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, #a78bfa, #818cf8, #38bdf8, #f0abfc); animation: holoHue 9s ease-in-out infinite alternate; box-shadow: 0 4px 12px -3px rgba(129,140,248,.55); text-shadow: 0 1px 2px rgba(60,40,120,.35); }
.proc5-num::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); animation: holoGlow 6s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes holoHue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(75deg); } }
@keyframes holoGlow { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .proc5-num, .proc5-num::after { animation: none; } }
@media (max-width: 720px) {
  .proc5-track { display: none; }
  .proc5-badges, .proc5-steps { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .proc5-badge { width: 56px; height: 56px; }
  .proc5-steps { margin-top: 16px; }
  .proc5-head { flex-direction: column; gap: 6px; }
  .proc5-head h4 { font-size: 14px; }
}

/* ---------- CTA band ---------- */
.cta-band { max-width: var(--maxw); margin: 56px auto 0; padding: 0 24px; }
.cta-inner { background: linear-gradient(120deg, #0e1d33, #143a6b); border-radius: calc(var(--radius) + 4px); padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; position: relative; }
.cta-inner::after { content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; pointer-events: none; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent), transparent 50%), transparent); }
.cta-inner h2 { color: #fff; font-size: 26px; position: relative; }
.cta-inner p { color: #b9c4d6; margin: 8px 0 0; max-width: 460px; position: relative; }
.cta-inner .btn { position: relative; flex-shrink: 0; }

/* ---------- Footer ---------- */
.ftr { margin-top: 0; background: #0c1424; color: #b4c0d2; }
/* Odstęp treść↔stopka: min. 64px na długich stronach, a na krótkich rośnie,
   dosuwając stopkę do fizycznego dołu strony. */
.ftr-spacer { flex: 1 0 64px; }
.ftr-inner { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 28px; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 32px; }
.ftr-brand .logo-word { color: #fff; }
.ftr-brand p { font-size: 13.5px; line-height: 1.6; margin: 16px 0; max-width: 320px; }
.ftr-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.ftr-stats span { font-size: 12px; color: #8a98ad; }
.ftr-stats b { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; color: #fff; }
.ftr-social { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px; margin: 16px 0 4px; }
.ftr-social a { display: inline-flex; align-items: center; gap: 11px; color: #cdd7e6; font-size: 13.5px; font-weight: 500; text-decoration: none; transition: color .18s; width: fit-content; }
.ftr-social a > svg { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: rgba(255,255,255,.06); color: #cdd7e6; transition: background .18s, color .18s; box-sizing: border-box; }
.ftr-social a:hover { color: #fff; }
.ftr-social a:hover > svg { background: var(--accent); color: #fff; }
.ftr-col h4 { color: #fff; font-size: 13px; margin-bottom: 14px; }
.ftr-col button, .ftr-col a.ftr-kw-link { display: block; background: none; border: none; color: #98a6bb; font-size: 13.5px; padding: 5px 0; text-align: left; text-decoration: none; cursor: pointer; }
.ftr-col button:hover, .ftr-col a.ftr-kw-link:hover { color: #fff; }
.ftr-bar { border-top: 1px solid rgba(255,255,255,.08); }
.ftr-bar { max-width: var(--maxw); margin: 0 auto; padding: 16px 24px; display: flex; justify-content: space-between; font-size: 12px; color: #71809a; flex-wrap: wrap; gap: 8px; }

/* ---------- Results ---------- */
.results { max-width: var(--maxw); margin: 0 auto; padding: 22px 24px 0; width: 100%; }
.res-bar { margin-bottom: 18px; }
.crumbs, .det-crumbs { font-size: 13px; color: var(--muted); margin-bottom: 12px; display: flex; gap: 6px; align-items: center; }
.crumbs button, .det-crumbs button { background: none; border: none; color: var(--accent-ink); font-weight: 600; font-size: 13px; padding: 0; }
.res-bar .search-panel { margin-top: 0; box-shadow: var(--shadow-sm); }
.res-layout { display: grid; grid-template-columns: 256px 1fr; gap: 22px; align-items: start; }
.filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.filt-head { display: flex; align-items: center; gap: 8px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 15px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); width: 100%; background: none; border-left: none; border-right: none; border-top: none; color: var(--ink); text-align: left; }
.filt-chev { display: none; }
.filt-grp { display: flex; flex-direction: column; gap: 9px; }
.filt-lab { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; }
.chip:hover { border-color: #cdd5e0; }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip:has(.run-dot) { display: inline-flex; align-items: center; gap: 6px; }
.run-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset; }
.chip.on .run-dot { box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.drive-abbr { font-weight: 700; color: var(--faint); letter-spacing: .02em; }
.chip.on .drive-abbr { color: rgba(255,255,255,.75); }
.chip-more { background: transparent; border-style: dashed; color: var(--accent); font-weight: 700; }
.chip-more:hover { border-color: var(--accent); background: color-mix(in oklab, var(--accent), transparent 92%); }
.chip:has(.color-dot) { display: inline-flex; align-items: center; gap: 6px; }
.color-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; }
.chip.on .color-dot { box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
/* Suwak zakresu z dwoma uchwytami */
.dual { display: flex; flex-direction: column; gap: 12px; }
.dual-track { position: relative; height: 22px; }
.dual-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; border-radius: 3px; background: var(--line); }
.dual-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 4px; border-radius: 3px; background: var(--accent); }
.dual-input { position: absolute; left: 0; top: 0; width: 100%; height: 22px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.dual-input:focus { outline: none; }
.dual-input::-webkit-slider-runnable-track { background: transparent; border: none; height: 4px; }
.dual-input::-moz-range-track { background: transparent; border: none; height: 4px; }
.dual-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: var(--shadow-sm); cursor: pointer; margin-top: -6px; }
.dual-input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: var(--shadow-sm); cursor: pointer; }
.dual-fields { display: flex; align-items: center; gap: 8px; }
.dual-field { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.dual-field > span { font-size: 12px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.dual-field input { width: 100%; min-width: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; font-weight: 700; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; transition: border-color .15s, box-shadow .15s; }
.dual-field input:hover { border-color: var(--accent); }
.dual-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 80%); }
.dual-field em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.dual-dash { color: var(--muted); flex-shrink: 0; }
.range { -webkit-appearance: none; width: 100%; height: 5px; border-radius: 5px; background: var(--line); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: var(--shadow-sm); cursor: pointer; }
.range-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); }
.switch { width: 42px; height: 24px; border-radius: 999px; border: none; background: #d5dbe5; padding: 3px; display: flex; align-self: flex-start; transition: background .15s; }
.switch .knob { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.switch.on { background: var(--accent); }
.switch.on .knob { transform: translateX(18px); }

.res-main { min-width: 0; }
.vlist { display: flex; flex-direction: column; gap: 14px; }
/* WIRTUALIZACJA BEZ BIBLIOTEKI — content-visibility.
   .vcard mial to od dawna, ale .vrow (wiersz na liscie wynikow, czyli to, co
   uzytkownik widzi po wejsciu w "Aukcje") NIE MIAL. Przy 10 wynikach na strone
   roznica jest niewielka, ale po kilku klknieciach "Wyswietl wiecej" lista ma
   50-150 wierszy i przegladarka liczyla uklad oraz malowala KAZDY z nich.
   content-visibility:auto powoduje, ze wiersze poza viewportem sa pomijane w
   layoucie i malowaniu (przegladarka rezerwuje tylko miejsce z
   contain-intrinsic-size). To daje 80-90% zysku react-window bez dokladania
   biblioteki i bez przepisywania listy na okno przewijania.
   contain-intrinsic-size dobrane do realnej wysokosci wiersza — zla wartosc
   powoduje "skakanie" paska przewijania. */
.vrow { content-visibility: auto; contain-intrinsic-size: auto 212px; }
.vrow { position: relative; display: grid; grid-template-columns: 264px minmax(0, 1fr) 210px; gap: 18px; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: box-shadow .16s, border-color .16s, transform .16s; }
.vrow:hover { box-shadow: var(--shadow-md); border-color: #d6dde7; transform: translateY(-2px); }
/* Rozciągnięty link karty: pokrywa cały boks, żeby prawy klik / Ctrl+klik /
   środkowy klik dawały „Otwórz w nowej karcie". Leży pod interaktywnymi
   kontrolkami (serce, przyciski), które podnosimy z-indexem ponad niego. */
.vrow-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: transparent; text-decoration: none; font-size: 0; }
.vrow .heart { z-index: 2; }
.vrow-actions { position: relative; z-index: 2; }
.vrow-media { position: relative; min-height: 100%; }
.vrow-media .photo { height: 100% !important; min-height: 190px; aspect-ratio: auto; border-radius: 0; }
.vrow-media .photo-real .photo-img { object-fit: cover; }
.vrow-badges { position: absolute; top: 9px; left: 9px; display: flex; gap: 6px; }
.vrow-media .heart { bottom: 9px; left: 9px; }
.vrow-info { display: flex; flex-direction: column; gap: 10px; padding: 14px 6px; min-width: 0; }
.vrow-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vrow-title { font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.vrow-headid { font-family: "Plus Jakarta Sans", monospace; font-size: 12px; font-weight: 600; color: var(--muted); }
.vrow-head-src { display: none; align-items: center; justify-content: center; padding: 8px 18px; border-radius: 10px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; flex-shrink: 0; }
.vrow-head-src.is-copart { background: #1163c7; }
.vrow-head-src.is-iaai { background: #c02a2a; }
.vrow-src { font-family: "Plus Jakarta Sans", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); }
.vrow-src.src-out-copart { color: #1163c7; border-color: color-mix(in oklab, #1163c7 35%, var(--line)); background: color-mix(in oklab, #1163c7 7%, var(--surface)); }
.vrow-src.src-out-iaai { color: #c02a2a; border-color: color-mix(in oklab, #c02a2a 35%, var(--line)); background: color-mix(in oklab, #c02a2a 7%, var(--surface)); }
.vrow-idline { display: inline-flex; align-items: center; gap: 6px; font-family: "Plus Jakarta Sans", monospace; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.vrow-idline svg { color: var(--faint); flex-shrink: 0; }
/* Pasek parametrów (kluczyki, skrzynia, napęd, silnik, paliwo) — JEDEN rząd,
   jedna karta; na wąskich ekranach przewijalny poziomo, bez zawijania do 3 linii. */
.vrow-chips { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0; width: fit-content; max-width: 100%; margin-inline: auto; overflow-x: auto; scrollbar-width: none; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 2px; }
.vrow-chips::-webkit-scrollbar { display: none; }
.vrow-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); padding: 8px 14px; border: none; background: transparent; white-space: nowrap; position: relative; flex: 0 0 auto; }
.vrow-chip + .vrow-chip::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: var(--line-2); }
.vrow-chip svg { color: var(--ink-2); flex-shrink: 0; }
/* Skrzynia: litera A/M w kółku */
.gbox-badge { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; border: 1.6px solid var(--ink-2); color: var(--ink-2); font-size: 11.5px; font-weight: 800; line-height: 1; }
/* Napęd (RWD/FWD/AWD) i silnik (2.0L / 4 cyl.) — zwięzły token tekstowy */
.drive-tok { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--ink-2); }
.eng-tok { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
/* Pasek parametrów w wersji KOMPUTEROWEJ: wyrównany do LEWEJ, pełne etykiety
   tekstowe (Tak/Nie, Automatyczna/Manualna, Benzyna/Diesel/…). Domyślnie ukryty
   — pokazujemy go dopiero na desktopie, a mobilny (.vrow-chips) chowamy. */
.vrow-chips-desktop { display: none; }
@media (min-width: 861px) {
  .vrow-chips { display: none; }
  /* W panelu klienta ("Moje pojazdy" itd.) używamy kompaktowego paska mobilnego
     (same ikony, bez napisów) także na desktopie — wyrównany DO LEWEJ, w linii
     z tytułem i etykietami (nie wyśrodkowany jak na mobile). */
  .vrow-chips-panel { display: flex; justify-content: flex-start; margin-inline: 0; overflow: visible; }
  /* Chmurka (tooltip) po najechaniu na kafelek parametru — tylko w panelu. */
  .vrow-chips-panel .vrow-chip[data-tip] { cursor: default; }
  .vrow-chips-panel .vrow-chip[data-tip]:hover::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--ink, #0d141d); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
    padding: 7px 11px; border-radius: 9px; white-space: nowrap; z-index: 60; pointer-events: none;
    box-shadow: 0 8px 22px rgba(13,20,38,.24);
  }
  .vrow-chips-desktop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; width: fit-content; max-width: 100%; margin: 0; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 2px 4px; }
  .vrow-dchip { display: inline-flex; align-items: center; gap: 7px; position: relative; font-size: 12.5px; font-weight: 700; color: var(--ink-2); padding: 8px 14px; white-space: nowrap; }
  .vrow-dchip + .vrow-dchip::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: var(--line-2); }
  .vrow-dchip svg { color: var(--ink-2); flex-shrink: 0; }
  /* Wartości parametrów (Przebieg, Lokalizacja, Uszkodzenia, Stan, Nadwozie,
     Kolor) — inna, cieńsza czcionka niż reszta, tylko na desktopie. */
  .vrow .vrow-specs .vrow-spec-val { font-family: "Inter", system-ui, sans-serif; font-weight: 500; }
}
/* Parametry pojazdu: etykieta NAD wartością (nie zlewają się w jedną linię). */
.vrow-specs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 16px; margin-top: 6px; }
.vrow-spec { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vrow-spec-lab { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.stan-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex-shrink: 0; }
.vrow-spec-val { font-size: 14px; font-weight: 700; color: #111; line-height: 1.3; overflow-wrap: anywhere; min-width: 0; }
.vrow-price { align-self: stretch; display: flex; flex-direction: column; align-items: stretch; justify-content: center; text-align: center; gap: 8px; padding: 14px 16px; border-left: 1px solid var(--line-2); background: var(--surface-2); }
.vrow-price .price-label { font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.vrow-price .price-main { font-family: "Plus Jakarta Sans", sans-serif; font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; }
/* Boks oferty — bez obramówki, miękkie tło, lekki cień */
.offer-box { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 14px; border: none; border-radius: 11px; background: color-mix(in oklab, var(--ink) 5%, var(--surface)); box-shadow: 0 2px 6px rgba(13,23,38,.08), 0 1px 2px rgba(13,23,38,.06); }
.offer-box .price-label { font-size: 9px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.offer-box .price-main { font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1.15; }
.offer-box.buy-box { background: color-mix(in oklab, var(--buy) 13%, var(--surface)); }
.offer-box.buy-box .price-label { color: color-mix(in oklab, var(--buy), black 30%); }
/* Zakończona aukcja — cena końcowa na jasnoczerwono */
.offer-box.ended-box { background: color-mix(in oklab, var(--danger) 11%, var(--surface)); }
.offer-box.ended-box .price-label { color: color-mix(in oklab, var(--danger), black 18%); }
.offer-box.ended-box .price-main { color: color-mix(in oklab, var(--danger), black 12%); }
/* Jeden boks przedzielony na pół (pionowo, obok siebie): aktualna oferta + kup teraz */
.offer-combo { display: flex; flex-direction: row; border: none; border-radius: 11px; overflow: hidden; background: color-mix(in oklab, var(--ink) 5%, var(--surface)); box-shadow: 0 2px 6px rgba(13,23,38,.08), 0 1px 2px rgba(13,23,38,.06); }
.offer-half { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 7px 8px; }
.offer-half + .offer-half { border-left: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); }
.offer-half.buy-half { background: color-mix(in oklab, var(--buy) 13%, var(--surface)); }
.offer-half.buy-half .price-label { color: color-mix(in oklab, var(--buy), black 30%); }
.offer-half .price-label { font-size: 9px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.offer-half .price-main { font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1.15; }
.buy-amount { font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; font-weight: 600; color: color-mix(in oklab, var(--buy), black 16%); letter-spacing: -.02em; line-height: 1.15; }
.vrow-buyprice { font-size: 12px; font-weight: 700; color: var(--buy); }
/* Data zakończenia (góra) + czerwone odliczanie (dół) nad boksem oferty */
.vrow-deadline { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-bottom: 7px; line-height: 1.2; text-align: center; }
.vd-date { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.vd-count { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; color: var(--danger); }
.vd-count > span { white-space: nowrap; }
.vd-count svg { color: var(--danger); flex-shrink: 0; }
.vd-ended { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.vrow-actions { display: flex; gap: 8px; width: 100%; margin-top: 10px; }
.vrow-cta { flex: 1; padding: 11px 10px; font-size: 14px; }
.vrow-cta.half { font-size: 12.5px; padding: 11px 6px; }
/* Zielony gradientowy przycisk Kup teraz (podwójny gradient, bez efektu 3D) */
.btn-buy {
  color: #fff;
  background: linear-gradient(135deg, #18c062 0%, #11a352 52%, #0a8f43 100%);
  border: none;
  border-radius: calc(var(--radius) * .72);
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 6px 18px color-mix(in oklab, #11a352, transparent 64%), 0 2px 5px rgba(13,23,42,.16);
  transition: filter .2s, transform .15s, box-shadow .2s;
}
.btn-buy:hover { filter: brightness(1.06); background: linear-gradient(135deg, #1fcf6c 0%, #13b059 52%, #0c9b49 100%); box-shadow: 0 8px 22px color-mix(in oklab, #11a352, transparent 56%), 0 3px 7px rgba(13,23,42,.2); }
.btn-buy:active { transform: translateY(1px); box-shadow: 0 4px 12px color-mix(in oklab, #11a352, transparent 64%), 0 1px 3px rgba(13,23,42,.16); }
.res-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.res-top-right { display: flex; align-items: center; gap: 12px; }
.res-refresh { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 650; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.res-refresh:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.res-refresh:disabled { cursor: default; }
.res-refresh .rr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px color-mix(in oklab, var(--live), transparent 78%); animation: pulse 2s infinite; flex: none; }
.res-refresh svg { color: var(--muted); transition: transform .4s; }
.res-refresh.spinning svg { animation: sp-rot .7s linear infinite; color: var(--accent); }
.res-refresh.spinning .rr-dot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 78%); }
.rr-txt { white-space: nowrap; }
@media (max-width: 560px) { .rr-txt { display: none; } }
.res-count { font-size: 14px; color: var(--muted); }
.res-count b { color: var(--ink); font-family: "Plus Jakarta Sans", sans-serif; }
.res-count-note { color: var(--muted); opacity: .85; font-size: 12px; }
.load-more { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 0 8px; }
.load-more-btn { min-width: 220px; height: 46px; font-size: 15px; }
.load-more-info { font-size: 13px; color: var(--muted); }
.full-load-bar { height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; margin: 0 0 14px; }
.full-load-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #5f8cff); transition: width .4s ease; }
.sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.watched-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.watched-title { display: flex; align-items: center; gap: 10px; font-size: clamp(22px, 3vw, 30px); }
.watched-sub { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.empty svg { color: var(--faint); }
.empty h3 { margin: 14px 0 6px; color: var(--ink); }
.empty p { margin-bottom: 16px; }

/* ---------- Detail ---------- */
.detail { max-width: var(--maxw); margin: 0 auto; padding: 20px 24px 0; width: 100%; }
.det-grid { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.det-similar { padding: 46px 0 0; }
.det-similar .sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
.det-similar .sec-title { font-size: clamp(22px, 3vw, 30px); margin-top: 6px; }
.det-left { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Zakładki mobilne (Licytacja / Informacje) — ukryte na desktopie */
.det-mtabs { display: none; gap: 6px; padding: 5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; }
.det-mtab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 10px; border: none; background: none; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.det-mtab svg { color: currentColor; }
.det-mtab.on { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-sm, 0 1px 3px rgba(16,24,40,.1)); }
.det-titlebar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.det-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.det-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.det-head-loc { display: inline-flex; align-items: baseline; gap: 5px; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; line-height: 1.3; }
.det-head-loc b { font-weight: 700; color: var(--muted); }
.gallery { position: relative; }
.det-photo-heart { position: absolute !important; top: 12px; right: 12px; bottom: auto; left: auto; z-index: 4; }
.det-info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 18px; }
.di-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.di-row:last-child { border-bottom: none; }
.di-lab { font-size: 13px; color: var(--muted); font-weight: 600; flex: none; }
.di-mono { font-family: "Plus Jakarta Sans", monospace; font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.di-val { display: inline-flex; align-items: center; gap: 7px; }
.copy-btn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); display: grid; place-items: center; flex-shrink: 0; transition: background .14s, color .14s, border-color .14s; }
.copy-btn:hover { background: var(--accent-soft); border-color: var(--accent-soft2); color: var(--accent-ink); }
.copy-btn.done { background: #e7f7ef; border-color: #c5ecd8; color: #0c7a4d; }
.di-chip { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12.5px; font-weight: 800; line-height: 1.15; padding: 4px 11px; border-radius: 7px; border: 1.5px solid; background: #fff; white-space: normal; word-break: break-word; text-align: right; max-width: 100%; min-width: 0; flex-shrink: 1; }
.di-seller-priv { border: none; background: #fdf7e3; color: #b8860a; }
.di-seller-warn { position: relative; cursor: help; animation: sellerPulse 1.8s ease-in-out infinite; }
@keyframes sellerPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,168,0,0); } 50% { box-shadow: 0 0 0 4px rgba(224,168,0,.28); } }
.di-tip { position: absolute; bottom: calc(100% + 10px); right: 0; width: 270px; white-space: normal; background: #1a1410; color: #fce9c4; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-transform: none; padding: 11px 13px; border-radius: 9px; box-shadow: 0 12px 30px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 20; pointer-events: none; }
.di-tip::after { content: ""; position: absolute; top: 100%; right: 18px; border: 6px solid transparent; border-top-color: #1a1410; }
.di-seller-warn:hover .di-tip, .di-seller-warn:focus .di-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.di-seller-warn .di-tip { top: calc(100% + 10px); bottom: auto; text-align: center; color: #fff; transform: translateY(-4px); }
.di-seller-warn .di-tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1a1410; }
.di-doc-warn { position: relative; cursor: help; animation: docPulse 1.8s ease-in-out infinite; }
@keyframes docPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } 50% { box-shadow: 0 0 0 4px rgba(229,72,77,.28); } }
.di-doc-warn:hover .di-tip, .di-doc-warn:focus .di-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.di-seller-ins { border: none; background: #e7f7ef; color: #0c7a4d; }
.di-seller-fleet { border: none; background: #e8f0fe; color: #1d5fd4; position: relative; }
.di-seller-fleet:hover .di-tip, .di-seller-fleet:focus .di-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.di-seller-fleet .di-tip { top: calc(100% + 10px); bottom: auto; text-align: center; color: #fff; transform: translateY(-4px); }
.di-seller-fleet .di-tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1a1410; }
.di-doc-bad { border-color: #e5484d; background: #fdecec; color: #b3282c; }
.di-doc-mid { border: none; background: #fdf7e3; color: #b8860a; }
.di-doc-good { border: none; background: #e7f7ef; color: #0c7a4d; justify-content: center; text-align: center; line-height: 1.3; }
.di-doc-pending { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 4px 7px 4px 9px; border: none; background: #e7f7ef; color: #0c7a4d; cursor: default; text-align: right; }
.di-doc-pending svg { margin-right: -1px; }
.di-doc-risk { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 9px; border: 1.5px solid #f0c489; background: #fff4e5; color: #c17a00; cursor: help; text-align: center; }
.di-doc-bad.di-doc-warn { justify-content: center; gap: 5px; padding: 4px 9px; text-align: center; }
.di-doc-risk:hover .di-tip, .di-doc-risk:focus .di-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.di-doc-pending:hover .di-tip, .di-doc-pending:focus .di-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.di-doc-pending .di-tip { top: calc(100% + 10px); bottom: auto; text-align: center; color: #fff; transform: translateY(-4px); }
.di-doc-pending .di-tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1a1410; }
.det-badges { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.det-h1 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; }
.det-loc-card { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 8px; padding: 6px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.det-loc-line { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.det-loc-line svg { color: var(--accent); flex: none; }
.det-loc-line em { font-style: normal; font-weight: 600; color: var(--muted); }
.det-vin { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); }
.det-vin-no { font-family: "Plus Jakarta Sans", monospace; font-weight: 700; color: var(--ink-2); letter-spacing: .01em; background: rgba(13,23,38,.055); padding: 4px 10px; border-radius: 6px; }
/* Status aukcji obok VIN — tylko na mobile (desktop ma pigułkę w rzędzie badge) */
.det-status-mobile { display: none; }
/* Nowy nagłówek pojazdu: tytuł + źródło (IAAI/Copart), pod spodem dwa boxy: lokalizacja/wysyłka + VIN */
.det-titlerow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.det-titlerow .det-h1 { margin: 0; }
/* źródło (Copart/IAAI) obok tytułu — nieco większe i wypoziomowane względem tytułu */
.det-titlerow .src-badge { font-size: 13px; padding: 6px 11px; border-radius: 8px; align-self: center; }
.det-info-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.det-info-box { display: inline-flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; padding: 4px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; }
.det-info-item { font-size: 14px; color: var(--ink); line-height: 1.35; }
.det-info-item em { font-style: normal; font-weight: 600; color: var(--muted); margin-right: 5px; }
.det-info-vin { gap: 4px 6px; background: none; border: 0; padding: 0; }
/* Lokalizacja / Wysyłka z — bez białego boksu; każda pozycja jako szary chip (jak VIN) */
.det-info-loc { background: none; border: 0; padding: 0; gap: 8px; }
.det-info-loc .det-info-item { background: rgba(13,23,38,.055); padding: 4px 10px; border-radius: 6px; }
.det-vin-btn { border: 0; cursor: pointer; font-size: inherit; line-height: inherit; -webkit-appearance: none; appearance: none; transition: background .12s ease; }
.det-vin-btn:hover { background: rgba(13,23,38,.1); }
.det-vin-btn:active { transform: translateY(.5px); }
/* Chmurka potwierdzenia skopiowania VIN — lewy dolny róg */
.vin-copied-toast { position: fixed; left: 18px; bottom: 18px; z-index: 3000; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .01em; padding: 10px 14px; border-radius: 10px; box-shadow: 0 8px 24px rgba(13,23,38,.22); animation: vinToastIn .18s ease-out; }
@keyframes vinToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* Sekcja „Podobne" — kafelki bez sekcji środkowej (przebieg / tytuł / uszkodzenia /
   lokalizacja). Zostaje tylko nazwa i stopka (aktualna oferta + Licytuj). */
.det-similar .vcard-body .spec-row,
.det-similar .vcard-body .tag-row,
.det-similar .vcard-body .loc-row { display: none; }
.det-similar .vcard-title { margin-bottom: 0; }
.det-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.det-pill { font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 6px 12px; border-radius: 8px; border: 1.5px solid; background: #fff; }
.det-pill b { font-weight: 800; }
.det-seller-priv { border-color: #e0a800; background: #fdf7e3; color: #8a6d00; }
.det-seller-ins { border-color: #19a463; background: #e7f7ef; color: #0c7a4d; }
.det-doc-bad { border-color: #e5484d; background: #fdecec; color: #b3282c; }
.det-doc-mid { border-color: #e0a800; background: #fdf7e3; color: #8a6d00; }
.det-doc-good { border-color: #19a463; background: #e7f7ef; color: #0c7a4d; }
.gallery { display: flex; flex-direction: column; gap: 10px; }
.gallery .photo { border-radius: var(--radius); border: 1px solid var(--line); aspect-ratio: 4 / 3; height: auto !important; }
.thumbs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.thumb { padding: 0; position: relative; aspect-ratio: 1/1; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; background: linear-gradient(135deg, hsl(var(--hue,220),18%,90%), hsl(calc(var(--hue,220) + 30),16%,82%)); display: grid; place-items: center; color: hsl(var(--hue,220),20%,48%); }
.thumb-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 2px, transparent 2px 10px); opacity: .5; }
.thumb.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 70%); }
.thumb.more { background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 13px; padding: 0; }
.thumb-more-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.42); }
.thumb-more-overlay { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-weight: 800; font-size: 20px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

.det-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.det-sec { font-size: 16px; margin-bottom: 14px; }
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 10px; }
.spec-item:nth-child(1) { border-top-left-radius: 9px; }
.spec-item:nth-child(2) { border-top-right-radius: 9px; }
.spec-item:nth-last-child(2) { border-bottom-left-radius: 9px; }
.spec-item:nth-last-child(1) { border-bottom-right-radius: 9px; }
.spec-item { display: flex; justify-content: space-between; gap: 10px; background: var(--surface); padding: 11px 14px; font-size: 13px; }
.spec-item span { color: var(--muted); }
.spec-item b { color: var(--ink); font-weight: 700; text-align: right; }
.spec-copy { display: inline-flex; align-items: center; gap: 7px; }
.spec-year-lab { display: inline-flex; align-items: center; gap: 6px; }
/* Stan (run_status) — kolorowy napis, bez ramki/tła */
.run-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.run-pill .run-dot { display: none; }
.run-go, .spec-item span.run-go { color: #15a34a; }
.run-start, .spec-item span.run-start { color: #2563eb; }
.run-no, .spec-item span.run-no { color: #e0a106; }
.run-na, .spec-item span.run-na { color: var(--muted); }
.year-info { position: relative; display: inline-flex; cursor: help; }
.year-q { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 10px; font-weight: 800; line-height: 1; }
.year-tip { position: absolute; left: 0; bottom: calc(100% + 9px); transform: translateY(4px); width: 250px; white-space: normal; background: #e2e8f0; color: #1a2330; font-size: 11.5px; font-weight: 500; line-height: 1.5; padding: 11px 13px; border-radius: 9px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s; z-index: 30; text-align: left; pointer-events: none; }
.year-tip::after { content: ""; position: absolute; top: 100%; left: 16px; border: 6px solid transparent; border-top-color: #e2e8f0; }
.year-info:hover .year-tip, .year-info:focus .year-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.det-sec svg { color: var(--accent); vertical-align: -3px; margin-right: 6px; }
.sh-card .det-sec { display: flex; align-items: center; gap: 0; }
.sh-list { display: flex; flex-direction: column; }
.sh-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.sh-row:last-child { border-bottom: none; }
.sh-date { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--ink); }
.sh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
.sh-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-meta { font-size: 12.5px; color: var(--muted); }
.sh-price { font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 700; color: var(--accent-ink); letter-spacing: -.02em; }
.sh-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 16px 8px; color: var(--muted); }
.sh-empty svg { color: var(--faint); }
.sh-empty p { font-size: 13px; line-height: 1.55; margin: 0; max-width: 380px; }
.sh-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0; cursor: pointer; }
.sh-toggle-title { display: flex; align-items: center; margin: 0; }
.sh-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; margin-left: 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 700; }
.sh-chev { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); color: var(--muted); transition: transform .22s; }
.sh-chev.open { transform: rotate(180deg); background: var(--accent); color: #fff; }
.sh-table-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--line-2); border-radius: 10px; }
.sh-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.sh-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.sh-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.sh-table tr:last-child td { border-bottom: none; }
.sh-table tbody tr:hover { background: var(--surface-2); }
.sh-td-mono { font-family: "Plus Jakarta Sans", monospace; color: var(--ink-2); white-space: nowrap; }
.sh-td-price { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.sh-td-seller { color: var(--muted); }
.sh-status { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.sh-status-sold { background: #e7f7ef; color: #0c7a4d; }
.sh-status-unsold { background: #fdecec; color: #b3282c; }
.sh-status-na { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

.det-right { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.bid-card { position: relative; z-index: 3; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-md); }
.bid-status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bid-bids { font-size: 12px; color: var(--muted); font-weight: 600; }
.bid-now { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.bid-col { display: flex; flex-direction: column; min-width: 0; }
.bid-col-you { padding-left: 12px; border-left: 1px solid var(--line-2); }
.bid-val-you { color: var(--accent-ink); }
.bid-lab { font-size: 12px; color: var(--muted); font-weight: 600; }
.bid-val { font-family: "Plus Jakarta Sans", sans-serif; font-size: 36px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; }
.bid-pln { font-size: 13px; color: var(--faint); font-weight: 600; }

/* Box "sprzedany" - czerwony, półprzezroczysty, wyśrodkowany (zamiast oferty) */
.bid-sold-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding: 16px 18px;
  margin-bottom: 16px;
  background: rgba(229, 72, 77, .07);
  border: 1.5px solid rgba(229, 72, 77, .45);
  border-radius: 12px;
}
.bid-sold-lab { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 800; color: #b3282c; text-transform: uppercase; letter-spacing: .03em; line-height: 1.2; margin-bottom: 8px; white-space: nowrap; }
.bid-sold-lab svg { flex-shrink: 0; }
.bid-sold-price-lab { font-size: 12px; font-weight: 600; color: #c0535a; }
.bid-sold-val { font-family: "Plus Jakarta Sans", sans-serif; font-size: 34px; font-weight: 800; color: #b3282c; letter-spacing: -.02em; line-height: 1.1; }
.bid-sold-pln { font-size: 13px; font-weight: 600; color: #c0535a; }

/* Korekta ceny sprzedaży — okienko zamiast szarego komunikatu */
.sold-edit {
  margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); display: flex; flex-direction: column; gap: 10px;
}
.sold-edit-lab { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.sold-edit .bid-input-row { margin-bottom: 0; }
.sold-edit-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sold-edit-pln { font-size: 13px; font-weight: 600; color: var(--muted); }
.sold-edit-reset {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.sold-edit-reset:hover { filter: brightness(.9); }
.bid-input-row { display: flex; gap: 8px; margin-bottom: 10px; }
.step-btn { width: 44px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; font-size: 20px; font-weight: 600; color: var(--ink-2); }
.step-btn:hover { border-color: var(--accent); color: var(--accent); }
.bid-input { flex: 1; display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; background: var(--surface-2); font-weight: 700; color: var(--muted); }
.bid-input input { flex: 1; border: none; background: none; padding: 12px 0; font-size: 18px; font-weight: 700; font-family: "Plus Jakarta Sans", sans-serif; color: var(--ink); width: 100%; }
.bid-input input:focus { outline: none; }
.bid-input:focus-within { border-color: var(--accent); background: #fff; }
.bid-card .btn { margin-top: 8px; }
.bid-card .btn-accent { position: relative; z-index: 2; }
/* Zleć szybki zakup - zielony border + krążące światło */
@property --qb-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.quick-buy { position: relative; margin-top: 8px; background: #fff; color: #0c7a4d; border: none; padding: 2px; isolation: isolate; overflow: hidden; }
.quick-buy::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--qb-angle), transparent 0deg, transparent 250deg, #34e08a 300deg, #19a463 340deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: qb-spin 2.4s linear infinite; }
.quick-buy::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--qb-angle), transparent 0deg, transparent 280deg, #34e08a 320deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: blur(5px); animation: qb-spin 2.4s linear infinite; }
.qb-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; background: #fff; border: 1.5px solid #19a463; border-radius: calc(var(--radius) * .72 - 2px); padding: 12px 20px; font-weight: 700; font-size: 15px; color: #0c7a4d; transition: background .15s; }
.quick-buy:hover .qb-inner { background: #e7f7ef; }
@keyframes qb-spin { to { --qb-angle: 360deg; } }
.bid-note { font-size: 11.5px; color: var(--faint); margin: 12px 0 0; line-height: 1.5; }
.bid-low-note { font-size: 12px; color: var(--danger); font-weight: 600; margin: 8px 0 0; line-height: 1.45; }
.bid-error { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px; background: #fdecec; border: 1px solid #f5c6c6; border-radius: 8px; font-size: 13px; font-weight: 600; color: #b3282c; line-height: 1.45; }
.bid-error svg { flex-shrink: 0; margin-top: 1px; }
.bid-card .btn-accent:disabled { background: #c8cfda; color: #fff; cursor: not-allowed; box-shadow: none; }

.calc-card { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.calc-head { display: flex; align-items: center; gap: 8px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.calc-rows { display: flex; flex-direction: column; gap: 9px; }
.calc-row { display: flex; justify-content: space-between; font-size: 13px; }
.calc-row span { color: var(--muted); }
.calc-row b { color: var(--ink); font-weight: 700; }
.calc-total { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.calc-total-row { display: flex; justify-content: space-between; align-items: baseline; }
.calc-total-row span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.calc-total-row b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; color: var(--accent-ink); }
.calc-pln { text-align: right; font-size: 12px; color: var(--muted); margin-top: 2px; }
.calc-rate-note { margin-top: 9px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .01em; white-space: nowrap; }
.calc-rate-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1f8a5b; box-shadow: 0 0 0 3px color-mix(in oklab, #1f8a5b, transparent 80%); flex: none; }
.calc-route { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding: 11px; background: var(--surface-2); border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.calc-row-fee { align-items: center; }
.calc-fee-toggle { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.calc-fee-caret { transition: transform .18s ease; color: var(--muted); }
.calc-fee-caret.open { transform: rotate(180deg); }
.calc-fee-breakdown { display: flex; flex-direction: column; gap: 7px; margin: 2px 0 6px; padding: 9px 12px; background: var(--surface-2); border-radius: 9px; }
.calc-fee-line { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.calc-fee-line b { color: var(--ink-2); font-weight: 600; }
.calc-fee-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.calc-fee-seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 2px; gap: 2px; }
.calc-seg-btn { border: none; background: none; padding: 4px 10px; font-size: 11.5px; font-weight: 600; color: var(--muted); border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; }
.calc-seg-btn.on { background: var(--accent); color: #fff; }
.calc-sim { display: flex; align-items: stretch; gap: 8px; margin: 12px 0 4px; }
.calc-sim-step { flex: none; width: 44px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: 8px; color: var(--ink-2); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.calc-sim-step:hover { border-color: var(--accent); color: var(--accent); }
.calc-sim-step:active { background: var(--surface-2); }
.calc-sim-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 12px; transition: border-color .15s; }
.calc-sim-field:focus-within { border-color: var(--accent); }
.calc-sim-cur { font-size: 16px; font-weight: 700; color: var(--muted); }
.calc-sim-input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-align: center; }
.calc-route svg { color: var(--accent); }
.calc-line { flex: 1; max-width: 60px; border-top: 1.5px dashed #c3ccd8; height: 1px; display: flex; align-items: center; justify-content: center; position: relative; }
.calc-line svg { background: var(--surface-2); padding: 0 3px; }
.calc-note { font-size: 11px; color: var(--faint); margin: 10px 0 0; }
/* Modal potwierdzenia licytacji */
.bidc-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(9,16,28,.62); backdrop-filter: blur(5px); animation: bidcFade .2s ease; }
@keyframes bidcFade { from { opacity: 0; } }
.bidc-modal { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border-radius: 18px; padding: 26px; box-shadow: 0 40px 90px rgba(9,16,28,.5); animation: bidcUp .26s cubic-bezier(.34,1.4,.5,1); }
@keyframes bidcUp { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.bidc-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 14px; }
.bidc-close:hover { background: var(--surface-2); color: var(--ink); }
.bidc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.bidc-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); flex-shrink: 0; }
.bidc-head h3 { font-size: 18px; }
.bidc-summary { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.bidc-veh { font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 700; }
.bidc-lot { font-family: "Plus Jakarta Sans", monospace; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.bidc-max { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.bidc-max span { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.bidc-max b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; color: var(--accent-ink); letter-spacing: -.02em; }
.bidc-max-prev { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.bidc-max-prev b { font-size: 16px; color: var(--muted); }
.bidc-risk { display: flex; gap: 11px; background: #fdf3e3; border: 1px solid #f6e2bf; border-radius: 11px; padding: 13px 15px; margin-bottom: 16px; }
.bidc-risk svg { color: #b5710b; flex-shrink: 0; margin-top: 1px; }
.bidc-risk p { font-size: 12.5px; line-height: 1.55; color: #7a5a12; margin: 0; }
.bidc-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; padding: 8px 0; }
.bidc-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.bidc-box { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line); background: #fff; display: grid; place-items: center; color: #fff; margin-top: 1px; transition: background .15s, border-color .15s; }
.bidc-box svg { opacity: 0; }
.bidc-check input:checked + .bidc-box { background: var(--accent); border-color: var(--accent); }
.bidc-check input:checked + .bidc-box svg { opacity: 1; }
.bidc-check span:last-child { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.bidc-confirm { margin-top: 14px; }
.bidc-confirm:disabled { opacity: .45; cursor: not-allowed; background: #c8cfda; }
.bidc-cancel { display: block; width: 100%; background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 600; padding: 12px 0 2px; }
.bidc-cancel:hover { color: var(--ink); }

/* ---------- Payment (Opłać pojazd) modal ---------- */
.pay-modal { width: min(520px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; }
.pay-pln { font-size: 12px; color: var(--muted); font-weight: 600; text-align: right; margin-top: 4px; }
.pay-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pay-row { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.pay-row-lab { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 3px; }
.pay-row-val { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.pay-row-text { font-size: 14px; color: var(--ink); font-weight: 600; word-break: break-word; flex: 1; min-width: 0; }
.pay-row.big .pay-row-text { font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.pay-row.empty .pay-row-text { color: var(--faint); font-weight: 600; }
.pay-copy { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--accent-ink); background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; cursor: pointer; transition: background .15s, border-color .15s; }
.pay-copy:hover { background: var(--accent-soft); border-color: var(--accent); }
.pay-risk { background: #e7f7ef; border-color: #b9e6cc; }
.pay-risk svg { color: #0c7a4d; }
.pay-risk p { color: #0c5e3b; }

/* ---------- Quick Buy modal ---------- */
.qb-ic { background: linear-gradient(135deg, #f29c1f 0%, #e87b16 100%) !important; }
.btn-qb { background: linear-gradient(135deg, #f29c1f 0%, #e87b16 100%); color: #fff; border: none; font-weight: 700; }
.btn-qb:hover { filter: brightness(1.08); }
.btn-qb:disabled { opacity: .45; cursor: not-allowed; }
.qb-price-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-top: 10px; }
.qb-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qb-price-row.sub { justify-content: flex-end; margin-top: 2px; font-size: 13px; color: var(--muted); }
.qb-price { font-size: 22px; font-weight: 800; color: #e87b16; }
.qb-risk { background: #fef5e2; border-color: #f5dca0; }
.qb-risk svg { color: #e87b16; }
.qb-details { display: flex; flex-direction: column; gap: 0; margin: 14px 0 6px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.qb-det-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; font-size: 13px; border-bottom: 1px solid var(--line-2); }
.qb-det-row:last-child { border-bottom: none; }
.qb-det-row b { font-weight: 700; }
.qb-det-row.total { background: var(--surface-2); font-weight: 700; font-size: 14px; }

/* ===== Szybki zakup — przeprojektowany modal (qbm) ===== */
.qbm-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 24px;
  background: rgba(9,16,28,.5); backdrop-filter: blur(6px);
  animation: bidcFade .2s ease;
}
.qbm-modal {
  position: relative; width: min(440px, 100%);
  max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border-radius: 22px;
  padding: 40px 36px 30px;
  box-shadow: 0 30px 80px rgba(9,16,28,.28), 0 6px 20px rgba(9,16,28,.12);
  animation: bidcUp .26s cubic-bezier(.16,.84,.34,1);
}
.qbm-close {
  position: absolute; top: 18px; right: 18px;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: transparent; color: var(--faint);
  font-size: 15px; line-height: 1; display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.qbm-close:hover { background: var(--surface-2); color: var(--ink); }

.qbm-head { text-align: center; margin-bottom: 22px; }
@property --qbm-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.qbm-head h3 {
  display: inline-block; margin: 0 auto; padding: 14px 30px; border-radius: 14px;
  font-size: 21px; font-weight: 600; letter-spacing: .01em; text-transform: none; white-space: nowrap; color: #fff;
  text-shadow: 0 1px 3px rgba(4,42,26,.35);
  background: linear-gradient(100deg, #0e9a51 0%, #16b360 50%, #0e9a51 100%);
  background-size: 220% 100%;
  animation: qbmGradient 7s ease-in-out infinite alternate;
  box-shadow: 0 8px 26px rgba(18,179,95,.42), 0 0 0 1px rgba(255,255,255,.06) inset;
}
@keyframes qbmGradient { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .qbm-head h3 { animation: none; } }

.qbm-veh { text-align: center; margin-bottom: 26px; }
.qbm-veh-name { font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); }
.qbm-veh-lot { font-size: 12.5px; color: var(--muted); margin-top: 3px; letter-spacing: .01em; }

.qbm-price {
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 0 24px; margin-bottom: 4px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.qbm-price-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.qbm-price-val {
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 42px; font-weight: 800;
  letter-spacing: -.035em; color: var(--ink); line-height: 1.05; margin: 8px 0 4px;
}
.qbm-price-pln { font-size: 13px; font-weight: 600; color: var(--faint); }

.qbm-costs { margin: 22px 0 20px; }
.qbm-cost {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 0; font-size: 13.5px; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.qbm-cost em { font-style: normal; color: var(--faint); }
.qbm-cost b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.qbm-cost-total {
  border-bottom: none; margin-top: 4px; padding-top: 14px;
  font-size: 15px;
}
.qbm-cost-total span { font-weight: 700; color: var(--ink); }
.qbm-cost-total b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; letter-spacing: -.02em; }

.qbm-note {
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
  margin: 0 0 20px; padding-left: 14px; border-left: 2px solid var(--buy);
}
.qbm-note b { color: var(--ink-2); font-weight: 700; }

.qbm-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; padding: 7px 0; }
.qbm-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.qbm-box {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--line); background: #fff;
  display: grid; place-items: center; color: #fff; margin-top: 1px;
  transition: background .15s, border-color .15s;
}
.qbm-box svg { opacity: 0; }
.qbm-check input:checked + .qbm-box { background: var(--buy); border-color: var(--buy); }
.qbm-check input:checked + .qbm-box svg { opacity: 1; }
.qbm-check span:last-child { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

.qbm-confirm {
  width: 100%; margin-top: 20px; padding: 15px 20px;
  border: none; border-radius: 12px; background: var(--ink); color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: -.01em; transition: background .18s, transform .12s, box-shadow .18s;
  box-shadow: 0 8px 22px rgba(9,16,28,.22);
}
.qbm-confirm:hover:not(:disabled) { background: #16233b; box-shadow: 0 10px 26px rgba(9,16,28,.28); }
.qbm-confirm:active:not(:disabled) { transform: translateY(1px); }
.qbm-confirm:disabled { background: #eef1f6; color: var(--faint); cursor: not-allowed; box-shadow: none; }

.qbm-cancel {
  display: block; width: 100%; background: none; border: none;
  color: var(--muted); font-size: 13px; font-weight: 600; padding: 13px 0 2px;
  transition: color .15s;
}
.qbm-cancel:hover { color: var(--ink); }

@media (max-width: 600px) {
  .qbm-overlay { place-items: start center; overflow-y: auto; padding: 16px; }
  .qbm-modal { max-height: none; margin: auto 0; padding: 32px 22px 24px; }
  .qbm-price-val { font-size: 36px; }
}

.calc-vat { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 600; }
.calc-customs-value { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 14px; background: var(--accent-soft); border: 1px solid var(--accent-soft2); border-radius: 10px; }
.calc-customs-value span { font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.calc-customs-value b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 19px; color: var(--accent-ink); letter-spacing: -.02em; }
.cv-edit { display: flex; align-items: center; gap: 6px; }
.cv-step { width: 30px; height: 32px; border: 1px solid var(--accent-soft2); background: #fff; border-radius: 8px; font-size: 18px; font-weight: 600; color: var(--accent-ink); display: grid; place-items: center; line-height: 1; transition: background .12s, border-color .12s; }
.cv-step:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.cv-input { display: flex; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--accent-soft2); border-radius: 8px; padding: 0 10px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; color: var(--accent-ink); }
.cv-input span { font-size: 14px; }
.cv-input input { width: 84px; border: none; background: none; padding: 6px 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 700; color: var(--accent-ink); text-align: right; letter-spacing: -.02em; }
.cv-input input:focus { outline: none; }
.cv-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 86%); }
.cv-input input::-webkit-outer-spin-button, .cv-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-final { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 14px 16px; background: #0e1d33; border-radius: 10px; }
.calc-final span { font-size: 13px; font-weight: 700; color: #b9c8de; }
.calc-final b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; color: #fff; letter-spacing: -.02em; }

/* Dodatkowe pozycje doliczane do łącznej ceny — minimalistyczne, wtopione w tło */
.calc-extras { display: flex; flex-direction: column; margin-top: 12px; border-top: 1px dashed var(--line); }
.calc-extra { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.calc-extra + .calc-extra { border-top: 1px solid var(--line-2); }
.calc-extra-toggle {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
}
.calc-extra-check {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid #c2cbd8; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  transition: border-color .15s, background .15s;
}
.calc-extra.on .calc-extra-check { border-color: var(--accent); background: var(--accent); }
.calc-extra-name { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.calc-extra.on .calc-extra-name { color: var(--ink); }
.calc-extra-rate { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; color: var(--muted); }
.calc-extra-rate select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: #fff; border: 1px solid var(--line); padding: 3px 20px 3px 9px; margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 12.5px; font-weight: 700;
  color: var(--ink-2); border-radius: 7px; transition: border-color .15s, box-shadow .15s;
}
.calc-extra-rate select:hover { border-color: var(--accent); }
.calc-extra-rate select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 80%); }
.calc-extra-rate svg { position: absolute; right: 6px; pointer-events: none; color: var(--muted); }
.calc-extra-amt { font-family: "Plus Jakarta Sans", sans-serif; font-size: 13.5px; font-weight: 700; color: var(--ink-2); letter-spacing: -.01em; white-space: nowrap; min-width: 64px; text-align: right; }
.calc-extra:not(.on) .calc-extra-amt { color: var(--faint); }
/* Podstawa akcyzy — kompaktowy wiersz pod Akcyzą */
.calc-extra:has(.calc-extra-base) { flex-wrap: wrap; padding-bottom: 4px; }
.calc-extra-base { position: relative; flex: 0 0 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: -2px; padding: 0 0 0 28px; }
.akcyza-arrow { position: absolute; left: 1px; top: -12px; color: var(--accent); pointer-events: none; }
.calc-extra-base .spec-year-lab { font-size: 12px; font-weight: 600; color: var(--muted); }
.calc-extra-base .year-q { color: var(--muted); } /* zgodnie z „?" przy Fracht morski */
.calc-extra:not(.on) .akcyza-arrow { color: var(--faint); }
.calc-extra:not(.on) .calc-extra-base-field input { background: var(--surface-2, #f3f5f8); color: var(--faint); cursor: not-allowed; border-color: var(--line); }
.calc-extra:not(.on) .calc-extra-base-field input:hover { border-color: var(--line); }
.calc-extra-base-field { position: relative; display: inline-flex; align-items: center; }
.calc-extra-base-field input {
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; font-weight: 700; color: var(--ink-2);
  text-align: right; width: 120px; background: #fff; border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 26px 5px 10px; transition: border-color .15s, box-shadow .15s;
}
.calc-extra-base-field input:hover { border-color: var(--accent); }
.calc-extra-base-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 80%); }
.calc-extra-base-cur { position: absolute; right: 9px; pointer-events: none; font-size: 12px; font-weight: 600; color: var(--muted); }
.calc-extra-base-field { position: relative; display: inline-flex; align-items: center; }
.calc-extra-base-field input {
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; font-weight: 700; color: var(--ink-2);
  text-align: right; width: 120px; background: #fff; border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 26px 5px 10px; transition: border-color .15s, box-shadow .15s;
}
.calc-extra-base-field input:hover { border-color: var(--accent); }
.calc-extra-base-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 80%); }
.calc-extra-base-cur { position: absolute; right: 9px; pointer-events: none; font-size: 12px; font-weight: 600; color: var(--muted); }
/* Pole „Wartość" — delikatnie mniejsze i wyśrodkowane pod selectem stawki */
.calc-extra-base-field { margin-left: auto; margin-right: 65px; }
.calc-extra-base-field input { width: 96px; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .det-grid { grid-template-columns: 1fr; }
  .det-right { position: static; }
}
@media (max-width: 1180px) {
  .vrow { grid-template-columns: 1fr; align-items: stretch; }
  .vrow-media .photo { aspect-ratio: 16 / 10; height: auto !important; min-height: 0; }
  .vrow-price { border-left: none; border-top: 1px solid var(--line-2); }
}
@media (max-width: 860px) {
  .hdr-nav { display: none; }
  /* Zakładki mobilne pojazdu: pokaż przełącznik i przełączaj kolumny */
  .det-mtabs { display: flex; }
  .det-grid.mtab-licytacja .det-left > .det-card { display: none; }
  .det-grid.mtab-informacje .det-right { display: none; }
  .vrow { grid-template-columns: 1fr; align-items: stretch; }
  .vrow-media .photo { aspect-ratio: 16 / 10; height: auto !important; min-height: 0; }
  .vrow-price { border-left: none; border-top: 1px solid var(--line-2); }
  .stats-strip.stats-3 { grid-template-columns: repeat(2, 1fr); }
  .sp-grid { grid-template-columns: 1fr 1fr; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .res-layout { grid-template-columns: 1fr; }
  .filters { position: static; max-height: none; overflow: visible; }
  .ftr-inner { grid-template-columns: 1fr 1fr; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Mobilne karuzele na stronie głównej ----------
   Sekcje (Najbliższe aukcje / Wyselekcjonowane / Premium / Elektryczne) na
   telefonie zamieniają się z pionowej listy w POZIOMĄ karuzelę: 2 kafelki
   widoczne obok siebie, resztę przewija się palcem w lewo/prawo (scroll-snap). */
@media (max-width: 720px) {
  .home-rail {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    /* wychodzimy do krawędzi ekranu, żeby przewijanie „ocierało się" o brzeg */
    margin-inline: -16px;
    padding: 2px 16px 8px;
    scrollbar-width: none;
  }
  .home-rail::-webkit-scrollbar { display: none; }
  .home-rail > * {
    /* Jeden duży kafelek w kadrze + podgląd następnego (ok. 82% szerokości).
       WSZYSTKIE bezpośrednie dzieci mają identyczną szerokość i wysokość. */
    flex: 0 0 82% !important;
    width: 82%;
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
  }
  /* Karta w opakowaniu .soon-fade wypełnia je w całości, więc kafelki
     z pierwszej sekcji mają dokładnie ten sam rozmiar co pozostałe. */
  .home-rail > .soon-fade > .vcard { flex: 1; height: 100%; min-width: 0; }
}

/* ---------- User menu ---------- */
.usermenu { position: relative; }
.user-chip { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 5px; font-weight: 700; font-size: 13px; color: var(--ink); }
.user-chip:hover { border-color: #d0d8e2; background: var(--surface-2); }
.user-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-ink)); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; font-family: "Plus Jakarta Sans", sans-serif; }
.user-chip svg { color: var(--faint); }
.user-drop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; animation: dropIn .14s ease; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } }
.user-drop button { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 10px 11px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-align: left; }
.user-drop button:hover { background: var(--surface-2); color: var(--ink); }
.user-drop button svg { color: var(--faint); }
.user-drop button.danger { color: var(--danger); }
.user-drop button.danger:hover { background: #fdecec; }
.user-drop button.danger svg { color: var(--danger); }
.user-drop-sep { height: 1px; background: var(--line-2); margin: 5px 4px; }

/* ---------- Auth modal v5 - indigo card ---------- */
.am-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,0); backdrop-filter: blur(0); transition: background .3s, backdrop-filter .3s; }
.am-overlay.in { background: rgba(8,12,28,.55); backdrop-filter: blur(10px); }

.am-box { position: relative; z-index: 1; width: min(440px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: 30px; overflow: hidden; background: linear-gradient(168deg, #ffffff 0%, #ffffff 60%, #eef0fb 100%); box-shadow: 0 32px 80px rgba(20,24,60,.32), 0 0 0 1px rgba(20,24,60,.05); transform: translateY(24px) scale(.96); opacity: 0; transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .3s; }
.am-overlay.in .am-box { transform: none; opacity: 1; }

.am-scroll { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 36px 36px 30px; display: flex; flex-direction: column; }

/* Close */
.am-x { position: absolute; top: 20px; right: 20px; z-index: 10; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ebedf5; background: #fff; color: #6b7390; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(20,24,60,.06); transition: all .15s; }
.am-x:hover { background: #f3f4fb; color: #1a2238; transform: rotate(90deg); }

/* Title */
.am-h { font-size: clamp(30px, 7vw, 38px); font-weight: 800; color: #1a2238; letter-spacing: -.03em; margin: 4px 0 6px; text-align: left; }
.am-sub { font-size: 16px; color: #8b93a7; margin: 0 0 26px; font-weight: 500; text-align: left; }

/* Switch tabs */
.am-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #eef0f6; border-radius: 16px; padding: 6px; margin-bottom: 24px; }
.am-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 0; background: transparent; border: none; border-radius: 11px; font-size: 14.5px; font-weight: 700; color: #8b93a7; transition: all .2s; }
.am-switch button svg { width: 17px; height: 17px; }
.am-switch button.on { background: #fff; color: #4f63e8; box-shadow: 0 2px 8px rgba(20,24,60,.08), inset 0 -2.5px 0 #4f63e8; }
.am-switch button:hover:not(.on) { color: #5a6178; }

/* Quick demo */
.am-quick { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid #e8eaf4; background: #f5f6fc; border-radius: 16px; transition: all .15s; }
.am-quick:hover { border-color: #c4cbf3; background: #eef0fc; box-shadow: 0 4px 14px rgba(79,99,232,.1); }
.am-quick-av { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(150deg, #5b6ef5, #6d5ef0); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(91,110,245,.32); }
.am-quick-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.am-quick-txt b { font-size: 15px; font-weight: 700; color: #1a2238; }
.am-quick-txt span { font-size: 13px; color: #8b93a7; }
.am-quick-arrow { color: #4f63e8; display: grid; place-items: center; transition: transform .15s; }
.am-quick:hover .am-quick-arrow { transform: translateX(3px); }

/* Fields */
.am-form { display: flex; flex-direction: column; gap: 18px; }
.am-field { display: flex; flex-direction: column; gap: 8px; }
.am-field label { font-size: 14.5px; font-weight: 700; color: #2a3247; }
.am-field-row { display: flex; justify-content: space-between; align-items: center; }
.am-forgot { background: none; border: none; padding: 0; font-size: 14px; font-weight: 700; color: #4f63e8; }
.am-forgot:hover { text-decoration: underline; }

.am-inp { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; min-height: 58px; border: 1.5px solid #e8eaf4; border-radius: 16px; background: #f5f6fc; color: #8b93a7; transition: border-color .2s, box-shadow .2s, background .2s; }
.am-inp-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: #e7e9fa; color: #5b6ef5; display: grid; place-items: center; transition: all .2s; }
.am-field.focus .am-inp { border-color: #5b6ef5; background: #fff; box-shadow: 0 0 0 4px rgba(91,110,245,.12); }
.am-field.focus .am-inp-ic { background: #5b6ef5; color: #fff; }
.am-field.err .am-inp { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229,72,77,.1); }
.am-field.err .am-inp-ic { background: #fde8e8; color: #e5484d; }
.am-inp input { flex: 1; border: none; background: none; font-size: 15px; color: #1a2238; padding: 0; font-weight: 500; }
.am-inp input:focus { outline: none; }
.am-inp input::placeholder { color: #aab1c6; font-weight: 500; }
.am-eye { background: none; border: none; padding: 0 4px; color: #9aa2b8; flex-shrink: 0; display: grid; place-items: center; transition: color .15s; }
.am-eye:hover { color: #5b6ef5; }

.am-err { font-style: normal; font-size: 12.5px; color: #e5484d; font-weight: 600; }

/* Strength */
.am-str { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.am-str-bar { display: flex; gap: 4px; flex: 1; }
.am-str-bar span { flex: 1; height: 3px; border-radius: 2px; transition: background .25s; }
.am-str-txt { font-size: 11px; font-weight: 700; width: 46px; text-align: right; }

/* Checkbox */
.am-agree { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.am-agree input { position: absolute; opacity: 0; width: 0; height: 0; }
.am-cb { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #d6daea; background: #fff; display: grid; place-items: center; color: #aab1c6; transition: all .15s; margin-top: 1px; }
.am-cb svg { opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.am-agree input:checked + .am-cb { background: #5b6ef5; border-color: #5b6ef5; color: #fff; }
.am-agree input:checked + .am-cb svg { opacity: 1; transform: scale(1); }
.am-agree.err .am-cb { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,.12); }
.am-agree > span { font-size: 12.5px; color: #6b7a8d; line-height: 1.55; }
.am-lnk { background: none; border: none; padding: 0; font-size: inherit; font-weight: 700; color: #5b6ef5; }
.am-lnk:hover { text-decoration: underline; }
.am-lnk.bold { font-weight: 800; }

/* Validation bubble (chmurka) */
.am-agree .am-bubble { position: absolute; left: 0; bottom: calc(100% + 9px); z-index: 5; display: inline-flex; align-items: center; gap: 6px; background: #e5484d; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.2; padding: 8px 12px; border-radius: 10px; box-shadow: 0 6px 18px rgba(229,72,77,.32); white-space: nowrap; animation: amBubbleIn .22s cubic-bezier(.34,1.5,.5,1); }
.am-agree .am-bubble svg { flex-shrink: 0; color: #fff; stroke: #fff; }
.am-bubble::after { content: ""; position: absolute; top: 100%; left: 14px; border: 6px solid transparent; border-top-color: #e5484d; }
@keyframes amBubbleIn { from { opacity: 0; transform: translateY(6px); } }

/* Inline link button (for regulaminy w modalach licytacji) */
.auth-link { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.auth-link:hover { color: var(--accent-ink); text-decoration-thickness: 2px; }

/* Submit */
.am-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 17px 0; border: none; border-radius: 16px; background: linear-gradient(120deg, #5b6ef5, #6d5ef0); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin-top: 8px; transition: filter .15s, transform .1s, box-shadow .15s; box-shadow: 0 8px 22px rgba(91,110,245,.36); min-height: 56px; }
.am-btn:hover { filter: brightness(1.06); box-shadow: 0 12px 30px rgba(91,110,245,.46); }
.am-btn:active { transform: scale(.985); }
.am-btn:disabled { opacity: .75; cursor: wait; }
.am-btn.loading { pointer-events: none; }

.am-spinner { width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: amSpin .6s linear infinite; }
@keyframes amSpin { to { transform: rotate(360deg); } }

/* Divider "lub" */
.am-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
.am-or > span { flex: 1; height: 1px; background: #e6e8f2; }
.am-or em { font-style: normal; font-size: 13px; color: #9aa2b8; font-weight: 500; }

/* Footer shield divider */
.am-foot { position: relative; display: grid; place-items: center; margin: 30px 0 22px; }
.am-foot-line { width: 100%; height: 1px; background: #e6e8f2; }
.am-foot-shield { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #ebedf5; box-shadow: 0 2px 8px rgba(20,24,60,.07); display: grid; place-items: center; color: #5b6ef5; }

.am-alt { text-align: center; font-size: 15px; color: #8b93a7; margin: 8px 0 0; font-weight: 500; }

@media (max-width: 480px) {
  .am-scroll { padding: 24px 20px 22px; }
}

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 120; display: inline-flex; align-items: center; gap: 10px; background: #0e1d33; color: #fff; font-size: 14px; font-weight: 700; padding: 13px 20px; border-radius: 12px; box-shadow: var(--shadow-lg); animation: toastIn .3s cubic-bezier(.34,1.4,.5,1); }
.toast-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--live); color: #fff; }
.toast-error .toast-ic { background: var(--danger); font-size: 13px; font-weight: 800; line-height: 1; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(14px); } }

@media (max-width: 720px) {
  .auth-modal { grid-template-columns: 1fr; max-width: 440px; }
  .auth-aside { display: none; }
}

/* ---------- O nas ---------- */
.about-hero { position: relative; overflow: hidden; padding: 64px 24px 56px; background: linear-gradient(180deg, #0c1424, #0f1d33); }
.about-hero-bg { position: absolute; inset: 0; }
.about-hero-bg::before { content: ""; position: absolute; inset: -8px; background: url("hero-port.webp?v=20260718") center 38% / cover no-repeat; opacity: .26; filter: blur(3px) brightness(.78); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 90%); mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 90%); pointer-events: none; }
.about-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 40%, transparent 78%); }
.about-hero-glow { position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: 760px; height: 460px; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent), transparent 55%), transparent); filter: blur(20px); opacity: .7; }
.about-hero-inner { position: relative; max-width: var(--maxw); margin: 0 auto; text-align: center; }
.about-h1 { color: #fff; font-size: clamp(32px, 5vw, 52px); line-height: 1.05; margin-top: 18px; }
.about-h1 .hl { background: linear-gradient(120deg, var(--accent), #76a9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about-lead { color: #b9c4d6; font-size: 18px; max-width: 560px; margin: 16px auto 0; text-wrap: pretty; }
.about-body { max-width: 920px; margin: 0 auto; padding: 0 24px; }
.about-intro { margin-top: 44px; text-align: center; }
.about-intro p { font-size: 18px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; max-width: 760px; margin: 0 auto; }
.about-intro b { color: var(--ink); }
.about-section { margin-top: 48px; text-align: center; }
.about-h2 { font-size: clamp(22px, 3vw, 28px); margin: 8px 0 12px; }
.about-text { font-size: 15.5px; line-height: 1.7; color: var(--muted); text-wrap: pretty; max-width: 680px; margin: 0 auto; }
/* Karty: ikona wychodzi poza obręb boksa (nad górną krawędzią), w boksie same napisy */
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 18px; margin-top: 56px; }
.about-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 40px 22px 26px; text-align: center; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.about-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -28px rgba(13,23,38,.34); border-color: color-mix(in oklab, var(--accent), white 65%); }
.about-card-ic { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--accent-ink); box-shadow: 0 10px 24px -12px rgba(13,23,38,.3); margin: 0; }
.about-card h3 { font-size: 16px; margin-bottom: 8px; }
.about-card p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.55; }
.about-cta { margin: 56px 0 12px; }
.about-cta-inner { background: linear-gradient(120deg, #0e1d33, #143a6b); border-radius: calc(var(--radius) + 4px); padding: 40px; text-align: center; position: relative; overflow: hidden; }
.about-cta-inner::after { content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; pointer-events: none; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent), transparent 50%), transparent); }
.about-cta-inner h2 { color: #fff; font-size: 27px; position: relative; }
.about-cta-inner p { color: #b9c4d6; max-width: 580px; margin: 12px auto 22px; position: relative; line-height: 1.6; }
.about-cta-inner .btn { position: relative; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- Kontakt ---------- */
.contact-hero { position: relative; overflow: hidden; padding: 64px 24px 56px; background: linear-gradient(180deg, #0c1424, #0f1d33); }
/* ---------- Strony prawne (Regulamin / Polityka prywatności) ---------- */
.legal-updated { color: #8fa0ba; font-size: 13px; margin: 14px 0 0; display: inline-flex; align-items: center; gap: 6px; }
.legal-body { max-width: 820px; margin: 0 auto; padding: 44px 24px 8px; }
.legal-sec { padding: 22px 0; border-top: 1px solid var(--line); }
.legal-sec:first-child { border-top: none; padding-top: 4px; }
.legal-h2 { display: flex; align-items: center; gap: 12px; font-size: 20px; line-height: 1.2; color: var(--ink); margin: 0 0 10px; }
.legal-num { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: color-mix(in oklab, var(--accent), transparent 88%); color: var(--accent); font-size: 14px; font-weight: 700; }
.legal-p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; margin: 0; text-wrap: pretty; }
.legal-note { display: flex; align-items: center; gap: 9px; margin: 26px 0 0; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 13.5px; }
/* ---------- Blog ---------- */
.blog-body { max-width: var(--maxw); margin: 0 auto; padding: 44px 24px 8px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform .16s, box-shadow .16s, border-color .16s; cursor: pointer; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15,29,51,.10); border-color: color-mix(in oklab, var(--accent), transparent 70%); }
.blog-thumb { height: 128px; display: flex; align-items: center; justify-content: center; color: #fff; background-size: cover; background-position: center; }
.blog-thumb.blog-blue { background-color: #1b4fae; background-image: linear-gradient(135deg, #2a6fdb, #1b4fae); }
.blog-thumb.blog-green { background-color: #14663f; background-image: linear-gradient(135deg, #1f8a5b, #14663f); }
.blog-thumb.blog-amber { background-color: #b56a12; background-image: linear-gradient(135deg, #d98a2b, #b56a12); }
.blog-card-body { display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 18px; flex: 1; }
.blog-meta { display: flex; align-items: center; justify-content: space-between; }
.blog-cat { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--accent); }
.blog-read { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.blog-title { font-size: 17px; line-height: 1.28; color: var(--ink); margin: 0; }
.blog-excerpt { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.blog-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
/* ---------- Blog: pojedynczy artykuł ---------- */
.art { max-width: 920px; margin: 0 auto; }
.art-hero { position: relative; min-height: 420px; display: flex; align-items: flex-end; padding: 0; background-size: cover; background-position: center; color: #fff; overflow: hidden; }
.art-hero.art-tone-blue { background-color: #1b4fae; background-image: linear-gradient(135deg, #2a6fdb, #143b84); }
.art-hero.art-tone-green { background-color: #14663f; background-image: linear-gradient(135deg, #1f8a5b, #0f4b2d); }
.art-hero.art-tone-amber { background-color: #b56a12; background-image: linear-gradient(135deg, #d98a2b, #91530c); }
.art-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,24,.15), rgba(8,14,24,.82)); }
.art-hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); padding: 34px 24px 30px; }
.art-back { position: absolute; top: 20px; left: 24px; z-index: 2; display: flex; width: max-content; align-items: center; gap: 7px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; backdrop-filter: blur(6px); transition: background .16s; }
.art-back:hover { background: rgba(255,255,255,.24); }
.art-back-arrow { font-size: 15px; line-height: 1; }
.art-cat { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.art-title { font-size: clamp(26px, 4.4vw, 40px); line-height: 1.12; margin: 0 0 14px; color: #fff; letter-spacing: -.01em; text-wrap: balance; }
.art-meta { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.9); }
.art-meta span { display: inline-flex; align-items: center; gap: 6px; }
.art-dot { opacity: .6; }
.art-body { padding: 40px 24px 8px; font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.art-body > *:first-child { margin-top: 0; }
.art-body h2 { font-size: 26px; line-height: 1.2; color: var(--ink); margin: 34px 0 12px; letter-spacing: -.01em; }
.art-body h3 { font-size: 20px; line-height: 1.25; color: var(--ink); margin: 26px 0 8px; }
.art-body p { margin: 0 0 18px; text-wrap: pretty; }
.art-body ul, .art-body ol { margin: 0 0 18px; padding-left: 24px; }
.art-body li { margin-bottom: 7px; }
.art-body blockquote { margin: 0 0 20px; padding: 10px 20px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; color: var(--ink); font-style: italic; }
.art-body img { max-width: 100%; height: auto; border-radius: 14px; margin: 10px 0 22px; display: block; }
.art-body a { color: var(--accent); text-decoration: underline; }
.art-foot { max-width: var(--maxw); margin: 12px auto 0; padding: 24px; }

/* ---------- Dekoder VIN ---------- */
.vin-form { display: flex; justify-content: center; max-width: 560px; margin: 0 auto 12px; }
.vin-field { position: relative; width: 100%; display: flex; align-items: center; background: #2f3640; border-radius: 50px; }
.vin-input { width: 100%; border: none; background: none; outline: none; color: #fff; font-size: 18px; font-weight: 600; letter-spacing: .1em; text-align: center; font-variant-numeric: tabular-nums; padding: 22px 74px 22px 30px; }
.vin-input::placeholder { color: #9aa4b2; letter-spacing: .04em; font-weight: 600; }
.vin-check { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(90deg, #2f6df6 0%, #009EFD 100%); cursor: pointer; transition: all 300ms cubic-bezier(.23, 1, 0.32, 1); animation: vin-check-in .28s cubic-bezier(.34,1.56,.64,1) both; }
.vin-check:hover { background: #1A1A1A; box-shadow: rgba(0,0,0,.5) 0 10px 20px; transform: translateY(-50%) translateY(-3px); }
.vin-check:active { box-shadow: none; transform: translateY(-50%); }
.vin-check:disabled { cursor: default; }
.vin-check { animation: none; }
@keyframes vin-check-in { 0% { opacity: 0; transform: translateY(-50%) scale(.4); } 100% { opacity: 1; transform: translateY(-50%) scale(1); } }
.vin-hint { text-align: center; color: var(--muted); font-size: 13.5px; margin: 0 0 10px; }
.vin-btn { flex: none; width: 60px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 12px; background: var(--accent); color: #fff; cursor: pointer; transition: filter .15s; }
.vin-btn:hover { filter: brightness(1.08); }
.vin-err { color: #c0392b; font-size: 14px; margin: 14px 0 0; text-align: center; }
.vin-body { max-width: 1100px; margin: 0 auto; padding: 28px 24px 8px; }
.vin-spin { display: inline-block; width: 15px; height: 15px; border: 2px solid color-mix(in oklab, var(--accent), transparent 55%); border-top-color: var(--accent); border-radius: 50%; animation: vin-spin .7s linear infinite; }
@keyframes vin-spin { to { transform: rotate(360deg); } }
.vin-btn:disabled { opacity: .8; cursor: default; }
.vin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.vin-cell { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.vin-cell-lab { font-size: 12px; color: var(--muted); }
.vin-cell-val { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.vin-result { margin-top: 8px; }
.vin-summary { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; text-align: center; padding: 8px 0 26px; }
.vin-summary-text { display: flex; align-items: baseline; gap: 12px; }
.vin-summary-year { font-size: 20px; font-weight: 700; color: var(--muted); }
.vin-summary-title { font-size: 30px; font-weight: 800; color: var(--ink); margin: 0; }
.vin-chip { flex: none; padding: 6px 14px; border-radius: 999px; background: color-mix(in oklab, var(--accent), transparent 88%); color: var(--accent); font-size: 13.5px; font-weight: 700; }
.vin-sections { display: flex; flex-direction: column; gap: 22px; max-width: 900px; margin: 0 auto; }
.vin-section-h { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.vin-section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.vin-cells { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 980px; margin: 0 auto; }
.vin-panel { max-width: 620px; margin: 0 auto; background: linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--surface), #000 4%)); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px rgba(15,29,51,.10), 0 2px 4px rgba(15,29,51,.06); padding: 8px 26px; }
.vin-line { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.vin-line:last-child { border-bottom: none; }
.vin-line-lab { font-size: 15px; font-weight: 600; color: var(--muted); }
.vin-line-val { font-size: 17px; font-weight: 700; color: var(--ink); text-align: right; }
.vin-tile { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 20px; background: linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--surface), #000 4%)); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 10px rgba(15,29,51,.08), 0 1px 2px rgba(15,29,51,.06); }
.vin-tile-lab { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: center; }
.vin-tile-val { font-size: 17px; font-weight: 700; color: var(--ink); text-align: center; }
.vin-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 6px 20px 20px; color: var(--muted); text-align: center; }
.vin-empty p { margin: 0; font-size: 15px; }
.vin-intro { max-width: 1040px; display: flex; flex-direction: column; gap: 16px; }
.vin-intro p { font-size: 17.5px; line-height: 1.65; color: var(--ink-2); font-weight: 600; text-wrap: pretty; }
.vin-intro-h { font-size: 23px !important; font-weight: 800 !important; color: var(--ink) !important; margin: 0 0 2px; }
/* Tło hero (tekstura + zdjęcie) wjeżdża pod header — jak na stronie głównej (desktop). Po definicjach .about-hero i .contact-hero, by skrót padding ich nie nadpisał. Stała wysokość pasa + wyśrodkowanie treści, by tło kończyło się tak samo na każdej podstronie. */
@media (min-width: 861px) {
  .about-hero, .contact-hero {
    margin-top: calc(-1 * var(--hdr-h, 145px));
    min-height: calc(var(--hdr-h, 145px) + 250px);
    padding-top: var(--hdr-h, 145px);
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* „O nas" ma dwuwierszowy nagłówek, więc wyśrodkowany blok wypycha plakietkę
     wyżej niż na Kontakcie. Delikatnie zsuwamy go w dół, by plakietka z zieloną
     kropką była na tej samej wysokości co na pozostałych stronach. */
  .about-hero .about-hero-inner { margin-top: 27px; }
}
.contact-body { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.ct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -34px; position: relative; z-index: 5; }
.ct-card { position: relative; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px 26px; display: flex; flex-direction: column; overflow: hidden; transition: transform .18s cubic-bezier(.34,1.4,.5,1), box-shadow .18s; }
.ct-card:hover { transform: translateY(-3px); }
/* Dolny akcent = inset bottom border (jak w zakładkach Logowanie/Rejestracja) + miękki cień karty */
.ct-green { background: linear-gradient(165deg, #ecfaf3 0%, #ffffff 62%); border-color: #d7efe2; box-shadow: 0 12px 30px -16px rgba(13,23,38,.22), inset 0 -3px 0 #1fcf86; }
.ct-amber { background: linear-gradient(165deg, #fdf5e8 0%, #ffffff 62%); border-color: #f1e2c6; box-shadow: 0 12px 30px -16px rgba(13,23,38,.22), inset 0 -3px 0 #ffb22e; }
.ct-blue  { background: linear-gradient(165deg, #eef3fe 0%, #ffffff 62%); border-color: #d9e3fb; box-shadow: 0 12px 30px -16px rgba(13,23,38,.22), inset 0 -3px 0 #4f8bff; }
.ct-green:hover { box-shadow: 0 22px 44px -20px rgba(31,207,134,.3), inset 0 -3px 0 #1fcf86; }
/* Czat na żywo — zielona „glizda" krążąca wokół całego kafelka */
.ct-card.ct-green { overflow: visible; }
.ct-card.ct-green::before { content: ""; position: absolute; inset: -2px; border-radius: 19px; padding: 2px; background: conic-gradient(from var(--qb-angle), transparent 0deg, transparent 215deg, #5be8a4 285deg, #19a463 340deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: qb-spin 2.6s linear infinite; z-index: 3; pointer-events: none; }
.ct-amber:hover { box-shadow: 0 22px 44px -20px rgba(255,178,46,.3), inset 0 -3px 0 #ffb22e; }
.ct-blue:hover  { box-shadow: 0 22px 44px -20px rgba(79,139,255,.3), inset 0 -3px 0 #4f8bff; }
.ct-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ct-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; }
.ct-green .ct-ic { background: #d8f3e6; color: #0c7a4d; }
.ct-amber .ct-ic { background: #fbeccf; color: #b5710b; }
.ct-blue .ct-ic { background: #dde8fd; color: var(--accent-ink); }
.ct-time { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
.ct-green .ct-time { background: #d8f3e6; color: #0c7a4d; }
.ct-amber .ct-time { background: #fbeccf; color: #b5710b; }
.ct-blue .ct-time { background: #dde8fd; color: var(--accent-ink); }
.ct-title { font-size: 19px; margin-bottom: 8px; }
.ct-desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 0 20px; }
.ct-action { margin-top: auto; }
.ct-btn { position: relative; overflow: hidden; width: 100%; border: none; border-radius: 10px; padding: 12px; font-weight: 700; font-size: 14px; color: #fff; transition: transform .16s cubic-bezier(.34,1.4,.5,1), filter .15s, box-shadow .16s; }
.ct-btn:hover { filter: brightness(.9) saturate(1.1); box-shadow: 0 10px 22px -6px rgba(13,23,38,.28); }
.ct-btn:active { filter: brightness(.82); box-shadow: 0 4px 12px -4px rgba(13,23,38,.3); }
.ct-btn::before { content: none; }
.ct-btn > * { position: relative; z-index: 1; }
.ct-btn-green { background: linear-gradient(90deg, #15a36a, #1fcf86); }
.ct-btn-amber { background: linear-gradient(90deg, #e8870c, #ffb22e); }
.ct-btn-blue { background: linear-gradient(90deg, #2456d8, #4f8bff); }
.ct-phone { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px; border-radius: 10px; background: #fdf3e3; color: #8a6d00; font-family: "Plus Jakarta Sans", sans-serif; font-size: 19px; font-weight: 700; letter-spacing: .01em; text-decoration: none; border: 1.5px solid #f6e2bf; }
.ct-note { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 28px 0 12px; font-size: 13px; color: var(--muted); }
.ct-note svg { color: var(--faint); }
@media (max-width: 760px) { .ct-grid { grid-template-columns: 1fr; } }

/* ---------- Pomoc / FAQ ---------- */
.help-body { max-width: var(--maxw); margin: 0 auto; padding: 48px 24px 0; display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
.help-nav { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 6px; }
.help-nav-hint { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0 auto 10px; padding: 7px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; font-weight: 700; }
.help-nav-hint svg { flex: 0 0 auto; }
.help-cat { position: relative; display: flex; align-items: center; gap: 16px; text-align: left; background: none; border: none; padding: 14px 16px 14px 14px; border-radius: 20px; transition: background .14s; }
.help-cat:hover { background: var(--surface-2); }
.help-cat.on { background: color-mix(in oklch, var(--accent) 8%, var(--surface)); }
.help-cat.on::before { content: ""; position: absolute; left: -2px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--accent); }
.help-cat-num { font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; font-weight: 800; color: var(--muted); width: 22px; text-align: center; flex-shrink: 0; transition: color .14s; }
.help-cat.on .help-cat-num { color: var(--accent); }
.help-cat-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--surface-2); color: var(--ink-2); flex-shrink: 0; transition: background .14s, color .14s; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--line) 70%, transparent); }
.help-cat.on .help-cat-ic { background: var(--surface); color: var(--accent); box-shadow: 0 6px 16px color-mix(in oklch, var(--accent) 18%, transparent); }
.help-cat-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.help-cat-title { font-size: 15.5px; font-weight: 700; color: var(--ink-2); letter-spacing: -.01em; transition: color .14s; }
.help-cat.on .help-cat-title { color: var(--accent); }
.help-cat-sub { font-size: 13px; color: var(--muted); font-weight: 500; }

.help-faq-title { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.025em; margin-bottom: 8px; color: var(--ink); }
.help-faq-lead { font-size: 16px; color: var(--muted); margin: 0 0 24px; line-height: 1.5; }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; transition: border-color .18s, box-shadow .18s, background .18s, border-radius .18s; }
.faq-item.open { border-radius: 28px; border-color: color-mix(in oklch, var(--accent) 35%, transparent); background: color-mix(in oklch, var(--accent) 4%, var(--surface)); box-shadow: 0 10px 30px color-mix(in oklch, var(--accent) 10%, transparent); }
.faq-q { display: flex; align-items: center; gap: 18px; width: 100%; background: none; border: none; padding: 22px 24px; text-align: left; }
.faq-q-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); color: var(--muted); flex-shrink: 0; transition: background .18s, color .18s; }
.faq-item.open .faq-q-ic { background: var(--accent); color: #fff; box-shadow: 0 6px 16px color-mix(in oklch, var(--accent) 30%, transparent); }
.faq-q-txt { flex: 1; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.faq-item.open .faq-q-txt { color: var(--accent-ink); }
.faq-chev { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: transparent; color: var(--muted); flex-shrink: 0; transition: transform .24s, background .18s, color .18s; }
.faq-item.open .faq-chev { transform: rotate(180deg); background: var(--accent); color: #fff; }
.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 24px 24px 86px; font-size: 16px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }

.help-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; padding: 28px 32px; background: linear-gradient(110deg, color-mix(in oklch, var(--accent) 9%, var(--surface)), color-mix(in oklch, var(--accent) 4%, var(--surface))); border: 1px solid color-mix(in oklch, var(--accent) 16%, transparent); border-radius: 20px; }
.help-cta-txt { flex: 1 1 240px; }
.help-cta-ic { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--surface); color: var(--accent); flex-shrink: 0; box-shadow: 0 8px 22px color-mix(in oklch, var(--accent) 16%, transparent); }
.help-cta-txt { min-width: 0; }
.help-cta h3 { font-size: 21px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; }
.help-cta p { font-size: 15px; color: var(--ink-2); margin: 5px 0 0; }
.help-cta .btn { flex-shrink: 0; padding: 0 26px; height: 54px; font-size: 16px; border-radius: 13px; }
@media (max-width: 860px) {
  .help-body { grid-template-columns: 1fr; gap: 28px; }
  .help-nav { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .help-nav-hint { grid-column: 1 / -1; }
  .faq-q-txt { font-size: 15.5px; }
  .faq-a p { padding-left: 24px; }
  .help-cta { flex-wrap: wrap; }
  .help-cta-ic { width: 56px; height: 56px; }
}
@media (max-width: 560px) {
  /* Nawigacja kategorii: jedna kolumna, by tytuły się nie łamały */
  .help-nav { grid-template-columns: 1fr; }
  .help-cat { gap: 12px; padding: 12px 14px; }
  .help-cat-ic { width: 40px; height: 40px; border-radius: 11px; }
  .help-cat-title { font-size: 14.5px; }
  .help-cat-sub { font-size: 12px; }
  /* Pytanie i odpowiedź: mniejsze odstępy, tekst od lewej krawędzi */
  .faq-q { gap: 12px; padding: 16px 16px; }
  .faq-q-ic { width: 36px; height: 36px; }
  .faq-q-txt { font-size: 14.5px; }
  .faq-chev { width: 30px; height: 30px; }
  .faq-a p { padding: 0 16px 18px 16px; font-size: 14.5px; }
  .help-faq-title { font-size: clamp(22px, 6vw, 28px); }
  .help-faq-lead { font-size: 14px; }
}

/* ---------- Proces licytacji ---------- */
.proc-body { max-width: 920px; margin: 0 auto; padding: 40px 24px 0; }
.proc-sec-head { margin-bottom: 26px; }
.proc-after-head { margin-top: 56px; }
.proc-steps { display: flex; flex-direction: column; gap: 18px; }
.proc-step { display: flex; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.proc-num { flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-ink)); color: #fff; display: grid; place-items: center; font-family: "Plus Jakarta Sans", sans-serif; font-size: 28px; font-weight: 700; box-shadow: 0 6px 16px color-mix(in oklab, var(--accent), transparent 65%); }
.proc-step-body { flex: 1; min-width: 0; }
.proc-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.proc-step-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); flex-shrink: 0; }
.proc-step-head h3 { font-size: 18px; }
.proc-step-body > p { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; text-wrap: pretty; }
.proc-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.proc-plan { background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 14px; display: flex; flex-direction: column; gap: 3px; }
.proc-plan-name { font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; font-weight: 700; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .04em; }
.proc-plan-dep { font-family: "Plus Jakarta Sans", sans-serif; font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.proc-plan-meta { font-size: 12px; color: var(--muted); }
.proc-timeline { display: flex; flex-direction: column; }
.proc-tl-item { display: flex; gap: 16px; padding-bottom: 22px; position: relative; }
.proc-tl-item:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line); }
.proc-tl-ic { position: relative; z-index: 1; flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.proc-tl-body { padding-top: 2px; }
.proc-tl-body h4 { font-size: 15px; margin-bottom: 4px; }
.proc-tl-body p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.55; }
.proc-cta { margin-top: 20px; }
@media (max-width: 640px) {
  .proc-plans { grid-template-columns: 1fr; }
}

/* ========== Process page v2 ========== */
.proc2-page-outer { background: var(--surface); }
.proc2-page { background: var(--surface); max-width: 900px; margin: 0 auto; padding: 52px 40px 56px; }
.proc2-header { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 64px; }
.proc2-header-text { flex: 1; }
.proc2-kicker { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #4361ee; margin-bottom: 14px; }
.proc2-title { font-size: clamp(34px, 5vw, 52px); font-weight: 800; line-height: 1.05; color: var(--ink); letter-spacing: -.02em; margin-bottom: 16px; }
.proc2-sub { font-size: 15px; color: var(--ink-2); line-height: 1.6; max-width: 520px; margin-bottom: 18px; text-wrap: pretty; }
.proc2-line { width: 38px; height: 3px; background: #4361ee; border-radius: 2px; }
.proc2-map-col { width: 240px; flex-shrink: 0; margin-top: 8px; margin-right: -16px; overflow: visible; }
.proc2-worldmap-svg { width: 125%; height: auto; margin-left: -22%; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 72%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 14%, black 80%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, black 18%, black 72%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 14%, black 80%, transparent 100%); mask-composite: intersect; }
/* Steps */
.proc2-steps { display: flex; flex-direction: column; position: relative; overflow: visible; }
.proc2-row { display: grid; grid-template-columns: 110px 100px 1fr; align-items: start; }
.proc2-left { display: flex; flex-direction: column; align-items: center; }
.proc2-badge { width: 48px; height: 48px; border-radius: 50%; background: #4361ee; color: #fff; display: grid; place-items: center; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 15px; flex-shrink: 0; box-shadow: 0 8px 20px -6px rgba(67,97,238,.55); position: relative; z-index: 2; }
.proc2-left { display: flex; flex-direction: column; align-items: center; padding-top: 0; }
.proc2-vline-end { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #a8b8f8; background: var(--surface); margin: 5px 0; flex-shrink: 0; }
.proc2-row .proc2-left { align-self: stretch; }
.proc2-snake { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; overflow: visible; }
.proc2-badge { position: relative; z-index: 4; }
.proc2-icon-circle { position: relative; z-index: 1; }
.proc2-icon-col { display: flex; justify-content: center; padding-top: 2px; }
.proc2-icon-circle { width: 84px; height: 84px; border-radius: 50%; background: #f0f3fc; display: grid; place-items: center; color: #4361ee; box-shadow: 0 4px 14px -6px rgba(67,97,238,.18); position: relative; z-index: 1; }
.proc2-content { padding: 6px 0 52px 8px; }
.proc2-content h3 { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 12px; letter-spacing: -.01em; }
.proc2-content > p { font-size: 14px; line-height: 1.72; color: var(--muted); margin: 0; }
/* Plans */
.proc2-plans { display: flex; margin-top: 24px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.proc2-plan { flex: 1; padding: 18px 22px 20px; border-right: 1px solid var(--line); }
.proc2-plan:last-child { border-right: none; }
.proc2-plan-head { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: #4361ee; margin-bottom: 9px; }
.proc2-plan-amount { font-family: "Plus Jakarta Sans", sans-serif; font-size: 21px; font-weight: 800; color: var(--ink); margin-bottom: 7px; letter-spacing: -.02em; }
.proc2-plan-meta { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
/* Bottom bar */
.proc2-bar { margin-top: 0; border-radius: 16px; background: #3b5bdb; padding: 26px 36px; display: flex; align-items: center; gap: 36px; }
.proc2-feat { display: flex; align-items: center; gap: 18px; flex: 1; }
.proc2-feat-box { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.18); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.proc2-feat-title { font-size: 15.5px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.proc2-feat-desc { font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.45; }
@media (max-width: 720px) {
  .proc2-header { flex-direction: column; gap: 8px; margin-bottom: 40px; }
  .proc2-title { font-size: clamp(26px, 7vw, 34px); }
  .proc2-sub { font-size: 14px; }
  /* Większa mapa świata na mobile */
  .proc2-map-col { width: 100%; margin-right: 0; margin-top: 14px; align-self: center; }
  .proc2-worldmap-svg { width: 100%; margin-left: 0; }
  /* Węższe kolumny + mniejsze numerki 1-2-3-4 i ikony, by zmieścił się tekst */
  .proc2-row { grid-template-columns: 42px 50px 1fr; }
  .proc2-badge { width: 32px; height: 32px; font-size: 11px; }
  .proc2-icon-circle { width: 50px; height: 50px; }
  .proc2-icon-circle svg { width: 24px; height: 24px; }
  .proc2-content { padding: 2px 0 38px 6px; }
  .proc2-content h3 { font-size: 15px; margin-bottom: 7px; line-height: 1.25; overflow-wrap: break-word; }
  .proc2-content > p { font-size: 12.5px; line-height: 1.6; }
  /* Przerywana linia nie może wychodzić poza ekran w lewo */
  .proc2-steps { overflow-x: clip; }
  .proc2-bar { flex-direction: column; gap: 20px; }
  .proc2-page { padding: 36px 18px 40px; }
  /* Plany kaucji: w pionie, by kwoty (np. „do 200 000 $") się nie ucinały */
  .proc2-plans { flex-direction: column; margin-top: 18px; }
  .proc2-plan { flex: none; border-right: none; border-bottom: 1px solid var(--line); padding: 14px 16px; }
  .proc2-plan:last-child { border-bottom: none; }
  .proc2-plan-amount { font-size: 19px; }
  .proc2-plan-meta { font-size: 12px; }
}

/* ===== Proces po zakupie ===== */
.proc2-after { margin-top: 52px; }
.proc2-after-head { margin-bottom: 36px; }
.proc2-after-title { font-size: clamp(26px, 3.5vw, 34px); font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin: 8px 0 10px; }
.proc2-after-sub { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.proc2-tl { display: flex; flex-direction: column; }
.proc2-tl-row { display: grid; grid-template-columns: 100px 1fr; gap: 0 20px; align-items: start; padding: 24px 0; }
.proc2-tl-left { display: flex; flex-direction: column; align-items: center; }
.proc2-tl-sq { width: 80px; height: 80px; border-radius: 20px; background: #eef1fb; display: grid; place-items: center; color: #4361ee; flex-shrink: 0; }
.proc2-tl-vc { width: 1.5px; flex: 1; background: #dde2f4; min-height: 20px; margin: 6px 0; }
.proc2-tl-right { padding-top: 10px; }
.proc2-tl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.proc2-tl-num { width: 34px; height: 34px; border-radius: 10px; background: #4361ee; color: #fff; display: grid; place-items: center; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.proc2-tl-head h4 { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.proc2-tl-right p { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 0; }
.proc2-tl-hr { border: none; border-top: 1px solid var(--line); margin: 0 0 0 100px; }
/* CTA */
.proc2-cta-card { margin-top: 36px; background: #eef1fb; border-radius: 18px; padding: 24px 28px; display: flex; align-items: center; gap: 20px; }
.proc2-cta-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(67,97,238,.12); }
.proc2-cta-text { flex: 1; }
.proc2-cta-title { font-size: 18px; font-weight: 700; color: #4361ee; margin-bottom: 4px; }
.proc2-cta-desc { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.proc2-cta-btn { flex-shrink: 0; display: flex; align-items: center; gap: 8px; background: #4361ee; color: #fff; border: none; border-radius: 12px; padding: 14px 26px; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: filter .15s; }
.proc2-cta-btn:hover { filter: brightness(1.08); }
@media (max-width: 720px) {
  .proc2-tl-row { grid-template-columns: 70px 1fr; gap: 0 14px; }
  .proc2-tl-sq { width: 64px; height: 64px; border-radius: 16px; }
  .proc2-tl-hr { margin-left: 70px; }
  .proc2-cta-card { flex-direction: column; align-items: flex-start; }
}

/* ---------- Panel klienta / Dashboard ---------- */
.dashboard { max-width: var(--maxw); margin: 0 auto; padding: 22px 24px 0; width: 100%; }
.dash-bar { margin-bottom: 16px; }
.dash-layout { display: grid; grid-template-columns: 252px 1fr; gap: 24px; align-items: start; }
.dash-side-nav { position: sticky; top: 96px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.dash-user { display: flex; align-items: center; gap: 12px; padding: 6px 6px 16px; border-bottom: 1px solid var(--line-2); margin-bottom: 12px; }
.dash-av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-ink)); color: #fff; display: grid; place-items: center; font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-weight: 800; flex-shrink: 0; }
.dash-user b { display: block; font-size: 14px; color: var(--ink); }
.dash-user em { font-style: normal; font-size: 12px; color: var(--live); font-weight: 600; }
.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-btn { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: none; padding: 11px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); transition: background .14s, color .14s; }
.dash-nav-btn span { flex: 1; }
.dash-nav-btn:hover { background: var(--surface-2); color: var(--ink); }
.dash-nav-btn.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.dash-nav-btn svg { color: var(--faint); flex-shrink: 0; }
.dash-nav-btn.on svg { color: var(--accent); }
.dash-nav-count { flex: none !important; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.dash-nav-sep { height: 1px; background: var(--line-2); margin: 12px 4px; }
.dash-nav-foot { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-btn.danger { color: var(--danger); }
.dash-nav-btn.danger svg { color: var(--danger); }
.dash-nav-btn.danger:hover { background: #fdecec; }

.dash-main { min-width: 0; }
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.dash-head h1 { font-size: clamp(22px, 3vw, 28px); }
.dash-head p { color: var(--muted); margin: 5px 0 0; }
.dash-head .btn { flex-shrink: 0; }

.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 30px; }
.dash-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-align: left; transition: transform .14s, box-shadow .14s, border-color .14s; }
.dash-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #d6dde7; }
.dash-stat-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; margin-bottom: 8px; }
.dash-stat-n { font-family: "Plus Jakarta Sans", sans-serif; font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.dash-stat-l { font-size: 13px; color: var(--muted); font-weight: 600; }
.dash-stat-accent .dash-stat-ic { background: var(--accent-soft); color: var(--accent-ink); }
.dash-stat-blue .dash-stat-ic { background: #e7f1fb; color: #1568c4; }
.dash-stat-amber .dash-stat-ic { background: #fdf3e3; color: #b5710b; }
.dash-stat-pink .dash-stat-ic { background: #fdeaf2; color: #c43b73; }

.dash-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 14px; }
.dash-section-head h2 { display: flex; align-items: center; gap: 9px; font-size: 18px; }
.dash-section-head h2 svg { color: var(--accent); }
.dash-showmore { display: flex; justify-content: center; margin-top: 14px; }
.dash-showmore .btn { gap: 6px; }
.dash-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.dash-link:hover { text-decoration: underline; }

.dash-list { display: flex; flex-direction: column; gap: 12px; }
.dash-row { display: grid; grid-template-columns: 300px 1fr auto; gap: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: visible; cursor: pointer; transition: transform .12s, box-shadow .15s, border-color .15s; position: relative; }
.dash-row-photo { position: relative; overflow: hidden; border-radius: 13px 0 0 13px; width: 300px; min-width: 300px; max-width: 300px; align-self: stretch; min-height: 100%; background: var(--surface-2); }
.dash-row:hover { box-shadow: var(--shadow-md); border-color: #d6dde7; transform: translateY(-2px); }
.dash-row-photo .photo { width: 100% !important; height: 100% !important; min-height: 0 !important; border-radius: 0; }
.dash-row-photo .photo-real .photo-img { object-fit: cover; object-position: center; }
.dash-row-main { padding: 18px 22px; display: flex; flex-direction: column; gap: 7px; min-width: 0; justify-content: center; }
.dash-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-row-head h4 { font-size: 16px; font-weight: 700; }
.dash-row-meta { display: flex; flex-wrap: wrap; gap: 14px; }
.dash-row-meta span { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.dash-row-meta svg { color: var(--faint); }
.dash-row-meta-2 { margin-top: 5px; gap: 14px; }
.dash-row-meta-2 span { font-size: 13.5px; }
.dash-row-meta-2 em { font-style: normal; font-weight: 700; color: var(--ink-2); margin-right: 3px; }
.dash-row-meta-2:empty { display: none; }
.dash-transit { margin-top: 3px; max-width: 360px; }
.dash-transit-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dash-stage-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); }
.dash-eta { font-size: 12px; font-weight: 700; color: var(--muted); }
.stage-bar { display: flex; gap: 4px; }
.stage-seg { flex: 1; height: 5px; border-radius: 3px; background: var(--line); transition: background .2s; }
.stage-seg.on { background: var(--accent); }
.dash-bidstatus { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.dash-bidstatus .dot { width: 7px; height: 7px; }
.dash-bidstatus.lead { color: #0c7a4d; } .dash-bidstatus.lead .dot { background: var(--live); }
.dash-bidstatus.out { color: var(--danger); } .dash-bidstatus.out .dot { background: var(--danger); }
.dash-time { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.dash-row-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; padding: 18px 22px; border-left: 1px solid var(--line-2); }
.dash-side-lab { font-size: 11px; color: var(--muted); font-weight: 600; }
.dash-side-val { font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.dash-side-val.muted { color: var(--muted); }
.dash-side-sub { font-size: 11px; color: var(--faint); font-weight: 600; }

/* Cena "Kup teraz" - zielone przezroczyste okienko z obramówką */
.dash-qb-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 18px;
  background: rgba(34, 161, 99, .08);
  border: 1.5px solid rgba(34, 161, 99, .55);
  border-radius: 10px;
  text-align: center;
  min-width: 150px;
  align-self: center;
  box-shadow: 0 2px 6px rgba(12, 122, 77, .15), 0 1px 2px rgba(12, 122, 77, .1);
}
.dash-qb-price .dash-side-lab { color: #0c7a4d; font-weight: 700; }
.dash-qb-price .dash-side-val { color: #0c7a4d; }

/* Cena zakupu w transporcie - niebieskie okienko (Feature 6) */
.dash-buy-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 18px;
  background: rgba(21, 104, 196, .08);
  border: 1.5px solid rgba(21, 104, 196, .5);
  border-radius: 10px;
  text-align: center;
  min-width: 150px;
  align-self: center;
  box-shadow: 0 2px 6px rgba(21, 104, 196, .14), 0 1px 2px rgba(21, 104, 196, .1);
}
.dash-buy-box .dash-side-lab { color: #1568c4; font-weight: 700; }
.dash-buy-box .dash-side-val { color: #1568c4; }
.dash-row-side:has(.dash-buy-box) { align-items: center; text-align: center; justify-content: center; gap: 8px; }

/* Pojazd niedostępny do licytacji - sprzedany lub zły tytuł (Feature 1 + 8) */
.bid-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  padding: 18px 16px;
  border-radius: 12px;
  margin-top: 4px;
}
.bid-locked.sold { background: #f0f2f5; border: 1px solid var(--line); color: var(--ink-2); }
.bid-locked.bad { background: #fdecec; border: none; color: #7a1f22; }
.bid-locked.risk { background: #fff4e5; border: none; color: #7a4a06; padding: 13px 14px; gap: 5px; margin-bottom: 12px; }
.bid-locked.risk b { font-size: 13.5px; }
.bid-locked.risk p { font-size: 11.5px; line-height: 1.5; }
.hr-flash { animation: hr-flash 1.7s ease-out; }
@keyframes hr-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,131,0,0); } 15% { box-shadow: 0 0 0 3px rgba(217,131,0,.5); } }
.bid-locked.risk svg { color: #d98300; }
.bid-locked.risk b { color: #7a4a06; }
.bid-locked.live { background: color-mix(in oklab, var(--soon) 12%, var(--surface)); color: #7a4a06; }
.bid-locked.live svg { color: var(--soon); }
.bid-locked.live b { color: #7a4a06; }
.det-bid-live-off { margin-top: 10px; opacity: .45; pointer-events: none; cursor: not-allowed; filter: grayscale(.15); }
.bid-locked svg { color: currentColor; opacity: .85; }
.bid-locked.sold svg { color: #6b7688; }
.bid-locked.bad svg { color: #d23b40; }
.bid-locked b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.bid-locked.bad b { color: #7a1f22; }
.bid-locked p { font-size: 12.5px; line-height: 1.55; margin: 0; color: inherit; }

/* System odliczania do aukcji — żywy licznik (-1h względem API) */
.bid-countdown {
  margin-top: 4px;
  padding: 14px 16px 13px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent), transparent 80%);
  text-align: center;
}
.bid-cd-lab {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: color-mix(in oklab, var(--accent), black 12%);
}
.bid-cd-lab svg { color: var(--accent); }
.bid-cd-clock {
  display: flex; align-items: flex-start; justify-content: center; gap: 8px;
  margin: 9px 0 8px;
  font-variant-numeric: tabular-nums;
}
.bid-cd-seg { display: flex; flex-direction: column; align-items: center; min-width: 42px; }
.bid-cd-seg b {
  font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: var(--ink);
}
.bid-cd-seg i {
  margin-top: 5px; font-style: normal; font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
}
.bid-cd-sep { font-size: 26px; font-weight: 700; line-height: 1.05; color: color-mix(in oklab, var(--accent), transparent 35%); }
.bid-cd-note { display: block; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); margin-top: 2px; }

/* Wymuś wyśrodkowanie kolumny side gdy zawiera blok QB */
.dash-row-side:has(.dash-qb-price) { align-items: center; }
/* Wymuś wyśrodkowanie kolumny side gdy zawiera blok odrzuconego QB */
.dash-row-side:has(.dash-rej-price) { align-items: center; text-align: center; justify-content: center; gap: 8px; }
/* Aktywna licytacja - wyśrodkowana kolumna z datą, statusem, Twoją i aktualną ofertą */
.dash-row-side:has(.dash-bid-date) { align-items: center; text-align: center; justify-content: center; gap: 8px; }

/* Szybki zakup - oczekuje na decyzję (kolumna główna) - wyśrodkowany status */
.dash-qb-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  align-self: center;
  width: 100%;
  margin-top: 4px;
}
.dash-qb-pending-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #0c7a4d;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-wrap: balance;
}
.dash-qb-pending-status .dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(25,164,99,.55);
  animation: bidDotPulse 1.8s ease-in-out infinite;
}

/* Szybki zakup oczekujący - wyśrodkuj meta (VIN, przebieg, sprzedający) i tytuł */
.dash-row:has(.dash-qb-pending) .dash-row-main {
  align-items: center;
  text-align: center;
  justify-content: center;
}
.dash-row:has(.dash-qb-pending) .dash-row-meta,
.dash-row:has(.dash-qb-pending) .dash-row-meta-2 {
  justify-content: center;
  text-align: center;
}
.dash-row:has(.dash-qb-pending) .dash-row-head {
  justify-content: center;
  text-align: center;
}

/* Wyśrodkowanie kolumny bocznej dla oczekującego szybkiego zakupu (data + Twoja oferta + status) */
.dash-row-side:has(.dash-badge.amber), .dash-row-side:has(.dash-badge.gray) { align-items: center; text-align: center; justify-content: center; gap: 8px; }
.dash-badge-qb-lg {
  font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase;
  letter-spacing: .04em; padding: 10px 18px !important;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center; line-height: 1.3;
}
.dash-badge-qb-lg svg { margin-bottom: 2px; }
.dash-badge-lines { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.dash-badge-lines span { display: block; white-space: nowrap; }
.dash-badge.gray.dash-badge-qb-lg { letter-spacing: .02em; padding: 10px 16px !important; }
.dash-badge-pulse {
  animation: badgePulse 2s ease-in-out infinite;
  box-shadow: none;
}
.dash-badge-pulse .dash-badge-lines {
  text-shadow: 0 1px 6px rgba(180, 130, 20, .4), 0 0 12px rgba(180, 130, 20, .2);
  animation: textPulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .88; }
}
@keyframes textPulse {
  0%, 100% { text-shadow: 0 1px 6px rgba(180, 130, 20, .4), 0 0 12px rgba(180, 130, 20, .2); }
  50% { text-shadow: 0 2px 10px rgba(180, 130, 20, .6), 0 0 20px rgba(180, 130, 20, .3); }
}

.dash-bid-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .01em;
}
.dash-bid-date svg { color: var(--faint); }

.dash-bid-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.dash-bid-status .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dash-bid-status.lead { background: rgba(34, 161, 99, .12); color: #0c7a4d; }
.dash-bid-status.lead .dot { background: #19a463; box-shadow: 0 0 0 0 rgba(25,164,99,.55); animation: bidDotPulse 1.8s ease-in-out infinite; }
.dash-bid-status.out { background: rgba(229, 72, 77, .12); color: #b3282c; }
.dash-bid-status.out .dot { background: #e5484d; }
@keyframes bidDotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(25,164,99,.5); }
  50%     { box-shadow: 0 0 0 5px rgba(25,164,99,0); }
}

/* Twoja oferta gdy przebita - czerwone okienko */
.dash-qb-price.out {
  background: rgba(229, 72, 77, .04);
  border-color: rgba(229, 72, 77, .45);
  box-shadow: 0 2px 6px rgba(179, 40, 44, .1), 0 1px 2px rgba(179, 40, 44, .08);
}
.dash-qb-price.out .dash-side-lab,
.dash-qb-price.out .dash-side-val { color: #b3282c; }

/* Aktualna oferta - mniejsze, neutralne okienko pod Twoją ofertą */
.dash-bid-current {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 14px;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 8px;
  min-width: 130px;
  text-align: center;
}
.dash-bid-current .dash-side-lab { color: var(--muted); font-size: 10.5px; }
.dash-bid-current .dash-side-val { font-size: 15px; color: var(--ink-2); }

/* Data zakończenia (odrzucenia) - nad blokiem Twoja oferta */
.dash-rej-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .02em;
}
.dash-rej-date svg { color: var(--faint); }

/* Odrzucony szybki zakup - czerwone przezroczyste okienko (jaśniejsze tło) */
.dash-rej-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 18px;
  background: rgba(229, 72, 77, .04);
  border: 1.5px solid rgba(229, 72, 77, .45);
  border-radius: 10px;
  text-align: center;
  min-width: 150px;
  align-self: center;
  box-shadow: 0 2px 6px rgba(179, 40, 44, .1), 0 1px 2px rgba(179, 40, 44, .08);
}
.dash-rej-price .dash-side-lab { color: #b3282c; font-weight: 700; }
.dash-rej-price .dash-side-val { color: #b3282c; }

/* Wrapper na badge "Odrzucone" + tooltip - utrzymuje overflow widoczny dla tooltipa */
.dash-rej-wrap {
  position: relative;
  align-self: center;
  margin-top: 10px;
  display: inline-flex;
  outline: none;
}

/* Badge "Odrzucone" - większy, ciemniejsze tło, animacja "miecza światła" */
.dash-rej-badge {
  cursor: help;
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: #f7c4c5;
  color: #8a1e22;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 0 !important;
}
.dash-rej-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, .85) 50%,
    transparent 65%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: rejSweep 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.dash-rej-badge > * { position: relative; z-index: 2; }
@keyframes rejSweep {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(180%); }
  100% { transform: translateX(180%); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-rej-badge::before { animation: none; opacity: 0; }
}
.dash-rej-tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 260px;
  white-space: normal;
  text-align: left;
  background: #1a1410;
  color: #fce9c4;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  padding: 11px 13px;
  border-radius: 9px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 10;
}
.dash-rej-tip b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.dash-rej-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a1410;
}
.dash-rej-wrap:hover .dash-rej-tip,
.dash-rej-wrap:focus .dash-rej-tip,
.dash-rej-wrap:focus-visible .dash-rej-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Bezpieczna strefa - kursor domyślny nad prawą kolumną (bez "klikalności") */
.dash-row-side { cursor: default; }

/* Przycisk "Opłać pojazd" - wycentrowany, lekko pulsuje */

/* ═══════ Karta wygranego pojazdu ═══════ */
.dash-row-won { grid-template-columns: 300px minmax(0, 1fr) 290px; gap: 0; align-items: stretch; height: 248px; }
.dash-row-won .won-photo { width: 300px; min-width: 300px; max-width: 300px; height: auto; aspect-ratio: auto; min-height: 100%; align-self: stretch; border-radius: 13px 0 0 13px; }
.won-main { padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; justify-content: flex-start; }
.won-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 10px; }
.won-head-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.won-title { font-size: 18.5px; font-weight: 800; color: var(--accent); margin: 0; line-height: 1.2; }
.won-meta-inline { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 600; font-family: "Plus Jakarta Sans", sans-serif; min-width: 0; flex-wrap: wrap; }
.won-sep { color: var(--faint); }
.won-vin, .won-lot { letter-spacing: .01em; }
.won-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px 28px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.4;
  min-width: 0;
  flex: 1;
  align-content: center;
}
.won-spec { min-width: 0; }
.won-spec:nth-child(n+4) { margin-top: -16px; }
.won-spec em { color: var(--muted); font-style: normal; font-weight: 500; display: block; font-size: 12.5px; margin-bottom: 1px; }
.won-spec b { font-weight: 700; color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.won-spec b.won-doc-good { color: #0c7a4d; }
.won-spec b.won-doc-mid { color: #b8860a; }
.won-spec b.won-doc-bad { color: #b3282c; }
.won-spec b.run-go { color: #15a34a; }
.won-spec b.run-start { color: #2563eb; }
.won-spec b.run-no { color: #e0a106; }
.won-spec b.won-sell-dealer { color: #b8860a; }
.won-spec b.won-sell-ins { color: #0c7a4d; }

.won-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 9px;
  padding: 14px 20px;
  border-left: 1px solid var(--line-2);
  text-align: center;
  min-width: 0;
}
.won-side-meta { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.won-side-src { position: absolute; top: 12px; right: 16px; }
.won-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.won-date svg { color: var(--muted); flex-shrink: 0; }
.won-ended { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.won-ended svg { color: var(--muted); flex-shrink: 0; }
.won-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--live); white-space: nowrap; }
.won-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex-shrink: 0; box-shadow: 0 0 0 0 color-mix(in oklab, var(--live) 60%, transparent); animation: won-live-pulse 1.6s ease-out infinite; }
@keyframes won-live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--live) 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.won-pricebox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  padding: 9px 14px;
  background: #ecf7ef;
  border: none;
  border-radius: 10px;
  width: 100%;
  max-width: 400px;
}
.won-price-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  align-items: center;
  text-align: center;
}
.won-price-lab { font-size: 11px; font-weight: 500; color: #4a6b53; letter-spacing: 0; text-transform: none; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.won-price-val { font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 800; color: #1f7a47; letter-spacing: -.01em; line-height: 1.15; }
/* Karta „Przegrane" — box „Twoja oferta" na czerwonym przezroczystym tle */
.won-pricebox.won-pricebox-lost { background: color-mix(in oklab, var(--danger) 10%, transparent); }
.won-pricebox-lost .won-price-lab { color: color-mix(in oklab, var(--danger), black 22%); }
.won-pricebox-lost .won-price-val { color: color-mix(in oklab, var(--danger), black 12%); }
/* Karta „Przegrane" — box „Finalna oferta" na szarym, neutralnym tle */
.won-pricebox.won-pricebox-final { background: color-mix(in oklab, var(--ink) 7%, transparent); }
.won-pricebox-final .won-price-lab { color: var(--muted); }
.won-pricebox-final .won-price-val { color: var(--ink); }
.won-pay-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  background: #22b06c;
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  border: none;
  border-radius: 999px;
  padding: 13px 22px;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 0 14px 1px rgba(56, 200, 130, .35);
  transition: filter .15s, transform .15s, box-shadow .15s;
  animation: wonPayPulse 2.4s ease-in-out infinite;
}
.won-pay-btn:hover { filter: brightness(1.05); box-shadow: 0 0 18px 2px rgba(56, 200, 130, .5); animation-play-state: paused; }
.won-pay-btn:active { transform: translateY(1px); }
@keyframes wonPayPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 12px 1px rgba(56, 200, 130, .3);
  }
  50% {
    transform: scale(1.012);
    box-shadow: 0 0 18px 2px rgba(56, 200, 130, .48);
  }
}
@media (prefers-reduced-motion: reduce) {
  .won-pay-btn { animation: none; }
}

/* Box "Wygrany pojazd" - po opłaceniu (zielony gradient, zielona obwódka, biały tekst, delikatny cień; bez efektu 3D) */
.won-status-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  background-image: linear-gradient(135deg, #2bc47e 0%, #16a163 100%);
  border: none;
  border-radius: 16px;
  padding: 7px 14px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(31, 144, 89, .22);
}
.won-status-box svg { color: #fff; }

/* ═══════ Negocjacje / akceptacja sprzedawcy (świeżo wygrany pojazd) ═══════ */
.won-neg { width: 100%; max-width: 340px; border-radius: 12px; box-sizing: border-box; }

/* Oczekiwanie — żółty */
.won-neg-wait {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(230, 170, 20, .13), rgba(230, 170, 20, .06));
  border: 1px solid rgba(200, 145, 12, .32);
}
.won-neg-spin {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
  border: 2.5px solid rgba(190, 135, 10, .28); border-top-color: #c8910c;
  animation: wonNegSpin .8s linear infinite;
}
@keyframes wonNegSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .won-neg-spin { animation: none; } }
.won-neg-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.won-neg-wait { justify-content: center; text-align: center; }
.won-neg-wait .won-neg-txt { flex: 1; align-items: center; text-align: center; }
.won-neg-wait .won-neg-txt b { font-size: 14px; font-weight: 800; color: #8a640a; }
.won-neg-txt em { font-style: normal; font-size: 11.5px; font-weight: 500; line-height: 1.4; color: var(--muted); }

/* Kontroferta sprzedawcy */
.won-neg-counter {
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px 14px;
  background: linear-gradient(135deg, rgba(47, 109, 246, .09), rgba(47, 109, 246, .03));
  border: 1px solid rgba(47, 109, 246, .28);
}
.won-neg-head { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: #1f5fbf; }
.won-neg-head svg { color: #2f6df6; }
.won-neg-price { font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; font-weight: 800; color: #0e1d33; letter-spacing: -.01em; }
.won-neg-actions { display: flex; flex-direction: column; gap: 7px; }
.won-neg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 9px; padding: 9px 12px; font: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: filter .15s;
}
.won-neg-btn.accept { background: #19a463; color: #fff; }
.won-neg-btn.accept:hover { filter: brightness(1.06); }
.won-neg-btn.reject { background: #fff; color: #c0392b; border: 1.5px solid rgba(192, 57, 43, .32); }
.won-neg-btn.reject:hover { background: rgba(192, 57, 43, .06); }
.won-neg-x { font-size: 16px; line-height: 1; font-weight: 700; }
.won-neg-own {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 9px; padding: 0 6px 0 10px;
}
.won-neg-own:focus-within { border-color: var(--accent); }
.won-neg-own-cur { color: var(--muted); font-weight: 700; font-size: 13px; }
.won-neg-own input { flex: 1; min-width: 0; border: none; background: none; padding: 9px 0; font: inherit; font-size: 13px; color: var(--ink); }
.won-neg-own input:focus { outline: none; }
.won-neg-own-send {
  border: none; border-radius: 7px; padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 700;
  background: var(--ink-2, #0e1d33); color: #fff; cursor: pointer; transition: filter .15s, opacity .15s;
}
.won-neg-own-send:hover { filter: brightness(1.12); }
.won-neg-own-send:disabled { opacity: .4; cursor: default; }

/* Odrzucone / niesfinalizowane — czerwony */
.won-neg-bad {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(229, 72, 77, .10), rgba(229, 72, 77, .035));
  border: 1px solid rgba(200, 50, 55, .28);
}
.won-neg-ic { flex-shrink: 0; margin-top: 1px; }
.won-neg-ic svg { color: #c0392b; }
.won-neg-bad .won-neg-txt b { font-size: 13.5px; font-weight: 800; color: #a52d24; }

/* Kontroferta sprzedawcy przy aktywnej licytacji. */
.bid-counter-side { justify-content: center; align-items: center; text-align: center; }
.bid-counter-box { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.bid-counter-label { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.bid-counter-label b { color: #b45309; font-size: 18px; margin-left: 4px; }
.bid-counter-summary { width: 100%; overflow: hidden; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); box-shadow: 0 3px 12px rgba(15,29,51,.05); }
.bid-counter-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; }
.bid-counter-summary-row + .bid-counter-summary-row { border-top: 1px solid var(--line-2); }
.bid-counter-summary-row span { font-size: 11.5px; font-weight: 650; color: var(--muted); }
.bid-counter-summary-row b { font-family: "Plus Jakarta Sans",sans-serif; font-size: 16px; color: var(--ink); }
.bid-counter-summary-row.seller { background: #fff8e8; }
.bid-counter-summary-row.seller span, .bid-counter-summary-row.seller b { color: #9a5b08; }
.bid-counter-current { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: var(--muted); }
.bid-counter-current b { color: var(--ink); font-size: 15px; }
.bid-counter-label-own { margin-top: -2px; color: var(--ink); }
.bid-counter-actions, .bid-counter-inputrow { display: flex; justify-content: center; align-items: center; gap: 7px; flex-wrap: wrap; width: 100%; }
.bid-counter-btn { border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; transition: filter .15s, transform .15s, background .15s; }
.bid-counter-btn:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); }
.bid-counter-btn:disabled { opacity: .5; cursor: wait; }
.bid-counter-btn.accept, .bid-counter-btn.send { background: #16824f; border-color: #16824f; color: #fff; }
.bid-counter-btn.cancel { background: #f4f6f9; border-color: #d8dee8; color: #536174; }
.bid-counter-btn.back { background: var(--surface); color: var(--ink-2); }
.bid-counter-actions .bid-counter-btn { flex: 1; min-width: 110px; }
.bid-counter-own-open { width: 100%; border: 0; border-radius: 9px; padding: 8px 12px; background: #eaf1ff; color: #235db5; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.bid-counter-own-open:hover:not(:disabled) { background: #dfeaff; }
.bid-counter-own-open:disabled { opacity: .5; cursor: wait; }
.bid-counter-input { display: inline-flex; align-items: center; min-width: 130px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--surface); padding-left: 10px; }
.bid-counter-input:focus-within { border-color: var(--accent); }
.bid-counter-input > span { color: var(--muted); font-weight: 700; }
.bid-counter-input input { width: 90px; border: 0; outline: 0; background: transparent; padding: 8px 8px 8px 4px; font: inherit; font-weight: 750; color: var(--ink); }
.bid-counter-error { color: #b42318; font-size: 11.5px; font-weight: 650; }
.bid-counter-sent { width: 100%; max-width: 340px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 14px 16px; border: 1px solid rgba(22,130,79,.24); border-radius: 12px; background: rgba(22,130,79,.08); color: #11683f; text-align: center; box-sizing: border-box; }
.bid-counter-sent span { font-size: 12px; color: var(--ink-2); }

/* "Odebrane" — zielony półprzezroczysty gradient, bez obramowania, szary cień, „v" w kółeczku */
.won-received {
  border: none !important;
  background-color: transparent;
  background-image: linear-gradient(135deg, rgba(46, 196, 126, .26) 0%, rgba(28, 140, 86, .14) 100%);
  background-size: auto;
  background-position: 0 0;
  color: #156b41;
  box-shadow: 0 6px 18px rgba(64, 74, 86, .18), 0 1px 2px rgba(64, 74, 86, .12);
  gap: 10px;
  padding: 8px 16px;
}
.won-received .won-received-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(180deg, #2bc47e 0%, #1f9f64 100%);
  box-shadow: 0 2px 5px rgba(31, 144, 89, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.won-received .won-received-tick svg { color: #fff; }
.won-received .won-received-txt em { font-style: normal; font-weight: 700; opacity: .82; }

/* Pojazd w porcie — gotowy do fizycznego odbioru przez klienta */
.won-deliver { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.won-deliver-note { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--accent-ink, #1f5fbf); }
.won-deliver-note svg { color: var(--accent, #2f6df6); }
.won-receive-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--accent, #2f6df6);
  color: var(--accent-ink, #2560d8);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--accent, #2f6df6);
  border-radius: 10px;
  padding: 12px 14px;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: none;
  transition: color .28s ease, box-shadow .2s ease, transform .15s;
}
/* Warstwa w kolorze karty, która ZNIKA od dołu przy najechaniu — dzięki temu
   między obramowaniem a wypełnieniem nie ma białych szczelin (fill = ramka). */
.won-receive-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface, #fff);
  transform-origin: bottom;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1);
  transform: scaleY(1);
}
.won-receive-btn:hover { color: #fff; box-shadow: 0 6px 16px rgba(47, 109, 246, .28); }
.won-receive-btn:hover::before { transform: scaleY(0); }
.won-receive-btn:active { transform: translateY(1px); }

/* Pojedyncza cena w panelu (transport / obserwowane) */
.won-pricebox-single { grid-template-columns: 1fr; }
.won-pricebox-single .won-price-col { align-items: center; text-align: center; }

/* ── Aktywne licytacje: podbicie własnej oferty (wyśrodkowane) ── */
.won-raise {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%; max-width: 320px; margin: 2px auto 0;
  padding-top: 14px; border-top: 1px dashed var(--line-2);
}
.won-raise-lab {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.won-raise-row { display: flex; align-items: stretch; gap: 8px; width: 100%; justify-content: center; position: relative; }
.won-raise-input {
  position: relative; display: flex; align-items: center; flex: 1 1 auto; max-width: 150px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.won-raise-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34, 161, 99, .14); }
.won-raise-input.err { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .12); }
.won-raise-cur { padding-left: 8px; font-size: 15px; font-weight: 700; color: var(--muted); }
.won-raise-input input {
  width: 100%; border: none; outline: none; background: transparent;
  padding: 10px 4px; font-family: "Plus Jakarta Sans", sans-serif;
  text-align: center;
  font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
}
.won-raise-input input::placeholder { color: var(--faint); font-weight: 600; }
.won-raise-current { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }
.won-raise-current b { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; color: var(--ink); margin-left: 3px; letter-spacing: -.01em; }
.won-raise-step {
  flex-shrink: 0; align-self: stretch; width: 34px; margin: 3px 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  color: var(--accent); cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.won-raise-step.minus { margin-left: 3px; }
.won-raise-step.plus { margin-right: 3px; }
.won-raise-step:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.won-raise-step:active { transform: scale(.94); }
.won-raise-btn {
  flex: 0 0 auto; white-space: nowrap; padding: 0 16px; font-size: 13.5px; font-weight: 700;
  background: var(--accent); color: #fff; border: none; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(34, 161, 99, .28); transition: filter .15s ease, transform .1s ease;
}
.won-raise-btn:hover { filter: brightness(1.05); }
.won-raise-btn:active { transform: translateY(1px); }
.won-raise-hint { font-size: 11px; color: var(--muted); font-weight: 600; text-align: center; }
/* Anuluj ofertę — dyskretny przycisk pod podbiciem */
.won-cancel-bid {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  margin: 2px auto 0; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--muted);
  padding: 4px 8px; border-radius: 7px; transition: color .15s, background .15s;
}
.won-cancel-bid:hover { color: #d8434a; background: #fdecec; }
.won-cancel-x { font-size: 10px; line-height: 1; font-weight: 800; }
.bidc-ic-danger { background: #fdecec !important; color: #cf3b40 !important; }

/* ── Chmurka błędu podbicia: pływa NAD polem, nie przesuwa układu i nie zasłania licytacji ── */
.won-raise-pop {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  z-index: 40; width: max-content; max-width: 300px;
  display: flex; align-items: flex-start; gap: 8px;
  padding: 11px 12px 11px 12px;
  background: #2b1416; color: #ffe9ea; border: 1px solid #5a2326; border-radius: 12px;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
  font-size: 12px; font-weight: 600; line-height: 1.4; text-align: left;
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .won-raise-pop { animation: raisePopIn .16s cubic-bezier(.16,1,.3,1); }
}
.won-raise-pop::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: #2b1416;
  filter: drop-shadow(0 1px 0 #5a2326);
}
.won-raise-pop-ic { color: #ff9ea1; flex-shrink: 0; margin-top: 1px; }
.won-raise-pop-txt { flex: 1 1 auto; }
.won-raise-pop-x {
  flex-shrink: 0; width: 18px; height: 18px; margin: -2px -2px 0 2px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: #ffb3b5; font-size: 17px; line-height: 1; border-radius: 5px;
  transition: background .12s ease, color .12s ease;
}
.won-raise-pop-x:hover { background: rgba(255,255,255,.12); color: #fff; }
@keyframes raisePopIn {
  from { transform: translateX(-50%) translateY(6px) scale(.97); }
  to   { transform: translateX(-50%) translateY(0) scale(1); }
}

/* ── Aktywne licytacje: prawa kolumna mieści się w wysokości zdjęcia (karta = tyle co inne) ── */
.won-side:has(.won-raise) { gap: 5px; padding: 7px 8px 7px 20px; justify-content: center; align-items: center; text-align: center; }
.won-side:has(.won-raise) .won-side-meta { flex-direction: column; flex-wrap: wrap; gap: 2px; align-items: center; text-align: center; margin: 0 auto; }
.won-side:has(.won-raise) .won-date { font-size: 11px; white-space: nowrap; }
.won-side:has(.won-raise) .dash-bid-status { font-size: 10.5px; white-space: nowrap; }
.won-side:has(.won-raise) .won-pricebox { padding: 5px 12px; gap: 0 10px; max-width: 250px; margin: 0 auto; }
.won-side:has(.won-raise) .won-price-lab { font-size: 9.5px; }
.won-side:has(.won-raise) .won-price-val { font-size: 14.5px; }
.won-side:has(.won-raise) .won-raise { padding-top: 5px; gap: 4px; max-width: 250px; margin: 0 auto; }
.won-side:has(.won-raise) .won-raise-lab { font-size: 9.5px; }
.won-side:has(.won-raise) .won-raise-row { flex-direction: column; gap: 5px; align-items: center; }
.won-side:has(.won-raise) .won-raise-input { max-width: 100%; width: 100%; }
.won-side:has(.won-raise) .won-raise-cur { padding-left: 12px; font-size: 13.5px; }
.won-side:has(.won-raise) .won-raise-current { font-size: 11px; }
.won-side:has(.won-raise) .won-raise-input input { padding: 6px 4px; font-size: 13.5px; }
.won-side:has(.won-raise) .won-raise-step { width: 30px; }
.won-side:has(.won-raise) .won-raise-btn { width: 100%; justify-content: center; padding: 7px 14px; font-size: 12.5px; }
.won-side:has(.won-raise) .won-raise-hint { font-size: 9.5px; }

/* ── Aktywne licytacje: oczekujący szybki zakup (przeprojektowany słupek) ── */
.won-side-qb { gap: 12px; justify-content: center; align-items: center; text-align: center; }
.qbside-when {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .01em;
}
.qbside-when svg { color: var(--faint); flex-shrink: 0; }

/* Chip "Szybki zakup" — poza zieloną kartą, nad nią */
.qbside-offer-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: #1f7a47; background: rgba(43, 182, 115, .14);
  border: 1px solid rgba(31, 144, 89, .32); border-radius: 999px; padding: 4px 11px;
  white-space: nowrap;
}
.qbside-offer-chip svg { color: #22a163; }

/* Karta "Twoja oferta" — zielony gradient z teksturą diagonalnych prążków, wyśrodkowana */
.qbside-offer {
  position: relative; overflow: hidden;
  width: 100%; max-width: 250px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 15px 16px 16px;
  border-radius: 14px;
  background-color: #117a4a;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, #1ba35f 0%, #0e6b41 100%);
  box-shadow: 0 10px 24px rgba(15, 90, 56, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
  text-align: center;
}
.qbside-offer::after {
  content: ""; position: absolute; top: -26px; right: -26px; width: 86px; height: 86px;
  background: radial-gradient(circle, rgba(120, 240, 180, .5), transparent 68%);
  pointer-events: none;
}
.qbside-offer-lab {
  position: relative; z-index: 1;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #b5e8cc;
  text-shadow: 0 1px 3px rgba(6, 50, 30, .35);
}
.qbside-offer-val {
  position: relative; z-index: 1;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 27px; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.05;
  text-shadow: 0 2px 7px rgba(6, 50, 30, .4), 0 0 7px rgba(255, 255, 255, .25);
  animation: qbOfferPulse 2.4s ease-in-out infinite;
}
@keyframes qbOfferPulse {
  0%, 100% { transform: scale(1); text-shadow: 0 2px 7px rgba(6, 50, 30, .4), 0 0 6px rgba(255, 255, 255, .22); }
  50% { transform: scale(1.04); text-shadow: 0 3px 10px rgba(6, 50, 30, .45), 0 0 15px rgba(255, 255, 255, .6); }
}
@media (prefers-reduced-motion: reduce) { .qbside-offer-val { animation: none; } }

/* Pasek statusu — szary, z pulsującą bursztynową kropką */
.qbside-status {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 250px;
  padding: 10px 14px; border-radius: 11px;
  background: #f1f3f6; box-shadow: inset 0 0 0 1px #e2e6ec;
}
.qbside-status-dot {
  position: relative; flex-shrink: 0;
  width: 9px; height: 9px; border-radius: 50%; background: #e6a02f;
}
.qbside-status-dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid rgba(230, 160, 47, .5);
  animation: qbStatusPing 1.8s ease-out infinite;
}
@keyframes qbStatusPing {
  0% { transform: scale(.5); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
.qbside-status-txt {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: #56616f; text-align: center; line-height: 1.25;
}
@media (prefers-reduced-motion: reduce) { .qbside-status-dot::after { animation: none; } }

/* Przycisk "Usuń z obserwowanych" */
.won-unwatch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 340px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.won-unwatch-btn svg { color: #e0556a; fill: #e0556a; }
.won-unwatch-btn:hover { background: #fdecef; border-color: #f3c2cc; color: #b3282c; }
.won-unwatch-btn:hover svg { color: #b3282c; fill: #b3282c; }

/* ── Karta "W transporcie" — tracker transportu morskiego ── */
.tr-card {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  padding: 0;
  min-height: 248px;
}
.tr-photo {
  position: relative;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  align-self: stretch;
  min-height: 100%;
  border-radius: 13px 0 0 13px;
  overflow: hidden;
  background: var(--surface-2);
}
.tr-photo .photo { width: 100% !important; height: 100% !important; min-height: 0 !important; border-radius: 0; }
.tr-photo .photo-real .photo-img { object-fit: cover; object-position: center; }
.tr-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 20px; justify-content: flex-start; }
.tr-head { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.tr-title { font-size: 16px; font-weight: 800; color: var(--accent); line-height: 1.2; white-space: nowrap; }
.tr-dot { color: var(--faint); }
.tr-meta { font-size: 12.5px; font-weight: 600; color: var(--muted); font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: .01em; }
.tr-head-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.tr-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); background: rgba(120,134,153,.12); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.tr-status svg { color: var(--muted); }

.tr-box { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--surface); }
.tr-ship { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px 16px; align-items: start; }
.tr-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr-field-lab { font-size: 11.5px; font-weight: 500; color: var(--muted); line-height: 1.3; }
.tr-field-val { font-size: 13.5px; font-weight: 700; color: var(--ink); font-family: "Plus Jakarta Sans", sans-serif; line-height: 1.25; word-break: break-word; }
.tr-field-val.accent { color: var(--accent); }
.tr-field-val.none { color: var(--faint); font-weight: 600; }
.tr-field-val.strike { text-decoration: line-through; color: var(--faint); font-weight: 600; }
.tr-delay { display: inline-block; align-self: flex-start; margin-top: 5px; font-size: 11px; font-weight: 700; color: #a85d00; background: #fff4e3; border: 1px solid #f0d3a6; border-radius: 999px; padding: 3px 10px; }

.tr-box-div { height: 1px; background: var(--line-2); margin: 12px 0; }
.tr-stops { display: flex; flex-wrap: nowrap; gap: 0 18px; }
.tr-stop { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 0; }
.tr-stop-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr-stop-ic { position: relative; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; border: 1.5px solid #cbd3df; background: #fff; color: #fff; }
.tr-stop.done .tr-stop-ic { background: var(--accent); border-color: var(--accent); }
.tr-stop-loc { font-size: 13.5px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-stop.done .tr-stop-loc { color: var(--ink); }
.tr-stop-lab { font-size: 11.5px; color: var(--muted); padding-left: 26px; }
.tr-stop-date { font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding-left: 26px; }

.tr-foot { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--muted); padding: 0 2px; }
.tr-foot b { color: var(--ink); font-weight: 800; }
.tr-foot svg { color: var(--faint); vertical-align: -2px; margin-right: 3px; }
.tr-foot-sep { color: var(--faint); }
@media (max-width: 1024px) {
  .tr-card { grid-template-columns: 1fr; height: auto; }
  .tr-photo { width: 100%; min-width: 0; max-width: 100%; aspect-ratio: 16 / 9; min-height: 0; max-height: 240px; border-radius: 13px 13px 0 0; }
  .tr-stops { flex-wrap: wrap; gap: 14px 30px; }
  .tr-stop { flex: 0 1 210px; }
}
@media (max-width: 560px) {
  .tr-ship { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-stops { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 1100px) {
  .dash-row-won { grid-template-columns: 240px minmax(0, 1fr); height: auto; }
  .dash-row-won .won-photo { width: 100%; min-width: 0; max-width: 100%; }
  .won-side { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line-2); padding: 14px 20px; }
  .won-side-meta { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
  .won-pricebox { max-width: 360px; }
  .won-pay-btn { max-width: 360px; }
  .won-status-box { max-width: 360px; }
  .won-unwatch-btn { max-width: 360px; }
  .won-status-box { max-width: 360px; }
}
@media (max-width: 640px) {
  .dash-row-won { grid-template-columns: 1fr; }
  .dash-row-won .won-photo { width: 100%; max-width: 100%; aspect-ratio: 16/9; min-height: 0; border-radius: 13px 13px 0 0; }
  .won-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dash-qb-pay {
  margin-top: 8px;
  align-self: center;
  animation: dashQbPayPulse 2s ease-in-out infinite;
}
@keyframes dashQbPayPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 161, 99, .55); }
  50%      { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(34, 161, 99, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-qb-pay { animation: none; }
}

.dash-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 7px; margin-top: 3px; }
.dash-badge.ok { background: #e7f7ef; color: #0c7a4d; }
.dash-badge.transit { background: #e7f1fb; color: #1568c4; }
.dash-badge.lost { background: #fdecec; color: #b3282c; }
.dash-badge.gray { background: #f1f3f6; color: #4a5666; border: 1px solid #d4dae2; }
.dash-badge.cancelled { background: #fdeee4; color: #c2531a; border: 1px solid #f1c9a8; }
.dash-empty { text-align: center; padding: 44px 20px; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.dash-empty svg { color: var(--faint); }
.dash-empty p { margin: 12px 0 14px; }

/* ---------- Banner błędu API ---------- */
.api-banner { padding: 0; }
.api-banner-inner { max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 14px; }
.api-banner-error { background: #fdecec; border-bottom: 1px solid #f5c6c6; color: #b3282c; }
.api-banner-warn  { background: #fef5e2; border-bottom: 1px solid #f5dca0; color: #8a6010; }
.api-banner-ic { font-size: 22px; flex-shrink: 0; }
.api-banner b { display: block; font-size: 14px; font-weight: 700; }
.api-banner p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; }
.api-banner-btn { margin-left: auto; background: rgba(255,255,255,.7); border: 1px solid currentColor; padding: 7px 14px; border-radius: 8px; font-weight: 600; font-size: 13px; color: inherit; flex-shrink: 0; cursor: pointer; }
.api-banner-btn:hover { background: rgba(255,255,255,.95); }

/* ---------- Powiadomienia ---------- */
.notif-wrap { position: relative; flex-shrink: 0; }
.notif-bell { position: relative; background: none; border: 1px solid var(--line); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: background .15s, border-color .15s, color .15s; flex-shrink: 0; }
.notif-bell:hover, .notif-bell.on { background: var(--surface-2); border-color: #d0d6e0; color: var(--ink); }
.notif-bell-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; line-height: 1; border: 2px solid #fff; pointer-events: none; }

.notif-drop { position: absolute; top: calc(100% + 10px); right: -40px; width: 420px; max-height: 520px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 200; display: flex; flex-direction: column; overflow: hidden; animation: notifSlide .18s ease-out; }
@keyframes notifSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.notif-drop-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--line-2); }
.notif-drop-head h3 { font-size: 16px; margin: 0; }
.notif-drop-filters { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line-2); overflow-x: auto; }
.notif-df { background: none; border: 1px solid transparent; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; transition: all .12s; }
.notif-df:hover { color: var(--ink-2); background: var(--surface-2); }
.notif-df.on { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent), transparent 60%); color: var(--accent-ink); }
.notif-df-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 9px; font-weight: 800; display: inline-grid; place-items: center; line-height: 1; }
.notif-mark-all { background: none; border: none; color: var(--accent-ink); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; padding: 0; white-space: nowrap; cursor: pointer; }
.notif-mark-all:hover { text-decoration: underline; }

.notif-drop-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.notif-drop-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; cursor: pointer; position: relative; border-bottom: 1px solid var(--line-2); transition: background .1s; }
.notif-drop-item:last-child { border-bottom: none; }
.notif-drop-item:hover { background: var(--surface-2); }
.notif-drop-item.unread { background: color-mix(in oklab, var(--accent), transparent 95%); }
.notif-drop-item.unread:hover { background: color-mix(in oklab, var(--accent), transparent 90%); }
.notif-drop-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.notif-drop-body { flex: 1; min-width: 0; }
.notif-drop-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.notif-drop-title { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-drop-time { font-size: 11px; color: var(--faint); white-space: nowrap; flex-shrink: 0; }
.notif-drop-text { font-size: 12px; line-height: 1.45; color: var(--ink-2); margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-drop-action { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; }
.notif-drop-dot { position: absolute; top: 14px; right: 12px; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.notif-drop-empty { text-align: center; padding: 32px 16px; color: var(--muted); }
.notif-drop-empty p { margin: 8px 0 0; font-size: 13px; }

@media (max-width: 520px) {
  .notif-drop { width: calc(100vw - 24px); right: -12px; max-height: 70vh; }
}

/* ---------- Zgłoszenia / Tickety (klient) ---------- */
.tk-wrap { display: flex; flex-direction: column; }
.tk-back { align-self: flex-start; background: none; border: none; color: var(--accent-ink); font-weight: 700; font-size: 13px; padding: 0; margin-bottom: 16px; cursor: pointer; }
.tk-back:hover { text-decoration: underline; }
.tk-textarea { width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--ink); resize: vertical; font-family: inherit; line-height: 1.5; transition: border-color .18s, box-shadow .18s, background .18s; }
.tk-textarea:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 88%); }
/* Formularz nowego zgłoszenia — spójny z resztą panelu */
.tk-form { display: flex; flex-direction: column; gap: 16px; }
.tk-field { display: flex; flex-direction: column; gap: 7px; }
.tk-field-lab { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.tk-input { width: 100%; height: 46px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 0 14px; font-size: 14px; color: var(--ink); font-family: inherit; transition: border-color .18s, box-shadow .18s, background .18s; }
.tk-input::placeholder { color: var(--faint); font-weight: 500; }
.tk-input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 88%); }
.tk-form .req { color: var(--danger); font-style: normal; font-weight: 800; margin-left: 2px; }
.tk-form .set-foot { margin-top: 4px; }
.tk-list { display: flex; flex-direction: column; gap: 10px; }
.tk-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px; cursor: pointer; transition: border-color .14s, box-shadow .14s, transform .12s; }
.tk-row:hover { border-color: #d6dde7; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.tk-row.unread { border-left: 3px solid var(--accent); }
.tk-row-main { flex: 1; min-width: 0; }
.tk-row-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.tk-row-top b { font-size: 15px; }
.tk-row-prev { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 460px; }
.tk-row-side { text-align: right; flex-shrink: 0; }
.tk-row-id { display: block; font-family: "Plus Jakarta Sans", monospace; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.tk-row-time { font-size: 11.5px; color: var(--faint); }
.tk-status { font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.tk-st-open { background: #fdf3e3; color: #b5710b; }
.tk-st-answered { background: var(--accent-soft); color: var(--accent-ink); }
.tk-st-closed { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.tk-thread-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.tk-thread-subj { font-size: 18px; }
.tk-thread-meta { font-family: "Plus Jakarta Sans", monospace; font-size: 12px; color: var(--muted); }
.tk-mails { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.tk-mail { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tk-mail-head { display: flex; align-items: center; gap: 11px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); }
.tk-mail-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink-2); color: #fff; font-size: 12px; font-weight: 800; font-family: "Plus Jakarta Sans", sans-serif; flex-shrink: 0; }
.tk-mail-av.admin { background: linear-gradient(135deg, var(--accent), var(--accent-ink)); }
.tk-mail-from { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tk-mail-from b { font-size: 13.5px; }
.tk-mail-from span { font-size: 12px; color: var(--muted); }
.tk-mail-date { font-size: 12px; color: var(--faint); white-space: nowrap; }
.tk-mail-body { padding: 16px; font-size: 14px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; }
.tk-reply { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--line-2); }
.tk-reply-lab { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.tk-reply-lab svg { color: var(--accent); }
.tk-reply .tk-textarea { width: 100%; }
.tk-closed-note { font-size: 13px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; }

@media (max-width: 900px) {
  .dash-layout { grid-template-columns: 1fr; }
  .dash-side-nav { position: static; }
  .dash-nav { flex-direction: row; flex-wrap: wrap; }
  .dash-nav-btn { width: auto; border: 1px solid var(--line); }
  .dash-nav-btn span { flex: none; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-row { grid-template-columns: 150px 1fr; }
  .dash-row-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; border-left: none; border-top: 1px solid var(--line-2); }
}

/* ---------- Ustawienia konta ---------- */
/* Ustawienia konta wysrodkowane w kolumnie panelu (naglowek + karty jako jedna
   grupa), zamiast trzymac sie lewej/prawej krawedzi. */
.settings-wrap { max-width: 640px; margin-left: auto; margin-right: auto; width: 100%; }
.settings { display: flex; flex-direction: column; gap: 18px; max-width: 640px; margin-left: auto; margin-right: auto; width: 100%; }
/* Widok "Brak informacji" (nieznany adres) - przyciski akcji obok siebie. */
.notfound-empty { padding-top: 48px; padding-bottom: 48px; }
.notfound-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.set-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.set-card-head { margin-bottom: 18px; }
.set-card-head h3 { display: flex; align-items: center; gap: 9px; font-size: 17px; white-space: nowrap; }
.set-card-head h3 svg { color: var(--accent); }
.set-card-head p { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.set-switch-row { display: flex; align-items: center; gap: 18px; justify-content: space-between; }
.set-switch-txt { display: flex; flex-direction: column; gap: 4px; }
.set-switch-txt b { font-size: 14px; font-weight: 800; color: var(--ink); }
.set-switch-txt span { font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 440px; }
.set-switch-row .sp-switch { flex-shrink: 0; }
.hr-warn { display: flex; gap: 11px; margin-top: 16px; padding: 14px 16px; border-radius: var(--radius); background: color-mix(in oklab, var(--danger), transparent 93%); border: 1px solid color-mix(in oklab, var(--danger), transparent 78%); animation: hrWarnIn .22s ease; }
.hr-warn svg { color: var(--danger); flex-shrink: 0; margin-top: 1px; }
.hr-warn p { margin: 0; font-size: 12.5px; line-height: 1.6; font-weight: 600; color: color-mix(in oklab, var(--danger), #3a2020 55%); text-wrap: pretty; }
@keyframes hrWarnIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.set-grid .auth-field { margin: 0; }
.set-full { grid-column: 1 / -1; }
.settings .auth-field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.settings .set-grid .auth-field { margin-top: 0; }
/* Delikatnie większy odstęp między polem „Obecne hasło” a siatką „Nowe hasło / Powtórz hasło” */
.settings .auth-field + .set-grid { margin-top: 18px; }
.settings .auth-field > span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }

/* Inputy w Ustawieniach konta (klasy .auth-input/.sel) */
.settings .auth-input {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 14px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 11px;
  color: var(--faint);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.settings .auth-input > svg { color: var(--faint); flex-shrink: 0; }
.settings .auth-input input {
  flex: 1; min-width: 0;
  border: none; background: none; outline: none;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink);
  padding: 0;
}
.settings .auth-input input::placeholder { color: var(--faint); font-weight: 500; }
.settings .auth-input:focus-within {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 88%);
}
.settings .auth-input:focus-within > svg { color: var(--accent); }
.settings .auth-input.err {
  border-color: var(--danger);
  background: #fef6f6;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--danger), transparent 90%);
}
.settings .auth-eye {
  flex-shrink: 0;
  background: none; border: none;
  font-size: 12px; font-weight: 700;
  color: var(--muted);
  padding: 4px 6px; border-radius: 6px;
  cursor: pointer;
}
.settings .auth-eye:hover { color: var(--accent-ink); background: var(--accent-soft); }

/* Select (Kraj) - usuwa systemowy wygląd, dopasowuje do innych pól */
.settings .sel {
  position: relative;
  display: flex; align-items: center;
  height: 46px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 11px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.settings .sel select {
  flex: 1; min-width: 0;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  border: none; outline: none; background: none;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink);
  padding: 0 38px 0 14px;
  height: 100%;
  cursor: pointer;
}
.settings .sel svg {
  position: absolute; right: 12px;
  color: var(--muted);
  pointer-events: none;
}
.settings .sel:focus-within {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 88%);
}
.settings .sel:focus-within svg { color: var(--accent); }
.settings .req { color: var(--danger); font-style: normal; font-weight: 800; margin-left: 2px; }
.set-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 18px; }
.set-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #0c7a4d; }
.set-err { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--danger); }
.req { color: var(--danger); font-style: normal; }
.set-readonly { display: flex; flex-direction: column; }
.set-ro-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.set-ro-row:last-of-type { border-bottom: none; }
.set-ro-row span { font-size: 13px; color: var(--muted); font-weight: 600; }
.set-ro-row b { font-size: 14px; color: var(--ink); font-weight: 700; text-align: right; }
.set-locked-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 9px 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.set-locked-note svg { color: var(--accent); }
@media (max-width: 520px) { .set-grid { grid-template-columns: 1fr; } }

/* ---------- Moc nabywcza (depozyt) ---------- */
.power-page { display: flex; flex-direction: column; gap: 20px; }
.pw-balance { background: linear-gradient(125deg, #0e1d33, #143a6b); border-radius: var(--radius); padding: 22px 24px; color: #fff; }
.pw-balance-lab { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #9fc0ee; }
.pw-balance-lab svg { color: #76a9ff; }
.pw-balance-val { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 2px; }
.pw-balance-val em { font-style: normal; font-size: 20px; color: #9fb1c9; font-weight: 600; }
.pw-balance-upd { font-size: 12px; color: #8a98ad; }
.pw-balance-bar { margin-top: 14px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.pw-balance-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #34e08a, #19c37d); min-width: 6px; }
.pw-balance-refund { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1); color: #cfe0fc; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .14s, color .14s; }
.pw-balance-refund:hover { background: rgba(255,255,255,.18); color: #fff; }
.pw-balance-refund.is-disabled { opacity: .5; }
.pw-refund-btn.is-disabled, .pw-refund-btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.pw-refund-warn { display: flex; gap: 12px; align-items: flex-start; background: #fdf3e3; border: 1px solid #f6e2bf; border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.pw-refund-warn svg { color: #c98a16; flex-shrink: 0; margin-top: 1px; }
.pw-refund-warn b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.pw-refund-warn span { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* Pasek postępu wyszukiwania po VIN / numerze LOT */
.search-progress { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--accent-soft); border: 1px solid var(--accent-soft2); border-radius: 10px; color: var(--accent-ink); font-weight: 650; font-size: 14px; }
.sp-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--accent), transparent 65%); border-top-color: var(--accent); animation: sp-rot .7s linear infinite; flex: none; }
@keyframes sp-rot { to { transform: rotate(360deg); } }
.pw-subtabs { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 4px; align-self: flex-start; }
.pw-subtab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border: none; background: none; border-radius: 8px; font-weight: 700; font-size: 13.5px; color: var(--muted); cursor: pointer; transition: background .14s, color .14s; }
.pw-subtab svg { color: currentColor; }
.pw-subtab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08)); }

/* Zwrot kaucji */
.pw-refund-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.pw-refund-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.pw-refund-head h2 { font-size: 19px; margin: 0 0 4px; }
.pw-refund-head p { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.pw-refund-btn { flex-shrink: 0; }
.pw-rtable { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pw-rtable-head, .pw-rtable-row { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr 1.2fr; gap: 12px; align-items: center; padding: 13px 18px; }
.pw-rtable-head { background: var(--surface-2); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pw-rtable-row { font-size: 14px; color: var(--ink); border-top: 1px solid var(--line); }
.pw-rtable-row b { font-weight: 700; }
.pw-rstatus { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.pw-rstatus.active { background: #e3f7ec; color: #15803d; border: 1px solid #b6ecc9; }
.pw-rstatus.refunded { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.pw-rempty { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 40px 20px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }
.pw-rempty svg { color: var(--line-strong, #c2cbd6); }
.pw-rempty b { color: var(--ink); font-size: 15px; }
.pw-rempty span { font-size: 13px; max-width: 320px; }
.pw-refund-note { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 16px 0 0; }

/* Modal potwierdzenia zwrotu */
.pw-modal-overlay { position: fixed; inset: 0; background: rgba(8,14,24,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.pw-modal { background: var(--surface); border-radius: 16px; padding: 28px 26px 24px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.pw-modal-ic { width: 52px; height: 52px; border-radius: 14px; background: #fdecec; color: #b3282c; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.pw-modal h3 { font-size: 19px; margin: 0 0 8px; }
.pw-modal p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 14px; }
.pw-modal-amt { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; margin-bottom: 18px; }
.pw-modal-amt span { font-size: 13px; color: var(--muted); font-weight: 600; }
.pw-modal-amt b { font-size: 17px; font-weight: 700; }
.pw-modal-actions { display: flex; gap: 10px; }
.pw-modal-actions .btn { flex: 1; }

@media (max-width: 620px) {
  .pw-rtable-head { display: none; }
  .pw-rtable-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
  .pw-rtable-row span { display: flex; justify-content: space-between; gap: 12px; }
  .pw-rtable-row span::before { content: attr(data-lab); font-size: 12px; font-weight: 700; color: var(--muted); }
  .pw-refund-head { flex-direction: column; }
  .pw-refund-btn { align-self: stretch; justify-content: center; }
}

.pw-info { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.pw-info-head { display: flex; align-items: center; gap: 9px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.pw-info-head svg { color: var(--accent); }
.pw-info ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.pw-info li { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.pw-info-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; padding: 11px 13px; background: #fdf3e3; border: 1px solid #f6e2bf; border-radius: 9px; }

.pw-currency { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.pw-cur-lab { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pw-cur-tabs { display: inline-flex; gap: 6px; margin: 12px 0 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.pw-cur-tab { padding: 8px 22px; border: none; background: none; border-radius: 7px; font-weight: 700; font-size: 14px; color: var(--muted); transition: background .14s, color .14s; }
.pw-cur-tab.on { background: var(--accent); color: #fff; }
.pw-account { display: flex; flex-direction: column; gap: 6px; }
.pw-acc-lab { font-size: 12px; font-weight: 700; color: var(--muted); }
.pw-acc-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.pw-acc-num { font-family: "Plus Jakarta Sans", monospace; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .02em; flex: 1; }

/* Dane do przelewu — sekcja po wyborze planu */
.pw-transfer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 22px; margin-top: 20px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); scroll-margin-top: 80px; }
.pw-transfer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.pw-transfer-head h2 { font-size: 19px; margin: 0 0 4px; }
.pw-transfer-head p { font-size: 13.5px; color: var(--ink-2); margin: 0; max-width: 62ch; line-height: 1.5; }
.pw-transfer-plan { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft, color-mix(in oklab, var(--accent), transparent 88%)); border: 1px solid color-mix(in oklab, var(--accent), transparent 72%); border-radius: 999px; padding: 6px 14px; }
.pw-transfer-cur { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.pw-transfer-cur .pw-cur-tabs { margin: 0; }

.pw-tfields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pw-tfield { display: flex; flex-direction: column; gap: 6px; padding: 13px 15px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; }
.pw-tfield-hl { border-color: color-mix(in oklab, var(--accent), transparent 62%); background: color-mix(in oklab, var(--accent), transparent 93%); }
.pw-tf-lab { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pw-tf-val { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.pw-tf-val > span, .pw-tf-val > b { flex: 1; min-width: 0; word-break: break-word; }
.pw-tf-val span { font-size: 15px; font-weight: 600; color: var(--ink); }
.pw-tf-mono, .pw-tf-mono code { font-family: ui-monospace, "SF Mono", "Plus Jakarta Sans", monospace; font-weight: 700; letter-spacing: .01em; }
.pw-tf-mono code { background: none; padding: 0; }
.pw-tf-amt { font-size: 18px; font-weight: 800; color: var(--ink); }
.pw-transfer-warn { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px 14px; background: #fdf3e3; border: 1px solid #f6e2bf; border-radius: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.pw-transfer-warn svg { color: #c98a16; flex-shrink: 0; margin-top: 1px; }
@media (max-width: 620px) {
  .pw-tfields { grid-template-columns: 1fr; }
  .pw-transfer-head { flex-direction: column; }
}

.pw-plans-title { font-size: 18px; margin-top: 4px; }
.pw-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pw-plan { position: relative; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; }
.pw-plan.featured { border-color: var(--accent); box-shadow: 0 8px 30px color-mix(in oklab, var(--accent), transparent 84%); }
.pw-plan.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 70%); }
.pw-plan-pop { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.pw-plan-name { font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 700; }
.pw-plan-tag { font-size: 12.5px; color: var(--muted); }
.pw-plan-power { margin: 14px 0; padding: 14px; background: var(--accent-soft); border-radius: 11px; text-align: center; }
.pw-plan-power b { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 26px; font-weight: 700; color: var(--accent-ink); letter-spacing: -.02em; }
.pw-plan-power em { font-style: normal; font-size: 12px; color: var(--accent-ink); font-weight: 600; }
.pw-plan-feat { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 9px; }
.pw-plan-feat li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-2); }
.pw-plan-feat svg { color: var(--live); flex-shrink: 0; margin-top: 2px; }
.pw-plan-dep { padding: 12px 0; border-top: 1px solid var(--line-2); margin-bottom: 14px; }
.pw-plan-dep-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.pw-plan-dep-row span { color: var(--muted); }
.pw-plan-dep-row b { font-family: "Plus Jakarta Sans", sans-serif; color: var(--ink); }
.pw-plan-dep-row.muted b { color: var(--accent-ink); }
.pw-plan .btn { margin-top: auto; }

.pw-help { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pw-help-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.pw-help-card h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.pw-help-card h4 svg { color: var(--accent); }
.pw-help-card p { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0 0 8px; }

@media (max-width: 820px) {
  .pw-plans { grid-template-columns: 1fr; }
  .pw-help { grid-template-columns: 1fr; }
}

/* ---------- Real photos from API ---------- */
.photo-real { position: relative; overflow: hidden; isolation: isolate; background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; }
.photo-real .photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.photo-img-out { z-index: 0; animation: photoOut .6s cubic-bezier(.4, 0, .2, 1) forwards; }
.photo-img-push { z-index: 1; animation: photoPush .6s cubic-bezier(.4, 0, .2, 1); }
@keyframes photoPush { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes photoOut { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* Kierunek wstecz (klik „poprzednie") — zdjęcia jadą w drugą stronę. */
.photo-dir-prev .photo-img-push { animation-name: photoPushBack; }
.photo-dir-prev .photo-img-out { animation-name: photoOutBack; }
@keyframes photoPushBack { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes photoOutBack { from { transform: translateX(0); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .photo-img-push, .photo-img-out { animation: none; } }
.soon-fade { animation: soonFade .5s ease; }
@keyframes soonFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .soon-fade { animation: none; } }
.vcard-media .photo-real .photo-img { object-fit: cover; }

/* Nawigacja zdjęć (strzałki pojawiające się po najechaniu) */
.photo-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%; background: rgba(13,23,38,.5); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease; z-index: 3; }
.photo:hover .photo-nav { opacity: 1; }
.photo-nav:hover { background: rgba(13,23,38,.82); }
.photo-nav:active { transform: translateY(-50%) scale(.92); }
.photo-nav-prev { left: 8px; }
.photo-nav-next { right: 8px; }
.gallery .photo-nav { width: 40px; height: 40px; background: rgba(13,23,38,.45); }
@media (hover: none) {
  /* Dotyk: strzałki ukryte domyślnie, pokazują się tylko po przytrzymaniu palcem. */
  .photo-nav { opacity: 0; }
  .photo-touch-on .photo-nav { opacity: .9; }
}

/* ---------- Lightbox: pełnoekranowy podgląd zdjęć ---------- */
.lightbox-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(9,13,22,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; gap: 12px; }
.lightbox-close { position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.lightbox-close:hover { background: rgba(255,255,255,.22); }
.lightbox-stage { position: relative; width: 100%; max-width: 1720px; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lightbox-img { max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; border-radius: 8px; }
.lightbox-nav { opacity: 1; width: 46px; height: 46px; background: rgba(255,255,255,.12); }
.lightbox-nav:hover { background: rgba(255,255,255,.24); }
.lightbox-nav.photo-nav-prev { left: 4px; }
.lightbox-nav.photo-nav-next { right: 4px; }
.lightbox-count { bottom: auto; top: 18px; right: auto; left: 22px; background: rgba(255,255,255,.14); }
.lightbox-thumbs { display: flex; gap: 10px; overflow-x: auto; max-width: 100%; padding: 4px 2px 8px; scrollbar-width: thin; }
/* Lightbox renderuje pasek miniatur dla WSZYSTKICH zdjęć lota (bywa ich 30+).
   Same obrazki mają loading="lazy", więc nie pobierają się poza ekranem, ale
   przeglądarka i tak liczyła układ każdego kafelka. content-visibility pomija
   te poza widocznym fragmentem paska. */
.lightbox-thumb { content-visibility: auto; contain-intrinsic-size: auto 64px; }

.lightbox-thumb { flex: none; width: 108px; height: 108px; border-radius: 10px; border: 2px solid transparent; overflow: hidden; padding: 0; cursor: pointer; opacity: .55; transition: opacity .15s, border-color .15s; }
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-thumb:hover { opacity: .85; }
.lightbox-thumb.on { opacity: 1; border-color: var(--accent); }
@media (max-width: 640px) {
  .lightbox-thumb { width: 76px; height: 76px; }
  .lightbox-nav { width: 38px; height: 38px; }
}

/* ---------- API Status Indicator ---------- */
.api-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 99px; white-space: nowrap; }
.api-status.ok { background: #e6f9f0; color: #0d7a4a; }
.api-status.err { background: #fdecec; color: #b3282c; }
.api-status.loading { background: #eef1f6; color: var(--muted); }
.api-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.api-status.ok .api-dot { background: #17b877; }
.api-status.err .api-dot { background: #e5484d; }
.api-status.loading .api-dot { background: var(--muted); animation: blink 1s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------- API Settings Panel ---------- */
.api-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.api-panel h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.api-panel h3 svg { color: var(--accent); }
.api-field { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.api-field input { flex: 1; padding: 10px 14px; border: 1px solid var(--line); border-radius: calc(var(--radius) * .7); font-size: 14px; font-family: "Plus Jakarta Sans", monospace; letter-spacing: .01em; background: var(--surface-2); }
.api-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 85%); }
.api-field input::placeholder { color: var(--faint); font-family: "Manrope", sans-serif; }
.api-msg { font-size: 13px; color: var(--muted); line-height: 1.5; }
.api-msg.error { color: #b3282c; }
.api-msg.success { color: #0d7a4a; }
.api-msg code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.api-test-result { margin-top: 12px; padding: 14px; background: var(--surface-2); border-radius: calc(var(--radius) * .7); font-size: 13px; }
.api-test-result pre { margin: 8px 0 0; font-size: 11px; max-height: 200px; overflow: auto; background: #0d1726; color: #a8c7fa; padding: 12px; border-radius: 8px; white-space: pre-wrap; word-break: break-all; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 24px 0; }
.pagination button { min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: calc(var(--radius) * .6); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.pagination button:hover { border-color: var(--accent); color: var(--accent-ink); }
.pagination button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination button:disabled { opacity: .4; pointer-events: none; }
.pagination .pg-info { font-size: 13px; color: var(--muted); padding: 0 8px; }

/* ---------- Loading skeleton ---------- */
.skel-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.skel-photo { height: 170px; background: linear-gradient(90deg, #e8ecf2 25%, #f0f3f8 50%, #e8ecf2 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.skel-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.skel-line { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #e8ecf2 25%, #f0f3f8 50%, #e8ecf2 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.skel-line.w70 { width: 70%; }
.skel-line.w50 { width: 50%; }
.skel-line.w40 { width: 40%; }
.skel-line.h20 { height: 20px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ═══════════════════════════════════════════════════════════
   PEŁNA WERSJA MOBILNA — spójna ze stroną desktopową
   Breakpointy: 980 / 760 / 560 / 430
   ═══════════════════════════════════════════════════════════ */

/* ——— Tablet / mniejszy desktop ——— */
@media (max-width: 980px) {
  .hdr-top, .hdr-main { padding-left: 16px; padding-right: 16px; }
  .hdr-search { min-width: 0; height: 46px; }
  .hdr-search input { font-size: 14px; }
  .power-txt em { display: none; }
  .power-txt b { font-size: 12px; }
  /* Podnawigacja przewijana poziomo zamiast zawijania */
  .hdr-sub-inner { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-left: 12px; padding-right: 12px; }
  .hdr-sub-inner::-webkit-scrollbar { display: none; }
  .lang-switch { display: none; }
  .subnav { white-space: nowrap; }
  .section, .detail, .dashboard { padding-left: 16px; padding-right: 16px; }
  .stats-strip { padding-left: 16px; padding-right: 16px; }
}

/* ——— Duży telefon / wąski tablet ——— */
@media (max-width: 760px) {
  /* Brak poziomego przewijania/„zoomu" przy wczytaniu */
  html, body { overflow-x: hidden; max-width: 100%; }
  /* Nagłówek przewija się razem z treścią i znika poza ekranem (nie przyklejony) */
  .hdr { position: static; background: var(--surface); }
  #root > .app, .app { padding-top: 0; }
  /* Pasek górny: chowamy godziny, zostaje język */
  .hdr-hours { display: none; }
  .hdr-top { justify-content: flex-end; }
  /* Główny pasek zawija: logo + akcje w 1. rzędzie, wyszukiwarka na całą szerokość poniżej */
  .hdr-main { flex-wrap: wrap; gap: 10px 8px; padding-top: 10px; padding-bottom: 10px; align-items: center; }
  .logo { align-self: center; flex: 0 0 auto; }
  .logo img { height: 50px; }
  .hdr-actions { margin-left: auto; gap: 6px; align-items: center; flex: 0 0 auto; flex-wrap: nowrap; }
  /* Zaloguj + Rejestracja: obok logo w poziomie, równa wysokość */
  .hdr-actions .btn.sm { height: 38px; padding: 0 13px; display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; }
  /* Mobilnie: pigułki Zaloguj/Rejestracja → hamburger */
  .hdr-actions .btn.btn-login, .hdr-actions .btn.btn-register { display: none !important; }
  .auth-burger-wrap { display: block; }
  .auth-burger { background: transparent; border-color: transparent; box-shadow: none; }
  /* Logo bez efektu miecza w wersji mobilnej */
  .logo img { filter: none; }
  .logo:hover img { opacity: .88; }
  .hdr-search { order: 5; flex-basis: 100%; width: 100%; height: 44px; }
  .hdr-search-btn { height: 34px; padding: 0 16px; }
  .user-name { display: none; }
  .user-chip { padding: 5px; gap: 0; }
  .user-chip > svg { display: none; }

  /* Hero */
  .hero { padding: 40px 16px 30px; }
  .hero-sub { font-size: 15px; }
  .hero-sub-1l { white-space: normal; text-wrap: pretty; font-size: 13.5px; }
  .hero-trust { gap: 14px; row-gap: 8px; }

  /* Panel wyszukiwania */
  .sp-bottom { gap: 10px; }
  .sp-go { margin-left: 0; width: 100%; }
  .sp-vin { flex-basis: 100%; min-width: 0; }

  /* Sekcje */
  .section { padding-top: 36px; }
  .sec-head { flex-direction: column; align-items: center; text-align: center; }
  .sec-head > div { display: flex; flex-direction: column; align-items: center; }

  /* Wyniki: na mobile chowamy panel wyszukiwania (Marka/Model/Rok…) — zostaje tylko wysuwana zakładka „Filtry" */
  .res-bar .search-panel { display: none; }
  .res-bar { margin-bottom: 12px; }

  /* Wyniki: filtry zwinięte do klikalnego boxu „Filtry" — rozwijają się po kliknięciu */
  .filters { position: static; gap: 0; max-height: none; overflow: visible; }
  .filt-head { margin: 0; padding-bottom: 0; border-bottom: none; cursor: pointer; }
  .filt-chev { display: inline-flex; margin-left: auto; transition: transform .25s ease; color: var(--muted); }
  .filters.open .filt-chev { transform: rotate(180deg); }
  /* Domyślnie (zwinięte): widoczny tylko nagłówek */
  .filters > *:not(.filt-head) { display: none; }
  .filters.open { gap: 18px; }
  .filters.open > *:not(.filt-head) { display: flex; }
  .filters.open .filt-head { padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }

  /* Strona główna: na mobile zostaje tylko karta prowizji — chowamy "Licytuj teraz" i "Proces licytacji" */
  .stats-strip.stats-3 .stat-action { display: none; }
  .stats-strip.stats-3 { grid-template-columns: 1fr; }

  /* Modale (licytacja/szybki zakup): pozwól przewijać na niskich ekranach telefonu */
  .bidc-overlay { place-items: start center; overflow-y: auto; padding: 16px; }
  .bidc-modal { max-height: none; margin: auto 0; padding: 22px 20px; }

  /* Strona główna: sekcja "Proces importu" ukryta na mobile */
  .section.how { display: none; }

  /* Detal: galeria miniatur mniej kolumn, tabela historii sprzedaży zawija */
  .thumbs { grid-template-columns: repeat(5, 1fr); }
  .det-titlebar, .det-head { flex-direction: column; gap: 10px; }
  /* Mobil — nagłówek pojazdu: tytuł + źródło zawijają się, boxy jeden pod drugim */
  .det-titlerow { gap: 10px; margin-bottom: 10px; }
  .det-info-row { flex-direction: column; align-items: stretch; }
  .det-info-box { justify-content: flex-start; }
  .det-head-right { align-items: flex-start; }
  .sh-row { grid-template-columns: 1fr auto; gap: 6px 12px; }

  /* ——— Listing (kafelek pojazdu) na mobile: układ zbliżony do widoku aukcji ———
     Zdjęcie na górze, tytuł (akcent), pod nim VIN + źródło (Copart/IAAI) obok
     siebie, następnie ikony i dane w 2 kolumnach, a na końcu cena i przyciski. */
  .vrow { border-radius: 16px; }
  .vrow-media .photo { aspect-ratio: 4 / 3; min-height: 0; border-radius: 16px 16px 0 0; }
  .vrow-info { padding: 14px 14px 4px; gap: 12px; }
  .vrow-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; }
  .vrow-title { grid-column: 1 / -1; font-size: 21px; font-weight: 800; color: var(--accent); }
  .vrow-headid { grid-column: 1; font-size: 13px; }
  /* Źródło (Copart/IAAI) pokazujemy WYŁĄCZNIE na zdjęciu (vrow-badges),
     więc duplikat w nagłówku informacji zostaje ukryty także na mobile. */
  .vrow-head-src { display: none; }
  /* Parametry: 2 kolumny na telefonie (3 są za ciasne na wąskim ekranie) */
  .vrow-specs { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .vrow-price { border-left: none; border-top: 1px solid var(--line-2); padding: 14px; }

  /* Dashboard: nawigacja boczna — pozycje jedna pod drugą (łatwe kliknięcie) */
  .dash-layout { min-width: 0; }
  .dash-side-nav { position: static; padding: 12px; min-width: 0; }
  .dash-user { padding: 4px 4px 12px; }
  .dash-nav { flex-direction: column; gap: 4px; min-width: 0; }
  .dash-nav-btn { padding: 12px 13px; }
  .dash-nav-btn span { flex: 1; }
  /* Statystyki (Moje pojazdy / W transporcie / Aktywne licytacje / Obserwowane) — wszystkie obok siebie, kompaktowo */
  .dash-stats { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .dash-stat { align-items: center; text-align: center; gap: 2px; padding: 10px 5px; border-radius: 12px; }
  .dash-stat-ic { width: 28px; height: 28px; border-radius: 8px; margin-bottom: 3px; }
  .dash-stat-ic svg { width: 15px; height: 15px; }
  .dash-stat-n { font-size: 19px; }
  .dash-stat-l { font-size: 9.5px; line-height: 1.15; }
  /* "Ustawienia konta" i "Wyloguj" obok siebie, wyśrodkowane */
  .dash-nav-foot { flex-direction: row; justify-content: center; gap: 8px; }
  .dash-nav-foot .dash-nav-btn { flex: 1 1 0; max-width: 200px; justify-content: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
  .dash-nav-foot .dash-nav-btn span { flex: 0 0 auto; }
}

/* ——— Telefon ——— */
@media (max-width: 560px) {
  /* Jeden rząd: logo + moc nabywcza + dzwonek + profil — wszystko wyrównane do środka */
  .hdr-main { gap: 8px; align-items: center; flex-wrap: wrap; }
  /* Logo: nieco większe, ale zawsze w jednym rzędzie — może się skurczyć zamiast zawijać */
  .logo { align-self: center; flex: 0 1 auto; min-width: 0; }
  .logo img { height: 52px; max-width: 52vw; width: auto; object-fit: contain; }
  /* Akcje (moc nabywcza + dzwonek + profil) nie kurczą się i trzymają w jednym rzędzie z logo */
  .hdr-actions { flex: 0 0 auto; flex-wrap: nowrap; }
  /* Moc nabywcza: kompaktowy chip pomiędzy logo a dzwonkiem, format w K (np. 100K / 102,2K) */
  .power-chip { order: -1; gap: 4px; padding: 5px 7px; flex-shrink: 0; }
  .power-chip > svg { width: 13px; height: 13px; }
  .power-txt em { display: none; }
  .power-txt b { font-size: 11.5px; }
  .power-full { display: none; }
  .power-k { display: inline; }
  /* Dzwonek dopasowany wielkością do ikony profilu (awatar 28px) */
  .notif-bell { width: 32px; height: 32px; padding: 0; }
  .notif-bell svg { width: 16px; height: 16px; }
  .user-av { width: 28px; height: 28px; font-size: 11px; }
  .user-chip { padding: 4px; }
  /* Wszystko w jednym rzędzie — ściśnięte */
  .hdr-actions { gap: 5px; align-items: center; }
  .hdr-search { height: 42px; }

  /* Hero */
  .hero { padding: 32px 14px 26px; }
  .hero-h1 { margin-top: 14px; }
  .hero-sub { font-size: 14.5px; }
  .glow-word { white-space: normal; }

  /* Cena pod „Aktualna oferta" na kartach listingu — delikatnie większa na mobile */
  .offer-box .price-main { font-size: 21px; }
  .offer-half .price-main { font-size: 18px; }
  /* Pasek wyszukiwania w hero — pojedyncza kolumna */
  .sp-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .search-panel { padding: 14px; }
  /* Kategorie wyśrodkowane i równomiernie rozłożone */
  .sp-head { justify-content: center; }
  .sp-cats { width: 100%; justify-content: center; gap: 2px; }
  .sp-cat { flex: 1; justify-content: center; padding: 9px 6px; }
  .src-toggles { width: 100%; }
  .src-toggle { flex: 1; justify-content: center; font-size: 14.5px; gap: 8px; }
  /* Suwaki Copart/IAAI powiększone o ~1/3 */
  .src-mini { width: 30px; height: 17px; }
  .src-mini-thumb { width: 13px; height: 13px; top: 2px; }
  .src-toggle.on .src-mini-thumb { transform: translateX(13px); }
  /* Archiwum: wiersz nad markami; suwak w prawym górnym rogu schowany */
  .sp-head .sp-arch { display: none; }
  .sp-arch-row { display: flex; }

  /* Statystyki */
  .stats-strip, .stats-strip.stats-3 { grid-template-columns: 1fr; }
  .dash-stats { grid-template-columns: repeat(4, 1fr); }

  /* Przegląd: "Przeglądaj aukcje" nad nagłówkiem, wszystko wyśrodkowane */
  .dash-head-overview { flex-direction: column-reverse; align-items: center; text-align: center; gap: 14px; }
  .dash-head-overview > div { width: 100%; }
  .dash-head-overview .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Karty pojazdów w gridzie */
  .grid-4, .grid-3 { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Detal */
  .detail { padding-left: 14px; padding-right: 14px; }
  .thumbs { grid-template-columns: repeat(4, 1fr); }
  .specs { grid-template-columns: 1fr; }
  .spec-item:nth-child(2) { border-top-right-radius: 0; }
  .spec-item:nth-child(2) { border-top-left-radius: 0; }

  /* Dashboard: wiersz pojazdu (zwykły) układa się pionowo */
  .dashboard { padding-left: 14px; padding-right: 14px; }
  .dash-row { grid-template-columns: 1fr; gap: 0; }
  .dash-row-photo { width: 100%; min-width: 0; max-width: 100%; min-height: 0; aspect-ratio: 16/9; border-radius: 13px 13px 0 0; }
  .dash-row-photo .photo { aspect-ratio: 16/9; }
  .dash-row-side { border-left: none; border-top: 1px solid var(--line-2); padding-top: 14px; align-items: stretch; text-align: left; }

  /* Karta wygranego / QB — słupek na pełną szerokość, środek */
  .won-side-qb { align-items: center; }
  .qbside-offer, .qbside-status { max-width: 100%; }
  .qbside-status { justify-content: center; }
  .qbside-status-txt { text-align: center; }

  /* Stopka */
  .ftr-inner { grid-template-columns: 1fr 1fr; gap: 24px; padding: 36px 16px 24px; }
  .ftr-brand { grid-column: 1 / -1; }
  .ftr-bar { flex-direction: column; gap: 6px; text-align: center; padding: 16px; }
}

/* ——— Mały telefon ——— */
@media (max-width: 430px) {
  .logo img { height: 46px; max-width: 50vw; }
  .hdr-search-btn { padding: 0 13px; }
  .hdr-actions { gap: 4px; }
  .hdr-actions .btn.sm { height: 36px; padding: 0 11px; font-size: 13px; }
  /* 360 mały: depozyt, dzwonek i avatar trochę mniejsze (logo bez zmian) */
  .power-chip { gap: 3px; padding: 4px 6px; }
  .power-chip > svg { width: 12px; height: 12px; }
  .power-txt b { font-size: 10.5px; }
  .notif-bell { width: 30px; height: 30px; }
  .notif-bell svg { width: 15px; height: 15px; }
  .user-av { width: 26px; height: 26px; font-size: 10.5px; }
  .user-chip { padding: 3px; }
  .hero-h1 { font-size: clamp(28px, 8vw, 34px); }
  /* Jedna kolumna, ale "Rok od" i "Rok do" zostają obok siebie w jednym rzędzie */
  .sp-grid { grid-template-columns: 1fr 1fr; }
  .sp-grid > .sp-field:not(.sm) { grid-column: 1 / -1; }
  .grid-4, .grid-3 { grid-template-columns: 1fr; }
  /* Statystyki konta zostają obok siebie (4 w rzędzie) nawet na małym ekranie */
  .dash-stats { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .dash-stat { padding: 9px 3px; }
  .dash-stat-l { font-size: 9px; }
  .thumbs { grid-template-columns: repeat(3, 1fr); }
  .btn.lg { padding: 12px 16px; font-size: 14px; }
  .ftr-inner { grid-template-columns: 1fr; }
}

/* Zabezpieczenie: media/obrazy nie wychodzą poza ekran */
@media (max-width: 760px) {
  img { max-width: 100%; }
  .det-meta, .det-badges { gap: 6px; }
}

/* ---------- Archiwum pojazdów ---------- */
.dash-head-sub { font-size: 13.5px; color: var(--muted); margin: 6px 0 0; max-width: 720px; line-height: 1.5; }
.arch-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.arch-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: all .15s; }
.arch-chip:hover { border-color: color-mix(in oklab, var(--accent), transparent 55%); }
.arch-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.arch-chip-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: color-mix(in oklab, var(--ink) 8%, var(--surface)); color: var(--ink-2); font-size: 11px; font-weight: 800; }
.arch-chip.on .arch-chip-n { background: rgba(255,255,255,.25); color: #fff; }

.arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.arch-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: box-shadow .18s, transform .18s; }
.arch-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.arch-photo { position: relative; height: 150px; background: var(--surface-2); }
.arch-photo > * { width: 100%; height: 100%; }
.arch-photo-ph { display: grid; place-items: center; color: var(--faint); height: 100%; }
.arch-badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); box-shadow: var(--shadow-sm); }
.arch-badge-ok { background: color-mix(in oklab, var(--live), white 84%); color: #0c7a4d; }
.arch-badge-muted { background: color-mix(in oklab, var(--ink) 8%, white); color: var(--ink-2); }
.arch-badge-accent { background: var(--accent-soft); color: var(--accent-ink); }
.arch-body { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px 14px; flex: 1; }
.arch-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.arch-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted); }
.arch-dot { opacity: .5; }
.arch-vin { font-size: 11.5px; color: var(--faint); font-family: ui-monospace, "SF Mono", monospace; letter-spacing: -.01em; }
.arch-prices { display: flex; gap: 14px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.arch-price-col { display: flex; flex-direction: column; gap: 1px; }
.arch-price-lab { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.arch-price-val { font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.arch-price-pln { font-size: 11px; color: var(--muted); }
.arch-price-mine .arch-price-val { color: var(--accent-ink); }
.arch-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; }
.arch-date { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.arch-date svg { color: var(--faint); }

/* ═══════════════════ SYSTEM PŁATNOŚCI (panel klienta) ═══════════════════ */
.pm-wrap { display: flex; flex-direction: column; gap: 18px; }
.pm-intro { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent), transparent 78%); border-radius: var(--radius); }
.pm-intro svg { color: var(--accent-ink); flex-shrink: 0; margin-top: 1px; }
.pm-intro p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

.pm-car { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 10px rgba(13,23,42,.04); overflow: hidden; }
.pm-car-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.pm-car-photo { width: 128px; height: 96px; flex-shrink: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--surface-2); }
.pm-car-photo > * { width: 100%; height: 100%; }
.pm-car-titles { cursor: pointer; min-width: 0; }
.pm-car-titles h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.pm-car-meta { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); font-family: "Space Mono", ui-monospace, monospace; }
.pm-car-prog { margin-left: auto; text-align: right; flex-shrink: 0; }
.pm-prog-txt { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; }
.pm-prog-txt.done { color: var(--live); }
.pm-prog-bar { display: flex; gap: 4px; justify-content: flex-end; }
.pm-prog-seg { width: 26px; height: 6px; border-radius: 3px; background: var(--line); }
.pm-prog-seg.pm-issued { background: var(--accent); }
.pm-prog-seg.pm-overdue { background: var(--danger); }
.pm-prog-seg.pm-paid { background: var(--live); }

.pm-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; padding: 4px; }
.pm-row { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 20px 16px; border: 1px solid var(--line-2); border-radius: 14px; }
.pm-row:first-child { border-top: 1px solid var(--line-2); }
.pm-num { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 15px; font-weight: 800; background: var(--line); color: var(--muted); }
.pm-issued .pm-num { background: var(--accent); color: #fff; }
.pm-overdue .pm-num { background: var(--danger); color: #fff; }
.pm-paid .pm-num { background: var(--live); color: #fff; }
.pm-row-main { min-width: 0; width: 100%; }
.pm-row-label { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.pm-locked .pm-row-label { color: var(--ink-2); }
.pm-row-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.pm-overdue .pm-row-sub { color: var(--danger); font-weight: 600; }
.pm-row-amt { flex-shrink: 0; text-align: center; font-size: 18px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pm-row-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-top: auto; }

.pm-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pm-pill.locked { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.pm-pill.paid { background: color-mix(in oklab, var(--live), white 86%); color: color-mix(in oklab, var(--live), black 14%); }

.pm-cd { font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-cd.urgent { color: color-mix(in oklab, var(--soon), black 22%); }
.pm-cd.over { color: var(--danger); font-weight: 800; }
.pm-pay-btn { width: 100%; justify-content: center; }

.pm-row.pm-issued { background: color-mix(in oklab, var(--accent), transparent 96%); }
.pm-row.pm-overdue { background: color-mix(in oklab, var(--danger), transparent 95%); }
.pm-row.pm-paid { background: color-mix(in oklab, var(--live), transparent 96%); }

.pay-risk-over { background: color-mix(in oklab, var(--danger), white 92%) !important; }
.pay-risk-over svg, .pay-risk-over b { color: var(--danger); }

/* Karta płatności (pełny ekran zamiast modala) */
.pd-page { animation: pdIn .18s ease; }
@keyframes pdIn { from { opacity: 0; transform: translateY(6px); } }
.pd-back { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 4px 2px; margin-bottom: 14px; font-size: 13.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.pd-back:hover { color: var(--accent-ink); }
.pd-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 10px rgba(13,23,42,.04); padding: 24px 26px; max-width: 680px; }
.pd-head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line-2); }
.pd-num { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 17px; font-weight: 800; background: var(--accent); color: #fff; }
.pd-num.over { background: var(--danger); }
.pd-kicker { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); }
.pd-head-txt h2 { margin: 3px 0 4px; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; line-height: 1.25; }
.pd-veh { display: block; font-size: 13px; color: var(--muted); }
.pd-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.pd-sum-cell { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; }
.pd-sum-cell.over { background: color-mix(in oklab, var(--danger), white 93%); border-color: color-mix(in oklab, var(--danger), transparent 78%); }
.pd-sum-lab { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.pd-sum-amt { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.pd-sum-term { font-size: 15px; font-weight: 800; color: var(--ink); }
.pd-sum-term .pm-cd { font-size: 15px; }
.pd-sum-date { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.pd-section-title { font-size: 14px; font-weight: 800; color: var(--ink); margin: 20px 0 10px; }
.pd-card .pay-fields { margin-bottom: 18px; }
.pd-card .bidc-risk { margin-bottom: 18px; }

/* ═══════ Karta danych do przelewu — same ramki, wyśrodkowane ═══════ */
.pv-page { max-width: 560px; }
.pv-back { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 4px 2px; margin-bottom: 16px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.pv-back:hover { color: var(--ink); }
.pv-card { background: transparent; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; overflow: visible; padding: 28px 24px; text-align: center; }

.pv-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 0 22px; border-bottom: none; }
.pv-step { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pv-title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.pv-veh { font-size: 13.5px; color: var(--muted); }
.pv-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: transparent; color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.pv-badge.soon { color: color-mix(in oklab, var(--soon), black 20%); border-color: color-mix(in oklab, var(--soon), transparent 60%); }
.pv-badge.over { color: var(--danger); font-weight: 700; border-color: color-mix(in oklab, var(--danger), transparent 60%); }

.pv-amount { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0 0; background: transparent; border: none; }
.pv-amount-l, .pv-amount-r { display: flex; flex-direction: column; align-items: center; }
.pv-amount-lab { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); margin-bottom: 6px; }
.pv-amount-val { font-size: 34px; font-weight: 800; letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.pv-amount.over .pv-amount-val { color: var(--danger); }
.pv-amount-r { text-align: center; }
.pv-amount-date { font-size: 14px; font-weight: 600; color: var(--ink-2); }

.pv-fields-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 0 12px; }
.pv-fields-title { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pv-copyall { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: none; border: 1px solid var(--line); cursor: pointer; transition: .12s; }
.pv-copyall:hover { color: var(--ink); border-color: var(--ink-2); }

.pv-lines { display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
.pv-line { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; min-width: 0; }
.pv-line-lab { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pv-line-r { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; text-align: center; }
.pv-line-val { font-size: 15px; font-weight: 700; color: var(--ink); word-break: break-word; min-width: 0; }
.pv-line-val.mono { font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace; font-size: 14px; letter-spacing: .01em; }
.pv-line.empty .pv-line-val { color: var(--faint); font-weight: 500; }
.pv-copy { display: inline-flex; align-items: center; gap: 5px; padding: 0; font-size: 11.5px; font-weight: 600; color: var(--faint); background: none; border: none; cursor: pointer; transition: .12s; }
.pv-copy:hover { color: var(--ink); }

.pv-note { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 0; padding: 24px 8px 8px; font-size: 12.5px; line-height: 1.55; color: var(--muted); text-align: center; }
.pv-note svg { flex-shrink: 0; margin-top: 1px; color: var(--faint); }
.pv-note b { color: var(--ink-2); font-weight: 700; }
.pv-card > .btn { margin: 18px 0 0; width: 100%; }

@media (max-width: 560px) { .pd-summary { grid-template-columns: 1fr; } }

/* Baner „do uregulowania" na przeglądzie */
.pm-alert { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin: 4px 0 22px; padding: 15px 18px; border-radius: var(--radius); border: none; background: color-mix(in oklab, var(--soon), white 90%); cursor: pointer; transition: box-shadow .15s, transform .1s; }
.pm-alert:hover { box-shadow: 0 6px 18px color-mix(in oklab, var(--soon), transparent 78%); }
.pm-alert:active { transform: translateY(1px); }
.pm-alert-ic { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: #fff; color: color-mix(in oklab, var(--soon), black 18%); }
.pm-alert-txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pm-alert-txt b { font-size: 14.5px; color: color-mix(in oklab, var(--soon), black 40%); }
.pm-alert-txt span { font-size: 12.5px; color: var(--ink-2); }
.pm-alert-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: color-mix(in oklab, var(--soon), black 26%); }

/* Stan PILNY (≤ 6 h) — traktowany wizualnie jak po terminie (czerwony) */
.pm-prog-seg.pm-urgent { background: var(--danger); }
.pm-urgent .pm-num { background: var(--danger); color: #fff; }
.pm-row.pm-urgent { background: color-mix(in oklab, var(--danger), transparent 95%); }
.pm-urgent .pm-row-sub { color: var(--danger); font-weight: 600; }

/* Baner na przeglądzie na czerwono, gdy jest płatność pilna / po terminie */
.pm-alert.danger { background: color-mix(in oklab, var(--danger), white 91%); }
.pm-alert.danger:hover { box-shadow: 0 6px 18px color-mix(in oklab, var(--danger), transparent 80%); }
.pm-alert.danger .pm-alert-ic { color: var(--danger); }
.pm-alert.danger .pm-alert-txt b { color: color-mix(in oklab, var(--danger), black 30%); }
.pm-alert.danger .pm-alert-go { color: color-mix(in oklab, var(--danger), black 18%); }

@media (max-width: 720px) {
  .pm-car-head { flex-wrap: wrap; }
  .pm-car-prog { margin-left: 0; width: 100%; text-align: left; }
  .pm-prog-bar { justify-content: flex-start; }
  .pm-row-side { width: 100%; }
  .pm-pay-btn { width: 100%; }
}


/* ============================================================================
   Strony z linków w mailu: /pl/verify-email i /pl/reset-password  (app/verify.jsx)
   ========================================================================== */
.verify-page { min-height: 62vh; display: flex; align-items: center; justify-content: center; padding: 56px 20px 72px; }
.verify-card { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.2); padding: 34px 30px 30px; text-align: center; box-shadow: 0 10px 34px rgba(15, 29, 51, .06); }
.verify-ic { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; margin-bottom: 16px; }
.verify-h1 { font-size: 24px; line-height: 1.25; margin: 0 0 10px; color: var(--ink); }
.verify-p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0 0 20px; text-wrap: pretty; }
.verify-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-align: left; }
.verify-lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.verify-row { display: flex; gap: 8px; }
.verify-inp { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; font-size: 14px; color: var(--ink); }
.verify-inp.full { width: 100%; }
.verify-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 86%); }
.verify-hint { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 8px 0 0; word-break: break-word; }
.verify-hint.err { color: var(--danger); }
.verify-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 560px) {
  .verify-card { padding: 26px 18px 22px; }
  .verify-actions .btn { width: 100%; }
}

/* ── Drabina jakości zdjęć (podgląd LQ -> docelowa miniatura) ───────────────
   Podgląd ma ~240 px i niską jakość WebP, więc dochodzi niemal natychmiast.
   Delikatne rozmycie ukrywa artefakty kompresji; po dojściu wersji docelowej
   klasa znika i obraz "wyostrza się" płynnie. Specyficzność dobrana tak, by
   wygrać z .photo-real .photo-img (0,2,0). */
.photo-real .photo-img.photo-img-lq {
  filter: blur(6px) saturate(1.05);
  transform: scale(1.04);           /* przykrywa miękkie krawędzie rozmycia */
}
.photo-real .photo-img {
  transition: filter .28s ease-out, transform .28s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .photo-real .photo-img { transition: none; }
  .photo-real .photo-img.photo-img-lq { filter: blur(4px); transform: none; }
}

/* Karta pojazdu: główne zdjęcie też podnosi jakość progresywnie. */
.detail-hero-img.photo-img-lq,
.lightbox-img.photo-img-lq { filter: blur(8px); transform: scale(1.02); }
.detail-hero-img, .lightbox-img { transition: filter .3s ease-out, transform .3s ease-out; }

/* ── PERF: wylaczenie CIAGLYCH, kosztownych animacji ─────────────────────────
   Animowany blur duzych plam swiatla w hero (760/520/560 px, blur 20-60px)
   oraz wieloanimacyjny przycisk licytacji (gradient+puls+sheen) wymuszaly
   NIEUSTANNE przemalowywanie duzych obszarow - na slabszym sprzecie to one
   dawaly "ciagle scinanie" przy przewijaniu i klikaniu (zmierzone: bez nich
   0 zacietych klatek zamiast 3-5, najgorsza klatka 83ms -> 17ms).
   Wyglad zostaje STATYCZNY (glow/gradient dalej widoczne); drobne wskazniki
   (kropka "live", pill "na zywo") dzialaja normalnie.
   Cofniecie: usun ten blok. Uzytkownicy z prefers-reduced-motion i tak mieli
   te animacje wylaczone. */
.hero-glow, .hero-bg::before, .hero-bg::after { animation: none !important; }
.det-bid-glow, .det-bid-glow:not(:disabled) { animation: none !important; }

/* ── Zgoda na cookies / prywatnosc (box w lewym dolnym rogu) ─────────────────*/
.cc-wrap { position: fixed; left: 18px; bottom: 18px; z-index: 4000; width: 380px; max-width: calc(100vw - 32px); animation: ccIn .28s ease both; }
@keyframes ccIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cc-wrap { animation: none; } }
.cc-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 16px 16px 14px; }
.cc-head { display: flex; align-items: center; justify-content: center; text-align: center; gap: 8px; color: var(--ink); font-size: 15px; }
.cc-head svg { color: var(--accent); }
.cc-text { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 8px 0 14px; text-align: center; }
.cc-link { color: var(--accent-ink); font-weight: 600; text-decoration: underline; }
.cc-link:hover { color: var(--accent); }
.cc-actions { display: flex; gap: 8px; }
.cc-btn { flex: 1; padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 13.5px; cursor: pointer; border: 1px solid var(--line); transition: background .15s, border-color .15s, filter .15s; }
.cc-btn.cc-ghost { background: var(--surface-2); color: var(--ink-2); }
.cc-btn.cc-ghost:hover { border-color: var(--accent); color: var(--ink); }
.cc-btn.cc-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.cc-btn.cc-primary:hover { filter: brightness(1.06); }
.cc-cat { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.cc-cat:first-of-type { border-top: none; margin-top: 2px; }
.cc-cat-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cc-cat-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cc-cat-sub { font-size: 12px; color: var(--muted); line-height: 1.35; }
.cc-toggle { flex-shrink: 0; width: 40px; height: 23px; border-radius: 999px; border: none; background: var(--line); position: relative; cursor: pointer; padding: 0; transition: background .18s; }
.cc-toggle > i { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(13,23,38,.28); transition: transform .18s; }
.cc-toggle.on { background: var(--accent); }
.cc-toggle.on > i { transform: translateX(17px); }
.cc-toggle.locked { background: var(--accent); opacity: .55; cursor: not-allowed; }
.cc-actions + .cc-cat { border-top: 1px solid var(--line-2); }
.cc-box .cc-cat + .cc-actions { margin-top: 12px; }
@media (max-width: 560px) { .cc-wrap { left: 12px; right: 12px; bottom: 12px; width: auto; } }

/* ── POPRAWKI WERSJI MOBILNEJ (zgłoszenia użytkownika) ───────────────────────*/
@media (max-width: 760px) {
  /* #2 iOS: brak przybliżania ekranu przy wejściu w pole tekstowe. Przyczyna to
     pola z font-size < 16px (Safari/iOS wymusza wtedy auto-zoom). Ustawiamy 16px
     na polach formularzy - zoom znika, a pinch-zoom (szczypanie) nadal działa. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px !important; }

  /* #1 Karta auta: MNIEJSZE miniatury pod głównym zdjęciem (główne bez zmian). */
  .thumbs { grid-template-columns: repeat(6, 1fr); gap: 6px; }

  /* #4 Karta auta: nagłówek "Podobne ..." wyśrodkowany + 4 pojazdy zamiast 5. */
  .det-similar .sec-head { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .det-similar .grid-4 > :nth-child(n + 5) { display: none; }

  /* #3 Strona główna: boxy marek mniejsze o ~25% (ikona + box). */
  .brand-tile { padding: 10px 4px 8px; gap: 6px; }
  .brand-logo { width: 33px; height: 33px; }
  .brand-name { font-size: 11px; }
}
/* #3 c.d.: więcej kolumn = węższe boxy marek (~25% mniejsze) na mobile */
@media (max-width: 860px) { .brand-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 560px) { .brand-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; } }
/* Cookies: animacja ZNIKANIA boxa (po decyzji) + subtelniejsze wejscie */
@keyframes ccOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(14px) scale(.98); } }
.cc-wrap.cc-out { animation: ccOut .26s cubic-bezier(.4,0,1,1) forwards; }
@media (prefers-reduced-motion: reduce) { .cc-wrap.cc-out { animation: none; opacity: 0; } }
.dash-badge.payment-wait {
  background: #fff4dc;
  color: #9a6200;
  border: 1px solid #f0d28d;
}
.won-status-box.won-payment-wait {
  background: #fff4dc;
  border-color: #f0d28d;
  color: #946000;
}
.auction-win-label {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eaf7ef;
  color: #167044;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}