*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  background:#070912;
  color:#e9eefc;
  overflow-x:hidden;
}

/* Red 3D "kunang-kunang" glow background */
body::before{
  content:"";
  position:fixed;
  inset:-40px;
  pointer-events:none;
  background:
    radial-gradient(900px 500px at 15% 20%, rgba(255,60,90,.18), transparent 60%),
    radial-gradient(700px 420px at 85% 30%, rgba(255,30,60,.14), transparent 62%),
    radial-gradient(520px 360px at 60% 85%, rgba(255,90,120,.12), transparent 65%),
    radial-gradient(1000px 600px at 50% 50%, rgba(40,80,255,.08), transparent 70%);
  filter: blur(0px);
  transform: translateZ(0);
  animation: drift 10s ease-in-out infinite alternate;
  z-index:-2;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,80,110,.9), transparent 55%),
    radial-gradient(3px 3px at 30% 70%, rgba(255,40,80,.85), transparent 60%),
    radial-gradient(2px 2px at 55% 35%, rgba(255,120,150,.75), transparent 55%),
    radial-gradient(4px 4px at 70% 60%, rgba(255,30,60,.9), transparent 60%),
    radial-gradient(2px 2px at 85% 15%, rgba(255,90,120,.8), transparent 55%),
    radial-gradient(3px 3px at 92% 82%, rgba(255,60,90,.7), transparent 60%),
    radial-gradient(2px 2px at 40% 10%, rgba(255,120,150,.6), transparent 55%),
    radial-gradient(3px 3px at 18% 88%, rgba(255,50,80,.7), transparent 60%);
  opacity:.55;
  filter: drop-shadow(0 0 10px rgba(255,40,80,.35));
  animation: fireflies 7s linear infinite;
  z-index:-1;
}
@keyframes drift{
  from{transform: translate3d(-10px,-8px,0) scale(1)}
  to{transform: translate3d(10px,8px,0) scale(1.02)}
}
@keyframes fireflies{
  0%{transform: translate3d(0,0,0); opacity:.35}
  30%{opacity:.65}
  50%{transform: translate3d(6px,-10px,0); opacity:.45}
  80%{opacity:.7}
  100%{transform: translate3d(-6px,10px,0); opacity:.35}
}
.container{max-width:1100px;margin:32px auto;padding:0 16px}
h1{margin:0 0 16px;font-size:28px}
.header{margin:0 0 16px}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.title-row{display:flex;align-items:center;gap:12px}
.title-icon{width:40px;height:40px;border-radius:8px;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.06)}
.title-text{display:flex;flex-direction:column}
.title-main{font-weight:700;font-size:22px}
.title-sub{opacity:.8;font-size:13px}
.header-actions{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border-radius:10px;text-decoration:none;font-size:13px;font-weight:600;color:#e9eefc;background:#1e2a5c;border:1px solid #33489c;cursor:pointer;transition:.15s}
.btn:hover{transform:translateY(-1px);border-color:#3953db}
.btn:active{transform:translateY(0)}
.card{
  background: rgba(16, 20, 44, .72);
  border: 1px solid rgba(96, 110, 210, .14);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.metric-card{background:#0e1430;border:1px solid #1c244a;border-radius:10px;padding:12px}
.label{opacity:.7;font-size:12px;margin-bottom:6px}
.value{font-weight:600;font-size:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.server-card{
  background: linear-gradient(180deg, rgba(14,20,48,.75), rgba(10,14,36,.75));
  border: 1px solid rgba(96, 110, 210, .16);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  transition: .18s;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.server-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,60,90,.45);
  box-shadow: 0 18px 38px rgba(0,0,0,.36), 0 0 0 1px rgba(255,60,90,.10);
}
.server-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.server-head img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.badge{
  display:inline-block;
  background: rgba(255,60,90,.10);
  border: 1px solid rgba(255,60,90,.26);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
}

/* Server Card Bottom Actions */
.server-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.btn-card-overlay {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 242, 132, 0.12);
  border: 1px solid rgba(0, 242, 132, 0.32);
  color: #00f284;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-card-overlay:hover {
  background: rgba(0, 242, 132, 0.22);
  border-color: #00f284;
  transform: translateY(-1px);
}

/* Overlay Box in Server Detail Modal */
.overlay-box {
  background: linear-gradient(180deg, rgba(16, 25, 58, 0.85), rgba(12, 18, 42, 0.85));
  border: 1px solid rgba(0, 242, 132, 0.28);
  border-radius: 14px;
  padding: 14px;
  margin: 16px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.overlay-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.overlay-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #f0f4fc;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00f284;
  box-shadow: 0 0 10px rgba(0, 242, 132, 0.8);
  animation: pulse-ring 1.8s infinite;
}
.live-pill {
  font-size: 10.5px;
  font-weight: 700;
  color: #00f284;
  background: rgba(0, 242, 132, 0.1);
  border: 1px solid rgba(0, 242, 132, 0.3);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}
.overlay-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.overlay-input {
  flex: 1;
  font-family: monospace;
  font-size: 12px;
  padding: 8px 10px;
  background: #080c20;
  border: 1px solid #202b5c;
  color: #93c5fd;
  border-radius: 8px;
}
.btn-overlay {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  background: #1b2659;
  border: 1px solid #33489c;
  color: #e9eefc;
  cursor: pointer;
  white-space: nowrap;
  transition: .15s;
}
.btn-overlay:hover {
  background: #25367d;
  border-color: #4a68db;
  color: #fff;
  transform: translateY(-1px);
}
.overlay-modes {
  color: #94a3b8;
  font-size: 11.5px;
  margin-top: 6px;
}
.mode-link {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}
.mode-link:hover {
  color: #93c5fd;
  text-decoration: underline;
}
.overlay-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.4;
}

/* Dashboard should not look identical to public list */
.page-dashboard .card{
  background: rgba(12, 14, 32, .68);
  border-color: rgba(255,60,90,.16);
}
.page-dashboard .metric-card{
  background: rgba(10,12,28,.65);
  border-color: rgba(255,60,90,.12);
}
.page-dashboard .btn{
  background: rgba(255,60,90,.12);
  border-color: rgba(255,60,90,.28);
}
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:20px 12px;
}
.hidden{display:none}
.modal-card{
  background:#0f1533;
  border:1px solid #2a3875;
  border-radius:12px;
  max-width:760px;
  width:min(760px,96vw);
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  padding:16px;
  position:relative;
}
#modal-close{position:absolute;top:8px;right:8px;background:#1b2552;border:1px solid #2e3f8e;border-radius:8px;color:#e9eefc;font-size:18px;line-height:1;padding:4px 8px;cursor:pointer}
.table{width:100%;border-collapse:collapse;margin-top:8px;table-layout:fixed}
.table th,.table td{border-bottom:1px solid #1c244a;padding:8px;text-align:left;font-size:14px}
.small{opacity:.8;font-size:12px}
.form-row{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.form-label{opacity:.85;font-size:12px}
.input{background:#0e1430;border:1px solid #1c244a;border-radius:10px;color:#e9eefc;padding:8px 10px;font-size:13px;outline:none}
.input:focus{border-color:#3953db}
.toast{position:fixed;right:16px;bottom:16px;background:#1e2a5c;border:1px solid #33489c;color:#e9eefc;padding:10px 12px;border-radius:12px;max-width:420px;z-index:50}
.toast-error{background:#4a1c2a;border-color:#a43a58}

/* Responsive: tablets */
@media (max-width: 1024px){
  .container{max-width:900px;margin:20px auto;padding:0 12px}
  h1{font-size:24px}
  .value{font-size:16px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .metric-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .modal-card{max-width:640px;width:94%;padding:14px}
}

/* Footer */
.site-footer{
  margin-top: 32px;
  padding: 18px 0;
  text-align: center;
  border-top: 1px solid rgba(96, 110, 210, .10);
}
.footer-links{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.footer-links a{
  color: rgba(233, 238, 252, .55);
  text-decoration: none;
  font-size: 12px;
  transition: color .15s;
}
.footer-links a:hover{
  color: rgba(233, 238, 252, .85);
  text-decoration: underline;
}
.footer-sep{
  color: rgba(233, 238, 252, .20);
  font-size: 10px;
}

/* Legal pages (TOS / PP) */
.page-legal{
  max-width: 760px;
  margin: 40px auto;
  padding: 0 16px;
}
.page-legal h1{
  font-size: 26px;
  margin-bottom: 8px;
}
.page-legal .last-updated{
  opacity: .5;
  font-size: 12px;
  margin-bottom: 24px;
}
.page-legal h2{
  font-size: 18px;
  margin: 28px 0 10px;
}
.page-legal p,
.page-legal li{
  opacity: .8;
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 10px;
}
.page-legal ul{
  padding-left: 20px;
  margin-bottom: 12px;
}
.page-legal a{
  color: rgba(255, 120, 150, .85);
}
.page-legal .back-link{
  display: inline-block;
  margin-top: 28px;
  color: rgba(233, 238, 252, .5);
  font-size: 13px;
}

/* Responsive: phones */
@media (max-width: 640px){
  .container{max-width:100%;margin:14px auto;padding:0 10px}
  h1{font-size:20px;margin-bottom:10px}
  /* Keep actions on the right even on phones */
  .header-row{flex-direction:row;align-items:center}
  .header-actions{margin-left:auto}
  .title-icon{width:32px;height:32px}
  .title-main{font-size:18px}
  .title-sub{font-size:12px}
  .card{padding:12px;border-radius:10px}
  .grid2{grid-template-columns:1fr;gap:8px}
  .value{font-size:15px}
  .cards{grid-template-columns:1fr;gap:10px}
  .server-card{padding:10px}
  .server-head img{width:28px;height:28px}
  .badge{font-size:11px;padding:2px 6px}
  .table th,.table td{padding:6px;font-size:13px}
  .modal{padding:8px}
  .modal-card{
    max-width:none;
    width:100%;
    max-height:calc(100vh - 16px);
    padding:12px;
    border-radius:10px;
  }
  .form-row .btn{width:100%}
  .input{font-size:16px}
  .toast{left:10px;right:10px;bottom:10px;max-width:none}
  #modal-close{top:6px;right:6px;font-size:16px}
}