html {
    font-size: 14px;
    scroll-behavior: smooth;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

:root {
    --red: #ff3131;
    --red-dark: #b91218;
    --black: #050505;
    --panel: rgba(16, 16, 16, .88);
    --border: rgba(255, 255, 255, .38);
    --white: #ffffff;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

a {
    color: var(--red);
}

/* NAVBAR */

.ponyup-header {
    background: #050505;
}

.ponyup-navbar {
    min-height: 86px;
    background: linear-gradient(180deg, #101010, #050505);
    border-bottom: 2px solid rgba(255, 49, 49, .85);
    box-shadow: 0 8px 26px rgba(0,0,0,.9);
    display: flex;
    align-items: center;
    padding: 0 26px;
    gap: 24px;
}

.ponyup-brand img {
    height: 66px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.35));
}

.ponyup-nav-links {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

.ponyup-nav-links a,
.ponyup-nav-links button {
    color: #ffffff !important;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 1000;
    font-size: .82rem;
    letter-spacing: .065rem;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(255,255,255,.6);
    background: transparent;
    border: none;
    font-family: Arial, Helvetica, sans-serif;
}

.ponyup-nav-links a:hover,
.ponyup-nav-links button:hover,
.ponyup-nav-links .pricing-nav {
    color: var(--red) !important;
}

.ponyup-auth-link {
    border: 1px solid rgba(255,255,255,.8) !important;
    border-radius: 4px;
    padding: 11px 18px;
}

.ponyup-auth-button {
    background: linear-gradient(180deg, #ff3131, #b91218) !important;
    color: #ffffff !important;
    border-radius: 4px;
    padding: 12px 20px;
    box-shadow: 0 0 16px rgba(255,49,49,.45);
    cursor: pointer;
}

/* HERO */

.ponyup-hero {
    min-height: calc(100vh - 90px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: #050505;
}

.hero-image {
    height: 100%;
    overflow: hidden;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    display: block;
}


.hero-copy {
    width: 520px;
    margin-left: 4.3vw;
    margin-top: -14px;
}

.hero-wordmark {
    width: 360px;
    max-width: 100%;
    display: block;
    margin-bottom: 20px;
    filter:
        drop-shadow(0 0 12px rgba(255,255,255,.9))
        drop-shadow(0 0 18px rgba(255,49,49,.45));
}

.hero-slogan {
    color: var(--red);
    font-size: clamp(1.8rem, 3.15vw, 3.45rem);
    font-weight: 1000;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .035rem;
    -webkit-text-stroke: 1.2px #ffffff;
    text-shadow:
        0 0 10px rgba(255,255,255,.72),
        0 0 20px rgba(255,49,49,.75),
        0 0 28px rgba(0,0,0,.95);
    margin: 0 0 20px;
}

.hero-copy h1 {
    color: #ffffff;
    font-size: clamp(1.35rem, 2.05vw, 2rem);
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .03rem;
    text-shadow:
        0 0 12px rgba(255,255,255,.85),
        0 0 22px rgba(0,0,0,.95);
    margin: 0 0 18px;
}

.hero-copy p {
    color: #ffffff;
    font-size: 1.12rem;
    line-height: 1.45;
    font-weight: 750;
    max-width: 470px;
    text-shadow: 0 0 12px rgba(0,0,0,1);
    margin-bottom: 28px;
}

.hero-buttons {
    display: flex;
    gap: 12px;
}

.btn-red,
.btn-dark {
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 1000;
    font-size: .9rem;
    padding: 13px 22px;
    border-radius: 5px;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255,255,255,.45);
}

.btn-red {
    background: linear-gradient(180deg, #ff3131, #b91218);
    border: 1px solid #ff4545;
    box-shadow: 0 0 18px rgba(255,49,49,.75);
}

.btn-dark {
    background: rgba(10,10,10,.62);
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: 0 0 15px rgba(255,255,255,.38);
}

/* SECTIONS */

.page-section {
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 28%),
        linear-gradient(180deg, #080808, #050505);
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 76px 4.5vw;
}

.section-title {
    color: #ffffff;
    text-align: center;
    font-size: clamp(2.2rem, 3.5vw, 3.1rem);
    font-weight: 1000;
    letter-spacing: .18rem;
    text-transform: uppercase;
    text-shadow:
        0 0 12px rgba(255,255,255,.95),
        0 0 28px rgba(255,255,255,.45);
    margin: 0;
}

.section-subtitle {
    color: #f0f0f0;
    text-align: center;
    font-size: 1.08rem;
    font-weight: 750;
    text-shadow: 0 0 10px rgba(255,255,255,.45);
    margin: 8px 0 48px;
}

/* 3D ICON BUTTONS */

.press-icon {
    width: 86px;
    height: 86px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.45rem;
    border-radius: 16px;
    border: 2px solid #656565;
    background: linear-gradient(180deg, #454545 0%, #151515 60%, #070707 100%);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.3),
        inset 0 -8px 12px rgba(0,0,0,.75),
        0 8px 0 #000,
        0 16px 24px rgba(0,0,0,.75);
    transition: .08s;
}

.press-icon.small {
    width: 68px;
    height: 68px;
    font-size: 2rem;
    margin-bottom: 12px;
}

.decision-card:hover .press-icon,
.resource-card:hover .press-icon {
    transform: translateY(5px);
    border-color: var(--red);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.25),
        inset 0 -4px 8px rgba(0,0,0,.85),
        0 3px 0 #000,
        0 0 24px rgba(255,49,49,.65);
}

/* DECISION CENTER */

.decision-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.decision-card {
    grid-column: span 2;
    min-height: 300px;
    padding: 34px 28px;
    display: block;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(24,24,24,.88), rgba(7,7,7,.96));
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 8px;
    box-shadow:
        inset 0 0 45px rgba(255,255,255,.035),
        0 14px 28px rgba(0,0,0,.65);
}

.trade-card {
    grid-column: 2 / span 2;
}

.upgrade-card {
    grid-column: 4 / span 2;
}

.decision-card:hover {
    color: #ffffff;
    border-color: #ff3131;
    box-shadow:
        0 0 28px rgba(255,49,49,.45),
        inset 0 0 45px rgba(255,255,255,.035);
}

.decision-card h3 {
    font-size: 1.95rem;
    font-weight: 1000;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
        0 0 12px rgba(255,255,255,.85),
        0 0 22px rgba(255,255,255,.35);
    margin: 0 0 12px;
}

.decision-card p {
    color: #ffffff;
    font-size: 1.02rem;
    font-weight: 750;
    line-height: 1.4;
    margin: 0;
}

/* ICONS */

.icon-holder {
    width: 86px;
    height: 86px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 14px;
    background: linear-gradient(180deg, #1c1c1c, #070707);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.14),
        0 7px 0 #030303,
        0 0 18px rgba(255,49,49,.4);
    transition: .12s;
}

.decision-card:hover .icon-holder {
    transform: translateY(5px);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.1),
        0 2px 0 #030303,
        0 0 24px rgba(255,49,49,.7);
}

.red-svg {
    width: 52px;
    height: 52px;
    color: #ff3131;
    filter: drop-shadow(0 0 8px rgba(255,49,49,.75));
}

/* RESOURCES */

.resource-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}

.resource-card {
    min-height: 345px;
    padding: 28px;
    background: linear-gradient(180deg, rgba(24,24,24,.88), rgba(7,7,7,.96));
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 8px;
    box-shadow:
        inset 0 0 45px rgba(255,255,255,.035),
        0 14px 28px rgba(0,0,0,.65);
}

.resource-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resource-card h3 {
    color: #ff3131;
    text-align: center;
    font-size: 1.55rem;
    font-weight: 1000;
    text-transform: uppercase;
    -webkit-text-stroke: .8px #ffffff;
    text-shadow:
        0 0 10px rgba(255,255,255,.7),
        0 0 18px rgba(255,49,49,.7);
    margin: 0 0 18px;
}

.resource-card ul {
    margin: 0;
    padding-left: 20px;
}

.resource-card li {
    color: #ff3131;
    margin-bottom: 9px;
}

.resource-card a {
    color: #ffffff;
    font-weight: 850;
    text-decoration: underline;
    text-shadow: 0 0 8px rgba(255,255,255,.35);
}

.resource-future-item {
    color: #ff3131;
}

.resource-future-name {
    display: block;
    color: #ffffff;
    font-weight: 850;
    text-shadow: 0 0 8px rgba(255,255,255,.35);
    white-space: nowrap;
}

.resource-coming-soon {
    display: block;
    margin-top: 3px;
    color: #ff3131;
    font-size: .72rem;
    font-weight: 1000;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(255,49,49,.65);
    white-space: nowrap;
}

.resource-disclaimer {
    color: #ffffff;
    text-align: center;
    font-weight: 750;
    font-size: .9rem;
    margin: 28px auto 0;
    max-width: 1100px;
}

@media (max-width: 1200px) {
    .decision-grid,
    .resource-grid {
        grid-template-columns: 1fr;
    }

    .decision-card,
    .trade-card,
    .upgrade-card {
        grid-column: auto;
    }
}

/* PRICING */

.pricing-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.price-card {
    min-height: 230px;
    padding: 34px 20px;
    text-align: center;
    background: linear-gradient(180deg,rgba(24,24,24,.88),rgba(7,7,7,.96));
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 8px;
    box-shadow:
        inset 0 0 45px rgba(255,255,255,.035),
        0 14px 28px rgba(0,0,0,.65);
}

.price-card.featured {
    border: 2px solid var(--red);
    box-shadow:
        0 0 30px rgba(255,49,49,.62),
        inset 0 0 45px rgba(255,49,49,.05);
}

.price-card h3 {
    color: #ffffff;
    font-size: 1.85rem;
    font-weight: 1000;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(255,255,255,.72);
    margin-bottom: 12px;
}

.price-card.featured h3 {
    color: var(--red);
}

.price-card p {
    color: #ffffff;
    font-weight: 750;
    margin-bottom: 22px;
}

.price-card strong {
    display: block;
    color: #ffffff;
    font-size: 2.55rem;
    font-weight: 1000;
    text-shadow: 0 0 16px rgba(255,255,255,.68);
}

.price-card strong span {
    font-size: 1.15rem;
}

.price-card.featured strong {
    color: var(--red);
}

/* FOOTER */

.ponyup-footer {
    background: #050505;
    border-top: 1px solid rgba(255,255,255,.12);
    text-align: center;
    padding: 28px 0 32px;
}

.ponyup-footer img {
    height: 58px;
    width: auto;
    opacity: .96;
    margin-bottom: 10px;
}

.ponyup-footer p {
    color: #ffffff;
    font-weight: 650;
    margin: 0;
}

/* BASIC PAGE SUPPORT */

form input,
form select,
form textarea {
    background: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
}

form label {
    color: #f2f2f2;
    font-weight: 700;
}

.text-danger {
    color: #ff4d4d !important;
}

hr {
    border-color: #333333;
}

/* RESPONSIVE */

@media (max-width: 1200px) {
    .ponyup-navbar {
        flex-wrap: wrap;
        padding: 14px 18px;
    }

    .ponyup-nav-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
    }

    .decision-grid,
    .resource-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .decision-card,
    .trade-card,
    .upgrade-card {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .ponyup-hero {
        min-height: 760px;
        background-position: 68% center;
    }

    .hero-copy {
        width: auto;
        max-width: 92%;
        margin-left: 22px;
    }

    .hero-wordmark {
        width: 285px;
    }

    .hero-slogan {
        font-size: clamp(2rem, 11vw, 3.1rem);
    }

    .hero-copy h1 {
        font-size: 1.45rem;
    }

    .hero-copy p {
        font-size: 1rem;
    }

    .section-title {
        font-size: 2.1rem;
        letter-spacing: .1rem;
    }
}
.icon-holder{
    width:80px;
    height:80px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.2);
    border-radius:12px;
    background:#111;
    box-shadow:0 5px 0 #050505;
    transition:.15s;
}

.decision-card:hover .icon-holder{
    transform:translateY(4px);
    box-shadow:0 1px 0 #050505;
}

.red-svg,
.resource-svg{
    width:48px;
    height:48px;
    color:#ff3131;
    filter:drop-shadow(0 0 8px rgba(255,49,49,.7));
}

.resource-card .resource-svg{
    margin-bottom:15px;
}

/* ANALYZER BACKGROUNDS */

.analyzer-page {
    min-height: calc(100vh - 86px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 76px 4.5vw;
    position: relative;
}

.analyzer-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(.78, .78, .78, .78);
    z-index: 0;
}

.analyzer-page > * {
    position: relative;
    z-index: 1;
}

.repair-bg {
    background-image: url('/images/ponyup-nightmare.png');
}

.buy-bg {
    background-image: url('/images/ponyup-firesteed.png');
}

.sell-bg {
    background-image: url('/images/ponyup-mechanical.png');
}

.trade-bg {
    background-image: url('/images/ponyup-nightmare1.png');
}

.upgrade-bg {
    background-image: url('/images/ponyup-lavamare.png');
}

.garage-coming-soon {
    background:
        linear-gradient(rgba(0,0,0,.80), rgba(0,0,0,.90)),
        url('/images/ponyup-garage-concept-v1.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 90vh;
}
/* PONYUP STOPLIGHT RESULT */

.ponyup-result-panel {
    max-width: 1100px;
    margin: 34px auto 0;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 34px;
    align-items: center;
    padding: 32px;
    background: linear-gradient(180deg, rgba(18,18,18,.95), rgba(3,3,3,.98));
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 12px;
    box-shadow: 0 0 38px rgba(0,0,0,.85);
}

.ponyup-stoplight-img {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 0 22px rgba(255,49,49,.45));
}

.ponyup-result-panel.green .ponyup-stoplight-img {
    filter:
        drop-shadow(0 0 18px rgba(70,255,40,.9))
        drop-shadow(0 0 42px rgba(70,255,40,.65));
}

.ponyup-result-panel.yellow .ponyup-stoplight-img {
    filter:
        drop-shadow(0 0 18px rgba(255,190,20,.9))
        drop-shadow(0 0 38px rgba(255,190,20,.55));
}

.ponyup-result-panel.red .ponyup-stoplight-img {
    filter:
        drop-shadow(0 0 26px rgba(255,20,20,1))
        drop-shadow(0 0 62px rgba(255,20,20,.95));
}

.ponyup-result-copy h2 {
    font-size: clamp(2.4rem, 5vw, 5rem);
    font-weight: 1000;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.ponyup-result-panel.green h2,
.ponyup-result-panel.green strong {
    color: #58ff35;
    text-shadow: 0 0 24px rgba(70,255,40,.9);
}

.ponyup-result-panel.yellow h2,
.ponyup-result-panel.yellow strong {
    color: #ffc21a;
    text-shadow: 0 0 22px rgba(255,190,20,.8);
}

.ponyup-result-panel.red h2,
.ponyup-result-panel.red strong {
    color: #ff3131;
    text-shadow: 0 0 30px rgba(255,20,20,1);
}

.ponyup-result-copy strong {
    display: block;
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 1000;
    line-height: 1;
    margin: 18px 0;
}

.ponyup-result-copy p {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 750;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .ponyup-result-panel {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* FINAL PONYUP STOPLIGHT RESULT PANEL */

.ponyup-stoplight-panel {
    max-width: 1320px;
    margin: 42px auto 0;
    display: grid;
    grid-template-columns: 300px 1fr 360px;
    gap: 28px;
    align-items: stretch;
    padding: 28px;
    background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.06), transparent 35%),
        linear-gradient(180deg, rgba(12,12,12,.97), rgba(2,2,2,.99));
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 14px;
    box-shadow:
        0 0 42px rgba(0,0,0,.95),
        inset 0 0 60px rgba(255,255,255,.035);
}

.ponyup-stoplight-left {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ponyup-stoplight-art {
    width: 100%;
    max-width: 290px;
    display: block;
}

.ponyup-stoplight-panel.off .ponyup-stoplight-art {
    filter: drop-shadow(0 0 18px rgba(255,255,255,.25));
}

.ponyup-stoplight-panel.green .ponyup-stoplight-art {
    filter:
        drop-shadow(0 0 28px rgba(70,255,40,.95))
        drop-shadow(0 0 70px rgba(70,255,40,.70));
}

.ponyup-stoplight-panel.yellow .ponyup-stoplight-art {
    filter:
        drop-shadow(0 0 24px rgba(255,190,20,.95))
        drop-shadow(0 0 58px rgba(255,190,20,.65));
}

.ponyup-stoplight-panel.red .ponyup-stoplight-art {
    filter:
        drop-shadow(0 0 34px rgba(255,20,20,1))
        drop-shadow(0 0 86px rgba(255,20,20,1));
}

.ponyup-stoplight-center {
    padding: 28px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.86));
    border: 1px solid rgba(255,255,255,.18);
}

.ponyup-analysis-label,
.ponyup-score-label,
.ponyup-reasoning-title {
    color: #ffffff;
    font-size: .9rem;
    font-weight: 1000;
    letter-spacing: .12rem;
    text-transform: uppercase;
}

.ponyup-stoplight-center h2 {
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 1000;
    text-transform: uppercase;
    line-height: .95;
    margin: 12px 0 22px;
}

.ponyup-score {
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 1000;
    line-height: 1;
    margin: 8px 0 22px;
}

.ponyup-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 18px 0 28px;
}

