:root{--bg:#0b0b0f;--card:rgba(255,255,255,.08);--text:#ECECF1;--muted:#A2A2AE;--accent:#6EA8FF;--accent-2:#A07BFF}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:radial-gradient(1200px 1200px at 10% 0%,#141428,transparent 60%),radial-gradient(1000px 800px at 100% 0%,#1c2038,transparent 50%),linear-gradient(180deg,#0b0b0f,#0b0b0f);background-attachment:fixed;display:flex;flex-direction:column}
.header{position:sticky;top:0;backdrop-filter:blur(16px) saturate(160%);background:linear-gradient(180deg,rgba(20,20,35,.75),rgba(20,20,35,.35));border-bottom:1px solid rgba(255,255,255,.08);z-index:20}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-link{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
.brand-logo{width:36px;height:36px;object-fit:contain;border-radius:8px;display:block}
.brand-name{font-weight:800}
.brand-sub{color:var(--muted);font-size:12px}
.footer{position:fixed;left:0;right:0;bottom:0;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(0deg,rgba(20,20,35,.75),rgba(20,20,35,.35));backdrop-filter:blur(12px) saturate(160%);padding:12px 0;color:var(--muted);text-align:center}
main.wrap{padding-bottom:90px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;backdrop-filter:blur(10px) saturate(140%);box-shadow:0 8px 34px rgba(0,0,0,.35);animation:floatIn .35s ease both}
.title{margin:0 0 8px;font-weight:700}
.muted{color:var(--muted)}
.small{font-size:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));color:var(--text);cursor:pointer;transition:transform .06s ease, box-shadow .2s ease}
.btn.primary{border-color:rgba(110,168,255,.45);background:linear-gradient(135deg,rgba(110,168,255,.25),rgba(160,123,255,.25))}
.btn:hover{box-shadow:0 8px 30px rgba(110,168,255,.25)}
.btn:active{transform:translateY(1px)}
.nav-signout{border-color:rgba(255,100,100,.35)}
.nav-signout:hover{box-shadow:0 8px 30px rgba(255,120,120,.25)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.panel.card{max-width:520px;margin:40px auto}
.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--text)}
.alert{background:rgba(255,100,100,.12);border:1px solid rgba(255,100,100,.35);padding:10px;border-radius:12px;margin-bottom:10px}
.list{margin:0;padding-left:18px}
.section{margin:24px 0}
.section>.section-title{font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.section .row{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
@keyframes floatIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.section-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media(max-width:900px){.section-grid{grid-template-columns:1fr}}

/* === STATUS TAB === */
.status-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: default;
}

.status-label {
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
}

.status-dot.online {
  background: #4ade80; /* green */
  color: #4ade80;
}

.status-dot.offline {
  background: #f87171; /* red */
  color: #f87171;
}

/* Equal-height cards inside rows */
.row.equal { align-items: stretch; }
.row.equal .card { display:flex; flex-direction:column; }

/* Make “Discord/Documentation” buttons sit side-by-side */
.btn-row { display:flex; gap:10px; flex-wrap:wrap; }

/* Remove underline on link-styled buttons */
.btn, .btn:link, .btn:visited { text-decoration:none; }

/* 3-column layout when media is present */
.section-grid.with-media {
  grid-template-columns: 1fr 1.15fr 1fr; /* left | media | right */
  gap: 28px;
}

/* Center media card styling */
.media-section .media-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  overflow: hidden;
}

.media-frame {
  width: 100%;
  height: 520px;
  border: 0;
  border-radius: 12px;
  display: block;
  background: rgba(255,255,255,.04);
}

/* Slight tilt + gentle float animation */
.tilt { transform: rotate(-1.5deg); animation: tiltFloat 8s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes tiltFloat {
  0%, 100% { transform: rotate(-1.5deg) translateY(0); }
  50%      { transform: rotate(-0.5deg) translateY(-6px); }
}

/* Responsive fallback to 2 columns when narrow */
@media (max-width: 1100px) {
  .section-grid.with-media { grid-template-columns: 1fr; }
  .media-frame { height: 420px; }
}

/* Slightly widen the outer columns (push left/right a bit visually) */
.section-grid { gap: 24px; }