*, *::before, *::after {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

img, a, button {
  -webkit-user-drag: none;
  draggable: false;
}

:root{
  --bg: #0B1220;
  --bg2:#070C16;

  --text: #E9EEF8;
  --muted: rgba(233,238,248,0.70);

  --panel: rgba(0,0,0,0.22);
  --border: rgba(255,255,255,0.10);
  --border2: rgba(255,255,255,0.08);

  --good: #22C55E;
  --bad:  #EF4444;
  --warn: #F59E0B;

  --radius: 16px;
  --shadow: 0 16px 55px rgba(0,0,0,0.55);
}

*{ box-sizing:border-box; }
html, body{ min-height: 100%; }

/* ── scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: rgba(255,255,255,0.03); border-radius: 3px; }
::-webkit-scrollbar-thumb        { background: rgba(34,197,94,0.28); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(34,197,94,0.55); }
::-webkit-scrollbar-corner       { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(34,197,94,0.28) rgba(255,255,255,0.03); }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 700px at 15% 15%, rgba(34,197,94,0.10), transparent 60%),
    radial-gradient(900px 700px at 85% 45%, rgba(14,165,233,0.06), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

#particles-container{
  position: fixed;
  inset: 0;
  z-index: -1;
}

.shell{
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
}

.panel{
  width: min(980px, 100%);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px 16px 14px;
}

/* header */
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 6px 4px 14px;
  border-bottom: 1px solid var(--border2);
}

.brand{ display:flex; align-items:center; gap:12px; min-width:0; }

.logo{
  width: 42px; height: 42px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
}

.titles{ min-width:0; }

.name{
  font-weight: 800;
  letter-spacing: -0.2px;
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
}

.sub{
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
}

.status{
  display:flex; align-items:center; gap:10px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}

.dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08);
}
.dot.ok  { background: var(--good); box-shadow: 0 0 0 4px rgba(34,197,94,0.18); }
.dot.bad { background: var(--bad);  box-shadow: 0 0 0 4px rgba(239,68,68,0.18); }
.dot.wait{ background: var(--warn); box-shadow: 0 0 0 4px rgba(245,158,11,0.18); animation: dotPulse 1.4s ease-in-out infinite; }
.dot.err { background: var(--bad);  box-shadow: 0 0 0 4px rgba(239,68,68,0.18); }

@keyframes dotPulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* MOTD */
.motd{
  margin-top: 12px; padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.03);
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
}
.motd-left{ min-width:0; }
.motd-title{ font-size:13px; font-weight:800; letter-spacing:-0.1px; margin-bottom:4px; color:rgba(233,238,248,0.90); }
.motd-message{ font-size:13px; line-height:1.5; color:rgba(233,238,248,0.72); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.motd-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto; }
.motd-date{ font-size:12px; color:rgba(233,238,248,0.55); white-space:nowrap; }
.motd-badge{ display:none; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.18); font-size:11px; font-weight:800; letter-spacing:.35px; color:rgba(233,238,248,0.78); }
.motd.is-loading{ opacity:.92; }
.motd.is-error{ border-color:rgba(239,68,68,0.18); }

/* metrics grid */
.grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:14px 4px 8px; }
@media (max-width:860px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px){ .grid{ grid-template-columns:1fr; } .status{ display:none; } .motd{ flex-direction:column; } .motd-right{ align-items:flex-start; } }