.ponyup-meta-row span {
    display: block;
    color: #d8d8d8;
    font-weight: 900;
    letter-spacing: .06rem;
}

.ponyup-meta-row strong {
    display: block;
    font-size: 1.45rem;
    font-weight: 1000;
    text-transform: uppercase;
}

.ponyup-reasoning-title {
    margin: 20px 0 12px;
}

.ponyup-result-reasoning {
    font-size: 1.15rem;
    line-height: 1.55;
    font-weight: 850;
    margin: 0;
}

.ponyup-stoplight-panel.off .ponyup-stoplight-center h2,
.ponyup-stoplight-panel.off .ponyup-score,
.ponyup-stoplight-panel.off .ponyup-meta-row strong,
.ponyup-stoplight-panel.off .ponyup-result-reasoning {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(255,255,255,.65);
}

.ponyup-stoplight-panel.green .ponyup-stoplight-center {
    border-color: rgba(88,255,53,.75);
    box-shadow:
        0 0 34px rgba(88,255,53,.22),
        inset 0 0 44px rgba(88,255,53,.08);
}

.ponyup-stoplight-panel.green h2,
.ponyup-stoplight-panel.green .ponyup-score,
.ponyup-stoplight-panel.green .ponyup-meta-row strong,
.ponyup-stoplight-panel.green .ponyup-reasoning-title,
.ponyup-stoplight-panel.green .ponyup-result-reasoning {
    color: #58ff35;
    text-shadow:
        0 0 18px rgba(88,255,53,.95),
        0 0 42px rgba(88,255,53,.65);
}

