:root{
  --eco-bg:#111914;
  --eco-panel:#19231d;
  --eco-panel-2:#202d25;
  --eco-line:#34483b;
  --eco-green:#78b93f;
  --eco-green-2:#9bd45f;
  --eco-lime:#c4e86d;
  --eco-earth:#8a6848;
  --eco-sand:#d7c49b;
  --eco-text:#eef4ec;
  --eco-muted:#9caf9e;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:
   radial-gradient(circle at 15% 0%, rgba(120,185,63,.12), transparent 28rem),
   linear-gradient(180deg,#101712,#121b15 45%,#0d130f);
  color:var(--eco-text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.eco-navbar{
  min-height:72px;
  background:rgba(18,28,21,.92);
  border-bottom:1px solid var(--eco-line);
  box-shadow:0 8px 30px rgba(0,0,0,.25);
  backdrop-filter:blur(15px);
}
.eco-logo,.brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  color:#13200f;background:linear-gradient(135deg,var(--eco-lime),var(--eco-green));
  font-weight:1000;letter-spacing:-2px;
  border-radius:12px;padding:7px 12px;
  box-shadow:inset 0 1px rgba(255,255,255,.25),0 6px 18px rgba(120,185,63,.18);
}
.brand-sub{font-size:.82rem;letter-spacing:.18em;color:#dbe7d8;font-weight:800}
.hero-panel,.panel,.stat-card,.login-card{
  border:1px solid var(--eco-line);
  background:linear-gradient(145deg,rgba(32,45,37,.96),rgba(23,33,27,.96));
  box-shadow:0 16px 40px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.025);
}
.hero-panel{
  padding:26px 28px;border-radius:22px;
  display:flex;align-items:center;justify-content:space-between;gap:25px;
}
.hero-panel h1{font-weight:900;letter-spacing:-.04em;margin:3px 0 0;font-size:clamp(1.8rem,4vw,3rem)}
.eyebrow{color:var(--eco-green-2);font-weight:900;font-size:.73rem;letter-spacing:.18em}
.control-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.action-btn{font-weight:800;border-radius:12px;padding:.72rem 1rem}
.status-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-weight:800;font-size:.86rem}
.status-pill.online{background:rgba(89,188,83,.13);color:#9ee69a;border:1px solid rgba(89,188,83,.4)}
.status-pill.offline{background:rgba(226,88,73,.12);color:#ff9a90;border:1px solid rgba(226,88,73,.35)}
.status-dot{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.stat-card{height:100%;padding:18px;border-radius:17px}
.stat-label{font-size:.77rem;color:var(--eco-muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.stat-value{font-size:1.45rem;font-weight:900;margin:7px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.small-value{font-size:1.12rem}
.stat-small{color:var(--eco-muted);font-size:.78rem}
.progress{height:5px;background:#101710;border-radius:99px}
.progress-bar{background:linear-gradient(90deg,var(--eco-green),var(--eco-lime))}
.panel{border-radius:20px;overflow:hidden}
.panel-head{padding:19px 21px;border-bottom:1px solid var(--eco-line);display:flex;justify-content:space-between;align-items:center;gap:15px}
.panel-head h2{font-size:1.03rem;font-weight:900;margin:0}
.panel-head p{font-size:.79rem;color:var(--eco-muted);margin:4px 0 0}
.console-box{
  height:570px;margin:0;padding:20px;overflow:auto;
  background:#080d09;color:#cfe8c5;border:0;
  font:12.5px/1.55 "Cascadia Mono","Consolas",monospace;
  white-space:pre-wrap;word-break:break-word;
  scrollbar-color:#46634f #0b100c;
}
.port-list{padding:14px 20px 18px}
.port-list>div{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.port-list>div:last-child{border-bottom:0}
.port-badge{font-size:.7rem;font-weight:900;padding:5px 8px;border-radius:999px;background:#333;color:#bbb}
.port-badge.on{color:#aee8a7;background:rgba(72,175,79,.14);border:1px solid rgba(72,175,79,.35)}
.port-badge.off{color:#f39c94;background:rgba(210,72,64,.13);border:1px solid rgba(210,72,64,.3)}
.panel form,.rcon-output{margin-left:20px;margin-right:20px}
.panel form{padding-top:18px}
.rcon-output{min-height:100px;max-height:220px;overflow:auto;background:#0d140f;border:1px solid var(--eco-line);border-radius:12px;padding:12px;color:#bdd3b7;font-size:.78rem;white-space:pre-wrap}
.form-control{
  background:#111a14!important;border:1px solid #405545!important;color:#edf6ea!important;
  border-radius:11px;
}
.form-control:focus{box-shadow:0 0 0 .2rem rgba(120,185,63,.13)!important;border-color:var(--eco-green)!important}
.btn-eco{background:linear-gradient(135deg,var(--eco-green-2),var(--eco-green));border:0;color:#10200b;font-weight:900}
.btn-eco:hover{filter:brightness(1.08);color:#0b1608}
.text-secondary{color:var(--eco-muted)!important}
.eco-login-body{display:grid;place-items:center;min-height:100vh;padding:24px}
.login-wrap{width:min(440px,100%)}
.login-card{padding:34px;border-radius:24px}
.login-card .brand-mark{font-size:2rem;margin-bottom:24px}
.login-card h1{font-size:2rem;font-weight:900;letter-spacing:-.04em}
.alert{border-radius:14px;white-space:pre-wrap}
@media(max-width:991px){
 .hero-panel{align-items:flex-start;flex-direction:column}
 .control-buttons{justify-content:flex-start}
 .console-box{height:460px}
}