:root {
  --bg: #07101d;
  --panel: #0e1b2d;
  --panel2: #132338;
  --line: #20334a;
  --text: #f4f7fb;
  --muted: #93a4ba;
  --accent: #2de2c5;
  --accent2: #00a8ff;
  --danger: #ff5864;
  --warn: #ffb648;
  --radius: 18px;
  --shadow: 0 18px 45px #0004;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color-scheme: dark;
}

/* Configurador móvil de pantalla completa y giro sin recortes */
.rotate-controls {
  display: none !important;
}
.vehicle-art img,
.exact-preview img {
  object-fit: contain;
  transform: none;
}
.vehicle-card:hover .vehicle-art img {
  transform: none;
}
.vehicle-rotator,
.exact-preview {
  touch-action: pan-y;
  user-select: none;
}
.garage-modal {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.garage-modal form {
  width: min(1180px, 100%);
  height: 100dvh;
  max-height: none;
  margin: 0 auto;
  padding: 34px clamp(18px, 4vw, 54px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.garage-modal .exact-vehicle {
  grid-template-columns: minmax(0, 2fr) minmax(260px, 0.7fr);
}
.garage-modal .exact-preview {
  min-height: clamp(320px, 48vh, 540px);
  cursor: grab;
}
.garage-modal .exact-preview.dragging {
  cursor: grabbing;
}
.config-rotate-hint {
  position: absolute;
  left: 50%;
  bottom: 15px;
  z-index: 4;
  transform: translateX(-50%);
  padding: 8px 12px;
  border: 1px solid #ffffff2b;
  border-radius: 99px;
  background: #050910c9;
  color: #dce9f5;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}
.paint-picker {
  max-width: 100%;
  overscroll-behavior-inline: contain;
}
.spec-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.spec-actions .source-badge {
  margin: 0;
}
.tire-pressure-modal label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.75rem;
}
.tire-pressure-modal input,
.tire-pressure-modal select {
  width: 100%;
  border: 1px solid #2c3a4e;
  border-radius: 11px;
  background: #070b12;
  color: #fff;
  padding: 12px;
}
.label-photo-input {
  margin: 16px 0;
  padding: 14px;
  border: 1px dashed #3d6370;
  border-radius: 14px;
  background: #0a1820;
}
.tire-photo-preview {
  position: relative;
  min-height: 180px;
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #060a10;
}
.tire-photo-preview img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
}
.tire-photo-preview span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 9px;
  border-radius: 99px;
  background: #07131ce8;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 850;
}
.pressure-trust-note {
  margin-top: 14px;
  padding: 12px;
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: #0b1c25;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .garage-modal,
  .garage-modal form {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
  .garage-modal form {
    padding: 20px 14px 110px;
  }
  .garage-modal .exact-vehicle {
    grid-template-columns: 1fr;
  }
  .garage-modal .exact-preview {
    min-height: 290px;
  }
  .garage-modal .exact-data {
    display: none;
  }
  .garage-modal menu {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    margin: 0;
    padding: 24px 14px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(transparent, #080c13 24%);
  }
  .paint-picker {
    width: 100%;
    overflow-x: auto;
  }
  .tire-fields {
    grid-template-columns: 1fr 1fr;
  }
}
* {
  box-sizing: border-box;
}
[hidden] { display: none !important; }
.auth-gate {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(400px, 0.82fr);
  background: #03070d;
  color: #f5f8fb;
  overflow: hidden;
}
.auth-visual {
  position: relative;
  min-width: 0;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 42%, rgba(72, 64, 255, 0.22), transparent 31%),
    radial-gradient(circle at 24% 68%, rgba(22, 232, 210, 0.16), transparent 32%),
    linear-gradient(145deg, #071321 0%, #03070d 52%, #0b0820 100%);
}
.auth-grid { position: absolute; inset: 0; z-index: 0; opacity: 0.34; background-image: linear-gradient(rgba(108, 155, 188, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 155, 188, 0.09) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, black, transparent 78%); }
.auth-orbit { position: absolute; z-index: 0; border: 1px solid rgba(90, 238, 224, 0.16); border-radius: 50%; animation: auth-orbit 22s linear infinite; }
.auth-orbit::before { content: ""; position: absolute; top: 13%; left: 10%; width: 8px; height: 8px; border-radius: 50%; background: #65f6e8; box-shadow: 0 0 24px #47e6dc; }
.auth-orbit-one { width: min(62vw, 850px); aspect-ratio: 1; left: 3%; bottom: -35%; }
.auth-orbit-two { width: min(42vw, 580px); aspect-ratio: 1; right: -8%; top: 5%; border-color: rgba(116, 93, 255, 0.2); animation-direction: reverse; animation-duration: 28s; }
.auth-brandline { position: absolute; z-index: 4; top: clamp(24px, 4vw, 46px); left: clamp(26px, 5vw, 66px); right: clamp(26px, 5vw, 66px); display: flex; align-items: center; gap: 13px; }
.auth-logo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(145deg, #69fff0, #238bff); color: #04101b; font-size: 1.45rem; font-weight: 950; box-shadow: 0 12px 38px rgba(20, 206, 206, 0.25); }
.auth-brandline > div { display: grid; line-height: 1.05; }
.auth-brandline small { color: #6ff5e9; font-size: 0.63rem; letter-spacing: 0.32em; font-weight: 900; }
.auth-brandline strong { margin-top: 4px; font-size: 0.86rem; letter-spacing: 0.13em; }
.auth-live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid rgba(108, 246, 231, 0.2); border-radius: 999px; background: rgba(5, 16, 25, 0.64); color: #a8bdcc; font-size: 0.64rem; letter-spacing: 0.12em; font-weight: 850; backdrop-filter: blur(12px); }
.auth-live i { width: 7px; height: 7px; border-radius: 50%; background: #5df0de; box-shadow: 0 0 0 5px rgba(93, 240, 222, 0.1), 0 0 14px #5df0de; animation: auth-pulse 2s ease-in-out infinite; }
.auth-story { position: absolute; z-index: 3; top: 17%; left: clamp(28px, 6vw, 82px); max-width: 700px; }
.auth-kicker { color: #70eee2; font-size: clamp(0.62rem, 0.85vw, 0.76rem); letter-spacing: 0.28em; font-weight: 900; }
.auth-story h2 { margin: 16px 0 13px; font-size: clamp(3rem, 4.8vw, 5.6rem); line-height: 0.91; letter-spacing: -0.06em; }
.auth-story h2 em { color: transparent; font-style: normal; background: linear-gradient(90deg, #68f8ea, #6d9eff 60%, #9a7cff); background-clip: text; -webkit-background-clip: text; }
.auth-story p { max-width: 560px; margin: 0; color: #9fb2c3; font-size: clamp(0.9rem, 1.2vw, 1.12rem); line-height: 1.65; }
.auth-diagonal-gallery { position: absolute; z-index: 1; top: 36%; left: 4%; right: -5%; height: 23%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; transform: skewX(-13deg); opacity: 0.78; }
.diagonal-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: 18px 23px; overflow: hidden; border: 1px solid rgba(140, 204, 226, 0.17); background: linear-gradient(145deg, rgba(15, 41, 62, 0.86), rgba(6, 12, 22, 0.6)); box-shadow: inset 0 0 45px rgba(55, 192, 210, 0.05); }
.diagonal-card::before { content: ""; position: absolute; inset: 0; opacity: 0.55; background: repeating-linear-gradient(90deg, transparent 0 32px, rgba(86, 231, 222, 0.08) 33px 34px), linear-gradient(25deg, transparent 30%, rgba(81, 224, 216, 0.16), transparent 70%); animation: auth-panel-flow 5s linear infinite; }
.diagonal-ecu { background: linear-gradient(145deg, rgba(33, 28, 91, 0.9), rgba(8, 13, 26, 0.62)); }
.diagonal-docs { background: linear-gradient(145deg, rgba(12, 70, 79, 0.82), rgba(5, 12, 21, 0.64)); }
.diagonal-card > * { position: relative; transform: skewX(13deg); }
.diagonal-card span { margin-bottom: auto; color: rgba(104, 244, 232, 0.72); font-size: 0.66rem; letter-spacing: 0.18em; }
.diagonal-card b { color: #eefbff; font-size: clamp(0.78rem, 1.2vw, 1.08rem); letter-spacing: 0.11em; }
.diagonal-card small { margin-top: 4px; color: #86a0b2; font-size: 0.7rem; }
.auth-car-stage { --auth-x: 0px; --auth-y: 0px; --auth-rotate: 0deg; position: absolute; z-index: 2; left: 3%; right: 2%; bottom: 2%; height: 45%; transform: translate3d(var(--auth-x), var(--auth-y), 0) rotate(var(--auth-rotate)); transition: transform 180ms ease-out; }
.auth-car-stage > img { position: absolute; z-index: 3; width: min(82%, 860px); max-height: 98%; left: 50%; bottom: 1%; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 34px 38px rgba(0, 0, 0, 0.64)) drop-shadow(0 0 54px rgba(39, 206, 218, 0.25)); animation: auth-car-float 5.2s ease-in-out infinite, auth-holo-flicker 8s steps(1) infinite; }
.auth-holographic-vehicle { mix-blend-mode: screen; }
.auth-telemetry-canvas { position: absolute; z-index: 2; inset: -18% -4% -8%; width: 108%; height: 126%; opacity: 0.74; pointer-events: none; }
.auth-holo-ring { position: absolute; z-index: 2; left: 50%; top: 55%; width: 68%; aspect-ratio: 1; border: 1px solid rgba(76, 241, 231, 0.2); border-radius: 50%; transform: translate(-50%, -50%) rotateX(72deg); box-shadow: 0 0 26px rgba(64, 225, 223, 0.08), inset 0 0 18px rgba(64, 225, 223, 0.08); animation: auth-ring-pulse 3.8s ease-out infinite; }
.auth-holo-ring.ring-two { width: 48%; border-color: rgba(122, 105, 255, 0.25); animation-delay: -1.9s; }
.auth-system-node { position: absolute; z-index: 5; width: 9px; height: 9px; border: 2px solid #ffe2a7; border-radius: 50%; background: #ff9d1c; box-shadow: 0 0 8px #ff9d1c, 0 0 0 0 rgba(255, 157, 28, 0.6); animation: auth-node-pulse 2.2s ease-out infinite; }
.node-power { left: 34%; top: 59%; }
.node-traction { left: 64%; top: 68%; animation-delay: -0.75s; }
.node-energy { left: 52%; top: 52%; animation-delay: -1.4s; }
.auth-road { position: absolute; z-index: 1; left: 4%; right: 4%; bottom: -42%; height: 86%; border: 1px solid rgba(74, 218, 217, 0.22); background: repeating-linear-gradient(90deg, transparent 0 12%, rgba(63, 202, 212, 0.1) 12.2% 12.35%), linear-gradient(rgba(11, 43, 57, 0.62), rgba(2, 7, 12, 0)); transform: perspective(500px) rotateX(67deg); box-shadow: inset 0 1px 0 rgba(93, 240, 222, 0.25); }
.auth-scan { position: absolute; z-index: 4; top: 3%; bottom: 0; left: 15%; width: 1px; background: linear-gradient(transparent, #61f8e9, transparent); box-shadow: 0 0 18px #52e9e1; animation: auth-scan 4.8s ease-in-out infinite; opacity: 0.7; }
.auth-data-chip { position: absolute; z-index: 5; display: grid; grid-template-columns: 31px 1fr; column-gap: 9px; min-width: 150px; padding: 10px 13px; border: 1px solid rgba(146, 201, 220, 0.18); border-radius: 13px; background: rgba(5, 14, 24, 0.72); box-shadow: 0 12px 38px rgba(0, 0, 0, 0.34); backdrop-filter: blur(13px); animation: auth-chip-float 4.2s ease-in-out infinite; }
.auth-data-chip > span { grid-row: 1 / 3; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: rgba(74, 235, 219, 0.11); color: #65f2e4; }
.auth-data-chip b { color: #edf8fa; font-size: 0.72rem; letter-spacing: 0.14em; }
.auth-data-chip small { margin-top: 2px; color: #8097aa; font-size: 0.58rem; }
.chip-location { left: 5%; top: 32%; }
.chip-health { right: 4%; top: 8%; animation-delay: -1.7s; }
.chip-protected { right: 8%; bottom: 2%; animation-delay: -3s; }
.auth-capabilities { position: absolute; z-index: 5; left: clamp(28px, 5vw, 66px); bottom: clamp(22px, 3.5vw, 42px); display: flex; align-items: center; gap: 12px; color: #71899b; font-size: 0.59rem; letter-spacing: 0.16em; font-weight: 900; }
.auth-capabilities i { width: 3px; height: 3px; border-radius: 50%; background: #55e9dc; }
.auth-panel {
  position: relative; z-index: 8; align-self: center; display: flex; flex-direction: column; justify-content: center; width: calc(100% - 38px); min-width: 0; min-height: calc(100dvh - 38px); margin: 19px; padding: clamp(30px, 4vw, 58px); border: 1px solid rgba(131, 176, 203, 0.17); border-radius: 26px; background: linear-gradient(155deg, rgba(14, 25, 39, 0.96), rgba(5, 10, 17, 0.97)); box-shadow: -20px 0 80px rgba(0, 0, 0, 0.3), 0 24px 60px rgba(0, 0, 0, 0.42); backdrop-filter: blur(20px);
}
.auth-panel::before { content: ""; position: absolute; inset: 13% auto 13% -1px; width: 1px; background: linear-gradient(transparent, #44ddd0 47%, transparent); opacity: 0.7; }
.auth-panel > * { width: min(100%, 430px); margin-left: auto; margin-right: auto; }
.auth-panel-head { display: none; align-items: center; gap: 10px; margin-bottom: 25px; }
.auth-mobile-logo { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg, #6effef, #308dff); color: #03101a; font-weight: 950; }
.auth-panel-head > div { display: grid; line-height: 1; }
.auth-panel-head small { color: #62eadd; font-size: 0.55rem; letter-spacing: 0.25em; }
.auth-panel-head b { margin-top: 4px; font-size: 0.7rem; letter-spacing: 0.12em; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 38px; border: 1px solid rgba(117, 152, 178, 0.12); border-radius: 15px; background: #040910; }
.auth-tabs button { min-height: 44px; padding: 10px; border: 0; border-radius: 11px; background: transparent; color: #718399; font-weight: 850; cursor: pointer; transition: 180ms ease; }
.auth-tabs button:hover { color: #c8d9e5; }
.auth-tabs button.active { background: linear-gradient(145deg, #14283a, #10202f); color: #68f5e7; box-shadow: inset 0 0 0 1px rgba(101, 239, 226, 0.1); }
.auth-form { display: grid; gap: 16px; }
.auth-form .eyebrow { margin-bottom: -7px; color: #5fe9dc; font-size: 0.66rem; letter-spacing: 0.25em; }
.auth-form h1 { margin: 0; font-size: clamp(2.2rem, 3.5vw, 3.5rem); line-height: 1; letter-spacing: -0.045em; }
.auth-form > p:not(.eyebrow) { margin: -5px 0 10px; color: #8799aa; line-height: 1.6; }
.auth-form label { display: grid; gap: 8px; color: #c4d0da; font-size: 0.82rem; font-weight: 750; }
.auth-form input:not([type="checkbox"]) { width: 100%; min-height: 56px; padding: 0 16px; border: 1px solid #253749; border-radius: 13px; background: rgba(3, 9, 15, 0.82); color: white; font-size: 0.96rem; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.auth-form input:not([type="checkbox"]):hover { border-color: #38546a; background: #060e17; }
.auth-form input:focus { outline: none; border-color: #42dbc9; box-shadow: 0 0 0 4px rgba(45, 226, 197, 0.09), inset 0 0 18px rgba(45, 226, 197, 0.03); }
.auth-check { display: flex !important; grid-template-columns: auto 1fr; align-items: flex-start; gap: 9px !important; color: #93a3b7 !important; font-size: 0.85rem; font-weight: 500 !important; }
.auth-check input { margin-top: 3px; }
.auth-submit { display: flex; align-items: center; justify-content: space-between; min-height: 57px; margin-top: 5px; padding: 7px 8px 7px 19px; border: 0; border-radius: 15px; background: linear-gradient(100deg, #4ee6d7, #42a8ff 58%, #7766f9); color: #02121a; font-weight: 900; box-shadow: 0 16px 38px rgba(36, 164, 215, 0.2); cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; }
.auth-submit b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(3, 15, 25, 0.88); color: #6af4e7; font-size: 1.25rem; }
.auth-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 48px rgba(43, 188, 222, 0.3); }
.auth-submit:active { transform: translateY(0); }
.auth-message { min-height: 22px; margin-top: 12px; color: #55ecdd; }
.auth-message.error { color: #ff7d8d; }
.auth-trust { display: flex; justify-content: space-between; gap: 8px; margin-top: 34px; padding: 17px 0 14px; border-top: 1px solid rgba(126, 155, 180, 0.13); color: #6f8294; font-size: 0.61rem; letter-spacing: 0.04em; }
.auth-local-note { display: block; color: #536477; font-size: 0.66rem; line-height: 1.45; }
@keyframes auth-orbit { to { transform: rotate(360deg); } }
@keyframes auth-pulse { 50% { opacity: 0.55; transform: scale(0.8); } }
@keyframes auth-scan { 0%, 100% { left: 14%; opacity: 0; } 18%, 82% { opacity: 0.7; } 50% { left: 84%; } }
@keyframes auth-car-float { 50% { transform: translateX(-50%) translateY(-7px); } }
@keyframes auth-chip-float { 50% { transform: translateY(-5px); } }
@keyframes auth-ring-pulse { 0% { opacity: 0; transform: translate(-50%, -50%) rotateX(72deg) scale(0.7); } 35% { opacity: 0.7; } 100% { opacity: 0; transform: translate(-50%, -50%) rotateX(72deg) scale(1.16); } }
@keyframes auth-node-pulse { 70% { box-shadow: 0 0 10px #ff9d1c, 0 0 0 14px rgba(255, 157, 28, 0); } 100% { box-shadow: 0 0 10px #ff9d1c, 0 0 0 0 rgba(255, 157, 28, 0); } }
@keyframes auth-holo-flicker { 0%, 92%, 96%, 100% { opacity: 1; } 93% { opacity: 0.72; } 97% { opacity: 0.86; } }
@keyframes auth-panel-flow { to { background-position: 68px 0, 120px 0; } }
.profile-wrap { margin-top: auto; display: grid; gap: 8px; }
.sign-out { border: 0; background: transparent; color: var(--muted); text-align: left; padding: 4px 12px 10px; cursor: pointer; }
.empty-garage {
  min-height: min(620px, calc(100dvh - 150px));
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 42px 24px;
  border: 1px dashed rgba(45, 226, 197, 0.35);
  border-radius: 28px;
  background: radial-gradient(circle at center, rgba(45, 226, 197, 0.09), transparent 48%), #09111d;
}
.empty-garage-icon { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 18px; border-radius: 28px; background: linear-gradient(145deg, #31e9d1, #397cff); color: #05111b; font-size: 3rem; font-weight: 300; box-shadow: 0 22px 60px rgba(37, 193, 208, 0.25); }
.empty-garage h2 { margin: 6px 0 8px; font-size: clamp(2rem, 5vw, 3.6rem); }
.empty-garage > p:not(.eyebrow) { max-width: 620px; margin: 0 auto 22px; color: var(--muted); line-height: 1.6; }
.empty-garage small { margin-top: 14px; color: var(--muted); }
body.has-no-vehicle #inicio > :not(.empty-garage) { display: none !important; }
html {
  background: var(--bg);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background:
    radial-gradient(circle at 70% -15%, #133452 0, transparent 38%), var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
}
button,
input,
textarea {
  font: inherit;
}
.app-shell {
  min-height: 100vh;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 250px;
  padding: 26px 18px;
  background: #091422e8;
  border-right: 1px solid var(--line);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 800;
  padding: 0 8px 28px;
}
.brandmark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: grid;
  place-items: center;
  color: #031018;
  font-size: 1.25rem;
  box-shadow: 0 0 25px #2de2c544;
}
.brand small,
.profile small,
.side-card small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}
.sidebar nav {
  display: grid;
  gap: 6px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 13px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  font-weight: 650;
}
.nav span {
  width: 22px;
  text-align: center;
  font-size: 1.1rem;
}
.nav b {
  margin-left: auto;
  background: var(--danger);
  color: white;
  border-radius: 99px;
  font-size: 0.68rem;
  padding: 2px 7px;
}
.nav:hover,
.nav.active {
  background: #13253a;
  color: var(--text);
}
.nav.active {
  box-shadow: inset 3px 0 var(--accent);
}
.side-card {
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 13px;
  background: #0d2031;
  border: 1px solid #1b3f4a;
  border-radius: 13px;
}
.pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px #2de2c520;
}
.side-card strong {
  font-size: 0.78rem;
}
.profile {
  margin-top: 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  cursor: pointer;
  padding: 8px;
}
.profile > span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #1b3850;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.76rem;
}
.profile div {
  flex: 1;
}
.profile strong {
  font-size: 0.8rem;
}
main {
  margin-left: 250px;
  padding: 28px 42px 90px;
  max-width: 1600px;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}
.eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--accent);
  margin: 0 0 5px;
}
.topbar h1 {
  font-size: 1.55rem;
  margin: 0;
}
.top-actions {
  display: flex;
  gap: 10px;
}
.icon-btn,
.primary,
.secondary,
.ghost,
.text-btn,
.chip {
  border: 0;
  cursor: pointer;
}
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--panel);
  color: white;
  border: 1px solid var(--line);
  position: relative;
}
.icon-btn span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  top: 9px;
  right: 9px;
}
.primary,
.secondary {
  border-radius: 11px;
  padding: 11px 16px;
  font-weight: 750;
}
.primary {
  background: linear-gradient(135deg, var(--accent), #19b9ba);
  color: #031718;
  box-shadow: 0 9px 20px #2de2c51c;
}
.secondary {
  background: #15283d;
  color: var(--text);
  border: 1px solid #294059;
}
.ghost {
  background: transparent;
  color: var(--accent);
  padding: 0;
  text-align: left;
  font-weight: 700;
}
.text-btn {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}
.page {
  display: none;
  animation: fade 0.22s ease;
}
.page.active {
  display: block;
}
@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}
.vehicle-card {
  min-height: 250px;
  background: linear-gradient(110deg, #112a40, #0d1c2d 50%, #0c1928);
  border: 1px solid #1f3b54;
  border-radius: 24px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.vehicle-card:after {
  content: "";
  position: absolute;
  inset: auto -5% -60% 30%;
  height: 200px;
  background: #2de2c514;
  filter: blur(40px);
}
.vehicle-art {
  height: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #194461 0, #102338 55%, #0b1725 56%);
}
.road {
  position: absolute;
  inset: auto 0 0;
  height: 80px;
  background: #09111b;
}
.road:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    #8da1ae 0 40px,
    transparent 40px 76px
  );
  top: 38px;
}
.car {
  position: absolute;
  width: 260px;
  height: 72px;
  border-radius: 60px 95px 24px 18px;
  background: linear-gradient(170deg, #fafafa, #9ea8b1 70%);
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%);
  box-shadow: 0 18px 20px #0008;
}
.car:before {
  content: "";
  position: absolute;
  width: 160px;
  height: 55px;
  border-radius: 70px 85px 0 0;
  background: #d9e1e6;
  left: 46px;
  top: -37px;
}
.car-glass {
  position: absolute;
  width: 62px;
  height: 33px;
  background: linear-gradient(135deg, #47708b, #172938);
  left: 70px;
  top: -27px;
  z-index: 2;
  transform: skew(-22deg);
  border-radius: 25px 2px 3px;
}
.wheel {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 9px solid #17202b;
  border-radius: 50%;
  background: #798692;
  bottom: -15px;
  z-index: 3;
}
.w1 {
  left: 40px;
}
.w2 {
  right: 40px;
}
.vehicle-info {
  padding: 30px;
}
.status {
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}
.status.ok,
.ok-text {
  color: var(--accent);
}
.vehicle-info h2 {
  font-size: 2.2rem;
  margin: 8px 0 0;
}
.vehicle-info p {
  color: var(--muted);
  margin: 0 0 16px;
}
.plate {
  display: inline-block;
  border: 2px solid #637185;
  border-radius: 7px;
  background: #e9edf0;
  color: #13202d;
  padding: 5px 14px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.vehicle-stats {
  padding: 30px;
  display: grid;
  gap: 20px;
  border-left: 1px solid var(--line);
}
.vehicle-stats small,
.vehicle-stats strong {
  display: block;
}
.vehicle-stats small {
  color: var(--muted);
  font-size: 0.74rem;
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 38px 0 16px;
  gap: 20px;
}
.section-head h2 {
  font-size: 1.28rem;
  margin: 0;
}
.section-head.compact {
  margin: 0 0 14px;
}
.alert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.alert-card {
  display: flex;
  gap: 13px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  position: relative;
}
.alert-card.urgent {
  border-color: #5b2b38;
}
.alert-card.warning {
  border-color: #5b4630;
}
.alert-card.calm {
  border-color: #29495b;
}
.alert-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: #1d3043;
}
.urgent .alert-icon {
  background: #421d29;
  color: #ff7a83;
}
.warning .alert-icon {
  background: #4b361e;
  color: var(--warn);
}
.calm .alert-icon {
  background: #15344a;
  color: #65c8ff;
}
.alert-card h3 {
  font-size: 0.95rem;
  margin: 3px 0;
}
.alert-card p,
.alert-card strong {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}
.alert-card strong {
  color: var(--text);
  display: block;
  margin-top: 8px;
}
.tag {
  color: var(--accent);
  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.kebab {
  margin-left: auto;
  align-self: start;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 21px;
}
.score {
  font-size: 2rem;
  font-weight: 900;
  color: var(--accent);
}
.score small {
  font-size: 0.75rem;
  color: var(--muted);
}
.meter {
  height: 7px;
  border-radius: 10px;
  background: #1c2d40;
  overflow: hidden;
}
.meter i {
  height: 100%;
  display: block;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
}
.checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 18px;
  font-size: 0.78rem;
  color: #b8c7d6;
}
.checks .warn {
  color: var(--warn);
}
.bars {
  height: 145px;
  display: flex;
  align-items: end;
  gap: 12px;
  padding: 10px 5px 0;
}
.bars div {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  gap: 7px;
}
.bars i {
  width: 100%;
  height: var(--h);
  background: #1d3850;
  border-radius: 6px 6px 2px 2px;
}
.bars .current i {
  background: linear-gradient(var(--accent), #159caa);
}
.bars span {
  font-size: 0.65rem;
  color: var(--muted);
}
.gov {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gov > div {
  display: flex;
  gap: 15px;
  align-items: center;
}
.gov-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #143f42;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
}
.gov h2,
.gov p {
  margin: 0;
}
.gov p {
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 700px;
}
.filter-row {
  display: flex;
  gap: 7px;
}
.chip {
  background: #12253a;
  color: var(--muted);
  padding: 8px 13px;
  border-radius: 99px;
}
.chip.active {
  background: var(--accent);
  color: #041516;
}
.timeline {
  display: grid;
  gap: 12px;
}
.timeline article {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.timeline time {
  height: 67px;
  border: 1px solid #2d435b;
  border-radius: 13px;
  display: grid;
  place-items: center;
  align-content: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}
.timeline time b {
  font-size: 1.45rem;
  color: white;
  line-height: 1;
}
.timeline h3 {
  margin: 5px 0;
}
.timeline p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.tag.red,
.red-text {
  color: var(--danger);
}
.tag.amber,
.amber-text {
  color: var(--warn);
}
.tag.blue {
  color: #6ecbff;
}
.actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.small {
  padding: 8px 12px;
  font-size: 0.76rem;
}
.catalogue {
  margin-top: 16px;
}
.catalogue h2 {
  margin-top: 0;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.catalog-grid span {
  background: #122338;
  padding: 11px 13px;
  border-radius: 10px;
  color: #c1ccda;
  font-size: 0.78rem;
}
.catalog-grid span:before {
  content: "✓";
  color: var(--accent);
  margin-right: 8px;
}
.map-wrap {
  height: 430px;
  border: 1px solid #28445b;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: #12273a;
}
.map-grid {
  position: absolute;
  inset: -50px;
  background-color: #0e2132;
  background-image:
    linear-gradient(34deg, transparent 46%, #244258 47% 49%, transparent 50%),
    linear-gradient(120deg, transparent 46%, #1c374c 47% 49%, transparent 50%);
  background-size:
    150px 120px,
    190px 140px;
  opacity: 0.8;
}
.route-line {
  position: absolute;
  width: 470px;
  height: 160px;
  border: 5px solid transparent;
  border-top-color: var(--accent2);
  border-radius: 50%;
  left: 25%;
  top: 35%;
  transform: rotate(-9deg);
  filter: drop-shadow(0 0 5px #00a8ff);
}
.map-pin {
  position: absolute;
  left: 53%;
  top: 43%;
  width: 48px;
  height: 48px;
  background: var(--accent);
  border: 5px solid white;
  border-radius: 50% 50% 50% 10%;
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 30px #0009;
}
.map-pin span {
  transform: rotate(45deg);
  font-size: 1.2rem;
}
.map-label {
  position: absolute;
  left: calc(53% + 48px);
  top: 40%;
  background: #07121ee8;
  border: 1px solid #335069;
  padding: 10px 14px;
  border-radius: 11px;
  box-shadow: var(--shadow);
}
.map-label small {
  display: block;
  color: var(--muted);
}
.map-controls {
  position: absolute;
  right: 18px;
  top: 18px;
  display: grid;
}
.map-controls button {
  width: 36px;
  height: 36px;
  border: 1px solid #32495d;
  background: #0a1724;
  color: white;
  font-size: 1.1rem;
}
.stat-grid,
.money-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
  margin: 15px 0;
}
.stat-grid article,
.money-grid article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 17px;
}
.stat-grid small,
.money-grid small {
  color: var(--muted);
}
.stat-grid strong,
.money-grid strong {
  display: block;
  font-size: 1.15rem;
  margin-top: 6px;
}
.stat-grid p,
.money-grid p {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 4px 0;
}
.money-grid strong {
  font-size: 1.55rem;
}
.money-grid p {
  color: var(--accent);
}
.green-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}
.muted {
  color: var(--muted);
}
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.switch-row div small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
}
.switch {
  position: relative;
  width: 42px;
  height: 23px;
}
.switch input {
  opacity: 0;
}
.switch i {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: #27374a;
  cursor: pointer;
}
.switch i:after {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}
.switch input:checked + i {
  background: var(--accent);
}
.switch input:checked + i:after {
  transform: translateX(19px);
}
.device {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #122438;
  border-radius: 13px;
  margin: 18px 0;
}
.device > span {
  font-size: 1.7rem;
  color: var(--accent);
}
.device small {
  display: block;
  color: var(--muted);
}
.wide {
  width: 100%;
}
.table-panel {
  margin-top: 15px;
}
.table-scroll {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 650px;
}
th,
td {
  text-align: left;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
}
th {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.pill {
  background: #163049;
  border-radius: 20px;
  padding: 4px 9px;
  color: #9cd8ff;
}
.odometer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 15px;
}
.odometer div {
  padding: 10px 24px;
  border-right: 1px solid var(--line);
}
.odometer div:last-child {
  border: 0;
}
.odometer small {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
}
.odometer strong {
  font-size: 1.65rem;
}
.odometer em {
  font-size: 0.7rem;
  color: var(--muted);
  font-style: normal;
}
.accent {
  color: var(--accent);
}
.maintenance-list {
  display: grid;
  gap: 12px;
}
.maintenance-list article {
  display: grid;
  grid-template-columns: 55px 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 18px;
  border-radius: var(--radius);
}
.m-icon {
  width: 48px;
  height: 48px;
  background: #142a40;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 1.3rem;
}
.maintenance-list h3,
.maintenance-list p {
  margin: 0;
}
.maintenance-list p,
.maintenance-list small {
  color: var(--muted);
  font-size: 0.72rem;
}
.maintenance-list .meter {
  margin: 10px 0 5px;
}
.maintenance-list > b {
  font-size: 0.65rem;
  color: var(--accent2);
}
.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.vehicle-record-center {
  margin-bottom: 16px;
}
.record-intro {
  max-width: 720px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}
.record-status-grid,
.official-portal-grid,
.record-form {
  display: grid;
  gap: 10px;
}
.record-status-grid {
  grid-template-columns: repeat(4, 1fr);
  margin: 15px 0;
}
.record-status-grid > div {
  display: grid;
  gap: 4px;
  min-height: 96px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #07111b;
}
.record-status-grid small,
.record-status-grid span,
.privacy-note {
  color: var(--muted);
  font-size: 0.68rem;
}
.amis-assistant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 18px;
  align-items: center;
  margin: 16px 0;
  padding: 18px;
  border: 1px solid rgba(62, 224, 214, 0.3);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(29, 224, 211, 0.09), rgba(13, 20, 34, 0.94));
}
.amis-assistant h3 { margin: 4px 0 6px; }
.amis-assistant p,
.amis-assist-status,
.amis-vin-fallback { color: var(--muted); line-height: 1.5; }
.amis-assistant-actions { display: grid; gap: 9px; }
.amis-assist-status,
.amis-vin-fallback { grid-column: 1 / -1; }
.amis-assist-status { padding-top: 10px; border-top: 1px solid var(--line); }
.amis-vin-fallback {
  padding: 12px;
  border: 1px solid rgba(255, 184, 77, 0.45);
  border-radius: 12px;
  background: rgba(255, 184, 77, 0.07);
}
.amis-vin-fallback code {
  display: block;
  margin: 8px 0 4px;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
  user-select: all;
}
.record-status-grid strong {
  color: var(--accent);
  font-size: 0.8rem;
}
.official-portal-grid {
  grid-template-columns: repeat(3, 1fr);
}
.official-portal-grid a {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid #315064;
  border-radius: 11px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
}
.official-portal-grid small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 600;
}
.record-form {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  align-items: end;
  margin-top: 14px;
}
.record-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.7rem;
}
.record-form input,
.record-form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #2c3a4e;
  border-radius: 9px;
  background: #050a11;
  color: #fff;
}
.record-note,
.record-evidence {
  grid-column: span 2;
}
.record-evidence input {
  padding: 7px;
}
.evidence-button {
  width: fit-content;
  margin-top: 5px;
  padding: 5px 8px;
  border: 1px solid #315064;
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 800;
}
.evidence-missing {
  display: block;
  margin-top: 5px;
  color: #ffb45d;
  font-size: 0.66rem;
}
.privacy-note {
  margin: 12px 0;
}
.record-history {
  display: grid;
  gap: 8px;
}
.record-history article {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border-top: 1px solid var(--line);
}
.record-history p,
.record-history small {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
}
.doc-grid article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 19px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: start;
}
.doc-grid article > span {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #142a40;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.doc-grid h3,
.doc-grid p {
  margin: 3px 0;
}
.doc-grid p,
.doc-grid small {
  color: var(--muted);
  font-size: 0.7rem;
}
.doc-grid b {
  font-size: 0.63rem;
}
.doc-grid .add-doc {
  display: flex;
  min-height: 135px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-style: dashed;
  cursor: pointer;
}
.add-doc h3,
.add-doc p {
  margin: 3px;
  text-align: center;
}
.mobile-nav {
  display: none;
}
dialog {
  border: 1px solid #294159;
  border-radius: 20px;
  background: #0d1b2b;
  color: var(--text);
  width: min(520px, calc(100% - 28px));
  padding: 0;
  box-shadow: 0 30px 80px #000a;
}
dialog::backdrop {
  background: #020710b8;
  backdrop-filter: blur(4px);
}
dialog form {
  padding: 28px;
  position: relative;
}
dialog h2 {
  margin: 0 0 20px;
}
.close {
  position: absolute;
  right: 16px;
  top: 14px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 1.5rem;
  cursor: pointer;
}
label {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  font-size: 0.76rem;
  color: #c3cfdd;
  font-weight: 700;
}
input,
textarea {
  border: 1px solid #2a4057;
  background: #081522;
  border-radius: 10px;
  padding: 11px;
  color: white;
  outline: none;
}
input:focus,
textarea:focus {
  border-color: var(--accent);
}
textarea {
  height: 85px;
  resize: vertical;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
menu {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
}
#toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: #eafcf8;
  color: #07201d;
  border-left: 5px solid var(--accent);
  padding: 13px 18px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-weight: 700;
  transform: translateY(90px);
  opacity: 0;
  transition: 0.25s;
  z-index: 60;
}
#toast.show {
  transform: none;
  opacity: 1;
}
@media (max-width: 1050px) {
  .sidebar {
    width: 205px;
  }
  .brand small {
    display: none;
  }
  main {
    margin-left: 205px;
    padding: 24px;
  }
  .vehicle-card {
    grid-template-columns: 1.2fr 1fr;
  }
  .vehicle-stats {
    display: none;
  }
  .alert-grid,
  .doc-grid {
    grid-template-columns: 1fr 1fr;
  }
  .alert-card:last-child {
    grid-column: span 2;
  }
  .catalog-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .auth-gate { display: block; min-height: 100dvh; overflow: auto; }
  .auth-visual { min-height: 43dvh; }
  .auth-brandline { top: 19px; left: 18px; right: 18px; }
  .auth-logo { width: 40px; height: 40px; border-radius: 13px; font-size: 1.2rem; }
  .auth-brandline small { font-size: 0.52rem; }
  .auth-brandline strong { font-size: 0.68rem; }
  .auth-live { padding: 7px 9px; font-size: 0.51rem; }
  .auth-story { top: 30%; left: 21px; right: 21px; }
  .auth-kicker { font-size: 0.53rem; }
  .auth-story h2 { margin: 10px 0 0; font-size: clamp(2.45rem, 12vw, 4rem); line-height: 0.88; }
  .auth-story p { display: none; }
  .auth-car-stage { left: 0; right: 0; bottom: -5%; height: 44%; }
  .auth-car-stage > img { width: min(96%, 560px); }
  .auth-telemetry-canvas { inset: -25% -10% -10%; width: 120%; height: 135%; }
  .auth-system-node { transform: scale(0.75); }
  .auth-data-chip { min-width: 119px; padding: 7px 9px; transform: scale(0.84); }
  .chip-location { left: -3%; top: 20%; }
  .chip-health { right: -4%; top: -10%; }
  .chip-protected, .auth-capabilities { display: none; }
  .auth-diagonal-gallery { top: 48%; left: -8%; right: -8%; height: 24%; gap: 5px; opacity: 0.52; }
  .diagonal-card { padding: 9px 11px; }
  .diagonal-card b { font-size: 0.57rem; }
  .diagonal-card small, .diagonal-card span { display: none; }
  .auth-panel { width: 100%; min-height: 57dvh; margin: -1px 0 0; padding: 29px 20px max(30px, env(safe-area-inset-bottom)); border: 0; border-radius: 25px 25px 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45); }
  .auth-panel::before { inset: 0 12% auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, #4de5d7, transparent); }
  .auth-panel-head { display: flex; }
  .auth-tabs { margin-bottom: 27px; }
  .auth-form h1 { font-size: 2.35rem; }
  .auth-trust { margin-top: 26px; flex-wrap: wrap; }
  body {
    padding-bottom: 0;
  }
  .sidebar {
    display: none;
  }
  main {
    margin: 0;
    padding: 18px 14px 35px;
  }
  .topbar {
    margin-bottom: 18px;
  }
  .topbar h1 {
    font-size: 1.2rem;
  }
  .top-actions .icon-btn {
    display: none;
  }
  .primary {
    padding: 10px 12px;
  }
  .vehicle-card {
    min-height: 210px;
    grid-template-columns: 1fr 1fr;
  }
  .vehicle-art {
    min-width: 0;
  }
  .car {
    transform: translateX(-50%) scale(0.62);
    bottom: 44px;
  }
  .vehicle-info {
    padding: 18px;
  }
  .vehicle-info h2 {
    font-size: 1.6rem;
  }
  .plate {
    font-size: 0.75rem;
  }
  .alert-grid,
  .dashboard-grid,
  .stat-grid,
  .money-grid,
  .doc-grid {
    grid-template-columns: 1fr;
  }
  .alert-card:last-child {
    grid-column: auto;
  }
  .section-head {
    align-items: flex-start;
    margin-top: 26px;
  }
  .section-head > .text-btn,
  .filter-row {
    display: none;
  }
  .checks {
    grid-template-columns: 1fr;
  }
  .gov {
    align-items: flex-start;
    gap: 16px;
    flex-direction: column;
  }
  .timeline article {
    grid-template-columns: 58px 1fr;
    gap: 12px;
    padding: 15px;
  }
  .timeline time {
    height: 58px;
  }
  .catalog-grid {
    grid-template-columns: 1fr;
  }
  .map-wrap {
    height: 360px;
  }
  .map-label {
    left: 18px;
    top: auto;
    bottom: 18px;
  }
  .map-pin {
    left: 48%;
    top: 40%;
  }
  .route-line {
    left: 5%;
    width: 340px;
  }
  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-grid {
    margin-top: 13px;
  }
  .odometer {
    grid-template-columns: 1fr;
  }
  .odometer div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .maintenance-list article {
    grid-template-columns: 45px 1fr;
  }
  .maintenance-list > b {
    grid-column: 2;
  }
  .doc-grid article {
    grid-template-columns: 42px 1fr;
  }
  .doc-grid article > b {
    grid-column: 2;
  }
  .mobile-nav {
    display: flex;
    position: static;
    width: 100%;
    margin: 0;
    background: #091421;
    border-top: 1px solid var(--line);
    padding: 12px max(8px, env(safe-area-inset-right))
      calc(12px + env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    justify-content: space-around;
    box-sizing: border-box;
  }
  .mobile-nav button {
    border: 0;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center;
    gap: 1px;
    font-size: 1.05rem;
  }
  .mobile-nav button.active {
    color: var(--accent);
  }
  .mobile-nav small {
    font-size: 0.6rem;
  }
  .top-actions .primary {
    font-size: 0;
    width: 42px;
    height: 42px;
    padding: 0;
  }
  .top-actions .primary:first-letter {
    font-size: 1.2rem;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .vehicle-info p {
    font-size: 0.7rem;
  }
}
@media (max-width: 420px) {
  .vehicle-card {
    grid-template-columns: 0.9fr 1.1fr;
  }
  .vehicle-art .car {
    left: 55%;
    transform: translateX(-50%) scale(0.52);
  }
  .stat-grid {
    grid-template-columns: 1fr;
  }
  .actions {
    flex-wrap: wrap;
  }
}
.fuel-source-note {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(100deg, #183027, #102032);
  border: 1px solid #285142;
  border-radius: 16px;
  padding: 16px 18px;
}
.fuel-source-note > span {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #1f493d;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 900;
}
.fuel-source-note div {
  flex: 1;
}
.fuel-source-note p {
  margin: 2px 0;
  color: var(--muted);
  font-size: 0.78rem;
}
.fuel-source-note > b {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--warn);
}
.source-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  padding: 4px 8px;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.source-badge.estimated {
  background: #15364d;
  color: #6ecbff;
}
.source-badge.confirmed {
  background: #143d38;
  color: var(--accent);
}
.source-badge.partial {
  background: #46361e;
  color: var(--warn);
}
.fuel-kpis {
  margin-top: 15px;
}
.fuel-layout {
  grid-template-columns: 1.1fr 0.9fr;
}
.fuel-calculator label {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-top: 18px;
}
.fuel-calculator input[type="range"] {
  grid-column: 1/-1;
  width: 100%;
  padding: 0;
  accent-color: var(--accent);
  border: 0;
}
.fuel-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.fuel-settings div,
.reconcile div {
  background: #122338;
  border-radius: 11px;
  padding: 12px;
}
.fuel-settings small,
.reconcile small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
}
.calculation-result {
  background: linear-gradient(110deg, #143d38, #11263a);
  border: 1px solid #245048;
  border-radius: 15px;
  padding: 16px;
}
.calculation-result small,
.calculation-result strong {
  display: block;
}
.calculation-result strong {
  font-size: 2rem;
  color: var(--accent);
}
.calculation-result p {
  margin: 2px 0;
  color: var(--muted);
  font-size: 0.72rem;
}
.reconcile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.confidence {
  display: flex;
  justify-content: space-between;
  margin: 18px 0 8px;
  font-size: 0.78rem;
}
.compact-copy {
  font-size: 0.74rem;
  margin-bottom: 0;
}
.fuel-alerts {
  margin-top: 15px;
}
.gps-pending {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-color: #5b4630;
}
.gps-pending > div {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gps-pending h2,
.gps-pending p {
  margin: 0;
}
.gps-pending p {
  color: var(--muted);
  font-size: 0.78rem;
  max-width: 780px;
}
.buy-link {
  text-decoration: none;
  white-space: nowrap;
}
.steren-setup {
  grid-column: 1 / -1;
}
.steren-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.steren-form label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}
.steren-form input,
.steren-form select {
  width: 100%;
  margin-top: 7px;
}
.steren-form button {
  align-self: end;
}
.steren-state {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.steren-state > div {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px;
  background: #091522a8;
}
.steren-state small,
.steren-state strong {
  display: block;
}
.steren-state small {
  color: var(--muted);
  margin-bottom: 5px;
}
.connector-command {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #3c5365;
  border-radius: 14px;
  background: #06101b;
}
.connector-command small,
.connector-command code,
.connector-command p {
  display: block;
}
.connector-command code {
  margin-top: 8px;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.connector-command p,
.privacy-note {
  color: var(--muted);
  font-size: 0.75rem;
}
@media (max-width: 760px) {
  .fuel-source-note,
  .gps-pending {
    align-items: flex-start;
    flex-direction: column;
  }
  .fuel-source-note > b {
    align-self: flex-start;
  }
  .fuel-layout {
    grid-template-columns: 1fr;
  }
  .reconcile {
    grid-template-columns: 1fr;
  }
  .fuel-settings {
    grid-template-columns: 1fr;
  }
  .steren-form,
  .steren-state {
    grid-template-columns: 1fr;
  }
  .gps-pending > div {
    align-items: flex-start;
  }
  .buy-link {
    width: 100%;
    text-align: center;
  }
}
.live-status {
  display: grid;
  grid-template-columns: 10px 1fr;
  column-gap: 8px;
  align-items: center;
  background: #10263a;
  border: 1px solid #24435c;
  border-radius: 12px;
  padding: 9px 13px;
}
.live-status i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px #2de2c51a;
}
.live-status span {
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--accent);
}
.live-status small {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.62rem;
}
.gps-pilot-console {
  grid-column: 1 / -1;
  background:
    radial-gradient(circle at 88% 12%, rgba(45, 226, 197, 0.12), transparent 30%),
    linear-gradient(145deg, #0c1826, #0a121e);
}
.gps-source-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}
.gps-source-strip div {
  padding: 12px 14px;
  border: 1px solid #274256;
  border-radius: 14px;
  background: #0e1d2b;
}
.gps-source-strip small,
.gps-source-strip strong { display: block; }
.gps-source-strip small { color: var(--muted); margin-bottom: 4px; }
.gps-pilot-form { display: grid; gap: 13px; margin-top: 16px; }
.gps-pilot-form label { display: grid; gap: 7px; color: #c8d4df; font-size: 0.82rem; font-weight: 700; }
.gps-pilot-form textarea { resize: vertical; min-height: 74px; }
.gps-pilot-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gps-pilot-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gps-pilot-actions button { flex: 1 1 220px; }
.gps-test-result {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(45, 226, 197, 0.42);
  border-radius: 14px;
  background: rgba(45, 226, 197, 0.08);
}
.gps-test-result strong { color: var(--accent); }
.gps-test-result small { color: var(--muted); }
.gps-test-history { display: grid; gap: 8px; margin-top: 14px; }
.gps-test-history article {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 11px 13px;
  background: #0c1723;
  border: 1px solid #21384b;
  border-radius: 12px;
}
.gps-test-history article div { display: grid; gap: 2px; }
.gps-test-history article small { color: var(--muted); }
.gps-test-history article span { color: #b9c8d5; }
.gps-test-history article b { color: var(--accent); }
.connector-boundary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #263b4d;
  color: #c8d4df;
}
.connector-boundary span { color: #f2b85f; text-align: right; }
@media (max-width: 720px) {
  .gps-source-strip,
  .gps-pilot-fields { grid-template-columns: 1fr; }
  .gps-test-history article { grid-template-columns: 1fr auto; }
  .gps-test-history article b { grid-column: 2; grid-row: 1; }
  .connector-boundary { display: grid; }
  .connector-boundary span { text-align: left; }
}
.telemetry-warning {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  background: #422f19;
  border: 1px solid #735127;
  color: #ffd398;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 14px;
  font-size: 0.75rem;
}
.cluster {
  min-height: 350px;
  background: radial-gradient(circle at 50% 50%, #17324a, #091421 70%);
  border: 1px solid #28445b;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr 0.75fr 1fr;
  align-items: center;
  padding: 25px;
  box-shadow:
    inset 0 0 60px #0008,
    var(--shadow);
}
.gauge {
  text-align: center;
}
.gauge-face {
  width: min(250px, 100%);
  aspect-ratio: 1;
  margin: auto;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, #0b1926 0 52%, transparent 53%),
    conic-gradient(
      from 240deg,
      var(--accent) 0 65%,
      var(--danger) 65% 78%,
      #17283a 78% 100%
    );
  box-shadow:
    inset 0 0 20px #000,
    0 0 30px #00a8ff12;
}
.gauge-face:after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid #4c708433;
  border-radius: 50%;
}
.gauge-arc {
  position: absolute;
  inset: 18px;
  border: 2px dashed #7790a655;
  border-radius: 50%;
}
.needle {
  position: absolute;
  width: 40%;
  height: 3px;
  background: linear-gradient(90deg, var(--danger), white);
  right: 50%;
  top: calc(50% - 1px);
  transform-origin: right center;
  transform: rotate(-120deg);
  border-radius: 9px;
  transition: transform 0.55s ease;
  z-index: 2;
}
.needle:after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  right: -6px;
  top: -5px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 10px white;
}
.gauge-value {
  z-index: 3;
  text-shadow: 0 0 15px #000;
  display: grid;
  place-items: center;
}
.gauge-value strong {
  font-size: 2.4rem;
  line-height: 1;
}
.gauge-value span {
  font-size: 0.7rem;
  color: var(--muted);
}
.gauge > small {
  display: block;
  margin: 10px 0 5px;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 800;
}
.cluster-center {
  text-align: center;
}
.gear {
  font-size: 2.5rem;
  color: var(--accent);
  font-weight: 900;
}
.vehicle-state span,
.vehicle-state strong {
  display: block;
}
.vehicle-state span {
  color: var(--muted);
  font-size: 0.7rem;
}
.vehicle-state strong {
  font-size: 1.3rem;
}
.mini-readouts {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}
.mini-readouts div {
  background: #0c1c2a;
  border: 1px solid #213a50;
  border-radius: 9px;
  padding: 7px;
}
.mini-readouts small,
.mini-readouts strong {
  display: block;
}
.mini-readouts small {
  color: var(--muted);
  font-size: 0.6rem;
}
.telemetry-stats {
  margin-top: 14px;
}
.ecu-layout {
  grid-template-columns: 1.25fr 0.75fr;
}
.dtc-card {
  display: grid;
  grid-template-columns: 85px 1fr;
  gap: 15px;
  background: #271820;
  border: 1px solid #5a2936;
  border-radius: 15px;
  padding: 16px;
}
.dtc-code {
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  background: #461e29;
  border-radius: 11px;
  display: grid;
  place-items: center;
  min-height: 74px;
}
.dtc-card h3,
.dtc-card p {
  margin: 5px 0;
}
.dtc-card p {
  color: var(--muted);
  font-size: 0.76rem;
}
.dtc-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.dtc-meta span {
  background: #351c25;
  border-radius: 99px;
  padding: 4px 8px;
  font-size: 0.62rem;
  color: #eeb5bd;
}
.diagnostic-rule {
  font-size: 0.66rem;
  color: var(--muted);
  margin-top: 12px;
}
.diagnostic-rule span {
  color: var(--accent);
  font-weight: 900;
}
.diagnostic-rule i {
  margin: 0 5px;
}
.capability-list {
  margin: 14px 0;
}
.capability-list div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
}
.capability-list b {
  text-align: right;
  font-size: 0.66rem;
}
.remote-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 15px;
}
.remote-panel > div:first-child {
  display: flex;
  align-items: center;
  gap: 14px;
}
.remote-panel h2,
.remote-panel p {
  margin: 0;
}
.remote-panel p {
  color: var(--muted);
  font-size: 0.76rem;
  max-width: 720px;
}
.remote-quality {
  min-width: 180px;
  background: #122338;
  border-radius: 12px;
  padding: 12px;
}
.remote-quality small,
.remote-quality strong,
.remote-quality span {
  display: block;
}
.remote-quality strong {
  font-size: 1.4rem;
  color: var(--accent);
}
.remote-quality span {
  font-size: 0.62rem;
  color: var(--muted);
}
@media (max-width: 900px) {
  .cluster {
    grid-template-columns: 1fr 1fr;
  }
  .cluster-center {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .mini-readouts {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  .cluster {
    grid-template-columns: 1fr 1fr;
    min-height: auto;
    padding: 16px;
    gap: 10px;
  }
  .gauge-face {
    width: 145px;
  }
  .gauge-value strong {
    font-size: 1.7rem;
  }
  .cluster-center {
    grid-column: 1/-1;
  }
  .mini-readouts {
    grid-template-columns: repeat(3, 1fr);
  }
  .ecu-layout {
    grid-template-columns: 1fr;
  }
  .dtc-card {
    grid-template-columns: 1fr;
  }
  .dtc-code {
    min-height: 54px;
  }
  .remote-panel {
    align-items: flex-start;
    flex-direction: column;
  }
  .remote-panel > div:first-child {
    align-items: flex-start;
  }
  .remote-quality {
    width: 100%;
  }
  .telemetry-warning {
    font-size: 0.7rem;
  }
}
@media (max-width: 390px) {
  .gauge-face {
    width: 125px;
  }
  .gauge-value strong {
    font-size: 1.45rem;
  }
  .cluster {
    padding: 12px;
  }
  .mini-readouts {
    grid-template-columns: 1fr;
  }
}

/* Premium visual system */
:root {
  --bg: #05070d;
  --panel: #0b101a;
  --panel2: #111827;
  --line: #202a3a;
  --text: #f7f9ff;
  --muted: #8895a8;
  --accent: #5df5e6;
  --accent2: #27a7ff;
  --violet: #8f68ff;
  --radius: 20px;
  --shadow: 0 24px 70px #0009;
}
body {
  background:
    radial-gradient(circle at 72% 4%, #152344 0, transparent 31%),
    radial-gradient(circle at 40% 92%, #122e30 0, transparent 28%), var(--bg);
  min-height: 100vh;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    linear-gradient(#ffffff04 1px, transparent 1px),
    linear-gradient(90deg, #ffffff04 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}
.sidebar {
  background: linear-gradient(180deg, #080b12f5, #090e18e8);
  border-right-color: #ffffff10;
  box-shadow: 24px 0 70px #0005;
}
.brandmark {
  background: linear-gradient(145deg, #fff, #90fff3 40%, #4e8fff);
  box-shadow: 0 0 35px #5df5e640;
}
.nav {
  border: 1px solid transparent;
}
.nav:hover,
.nav.active {
  background: linear-gradient(90deg, #14202d, #101722);
  border-color: #273445;
  color: #fff;
}
.nav.active {
  box-shadow:
    inset 3px 0 var(--accent),
    0 12px 32px #0004;
}
.topbar {
  padding: 8px 0;
}
.topbar h1 {
  font-size: clamp(1.5rem, 2vw, 2rem);
  letter-spacing: -0.04em;
}
.primary {
  background: linear-gradient(135deg, #8dfff4, #35d9dc 56%, #42aaff);
  box-shadow: 0 12px 28px #25d9dc25;
  transition:
    0.2s transform,
    0.2s box-shadow;
}
.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px #25d9dc40;
}
.panel,
.alert-card,
.stat-grid article,
.money-grid article,
.timeline article {
  background: linear-gradient(145deg, #0f1622e8, #090e17e8);
  border-color: #ffffff12;
  box-shadow: 0 18px 50px #0004;
  backdrop-filter: blur(18px);
}
.vehicle-card {
  min-height: 390px;
  grid-template-columns: minmax(440px, 1.55fr) minmax(250px, 0.72fr) minmax(
      190px,
      0.48fr
    );
  background: linear-gradient(112deg, #0d1625, #080c14 55%, #101827);
  border: 1px solid #52637a4a;
  border-radius: 30px;
  isolation: isolate;
  box-shadow:
    0 34px 90px #000b,
    0 0 0 1px #ffffff05 inset;
}
.vehicle-card:before {
  content: "DIGITAL GARAGE  /  01";
  position: absolute;
  left: 26px;
  top: 22px;
  z-index: 4;
  color: #d9ffff8f;
  font-size: 0.58rem;
  letter-spacing: 0.23em;
  font-weight: 900;
}
.vehicle-card:after {
  inset: -30% 35% auto -10%;
  height: 330px;
  background: radial-gradient(circle, #29e5ed25, transparent 62%);
  filter: blur(15px);
  z-index: -1;
}
.vehicle-art {
  height: 100%;
  min-height: 390px;
  background: #0b1018;
  isolation: isolate;
  overflow: hidden;
}
.vehicle-art:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 60%, #080c14),
    linear-gradient(0deg, #080c14 0, transparent 42%);
  z-index: 2;
  pointer-events: none;
}
.vehicle-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.03);
  transition: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vehicle-card:hover .vehicle-art img {
  transform: scale(1.07);
}
.ambient-ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 1px solid #5df5e638;
  border-radius: 50%;
  left: 10%;
  top: 9%;
  z-index: 1;
  box-shadow:
    0 0 80px #5df5e615,
    inset 0 0 80px #8f68ff12;
  animation: orbit 12s linear infinite;
}
.ambient-ring:before,
.ambient-ring:after {
  content: "";
  position: absolute;
  border: 1px dashed #ffffff18;
  border-radius: 50%;
  inset: 25px;
}
.ambient-ring:after {
  inset: 65px;
  border-color: #8f68ff3b;
}
@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}
.vehicle-type-chip {
  position: absolute;
  z-index: 4;
  left: 25px;
  bottom: 23px;
  padding: 7px 12px;
  border: 1px solid #ffffff25;
  border-radius: 99px;
  background: #050a11a8;
  backdrop-filter: blur(12px);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #b9fff8;
}
.vehicle-info {
  padding: 38px 28px;
}
.identity-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 25%, #25344d, #080c13 70%);
  border: 1px solid #91fff065;
  box-shadow: 0 0 30px #4debd524;
  color: #f7ffff;
  font-size: 0.67rem;
  font-weight: 950;
  letter-spacing: 0.04em;
}
.vehicle-info h2 {
  font-size: clamp(2rem, 3vw, 3.25rem);
  letter-spacing: -0.055em;
  line-height: 1;
  margin: 20px 0 8px;
}
.vehicle-info p {
  font-size: 0.82rem;
}
.plate {
  border: 1px solid #ffffff70;
  background: linear-gradient(#fff, #dfe6ec);
  box-shadow: 0 8px 25px #0007;
}
.customize-btn {
  display: block;
  margin-top: 22px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 800;
  cursor: pointer;
}
.customize-btn:hover {
  color: #fff;
}
.vehicle-stats {
  background: #070b1194;
  backdrop-filter: blur(18px);
  border-left-color: #ffffff12;
  height: 100%;
  align-content: center;
}
.vehicle-stats strong {
  font-size: 1.05rem;
}
.signal {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9ba8b8;
  font-size: 0.68rem;
}
.signal i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 5px #ffb64816;
}
.alert-card {
  transition:
    0.22s transform,
    0.22s border-color;
}
.alert-card:hover {
  transform: translateY(-4px);
  border-color: #ffffff2b;
}
.eyebrow {
  background: linear-gradient(90deg, var(--accent), #8dbdff);
  background-clip: text;
  color: transparent;
}
.score,
.gear {
  filter: drop-shadow(0 0 12px #5df5e658);
}
.garage-modal {
  width: min(850px, calc(100% - 28px));
  background: linear-gradient(145deg, #101824, #070b12);
  border-color: #3c4d64;
  box-shadow: 0 35px 120px #000;
}
.garage-modal form {
  padding: 34px;
}
.modal-copy {
  color: var(--muted);
  margin: -12px 0 24px;
}
.garage-modal fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}
.garage-modal legend {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 900;
  color: #b8c5d5;
  margin-bottom: 10px;
}
.vehicle-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.vehicle-option {
  position: relative;
  padding: 0;
  overflow: hidden;
  border: 1px solid #273447;
  border-radius: 16px;
  background: #080d15;
  color: #fff;
  cursor: pointer;
  min-height: 120px;
}
.vehicle-option img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  filter: saturate(0.65);
  transition: 0.2s;
}
.vehicle-option span {
  position: absolute;
  left: 10px;
  bottom: 9px;
  background: #04070bc7;
  border: 1px solid #ffffff20;
  padding: 5px 9px;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 850;
}
.vehicle-option:hover img,
.vehicle-option.selected img {
  filter: saturate(1.1);
  transform: scale(1.04);
}
.vehicle-option.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px #5df5e618;
}
.brand-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.brand-option {
  aspect-ratio: 1;
  border: 1px solid #283548;
  border-radius: 50%;
  background: #0b121d;
  color: #aebaca;
  font-size: 0.62rem;
  font-weight: 900;
  cursor: pointer;
}
.brand-option:hover,
.brand-option.selected {
  border-color: var(--accent);
  color: #fff;
  background: radial-gradient(circle at 35% 25%, #263b55, #0a0e15 72%);
  box-shadow: 0 0 25px #5df5e620;
}
.garage-modal input {
  background: #070b12;
  border-color: #283548;
}
@media (max-width: 1100px) {
  .vehicle-card {
    grid-template-columns: 1.2fr 0.8fr;
  }
  .vehicle-stats {
    display: none;
  }
  .vehicle-art {
    min-height: 340px;
  }
}
@media (max-width: 760px) {
  .vehicle-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .vehicle-art {
    height: 245px;
    min-height: 245px;
  }
  .vehicle-art:before {
    background: linear-gradient(0deg, #090e17, transparent 55%);
  }
  .vehicle-info {
    padding: 22px;
  }
  .vehicle-info h2 {
    font-size: 2.25rem;
  }
  .identity-row {
    margin-top: -48px;
    position: relative;
    z-index: 5;
  }
  .brand-badge {
    width: 52px;
    height: 52px;
  }
  .vehicle-card:before {
    top: 14px;
    left: 16px;
  }
  .vehicle-type-chip {
    bottom: 54px;
  }
  .vehicle-picker {
    grid-template-columns: 1fr;
  }
  .vehicle-option {
    min-height: 95px;
  }
  .vehicle-option img {
    height: 115px;
  }
  .brand-picker {
    grid-template-columns: repeat(4, 1fr);
  }
  .garage-modal form {
    padding: 24px 18px;
  }
  .garage-modal {
    max-height: 90vh;
  }
  .garage-modal form {
    overflow: auto;
    max-height: 90vh;
  }
  .ambient-ring {
    width: 200px;
    height: 200px;
  }
  .panel,
  .alert-card {
    border-radius: 18px;
  }
}

.paint-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--paint, #fff);
  mix-blend-mode: color;
  opacity: var(--paint-opacity, 0);
  transition:
    0.35s background,
    0.35s opacity;
}
.vehicle-art[data-paint="jet-black"],
.exact-preview[data-paint="jet-black"] {
  --paint: #050608;
  --paint-opacity: 0.84;
}
.vehicle-art[data-paint="black-sapphire"],
.exact-preview[data-paint="black-sapphire"] {
  --paint: #101823;
  --paint-opacity: 0.76;
}
.vehicle-art[data-paint="mineral-white"],
.exact-preview[data-paint="mineral-white"] {
  --paint: #d8d2c5;
  --paint-opacity: 0.18;
}
.vehicle-art[data-paint="glacier-silver"],
.exact-preview[data-paint="glacier-silver"] {
  --paint: #82909b;
  --paint-opacity: 0.46;
}
.vehicle-art[data-paint="mineral-grey"],
.exact-preview[data-paint="mineral-grey"] {
  --paint: #333a41;
  --paint-opacity: 0.7;
}
.vehicle-art[data-paint="mediterranean-blue"],
.exact-preview[data-paint="mediterranean-blue"] {
  --paint: #0a3e70;
  --paint-opacity: 0.82;
}
.vehicle-art[data-paint="estoril-blue"],
.exact-preview[data-paint="estoril-blue"] {
  --paint: #0878c3;
  --paint-opacity: 0.8;
}
.vehicle-art[data-paint="sunset-orange"],
.exact-preview[data-paint="sunset-orange"] {
  --paint: #bd4820;
  --paint-opacity: 0.78;
}
.vehicle-art[data-paint="sparkling-brown"],
.exact-preview[data-paint="sparkling-brown"] {
  --paint: #4c3023;
  --paint-opacity: 0.76;
}
.vehicle-art[data-paint="dark-olive"],
.exact-preview[data-paint="dark-olive"] {
  --paint: #303927;
  --paint-opacity: 0.74;
}
.exact-vehicle {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  margin-bottom: 18px;
}
.exact-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid #314158;
  border-radius: 18px;
  min-height: 190px;
  background: #080d15;
}
.exact-preview img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  transition: 0.35s;
}
.exact-data {
  border: 1px solid #273548;
  border-radius: 18px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: #0a101a;
}
.exact-data div {
  flex: 1;
}
.exact-data strong,
.exact-data small {
  display: block;
}
.exact-data small {
  color: var(--muted);
  font-size: 0.72rem;
}
.exact-data > b {
  align-self: flex-start;
  color: var(--accent);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
}
.model-fields select {
  border: 1px solid #283548;
  background: #070b12;
  border-radius: 10px;
  padding: 11px;
  color: #fff;
  outline: none;
}
.paint-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.paint-option {
  border: 1px solid #283548;
  border-radius: 12px;
  background: #080d15;
  color: #aab6c6;
  min-height: 74px;
  padding: 8px 5px;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 5px;
}
.paint-option i {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--swatch);
  border: 2px solid #ffffff70;
  box-shadow:
    inset 0 0 10px #0005,
    0 4px 12px #0008;
}
.paint-option span {
  font-size: 0.58rem;
  line-height: 1.1;
}
.paint-option:hover,
.paint-option.selected {
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px #5df5e617;
}
.paint-name {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 0;
  color: #fff;
  font-weight: 800;
}
.paint-name small {
  color: var(--muted);
  font-weight: 600;
}
@media (max-width: 760px) {
  .exact-vehicle {
    grid-template-columns: 1fr;
  }
  .exact-preview {
    min-height: 175px;
  }
  .paint-picker {
    grid-template-columns: repeat(3, 1fr);
  }
  .paint-option {
    min-height: 68px;
  }
}

/* Visor táctil 360° y pintura visible */
.vehicle-rotator {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.vehicle-rotator.dragging {
  cursor: grabbing;
}
.vehicle-rotator img {
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.32s ease;
}
.vehicle-rotator img.switching {
  opacity: 0.35;
}
.rotate-hint {
  position: absolute;
  z-index: 5;
  top: 22px;
  right: 22px;
  padding: 7px 11px;
  border: 1px solid #ffffff1f;
  border-radius: 99px;
  background: #0509109c;
  backdrop-filter: blur(12px);
  color: #c8d7e5;
  font-size: 0.68rem;
  font-weight: 800;
}
.rotate-controls {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 19px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 34px minmax(110px, auto) 34px;
  align-items: center;
  border: 1px solid #ffffff25;
  border-radius: 99px;
  background: #050910d9;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px #0008;
  overflow: hidden;
}
.rotate-controls button {
  height: 34px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.35rem;
  cursor: pointer;
}
.rotate-controls button:hover {
  background: #5df5e622;
  color: var(--accent);
}
.rotate-controls span {
  text-align: center;
  color: #dce9f5;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.paint-layer {
  display: none;
}
.vehicle-art[data-paint="alpine-white"] img,
.exact-preview[data-paint="alpine-white"] img {
  filter: saturate(1.05) contrast(1.03);
}
.vehicle-art[data-paint="mineral-white"] img,
.exact-preview[data-paint="mineral-white"] img {
  filter: sepia(0.12) saturate(0.75) brightness(0.98) contrast(1.05);
}
.vehicle-art[data-paint="glacier-silver"] img,
.exact-preview[data-paint="glacier-silver"] img {
  filter: grayscale(0.8) brightness(0.78) contrast(1.18);
}
.vehicle-art[data-paint="mineral-grey"] img,
.exact-preview[data-paint="mineral-grey"] img {
  filter: grayscale(0.75) brightness(0.49) contrast(1.38);
}
.vehicle-art[data-paint="jet-black"] img,
.exact-preview[data-paint="jet-black"] img {
  filter: grayscale(1) brightness(0.25) contrast(1.65);
}
.vehicle-art[data-paint="black-sapphire"] img,
.exact-preview[data-paint="black-sapphire"] img {
  filter: sepia(0.35) saturate(1.8) hue-rotate(167deg) brightness(0.31)
    contrast(1.58);
}
.vehicle-art[data-paint="mediterranean-blue"] img,
.exact-preview[data-paint="mediterranean-blue"] img {
  filter: sepia(1) saturate(4.8) hue-rotate(165deg) brightness(0.59)
    contrast(1.28);
}
.vehicle-art[data-paint="estoril-blue"] img,
.exact-preview[data-paint="estoril-blue"] img {
  filter: sepia(1) saturate(5.7) hue-rotate(156deg) brightness(0.75)
    contrast(1.18);
}
.vehicle-art[data-paint="sunset-orange"] img,
.exact-preview[data-paint="sunset-orange"] img {
  filter: sepia(1) saturate(5.2) hue-rotate(330deg) brightness(0.72)
    contrast(1.2);
}
.vehicle-art[data-paint="sparkling-brown"] img,
.exact-preview[data-paint="sparkling-brown"] img {
  filter: sepia(1) saturate(2.1) hue-rotate(338deg) brightness(0.47)
    contrast(1.28);
}
.vehicle-art[data-paint="dark-olive"] img,
.exact-preview[data-paint="dark-olive"] img {
  filter: sepia(1) saturate(1.8) hue-rotate(48deg) brightness(0.47)
    contrast(1.3);
}
@media (max-width: 760px) {
  .rotate-hint {
    top: 48px;
    right: 12px;
    font-size: 0.6rem;
  }
  .rotate-controls {
    bottom: 10px;
  }
  .vehicle-type-chip {
    bottom: 52px;
  }
}

/* Correcciones verificadas en móvil */
.vehicle-art[data-paint] img,
.exact-preview[data-paint] img {
  filter: none !important;
}
.vehicle-rotator img {
  will-change: opacity;
  transition:
    opacity 0.11s ease,
    transform 0.3s ease;
}
.vehicle-rotator img.switching {
  opacity: 0.72;
}
.rotate-hint {
  animation: hintFade 5s 1.4s forwards;
}
@keyframes hintFade {
  to {
    opacity: 0.38;
  }
}
@media (max-width: 760px) {
  .garage-modal {
    width: calc(100% - 16px);
    max-height: 88dvh;
    margin: auto auto 8px;
    border-radius: 22px;
  }
  .garage-modal form {
    padding: 20px 14px 14px;
    max-height: 88dvh;
  }
  .garage-modal h2 {
    font-size: 1.25rem;
    margin-bottom: 8px;
  }
  .modal-copy {
    font-size: 0.72rem;
    margin: 0 30px 12px 0;
  }
  .exact-vehicle {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 8px;
    margin-bottom: 10px;
  }
  .exact-preview {
    min-height: 118px;
    border-radius: 13px;
  }
  .exact-data {
    padding: 10px;
    gap: 7px;
    border-radius: 13px;
  }
  .exact-data .brand-badge {
    width: 36px;
    height: 36px;
    font-size: 0.5rem;
  }
  .exact-data strong {
    font-size: 0.76rem;
  }
  .exact-data small {
    font-size: 0.58rem;
  }
  .exact-data > b {
    display: none;
  }
  .garage-modal .model-fields {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .garage-modal label {
    margin-bottom: 7px;
    font-size: 0.66rem;
  }
  .garage-modal input,
  .garage-modal select {
    padding: 8px;
  }
  .garage-modal fieldset {
    margin-bottom: 8px;
  }
  .garage-modal legend {
    margin-bottom: 6px;
  }
  .paint-picker {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 7px;
  }
  .paint-option {
    flex: 0 0 72px;
    min-height: 62px;
    scroll-snap-align: start;
  }
  .paint-option i {
    width: 27px;
    height: 27px;
  }
  .paint-option span {
    font-size: 0.54rem;
  }
  .paint-name {
    font-size: 0.7rem;
    margin-top: 3px;
  }
  .garage-modal menu {
    margin-top: 8px;
    position: sticky;
    bottom: 0;
    background: linear-gradient(transparent, #080c13 28%);
    padding-top: 15px;
  }
  .garage-modal menu button {
    padding: 9px 13px;
  }
  .rotate-hint {
    top: 42px;
  }
  .rotate-controls {
    grid-template-columns: 38px minmax(105px, auto) 38px;
  }
  .rotate-controls button {
    height: 38px;
  }
}
.detail-customizer {
  display: grid;
  gap: 8px;
}
.detail-row {
  display: grid;
  grid-template-columns: 125px 1fr;
  align-items: center;
  gap: 10px;
}
.detail-row > span b,
.detail-row > span small {
  display: block;
}
.detail-row > span b {
  font-size: 0.76rem;
  color: #fff;
}
.detail-row > span small {
  font-size: 0.62rem;
  color: var(--muted);
}
.finish-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.finish-options button {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 10px;
  border: 1px solid #2a384b;
  background: #080d15;
  color: #9eabba;
  font-size: 0.67rem;
  font-weight: 750;
  cursor: pointer;
}
.finish-options button:hover,
.finish-options button.selected {
  border-color: var(--accent);
  color: #fff;
  background: #12302f;
  box-shadow: 0 0 0 2px #5df5e612;
}
.finish-options button.selected:before {
  content: "✓ ";
  color: var(--accent);
}
@media (max-width: 760px) {
  .detail-customizer {
    gap: 6px;
  }
  .detail-row {
    grid-template-columns: 82px 1fr;
    gap: 7px;
  }
  .detail-row > span b {
    font-size: 0.68rem;
  }
  .detail-row > span small {
    font-size: 0.54rem;
  }
  .finish-options {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .finish-options button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 8px;
    font-size: 0.6rem;
  }
  .garage-modal .detail-customizer {
    margin-top: 10px;
  }
}

/* Apariencia, movilidad y especificaciones */
.theme-switch {
  display: flex;
  padding: 3px;
  border: 1px solid #ffffff17;
  border-radius: 99px;
  background: #080d15;
}
.theme-switch button {
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  padding: 7px 12px;
  font-size: 0.68rem;
  font-weight: 850;
  cursor: pointer;
}
.theme-switch button.selected {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #061016;
  box-shadow: 0 5px 16px #0005;
}
.circulation-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin: 18px 0;
}
.circulation-status {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: #103a34;
  color: var(--accent);
  font-size: 1.7rem;
  font-weight: 950;
  box-shadow: 0 0 30px #5df5e620;
}
.circulation-card h2,
.circulation-card p {
  margin: 0;
}
.circulation-card p {
  color: var(--muted);
  font-size: 0.76rem;
}
.circulation-card.restricted {
  border-color: #7c3143;
}
.circulation-card.restricted .circulation-status {
  background: #421b27;
  color: #ff8398;
}
.official-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.official-links a {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  text-decoration: none;
}
.hnc-config {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.hnc-config label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.65rem;
}
.hnc-config select {
  min-width: 110px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #080d15;
  color: var(--text);
}
.button-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.data-note {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.63rem;
}
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 15px;
}
.spec-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.spec-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #102636;
  color: var(--accent);
  font-size: 1.4rem;
}
.spec-card small,
.spec-card h3,
.spec-card p {
  display: block;
  margin: 0;
}
.spec-card > div > small {
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.spec-card h3 {
  margin: 5px 0;
  font-size: 1.08rem;
}
.spec-card p {
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}
body[data-theme="cute"] {
  --bg: #160b16;
  --panel: #21101f;
  --panel2: #2c152b;
  --line: #5c3155;
  --text: #fff7fc;
  --muted: #c9a9c0;
  --accent: #ff8ed5;
  --accent2: #bca2ff;
  --violet: #e76cff;
  --shadow: 0 24px 70px #13000d99;
  background:
    radial-gradient(circle at 78% 3%, #65264e 0, transparent 32%),
    radial-gradient(circle at 15% 92%, #3f235e 0, transparent 31%), #160b16;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
}
body[data-theme="cute"]:before {
  opacity: 0.32;
  background-image:
    radial-gradient(circle, #ffb9e0 1.3px, transparent 1.5px),
    radial-gradient(circle, #cdb6ff 1px, transparent 1.2px);
  background-size:
    34px 34px,
    52px 52px;
  background-position:
    0 0,
    13px 18px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
body[data-theme="cute"] .sidebar {
  background: linear-gradient(180deg, #261323f7, #190e1bf0);
  border-right-color: #ffbce72b;
}
body[data-theme="cute"] .brandmark {
  position: relative;
  background: linear-gradient(145deg, #fff, #ff9cda 45%, #ad91ff);
  box-shadow: 0 0 32px #ff8ed568;
}
body[data-theme="cute"] .brandmark:after {
  content: "♡";
  font-size: 0.58rem;
  color: #702552;
  position: absolute;
  transform: translate(12px, -12px);
}
body[data-theme="cute"] .nav:hover,
body[data-theme="cute"] .nav.active {
  background: linear-gradient(90deg, #47213d, #29152b);
  border-color: #704060;
}
body[data-theme="cute"] .primary {
  background: linear-gradient(135deg, #ffc0e6, #ff7ac9 55%, #b89aff);
  color: #2b0b22;
  box-shadow: 0 12px 28px #ff77c837;
}
body[data-theme="cute"] .panel,
body[data-theme="cute"] .alert-card,
body[data-theme="cute"] .stat-grid article,
body[data-theme="cute"] .money-grid article,
body[data-theme="cute"] .timeline article {
  background: linear-gradient(145deg, #32182edb, #1c101fdc);
  border-color: #ffbce728;
  box-shadow: 0 18px 50px #12000c61;
}
body[data-theme="cute"] .vehicle-card {
  background: linear-gradient(112deg, #351a31, #1c101d 56%, #2d193c);
  border-color: #ffbde451;
  box-shadow:
    0 34px 90px #11000bba,
    0 0 0 1px #fff5fb0a inset;
}
body[data-theme="cute"] .vehicle-art:before {
  background:
    linear-gradient(90deg, transparent 60%, #1c101d),
    linear-gradient(0deg, #1c101d 0, transparent 42%);
}
body[data-theme="cute"] .ambient-ring {
  border-color: #ff93d66b;
  box-shadow:
    0 0 85px #ff78c72d,
    inset 0 0 80px #c7a1ff24;
}
body[data-theme="cute"] .vehicle-card:before {
  content: "MI GARAJE  ♡  01";
  color: #ffd3edba;
}
body[data-theme="cute"] .vehicle-type-chip,
body[data-theme="cute"] .customize-btn,
body[data-theme="cute"] .official-links a {
  color: #ff9cda;
}
body[data-theme="cute"] .brand-badge {
  background: radial-gradient(circle at 35% 25%, #6d385f, #24101f 70%);
  border-color: #ff9cd687;
  box-shadow: 0 0 30px #ff77c734;
}
body[data-theme="cute"] .circulation-status,
body[data-theme="cute"] .spec-icon {
  background: #49213e;
  color: #ff9cda;
}
body[data-theme="cute"] .theme-switch {
  background: #2a1428;
  border-color: #ffb5df2e;
}
body[data-theme="cute"] .theme-switch button.selected {
  color: #321026;
}
body[data-theme="cute"] .garage-modal {
  background: linear-gradient(145deg, #351b32, #190e1a);
  border-color: #77436c;
}
body[data-theme="cute"] .finish-options button.selected {
  background: #512042;
  border-color: #ff8ed5;
}
@media (max-width: 760px) {
  .top-actions {
    gap: 6px;
  }
  .theme-switch button {
    padding: 6px 9px;
  }
  .top-actions .primary {
    font-size: 0;
    width: 40px;
    height: 40px;
    padding: 0;
  }
  .top-actions .primary:before {
    content: "＋";
    font-size: 1.1rem;
  }
  .circulation-card {
    grid-template-columns: auto 1fr;
    padding: 15px;
  }
  .circulation-card > button {
    grid-column: 1/-1;
    width: 100%;
  }
  .spec-grid {
    grid-template-columns: 1fr;
  }
  .spec-card {
    padding: 15px;
  }
  .official-links {
    gap: 7px;
  }
  .hnc-config select {
    min-width: 95px;
  }
}

/* Garaje multi-vehículo y alta por VIN */
.catalog-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.catalog-summary > div:first-child {
  display: flex;
  align-items: center;
  gap: 16px;
}
.catalog-summary h3,
.catalog-summary p {
  margin: 0;
}
.catalog-summary p {
  color: var(--muted);
  font-size: 0.76rem;
  max-width: 650px;
}
.catalog-summary small {
  color: var(--accent);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.catalog-orbit {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  border: 1px solid #5df5e650;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-weight: 950;
  box-shadow:
    0 0 30px #5df5e61a,
    inset 0 0 22px #5df5e611;
}
.catalog-kpis {
  display: flex;
  gap: 8px;
}
.catalog-kpis span {
  min-width: 90px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #080d15;
  text-align: center;
  color: var(--muted);
  font-size: 0.61rem;
}
.catalog-kpis b {
  display: block;
  color: var(--text);
  font-size: 1rem;
}
.vehicle-garage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.garage-vehicle {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, #0f1622, #080d15);
  box-shadow: 0 18px 50px #0005;
}
.garage-vehicle-art,
.render-placeholder {
  height: 220px;
  background: #080d15;
  position: relative;
  overflow: hidden;
}
.garage-vehicle-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.render-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  background:
    radial-gradient(circle, #183440 0, transparent 56%),
    linear-gradient(145deg, #101926, #080d15);
}
.render-placeholder > span {
  width: 80px;
  height: 80px;
  border: 1px dashed #5df5e670;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 950;
  animation: orbit 8s linear infinite;
}
.render-placeholder > i {
  width: 135px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 18px var(--accent);
}
.render-placeholder > small {
  color: var(--muted);
  font-weight: 800;
}
.garage-vehicle-data {
  padding: 18px;
}
.garage-vehicle-data h3 {
  font-size: 1.35rem;
  margin: 7px 0 2px;
}
.garage-vehicle-data p {
  color: var(--muted);
  margin: 0;
}
.garage-vehicle-data dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 15px 0;
}
.garage-vehicle-data dl div {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #070b12;
}
.garage-vehicle-data dt {
  color: var(--muted);
  font-size: 0.58rem;
}
.garage-vehicle-data dd {
  margin: 3px 0 0;
  font-size: 0.7rem;
  font-weight: 800;
}
.render-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px;
  border-radius: 11px;
  background: #2b2412;
  color: #ffd478;
  font-size: 0.7rem;
  font-weight: 800;
}
.render-progress i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffc65d;
  box-shadow: 0 0 0 5px #ffc65d18;
}
.privacy-strip {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 15px;
}
.privacy-strip > span {
  font-size: 1.7rem;
  color: var(--accent);
}
.privacy-strip > div {
  flex: 1;
}
.privacy-strip strong,
.privacy-strip p {
  display: block;
  margin: 0;
}
.privacy-strip p {
  color: var(--muted);
  font-size: 0.72rem;
}
.privacy-strip > b {
  font-size: 0.61rem;
  color: var(--accent);
}
.vin-modal {
  width: min(680px, calc(100% - 24px));
  background: linear-gradient(145deg, #101824, #070b12);
  border: 1px solid #3c4d64;
  border-radius: 22px;
  color: var(--text);
  box-shadow: 0 35px 120px #000;
}
.vin-modal::backdrop {
  background: #000a;
  backdrop-filter: blur(8px);
}
.vin-modal form {
  padding: 30px;
}
.vin-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 9px;
}
.vin-entry label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.7rem;
}
.vin-entry input,
.manual-vehicle-fields input {
  width: 100%;
  border: 1px solid #2c3a4e;
  border-radius: 11px;
  background: #070b12;
  color: #fff;
  padding: 12px;
  text-transform: uppercase;
  outline: none;
}
.vin-entry input:focus,
.manual-vehicle-fields input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #5df5e614;
}
.vin-privacy {
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.45;
}
.vin-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 0 4px;
  padding: 11px;
  border: 1px solid #2c4e59;
  border-radius: 12px;
  background: #0a1b22;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}
.vin-consent input {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.manual-vehicle-fields {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #090f18;
}
.manual-vehicle-fields:not([hidden]) {
  display: grid;
}
.manual-vehicle-fields label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.63rem;
}
.manual-vehicle-fields button {
  grid-column: 1/-1;
}
.vin-loading {
  align-items: center;
  gap: 10px;
  margin: 15px 0;
  padding: 13px;
  border-radius: 12px;
  background: #0c1c28;
  color: var(--muted);
  font-size: 0.72rem;
}
.vin-loading:not([hidden]) {
  display: flex;
}
.vin-loading i {
  width: 17px;
  height: 17px;
  border: 2px solid #ffffff24;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: orbit 0.7s linear infinite;
}
.vin-result {
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 15px 0;
  padding: 14px;
  border: 1px solid #315064;
  border-radius: 15px;
  background: #0c1c28;
}
.vin-result:not([hidden]) {
  display: grid;
}
.vin-result h3,
.vin-result p {
  margin: 2px 0;
}
.vin-result p,
.vin-result span {
  color: var(--muted);
  font-size: 0.7rem;
}
.vin-result small {
  color: var(--accent);
  font-size: 0.6rem;
  font-weight: 900;
}
.decoded-badge {
  width: 45px;
  height: 45px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #113c36;
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 950;
}
.decoded-badge.error {
  background: #421b27;
  color: #ff8398;
}
.decoded-badge.partial {
  background: #4b3215;
  color: #ffd27a;
}
.vin-result em {
  display: block;
  margin-top: 7px;
  color: #9bb4c8;
  font-size: 0.64rem;
  font-style: normal;
  line-height: 1.45;
}
.vin-modal menu {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
  margin: 18px 0 0;
}
.vin-modal button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
body[data-theme="cute"] .catalog-orbit {
  border-color: #ff8ed580;
  color: #ff9cda;
  box-shadow:
    0 0 30px #ff8ed528,
    inset 0 0 22px #ff8ed519;
}
body[data-theme="cute"] .garage-vehicle {
  background: linear-gradient(145deg, #32182e, #1c101f);
  border-color: #ffbce728;
}
body[data-theme="cute"] .render-placeholder {
  background:
    radial-gradient(circle, #552144 0, transparent 56%),
    linear-gradient(145deg, #32182e, #1b101e);
}
body[data-theme="cute"] .render-placeholder > span {
  border-color: #ff8ed58f;
  color: #ff9cda;
}
body[data-theme="cute"] .vin-modal {
  background: linear-gradient(145deg, #351b32, #190e1a);
  border-color: #77436c;
}
@media (max-width: 900px) {
  .catalog-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .catalog-kpis {
    width: 100%;
  }
  .catalog-kpis span {
    flex: 1;
  }
  .vehicle-garage-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .catalog-summary {
    padding: 15px;
  }
  .catalog-summary > div:first-child {
    align-items: flex-start;
  }
  .catalog-orbit {
    width: 52px;
    height: 52px;
  }
  .catalog-kpis {
    overflow-x: auto;
  }
  .catalog-kpis span {
    min-width: 92px;
  }
  .garage-vehicle-art,
  .render-placeholder {
    height: 175px;
  }
  .garage-vehicle-data {
    padding: 14px;
  }
  .garage-vehicle-data dl {
    grid-template-columns: 1fr;
  }
  .privacy-strip {
    align-items: flex-start;
  }
  .privacy-strip > b {
    display: none;
  }
  .vin-modal {
    margin: auto auto 8px;
    max-height: 90dvh;
  }
  .vin-modal form {
    padding: 22px 14px;
    overflow: auto;
    max-height: 90dvh;
  }
  .vin-entry {
    grid-template-columns: 1fr;
  }
  .vin-entry button {
    width: 100%;
  }
  .manual-vehicle-fields {
    grid-template-columns: 1fr;
  }
  .vin-modal menu {
    position: sticky;
    bottom: 0;
    padding-top: 15px;
    background: linear-gradient(transparent, #080c13 30%);
  }
}

/* Última capa: evita que reglas heredadas reduzcan o desplacen el configurador */
.vehicle-art img,
.exact-preview img {
  object-fit: contain !important;
  transform: none !important;
}
.garage-modal[open] {
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.garage-modal[open] > form {
  height: 100dvh !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.garage-modal[open] .exact-preview {
  min-height: clamp(320px, 48vh, 540px) !important;
}
.contingency-connector {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #07111bd9;
}
.contingency-connector > div,
.contingency-connector label {
  display: grid;
  gap: 4px;
}
.contingency-connector small,
.contingency-connector label,
.contingency-connector span {
  color: var(--muted);
  font-size: 0.72rem;
}
.contingency-connector strong {
  color: var(--text);
}
.connector-evidence {
  width: fit-content;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
}
.connector-schedule {
  display: block;
  margin-top: 3px;
  color: #9bb4c8 !important;
  line-height: 1.35;
}
.manual-contingency {
  grid-column: 1 / -1;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.manual-contingency summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.76rem;
}
.manual-contingency[open] {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.connector-loading {
  opacity: 0.72;
  pointer-events: none;
}
.contingency-connector select {
  width: 100%;
  padding: 9px;
  border: 1px solid #2c3a4e;
  border-radius: 9px;
  background: #050a11;
  color: #fff;
}
.pilot-requirements {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid #315064;
  border-radius: 13px;
  background: #0a1822;
}
.pilot-requirements ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
  .auth-orbit,
  .auth-live i,
  .auth-scan,
  .auth-car-stage > img,
  .auth-data-chip,
  .diagonal-card::before,
  .auth-holo-ring,
  .auth-system-node { animation: none !important; }
  .auth-car-stage,
  .auth-submit { transition: none !important; transform: none !important; }
}
@media (max-width: 760px) {
  .garage-modal[open] > form {
    width: 100vw !important;
    padding: 20px 14px 110px !important;
  }
  .garage-modal[open] .exact-vehicle {
    grid-template-columns: 1fr !important;
  }
  .garage-modal[open] .exact-preview {
    min-height: 290px !important;
  }
  .garage-modal[open] .exact-data {
    display: none !important;
  }
  .contingency-connector {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .record-status-grid,
  .official-portal-grid,
  .record-form {
    grid-template-columns: 1fr 1fr;
  }
  .record-note,
  .record-evidence {
    grid-column: 1 / -1;
  }
  .record-history article {
    grid-template-columns: 1fr auto;
  }
  .record-history article > div {
    grid-column: 1 / -1;
  }
  .amis-assistant { grid-template-columns: 1fr; }
  .amis-assistant-actions { width: 100%; }
  .amis-assistant-actions button { width: 100%; }
}