.ponyup-stoplight-panel.yellow .ponyup-stoplight-center {
    border-color: rgba(255,194,26,.78);
    box-shadow:
        0 0 30px rgba(255,194,26,.24),
        inset 0 0 40px rgba(255,194,26,.08);
}

.ponyup-stoplight-panel.yellow h2,
.ponyup-stoplight-panel.yellow .ponyup-score,
.ponyup-stoplight-panel.yellow .ponyup-meta-row strong,
.ponyup-stoplight-panel.yellow .ponyup-reasoning-title,
.ponyup-stoplight-panel.yellow .ponyup-result-reasoning {
    color: #ffc21a;
    text-shadow:
        0 0 16px rgba(255,194,26,.92),
        0 0 34px rgba(255,194,26,.58);
}

.ponyup-stoplight-panel.red .ponyup-stoplight-center {
    border-color: rgba(255,49,49,.9);
    box-shadow:
        0 0 42px rgba(255,49,49,.35),
        inset 0 0 50px rgba(255,49,49,.10);
}

.ponyup-stoplight-panel.red h2,
.ponyup-stoplight-panel.red .ponyup-score,
.ponyup-stoplight-panel.red .ponyup-meta-row strong,
.ponyup-stoplight-panel.red .ponyup-reasoning-title,
.ponyup-stoplight-panel.red .ponyup-result-reasoning {
    color: #ff3131;
    text-shadow:
        0 0 22px rgba(255,49,49,1),
        0 0 55px rgba(255,49,49,.90);
}

.ponyup-stoplight-legend {
    padding: 24px;
    border-radius: 12px;
    background: rgba(0,0,0,.58);
    border: 1px solid rgba(255,255,255,.16);
}

.ponyup-stoplight-legend h3 {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 1000;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .12rem;
    margin: 0 0 18px;
}

.ponyup-legend-card {
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    background: rgba(0,0,0,.50);
}

.ponyup-legend-card strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 1000;
    text-transform: uppercase;
}

.ponyup-legend-card span {
    display: block;
    color: #ffffff;
    font-weight: 900;
    margin-top: 4px;
}

.ponyup-legend-card p {
    color: #ffffff;
    font-weight: 750;
    margin: 6px 0 0;
}

.ponyup-legend-card.red {
    border: 1px solid rgba(255,49,49,.75);
}

.ponyup-legend-card.red strong {
    color: #ff3131;
    text-shadow: 0 0 16px rgba(255,49,49,.95);
}

.ponyup-legend-card.yellow {
    border: 1px solid rgba(255,194,26,.75);
}

.ponyup-legend-card.yellow strong {
    color: #ffc21a;
    text-shadow: 0 0 14px rgba(255,194,26,.85);
}

.ponyup-legend-card.green {
    border: 1px solid rgba(88,255,53,.75);
}

.ponyup-legend-card.green strong {
    color: #58ff35;
    text-shadow: 0 0 14px rgba(88,255,53,.85);
}

@media (max-width: 1100px) {
    .ponyup-stoplight-panel {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ponyup-meta-row {
        grid-template-columns: 1fr;
    }
}

/* PonyUp homepage background with dark overlay */ body { background: linear-gradient( rgba(0,0,0,0.75), rgba(0,0,0,0.75) ), url('/images/ponyup-nightmare.png'); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-color: #050505; }

/* EMERGENCY HOMEPAGE BACKGROUND RESTORE */
body {
    background: url('/images/ponyup-nightmare.png') center center / cover no-repeat fixed !important;
}

body::before {
    content: none !important;
}

.ponyup-hero,
.hero-image,
.page-section
 {
    background: transparent !important;
}
.analyzer-form {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.form-row {
    display: grid;
    grid-template-columns: 220px 280px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.form-row label {
    margin: 0;
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
}

.form-row input,
.form-row select {
    width: 100%;
}

.form-actions {
    text-align: center;
    margin: 24px 0;
}

.analyzer-card {
    background: rgba(0, 0, 0, 0.12);
}

.analyzer-page {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}    

.page-section.repair-bg {
    background-image: url('/images/ponyup-nightmare.png') !important;
}

.page-section.buy-bg {
    background-image: url('/images/ponyup-firesteed.png') !important;
}

.page-section.sell-bg {
    background-image: url('/images/ponyup-mechanical.png') !important;
}

.page-section.trade-bg {
    background-image: url('/images/ponyup-nightmare1.png') !important;
}

.page-section.upgrade-bg {
    background-image: url('/images/ponyup-lavamare.png') !important;
}

/* =========================================================
   PONYUP REPAIR ANALYZER — PERFORMANCE VISUAL PACKAGE
   ========================================================= */

/* -----------------------------
   REPAIR ANALYZER TOP BANNER
   ----------------------------- */

.repair-bg > .section-title {
    position: relative;
    width: min(1180px, 96%);
    margin: -18px auto 0;
    padding: 20px 30px 18px;

    color: #ff3131;

    font-size: clamp(2.2rem, 5vw, 4.3rem);
    font-weight: 1000;
    font-style: italic;
    line-height: 1;
    letter-spacing: .08rem;
    text-transform: uppercase;

    -webkit-text-stroke: 1.4px #ffffff;

    background:
        linear-gradient(
            180deg,
            rgba(36,36,36,.98) 0%,
            rgba(10,10,10,.98) 42%,
            rgba(2,2,2,.99) 100%
        );

    border-top: 2px solid #ff3131;
    border-bottom: 3px solid #ff3131;

    clip-path: polygon(
        3% 0,
        97% 0,
        100% 50%,
        97% 100%,
        3% 100%,
        0 50%
    );

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.20),
        inset 0 -8px 20px rgba(0,0,0,.95),
        0 0 10px rgba(255,49,49,.85),
        0 0 26px rgba(255,49,49,.48),
        0 12px 30px rgba(0,0,0,.9);

    text-shadow:
        0 2px 0 #8d0d12,
        0 4px 0 #52070a,
        0 6px 0 #1a0102,
        0 0 5px rgba(255,255,255,.95),
        0 0 14px rgba(255,49,49,.95),
        0 0 28px rgba(255,49,49,.72);
}


/* Red illuminated line through banner */

.repair-bg > .section-title::after {
    content: "";
    position: absolute;

    left: 4%;
    right: 4%;
    bottom: 3px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff3131 15%,
            #ffffff 50%,
            #ff3131 85%,
            transparent
        );

    box-shadow:
        0 0 8px #ff3131,
        0 0 18px rgba(255,49,49,.85);
}


/* Subtitle becomes part of banner presentation */

.repair-bg > .section-subtitle {
    width: min(1050px, 92%);

    margin:
        10px auto
        42px;

    padding: 8px 15px;

    color: #ffffff;

    font-size: clamp(.82rem, 1.5vw, 1.05rem);
    font-weight: 900;
    font-style: italic;
    letter-spacing: .09rem;
    text-transform: uppercase;

    text-shadow:
        0 0 7px rgba(255,255,255,.72),
        0 0 14px rgba(0,0,0,1);
}


/* -----------------------------
   REPAIR CARDS
   ----------------------------- */

.repair-bg .analyzer-card {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,49,49,.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            rgba(18,18,18,.94),
            rgba(4,4,4,.97)
        );

    border:
        1px solid
        rgba(255,49,49,.70);

    box-shadow:
        inset 0 0 50px rgba(255,49,49,.035),
        0 0 10px rgba(255,49,49,.26),
        0 18px 40px rgba(0,0,0,.82);
}


/* -----------------------------
   MAJOR HEADINGS

   VEHICLE INFORMATION
   REPAIR COST ESTIMATE
   COMPLETE REPAIR DECISION
   etc.
   ----------------------------- */

.repair-bg .analyzer-card h2,
.repair-bg .featured h2,
.repair-bg .featured h3 {
    color: #ff3131;

    font-size: clamp(1.45rem, 2.7vw, 2rem);
    font-weight: 1000;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: .035rem;
    text-transform: uppercase;

    -webkit-text-stroke: .75px #ffffff;

    text-shadow:
        0 2px 0 #850b10,
        0 4px 0 #480609,
        0 5px 0 #140101,
        0 0 5px rgba(255,255,255,.85),
        0 0 12px rgba(255,49,49,.95),
        0 0 22px rgba(255,49,49,.58);

    margin:
        8px 0
        22px;
}


/* -----------------------------
   ESTIMATE LABELS

   REPAIR:
   LOCATION:
   LOW ESTIMATE:
   EXPECTED ESTIMATE:
   HIGH ESTIMATE:
   LABOR RATE:
   PARTS COST:
   SHOP FEE:
   etc.
   ----------------------------- */

.repair-bg .analyzer-card p > strong,
.repair-bg .featured p > strong {
    display: block;

    color: #ff3131;

    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: 1000;
    font-style: italic;
    line-height: 1.08;
    letter-spacing: .02rem;
    text-transform: uppercase;

    -webkit-text-stroke: .55px rgba(255,255,255,.92);

    text-shadow:
        0 2px 0 #850b10,
        0 3px 0 #430407,
        0 0 4px rgba(255,255,255,.65),
        0 0 11px rgba(255,49,49,.90),
        0 0 20px rgba(255,49,49,.48);

    margin-bottom: 7px;
}


/* -----------------------------
   VALUES UNDER RED LABELS
   ----------------------------- */

.repair-bg .analyzer-card p,
.repair-bg .featured p {
    color: #ffffff;

    font-weight: 800;

    text-shadow:
        0 0 7px rgba(255,255,255,.30),
        0 0 10px rgba(0,0,0,.95);
}


/* Give each estimate item breathing room */

.repair-bg .analyzer-card p {
    margin-top: 18px;
    margin-bottom: 18px;
}


/* -----------------------------
   EXPECTED ESTIMATE EMPHASIS
   ----------------------------- */

.repair-bg .analyzer-card p[style*="font-size:1.2rem"] {
    padding: 16px 10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,49,49,.07),
            rgba(255,49,49,.12),
            rgba(255,49,49,.07),
            transparent
        );

    border-top:
        1px solid
        rgba(255,49,49,.28);

    border-bottom:
        1px solid
        rgba(255,49,49,.28);

    box-shadow:
        inset 0 0 18px rgba(255,49,49,.035);
}


