:root{

--spacial-title-size:52px;
--spacial-subtitle-size:22px;
--spacial-card-title-size:28px;
--spacial-body-size:16px;
--spacial-status-size:24px;
--spacial-hero-title-size:40px;
--spacial-hero-subtitle-size:18px;
--spacial-menu-text-size:15px;
--spacial-menu-height:72px;
--spacial-gap:20px;
--spacial-radius:20px;

}

/* =========================
   GLOBAL PANELS
========================= */
/* =========================
   SVG2 TOPBAR SYSTEM
========================= */

.spacial-topbar{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:14px;
margin-bottom:28px;
padding:20px;
background:#081426;
border:1px solid #13243d;
border-radius:22px;
box-shadow:0 0 20px rgba(0,0,0,0.35);

}

.spacial-top-btn{
background:linear-gradient(180deg,#0b1830 0%,#091525 100%);
color:#38bdf8;
border:1px solid rgba(14,165,233,0.55);
border-radius:16px;
padding:14px 24px;
font-size:15px;
font-weight:700;
letter-spacing:0.4px;
cursor:pointer;
transition:all 0.25s ease;
height:58px;
width:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
box-shadow:
0 0 0 rgba(0,0,0,0),
inset 0 1px 0 rgba(255,255,255,0.04);
}

.spacial-top-btn:hover{
background:linear-gradient(180deg,#0ea5e9 0%,#0284c7 100%);
color:#03111f;
transform:translateY(-2px);
box-shadow:0 0 18px rgba(14,165,233,0.35);
}

.spacial-panel{
background:#020817;
border:1px solid #1f2937;
border-radius:var(--spacial-radius);
padding:20px;
}

/* =========================
   GLOBAL DUAL GRID
========================= */

.spacial-dual-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--spacial-gap);
align-items:start;
}

/* =========================
   GLOBAL STATUS GRID
========================= */

.spacial-status-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}

/* =========================
   GLOBAL STATUS CARD
========================= */

.spacial-status-card{
background:#020817;
border:1px solid #1f2937;
border-radius:20px;
padding:14px;
min-height:90px;
display:flex;
flex-direction:column;
justify-content:center;
}

/* =========================
   GLOBAL STATUS VALUE
========================= */

.spacial-status-value{
font-size:24px;
line-height:1;
font-weight:800;
}

/* =========================
   GLOBAL BUTTON ROW
========================= */

.spacial-action-row{
display:flex;
flex-direction:row;
flex-wrap:wrap;
gap:18px;
align-items:center;
}

/* =========================
   GLOBAL BUTTON
========================= */

.spacial-btn{
height:48px;
padding:0 20px;
border-radius:14px;
}

/* =========================
   GLOBAL SELECT
========================= */

.spacial-select{
height:48px;
border-radius:14px;
}

/* =========================
   TABLET CALIBRATION
========================= */

@media(max-width:900px){

.spacial-dual-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.spacial-status-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

}