*{box-sizing:border-box}

html,body{
 margin:0;
 min-height:100%;
 background:#010503;
 color:#b9ffd0;
 font-family:"Courier New",monospace
}

body{
 background:
 radial-gradient(circle at 50% -10%,rgba(0,255,100,.12),transparent 35%),
 linear-gradient(rgba(0,255,80,.025) 1px,transparent 1px),
 linear-gradient(90deg,rgba(0,255,80,.025) 1px,transparent 1px),
 #010503;
 background-size:auto,28px 28px,28px 28px;
}

#matrixCanvas{
 position:fixed;
 inset:0;
 width:100%;
 height:100%;
 z-index:0;
 opacity:.13;
 pointer-events:none
}

.scanlines{
 position:fixed;
 inset:0;
 z-index:50;
 pointer-events:none;
 background:repeating-linear-gradient(
  0deg,
  rgba(0,255,80,.018) 0,
  rgba(0,255,80,.018) 1px,
  transparent 1px,
  transparent 4px
 )
}

.app{display:flex;position:relative;z-index:1}

.sidebar{
 position:fixed;
 width:245px;
 top:0;
 bottom:0;
 padding:25px 17px;
 border-right:1px solid #145b31;
 background:rgba(1,8,4,.96);
 box-shadow:10px 0 40px rgba(0,255,90,.04);
 z-index:10
}

.logo{
 color:#42ff8b;
 font-size:29px;
 font-weight:bold;
 letter-spacing:4px;
 text-shadow:0 0 15px rgba(0,255,100,.5)
}