/* -----------------------------
   DIVIDERS
   ----------------------------- */

.repair-bg .analyzer-section-divider {
    height: 1px;

    margin: 28px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,49,49,.9),
            rgba(255,255,255,.45),
            rgba(255,49,49,.9),
            transparent
        );

    box-shadow:
        0 0 7px rgba(255,49,49,.55);

    border: 0;
}


/* -----------------------------
   INPUT LABELS
   ----------------------------- */

.repair-bg .form-row > label {
    color: #ff3131;

    font-weight: 1000;

    text-transform: uppercase;

    text-shadow:
        0 0 8px rgba(255,49,49,.45);
}


/* -----------------------------
   MOBILE
   ----------------------------- */

@media (max-width: 700px) {

    .repair-bg > .section-title {
        width: 100%;

        padding:
            17px 18px
            15px;

        font-size:
            clamp(
                1.85rem,
                10vw,
                2.8rem
            );

        letter-spacing: 0;
    }

    .repair-bg > .section-subtitle {
        font-size: .75rem;
        letter-spacing: .045rem;
        margin-bottom: 28px;
    }

    .repair-bg .analyzer-card h2,
    .repair-bg .featured h2,
    .repair-bg .featured h3,
    .repair-bg .analyzer-card p > strong,
    .repair-bg .featured p > strong {
        font-size:
            clamp(
                1.25rem,
                6vw,
                1.7rem
            );
    }
}

/* =========================================================
   PONYUP ANALYZER IMAGE BANNERS
   ========================================================= */

.analyzer-banner {
    display: block;
    width: min(1500px, 100%);
    height: auto;

    margin: -38px auto 42px;

    object-fit: contain;
}

@media (max-width: 768px) {
    .analyzer-banner {
        width: 100%;
        margin: -34px auto 28px;
    }
}

/* =========================================================
   BUY / SELL / TRADE / UPGRADE
   GLOWING PERFORMANCE SECTION HEADINGS
   ========================================================= */

.buy-bg .analyzer-card h2,
.buy-bg .analyzer-card h3,
.sell-bg .analyzer-card h2,
.sell-bg .analyzer-card h3,
.trade-bg .analyzer-card h2,
.trade-bg .analyzer-card h3,
.upgrade-bg .analyzer-card h2,
.upgrade-bg .analyzer-card h3 {
    color: #ff3131;

    font-size: clamp(1.45rem, 2.7vw, 2rem);
    font-weight: 1000;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: .035rem;
    text-transform: uppercase;

    -webkit-text-stroke: .75px #ffffff;

    text-shadow:
        0 2px 0 #850b10,
        0 4px 0 #480609,
        0 5px 0 #140101,
        0 0 5px rgba(255,255,255,.85),
        0 0 12px rgba(255,49,49,.95),
        0 0 22px rgba(255,49,49,.58);
}

/* =========================================================
   PONYUP TRADE — SIDE-BY-SIDE VEHICLE COMPARISON
   ========================================================= */

.trade-compare-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.trade-comparison-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.trade-vehicle-header {
    position: relative;
    padding: 14px 16px 12px;
    background:
        linear-gradient(
            180deg,
            rgba(20,20,20,.96),
            rgba(3,3,3,.97)
        );
    border: 1px solid rgba(255,49,49,.48);
    border-radius: 10px;
    box-shadow:
        0 0 22px rgba(0,0,0,.75),
        inset 0 0 18px rgba(255,49,49,.045);
    text-align: center;
}

.trade-value-label {
    color: #ff3131;
    font-size: .70rem;
    font-weight: 1000;
    letter-spacing: .12rem;
    text-transform: uppercase;
}

.trade-value-input {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 1000;
    margin: 2px 0 7px;
}

.trade-value-input input {
    width: 125px !important;
    padding: 2px 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,49,49,.65) !important;
    color: #fff !important;
    font-size: 1.45rem !important;
    font-weight: 1000 !important;
    text-align: center;
}

.trade-name-top {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.trade-name-top input,
.trade-model-name,
.trade-trim {
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    text-align: center;
}

.trade-name-top input:first-child {
    width: 64px;
}

.trade-name-top input:last-child {
    width: 150px;
}

.trade-name-top input {
    font-size: .86rem;
    font-weight: 850;
    text-transform: uppercase;
}

.trade-model-name {
    display: block;
    width: 100% !important;
    padding: 1px 4px !important;
    font-size: 1.30rem !important;
    line-height: 1.05;
    font-weight: 1000 !important;
    text-transform: uppercase;
}

.trade-trim {
    width: 100% !important;
    padding: 1px 4px 5px !important;
    color: #bdbdbd !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
}

.trade-vin-line {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 5px;
}

.trade-vin-line input {
    width: min(245px, 72%) !important;
    min-width: 0;
    padding: 5px 7px !important;
    font-size: .68rem !important;
    letter-spacing: .035rem;
    text-transform: uppercase;
}

.trade-decode-btn {
    padding: 5px 9px;
    border: 1px solid #ff3131;
    border-radius: 5px;
    background: #111;
    color: #ff3131;
    font-size: .62rem;
    font-weight: 1000;
    letter-spacing: .04rem;
}

.trade-history {
    position: relative;
    margin-top: 7px;
}

.trade-history summary {
    color: #ff3131;
    font-size: .66rem;
    font-weight: 1000;
    letter-spacing: .07rem;
    cursor: pointer;
    list-style: none;
}

.trade-history summary::-webkit-details-marker {
    display: none;
}

.trade-history[open] > div {
    position: absolute;
    z-index: 25;
    left: 50%;
    transform: translateX(-50%);
    width: min(360px, 94vw);
    padding: 12px;
    margin-top: 6px;
    background: rgba(4,4,4,.98);
    border: 1px solid rgba(255,49,49,.7);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,.9);
}

.trade-specs {
    width: min(1180px, 100%);
    margin: 10px auto 0;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,.68);
}

.trade-spec-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        118px
        minmax(0, 1fr);
    min-height: 31px;
    border-bottom: 1px solid rgba(255,255,255,.095);
}

.trade-spec-row:last-child {
    border-bottom: 0;
}

.trade-spec-row:nth-child(even) {
    background: rgba(255,255,255,.025);
}

.trade-spec-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-left: 1px solid rgba(255,49,49,.18);
    border-right: 1px solid rgba(255,49,49,.18);
    color: #ff3131;
    font-size: .65rem;
    font-weight: 1000;
    letter-spacing: .055rem;
    text-align: center;
}

.trade-spec-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 2px 7px;
}

.trade-spec-value input,
.trade-spec-value select {
    width: 100% !important;
    min-width: 0;
    padding: 3px 5px !important;
    background: transparent !important;
    border: 0 !important;
    color: #f7f7f7 !important;
    font-size: .76rem !important;
    font-weight: 750 !important;
    text-align: center;
}

.trade-spec-unit {
    color: #9f9f9f;
    font-size: .62rem;
    white-space: nowrap;
}

.trade-condition-row {
    min-height: 38px;
    background:
        linear-gradient(
            90deg,
            rgba(255,49,49,.045),
            rgba(0,0,0,.28),
            rgba(255,49,49,.045)
        ) !important;
}

.trade-condition-row .trade-spec-label {
    font-size: .72rem;
}

.trade-deal-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: min(760px, 100%);
    margin: 14px auto 0;
}

.trade-deal-field {
    text-align: center;
}

.trade-deal-field label {
    display: block;
    margin-bottom: 4px;
    color: #ff3131;
    font-size: .68rem;
    font-weight: 1000;
    letter-spacing: .07rem;
    text-transform: uppercase;
}

.trade-deal-field input {
    width: 150px !important;
    padding: 5px 7px !important;
    text-align: center;
    font-size: .85rem !important;
}