.item{ border:1px solid var(--border2); border-radius:12px; background:rgba(255,255,255,0.03); padding:12px; }
.k{ font-size:12px; color:var(--muted); font-weight:600; margin-bottom:8px; }
.v{ font-size:16px; font-weight:800; letter-spacing:-0.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* section title */
.section-title{
  margin-top:10px; padding:10px 4px 8px;
  font-size:12px; font-weight:800; letter-spacing:.35px; text-transform:uppercase;
  color:rgba(233,238,248,0.78);
}

/* services */
.services{ padding:0 4px 2px; display:flex; flex-direction:column; gap:8px; }
.service{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:12px; border:1px solid var(--border2); background:rgba(255,255,255,0.03); }
.service-left{ min-width:0; }
.service-name{ font-size:13px; font-weight:700; color:rgba(233,238,248,0.88); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.service-desc{ margin-top:2px; font-size:12px; color:rgba(233,238,248,0.56); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.service-right{ display:flex; align-items:center; gap:10px; }
.svc-meta{ font-size:12px; color:rgba(233,238,248,0.55); min-width:56px; text-align:right; }

.badge{ border:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.18); color:rgba(233,238,248,0.70); padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.badge.ok   { border-color:rgba(34,197,94,0.25);  color:rgba(233,238,248,0.85); }
.badge.bad  { border-color:rgba(239,68,68,0.25);   color:rgba(233,238,248,0.85); }
.badge.warn { border-color:rgba(245,158,11,0.30);  color:rgba(233,238,248,0.85); }
.badge.unknown{ opacity:.85; }

/* footer */
.foot{ display:flex; justify-content:space-between; gap:10px; padding:12px 4px 2px; color:rgba(233,238,248,0.55); font-size:12px; }
.muted{ color:rgba(233,238,248,0.55); }
.top-right{ display:flex; align-items:center; gap:10px; }

/* ======================================================
   ACTIONS NAV - cool tabs
====================================================== */
.actions{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }

.action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(233,238,248,0.45);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .01em;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .10s ease,
    box-shadow .18s ease;
  overflow: hidden;
  /* indicator bar bottom */
  isolation: isolate;
}

/* icon base */
.action-btn i {
  font-size: 12px;
  transition: color .18s, filter .18s, transform .18s;
}

/* ---- INDICATOR BAR (bottom) ---- */
.action-btn::before {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%; height: 2px;
  border-radius: 2px 2px 0 0;
  background: currentColor;
  opacity: 0;
  transition: transform .22s cubic-bezier(.16,1,.3,1), opacity .18s ease;
}

/* ---- HOVER ---- */
.action-btn:hover {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.09);
  color: rgba(233,238,248,0.82);
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.20);
}
.action-btn:hover i {
  transform: scale(1.12);
}
.action-btn:hover::before {
  transform: translateX(-50%) scaleX(0.5);
  opacity: 0.35;
}
.action-btn:active { transform: translateY(0); }

/* ---- ACTIVE ---- */
.action-btn.is-active {
  background: rgba(0,170,37,0.13);
  border-color: rgba(0,170,37,0.38);
  color: rgba(200,255,215,0.95);
  box-shadow:
    0 0 0 1px rgba(0,170,37,0.10),
    0 4px 16px rgba(0,170,37,0.16),
    inset 0 1px 0 rgba(0,170,37,0.12);
  animation: tabPulse 3.5s ease-in-out infinite;
}

.action-btn.is-active i {
  color: rgba(0,230,80,0.95);
  filter: drop-shadow(0 0 4px rgba(0,200,60,0.55));
  transform: scale(1.08);
}

/* indicator bar - full width on active */
.action-btn.is-active::before {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
  background: rgba(0,210,70,0.80);
  box-shadow: 0 0 6px rgba(0,210,70,0.60);
}

/* shimmer sweep */
.action-btn.is-active::after {
  content: '';
  position: absolute;
  top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: tabSweep 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tabSweep {
  0%   { left: -80%; }
  45%  { left: 130%; }
  100% { left: 130%; }
}

/* subtle bg pulse on active */
@keyframes tabPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(0,170,37,0.10), 0 4px 16px rgba(0,170,37,0.16), inset 0 1px 0 rgba(0,170,37,0.12); }
  50%     { box-shadow: 0 0 0 1px rgba(0,170,37,0.18), 0 4px 20px rgba(0,170,37,0.26), inset 0 1px 0 rgba(0,170,37,0.18); }
}

.action-btn.is-active:hover {
  background: rgba(0,170,37,0.19);
  border-color: rgba(0,170,37,0.55);
  transform: translateY(-1px);
  animation: none;
  box-shadow: 0 0 0 1px rgba(0,170,37,0.16), 0 6px 20px rgba(0,170,37,0.24);
}

/* ---- PER-TAB ACCENT COLORS ---- */