.logo span{color:#fff}

.version{
 font-size:9px;
 color:#527d61;
 margin-top:4px;
 letter-spacing:1px
}

.online{
 margin:27px 0 18px;
 padding:10px;
 border:1px solid #174c2b;
 border-radius:5px;
 color:#42ff8b;
 font-size:10px;
 background:rgba(0,255,80,.03)
}

.online span,.pulse,.status-dot{
 display:inline-block;
 width:8px;
 height:8px;
 border-radius:50%;
 background:#42ff8b;
 box-shadow:0 0 12px #42ff8b;
 margin-right:7px;
 animation:pulse 1.5s infinite
}

nav{display:flex;flex-direction:column;gap:5px}

nav button{
 background:transparent;
 border:1px solid transparent;
 color:#769a81;
 padding:12px;
 text-align:left;
 border-radius:5px;
 font-family:inherit;
 cursor:pointer;
 transition:.2s
}

nav button:hover,nav button.active{
 color:#42ff8b;
 background:rgba(0,255,80,.06);
 border-color:#164c2c;
 box-shadow:inset 3px 0 #42ff8b
}

.sidebar-footer{
 position:absolute;
 left:17px;
 right:17px;
 bottom:22px;
 border-top:1px solid #164;
 padding-top:14px;
 color:#527d61;
 font-size:9px
}

.sidebar-footer strong{
 display:block;
 color:#42ff8b;
 margin:4px 0
}

.sidebar-footer small{color:#3d654b}

main{
 margin-left:245px;
 width:calc(100% - 245px);
 padding:27px;
 max-width:1800px
}

.topbar{
 display:flex;
 justify-content:space-between;
 align-items:center;
 border-bottom:1px solid #154c2c;
 padding-bottom:20px;
 margin-bottom:20px
}

.eyebrow{
 color:#42ff8b;
 font-size:10px;
 letter-spacing:2px
}

h1{
 color:#fff;
 margin:6px 0;
 font-size:32px;
 letter-spacing:3px
}

h1 span{color:#42ff8b}

.topbar p{
 color:#61866c;
 font-size:12px;
 margin:0
}

.top-status{
 display:flex;
 align-items:center;
 gap:8px;
 border:1px solid #174c2b;
 padding:11px 15px;
 border-radius:6px
}

.top-status strong{
 display:block;
 color:#42ff8b;
 font-size:10px
}

.top-status small{
 color:#54705b;
 font-size:8px
}

.stats{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:14px;
 margin-bottom:18px
}

.stat-card{
 border:1px solid #164c2b;
 background:rgba(2,13,7,.88);
 padding:15px;
 border-radius:7px;
 position:relative;
 overflow:hidden
}

.stat-card:after{
 content:"";
 position:absolute;
 top:0;
 left:0;
 width:30%;
 height:1px;
 background:#42ff8b;
 box-shadow:0 0 12px #42ff8b
}

.stat-card small,.stat-card span{
 display:block;
 color:#557760;
 font-size:9px
}

.stat-card strong{
 display:block;
 color:#fff;
 font-size:27px;
 margin:6px 0
}

.stat-card .green{color:#42ff8b}

.grid{
 display:grid;
 grid-template-columns:repeat(12,1fr);
 gap:16px
}

.card{
 grid-column:span 4;
 background:rgba(2,12,7,.9);
 border:1px solid #164c2b;
 border-radius:8px;
 padding:17px;
 box-shadow:0 0 30px rgba(0,255,80,.025);
 position:relative;
 overflow:hidden
}

.card:before{
 content:"";
 position:absolute;
 left:0;
 right:0;
 top:0;
 height:1px;
 background:#42ff8b;
 opacity:.45
}

.target-card,.network-card,.system-card{min-height:210px}
.ports-card,.terminal-card,.logs-card{min-height:330px}
.mission-card,.exploit-card,.brute-card{min-height:285px}
.full{grid-column:1/-1}

.card-title{
 display:flex;
 gap:10px;
 align-items:center;
 margin-bottom:16px
}

.card-title>span{
 font-size:20px;
 color:#42ff8b
}

.card-title h2{
 color:#42ff8b;
 font-size:13px;
 margin:0;
 letter-spacing:1px
}

.card-title small{
 color:#4e7258;
 font-size:8px
}

.target-box{
 display:flex;
 gap:7px
}

input,select{
 width:100%;
 background:#010503;
 color:#42ff8b;
 border:1px solid #285b38;
 padding:10px;
 border-radius:4px;
 font-family:inherit;
 outline:none
}

input:focus,select:focus{
 border-color:#42ff8b;
 box-shadow:0 0 12px rgba(0,255,80,.12)
}

.target-box input{flex:1}

button.primary{
 border:1px solid #42ff8b;
 background:#063819;
 color:#aaffc2;
 padding:10px 14px;
 border-radius:4px;
 font-family:inherit;
 cursor:pointer;
 transition:.2s
}

button.primary:hover{
 background:#0b642d;
 color:#fff;
 box-shadow:0 0 20px rgba(0,255,80,.2)
}

.target-state{
 margin-top:18px;
 font-size:9px;
 color:#42ff8b
}

.xpbar{
 height:5px;
 background:#06170b;
 border-radius:10px;
 margin-top:18px;
 overflow:hidden
}

.xpbar div{
 height:100%;
 width:0;
 background:#42ff8b;
 box-shadow:0 0 10px #42ff8b;
 transition:width .4s
}

.network{
 height:115px;
 position:relative
}

.node{
 position:absolute;
 padding:8px 11px;
 border:1px solid #42ff8b;
 color:#42ff8b;
 background:#031108;
 border-radius:4px;
 font-size:9px;
 z-index:2;
 box-shadow:0 0 10px rgba(0,255,80,.1)
}

.node.you{left:40%;top:42%}
.node.web{left:10%;top:10%}
.node.db{right:10%;top:10%}
.node.vpn{left:44%;bottom:0}

.connection{
 position:absolute;
 height:1px;
 background:#2a8;
 transform-origin:left center;
 opacity:.6;
 box-shadow:0 0 7px #2f6
}

.c1{left:25%;top:27%;width:85px;transform:rotate(20deg)}
.c2{left:54%;top:44%;width:70px;transform:rotate(-20deg)}
.c3{left:48%;top:58%;width:55px;transform:rotate(90deg)}

.network-stats{
 display:flex;
 justify-content:space-between;
 border-top:1px solid #123;
 padding-top:10px
}

.network-stats b,.network-stats small{display:block}
.network-stats b{color:#fff}
.network-stats small{color:#4e7258;font-size:8px}

.metric{margin:13px 0}
.metric>div:first-child{
 display:flex;
 justify-content:space-between;
 color:#6e9a79;
 font-size:10px;
 margin-bottom:5px
}
.metric b{color:#fff}
.meter{
 height:6px;
 background:#05160a;
 border-radius:5px;
 overflow:hidden
}
.meter i{
 display:block;
 height:100%;
 background:#42ff8b;
 box-shadow:0 0 10px #42ff8b;
 transition:width .5s
}

table{width:100%;border-collapse:collapse;font-size:10px}
th{
 text-align:left;
 color:#42ff8b;
 border-bottom:1px solid #194c2b;
 padding:9px 5px
}
td{
 border-bottom:1px solid #0b2816;
 padding:9px 5px;
 color:#91b59a
}
.open{color:#42ff8b}
.closed{color:#666}

.terminal-window{
 height:235px;
 overflow:auto;
 background:#000;
 border:1px solid #123b22;
 padding:12px;
 font-size:11px;
 line-height:1.55;
 color:#42ff8b
}

.system-line{color:#8affad}

.terminal-input{
 display:flex;
 gap:6px;
 margin-top:8px;
 align-items:center;
 font-size:10px;
 color:#42ff8b
}

.terminal-input input{flex:1}
.terminal-input button{
 background:#073b1b;
 border:1px solid #42ff8b;
 color:#42ff8b;
 padding:9px;
 cursor:pointer
}

.logs{
 height:265px;
 overflow:auto
}

.log{
 border-bottom:1px solid #0b2816;
 padding:8px 3px;
 font-size:10px
}

.log span{color:#52765b}
.log b{color:#42ff8b}

.mission-card{grid-column:span 6}
.exploit-card{grid-column:span 3}
.brute-card{grid-column:span 3}

.mission-header{
 display:flex;
 justify-content:space-between;
 align-items:flex-start
}

.mission-header h2{
 color:#fff;
 margin:6px 0;
 font-size:20px
}

.mission-badge{
 color:#42ff8b;
 border:1px solid #42ff8b;
 padding:7px;
 font-size:9px;
 border-radius:20px
}

.mission-card p{color:#779b80;font-size:11px;line-height:1.6}

.steps{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:7px;
 margin:15px 0
}

.steps div{
 border:1px solid #143d24;
 padding:10px;
 color:#779b80;
 font-size:9px
}

.steps b{
 display:block;
 color:#42ff8b;
 margin-bottom:5px
}

.big{width:100%;padding:13px!important}

.output{
 height:145px;
 overflow:auto;
 border:1px solid #123b22;
 background:#000;
 padding:10px;
 color:#42ff8b;
 font-size:10px;
 line-height:1.7;
 margin-bottom:10px
}

.form-row{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:8px;
 margin-bottom:15px
}

.form-row label{
 color:#668c70;
 font-size:9px
}

.form-row input,.form-row select{margin-top:5px}

.progress{
 height:9px;
 border:1px solid #174c2b;
 background:#020a05;
 border-radius:10px;
 overflow:hidden
}

.progress i{
 display:block;
 width:0;
 height:100%;
 background:#42ff8b;
 box-shadow:0 0 10px #42ff8b;
 transition:width .15s
}

.attempts{
 color:#63856b;
 font-size:9px;
 margin:9px 0 12px
}

.attempts b{color:#fff}

.tools-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:10px
}

.tools-grid button{
 background:#04170a;
 border:1px solid #174c2b;
 color:#42ff8b;
 padding:15px;
 font-family:inherit;
 cursor:pointer
}

.ranking{display:grid;gap:7px}
.ranking div{
 display:grid;
 grid-template-columns:50px 1fr 120px;
 padding:12px;
 border:1px solid #123b22;
 color:#779b80
}
.ranking b{color:#42ff8b}
.ranking strong{color:#fff;text-align:right}
.you-rank{border-color:#42ff8b!important;background:rgba(0,255,80,.05)}

.hidden{display:none}

.toast{
 position:fixed;
 right:25px;
 bottom:25px;
 padding:12px 18px;
 background:#03170a;
 border:1px solid #42ff8b;
 color:#42ff8b;
 border-radius:5px;
 transform:translateY(100px);
 opacity:0;
 transition:.3s;
 z-index:100
}

.toast.show{
 transform:translateY(0);
 opacity:1
}

footer{
 text-align:center;
 color:#42614a;
 font-size:9px;
 padding:25px
}

footer span{color:#42ff8b}

@keyframes pulse{
 0%,100%{opacity:1}
 50%{opacity:.35}
}

@media(max-width:1100px){
 .sidebar{width:210px}
 main{margin-left:210px;width:calc(100% - 210px)}
 .card{grid-column:span 6}
 .mission-card,.exploit-card,.brute-card{grid-column:span 6}
 .stats{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:750px){
 .sidebar{
  position:relative;
  width:100%;
  height:auto;
  bottom:auto;
  border-right:0;
  border-bottom:1px solid #164c2b
 }
 .sidebar-footer{display:none}
 nav{display:grid;grid-template-columns:repeat(2,1fr)}
 main{margin-left:0;width:100%;padding:14px}
 .app{display:block}
 .topbar{flex-direction:column;align-items:flex-start;gap:15px}
 .stats{grid-template-columns:1fr 1fr}
 .card,.mission-card,.exploit-card,.brute-card{grid-column:1/-1}
 .tools-grid{grid-template-columns:1fr 1fr}
}