@media (max-width: 700px) {
    .trade-comparison-board {
        gap: 5px;
    }

    .trade-vehicle-header {
        padding: 9px 6px;
    }

    .trade-spec-row {
        grid-template-columns:
            minmax(0, 1fr)
            82px
            minmax(0, 1fr);
    }

    .trade-spec-label {
        font-size: .52rem;
        letter-spacing: .02rem;
        padding: 3px;
    }

    .trade-spec-value {
        padding: 2px 3px;
    }

    .trade-spec-value input,
    .trade-spec-value select {
        font-size: .65rem !important;
        padding: 2px !important;
    }

    .trade-model-name {
        font-size: .92rem !important;
    }

    .trade-name-top input {
        font-size: .68rem !important;
    }

    .trade-history[open] > div {
        position: fixed;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* =========================================================
   PONYUP TRADE ANALYZER — COMPARISON BOARD
   ========================================================= */

.trade-compare-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.trade-vehicle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.trade-vehicle-card {
    position: relative;
    min-width: 0;
    padding: 12px 14px 10px;
    background:
        linear-gradient(
            180deg,
            rgba(18,18,18,.96),
            rgba(2,2,2,.98)
        );
    border: 1px solid rgba(255,49,49,.48);
    border-radius: 9px;
    box-shadow:
        0 0 26px rgba(0,0,0,.76),
        inset 0 0 20px rgba(255,49,49,.045);
    text-align: center;
}

.trade-side-label {
    color: #ff3131;
    font-size: .78rem;
    font-weight: 1000;
    font-style: italic;
    letter-spacing: .08rem;
    text-transform: uppercase;
    text-shadow:
        0 0 9px rgba(255,49,49,.75);
    margin-bottom: 3px;
}

.trade-market-label {
    color: #aaa;
    font-size: .59rem;
    font-weight: 900;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.trade-market-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: 2px;
    color: #fff;
    font-size: 1.18rem;
    font-weight: 1000;
}

.trade-market-value input {
    width: 118px !important;
    padding: 0 2px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,49,49,.6) !important;
    color: #fff !important;
    font-size: 1.18rem !important;
    font-weight: 1000 !important;
    text-align: center;
}

.trade-name-line {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: 2px;
}

.trade-year,
.trade-make,
.trade-model,
.trade-trim {
    background: transparent !important;
    border: 0 !important;
    text-align: center !important;
}

.trade-year {
    width: 62px !important;
    padding: 1px !important;
    color: #ddd !important;
    font-size: .77rem !important;
    font-weight: 850 !important;
}

.trade-make {
    width: 145px !important;
    padding: 1px !important;
    color: #ddd !important;
    font-size: .77rem !important;
    font-weight: 850 !important;
    text-transform: uppercase;
}

.trade-model {
    display: block;
    width: 100% !important;
    padding: 0 2px !important;
    color: #fff !important;
    font-size: 1.12rem !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    text-transform: uppercase;
}

.trade-trim {
    width: 100% !important;
    padding: 1px 2px 3px !important;
    color: #999 !important;
    font-size: .65rem !important;
    font-weight: 800 !important;
}

.trade-vin-row {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 3px;
}

.trade-vin-row input {
    width: min(230px, 72%) !important;
    min-width: 0;
    padding: 4px 5px !important;
    font-size: .61rem !important;
    letter-spacing: .025rem;
    text-transform: uppercase;
}

.trade-decode-button {
    padding: 4px 7px;
    border: 1px solid #ff3131;
    border-radius: 4px;
    background: #0b0b0b;
    color: #ff3131;
    font-size: .57rem;
    font-weight: 1000;
    letter-spacing: .035rem;
}

.trade-decode-button:hover {
    background: #ff3131;
    color: #050505;
}

.trade-mini-message {
    display: block;
    margin-top: 3px;
    color: #bbb;
    font-size: .57rem;
    font-weight: 700;
    line-height: 1.2;
}

.trade-mini-message.value {
    color: #ff6a6a;
}

.trade-history {
    position: relative;
    margin-top: 5px;
}

.trade-history summary {
    color: #ff3131;
    font-size: .59rem;
    font-weight: 1000;
    letter-spacing: .055rem;
    cursor: pointer;
    list-style: none;
}

.trade-history summary::-webkit-details-marker {
    display: none;
}

.trade-history-panel {
    position: absolute;
    z-index: 30;
    left: 50%;
    transform: translateX(-50%);
    width: min(330px, 94vw);
    margin-top: 5px;
    padding: 9px;
    background: rgba(4,4,4,.99);
    border: 1px solid rgba(255,49,49,.76);
    border-radius: 7px;
    box-shadow: 0 12px 32px rgba(0,0,0,.92);
}

.trade-history-field {
    display: grid;
    grid-template-columns: 82px 1fr;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.trade-history-field:last-child {
    margin-bottom: 0;
}

.trade-history-field label {
    margin: 0;
    color: #aaa;
    font-size: .58rem;
    font-weight: 900;
    text-align: right;
    text-transform: uppercase;
}

.trade-history-field input,
.trade-history-field select {
    width: 100% !important;
    padding: 3px 5px !important;
    font-size: .64rem !important;
}

.trade-spec-table {
    width: 100%;
    margin-top: 9px;
    overflow: hidden;
    background: rgba(0,0,0,.74);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
}

.trade-spec-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        108px
        minmax(0, 1fr);
    min-height: 29px;
    border-bottom: 1px solid rgba(255,255,255,.085);
}

.trade-spec-row:last-child {
    border-bottom: 0;
}

.trade-spec-row:nth-child(even) {
    background: rgba(255,255,255,.022);
}

.trade-spec-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 4px;
    border-left: 1px solid rgba(255,49,49,.18);
    border-right: 1px solid rgba(255,49,49,.18);
    color: #ff3131;
    font-size: .59rem;
    font-weight: 1000;
    letter-spacing: .035rem;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.trade-spec-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 1px 5px;
}

.trade-spec-value input,
.trade-spec-value select {
    width: 100% !important;
    min-width: 0;
    padding: 2px 4px !important;
    background: transparent !important;
    border: 0 !important;
    color: #f4f4f4 !important;
    font-size: .70rem !important;
    font-weight: 750 !important;
    text-align: center;
}

.trade-spec-value.unit {
    gap: 2px;
}

.trade-spec-value.unit input {
    width: auto !important;
    flex: 1;
}

.trade-spec-value.unit span {
    color: #888;
    font-size: .48rem;
    font-weight: 800;
}

.trade-mpg {
    gap: 2px;
}

.trade-mpg input {
    width: 42% !important;
}

.trade-mpg > span {
    color: #777;
    font-size: .65rem;
}

.trade-condition-row {
    min-height: 34px;
    background:
        linear-gradient(
            90deg,
            rgba(255,49,49,.04),
            rgba(0,0,0,.18),
            rgba(255,49,49,.04)
        ) !important;
}

.trade-condition-row .trade-spec-label {
    font-size: .64rem;
}

.trade-cash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: min(620px, 100%);
    margin: 12px auto 0;
}

.trade-cash-grid > div {
    text-align: center;
}

.trade-cash-grid label {
    display: block;
    margin-bottom: 3px;
    color: #ff3131;
    font-size: .60rem;
    font-weight: 1000;
    letter-spacing: .055rem;
}

.trade-cash-grid input {
    width: 130px !important;
    padding: 4px 6px !important;
    font-size: .72rem !important;
    text-align: center;
}

.trade-analyze-action {
    text-align: center;
    margin-top: 12px;
}

.trade-analyze-action .btn-red {
    padding: 9px 22px;
}

.trade-result-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 18px auto;
    padding: 10px;
    background: rgba(0,0,0,.80);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
}

.trade-result-summary > div {
    text-align: center;
}

.trade-result-summary span {
    display: block;
    color: #999;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .045rem;
}

.trade-result-summary strong {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: .92rem;
    font-weight: 1000;
}

@media (max-width: 700px) {

    .trade-compare-shell {
        width: 100%;
    }

    .trade-vehicle-grid {
        gap: 4px;
    }

    .trade-vehicle-card {
        padding: 7px 5px;
    }

    .trade-side-label {
        font-size: .62rem;
    }

    .trade-market-label {
        font-size: .48rem;
    }

    .trade-market-value {
        font-size: .92rem;
    }

    .trade-market-value input {
        width: 82px !important;
        font-size: .92rem !important;
    }

    .trade-year {
        width: 48px !important;
        font-size: .60rem !important;
    }

    .trade-make {
        width: 90px !important;
        font-size: .60rem !important;
    }

    .trade-model {
        font-size: .82rem !important;
    }

    .trade-trim {
        font-size: .53rem !important;
    }

    .trade-vin-row {
        gap: 2px;
    }

    .trade-vin-row input {
        width: 72% !important;
        padding: 3px !important;
        font-size: .50rem !important;
    }

    .trade-decode-button {
        padding: 3px 4px;
        font-size: .47rem;
    }

    .trade-history summary {
        font-size: .50rem;
    }

    .trade-spec-row {
        grid-template-columns:
            minmax(0, 1fr)
            76px
            minmax(0, 1fr);
        min-height: 27px;
    }

    .trade-spec-label {
        padding: 2px;
        font-size: .47rem;
        letter-spacing: .012rem;
    }

    .trade-spec-value {
        padding: 1px 2px;
    }

    .trade-spec-value input,
    .trade-spec-value select {
        padding: 1px 2px !important;
        font-size: .58rem !important;
    }

    .trade-spec-value.unit span {
        font-size: .40rem;
    }

    .trade-cash-grid {
        gap: 5px;
    }

    .trade-cash-grid label {
        font-size: .50rem;
    }

    .trade-cash-grid input {
        width: 100px !important;
        font-size: .62rem !important;
    }

    .trade-result-summary {
        gap: 3px;
        padding: 6px 3px;
    }

    .trade-result-summary span {
        font-size: .43rem;
    }

    .trade-result-summary strong {
        font-size: .70rem;
    }
}

