@import url("../NeedCar/css/NeedCar.css");
/*
:root {
:  --bg: #eef2f9;
:  --text: #1a1f2e;
:  --text-muted: rgba(26, 31, 46, 0.55);
:  --glass: rgba(255, 255, 255, 0.42);
:  --glass-border: rgba(255, 255, 255, 0.65);
:  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.12);
:  --accent: #0a84ff;
:  --accent-soft: rgba(10, 132, 255, 0.18);
:  --radius-lg: 22px;
:  --radius-md: 16px;
:  --radius-sm: 12px;
:  --font: "Noto Sans SC", "DM Sans", system-ui, -apple-system, sans-serif;
:  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
:  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
:}
:
:*,
:*::before,
:*::after {
:  box-sizing: border-box;
:}
:
:html {
:  scroll-behavior: smooth;
:}
:
:body {
:  margin: 0;
:  min-height: 100dvh;
:  font-family: var(--font);
:  color: var(--text);
:  background: var(--bg);
:  -webkit-font-smoothing: antialiased;
:  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
:    max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
:  overflow-x: hidden;
:}
:
:.ambient {
:  position: fixed;
:  inset: 0;
:  z-index: -1;
:  pointer-events: none;
:  overflow: hidden;
:}
:
:.blob {
:  position: absolute;
:  border-radius: 50%;
:  filter: blur(80px);
:  opacity: 0.55;
:  animation: float 18s var(--ease-smooth) infinite;
:}
:
:.blob-a {
:  width: min(70vw, 420px);
:  height: min(70vw, 420px);
:  background: radial-gradient(circle, #a8d8ff 0%, #c4b5fd 50%, transparent 70%);
:  top: -10%;
:  left: -15%;
:  animation-delay: 0s;
:}
:
:.blob-b {
:  width: min(60vw, 380px);
:  height: min(60vw, 380px);
:  background: radial-gradient(circle, #fecdd3 0%, #fde68a 45%, transparent 70%);
:  top: 35%;
:  right: -20%;
:  animation-delay: -6s;
:}
:
:.blob-c {
:  width: min(55vw, 340px);
:  height: min(55vw, 340px);
:  background: radial-gradient(circle, #bbf7d0 0%, #7dd3fc 40%, transparent 70%);
:  bottom: -5%;
:  left: 20%;
:  animation-delay: -12s;
:}
:
:@keyframes float {
:  0%,
:  100% {
:    transform: translate(0, 0) scale(1);
:  }
:  33% {
:    transform: translate(4%, 3%) scale(1.05);
:  }
:  66% {
:    transform: translate(-3%, 5%) scale(0.98);
:  }
:}
:
:.glass-panel {
:  background: var(--glass);
:  backdrop-filter: saturate(180%) blur(24px);
:  -webkit-backdrop-filter: saturate(180%) blur(24px);
:  border: 1px solid var(--glass-border);
:  border-radius: var(--radius-lg);
:  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.8);
:}
:
:.hero {
:  display: grid;
:  grid-template-columns: auto 1fr;
:  gap: clamp(16px, 4vw, 28px);
:  align-items: center;
:  padding: clamp(18px, 4vw, 28px);
:  margin-bottom: 20px;
:  animation: rise 0.7s var(--ease-smooth) both;
:}
:
:@keyframes rise {
:  from {
:    opacity: 0;
:    transform: translateY(16px);
:  }
:  to {
:    opacity: 1;
:    transform: translateY(0);
:  }
:}
:
:.hero-visual {
:  position: relative;
:}
:
:.hero-brand {
:  display: flex;
:  flex-wrap: wrap;
:  align-items: center;
:  gap: clamp(8px, 2vw, 12px);
:}
:
:.hero-logo-img {
:  display: block;
:  height: auto;
:  max-height: clamp(40px, 9vw, 56px);
:  width: auto;
:  max-width: min(42vw, 200px);
:  object-fit: contain;
:  transition: transform 0.35s var(--ease-spring);
:}
:
:.hero:hover .hero-logo-img {
:  transform: scale(1.02);
:}
:
:.hero-text h1 {
:  margin: 0;
:  font-size: clamp(1.75rem, 5vw, 2.25rem);
:  font-weight: 700;
:  letter-spacing: -0.02em;
:}
:
:.stack {
:  max-width: 720px;
:  margin: 0 auto;
:  display: flex;
:  flex-direction: column;
:  gap: 16px;
:}
:
:.card {
:  padding: clamp(18px, 4vw, 22px);
:  animation: card-in 0.55s var(--ease-smooth) both;
:}
:
:.card[data-animate] {
:  animation-delay: calc(var(--i, 0) * 0.06s);
:}
:
:.card:nth-child(1) {
:  --i: 1;
:}
:.card:nth-child(2) {
:  --i: 2;
:}
:.card:nth-child(3) {
:  --i: 3;
:}
:.card:nth-child(4) {
:  --i: 4;
:}
:.card:nth-child(5) {
:  --i: 5;
:}
:.card:nth-child(6) {
:  --i: 6;
:}
:.card:nth-child(7) {
:  --i: 7;
:}
:
:@keyframes card-in {
:  from {
:    opacity: 0;
:    transform: translateY(12px);
:  }
:  to {
:    opacity: 1;
:    transform: translateY(0);
:  }
:}
:
:.section-title {
:  display: flex;
:  align-items: center;
:  gap: 10px;
:  margin: 0 0 12px;
:  font-size: 1.05rem;
:  font-weight: 600;
:}
:
:.icon-dot {
:  width: 8px;
:  height: 8px;
:  border-radius: 50%;
:  background: linear-gradient(135deg, var(--accent), #5ac8fa);
:  box-shadow: 0 0 12px var(--accent-soft);
:}
:
:.badge {
:  font-size: 0.7rem;
:  font-weight: 500;
:  padding: 3px 8px;
:  border-radius: 999px;
:  background: var(--accent-soft);
:  color: var(--accent);
:}
:
:.hint {
:  margin: 0 0 12px;
:  font-size: 0.82rem;
:  color: var(--text-muted);
:}
:
:.hint.subtle {
:  margin-top: 10px;
:  margin-bottom: 0;
:}
:
:.reason-mode-shell {
:  margin-top: 18px;
:  padding-top: 16px;
:  border-top: 1px solid rgba(255, 255, 255, 0.45);
:}
:
:.matter-fulltext-block {
:  margin-top: 14px;
:  padding-top: 14px;
:  border-top: 1px solid rgba(255, 255, 255, 0.45);
:}
:
:.matter-fulltext-block[hidden] {
:  display: none !important;
:}
:
:.matter-template-wrap[hidden] {
:  display: none !important;
:}
:
:.reason-mode-seg {
:  margin-top: 0;
:}
:
:.reason-pair-grid {
:  margin-top: 10px;
:  padding: 8px;
:  border-radius: var(--radius-md);
:  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
:}
:
:.reason-pair-grid.is-mode-merge {
:  background: rgba(10, 132, 255, 0.07);
:  border: 1px solid rgba(10, 132, 255, 0.28);
:  box-shadow: 0 4px 20px rgba(10, 132, 255, 0.06);
:}
:
:.reason-pair-grid.is-mode-split {
:  background: rgba(255, 159, 10, 0.08);
:  border: 1px solid rgba(255, 159, 10, 0.3);
:  box-shadow: 0 4px 20px rgba(255, 149, 0, 0.07);
:}
:
:.reason-pair-grid.is-mode-split .reason-pair:first-child {
:  padding-left: 10px;
:  border-left: 3px solid #0a84ff;
:}
:
:.reason-pair-grid.is-mode-split .reason-pair:last-child {
:  padding-left: 10px;
:  border-left: 3px solid #ff9f0a;
:}
:
:.reason-pair {
:  display: flex;
:  flex-direction: column;
:  gap: 10px;
:}
:
:.reason-custom-reveal {
:  margin-top: 2px;
:  padding-top: 4px;
:  animation: card-in 0.35s var(--ease-smooth) both;
:}
:
:.reason-custom-reveal[hidden] {
:  display: none !important;
:}
:
:.textarea-glass {
:  resize: vertical;
:  min-height: 7rem;
:  line-height: 1.55;
:}
:
:.loc-live {
:  margin: 0;
:  min-height: 2.75rem;
:  padding: 10px 12px;
:  border-radius: var(--radius-sm);
:  font-size: 0.92rem;
:  font-weight: 500;
:  line-height: 1.45;
:  color: var(--text);
:  background: rgba(255, 255, 255, 0.4);
:  border: 1px solid rgba(255, 255, 255, 0.55);
:}
:
:.loc-live.is-empty {
:  color: var(--text-muted);
:  font-weight: 400;
:}
:
:.chip-row {
:  display: flex;
:  flex-wrap: wrap;
:  gap: 8px;
:  margin-bottom: 14px;
:}
:
:.chip {
:  appearance: none;
:  border: 1px solid rgba(255, 255, 255, 0.7);
:  background: rgba(255, 255, 255, 0.35);
:  padding: 10px 16px;
:  border-radius: 999px;
:  font: inherit;
:  font-size: 0.88rem;
:  font-weight: 500;
:  cursor: pointer;
:  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s, background 0.2s;
:}
:
:.chip:hover {
:  transform: translateY(-1px);
:  box-shadow: 0 6px 20px rgba(10, 132, 255, 0.12);
:}
:
:.chip.is-active {
:  background: linear-gradient(135deg, rgba(10, 132, 255, 0.22), rgba(90, 200, 250, 0.2));
:  border-color: rgba(10, 132, 255, 0.35);
:  color: #0066cc;
:  box-shadow: 0 4px 16px rgba(10, 132, 255, 0.15);
:}
:
:.field-label {
:  display: block;
:  font-size: 0.78rem;
:  font-weight: 500;
:  color: var(--text-muted);
:  margin-bottom: 6px;
:}
:
:.input-glass {
:  width: 100%;
:  padding: 14px 16px;
:  border-radius: var(--radius-md);
:  border: 1px solid rgba(255, 255, 255, 0.6);
:  background: rgba(255, 255, 255, 0.45);
:  font: inherit;
:  font-size: 1rem;
:  color: var(--text);
:  outline: none;
:  transition: border-color 0.2s, box-shadow 0.25s, transform 0.2s;
:}
:
:.input-glass:focus {
:  border-color: rgba(10, 132, 255, 0.45);
:  box-shadow: 0 0 0 4px var(--accent-soft);
:}
:
:.select-like {
:  cursor: pointer;
:  appearance: none;
:  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
:  background-repeat: no-repeat;
:  background-position: right 14px center;
:  padding-right: 36px;
:}
:
:.segmented {
:  display: grid;
:  grid-template-columns: repeat(3, 1fr);
:  gap: 8px;
:  padding: 5px;
:  border-radius: var(--radius-md);
:  background: rgba(255, 255, 255, 0.35);
:  border: 1px solid rgba(255, 255, 255, 0.5);
:}
:
:.seg-btn {
:  border: none;
:  background: transparent;
:  padding: 12px 8px;
:  border-radius: var(--radius-sm);
:  font: inherit;
:  font-size: 0.92rem;
:  font-weight: 500;
:  cursor: pointer;
:  color: var(--text-muted);
:  transition: background 0.25s, color 0.25s, transform 0.2s var(--ease-spring);
:}
:
:.seg-btn:hover {
:  color: var(--text);
:}
:
:.seg-btn.is-active {
:  background: rgba(255, 255, 255, 0.85);
:  color: var(--text);
:  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
:}
:
:.grid-2 {
:  display: grid;
:  gap: 12px;
:}
:
:@media (min-width: 540px) {
:  .grid-2 {
:    grid-template-columns: 1fr 1fr;
:  }
:}
:
:.floating {
:  display: flex;
:  flex-direction: column;
:  gap: 6px;
:}
:
:.floating span:first-child {
:  font-size: 0.78rem;
:  font-weight: 500;
:  color: var(--text-muted);
:}
:
:.vehicle-grid {
:  display: grid;
:  grid-template-columns: 1fr 1fr;
:  gap: clamp(10px, 3vw, 20px);
:  align-items: start;
:}
:
:.vehicle-pick {
:  display: flex;
:  flex-direction: column;
:  align-items: center;
:  gap: 6px;
:  margin: 0;
:  padding: 0;
:  cursor: pointer;
:  text-align: center;
:}
:
:.vehicle-pick input {
:  position: absolute;
:  width: 1px;
:  height: 1px;
:  padding: 0;
:  margin: -1px;
:  overflow: hidden;
:  clip: rect(0, 0, 0, 0);
:  white-space: nowrap;
:  border: 0;
:}
:
:.vehicle-img {
:  display: block;
:  width: 100%;
:  max-width: min(100%, 360px);
:  margin: 0 auto;
:  aspect-ratio: 4 / 3;
:  height: auto;
:  object-fit: cover;
:  object-position: center;
:  border-radius: 18px;
:  box-shadow: 0 8px 28px rgba(26, 31, 46, 0.1);
:  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s, outline-color 0.2s;
:}
:
:.vehicle-pick:hover .vehicle-img {
:  transform: scale(1.02);
:}
:
:.vehicle-pick input:focus-visible + .vehicle-img {
:  outline: 3px solid var(--accent);
:  outline-offset: 3px;
:}
:
:.vehicle-pick input:checked + .vehicle-img {
:  outline: 3px solid var(--accent);
:  outline-offset: 3px;
:  box-shadow: 0 14px 40px rgba(10, 132, 255, 0.22);
:}
:
:.vehicle-plate {
:  font-size: clamp(0.95rem, 2.8vw, 1.05rem);
:  font-weight: 700;
:  color: var(--text);
:  letter-spacing: 0.02em;
:}
:
:.vehicle-model {
:  font-size: 0.82rem;
:  color: var(--text-muted);
:}
:
:@media (min-width: 640px) {
:  .vehicle-img {
:    max-width: min(100%, 420px);
:  }
:}
:
:.driver-row {
:  display: flex;
:  flex-wrap: wrap;
:  gap: 8px;
:}
:
:.driver-btn {
:  flex: 1 1 calc(50% - 4px);
:  min-width: 120px;
:  padding: 14px 12px;
:  border-radius: var(--radius-md);
:  border: 1px solid rgba(255, 255, 255, 0.6);
:  background: rgba(255, 255, 255, 0.4);
:  font: inherit;
:  font-size: 0.95rem;
:  font-weight: 500;
:  cursor: pointer;
:  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s, border-color 0.2s;
:}
:
:@media (min-width: 600px) {
:  .driver-btn {
:    flex: 1 1 calc(25% - 6px);
:  }
:}
:
:.driver-btn:hover {
:  transform: translateY(-1px);
:}
:
:.driver-btn.is-active {
:  border-color: rgba(10, 132, 255, 0.4);
:  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(10, 132, 255, 0.12));
:  box-shadow: 0 4px 16px rgba(10, 132, 255, 0.12);
:}
:
:.preview-card {
:  position: relative;
:  overflow: hidden;
:}
:
:.preview {
:  display: block;
:  width: 100%;
:  min-height: 4.5em;
:  margin: 0 0 18px;
:  padding: 16px 18px;
:  border-radius: var(--radius-md);
:  background: rgba(255, 255, 255, 0.55);
:  border: 1px solid rgba(255, 255, 255, 0.7);
:  font-size: 1rem;
:  line-height: 1.65;
:  white-space: pre-wrap;
:  word-break: break-word;
:}
:
:.btn-primary {
:  position: relative;
:  width: 100%;
:  border: none;
:  border-radius: 999px;
:  padding: 16px 24px;
:  font: inherit;
:  font-size: 1.05rem;
:  font-weight: 600;
:  color: #fff;
:  cursor: pointer;
:  overflow: hidden;
:  background: linear-gradient(135deg, #0a84ff 0%, #5ac8fa 50%, #0a84ff 100%);
:  background-size: 200% 100%;
:  box-shadow: 0 8px 28px rgba(10, 132, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
:  transition: transform 0.2s var(--ease-spring), box-shadow 0.25s;
:}
:
:.btn-primary:hover {
:  transform: scale(1.02);
:  box-shadow: 0 12px 36px rgba(10, 132, 255, 0.4);
:}
:
:.btn-primary:active {
:  transform: scale(0.98);
:}
:
:.btn-shine {
:  position: absolute;
:  inset: 0;
:  background: linear-gradient(
:    105deg,
:    transparent 0%,
:    rgba(255, 255, 255, 0.25) 45%,
:    transparent 55%
:  );
:  transform: translateX(-100%);
:  animation: shine 3.5s ease-in-out infinite;
:}
:
:@keyframes shine {
:  0%,
:  60% {
:    transform: translateX(-100%);
:  }
:  100% {
:    transform: translateX(100%);
:  }
:}
:
:.btn-label {
:  position: relative;
:  z-index: 1;
:}
:
:.toast {
:  margin: 12px 0 0;
:  min-height: 1.25em;
:  font-size: 0.88rem;
:  color: var(--accent);
:  text-align: center;
:}
:
:.toast.is-error {
:  color: #c00;
:}
:
:.foot {
:  max-width: 720px;
:  margin: 20px auto 0;
:  padding: 14px 18px;
:  text-align: center;
:  color: var(--text-muted);
:  font-size: 0.78rem;
:}
:
:.foot-rules {
:  text-align: left;
:  max-width: 38em;
:  margin: 0 auto;
:}
:
:.foot-rules-title {
:  margin: 0 0 10px;
:  font-weight: 600;
:  color: var(--text);
:  font-size: 0.82rem;
:  text-align: center;
:}
:
:.foot-rules-list {
:  margin: 0;
:  padding-left: 1.2em;
:  line-height: 1.55;
:  font-size: 0.76rem;
:}
:
:.foot-rules-list li {
:  margin-bottom: 5px;
:}
:
:@media (min-width: 768px) {
:  body {
:    padding-left: max(24px, env(safe-area-inset-left));
:    padding-right: max(24px, env(safe-area-inset-right));
:  }
:
:  .stack {
:    max-width: 800px;
:  }
:}
:
:@media (min-width: 1024px) {
:  .hero {
:    max-width: 900px;
:    margin-left: auto;
:    margin-right: auto;
:  }
:
:  .stack,
:  .foot {
:    max-width: 880px;
:  }
:}
:
:@media (prefers-reduced-motion: reduce) {
:  *,
:  *::before,
:  *::after {
:    animation-duration: 0.01ms !important;
:    animation-iteration-count: 1 !important;
:    transition-duration: 0.01ms !important;
:  }
:}
*/