/* =====================================================
   FUELSPEC UI SYSTEM v1
   Inspired by Forza • Gran Turismo • Need For Speed
===================================================== */

:root{

/* core palette */

--fs-dark:#0b0f14;
--fs-dark2:#111827;
--fs-dark3:#0f1720;

--fs-red:#ef4444;
--fs-red-soft:#f87171;
--fs-red-dark:#b91c1c;

--fs-ice:#e6f0ff;

--fs-border:rgba(255,255,255,.06);
--fs-border-soft:rgba(255,255,255,.04);

--fs-glow:rgba(239,68,68,.45);
--fs-glow-soft:rgba(239,68,68,.15);

--fs-radius:14px;
--fs-radius-sm:10px;

}


/* =====================================================
   GLOBAL BACKGROUND
===================================================== */

body{

background:

radial-gradient(circle at 10% 10%, rgba(239,68,68,.07), transparent 40%),
radial-gradient(circle at 90% 90%, rgba(239,68,68,.05), transparent 40%),

var(--fs-dark);

color:#e4e4e7;

}


/* =====================================================
   TYPOGRAPHY
===================================================== */

.fs-title{

font-family:'Orbitron',sans-serif;

letter-spacing:.05em;

text-transform:uppercase;

}

.fs-heading{

font-family:'Orbitron',sans-serif;

letter-spacing:.04em;

font-weight:600;

}

.fs-label{

font-size:13px;

letter-spacing:.04em;

text-transform:uppercase;

color:#9ca3af;

}


/* =====================================================
   CARDS (Forza style)
===================================================== */

.fs-card{

background:var(--fs-dark2);

border:1px solid var(--fs-border);

border-radius:var(--fs-radius);

transition:.25s;

position:relative;

overflow:hidden;

}

.fs-card::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.03),
transparent
);

opacity:0;

transition:.3s;

}

.fs-card:hover::before{
opacity:1;
}

.fs-card:hover{

border-color:rgba(239,68,68,.6);

box-shadow:

0 0 0 1px rgba(239,68,68,.35),
0 10px 35px rgba(0,0,0,.45);

transform:translateY(-4px);

}


/* image zoom */

.fs-card:hover img{

transform:scale(1.05);

transition:.45s;

}


/* =====================================================
   HUD PANEL
===================================================== */

.fs-panel{

background:var(--fs-dark3);

border:1px solid var(--fs-border);

border-radius:var(--fs-radius);

padding:22px;

}


/* =====================================================
   ACTIVE STATES
===================================================== */

.fs-active{

border:1px solid var(--fs-red);

box-shadow:0 0 12px var(--fs-glow);

}

.fs-selected{

outline:2px solid var(--fs-red);

}


/* =====================================================
   BUTTONS
===================================================== */

.fs-btn{

background:var(--fs-red);

color:white;

border-radius:var(--fs-radius-sm);

font-weight:600;

padding:10px 18px;

transition:.25s;

display:inline-flex;

align-items:center;

gap:8px;

}

.fs-btn:hover{

background:#dc2626;

box-shadow:0 0 14px var(--fs-glow);

transform:translateY(-1px);

}

.fs-btn-outline{

border:1px solid var(--fs-border);

color:white;

border-radius:var(--fs-radius-sm);

padding:10px 18px;

transition:.25s;

}

.fs-btn-outline:hover{

border-color:var(--fs-red);

color:white;

box-shadow:0 0 10px var(--fs-glow-soft);

}


/* =====================================================
   INPUTS (Cockpit style)
===================================================== */

.fs-input{

background:var(--fs-dark3);

border:1px solid var(--fs-border);

border-radius:var(--fs-radius-sm);

color:white;

padding:12px 14px;

transition:.2s;

width:100%;

}

.fs-input::placeholder{

color:#6b7280;

}

.fs-input:focus{

outline:none;

border-color:var(--fs-red);

box-shadow:0 0 0 2px rgba(239,68,68,.2);

}


/* =====================================================
   TABS (Gran Turismo style)
===================================================== */

.fs-tab{

padding:10px 20px;

border-radius:999px;

border:1px solid var(--fs-border);

font-weight:600;

font-size:14px;

transition:.25s;

color:#9ca3af;

}

.fs-tab:hover{

border-color:var(--fs-red);

color:white;

}

.fs-tab-active{

background:var(--fs-red);

color:white;

box-shadow:0 0 14px var(--fs-glow);

}


/* =====================================================
   SIDEBAR MENU
===================================================== */

.fs-menu-item{

padding:12px 16px;

border-radius:10px;

display:flex;

align-items:center;

gap:10px;

transition:.2s;

}

.fs-menu-item:hover{

background:rgba(255,255,255,.05);

color:white;

transform:translateX(4px);

}

.fs-menu-active{

background:rgba(239,68,68,.12);

border-left:3px solid var(--fs-red);

color:var(--fs-red-soft);

}


/* =====================================================
   BADGES
===================================================== */

.fs-badge{

font-size:11px;

padding:4px 8px;

border-radius:999px;

font-weight:600;

letter-spacing:.05em;

}

.fs-badge-red{

background:#ef4444;

color:white;

}

.fs-badge-green{

background:#10b981;

color:white;

}

.fs-badge-orange{

background:#f97316;

color:white;

}

.fs-badge-blue{

background:#3b82f6;

color:white;

}


/* =====================================================
   GLOW EFFECTS
===================================================== */

.fs-glow{

box-shadow:0 0 20px rgba(239,68,68,.35);

}

.fs-glow-soft{

box-shadow:0 0 10px rgba(239,68,68,.25);

}


/* =====================================================
   LOADING SKELETON
===================================================== */

.fs-skeleton{

background:linear-gradient(
90deg,
#111827 25%,
#1f2937 37%,
#111827 63%
);

background-size:400% 100%;

animation:fsSkeleton 1.4s ease infinite;

border-radius:8px;

}

@keyframes fsSkeleton{

0%{
background-position:100% 50%;
}

100%{
background-position:0 50%;
}

}


/* =====================================================
   SCROLLBAR (gaming style)
===================================================== */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#111827;

}

::-webkit-scrollbar-thumb{

background:#ef4444;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#dc2626;

}


/* =====================================================
   MICRO ANIMATIONS
===================================================== */

.fs-hover-rise{

transition:.25s;

}

.fs-hover-rise:hover{

transform:translateY(-3px);

}

.fs-hover-scale{

transition:.25s;

}

.fs-hover-scale:hover{

transform:scale(1.03);

}


/* =====================================================
   GLASS PANEL (Forza overlay style)
===================================================== */

.fs-glass{

background:rgba(17,24,39,.7);

backdrop-filter:blur(16px);

border:1px solid var(--fs-border);

border-radius:var(--fs-radius);

}


/* =====================================================
   IMAGE OVERLAY
===================================================== */

.fs-image-overlay{

position:relative;

}

.fs-image-overlay::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
to top,
rgba(0,0,0,.65),
transparent
);

opacity:.8;

}


/* =====================================================
   GRID HELPERS
===================================================== */

.fs-grid-cars{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(260px,1fr));

gap:20px;

}

.fs-grid-market{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

gap:18px;

}