/* Rockstar - amber */
.action-btn.rockstar i { color: rgba(245,158,11,0.65); }
.action-btn.rockstar:hover { background:rgba(245,158,11,0.07); border-color:rgba(245,158,11,0.22); color:rgba(255,220,140,0.90); }
.action-btn.rockstar:hover i { color:rgba(245,158,11,0.95); filter:drop-shadow(0 0 4px rgba(245,158,11,0.45)); }
.action-btn.rockstar.is-active { background:rgba(245,158,11,0.11); border-color:rgba(245,158,11,0.38); color:rgba(255,224,150,0.95); animation:tabPulseAmber 3.5s ease-in-out infinite; }
.action-btn.rockstar.is-active i { color:rgba(255,183,0,0.95); filter:drop-shadow(0 0 5px rgba(245,158,11,0.60)); }
.action-btn.rockstar.is-active::before { background:rgba(245,158,11,0.80); box-shadow:0 0 6px rgba(245,158,11,0.55); }
@keyframes tabPulseAmber { 0%,100%{box-shadow:0 0 0 1px rgba(245,158,11,0.10),0 4px 16px rgba(245,158,11,0.14);} 50%{box-shadow:0 0 0 1px rgba(245,158,11,0.18),0 4px 20px rgba(245,158,11,0.24);} }

/* Bearer - cyan-teal */
.action-btn.bearer i { color: rgba(0,200,150,0.65); }
.action-btn.bearer:hover { background:rgba(0,200,150,0.07); border-color:rgba(0,200,150,0.22); color:rgba(160,255,220,0.90); }
.action-btn.bearer:hover i { color:rgba(0,220,160,0.95); filter:drop-shadow(0 0 4px rgba(0,200,150,0.50)); }
.action-btn.bearer.is-active { background:rgba(0,200,150,0.11); border-color:rgba(0,200,150,0.38); color:rgba(160,255,220,0.95); animation:tabPulseTeal 3.5s ease-in-out infinite; }
.action-btn.bearer.is-active i { color:rgba(0,230,165,0.95); filter:drop-shadow(0 0 5px rgba(0,200,150,0.60)); }
.action-btn.bearer.is-active::before { background:rgba(0,210,155,0.80); box-shadow:0 0 6px rgba(0,200,150,0.55); }
@keyframes tabPulseTeal { 0%,100%{box-shadow:0 0 0 1px rgba(0,200,150,0.10),0 4px 16px rgba(0,200,150,0.14);} 50%{box-shadow:0 0 0 1px rgba(0,200,150,0.18),0 4px 20px rgba(0,200,150,0.24);} }

/* Discord - indigo */
.action-btn.discord i { color: rgba(99,102,241,0.65); }
.action-btn.discord:hover { background:rgba(99,102,241,0.07); border-color:rgba(99,102,241,0.22); color:rgba(180,182,255,0.90); }
.action-btn.discord:hover i { color:rgba(120,122,255,0.95); filter:drop-shadow(0 0 4px rgba(99,102,241,0.50)); }
.action-btn.discord.is-active { background:rgba(99,102,241,0.11); border-color:rgba(99,102,241,0.38); color:rgba(180,182,255,0.95); animation:tabPulseIndigo 3.5s ease-in-out infinite; }
.action-btn.discord.is-active i { color:rgba(130,132,255,0.95); filter:drop-shadow(0 0 5px rgba(99,102,241,0.60)); }
.action-btn.discord.is-active::before { background:rgba(110,112,255,0.80); box-shadow:0 0 6px rgba(99,102,241,0.55); }
@keyframes tabPulseIndigo { 0%,100%{box-shadow:0 0 0 1px rgba(99,102,241,0.10),0 4px 16px rgba(99,102,241,0.14);} 50%{box-shadow:0 0 0 1px rgba(99,102,241,0.18),0 4px 20px rgba(99,102,241,0.24);} }

