:root {
		--vindxit-blue: #0047AB;
		--vindxit-sky: #00AEEF;
		--vindxit-yellow: #FFCC00;
		--vindxit-silver: #C0C0C0;
		--vindxit-dark: #002F6C;
	}

	/* ---------- Keyframes (referenced) ---------- */
	@keyframes animatedBackground {
		0% { background-position: 0% 50%; }
		50% { background-position: 100% 50%; }
		100% { background-position: 0% 50%; }
	}
	@keyframes fadeIn {
		from { opacity: 0; transform: translateY(20px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	@keyframes fadeInDown {
		from { opacity: 0; transform: translateY(-20px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	@keyframes vxRunAcrossNoBlur {
		0%   { transform: translateX(-140vw) rotate(-12deg) scale(.9); }
		70%  { transform: translateX(12px) rotate(0) scale(1.02); }
		85%  { transform: translateX(-8px) scale(0.98); }
		100% { transform: translateX(0) scale(1); }
	}
	@keyframes vxBreath {
		0%,100% { transform: translateY(0); }
		50%     { transform: translateY(4px); }
	}

	/* ---------- Global / base ---------- */
	html { -ms-touch-action: manipulation; touch-action: manipulation; }

	body {
		background: linear-gradient(135deg, var(--vindxit-blue), var(--vindxit-sky));
		background-size: 400% 400%;
		animation: animatedBackground 15s ease infinite;
		
	}

	/* App-feel mobile input fix */
	input, select, textarea {
		font-size: 16px !important; /* Prevents iOS zoom */
		width: 100%;
		box-sizing: border-box;
	}
	.input-wrapper { display: flex; width: 100%; max-width: 100%; }

	/* ---------- Layout containers ---------- */
	.full-height-main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
	.container { flex: 1; max-width: 100%; margin: 2rem auto; padding: 0 1.5rem; width: 100%; }
	ul { list-style: none; padding-left: 0; }

	/* ---------- Header & nav ---------- */
	header {
		position: relative;
		width: 100%;
		min-height: 80px;
		background-color: #000000;
		display: flex; align-items: center; justify-content: space-between;
		padding: 1rem 1rem;
	}

	/* Decorative underline kept (no later override) */
	nav a {
		position: relative;
		text-decoration: none;
		
	}
	nav a:hover::after {
		content: '';
		position: absolute; width: 100%; height: 3px;
		background: var(--vindxit-yellow);
		bottom: -4px; left: 0;
	}

	/* =========================
		N64 Era UI – Shared Vars
		========================= */
	:root {
		/* Cards */
		--card-radius: 22px;
		--card-width: clamp(320px, 70vw, 760px);
		--card-min-h: 180px;

		/* Type */
		--base-font: clamp(17px, 1.4vw + 14px, 20px);
		--title-font: clamp(24px, 1.6vw + 18px, 32px);

		/* Palette */
		--n64-blue: #0055ff;
		--n64-red: #e60012;
		--n64-green: #00a030;
		--n64-yellow: #ffd400;
		--n64-dark: #0a0f1c;
		--n64-panel: #121a2a;
		--n64-panel-2: #1d2a44;

		/* FX */
		--glow: 0 0 0.75rem rgba(0,85,255,.35);
		--glow-strong: 0 0 1.25rem rgba(0,85,255,.55);
		--shadow: 0 10px 28px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.35) inset;
		--bevel: inset 0 2px 0 rgba(255,255,255,.07), inset 0 -2px 0 rgba(0,0,0,.35);
	}

	/* Utility */
	.hidden { display: none !important; }

	/* =========================
		Background + Header
		========================= */
	html, body {
		font-family: "Kanit", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
		font-size: var(--base-font);
		line-height: 1.55;
		color: #e6f0ff;
		background:
			radial-gradient(1200px 600px at 50% 120%, rgba(0,0,0,.55), transparent 60%) no-repeat,
			linear-gradient(180deg, #1e6aff 0%, #1a4fff 40%, #1437b5 75%, #0c1b4a 100%);
		min-height: 100%;
		margin: 0;
		overflow-x: hidden;
	}

	body::before {
		content: "";
		position: fixed;
		inset: 55vh 0 0 0;
		pointer-events: none;
		background: repeating-conic-gradient(from 45deg, rgba(255,255,255,.06) 0 25%, rgba(0,0,0,.06) 0 50%) 0 0/80px 80px;
		transform: perspective(800px) rotateX(55deg);
		filter: blur(1px) saturate(1.2);
		opacity: .55;
	}

	body::after {
		content: "";
		position: fixed;
		inset: 0;
		pointer-events: none;
		background:
			radial-gradient(18vmax 12vmax at 10% -10%, rgba(255,212,0,.10), transparent 60%),
			radial-gradient(14vmax 10vmax at 90% 10%, rgba(0,160,48,.12), transparent 60%),
			radial-gradient(20vmax 16vmax at 50% -20%, rgba(230,0,18,.10), transparent 70%);
		mix-blend-mode: screen;
		animation: skyShift 18s ease-in-out infinite alternate;
		
	}

	@keyframes skyShift {
		0% { transform: translateY(0); }
		100% { transform: translateY(-2vh); }
	}

	header {
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 14px;
		background: linear-gradient(180deg, rgba(20,31,58,.92), rgba(6,10,22,.75));
		border-bottom: 2px solid rgba(255,255,255,.06);
		box-shadow: 0 8px 18px rgba(0,0,0,.35);
		z-index: 10;
	}

	.menu-toggle .bar { background: #e6f0ff; }

	/* Title */
	h1 {
		margin: 20px auto 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		font-family: "Russo One", "Kanit", sans-serif;
		font-weight: 900;
		font-size: clamp(40px, 3.5vw + 26px, 64px);
		color: #fff;
		text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 18px rgba(0,85,255,.45);
		transform: translateZ(0);
		animation: titleBob 3.2s ease-in-out infinite;
	}

	@keyframes titleBob {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-4px); }
	}

	h1 span { display: inline-block; transform: perspective(400px) rotateX(6deg); }

	.subh1 { color: #FFCC00; text-align: center; }

	.garage-emoji {
		width: 2em;
		height: 2em;
		vertical-align: -0.35em;
		filter: drop-shadow(0 0 8px rgba(255,212,0,.7));
		animation: starBlink 2.2s ease-in-out infinite;
	}

	@keyframes starBlink {
		0%, 92%, 100% { filter: drop-shadow(0 0 0 rgba(255,212,0,0)); }
		93% { filter: drop-shadow(0 0 10px rgba(255,212,0,.95)); }
	}

	/* =========================
		Garage Card
		========================= */
	#garageList {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		margin-top: 8px;
		padding: 0 16px;
	}

	.car-card {
		width: 100%;
		max-width: var(--card-width);
		min-height: var(--card-min-h);
		margin: 0 auto;
		border-radius: var(--card-radius);
		padding: 16px;
		background: linear-gradient(180deg, #1a223d 0%, #16233f 60%, #111b33 100%);
		border: 2px solid rgba(255,255,255,.08);
		box-shadow: var(--shadow), var(--glow);
		position: relative;
		overflow: hidden;
		transform: translateZ(0);
		animation: slotIn .45s cubic-bezier(.2,.9,.25,1) both;
	}

	.car-card::after {
		content: "";
		position: absolute;
		inset: -40% -40% auto -40%;
		height: 60%;
		background: radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.06), transparent 60%);
		transform: translate3d(0,0,0);
		animation: sweep 6s linear infinite;
	}

	@keyframes slotIn {
		from { transform: translateY(12px) scale(.985); opacity: 0; }
		to { transform: translateY(0) scale(1); opacity: 1; }
	}
	@keyframes sweep {
		from { transform: translateX(-20%); }
		to { transform: translateX(120%); }
	}

	.car-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		flex-wrap: nowrap;
	}

	.car-main {
		display: flex;
		align-items: center;
		gap: 14px;
		min-width: 0;
	}

	.car-select {
		width: 26px;
		height: 26px;
		cursor: pointer;
		accent-color: #ffd400;
		transform: translateZ(0);
		transition: transform .08s ease;
	}
	.car-select:hover { transform: scale(1.12); }

	.car-title {
		font-family: "Russo One", "Kanit", sans-serif;
		font-size: var(--title-font);
		color: #fff;
		text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 12px rgba(122,167,255,.45);
		margin: 0 0 6px 0;
	}

	.car-meta { font-size: 1rem; color: #e6f0ff; }
	.car-sub { font-size: .95rem; color: #b9c9ff; }

	.paw-btn {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 14px;
		border: 0;
		cursor: pointer;
		background: linear-gradient(180deg, var(--n64-yellow), #d4ad00);
		box-shadow: var(--shadow), var(--bevel);
		transition: transform .06s ease, filter .15s ease, box-shadow .2s ease;
		position: relative;
		line-height: 0;
		vertical-align: middle;
	}
	.paw-btn:hover { transform: translateY(-1px); filter: saturate(1.1); }
	.paw-icon {
		width: 28px; height: 28px; display: block; margin: 0 auto;
		filter: drop-shadow(0 0 6px rgba(0,0,0,.35));
	}
	.paw-btn[aria-pressed="false"] .paw-icon { opacity: .6; }
	.paw-btn[aria-pressed="true"] {
		background: linear-gradient(180deg, var(--n64-green), #01752b);
		box-shadow: 0 0 16px rgba(0,160,48,.55), var(--shadow), var(--bevel);
	}
	.paw-btn[aria-pressed="true"] .paw-icon {
		filter: drop-shadow(0 0 10px rgba(0,160,48,.75)) brightness(1.05);
		opacity: 1;
	}
	.paw-btn::after {
		content: "Favorite";
		position: absolute;
		top: 100%; left: 50%;
		transform: translate(-50%, 6px);
		font-size: .72rem; font-weight: 800; letter-spacing: .3px;
		color: #cfe1ff; text-shadow: 0 1px 0 rgba(0,0,0,.55);
		pointer-events: none; white-space: nowrap;
	}
	.paw-btn[aria-pressed="true"]::after { content: "Favorited"; color: #9ff0b6; }

	#garageList .car-card:nth-child(1) { animation-delay: .05s; }
	#garageList .car-card:nth-child(2) { animation-delay: .10s; }
	#garageList .car-card:nth-child(3) { animation-delay: .15s; }
	#garageList .car-card:nth-child(4) { animation-delay: .20s; }
	#garageList .car-card:nth-child(5) { animation-delay: .25s; }

	
	/* Buttons = big A/B/C-button vibe */
	.ux-btn, .sort-btn, .delete-btn{
		height: 46px; padding: 0 22px; border-radius: 14px; border: 0; color:#0a0f1c;
		font-weight: 900; letter-spacing:.3px; text-transform: uppercase;
		box-shadow: var(--shadow), var(--bevel); transform: translateZ(0);
		transition: transform .06s ease, filter .15s ease, box-shadow .2s ease;
		background: linear-gradient(180deg, #ffd400, #ecb800);
	}
	.ux-btn:hover, .sort-btn:hover, .delete-btn:hover{ transform: translateY(-1px); filter: saturate(1.08); }
	.sort-btn{ background: linear-gradient(180deg, var(--n64-green), #018326); color:#06101c; }
	.delete-btn{ background: linear-gradient(180deg, var(--n64-red), #a00010); color:#fff; }
	.delete-btn[disabled]{ filter: grayscale(.9) brightness(.7); cursor:not-allowed; }

	/* =========================
		Layout: columns/wrap
		========================= */
	.garage-layout {
		display: flex; align-items: flex-start; gap: 22px; padding: 0 16px 28px;
		justify-content: center; max-width: 1100px; margin: 0 auto;
	}
	.cmp-wrap { display: flex; align-items: stretch; gap: 20px; }
	.cmp-col { flex: 1 1 0; min-width: 0; }
	.cmp-left, .cmp-right { display: flex; }
	#cmp-grid-a, #cmp-grid-b { width: 100%; }
	.cmp-middle {
		flex: 0 1 360px; display: flex; flex-direction: column; justify-content: center; align-items: center;
		gap: 12px; text-align: center; padding: 8px 4px;
	}

	/* =========================
		Toolbar + form controls (Sort only)
		========================= */
	.garage-toolbar {
		display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 12px; align-items: center; padding: 14px;
		background: linear-gradient(180deg, var(--n64-panel), var(--n64-panel-2));
		border: 2px solid rgba(255,255,255,.08);
		border-radius: 18px; box-shadow: var(--shadow), var(--bevel), var(--glow);
		max-width: var(--card-width); margin: 0 auto 10px;
	}
	.garage-toolbar label {
		font-weight: 700; color: #cfe1ff; text-shadow: 0 1px 0 rgba(0,0,0,.6);
	}
	.ux-select {
		appearance: none; width: 100%; height: 46px; padding: 0 44px 0 14px;
		border-radius: 14px; border: 2px solid rgba(255,255,255,.12);
		background: linear-gradient(180deg, #2a3a5f, #1a2846);
		color: #e9f1ff; font-weight: 700; letter-spacing: .2px;
		box-shadow: var(--bevel), inset 0 0 0 9999px rgba(255,255,255,.02);
		transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
		min-width: 320px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23cfe1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
		background-repeat: no-repeat; background-position: right 12px center; background-size: 22px 22px;
	}
	.ux-select:focus { outline: none; border-color: #7aa7ff; box-shadow: var(--glow-strong), var(--bevel); }
	.ux-select option {
		background: #0f1b35; color: #e9f1ff; font-family: "Kanit", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
		font-weight: 700; padding: 10px 12px;
	}
	.ux-select option:checked, .ux-select option:focus {
		background: linear-gradient(180deg, #0055ff, #0a3ad0); color: #fff;
	}
	.ux-select optgroup { background: #0f1b35; color: #9fb7ff; font-weight: 900; }
	.ux-select::-webkit-scrollbar { width: 10px; }
	.ux-select::-webkit-scrollbar-track { background: #0f1b35; }
	.ux-select::-webkit-scrollbar-thumb { background: #1e3a72; border-radius: 8px; border: 2px solid #0f1b35; }
	.ux-select::-webkit-scrollbar-thumb:hover { background: #2a55a8; }

	.sort-btn, .ux-btn {
		height: 46px; padding: 0 22px; border-radius: 14px; border: 0; cursor: pointer;
		font: 900 .95rem/1 "Kanit", system-ui; box-shadow: var(--shadow), var(--bevel);
		transition: transform .06s ease, filter .15s ease, box-shadow .2s ease;
		background: linear-gradient(180deg, var(--n64-green), #018326); color: #06101c;
	}
	.sort-btn:hover, .ux-btn:hover { transform: translateY(-1px); filter: saturate(1.08); }
	.delete-btn { background: linear-gradient(180deg, var(--n64-red), #a00010); color: #fff; }
	.delete-btn[disabled] { filter: grayscale(.9) brightness(.7); cursor: not-allowed; }

	/* =========================
		Responsive (mobile rails)
		========================= */
@media (max-width: 900px) {
	:root { --card-radius: 14px; --base-font: 14px; --title-font: 18px; }

	header { padding: 10px 10px; }
	.logo-img { height: 56px !important; }
	h1 { font-size: clamp(22px, 5vw + 12px, 32px); margin: 12px auto 8px; gap: 6px; }
	.garage-emoji { width: 1.4em; height: 1.4em; }

	.garage-layout {
		padding-left: max(16px, env(safe-area-inset-left));
		padding-right: max(16px, env(safe-area-inset-right));
		padding-bottom: 16px;
		gap: 10px;
		max-width: 100%;
	}

	.garage-column { padding-left: 0 !important; padding-right: 0 !important; }

	/* 🔑 Shared container rule: all the same width + margin */
	.garage-toolbar,
	#garageList,
	.bulk-toolbar {
		width: 95vw;                 /* unified width */
		max-width: 95vw;             /* no wider than viewport */
		margin: 0 auto;              /* center horizontally */
		box-sizing: border-box;
		border-radius: 10px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.garage-toolbar {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 20px 20px;
		margin: 8px auto 12px;
	}

	.bulk-toolbar { padding: 10px 14px; }

	.ux-select {
		min-width: auto; width: 100%; max-width: calc(100% - 20px);
		height: 40px; font-size: .9rem; padding: 0 34px 0 14px;
		background-position: right 10px center;
	}
	.ux-select option { padding: 8px 10px; }

	.car-card, .cmp-card {
		max-width: 100%; padding: 10px; border-radius: 14px; box-sizing: border-box;
	}

	.car-row { gap: 8px; }
	.car-main { gap: 8px; }
	.car-select { width: 20px; height: 20px; }

	.paw-btn { width: 36px; height: 36px; border-radius: 12px; }
	.paw-icon { width: 20px; height: 20px; }

	.cmp-wrap { display: block; padding: 0 10px; }
	.cmp-col { margin-bottom: 16px; }
	.cmp-middle { padding: 0 10px; }

	.cmp-actions {
		gap: 10px; flex-direction: column; align-items: stretch;
	}
	.cmp-actions .cmp-primary { width: 100%; }
}

	/* logo */
	.logo-link{ display:flex; align-items:center; height:100%; }
	.logo-img{
		height: 80px; width: auto; object-fit: contain;
		animation: vxRunAcrossNoBlur 2.5s cubic-bezier(.2,1.1,.2,1) .2s both,
						 vxBreath 6s ease-in-out 3s infinite;
		transform-origin: center;
	}
	.logo-img:hover{ animation: vxBreath 6s ease-in-out 0s infinite; }

	@media (max-width: 900px){
		.logo-img{ max-width: 80%; height: auto !important; }
	}
	@media screen and (max-width: 768px) and (orientation: landscape){
		.logo-img{ max-width: 140px; height: auto !important; }
	}

	/* ---------- Footer ---------- */
		/*footer {
		background-color: #111827;
		height: 5vh;
		color: #9ca3af;
		text-align: center;
		padding: 1rem 0;
		width: 100%;
		font-size: 0.9rem;
		margin-top: auto;
	}
  /* Make the reCAPTCHA user badge scroll with the page (not fixed) */
.grecaptcha-badge {
  position: absolute !important;   /* was fixed */
  right: 16px;
  bottom: 16px;
  z-index: 50;                      /* keep it visible above cards */
}

/* Optional: scale a bit on small screens */
@media (max-width: 900px) {
  .grecaptcha-badge {
    transform: scale(.9);
    transform-origin: bottom right;
    right: 10px;
    bottom: 10px;
  }
}
/* Subtle "VI blur" shimmer on moving elements */
.vi-soft{ backdrop-filter: blur(.75px); }
/* Ensure there’s a positioned ancestor so 'absolute' anchors to the page flow */
body { position: relative; }
/* === MOBILE: unify gutters with Garage (16px) === */
@media (max-width: 900px) {
  .garage-toolbar,
  #garageList,
  .bulk-toolbar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

    /* === N64-Inspired UI Skin === */
    :root {
      /* Cards */
      --card-radius: 22px;
      --card-width: clamp(320px, 70vw, 760px);
      --card-min-h: 180px;

      /* Typography */
      --base-font: clamp(16px, 1.2vw + 14px, 18px);
      --title-font: clamp(22px, 1.3vw + 18px, 28px);

      /* N64 Palette */
      --n64-blue: #0055ff;
      --n64-red: #e60012;
      --n64-green: #00a030;
      --n64-yellow: #ffd400;
      --n64-dark: #0a0f1c;
      --n64-panel: #121a2a;
      --n64-panel-2: #1d2a44;

      /* Effects */
      --glow: 0 0 0.75rem rgba(0, 85, 255, 0.35);
      --glow-strong: 0 0 1.25rem rgba(0, 85, 255, 0.55);
      --shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.35) inset;
      --bevel: inset 0 2px 0 rgba(255, 255, 255, 0.07), inset 0 -2px 0 rgba(0, 0, 0, 0.35);
    }

    /* === Keyframes === */
    @keyframes animatedBackground {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes vxRunAcrossNoBlur {
      0% { transform: translateX(-140vw) rotate(-12deg) scale(0.9); }
      70% { transform: translateX(12px) rotate(0) scale(1.02); }
      85% { transform: translateX(-8px) scale(0.98); }
      100% { transform: translateX(0) scale(1); }
    }
    @keyframes vxBreath {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(4px); }
    }
    @keyframes skyShift {
      0% { transform: translateY(0); }
      100% { transform: translateY(-2vh); }
    }
    @keyframes titleBob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }
    @keyframes starBlink {
      0%, 92%, 100% { filter: drop-shadow(0 0 0 rgba(255, 212, 0, 0)); }
      93% { filter: drop-shadow(0 0 10px rgba(255, 212, 0, 0.95)); }
    }
    @keyframes slotIn {
      from { transform: translateY(12px) scale(0.985); opacity: 0; }
      to { transform: translateY(0) scale(1); opacity: 1; }
    }
    @keyframes sweep {
      from { transform: translateX(-20%) translateY(0); }
      to { transform: translateX(120%) translateY(0); }
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* === Global Styles === */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: 'Kanit', system-ui, -apple-system, sans-serif;
      font-size: var(--base-font);
      line-height: 1.55;
      color: #e6f0ff;
      background:
        radial-gradient(1200px 600px at 50% 120%, rgba(0, 0, 0, 0.55), transparent 60%) no-repeat,
        linear-gradient(180deg, #1e6aff 0%, #1a4fff 40%, #1437b5 75%, #0c1b4a 100%);
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      overflow-x: hidden;
      -ms-touch-action: manipulation;
      touch-action: manipulation;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 55vh 0 0 0;
      pointer-events: none;
      background: repeating-conic-gradient(from 45deg, rgba(255, 255, 255, 0.06) 0 25%, rgba(0, 0, 0, 0.06) 0 50%) 0 0/80px 80px;
      transform: perspective(800px) rotateX(55deg) translateZ(0);
      filter: blur(1px) saturate(1.2);
      opacity: 0.55;
    }

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(18vmax 12vmax at 10% -10%, rgba(255, 212, 0, 0.10), transparent 60%),
        radial-gradient(14vmax 10vmax at 90% 10%, rgba(0, 160, 48, 0.12), transparent 60%),
        radial-gradient(20vmax 16vmax at 50% -20%, rgba(230, 0, 18, 0.10), transparent 70%);
      mix-blend-mode: screen;
      animation: skyShift 18s ease-in-out infinite alternate;
    }

    input, select, textarea {
      font-size: 16px !important;
      width: 100%;
      box-sizing: border-box;
    }

    .input-wrapper {
      display: flex;
      width: 100%;
      max-width: 100%;
    }

    .vi-soft {
      backdrop-filter: blur(0.75px);
    }

    /* === Header === */
    header {
      position: sticky;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: linear-gradient(180deg, rgba(20, 31, 58, 0.92), rgba(6, 10, 22, 0.75));
      border-bottom: 2px solid rgba(255, 255, 255, 0.06);
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
      z-index: 10;
    }

    .menu-toggle .bar {
      background: #e6f0ff;
    }

    .logo-link {
      position: relative;
      z-index: 1000;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .logo-img {
      height: 80px;
      width: auto;
      object-fit: contain;
      animation: vxRunAcrossNoBlur 2.5s cubic-bezier(0.2, 1.1, 0.2, 1) 0.2s both, vxBreath 6s ease-in-out 3s infinite;
      transform-origin: center;
    }

    .logo-img:hover {
      animation: vxBreath 6s ease-in-out 0s infinite;
    }

    /* === Title === */
    h1 {
      margin: 20px auto 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      font-family: 'Russo One', 'Kanit', sans-serif;
      font-weight: 900;
      font-size: clamp(34px, 3vw + 24px, 56px);
      letter-spacing: 0.5px;
      color: #fff;
      text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 85, 255, 0.45);
      animation: titleBob 3.2s ease-in-out infinite;
    }

    h1 span {
      display: inline-block;
      transform: perspective(400px) rotateX(6deg);
    }

    .garage-emoji {
      width: 2em;
      height: 2em;
      vertical-align: -0.35em;
      filter: drop-shadow(0 0 8px rgba(255, 212, 0, 0.7));
      animation: starBlink 2.2s ease-in-out infinite;
    }

    /* === Layout === */
    .garage-layout {
      display: flex;
      align-items: flex-start;
      gap: 22px;
      padding: 0 16px 28px;
      justify-content: center;
      max-width: 1100px;
      margin: 0 auto;
    }

    /* === Toolbar === */
    .garage-toolbar {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      align-items: center;
      padding: 14px;
      background: linear-gradient(180deg, var(--n64-panel), var(--n64-panel-2));
      border: 2px solid rgba(255, 255, 255, 0.08);
      border-radius: 18px;
      box-shadow: var(--shadow), var(--bevel), var(--glow);
      max-width: 980px;
      margin: 0 auto;
    }

    .garage-toolbar label {
      font-weight: 700;
      color: #cfe1ff;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    }

    .ux-select, .ux-input {
      appearance: none;
      width: 100%;
      height: 46px;
      padding: 0 44px 0 14px;
      border-radius: 14px;
      border: 2px solid rgba(255, 255, 255, 0.12);
      background: linear-gradient(180deg, #2a3a5f, #1a2846);
      color: #e9f1ff;
      font-weight: 700;
      letter-spacing: 0.2px;
      box-shadow: var(--bevel), inset 0 0 0 9999px rgba(255, 255, 255, 0.02);
      transition: transform 0.08s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .ux-select:focus, .ux-input:focus {
      outline: none;
      border-color: #7aa7ff;
      box-shadow: var(--glow-strong), var(--bevel);
    }

    .ux-select {
      min-width: 420px;
      position: relative;
      z-index: 5;
      background: #0f1b35 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23cfe1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
      background-size: 22px;
    }

    .ux-select option {
      background: #0f1b35;
      color: #e9f1ff;
      font-family: 'Kanit', system-ui, sans-serif;
      font-weight: 700;
      padding: 10px 12px;
    }

    .ux-select option:checked, .ux-select option:focus {
      background: linear-gradient(180deg, #0055ff, #0a3ad0);
      color: #fff;
    }

    .ux-select optgroup {
      background: #0f1b35;
      color: #9fb7ff;
      font-weight: 900;
    }

    .ux-select::-webkit-scrollbar {
      width: 10px;
    }

    .ux-select::-webkit-scrollbar-track {
      background: #0f1b35;
    }

    .ux-select::-webkit-scrollbar-thumb {
      background: #1e3a72;
      border-radius: 8px;
      border: 2px solid #0f1b35;
    }

    .ux-select::-webkit-scrollbar-thumb:hover {
      background: #2a55a8;
    }

    /* === Buttons === */
    .ux-btn, .sort-btn, .delete-btn {
      height: 46px;
      padding: 0 22px;
      border-radius: 14px;
      border: 0;
      color: #0a0f1c;
      font-weight: 900;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      box-shadow: var(--shadow), var(--bevel);
      transition: transform 0.06s ease, filter 0.15s ease, box-shadow 0.2s ease;
      background: linear-gradient(180deg, #ffd400, #ecb800);
    }

    .ux-btn:hover, .sort-btn:hover, .delete-btn:hover {
      transform: translateY(-1px);
      filter: saturate(1.08);
    }

    .sort-btn {
      background: linear-gradient(180deg, var(--n64-green), #018326);
      color: #06101c;
    }

    .delete-btn {
      background: linear-gradient(180deg, var(--n64-red), #a00010);
      color: #fff;
    }

    .delete-btn[disabled] {
      filter: grayscale(0.9) brightness(0.7);
      cursor: not-allowed;
    }

    /* === Bulk Toolbar === */
    .bulk-toolbar {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      margin: 18px auto 26px;
      padding: 12px 18px;
      background: linear-gradient(180deg, var(--n64-panel), var(--n64-panel-2));
      border: 2px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      box-shadow: var(--shadow), var(--bevel), var(--glow);
      max-width: 980px;
    }

    .bulk-label {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
    }

    .bulk-checkbox {
      width: 22px;
      height: 22px;
      cursor: pointer;
      accent-color: #7aa7ff;
    }

    /* === Cards === */
    #garageList {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin-top: 8px;
    }

    .car-card {
      width: 100%;
      max-width: var(--card-width);
      min-height: var(--card-min-h);
      margin: 0 auto;
      border-radius: var(--card-radius);
      padding: 16px;
      background: linear-gradient(180deg, #1a223d 0%, #16233f 60%, #111b33 100%);
      border: 2px solid rgba(255, 255, 255, 0.08);
      box-shadow: var(--shadow), var(--glow);
      position: relative;
      overflow: hidden;
      animation: slotIn 0.45s cubic-bezier(0.2, 0.9, 0.25, 1) both;
    }

    .car-card::after {
      content: '';
      position: absolute;
      inset: -40% -40% auto -40%;
      height: 60%;
      background: radial-gradient(60% 100% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 60%);
      animation: sweep 6s linear infinite;
    }

    .car-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: nowrap;
    }

    .car-main {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .car-select {
      width: 26px;
      height: 26px;
      cursor: pointer;
      accent-color: #ffd400;
      transition: transform 0.08s ease;
    }

    .car-select:hover {
      transform: scale(1.12);
    }

    .car-card .car-main > div > div[style*="font-weight:600"] {
      font-family: 'Russo One', 'Kanit', sans-serif !important;
      font-size: var(--title-font) !important;
      color: #fff;
      text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 12px rgba(122, 167, 255, 0.45);
      margin-bottom: 6px !important;
    }

    .car-card .car-main > div > div[style*="display:flex"] {
      font-size: 1rem !important;
    }

    .car-card .car-main > div > div[style*="font-size:12px"] {
      font-size: 0.95rem !important;
      color: #b9c9ff;
    }

    /* === Favorite Paw Button === */
    .paw-btn {
      flex: 0 0 44px;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      border: 0;
      cursor: pointer;
      background: linear-gradient(180deg, var(--n64-yellow), #d4ad00);
      box-shadow: var(--shadow), var(--bevel);
      transition: transform 0.06s ease, filter 0.15s ease, box-shadow 0.2s ease;
      position: relative;
      line-height: 0;
    }

    .paw-btn:hover {
      transform: translateY(-1px);
      filter: saturate(1.1);
    }

    .paw-icon {
      width: 28px;
      height: 28px;
      display: block;
      filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
    }

    .paw-btn[aria-pressed="false"] .paw-icon {
      opacity: 0.6;
    }

    .paw-btn[aria-pressed="true"] {
      background: linear-gradient(180deg, var(--n64-green), #01752b);
      box-shadow: 0 0 16px rgba(0, 160, 48, 0.55), var(--shadow), var(--bevel);
    }

    .paw-btn[aria-pressed="true"] .paw-icon {
      filter: drop-shadow(0 0 10px rgba(0, 160, 48, 0.75)) brightness(1.05);
      opacity: 1;
    }

    .paw-btn::after {
      content: 'Favorite';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, 6px);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.3px;
      color: #cfe1ff;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
      pointer-events: none;
      white-space: nowrap;
    }

    .paw-btn[aria-pressed="true"]::after {
      content: 'Favorited';
      color: #9ff0b6;
    }

    /* === Loading Spinner === */
    .loading-spinner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: #dfe8ff;
      font-weight: 800;
      padding: 40px 0;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    }

    .loading-spinner::before {
      content: '';
      width: 30px;
      height: 30px;
      border-radius: 10px;
      background: conic-gradient(from 0deg, var(--n64-yellow), var(--n64-red), var(--n64-blue), var(--n64-green), var(--n64-yellow));
      animation: spin 1s linear infinite;
      box-shadow: 0 0 14px rgba(255, 255, 255, 0.2);
    }

    /* === Staggered Card Animations === */
    #garageList .car-card:nth-child(1) { animation-delay: 0.05s; }
    #garageList .car-card:nth-child(2) { animation-delay: 0.10s; }
    #garageList .car-card:nth-child(3) { animation-delay: 0.15s; }
    #garageList .car-card:nth-child(4) { animation-delay: 0.20s; }
    #garageList .car-card:nth-child(5) { animation-delay: 0.25s; }



/* === Responsive Design === */
@media (max-width: 900px) {
  :root {
    --card-radius: 10px; /* Matches macOS aesthetic */
    --base-font: 13px;
    --title-font: 16px;
  }

  header {
    padding: 8px 10px;
  }

  .logo-img { 
    height: 150px !important;
  }

  h1 {
    font-size: clamp(20px, 4vw + 12px, 28px);
    margin: 12px auto 8px;
    gap: 6px;
  }

  .garage-emoji {
    width: 1.2em;
    height: 1.2em;
  }

  .garage-layout {
    padding: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)) 16px !important;
    gap: 10px;
    justify-content: center; /* Center flex items */
    width: 100%; /* Ensure full width */
    box-sizing: border-box;
  }

  .garage-column {
    padding: 0 !important;
    margin: 0 auto !important; /* Center within parent */
    width: 100%;
    max-width: 95vw; /* Match toolbar and list widths */
    box-sizing: border-box;
  }

  .garage-toolbar, .bulk-toolbar, #garageList {
    max-width: 95vw !important; /* Consistent width */
    width: calc(100% - 28px); /* Account for 14px padding on each side */
    margin: 0 auto !important;
    padding: 10px 14px !important;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.25);
    box-sizing: border-box; /* Include padding in width */
  }

  .garage-toolbar {
    grid-template-columns: 1fr;
    margin: 8px auto 12px; /* Center vertically */
  }

  .ux-select, .ux-input {
    min-width: 0 !important;
    height: 34px;
    font-size: 0.85rem;
    padding: 0 30px 0 10px;
    background-position: right 8px center;
  }

  .ux-select option {
    padding: 6px 8px;
  }

  #garageList {
    gap: 12px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center cards horizontally */
  }

  .car-card {
    max-width: 100% !important;
    width: 100% !important; /* Fill parent container */
    margin: 0 !important;
    padding: 12px;
    border-radius: 10px;
  }

  .car-row, .car-main {
    gap: 8px;
  }

  .car-select {
    width: 18px;
    height: 18px;
  }

  .paw-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .paw-icon {
    width: 20px;
    height: 20px;
  }

  .vx-drawer-open #filterDockRight .vx-filter-sidebar,
  .vx-drawer-open .vx-filter-sidebar {
    transform: translateX(0) !important;
  }
}

    @media (max-width: 360px) {
      .logo-img {
        height: 48px !important;
      }

      h1 {
        font-size: 22px;
      }

      .ux-select, .ux-input {
        height: 38px;
        font-size: 0.85rem;
      }

      .paw-btn {
        width: 34px;
        height: 34px;
      }

      .paw-icon {
        width: 18px;
        height: 18px;
      }
    }

    /* =========================
   Compare Grid (A/B cards)
   ========================= */
   
.cmp-card {
  width: 100%;
  max-width: var(--card-width);
  min-height: var(--card-min-h);
  margin: 0 auto;
  border-radius: var(--card-radius);
  padding: 16px;
  background: linear-gradient(180deg, #1a223d 0%, #16233f 60%, #111b33 100%);
  border: 2px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow), var(--glow);
  color: #e6f0ff;
  position: relative;
  overflow: hidden;
  animation: slotIn .45s cubic-bezier(.2,.9,.25,1) both;
}

.cmp-card header h3 {
  font-family: "Russo One", "Kanit", sans-serif;
  font-size: var(--title-font);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 12px rgba(122,167,255,.45);
  margin: 0 0 6px;
}

.cmp-sub { color: #b9c9ff; }

.cmp-gridbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-top: 12px;
}

.cmp-field .cmp-label {
  display: block;
  font-size: .9rem;
  color: #cfe1ff;
  opacity: .9;
}

.cmp-field .cmp-val {
  font-weight: 700;
  color: #fff;
}

.cmp-scorewrap { margin-top: 12px; }

.cmp-scorelabel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 6px;
  color: #e6f0ff;
}

.cmp-bar {
  width: 100%;
  height: 10px;
  background: #0e1a33;
  border-radius: 10px;
  overflow: hidden;
}

.cmp-fill {
  height: 100%;
  width: 0%;
  background: #4aa7ff;
  transition: width .35s ease;
}

.cmp-cats { margin-top: 14px; }

.cmp-cats h4 { margin: 0 0 8px; }

.cmp-catrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-top: 1px dashed rgba(255,255,255,.12);
}

.cmp-badge {
  min-width: 40px;
  text-align: center;
  padding: 4px 8px;
  border-radius: 10px;
  font-weight: 800;
}

.cmp-badge.neutral { background: #22335a; color: #cfe1ff; }
.cmp-badge.win { background: #22c55e; color: #072b12; }
.cmp-badge.lose { background: #ef4444; color: #4a0b0b; }

.cmp-ribbon-spot { position: relative; }

.cmp-ribbon {
  position: absolute;
  top: -1px;
  right: -8px;
  font-size: 100px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.46));
  z-index: 9999;
}

.cmp-ribbon[data-hidden="true"] { display: none; }

.cmp-verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: var(--card-width);
  max-width: 100%;
  text-align: center;
}

.cmp-lady { width: 180px; height: auto; }

.cmp-say {
  border: 2px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #1a223d 0%, #16233f 60%, #111b33 100%);
  color: #e6f0ff;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow), var(--glow);
}
/* =========================
		Actions (Compare button)
		========================= */
	.cmp-actions {
		display: flex; align-items: center; gap: 14px; justify-content: center;
		margin-top: 12px; padding-left: 16px; padding-right: 16px;
	}
	.cmp-hint {
		font-size: .95rem; color: #dfe8ff; font-weight: 800; text-shadow: 0 1px 0 rgba(0,0,0,.6); margin: 0;
	}
	.cmp-primary {
		height: 46px; padding: 0 22px; border-radius: 14px; border: 0; cursor: pointer;
		font: 900 0.95rem/1 "Kanit", system-ui;
		background: linear-gradient(180deg, var(--n64-green), #018326);
		color: #06101c; box-shadow: var(--shadow), var(--bevel);
		transition: transform .06s ease, filter .15s ease, box-shadow .2s ease;
	}
	.cmp-primary:hover { transform: translateY(-1px); filter: saturate(1.08); }
	.cmp-primary:disabled { filter: grayscale(.9) brightness(.7); cursor: not-allowed; }
/* —— VindXit: final-say for logo animation —— */
header .logo-img{
	/* make sure transforms can apply */
	display:inline-block;
	will-change: transform;

	/* re-assert both animations with higher specificity */
	animation:
		vxRunAcrossNoBlur 2.5s cubic-bezier(.2,1.1,.2,1) .2s both,
		vxBreath          6s   ease-in-out                 3s  infinite !important;
}

/* keep hover breathe without killing run-in afterward */
header .logo-img:hover{
	animation: vxBreath 6s ease-in-out 0s infinite !important;
}

/* (optional) if any ancestor accidentally clips during the run-in */
header { overflow: visible !important; }
/* ✅ Keep the scorebar's bits visible even inside animated/overflowed cards */
.score-bar-container { 
  position: relative !important; 
  overflow: visible !important; 
  isolation: isolate; /* makes a new stacking context just for the bar */
}

/* ✅ Make the marker transition reliable on iOS Safari */
.marker {
  will-change: left;
  transform: translate3d(-50%,0,0) !important; /* GPU promotes & keeps the translate */
  transition: left 1.8s cubic-bezier(.8,.1,.1,1) !important;
}

/* ✅ Let the popup float above card clipping */
.score-popup {
  position: absolute !important;
  z-index: 9999 !important;
  pointer-events: none;
}

/* ✅ Only relax clipping around the scorebar area inside compare cards */
.cmp-card { overflow: visible; }          /* easiest: stop clipping entirely */
/* …or safer, just around the bar: */
.cmp-card .score-bar-container { overflow: visible; }
/* 🟢 Center logo in header for DOS theme */
header {
	justify-content: center !important;  /* Center contents horizontally */
}

.logo-link {
	margin: 0 auto;                      /* Push logo to center */
	justify-content: center;             /* Ensure flex aligns center */
}

.logo-img {
	display: block;
	margin: 0 auto;                      /* Extra safeguard for centering */
}
/* ============================================================================
	14) DOS THEME HEADER CENTERING (OVERRIDE)
   ============================================================================ */
/* 🟣 **TASK (in pink): Make header logo centered in DOS theme** */
header {
	justify-content: center !important;  /* Center contents horizontally */
}

.logo-link {
	margin: 0 auto;                      /* Push logo to center */
	justify-content: center;             /* Ensure flex aligns center */
}

.logo-img {
	display: block;
	margin: 0 auto;                      /* Extra safeguard for centering */
}
/* ────────────────────────────────────────────────────────────────────────────
   💗 **TASK**: Enlarge logo on desktop by 25%
   - Only affects viewports ≥ 768px (your desktop breakpoints)
   - Keeps existing mobile rules intact
   ──────────────────────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────────────────
   💗 **TASK**: Scale logo 25% larger inside fixed-height header
   - Header remains exactly 80px tall
   - Logo is visually bigger using transform, not height
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
	header {
		height: 150px;              /* lock header height */
		min-height: 150px;          /* reinforce min height */
		
	}

	.logo-img {
		height: 250px;             /* keep intrinsic size */
		
	}
}
/* === Center logo on ALL viewports without moving other header items === */
header { position: relative !important; } /* positioning context for absolute center */

.logo-link {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10;           /* above hamburger/login, still clickable */
  pointer-events: auto;  /* keep link interactive */
}

.logo-img {
  display: block !important;
  height: 250;          /* respects whatever heights you set elsewhere */
  width: auto;           /* keeps intrinsic ratio */
  object-fit: contain;
}

/* Optional safety: avoid the logo being clipped if it’s tall */
header { overflow: visible !important; }
/* 💖 TASK: Keep compare hero/panels below the Steps */
.cmp-hero,
.compare-hero,
.vi-soft,
.panel {
	position: relative !important;
	z-index: 1 !important;
}
/* 💖 TASK: Keep Compare hero/panels below the Steps */
h1,
.subh1,
.garage-toolbar,
#garageList,
.bulk-toolbar,
.cmp-section {
  position: relative !important;
  z-index: 1 !important;   /* safely under Steps (9999) */
}
/* Optional: the title's translateZ isn't needed; animation still works */
h1 { transform: none; }
/* Keep title layer under the Steps */
h1, .subh1 { position: relative !important; z-index: 1 !important; transform: none !important; }
/* Push decorative planes behind UI */
body { position: relative; z-index: 0; }
body::before, body::after { z-index: 0; }



/* N64-style green action button */
.n64-green{
  --n64g:#29d344;               /* main green */
  --n64g-dark:#20b53a;          /* hover/active */
  --n64g-glow:rgba(41,211,68,.45);

  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .9rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg, var(--n64g) 0%, #22c03f 100%);
  color:#0b1a10;                /* readable on green */
  font-weight:700;
  letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
  box-shadow:
    0 6px 18px var(--n64g-glow),
    inset 0 0 0 1px rgba(255,255,255,.2);
  cursor:pointer;
  transition:transform .06s ease, box-shadow .15s ease, filter .15s ease;
}

.n64-green:hover{
  filter:saturate(1.05) brightness(1.02);
  box-shadow:
    0 8px 22px var(--n64g-glow),
    inset 0 0 0 1px rgba(255,255,255,.25);
}

.n64-green:active{
  transform:translateY(1px);
  background:linear-gradient(180deg, var(--n64g-dark) 0%, #1aa734 100%);
}

.n64-green:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.25),
    0 8px 22px var(--n64g-glow);
}

/* optional: size/spacing parity with your other action buttons */
.car-actions .n64-green{
  min-width:112px;
}
/* Make the green button wider */
.car-actions .n64-green{
  min-width: 168px;   /* was 112px */
  padding: .6rem 1.1rem;
}

/* Optional: even wider on big screens */
@media (min-width: 1024px){
  .car-actions .n64-green{ min-width: 200px; }
}

/* Optional: full-width on very small screens for tap targets */
@media (max-width: 420px){
  .car-actions{
    gap: .6rem;
    flex-wrap: wrap;
  }
  .car-actions .n64-green{
    width: 100%;
  }
}
/* ────────────────────────────────────────────────────────────────────────────
   💗 **TASK (in pink): Loosen spacing on Garage cards for mobile**
   - More padding inside cards
   - Bigger gaps between rows, meta, and actions
   - Friendlier wrap for the inline meta row
   - Slightly larger inter-card spacing
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	/* space between cards */
	#garageList {
		gap: 16px !important; /* was 12px */
	}

	/* inner padding + radius for the card */
	.car-card {
		padding: 16px 16px 14px !important; /* was ~12px */
		border-radius: 12px !important;     /* small bump */
	}

	/* more breathing room between major chunks */
	.car-row,
	.car-main {
		gap: 12px !important; /* was 8px */
	}

	/* title line: a touch more margin below */
	.car-card .car-main > div > div[style*="font-weight:600"] {
		margin-bottom: 10px !important; /* was 6px */
	}

	/* inline meta row: wrap sooner + larger gaps + a smidge more bottom space */
	.car-card .car-main > div > div[style*="display:flex"] {
		gap: 12px !important;            /* was ~14px desktop / tighter mobile */
		margin-bottom: 10px !important;  /* was 8px */
		flex-wrap: wrap !important;      /* ensure clean wraps on narrow phones */
	}

	/* action buttons row: bigger gaps + margin top */
	.car-actions {
		gap: 12px !important;          /* was ~8px */
		margin-top: 10px !important;   /* was .5rem ≈ 8px */
	}

	/* checkbox gets a little air so it isn't cramped against title */
	.car-select {
		margin-right: 4px !important;
	}
}