/* =========================================================
SECTION 1 - OUTPUT PANEL
========================================================= */

.output{

padding:30px;

width:100%;

max-width:1500px;

min-height:900px;

margin-top:24px;

margin-left:auto;

margin-right:auto;

}

/* =========================================================
SECTION 2 - PLACEHOLDER
========================================================= */

.output-placeholder{

text-align:center;

padding:120px 20px;

}

.output-title{

font-size:48px;

font-weight:900;

margin-bottom:20px;

}

.output-subtitle{

font-size:22px;

color:#cbd5e1;

}

/* =========================================================
SECTION 3 - RESULT GRID
========================================================= */

.result-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-top:24px;

}

/* =========================================================
SECTION 4 - GUIDE CARDS
========================================================= */

.info-card{

background:#0f172a;

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

padding:24px;

border-radius:24px;

transition:.25s;

}

.info-card:hover{

transform:translateY(-3px);

border-color:
rgba(
0,
212,
255,
.25
);

}

.info-title{

font-size:24px;

font-weight:900;

margin-bottom:18px;

color:var(--cyan);

text-transform:uppercase;

letter-spacing:.5px;

}

.info-text{

line-height:2;

font-size:16px;

color:#dbe4ee;

}

.guide-loader{

width:140px;

height:140px;

display:block;

margin:0 auto 30px auto;

animation:
spin 3s linear infinite;

}

@keyframes spin{

from{

transform:
rotate(0deg);

}

to{

transform:
rotate(360deg);

}

}

/* =========================================================
VEHICLE SPEC CARD
========================================================= */

.vehicle-spec-card{

background:

rgba(
255,
255,
255,
0.03
);

border:

1px solid rgba(
255,
255,
255,
0.06
);

border-radius:18px;

padding:18px;

margin-bottom:20px;

}

.vehicle-spec-title{

font-size:13px;

font-weight:800;

letter-spacing:2px;

color:#94a3b8;

margin-bottom:12px;

}

.vehicle-spec-name{

font-size:18px;

font-weight:800;

color:white;

margin-bottom:12px;

}

.vehicle-spec-grid{

display:grid;

grid-template-columns:
1fr
1fr;

gap:10px;

}

.vehicle-spec-item{

font-size:14px;

color:#cbd5e1;

}

/* =========================================================
VEHICLE SPEC LAYOUT
========================================================= */

.vehicle-spec-layout{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:24px;

}

.vehicle-spec-left{

flex:1;

}

.vehicle-spec-image{

width:268px;

height:150px;

flex-shrink:0;

overflow:hidden;

border-radius:16px;

}

.vehicle-spec-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.guide-actions{

    margin-bottom:20px;

    text-align:center;

}

.saved-guides-wrap{

    margin-top:30px;

}

.saved-guide-card{

    cursor:default;

}

.saved-guide-search{

    margin:0 0 18px;

}

.saved-guide-search input{

    width:100%;

    padding:14px 16px;

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

    border-radius:14px;

    background:rgba(15,23,42,.75);

    color:white;

    font-size:16px;

}

.saved-guide-note,
.saved-guide-status{

color:#cbd5e1;

font-size:14px;

line-height:1.6;

margin:0 0 16px;

}

.saved-guide-actions{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-top:14px;

}

.saved-guide-button{

    flex:1 1 110px;

    padding:12px;

    font-size:14px;

}

/* =========================================================
TARGET PI
========================================================= */

.target-pi-wrap{

    display:flex;

    justify-content:center;

    margin-top:12px;

    margin-bottom:12px;

}

.target-pi{

    width:110px;

    text-align:center;

    background:#151515;

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

    border-radius:999px;

    padding:10px 16px;

    color:#fff;

    font-size:18px;

    font-weight:700;

    outline:none;

}

.target-pi:focus{

    border-color:
    var(--primary);

}