/* Admin - red */
.action-btn.admin i { color: rgba(239,68,68,0.60); }
.action-btn.admin:hover { background:rgba(239,68,68,0.07); border-color:rgba(239,68,68,0.22); color:rgba(255,160,160,0.90); }
.action-btn.admin:hover i { color:rgba(255,80,80,0.95); filter:drop-shadow(0 0 4px rgba(239,68,68,0.50)); }
.action-btn.admin.is-active { background:rgba(239,68,68,0.10); border-color:rgba(239,68,68,0.35); color:rgba(255,160,160,0.95); animation:tabPulseRed 3.5s ease-in-out infinite; }
.action-btn.admin.is-active i { color:rgba(255,90,90,0.95); filter:drop-shadow(0 0 5px rgba(239,68,68,0.55)); }
.action-btn.admin.is-active::before { background:rgba(239,68,68,0.80); box-shadow:0 0 6px rgba(239,68,68,0.50); }
@keyframes tabPulseRed { 0%,100%{box-shadow:0 0 0 1px rgba(239,68,68,0.10),0 4px 16px rgba(239,68,68,0.12);} 50%{box-shadow:0 0 0 1px rgba(239,68,68,0.18),0 4px 20px rgba(239,68,68,0.22);} }

/* Changelog */
.action-btn.changelog:hover { background:rgba(0,170,37,0.07); border-color:rgba(0,170,37,0.22); }
.action-btn.changelog.is-active { color:#eaffef; }

/* Lookup */
.action-btn.lookup.is-active { color:rgba(180,255,200,0.95); }
.action-btn.lookup:hover { color:rgba(180,255,200,0.80); }

/* responsive */
@media (max-width: 560px){
  .action-btn span { display:none; }
  .action-btn { padding:0 10px; }
}

/* ======================================================
   HEADER STACKED
====================================================== */
.top.top-stacked{
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
  padding:8px 4px 14px;
  border-bottom:1px solid var(--border2);
}

.top.top-stacked .top-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px; min-width:0;
}

.top.top-stacked .brand { flex:1 1 auto; min-width:0; }
.top.top-stacked .zmt-badge { flex:0 0 auto; align-self:center; }

.top.top-stacked .actions.actions-under{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding-top:10px;
  border-top:1px solid var(--border2);
}

@media (max-width:680px){
  .top.top-stacked .top-row { align-items:flex-start; }
  .top.top-stacked .zmt-badge { display:none; }
  .top.top-stacked .actions.actions-under { padding-top:8px; }
}

/* ======================================================
   ZMT BADGE
====================================================== */
.zmt-badge{
  width:240px; height:54px; border-radius:16px;
  position:relative; overflow:hidden;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 14px 40px rgba(0,0,0,0.45),inset 0 0 0 1px rgba(0,170,37,0.07);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transform:translateZ(0);
}

.zmt-badge-inner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 14px; }
.zmt-badge-text { position:relative; z-index:3; line-height:1.05; }
.zmt-badge-top  { font-weight:950; letter-spacing:.18em; font-size:12px; color:rgba(233,238,248,0.92); }
.zmt-badge-sub  { margin-top:6px; font-weight:800; font-size:12px; color:rgba(233,238,248,0.62); }

.zmt-badge::before{
  content:""; position:absolute; inset:-35%;
  background:linear-gradient(rgba(0,170,37,0.09) 1px,transparent 1px),linear-gradient(90deg,rgba(0,170,37,0.09) 1px,transparent 1px);
  background-size:18px 18px; transform:rotate(12deg);
  animation:zmtGrid 9s linear infinite; opacity:.45;
}
@keyframes zmtGrid{ from{transform:translate3d(0,0,0) rotate(12deg);} to{transform:translate3d(140px,80px,0) rotate(12deg);} }

.zmt-badge::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 0%,rgba(0,170,37,0.00) 38%,rgba(0,170,37,0.28) 50%,rgba(0,170,37,0.00) 62%,transparent 100%);
  transform:translateX(-140%);
  animation:zmtSweep 3.2s ease-in-out infinite; opacity:.95;
}
@keyframes zmtSweep{ 0%{transform:translateX(-140%);} 40%{transform:translateX(140%);} 100%{transform:translateX(140%);} }

.zmt-badge-spark{
  position:absolute; right:-18px; top:-18px; width:84px; height:84px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,170,37,0.22),transparent 62%);
  animation:zmtSpark 5.5s ease-in-out infinite; opacity:.85;
}
@keyframes zmtSpark{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(-18px,10px);} }

@media (hover:hover){
  .zmt-badge{ transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
  .zmt-badge:hover{ transform:translateY(-1px); border-color:rgba(0,170,37,0.22); box-shadow:0 18px 55px rgba(0,0,0,0.55),inset 0 0 0 1px rgba(0,170,37,0.10); }
}