:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
*{box-sizing:border-box}
html,body{margin:0;background:#0b1320;color:#c7d5e0;font-family:Arial;overscroll-behavior:contain}
body{padding-left:var(--safe-left);padding-right:var(--safe-right)}

.navbar{
  background:#0f1a2b;
  padding:12px 20px;
  padding-top: calc(12px + var(--safe-top));
  display:flex;
  gap:18px;
  align-items:center;
  border-bottom:1px solid #22324a;
  flex-wrap:wrap;
}
.navbar a{
  color:#7fff7f;
  text-decoration:none;
  font-weight:bold;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 10px;
  border-radius:10px;
}
.navbar a:active{opacity:.85}
.navbar .spacer{margin-left:auto}

.container{padding:25px;max-width:1300px;margin:auto;padding-bottom: calc(25px + var(--safe-bottom));}
.pageTitle{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:#c7d5e0}
.pageTitle .icon{font-size:22px;line-height:1}
h1{margin:0}

.box{background:#1b2838;border:1px solid #22324a;border-radius:12px;padding:12px}
.grid{display:grid;grid-template-columns: 1fr 1fr;gap:16px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}

input,select{padding:10px 12px;border-radius:10px;border:1px solid #22324a;background:#0f1a2b;color:#c7d5e0;min-height:44px;width:100%}
button,.btn{background:#2a475e;border:1px solid #22324a;color:#c7d5e0;padding:10px 12px;border-radius:10px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px}
button:hover,.btn:hover{filter:brightness(1.05)}
button:active,.btn:active{opacity:.85}
button:disabled{opacity:.55;cursor:not-allowed}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row > *{flex:1}
.row .fit{flex:0 0 auto}
.small{font-size:12px;opacity:.85}
.green{color:#7fff7f;font-weight:bold}
.muted{opacity:.85}
.hr{height:1px;background:#22324a;margin:12px 0}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;border:1px solid #22324a;font-size:12px}
.online{border-color:#2d8;color:#2d8}
.offline{border-color:#f66;color:#f66}
.warn{color:#ffd37a}
.danger{color:#ff7f7f}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #22324a;padding:10px;text-align:left;font-size:14px}

.note{background:#0f1a2b;border:1px dashed #22324a;border-radius:12px;padding:12px}

/* Advanced toggle */
.advWrap{margin-top:16px}
.advHeader{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.advHeader .sp{margin-left:auto}
.advPanel{display:none;margin-top:12px}
.advOpen .advPanel{display:block}