/* =========================================================
   TRADE SELECT / DROPDOWN READABILITY
   ========================================================= */

.trade-spec-value select,
.trade-history-field select {
    background: #0b0b0b !important;
    color: #f5f5f5 !important;
    color-scheme: dark;
}

.trade-spec-value select option,
.trade-history-field select option {
    background: #0b0b0b !important;
    color: #f5f5f5 !important;
}

.trade-spec-value select option:checked,
.trade-history-field select option:checked {
    background: #2a0a0a !important;
    color: #ffffff !important;
}

/* =========================================================
   PONYUP RESOURCES PAGE
   ========================================================= */

.resources-banner {
    width: 100%;
    overflow: hidden;
    background: #050505;
    border-bottom: 1px solid rgba(255,49,49,.7);
    box-shadow: 0 10px 28px rgba(0,0,0,.7);
}

.resources-banner img {
    display: block;
    width: 100%;
    height: clamp(300px, 31vw, 440px);
    object-fit: cover;
    object-position: center 55%;
}

.resources-page {
    padding-top: 48px;
}

.resources-page .resource-grid {
    max-width: 1400px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
}

.resources-page .resource-card {
    min-width: 0;
    overflow: hidden;
    padding: 28px 20px;
}

.resources-page .resource-card h3 {
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    line-height: 1.08;
}

@media (max-width: 1200px) {
    .resources-page .resource-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .resources-banner img {
        height: 300px;
    }

    .resources-page .resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .resources-banner img {
        height: 230px;
        object-position: center 53%;
    }

    .resources-page .resource-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   DECISION CENTER
   The artwork is the UI. These links are intentionally invisible.
   ========================================================= */

.decision-center-page {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #050505 !important;
}

.decision-center-stage {
    position: relative;
    width: 100%;
    margin: 0;
    line-height: 0;
    overflow: hidden;
}

.decision-center-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    user-select: none;
    -webkit-user-drag: none;
}

.decision-center-hotspot {
    position: absolute;
    top: 21.5%;
    height: 36.5%;
    display: block;
    background: transparent;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.decision-center-hotspot:hover,
.decision-center-hotspot:active {
    background: transparent;
}

.decision-center-hotspot:focus-visible {
    outline: 3px solid rgba(255, 49, 49, .9);
    outline-offset: -4px;
}

.decision-center-repair {
    left: 0;
    width: 21%;
}

.decision-center-buy {
    left: 21%;
    width: 18.5%;
}

.decision-center-sell {
    left: 39.5%;
    width: 17%;
}

.decision-center-trade {
    left: 56.5%;
    width: 25.5%;
}

.decision-center-upgrade {
    left: 82%;
    width: 18%;
}

/* =========================================================
   MY GARAGE / PROFILE DASHBOARD
   ========================================================= */

.garage-page {
    min-height: calc(100vh - 86px);
    padding: 0;
    background:
        radial-gradient(circle at 58% 28%, rgba(255,49,49,.07), transparent 34%),
        linear-gradient(135deg, rgba(15,18,20,.98), rgba(4,7,9,.99)) !important;
}

.garage-dashboard {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    width: 100%;
    max-width: 1720px;
    min-height: calc(100vh - 86px);
    margin: 0 auto;
    border-left: 1px solid rgba(255,255,255,.08);
    border-right: 1px solid rgba(255,255,255,.08);
    background: rgba(4,7,9,.94);
    box-shadow: 0 0 70px rgba(0,0,0,.55);
}

.garage-sidebar {
    min-width: 0;
    padding: 18px 16px 24px;
    border-right: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(11,16,19,.98), rgba(5,9,11,.98));
}

.garage-sidebar-header,
.garage-main-header,
.garage-history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.garage-sidebar-header {
    margin-bottom: 16px;
}

.garage-sidebar-header h2,
.garage-main-header h1,
.garage-selected-summary h2,
.garage-paint-heading h3,
.garage-info-column h3,
.garage-history-heading h3 {
    margin: 0;
    color: #fff;
    font-weight: 900;
    letter-spacing: .01em;
}

.garage-sidebar-header h2 {
    font-size: 1rem;
}

.garage-add-trigger,
.garage-main-add,
.garage-sidebar-empty button {
    border: 1px solid rgba(255,49,49,.9);
    border-radius: 4px;
    background: linear-gradient(180deg, #be2828, #8f1519);
    color: #fff;
    font-weight: 900;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.garage-add-trigger {
    padding: 9px 12px;
    font-size: .78rem;
}

.garage-add-trigger span {
    margin-right: 7px;
    font-size: 1.05rem;
}

.garage-main-add {
    padding: 12px 20px;
}

.garage-add-trigger:hover,
.garage-main-add:hover,
.garage-sidebar-empty button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(255,49,49,.26);
}

.garage-vehicle-list {
    display: grid;
    gap: 2px;
}

.garage-vehicle-row {
    display: grid;
    grid-template-columns: 102px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    min-height: 106px;
    padding: 10px 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #fff;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.garage-vehicle-row:hover {
    background: rgba(255,255,255,.025);
    border-color: rgba(255,255,255,.12);
    color: #fff;
}

.garage-vehicle-row.active {
    border-color: #ff3131;
    background:
        linear-gradient(90deg, rgba(255,49,49,.09), rgba(255,49,49,.015));
    box-shadow: inset 0 0 22px rgba(255,49,49,.04);
}

.garage-vehicle-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 102px;
    height: 74px;
    overflow: hidden;
}

.garage-vehicle-thumb .garage-render-svg {
    width: 118px;
    max-width: none;
    height: auto;
    transform: scale(1.18);
    transform-origin: center;
}

.garage-vehicle-copy {
    min-width: 0;
}

.garage-vehicle-copy strong {
    display: block;
    color: #fff;
    font-size: .94rem;
    line-height: 1.28;
    font-weight: 800;
}

.garage-vehicle-row.active .garage-vehicle-copy strong {
    color: #ff4c4c;
}

.garage-vehicle-copy small {
    display: block;
    margin-top: 8px;
    color: #c7cbcf;
    font-size: .82rem;
}

.garage-row-chevron {
    color: #fff;
    font-size: 2rem;
    font-weight: 300;
    opacity: .9;
}

.garage-history-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin: 18px 0 14px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .035em;
}

.garage-history-link:hover {
    color: #fff;
    border-color: rgba(255,49,49,.65);
}

.garage-profile-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.garage-profile-mini > div {
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 4px;
    background: rgba(255,255,255,.02);
}

.garage-profile-mini span,
.garage-profile-mini strong {
    display: block;
}

.garage-profile-mini span {
    color: #8e969d;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .09em;
}

.garage-profile-mini strong {
    margin-top: 4px;
    color: #fff;
    font-size: .82rem;
}

.garage-sidebar-empty {
    padding: 26px 12px;
    border: 1px dashed rgba(255,255,255,.15);
    border-radius: 6px;
    text-align: center;
}

.garage-sidebar-empty p {
    color: #aeb5ba;
}

.garage-sidebar-empty button {
    padding: 10px 13px;
}

.garage-add-panel {
    margin-top: 12px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 6px;
    background: rgba(0,0,0,.24);
}

.garage-add-panel summary {
    padding: 13px 14px;
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
    cursor: pointer;
    list-style: none;
}

.garage-add-panel summary::-webkit-details-marker {
    display: none;
}

.garage-add-panel[open] summary {
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: #ff4a4a;
}

.garage-add-form {
    padding: 14px;
}

.garage-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.garage-field-wide {
    grid-column: 1 / -1;
}

.garage-field label {
    display: block;
    margin-bottom: 5px;
    color: #dce0e3;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .03em;
}

.garage-field label span {
    color: #747c83;
    font-weight: 600;
}

.garage-field input {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.17) !important;
    border-radius: 4px;
    background: #0b0f12 !important;
    color: #fff !important;
    font-size: .79rem;
}

.garage-field input:focus {
    outline: 1px solid rgba(255,49,49,.65);
    border-color: #ff3131 !important;
}

.garage-vin-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

.garage-validation {
    display: block;
    margin-top: 5px;
    color: #ff6666;
    font-size: .7rem;
}

.garage-secondary-button {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 4px;
    background: linear-gradient(180deg, #1a2024, #0c1013);
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
}

.garage-add-button {
    width: 100%;
    margin-top: 12px;
}

.garage-main {
    min-width: 0;
    padding: 22px 28px 36px;
}

.garage-main-header {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.16);
}

.garage-main-header h1 {
    font-size: clamp(1.8rem, 3vw, 2.45rem);
}

.garage-main-header p {
    margin: 5px 0 0;
    color: #b4bbc0;
    font-size: .95rem;
}

.garage-main-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.garage-settings-link {
    padding: 11px 16px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .025em;
}

.garage-settings-link:hover {
    color: #fff;
    border-color: rgba(255,49,49,.62);
}

.garage-message {
    margin-top: 14px;
    padding: 11px 14px;
    border: 1px solid rgba(255,49,49,.45);
    border-radius: 4px;
    background: rgba(255,49,49,.07);
    color: #fff;
    font-weight: 700;
}

.garage-selected-summary {
    padding: 21px 2px 10px;
}

