*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:#04101c;color:#fff;font-family:Arial,Helvetica,sans-serif}
body{overflow:hidden}
#app{
height:100vh;
max-width:1120px;
margin:0 auto;
padding:14px 18px;
display:flex;
flex-direction:column;
gap:12px;
background:radial-gradient(circle at top,#0b2138,#05070a 68%);
}
.executive-header{
height:74px;
border:1px solid #1d6ea8;
border-radius:18px;
background:linear-gradient(135deg,#071423,#0b1d32);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 24px;
box-shadow:0 0 22px rgba(0,132,255,.16)
}
.logo{
font-size:28px;
font-weight:900;
letter-spacing:.5px;
color:#fff
}
.status{
border:1px solid #22c55e;
border-radius:999px;
color:#86efac;
padding:9px 20px;
font-size:13px;
font-weight:900;
background:rgba(34,197,94,.08)
}
.executive-shell{
flex:1;
display:grid;
grid-template-rows:repeat(6,1fr);
gap:10px;
min-height:0
}
.executive-shell section{
display:grid;
grid-template-columns:76px 76px 1fr;
align-items:center;
gap:22px;
min-height:0;
border-radius:16px;
background:linear-gradient(135deg,#08192b,#07111d);
border:1px solid currentColor;
padding:10px 20px;
box-shadow:inset 0 0 24px rgba(0,132,255,.06)
}
.executive-shell section:before{
width:56px;
height:56px;
border-radius:13px;
border:1px solid currentColor;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
background:rgba(255,255,255,.045);
box-shadow:0 0 16px currentColor
}
.executive-shell section:after{
font-size:32px;
font-weight:900;
letter-spacing:1px;
color:currentColor
}
#executive-backbone{color:#4aa3ff}
#executive-backbone:before{content:"🛡️"}
#executive-backbone:after{content:"01"}
#adaptive-display-engine{color:#b36cff}
#adaptive-display-engine:before{content:"🖥️"}
#adaptive-display-engine:after{content:"02"}
#hetzner-server{color:#22d3ee}
#hetzner-server:before{content:"▤"}
#hetzner-server:after{content:"03"}
#executive-data-continuity{color:#4ade80}
#executive-data-continuity:before{content:"◎"}
#executive-data-continuity:after{content:"04"}
#eos-capital-server{color:#f59e0b}
#eos-capital-server:before{content:"▣"}
#eos-capital-server:after{content:"05"}
#front-cockpit{color:#c084fc}
#front-cockpit:before{content:"◉"}
#front-cockpit:after{content:"06"}
.executive-shell section>div{grid-column:3}
.executive-shell h2{
font-size:22px;
line-height:1.05;
letter-spacing:.3px;
color:#fff
}
.executive-shell p{
margin-top:8px;
font-size:13px;
line-height:1.25;
color:#c8d3e4;
font-weight:600
}
footer{
height:22px;
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:#93a4bd
}

@media (min-width:768px) and (max-width:1366px){
body{overflow:hidden}
#app{
max-width:1050px;
padding:9px 12px;
gap:8px
}
.executive-header{
height:60px;
padding:0 20px;
border-radius:15px
}
.logo{font-size:22px}
.status{font-size:12px;padding:7px 15px}
.executive-shell{gap:7px}
.executive-shell section{
grid-template-columns:58px 58px 1fr;
gap:16px;
padding:7px 18px;
border-radius:14px
}
.executive-shell section:before{
width:46px;
height:46px;
font-size:24px;
border-radius:11px
}
.executive-shell section:after{font-size:26px}
.executive-shell h2{font-size:19px}
.executive-shell p{font-size:12px;margin-top:5px}
footer{height:16px;font-size:10px}
}

@media (max-width:767px){
body{overflow:auto}
#app{
height:auto;
min-height:100vh;
max-width:100%;
padding:8px;
gap:8px
}
.executive-header{
height:auto;
min-height:62px;
padding:11px;
flex-direction:column;
align-items:flex-start;
gap:8px
}
.logo{font-size:20px}
.status{font-size:11px;padding:6px 11px}
.executive-shell{
display:flex;
flex-direction:column;
gap:8px
}
.executive-shell section{
grid-template-columns:44px 42px 1fr;
gap:9px;
padding:9px;
min-height:76px
}
.executive-shell section:before{
width:38px;
height:38px;
font-size:19px
}
.executive-shell section:after{font-size:21px}
.executive-shell h2{font-size:15px}
.executive-shell p{font-size:10px;margin-top:4px}
footer{height:auto;padding:7px;font-size:9px}
}

@media (min-width:1600px){
#app{max-width:1280px}
.executive-shell section{grid-template-columns:90px 90px 1fr}
.executive-shell section:before{width:68px;height:68px}
.executive-shell section:after{font-size:38px}
.executive-shell h2{font-size:26px}
.executive-shell p{font-size:15px}
}

/* ===== EOS iPAD COMPACT + ELASTIC INTERACTIVE FIX v3.2.1 ===== */

@media (min-width:768px) and (max-width:1366px){

#app{
max-width:960px!important;
height:calc(100vh - 8px)!important;
padding:8px!important;
gap:6px!important;
}

.executive-header{
height:54px!important;
padding:0 18px!important;
}

.logo{
font-size:21px!important;
}

.status{
font-size:11px!important;
padding:6px 13px!important;
}

.executive-shell{
display:grid!important;
grid-template-rows:repeat(6,74px)!important;
gap:6px!important;
flex:0 0 auto!important;
}

.executive-shell section{
height:74px!important;
min-height:74px!important;
grid-template-columns:50px 46px 1fr!important;
gap:12px!important;
padding:6px 16px!important;
border-radius:13px!important;
}

.executive-shell section:before{
width:38px!important;
height:38px!important;
font-size:18px!important;
border-radius:9px!important;
}

.executive-shell section:after{
font-size:22px!important;
}

.executive-shell h2{
font-size:17px!important;
line-height:1.05!important;
}

.executive-shell p{
font-size:10.5px!important;
margin-top:4px!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}

footer{
height:14px!important;
font-size:9px!important;
}

}

/* Interactive behaviour */
.executive-shell section{
transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
cursor:pointer;
}

.executive-shell section:hover,
.executive-shell section.active{
transform:scale(1.012);
box-shadow:0 0 24px currentColor;
background:linear-gradient(135deg,#0b2238,#08131f);
}