.eyebrow { color: var(--cyan-300); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.card, .car-card, .metric-card, .form-card, .history-card {
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgb(255 255 255 / 4%), transparent), var(--ink-850);
  box-shadow: 0 12px 28px rgb(0 0 0 / 13%);
}
.card, .car-card, .form-card, .history-card { padding: 18px; }
.metric-card { position: relative; overflow: hidden; padding: 18px; min-height: 132px; }
.metric-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--cyan-500); }
.metric-card.warning::before { background: var(--orange-500); }
.metric-card.positive::before { background: var(--green-500); }
.metric-card.negative::before { background: var(--red-500); }
.metric-label { color: var(--fog-300); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.metric-value { display: block; margin-top: 18px; font-variant-numeric: tabular-nums; font-size: clamp(1.6rem, 7vw, 2.7rem); letter-spacing: -.045em; }
.card-list, .metric-grid { display: grid; gap: 12px; }
.car-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; }
.car-card__body { display: grid; min-width: 0; gap: 10px; }
.car-card__photo, .car-photo { width: 76px; height: 76px; border-radius: 12px; }
.car-card__photo img, .car-photo { display: grid; object-fit: cover; }
.car-card__photo img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.car-photo--detail { width: 112px; height: 112px; flex: 0 0 auto; }
.car-photo--fallback { background: var(--ink-700); object-fit: cover; }
.car-card h2 { margin: 0; font-size: 1.2rem; }
.car-card__meta { margin: 0; color: var(--fog-300); }
.status { display: inline-flex; align-items: center; width: fit-content; min-height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: rgb(242 152 67 / 14%); color: #ffc184; font-size: .75rem; font-weight: 800; }
.status--in_stock { border-color: rgb(55 201 130 / 72%); background: rgb(55 201 130 / 12%); color: #8ce8b5; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.actions button.button-secondary { width: auto; }
.copy-status { min-height: 1.4em; margin: 10px 0 0; color: var(--cyan-300); font-size: .82rem; }
.button-secondary { display: inline-grid; place-items: center; min-height: var(--tap); padding: 0 16px; border: 1px solid var(--ink-700); border-radius: var(--radius-sm); background: rgb(255 255 255 / 2%); color: var(--fog-100); font-weight: 700; }
.money-flow { border-left: 2px solid var(--cyan-500); padding-left: 18px; }
.money-flow > * { position: relative; }
.money-flow > *::before { content: ""; position: absolute; width: 9px; height: 9px; left: -24px; top: .4em; border-radius: 50%; background: var(--orange-500); box-shadow: 0 0 0 5px var(--ink-850); }
.form-card form > p { display: grid; gap: 7px; margin-bottom: 16px; }
.car-form-fields { display: grid; gap: 0 14px; }
.car-form-fields > p { display: grid; min-width: 0; gap: 7px; margin-bottom: 16px; }
.sts-fieldset { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.sts-fieldset legend { margin-bottom: 8px; color: var(--fog-100); font-weight: 800; }
.sts-disclosure { max-width: 720px; margin-bottom: 16px; color: var(--fog-300); font-size: .9rem; }
.sts-upload-grid { display: grid; min-width: 0; gap: 12px; }
.sts-upload-card {
  display: grid;
  min-width: 0;
  gap: 10px;
  padding: 15px;
  border: 1px solid var(--ink-700);
  border-left: 4px solid var(--ink-500);
  border-radius: var(--radius-md);
  background: var(--ink-900);
}
.sts-upload-card--front { border-left-color: var(--cyan-500); }
.sts-upload-card__head { display: flex; align-items: center; gap: 10px; }
.sts-upload-card__head span { flex: 0 0 auto; padding: 4px 7px; border-radius: 6px; background: rgb(38 198 207 / 12%); color: var(--cyan-300); font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.sts-upload-card__head strong { min-width: 0; font-size: .95rem; }
.sts-upload-card input[type="file"] { min-width: 0; max-width: 100%; padding: 5px; }
.sts-upload-card input[type="file"]::file-selector-button { min-height: var(--tap); margin-right: 10px; border: 0; border-radius: 8px; padding: 0 12px; background: var(--ink-700); color: var(--fog-100); font-weight: 700; }
.sts-upload-status { min-height: 22px; margin: 0; color: var(--fog-300); font-size: .82rem; }
.sts-upload-card[data-state="uploading"], .sts-upload-card[data-state="recognizing"] { border-left-color: var(--orange-500); }
.sts-upload-card[data-state="ready"] { border-left-color: var(--green-500); }
.sts-upload-card[data-state="invalid"], .sts-upload-card[data-state="recognition_failed"] { border-left-color: var(--red-500); }
.sts-upload-card[data-state="ready"] .sts-upload-status { color: var(--green-500); }
.sts-upload-card[data-state="invalid"] .sts-upload-status, .sts-upload-card[data-state="recognition_failed"] .sts-upload-status { color: #ffaaaa; }
label { color: var(--fog-300); font-size: .82rem; font-weight: 700; }
input, select, textarea {
  width: 100%;
  min-height: var(--tap);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  background: var(--ink-950);
  color: var(--fog-100);
  padding: 10px 12px;
}
.date-input { position: relative; display: block; }
.date-input > [data-date-input] { padding-right: 58px; font-variant-numeric: tabular-nums; letter-spacing: .035em; }
.date-picker-icon {
  position: absolute;
  z-index: 1;
  inset: 1px 1px 1px auto;
  display: grid;
  width: calc(var(--tap) - 2px);
  border-left: 1px solid var(--ink-700);
  place-items: center;
  color: var(--cyan-300);
  font-size: 1.25rem;
  pointer-events: none;
}
.date-picker-native {
  position: absolute;
  z-index: 2;
  inset: 0 0 0 auto;
  width: var(--tap);
  height: 100%;
  min-height: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.date-input:focus-within .date-picker-icon { background: rgb(38 198 207 / 10%); color: var(--fog-100); }
textarea { min-height: 110px; resize: vertical; }
.errorlist { margin: 5px 0; padding: 10px 12px; list-style: none; border-radius: 8px; background: rgb(239 98 98 / 13%); color: #ffaaaa; font-size: .85rem; }
.empty-state { padding: 36px 18px; border: 1px dashed var(--ink-700); border-radius: var(--radius-md); color: var(--fog-300); text-align: center; }
button:disabled { cursor: wait; opacity: .62; }
@media (min-width: 720px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } .card-list { grid-template-columns: repeat(2, 1fr); } .sts-upload-grid, .car-form-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .car-form-fields__wide { grid-column: 1 / -1; } }