.garage-selected-summary h2 {
    font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.garage-selected-summary p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 7px 0 0;
    color: #d0d4d7;
}

.garage-selected-summary p i {
    display: inline-block;
    width: 1px;
    height: 17px;
    background: rgba(255,255,255,.35);
}

.garage-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
    gap: 22px;
    min-height: 470px;
}

.garage-stage-area {
    position: relative;
    min-width: 0;
    min-height: 470px;
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 56%, rgba(255,255,255,.055), transparent 42%),
        radial-gradient(ellipse at 50% 84%, rgba(255,49,49,.08), transparent 34%);
}

.garage-viewer-wrap {
    position: relative;
    width: 100%;
    height: 470px;
}

.garage-3d-viewer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
}

.garage-3d-viewer:active {
    cursor: grabbing;
}

.garage-3d-viewer canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.garage-render-fallback {
    position: absolute;
    inset: 12% 12% 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .82;
}

.garage-render-fallback .garage-render-svg {
    width: min(760px, 95%);
    height: auto;
}

.garage-viewer-hint {
    position: absolute;
    left: 50%;
    bottom: 13px;
    z-index: 4;
    transform: translateX(-50%);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.48);
    color: rgba(255,255,255,.58);
    font-size: .68rem;
    letter-spacing: .02em;
    pointer-events: none;
    white-space: nowrap;
}

.garage-stage-arrow {
    position: absolute;
    top: 44%;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: 2px solid rgba(255,255,255,.55);
    border-radius: 50%;
    background: rgba(8,12,15,.74);
    color: #fff;
    text-decoration: none;
    font-size: 2.4rem;
    line-height: .7;
    backdrop-filter: blur(4px);
}

.garage-stage-arrow small {
    position: absolute;
    top: 65px;
    color: #d7dadd;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .06em;
}

.garage-stage-arrow:hover {
    color: #fff;
    border-color: #ff3131;
    box-shadow: 0 0 18px rgba(255,49,49,.25);
}

.garage-stage-prev {
    left: 12px;
}

.garage-stage-next {
    right: 12px;
}

.garage-paint-panel {
    align-self: stretch;
    padding: 17px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(17,21,24,.88), rgba(8,12,14,.94));
}

.garage-paint-heading h3 {
    font-size: 1rem;
}

.garage-paint-heading p {
    margin: 6px 0 17px;
    color: #b1b8bd;
    font-size: .78rem;
}

.garage-paint-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px 10px;
}

.garage-paint-form {
    margin: 0;
}

.garage-paint-chip {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.garage-paint-swatch {
    display: block;
    width: 40px;
    height: 40px;
    max-width: 100%;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 50%;
    box-shadow: inset 0 0 14px rgba(255,255,255,.12);
}

.garage-paint-chip.selected .garage-paint-swatch {
    outline: 2px solid #ff3131;
    outline-offset: 3px;
    box-shadow:
        0 0 14px rgba(255,49,49,.34),
        inset 0 0 14px rgba(255,255,255,.16);
}

.garage-paint-current {
    margin-top: 20px;
    padding: 13px 12px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 4px;
    background: rgba(0,0,0,.22);
}

.garage-paint-current strong,
.garage-paint-current span {
    display: block;
}

.garage-paint-current strong {
    color: #fff;
    font-size: .78rem;
}

.garage-paint-current span {
    margin-top: 4px;
    color: #b8bec3;
    font-size: .72rem;
}

.garage-view-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 5vw, 72px);
    margin: 4px 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.11);
}

.garage-view-tabs a {
    display: grid;
    gap: 4px;
    min-width: 80px;
    padding: 10px 6px 13px;
    border-bottom: 2px solid transparent;
    color: #d4d8db;
    text-align: center;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 850;
}

.garage-view-tabs a span {
    font-size: 1.35rem;
}

.garage-view-tabs a:hover,
.garage-view-tabs a.active {
    color: #ff3d3d;
    border-bottom-color: #ff3131;
}

.garage-info-board,
.garage-history-board {
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(12,16,19,.88), rgba(7,10,12,.92));
}

.garage-info-board {
    display: grid;
    grid-template-columns: 1fr 1fr 1.08fr;
    margin-top: 4px;
}

.garage-info-column {
    min-width: 0;
    padding: 20px 22px;
}

.garage-info-column + .garage-info-column {
    border-left: 1px solid rgba(255,255,255,.12);
}

.garage-info-column h3,
.garage-history-heading h3 {
    margin-bottom: 15px;
    font-size: .9rem;
}

.garage-detail-list,
.garage-analysis-list {
    display: grid;
    gap: 7px;
    margin: 0;
}

.garage-detail-list > div,
.garage-analysis-list > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.garage-detail-list dt,
.garage-analysis-list dt {
    color: #aeb5ba;
    font-size: .78rem;
}

.garage-detail-list dd,
.garage-analysis-list dd {
    margin: 0;
    color: #fff;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.garage-recommendation {
    color: #70df72 !important;
    font-weight: 900;
    text-transform: uppercase;
}

.garage-mileage-form {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.1);
}

.garage-mileage-form label {
    display: block;
    margin-bottom: 6px;
    color: #aeb5ba;
    font-size: .72rem;
    font-weight: 800;
}

.garage-mileage-form > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
}

.garage-mileage-form input {
    min-width: 0;
    height: 38px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.17) !important;
    border-radius: 4px;
    background: #0b0f12 !important;
    color: #fff !important;
}

.garage-no-analysis {
    color: #aeb5ba;
    font-size: .82rem;
}

.garage-no-analysis a,
.garage-analysis-button {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 13px;
    border: 1px solid #ff3131;
    border-radius: 4px;
    color: #ff4a4a;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 900;
}

.garage-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.garage-quick-actions h3 {
    margin-bottom: 4px;
}

.garage-quick-actions > a,
.garage-quick-actions > button,
.garage-quick-actions form button {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 43px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 4px;
    background: rgba(255,255,255,.015);
    color: #fff;
    text-align: left;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 850;
    cursor: pointer;
}

.garage-quick-actions > a:hover,
.garage-quick-actions > button:hover,
.garage-quick-actions form button:hover {
    border-color: rgba(255,49,49,.65);
    background: rgba(255,49,49,.05);
}

.garage-quick-actions form {
    margin: 0;
}

.garage-quick-actions .garage-remove-action {
    color: #ff6868;
}

.garage-history-board {
    margin-top: 14px;
    padding: 18px 20px;
    scroll-margin-top: 105px;
}

.garage-history-heading p {
    margin: 4px 0 0;
    color: #90989e;
    font-size: .76rem;
}

.garage-history-heading a {
    color: #ff4a4a;
    font-size: .74rem;
    font-weight: 900;
    text-decoration: none;
}

.garage-history-list {
    display: grid;
    gap: 8px;
    margin-top: 15px;
}

.garage-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 1fr 1fr;
    gap: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 4px;
    background: rgba(255,255,255,.015);
}

.garage-history-row span,
.garage-history-row strong {
    display: block;
}

.garage-history-row span {
    color: #8e969d;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.garage-history-row strong {
    margin-top: 4px;
    color: #fff;
    font-size: .8rem;
}

.garage-history-type strong {
    color: #ff4c4c;
}

.garage-muted {
    color: #9da5ab;
}

.garage-empty-state {
    display: grid;
    justify-items: center;
    align-content: center;
    min-height: 620px;
    padding: 40px;
    text-align: center;
}

.garage-empty-mark {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin-bottom: 20px;
    border: 2px solid #ff3131;
    border-radius: 50%;
    color: #ff3131;
    font-size: 2.4rem;
    font-weight: 1000;
    box-shadow: 0 0 24px rgba(255,49,49,.18);
}

.garage-empty-state h2 {
    margin: 0;
    color: #fff;
}

.garage-empty-state p {
    max-width: 520px;
    color: #aeb5ba;
}

@media (max-width: 1260px) {
    .garage-dashboard {
        grid-template-columns: 285px minmax(0, 1fr);
    }

    .garage-showcase {
        grid-template-columns: minmax(0, 1fr) 235px;
    }

    .garage-info-board {
        grid-template-columns: 1fr 1fr;
    }

    .garage-quick-actions {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(255,255,255,.12);
        border-left: 0 !important;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .garage-quick-actions h3 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    .garage-dashboard {
        display: block;
    }

    .garage-sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .garage-vehicle-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .garage-add-panel {
        max-width: 680px;
    }

    .garage-showcase {
        grid-template-columns: 1fr;
    }

    .garage-paint-panel {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr) 180px;
        align-items: center;
        gap: 18px;
    }

    .garage-paint-heading p {
        margin-bottom: 0;
    }

    .garage-paint-current {
        margin-top: 0;
    }

    .garage-paint-grid {
        grid-template-columns: repeat(8, minmax(34px, 1fr));
    }
}

