@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;600;700;800;900&display=swap');

*{box-sizing:border-box}
:root{
  --bg:#050914;
  --side:#07101d;
  --card:#0b1728;
  --card2:#10284a;
  --line:#21486f;
  --blue:#2e73ff;
  --green:#2ee66d;
  --yellow:#ffd21f;
  --red:#df3348;
  --muted:#9fb6d8;
}
body{margin:0;background:radial-gradient(circle at top,#112a50,#050914 55%,#02040a);color:#f2f7ff;font-family:Inter,Arial,sans-serif}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;background-image:radial-gradient(#6aa8ff 1px,transparent 1px);background-size:18px 18px}
body.loading .app{visibility:hidden}
.app{display:flex;min-height:100vh}
.sidebar{width:270px;position:fixed;inset:0 auto 0 0;background:rgba(5,12,24,.98);border-right:1px solid var(--line);padding:24px 16px;overflow:auto}
.main{margin-left:270px;width:calc(100% - 270px);padding:28px}
.logo{font-family:'Press Start 2P';font-size:18px;color:var(--yellow);text-shadow:3px 3px #a11d1d,5px 5px #000;margin-bottom:28px;cursor:pointer}
.logo span{color:#86baff;text-shadow:3px 3px #173b8d,5px 5px #000}

.user-card,.balance-card,.nav-link,.server-mini,.logout,.metric,.panel,.server-table,.quick-card,.console-page,.files-page{
  background:linear-gradient(180deg,#10284a,#081426);
  border:1px solid var(--line);
  border-radius:14px;
}
.user-card{display:flex;gap:12px;align-items:center;padding:14px;margin-bottom:14px}
.avatar{width:44px;height:44px;border-radius:10px;background:linear-gradient(180deg,#4d90ff,#255ee0);display:grid;place-items:center;font-weight:900}
.user-card small{display:block;color:var(--green);margin-top:4px;font-size:12px}
.balance-card{padding:16px;margin-bottom:22px}.balance-card span,.nav-title{font-size:11px;font-weight:900;color:#89aad2;text-transform:uppercase}
.balance-card b{display:block;margin-top:8px;color:var(--yellow);font-size:23px}
.nav-title{margin:18px 0 9px}
.nav-link{width:100%;border:1px solid var(--line);color:white;text-align:left;padding:13px 15px;margin-bottom:9px;font-weight:800;cursor:pointer}
.nav-link:hover{background:#143766}
.server-mini{padding:12px;margin-bottom:9px;cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.server-mini b{display:block}.server-mini small{color:#bcd4f4;font-size:12px}
.server-sub{display:none;padding:2px 0 10px 14px}.server-sub.open{display:grid;gap:5px}
.server-sub button{background:transparent;border:0;color:#cfe2ff;text-align:left;padding:6px 0;cursor:pointer}
.logout{display:block;color:#ff7282;text-decoration:none;padding:13px 15px;margin-top:18px;font-weight:800}

.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.topbar h1{font-size:30px;margin:0}.topbar p{color:#b7c9e5;margin:7px 0 0}
.btn{border:0;border-radius:10px;padding:11px 15px;font-weight:900;color:white;cursor:pointer;background:#132845}
.btn.blue,.btn.start{background:linear-gradient(180deg,#3d8cff,#1d5ee8)}
.btn.stop{background:linear-gradient(180deg,#ff586a,#c52c3e)}
.btn:hover{filter:brightness(1.12)}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.metric{padding:18px}.metric small{color:#a9bfdd;font-weight:900}.metric b{display:block;font-size:25px;margin-top:10px}.metric .yellow{color:var(--yellow)}.metric .green{color:var(--green)}

.panel{padding:20px;margin-bottom:18px}
.panel h2,.section-title{margin:0 0 14px}
.server-table{overflow:hidden}
.row{display:grid;grid-template-columns:1.2fr 1.8fr .8fr .7fr 180px;gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid rgba(80,130,190,.22)}
.row.head{font-size:12px;color:#9fb6d8;font-weight:900;background:rgba(255,255,255,.03)}
.badge{display:inline-block;padding:5px 9px;border-radius:8px;background:#103d22;color:#4dff83;font-size:12px;font-weight:900}
.action-btn{width:36px;height:34px;border:1px solid var(--line);background:#122845;color:white;border-radius:8px;cursor:pointer;margin-right:6px}
.action-btn:hover{background:#1c4b83}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.quick-card{padding:18px;font-weight:800}

.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.plan{padding:22px}.plan h2{font-family:'Press Start 2P';font-size:16px}.price{font-size:30px;color:var(--yellow);font-weight:900;margin:18px 0}
.input,select,textarea{width:100%;background:#07101d;color:white;border:1px solid #315f91;border-radius:10px;padding:13px;margin:8px 0;outline:0}

.manage-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.box{background:#0b1728;border:1px solid var(--line);border-top:3px solid #1597d5;padding:16px;border-radius:10px}.box h2{margin:0 0 13px}.meter{height:7px;background:#1b2b43;margin:6px 0 12px}.meter i{display:block;height:100%;background:var(--green)}
.info div{display:grid;grid-template-columns:120px 1fr;padding:8px 0;border-bottom:1px solid rgba(80,130,190,.22)}code{color:#ff91af;background:#14243a;padding:3px 6px;border-radius:4px}

.console-page,.files-page{padding:16px}
.console-head,.files-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.console-out{height:560px;background:#02050b;color:#e8edf7;border:1px solid var(--line);padding:15px;overflow:auto;font:13px/1.5 Consolas,monospace;white-space:pre-wrap}
.command{display:flex;margin-top:10px;border:1px solid var(--line);background:#0b1728}.command span{padding:12px;border-right:1px solid var(--line)}.command input{flex:1;border:0;background:transparent;color:white;padding:12px;outline:0}
.file-row{display:grid;grid-template-columns:1fr 130px 90px;gap:10px;padding:11px;border-bottom:1px solid rgba(80,130,190,.22)}
.file-row:hover{background:#10284a}.file-row span:first-child{cursor:pointer}
.warn{background:#d98900;color:white;padding:13px;margin-top:14px;font-weight:800}

@media(max-width:1100px){.metrics,.quick,.plan-grid,.manage-grid{grid-template-columns:1fr}.row{grid-template-columns:1fr}.sidebar{position:relative;width:100%}.main{margin-left:0;width:100%}.app{display:block}}

/* sidebar jak na referencji */
.sidebar{
  width:270px!important;
  background:#07101d!important;
  border-right:1px solid #18375b!important;
}

.main{
  margin-left:270px!important;
  width:calc(100% - 270px)!important;
}

.server-mini{
  background:linear-gradient(180deg,#102744,#0b1728)!important;
  border:1px solid #1f4978!important;
  border-radius:10px!important;
  padding:11px 12px!important;
  margin-bottom:8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  box-shadow:none!important;
}

.server-mini b{
  font-size:13px!important;
  color:#fff!important;
  display:block!important;
}

.server-mini small{
  font-size:11px!important;
  color:#a9c4e4!important;
}

.server-arrow{
  color:#9fbbdc!important;
  font-size:16px!important;
}

.server-mini:first-of-type .server-arrow{
  color:#35e86d!important;
}

.server-sub{
  display:none;
  padding:2px 0 10px 14px!important;
}

.server-sub.open{
  display:grid!important;
  gap:6px!important;
}

.server-sub button{
  background:transparent!important;
  border:0!important;
  color:#c9dcf5!important;
  text-align:left!important;
  padding:4px 0!important;
  font-size:13px!important;
  cursor:pointer!important;
}

.server-sub button:hover{
  color:#ffd21f!important;
}

.logout{
  color:#ff5264!important;
  background:#0b1728!important;
  border:1px solid #1f4978!important;
  border-radius:10px!important;
}

/* statystyki */
#liveCpu,#liveRam,#liveDisk,#liveState{
  color:#35e86d!important;
  font-weight:900!important;
}

/* poprawiony lewy panel serwerów */
.server-mini{
  min-height:68px!important;
  margin-bottom:8px!important;
}

.server-mini.active{
  border-color:#2ee66d!important;
  background:linear-gradient(180deg,#12345c,#0b1b31)!important;
}

.server-mini.active .server-arrow{
  color:#2ee66d!important;
  transform:rotate(90deg);
}

.server-sub{
  display:none!important;
  padding:6px 0 12px 18px!important;
  margin-bottom:6px!important;
}

.server-sub.open{
  display:grid!important;
}

.server-sub button{
  font-size:14px!important;
  color:#d9e9ff!important;
  padding:5px 0!important;
}

.server-sub button:hover{
  color:#ffd21f!important;
}

/* HOST1G files manager */
.files-pro,.editor-pro{
  background:linear-gradient(180deg,#10284a,#081426);
  border:1px solid #21486f;
  border-radius:18px;
  padding:18px;
  color:#eef6ff;
}

.files-head-pro{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  border-bottom:1px solid rgba(120,170,230,.22);
  padding-bottom:14px;
  margin-bottom:14px;
}

.files-head-pro h2{
  margin:0 0 6px;
}

.files-head-pro p{
  margin:0;
  color:#9fb6d8;
}

.files-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.file-table-pro{
  border:1px solid rgba(120,170,230,.22);
  border-radius:12px;
  overflow:hidden;
}

.file-row-pro{
  display:grid;
  grid-template-columns:1fr 130px 90px 190px;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(120,170,230,.14);
  align-items:center;
}

.file-row-pro:hover{
  background:#102f55;
}

.file-head-row{
  background:#07101d;
  color:#9fb6d8;
  font-weight:900;
  font-size:12px;
  text-transform:uppercase;
}

.file-name{
  cursor:pointer;
  font-weight:800;
}

.file-name:hover{
  color:#ffd21f;
}

.mini-btn{
  border:1px solid #315f91;
  background:#132845;
  color:white;
  border-radius:8px;
  padding:7px 10px;
  cursor:pointer;
  font-weight:800;
}

.mini-btn:hover{
  filter:brightness(1.15);
}

.mini-btn.danger{
  background:#b92b3a;
  border-color:#ef5467;
}

.empty-files{
  padding:20px;
  color:#9fb6d8;
}

.code-editor{
  width:100%;
  min-height:650px;
  background:#02050b;
  color:#eaf3ff;
  border:1px solid #21486f;
  border-radius:12px;
  padding:16px;
  font-family:Consolas,monospace;
  font-size:14px;
  line-height:1.45;
  outline:none;
  resize:vertical;
}

@media(max-width:900px){
  .file-row-pro{
    grid-template-columns:1fr;
  }
}

/* HOST1G console PRO */
.console-pro{
  background:linear-gradient(180deg,#10284a,#06101d);
  border:1px solid #21486f;
  border-radius:18px;
  padding:18px;
}

.console-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid rgba(120,170,230,.22);
  padding-bottom:14px;
  margin-bottom:14px;
}

.console-top h2{
  margin:0 0 6px;
}

.console-top p{
  margin:0;
  color:#9fb6d8;
}

.console-tools{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.console-search{
  background:#07101d;
  border:1px solid #21486f;
  color:#eaf3ff;
  border-radius:10px;
  padding:10px 12px;
  min-width:220px;
  outline:none;
}

.console-out-pro{
  min-height:620px;
  max-height:620px;
  overflow:auto;
  background:#02050b;
  color:#d8f0ff;
  border:1px solid #21486f;
  border-radius:14px;
  padding:16px;
  font-family:Consolas,monospace;
  font-size:13px;
  line-height:1.45;
  white-space:pre-wrap;
}

.command-pro{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:8px;
  background:#07101d;
  border:1px solid #21486f;
  border-radius:12px;
  padding:10px;
}

.command-pro span{
  color:#ffd21f;
  font-weight:900;
}

.command-pro input{
  flex:1;
  background:transparent;
  border:0;
  color:white;
  outline:none;
  font-size:15px;
}

.console-help{
  color:#8fa8ca;
  font-size:12px;
  margin-top:10px;
}

@media(max-width:900px){
  .console-top{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* HOST1G console PRO */
.console-pro{
  background:linear-gradient(180deg,#10284a,#06101d);
  border:1px solid #21486f;
  border-radius:18px;
  padding:18px;
}

.console-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid rgba(120,170,230,.22);
  padding-bottom:14px;
  margin-bottom:14px;
}

.console-top h2{
  margin:0 0 6px;
}

.console-top p{
  margin:0;
  color:#9fb6d8;
}

.console-tools{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.console-search{
  background:#07101d;
  border:1px solid #21486f;
  color:#eaf3ff;
  border-radius:10px;
  padding:10px 12px;
  min-width:220px;
  outline:none;
}

.console-out-pro{
  min-height:620px;
  max-height:620px;
  overflow:auto;
  background:#02050b;
  color:#d8f0ff;
  border:1px solid #21486f;
  border-radius:14px;
  padding:16px;
  font-family:Consolas,monospace;
  font-size:13px;
  line-height:1.45;
  white-space:pre-wrap;
}

.command-pro{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:8px;
  background:#07101d;
  border:1px solid #21486f;
  border-radius:12px;
  padding:10px;
}

.command-pro span{
  color:#ffd21f;
  font-weight:900;
}

.command-pro input{
  flex:1;
  background:transparent;
  border:0;
  color:white;
  outline:none;
  font-size:15px;
}

.console-help{
  color:#8fa8ca;
  font-size:12px;
  margin-top:10px;
}

@media(max-width:900px){
  .console-top{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* HOST1G Dashboard 2.0 */
.dash-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:linear-gradient(135deg,#102b52,#081426 70%);
  border:1px solid #24507a;
  border-radius:22px;
  padding:28px;
  box-shadow:0 24px 80px rgba(0,0,0,.22);
}

.dash-hero:after{
  content:"HOST1G";
  position:absolute;
  right:26px;
  top:10px;
  font-size:90px;
  font-weight:900;
  color:rgba(255,255,255,.035);
  pointer-events:none;
}

.dash-label{
  color:#ffd21f;
  font-weight:900;
  letter-spacing:.08em;
}

.dash-hero h2{
  margin:8px 0;
  font-size:34px;
}

.dash-hero p{
  margin:0;
  color:#a9c2e8;
  max-width:720px;
  line-height:1.6;
}

.dash-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:18px 0;
}

.dash-metric{
  background:linear-gradient(180deg,#10284a,#081426);
  border:1px solid #21486f;
  border-radius:18px;
  padding:18px;
}

.dash-metric small{
  color:#8fb7ea;
  text-transform:uppercase;
  font-weight:900;
}

.dash-metric b{
  display:block;
  font-size:28px;
  margin:8px 0;
}

.dash-metric span{
  color:#8fa8ca;
}

.dash-section-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin:22px 0 14px;
}

.dash-section-title h2{
  margin:0;
  font-size:28px;
}

.dash-section-title span{
  color:#8fa8ca;
}

.dash-server-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:18px;
}

.dash-server-card{
  position:relative;
  background:linear-gradient(180deg,#10284a,#07101d);
  border:1px solid #24507a;
  border-radius:20px;
  padding:20px;
  overflow:hidden;
}

.server-status-dot{
  position:absolute;
  right:18px;
  top:18px;
  width:10px;
  height:10px;
  background:#22c55e;
  border-radius:50%;
  box-shadow:0 0 18px #22c55e;
}

.server-card-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.server-state{
  color:#22c55e;
  font-size:12px;
  font-weight:900;
}

.dash-server-card h3{
  margin:6px 0;
  font-size:24px;
}

.dash-server-card p{
  margin:0;
  color:#a9c2e8;
}

.quick-btn{
  background:#2563eb;
  color:white;
  border:0;
  border-radius:12px;
  padding:10px 16px;
  font-weight:900;
  cursor:pointer;
}

.server-bars{
  margin:18px 0;
  display:grid;
  gap:12px;
}

.server-bars div{
  display:grid;
  grid-template-columns:60px 1fr;
  gap:8px;
  align-items:center;
}

.server-bars span{
  font-weight:900;
}

.server-bars b{
  text-align:right;
  color:#ffd21f;
}

.server-bars i{
  grid-column:1/3;
  display:block;
  height:7px;
  background:#183554;
  border-radius:99px;
  overflow:hidden;
}

.server-bars em{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#60a5fa,#facc15);
}

.server-actions{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.server-actions button{
  background:#0b1728;
  border:1px solid #315f91;
  color:white;
  border-radius:10px;
  padding:10px 8px;
  font-weight:900;
  cursor:pointer;
}

.server-actions button:hover{
  background:#12345c;
}

.empty-dashboard{
  background:linear-gradient(180deg,#10284a,#07101d);
  border:1px solid #24507a;
  border-radius:20px;
  padding:28px;
}

.empty-dashboard p{
  color:#9fb6d8;
}

@media(max-width:1000px){
  .dash-metrics{grid-template-columns:repeat(2,1fr)}
  .dash-hero{align-items:flex-start;flex-direction:column}
}

@media(max-width:650px){
  .dash-metrics{grid-template-columns:1fr}
  .server-actions{grid-template-columns:1fr 1fr}
}

.network-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}

.network-card{
  background:#07101d;
  border:1px solid #21486f;
  border-radius:16px;
  padding:18px;
}

.network-card small{
  color:#8fb7ea;
  font-weight:900;
}

.network-card b{
  display:block;
  margin:10px 0;
  font-size:18px;
  color:#ffd21f;
  word-break:break-all;
}

/* HOST1G server summary */
.server-summary-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  background:linear-gradient(135deg,#102b52,#07101d);
  border:1px solid #24507a;
  border-radius:22px;
  padding:24px;
  margin-bottom:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.22);
}

.server-pill{
  display:inline-block;
  color:#ffd21f;
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
  margin-bottom:8px;
}

.server-summary-hero h2{
  margin:0 0 6px;
  font-size:34px;
}

.server-summary-hero p{
  margin:0;
  color:#a9c2e8;
}

.server-summary-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:18px;
}

.summary-grid.two{
  grid-template-columns:1fr 1fr;
}

.summary-card,.summary-panel{
  background:linear-gradient(180deg,#10284a,#081426);
  border:1px solid #21486f;
  border-radius:18px;
  padding:18px;
}

.summary-card small{
  color:#8fb7ea;
  text-transform:uppercase;
  font-weight:900;
}

.summary-card b{
  display:block;
  font-size:26px;
  margin:10px 0;
}

.summary-card span{
  color:#8fa8ca;
}

.summary-meter{
  height:8px;
  background:#183554;
  border-radius:99px;
  overflow:hidden;
}

.summary-meter i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#60a5fa,#facc15);
}

.summary-panel h3{
  margin-top:0;
  font-size:22px;
}

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

.quick-grid button{
  background:#0b1728;
  border:1px solid #315f91;
  color:white;
  border-radius:12px;
  padding:12px;
  font-weight:900;
  cursor:pointer;
}

.quick-grid button:hover{
  background:#12345c;
}

@media(max-width:1000px){
  .summary-grid{grid-template-columns:repeat(2,1fr)}
  .summary-grid.two{grid-template-columns:1fr}
  .server-summary-hero{align-items:flex-start;flex-direction:column}
}

@media(max-width:650px){
  .summary-grid{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr}
}