@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&display=swap');


*{
box-sizing:border-box;
}


body{

margin:0;

background:#03070c;

color:#d7e2ee;

font-family:'IBM Plex Mono',monospace;

font-size:12px;

}


.shell{

padding:20px;

}



.brand{

text-align:center;

font-size:28px;

letter-spacing:8px;

font-weight:700;

}


.tag{

text-align:center;

margin:10px;

letter-spacing:5px;

color:#38bdf8;

}



.dashboard{

display:grid;

grid-template-columns:260px 1fr 260px;

gap:12px;

}



.panel{

background:
linear-gradient(
180deg,
rgba(15,25,40,.8),
rgba(3,7,12,.9)
);

border:1px solid #203446;

padding:15px;

}



.panel h2{

font-size:11px;

letter-spacing:4px;

color:#ffc857;

}



h1{

font-size:16px;

letter-spacing:2px;

}



hr{

border-color:#203446;

}



.module{

padding:12px 0;

border-bottom:1px solid #172634;

}



.topology{

text-align:center;

min-height:750px;

}



.node{

width:330px;

margin:auto;

padding:16px;

border:1px solid #38bdf8;

border-radius:25px;

box-shadow:
0 0 20px rgba(56,189,248,.15);

font-weight:bold;

}



.node small{

display:block;

margin-top:8px;

color:#8492a3;

}



.firewall{

border-color:#ffc857;

box-shadow:
0 0 30px rgba(255,200,87,.25);

}



.energy{

height:55px;

width:3px;

margin:auto;

background:#38bdf8;

animation:pulse 2s infinite;

}



@keyframes pulse{

0%{

opacity:.2;

}

50%{

opacity:1;

}

100%{

opacity:.2;

}

}



.branches{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:10px;

margin-top:50px;

}



.segment{

padding:20px;

min-height:170px;

border:1px solid;

}



.blue{

border-color:#38bdf8;

}



.purple{

border-color:#ff4fa3;

}



.orange{

border-color:#ffc857;

}



span{

color:#39ff88;

}



footer{

margin-top:15px;

border-top:1px solid #203446;

padding:15px;

display:flex;

justify-content:space-between;

letter-spacing:3px;

}



@media(max-width:1000px){

.dashboard{

grid-template-columns:1fr;

}

}


/* =================================
   HRNDZ COMMAND NODE HUD POLISH
   ================================= */


/* subtle grid background */

body {

background-color:#03070c;

background-image:
linear-gradient(
rgba(56,189,248,.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(56,189,248,.035) 1px,
transparent 1px
);

background-size:
40px 40px;

}



/* header refinement */

.brand {

text-shadow:
0 0 20px rgba(56,189,248,.35);

}



.tag {

font-size:10px;

opacity:.8;

}



/* panel HUD corners */

.panel {

position:relative;

overflow:hidden;

}


.panel::before {

content:"";

position:absolute;

top:0;

left:0;

width:35px;

height:1px;

background:#38bdf8;

}


.panel::after {

content:"";

position:absolute;

bottom:0;

right:0;

width:35px;

height:1px;

background:#38bdf8;

}



/* topology gets priority */


.topology {

background:

radial-gradient(
circle at center,
rgba(56,189,248,.08),
transparent 55%
);

}



/* nodes become modules */


.node {

position:relative;

letter-spacing:2px;

transition:.3s;

}



.node:hover {

transform:scale(1.04);

box-shadow:

0 0 35px rgba(56,189,248,.35);

}



/* animated energy */


.energy {

position:relative;

overflow:hidden;

background:#182c3d;

}



.energy::after {

content:"";

position:absolute;

left:0;

width:100%;

height:35%;

background:#38bdf8;

animation:

energyMove 1.8s infinite;

}



@keyframes energyMove {


0% {

top:-40%;

opacity:0;

}


50% {

opacity:1;

}


100% {

top:120%;

opacity:0;

}

}



/* firewall emphasis */


.firewall {

border-width:2px;

}



.firewall::before {

content:"CONTROL";

position:absolute;

top:8px;

right:20px;

font-size:9px;

color:#ffc857;

letter-spacing:3px;

}



/* branches */

.segment {

background:

linear-gradient(
180deg,
rgba(10,20,30,.8),
rgba(3,7,12,.8)
);

position:relative;

}



.segment::before {

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:1px;

background:currentColor;

opacity:.7;

}



/* colored zone glow */


.blue {

box-shadow:

inset 0 0 25px rgba(56,189,248,.08);

}



.purple {

box-shadow:

inset 0 0 25px rgba(255,79,163,.08);

}



.orange {

box-shadow:

inset 0 0 25px rgba(255,200,87,.08);

}



/* project modules */


.module {

background:#050a10;

margin-bottom:8px;

padding:12px;

border:1px solid #172938;

}



.module:hover {

border-color:#38bdf8;

}



/* right status */


.right span {

float:right;

font-size:10px;

}



/* footer */


footer {

font-size:10px;

opacity:.9;

}



/* scanline effect */

.shell::after {

content:"";

pointer-events:none;

position:fixed;

inset:0;

background:

linear-gradient(
transparent 50%,
rgba(56,189,248,.015) 51%
);

background-size:100% 4px;

}





/* =============================
   INTELLIGENCE PANELS
   ============================= */


.event {

padding:8px 0;

border-bottom:1px solid #172634;

font-size:11px;

line-height:1.5;

}



.event:first-letter {

color:#38bdf8;

}



.module {

border-left:2px solid #38bdf8;

padding-left:10px;

margin-bottom:10px;

}



.right .panel {

font-size:11px;

}



.right h2 {

margin-bottom:15px;

}





/* NETWORK FAMILY TREE */


.interface-grid {

display:grid;

grid-template-columns:repeat(3,1fr);

gap:8px;

margin-top:25px;

}


.interface {

padding:10px;

border:1px solid;

font-size:10px;

}



.device-grid {

display:grid;

grid-template-columns:repeat(3,1fr);

gap:8px;

margin-top:12px;

}



.family {

padding:10px;

background:#050a10;

font-size:10px;

line-height:1.7;

}



.family h3 {

font-size:11px;

letter-spacing:3px;

color:#ffc857;

}



.family hr {

border:0;

border-top:1px solid #172634;

margin:8px 0;

}



.blue-border {

border-top:2px solid #38bdf8;

}


.purple-border {

border-top:2px solid #ff4fa3;

}


.orange-border {

border-top:2px solid #ffc857;

}





/* ACCURACY + CLEANUP PASS */


/* descriptions */

i {

color:#8492a3;

font-size:10px;

}


/* remove loud family card colors */

.blue-border,
.purple-border,
.orange-border {

border-top:1px solid #203446;

}


/* use subtle status indicators */

.interface {

background:#050a10;

border-color:#203446;

}


.interface b {

color:#38bdf8;

}



/* topology keeps color */

.firewall {

border-color:#ffc857;

}



/* smaller information density */

.family {

line-height:1.6;

}


.family h3 {

color:#38bdf8;

}



/* project modules */

.module {

line-height:1.6;

}