:root{
  --bg:#08111f;
  --panel:#0d1728;
  --panel2:#0b1322;
  --line:#1b2c4b;
  --text:#d9e6ff;
  --muted:#7f95b8;
  --green:#2dd36f;
  --blue:#4aa3ff;
  --cyan:#22d3ee;
  --red:#ff5c7a;
  --yellow:#ffd166;
  --shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(74,163,255,.16), transparent 18%),
    radial-gradient(circle at 80% 0%, rgba(45,211,111,.15), transparent 16%),
    linear-gradient(180deg,#060d19 0%, #09111d 100%);
  color:var(--text);
}

.wrap{max-width:1400px;margin:0 auto;padding:18px}
.topbar{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;margin-bottom:18px}
.hero,.actions,.panel,.card{
  background:linear-gradient(180deg,rgba(14,23,40,.96),rgba(9,16,30,.96));
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}

.hero{
  min-height:300px;
  position:relative;
  overflow:hidden;
  padding:22px;
  display:flex;
  align-items:flex-end;
  background:
    linear-gradient(90deg,rgba(6,12,24,.88),rgba(6,12,24,.15)),
    url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1400&q=80') center/cover no-repeat;
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(10,18,34,.55),transparent 45%,rgba(45,211,111,.08));
  pointer-events:none;
}
.hero-content{position:relative;z-index:1;max-width:520px}
.hero h1{margin:0;font-size:40px;line-height:1.02;letter-spacing:-.04em}
.hero h1 span{color:var(--green)}
.hero p{margin:10px 0 0;color:#b8c8e6}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(9,16,30,.8);
  border:1px solid rgba(74,163,255,.25);
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  margin-bottom:14px;
}
.badge i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 16px var(--green);
}

.actions{padding:14px;display:grid;gap:12px;grid-template-columns:repeat(3,1fr);align-content:start}
.action{
  background:linear-gradient(180deg,#121f35,#0b1425);
  border:1px solid #233a61;
  border-radius:14px;
  padding:14px;
  min-height:84px;
}
.action strong{display:block;font-size:20px;margin-top:10px}
.action span{color:var(--muted);font-size:12px}
.icon{
  width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;
  background:rgba(45,211,111,.12);
  border:1px solid rgba(45,211,111,.35);
  color:#83ffb5;
}

.panel{padding:16px;overflow:hidden}
.panel h3,.card h3{
  margin:0 0 14px;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#c8d7f4;
}
.status{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{
  background:var(--panel2);
  border:1px solid #1c2a44;
  border-radius:14px;
  padding:14px;
}
.stat .k{color:var(--muted);font-size:12px}
.stat .v{font-weight:800;font-size:26px;margin-top:8px}
.online{color:var(--green)}

.process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  align-items:center;
  margin-top:16px;
}
.step{
  padding:12px 10px;
  text-align:center;
  background:#0c1628;
  border:1px solid #1d2d49;
  border-radius:14px;
  min-height:110px;
}
.step .circle{
  width:42px;height:42px;border-radius:50%;
  margin:0 auto 10px;
  background:#12223c;
  border:1px solid #2e466f;
  display:grid;place-items:center;
  color:#90b7ff;
}

.subgrid{display:grid;grid-template-columns:1.05fr 1.15fr .9fr;gap:16px;margin-top:16px}
.info-list,.log,.summary,.support,.transfer,.control,.sec{display:grid;gap:10px}
.row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(42,61,93,.45);
  font-size:13px;
}
.pill{
  padding:4px 8px;
  border-radius:999px;
  background:rgba(45,211,111,.14);
  color:#92ffbb;
  border:1px solid rgba(45,211,111,.24);
  font-size:12px;
}
.toggle{
  width:42px;height:22px;
  background:#17304e;
  border-radius:999px;
  position:relative;
  display:inline-block;
  vertical-align:middle;
}
.toggle::after{
  content:'';
  position:absolute;
  top:3px;right:3px;
  width:16px;height:16px;
  background:var(--green);
  border-radius:50%;
}
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  background:linear-gradient(180deg,#2d7dff,#1d63d6);
  color:#fff;
  border:none;
  padding:14px 16px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
}
.btn.green{background:linear-gradient(180deg,#2dd36f,#1aab55)}
.progressbar{
  height:10px;
  background:#122036;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #1d2e4c;
}
.progressbar > div{
  width:85%;
  height:100%;
  background:linear-gradient(90deg,#2dd36f,#8cffae);
}
.logbox{
  background:#091425;
  border:1px solid #1d2d49;
  border-radius:12px;
  padding:12px;
  font-family:ui-monospace, SFMono-Regular, monospace;
  font-size:12px;
  color:#8fd0ff;
  line-height:1.7;
}
.ok{color:#7bff9f}
.warn{color:#ffd166}
.dim{color:#8297b8}
.footergrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:16px}

@media (max-width:1100px){
  .topbar,.subgrid,.footergrid{grid-template-columns:1fr}
  .actions,.status,.process{grid-template-columns:1fr 1fr}
  .hero h1{font-size:32px}
}
@media (max-width:650px){
  .actions,.status,.process{grid-template-columns:1fr}
  .wrap{padding:12px}
  .hero{min-height:240px}
}