@media (max-width: 720px) {
    .garage-main {
        padding: 18px 14px 28px;
    }

    .garage-main-header {
        align-items: flex-start;
    }

    .garage-main-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .garage-settings-link,
    .garage-main-add {
        padding: 9px 11px;
        font-size: .68rem;
    }

    .garage-vehicle-list {
        grid-template-columns: 1fr;
    }

    .garage-showcase,
    .garage-stage-area,
    .garage-viewer-wrap {
        min-height: 390px;
        height: 390px;
    }

    .garage-paint-panel {
        display: block;
    }

    .garage-paint-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .garage-paint-current {
        margin-top: 18px;
    }

    .garage-view-tabs {
        justify-content: space-between;
        gap: 5px;
        overflow-x: auto;
    }

    .garage-view-tabs a {
        min-width: 70px;
        font-size: .64rem;
    }

    .garage-info-board {
        grid-template-columns: 1fr;
    }

    .garage-info-column + .garage-info-column {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.12);
    }

    .garage-quick-actions {
        grid-column: auto;
        display: flex;
    }

    .garage-history-row {
        grid-template-columns: 1fr;
    }

    .garage-stage-arrow {
        top: 47%;
        width: 46px;
        height: 46px;
    }

    .garage-stage-prev {
        left: 4px;
    }

    .garage-stage-next {
        right: 4px;
    }

    .garage-viewer-hint {
        display: none;
    }
}

/* =========================================================
   GARAGE LIVE-FIX: SETTINGS, VIN IMPORT, EMPTY STATE
   ========================================================= */

.garage-settings-link {
    background: rgba(255,255,255,.015);
    cursor: pointer;
}

.garage-profile-mini strong {
    min-height: 1.1em;
}

.garage-settings-panel {
    margin-top: 14px;
    padding: 18px 20px;
    border: 1px solid rgba(255,49,49,.32);
    border-radius: 7px;
    background:
        linear-gradient(180deg, rgba(20,24,27,.96), rgba(8,11,13,.97));
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

.garage-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.garage-settings-heading h2 {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: .035em;
}

.garage-settings-heading p {
    margin: 5px 0 0;
    color: #9ca4aa;
    font-size: .78rem;
}

.garage-settings-heading button,
.garage-modal-heading button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(255,255,255,.025);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
}

.garage-settings-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.garage-settings-grid > div {
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 5px;
    background: rgba(0,0,0,.18);
}

.garage-settings-grid span,
.garage-settings-grid strong {
    display: block;
}

.garage-settings-grid span {
    color: #858e95;
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.garage-settings-grid strong {
    margin-top: 5px;
    color: #fff;
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.garage-owner-access {
    margin-top: 12px;
    padding: 11px 14px;
    border: 1px solid rgba(255,49,49,.4);
    border-radius: 5px;
    background: rgba(255,49,49,.065);
    color: #ff5757;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .065em;
    text-align: center;
}

body.garage-modal-open {
    overflow: hidden;
}

.garage-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 22px;
}

.garage-modal[hidden] {
    display: none !important;
}

.garage-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(6px);
}

.garage-modal-card {
    position: relative;
    z-index: 1;
    width: min(760px, 96vw);
    max-height: min(860px, 92vh);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid rgba(255,49,49,.5);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,49,49,.07), transparent 32%),
        linear-gradient(180deg, #11171a, #070a0c);
    box-shadow:
        0 28px 100px rgba(0,0,0,.8),
        0 0 34px rgba(255,49,49,.12);
}

.garage-modal-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.garage-modal-heading h2 {
    margin: 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 950;
    letter-spacing: .03em;
}

.garage-modal-heading p {
    margin: 5px 0 0;
    color: #9fa7ad;
    font-size: .8rem;
}

.garage-recent-vins {
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 6px;
    background: rgba(0,0,0,.18);
}

.garage-recent-vins h3 {
    margin: 0 0 9px;
    color: #dce1e4;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .07em;
}

.garage-recent-vins > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.garage-recent-vin-option {
    display: block;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px;
    background: rgba(255,255,255,.018);
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.garage-recent-vin-option:hover {
    border-color: rgba(255,49,49,.65);
    background: rgba(255,49,49,.05);
}

.garage-recent-vin-option strong,
.garage-recent-vin-option span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.garage-recent-vin-option strong {
    color: #ff4e4e;
    font-size: .73rem;
    letter-spacing: .025em;
}

.garage-recent-vin-option span {
    margin-top: 4px;
    color: #aeb5ba;
    font-size: .7rem;
}

.garage-history-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.35fr) .75fr .9fr;
}

@media (max-width: 980px) {
    .garage-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .garage-recent-vins > div {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .garage-modal {
        padding: 8px;
    }

    .garage-modal-card {
        width: 100%;
        max-height: 96vh;
        padding: 16px;
    }

    .garage-settings-grid {
        grid-template-columns: 1fr;
    }

    .garage-history-row {
        grid-template-columns: 1fr;
    }
}

/* Exact vehicle model status */
.garage-model-quality {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(0,0,0,.56);
    color: #d9dde0;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    pointer-events: none;
    backdrop-filter: blur(4px);
}

.garage-model-quality.exact {
    border-color: rgba(255,49,49,.72);
    color: #ff5656;
    box-shadow: 0 0 16px rgba(255,49,49,.18);
}

.garage-model-quality.fallback {
    color: #9aa2a8;
}

/* =========================================================
   GARAGE CATALOG 3D VIEWER
   ========================================================= */

.garage-catalog-viewer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background:
        radial-gradient(120% 120% at 50% 28%, #22272b, #090c0e);
    border: 0;
    outline: 0;
}

.garage-catalog-viewer::part(default-progress-bar) {
    background: #ff3131;
}

.garage-catalog-viewer::part(default-progress-mask) {
    background: rgba(7,10,12,.94);
}

.garage-model-unavailable {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 30px;
    background:
        radial-gradient(ellipse at 50% 58%, rgba(255,49,49,.08), transparent 36%),
        linear-gradient(180deg, rgba(18,22,25,.96), rgba(7,10,12,.98));
    text-align: center;
}

.garage-model-unavailable-mark {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    border: 2px solid rgba(255,49,49,.75);
    border-radius: 50%;
    color: #ff4a4a;
    font-size: 1.55rem;
    font-weight: 1000;
    box-shadow: 0 0 24px rgba(255,49,49,.16);
}

.garage-model-unavailable strong {
    color: #fff;
    font-size: .9rem;
    letter-spacing: .04em;
}

.garage-model-unavailable span {
    max-width: 430px;
    color: #9da5ab;
    font-size: .76rem;
    line-height: 1.5;
}

.garage-catalog-viewer-error {
    opacity: .82;
}

.garage-vehicle-thumb-image {
    display: block;
    width: 112px;
    max-width: 112px;
    height: 78px;
    object-fit: contain;
    filter: drop-shadow(0 6px 8px rgba(0,0,0,.38));
}

.garage-vehicle-thumb-placeholder {
    display: grid;
    place-items: center;
    width: 72px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px 999px 12px 12px;
    color: #7f878d;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
}

/* =========================================================
   OWNER 3D MODEL CATALOG
   ========================================================= */

.garage-model-catalog-link {
    display: block;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255,49,49,.55);
    border-radius: 4px;
    background: rgba(255,49,49,.045);
    color: #ff5151;
    text-align: center;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .055em;
}

.garage-model-catalog-link:hover {
    color: #fff;
    border-color: #ff3131;
    background: rgba(255,49,49,.1);
}

.model-catalog-page {
    width: min(1500px, calc(100% - 28px));
    margin: 0 auto;
    padding: 30px 0 50px;
}

.model-catalog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 8px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255,49,49,.08), transparent 34%),
        linear-gradient(180deg, rgba(16,20,23,.97), rgba(7,10,12,.98));
}

.model-catalog-header p {
    margin: 0 0 5px;
    color: #ff4c4c;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .12em;
}

.model-catalog-header h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 1000;
}

.model-catalog-header span {
    display: block;
    margin-top: 7px;
    color: #aeb5ba;
}

.model-catalog-header > a {
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 900;
}

.model-catalog-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.model-catalog-stats > div {
    padding: 17px 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    background: rgba(255,255,255,.018);
}

.model-catalog-stats span,
.model-catalog-stats strong {
    display: block;
}

.model-catalog-stats span {
    color: #889198;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.model-catalog-stats strong {
    margin-top: 6px;
    color: #fff;
    font-size: 1.7rem;
}

.model-catalog-panel {
    margin-top: 14px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(13,17,20,.95), rgba(7,10,12,.96));
}

.model-catalog-panel-head h2 {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
}

.model-catalog-panel-head p {
    margin: 5px 0 0;
    color: #929aa0;
    font-size: .78rem;
}

.model-catalog-table-wrap {
    margin-top: 16px;
    overflow-x: auto;
}

.model-catalog-table {
    width: 100%;
    border-collapse: collapse;
}

.model-catalog-table th,
.model-catalog-table td {
    padding: 10px 11px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
    white-space: nowrap;
}

.model-catalog-table th {
    color: #8e969d;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .075em;
}

.model-catalog-table td {
    color: #e8ebed;
    font-size: .77rem;
}

.model-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .61rem;
    font-weight: 950;
    letter-spacing: .05em;
}

.model-status.live {
    border: 1px solid rgba(77,219,105,.55);
    background: rgba(77,219,105,.08);
    color: #72e78a;
}

.model-status.missing {
    border: 1px solid rgba(255,49,49,.5);
    background: rgba(255,49,49,.065);
    color: #ff5b5b;
}

.model-asset-path {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.model-catalog-empty {
    margin: 16px 0 0;
    color: #9ca4aa;
}

@media (max-width: 760px) {
    .model-catalog-header {
        display: block;
    }

    .model-catalog-header > a {
        display: inline-block;
        margin-top: 16px;
    }

    .model-catalog-stats {
        grid-template-columns: 1fr;
    }
}