:root{
  --bg:#0a0a0c;
  --panel:#14131a;
  --card:#191820;
  --ink:#fff;
  --muted:#c69ad9;
  --accent:#ff4da6;
  --accent-2:#b36bff;
  --accent-3:#ff80df;
  --ok:#39ff9f;
  --warn:#ffb020;
  --ring: rgba(255,77,166,.45);
}

*{box-sizing:border-box}
.hidden{display:none !important;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.5 "Segoe UI", Roboto, Ubuntu, sans-serif;
  background-image:
    radial-gradient(circle at top left, rgba(179,107,255,.1), transparent 40%),
    radial-gradient(circle at bottom right, rgba(255,77,166,.08), transparent 50%);
  background-attachment:fixed;
}

/* header */
header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(20,20,30,.9), rgba(20,20,30,.65));
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  padding:14px 18px;
}
.logo{font-weight:900; letter-spacing:.5px; color:var(--accent-2); text-shadow:0 0 6px rgba(179,107,255,.5);}

.btn{
  background:linear-gradient(135deg, var(--accent), var(--accent-2) 60%, var(--accent-3));
  border:0; color:#000; padding:10px 16px; border-radius:14px; font-weight:800;
  cursor:pointer; text-decoration:none; box-shadow:0 0 12px rgba(179,107,255,.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:scale(1.06); box-shadow:0 0 20px rgba(255,77,166,.6);}
.btn.out{background:#202332; color:#fff; border:1px solid rgba(255,255,255,.12)}

/* layout */
.app{display:grid; grid-template-columns:240px 1fr; gap:20px; max-width:1400px; margin:20px auto; padding:0 20px}
@media (max-width:1000px){.app{grid-template-columns:1fr}}

.sidebar{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:14px;
  height:fit-content;
  position:sticky; top:74px;
  box-shadow:0 0 18px rgba(179,107,255,.15);
}
.nav{display:flex; flex-direction:column; gap:8px}
.navitem{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px; color:var(--ink); text-decoration:none;
  background:var(--card); border:1px solid rgba(255,255,255,.06);
  transition:all .25s ease;
}
.navitem:hover{background:rgba(179,107,255,.1)}
.navitem.active{
  outline:2px solid var(--ring); outline-offset:2px;
  background:linear-gradient(135deg, rgba(255,77,166,.15), rgba(179,107,255,.15));
  box-shadow:0 0 12px rgba(255,77,166,.4);
}

/* controls for Fuckrooms */
.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px}
.search{
  flex:1; min-width:220px; display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:10px 12px; box-shadow:inset 0 0 8px rgba(179,107,255,.2)
}
.search input{flex:1; border:0; outline:0; background:transparent; color:var(--ink)}
.stats{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  background:var(--panel); border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:6px 12px; font-weight:700;
  color:var(--accent-2); text-shadow:0 0 4px rgba(179,107,255,.4);
}

/* server cards */
.list{display:grid; gap:14px}
.card{
  background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  padding:14px; display:flex; gap:12px; align-items:center;
  box-shadow:0 0 12px rgba(179,107,255,.15);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 0 20px rgba(255,77,166,.25);}
.icon{width:48px; height:48px; border-radius:14px; background:#0d1117; display:grid; place-items:center; overflow:hidden}
.icon img{width:48px; height:48px; object-fit:cover}
.name{font-weight:800; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.meta{color:var(--muted); font-size:12px}
.pill.miss{
  margin-left:auto; padding:6px 10px; border-radius:999px;
  background:rgba(255,77,166,.1); color:var(--accent); border:1px solid rgba(255,77,166,.5)
}
.xbtn{
  background:#202332; border:1px solid rgba(255,255,255,.12); color:#fff;
  padding:8px 12px; border-radius:10px; text-decoration:none; margin-left:8px;
  transition:all .2s ease
}
.xbtn:hover{background:var(--accent); color:#000; box-shadow:0 0 12px rgba(255,77,166,.4)}

/* profile chip */
.profile{
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius:999px; padding:6px 10px;
  box-shadow:0 0 10px rgba(179,107,255,.2);
}
.avatar{width:28px; height:28px; border-radius:50%; overflow:hidden; background:#0d1117}
.avatar img{width:100%; height:100%; object-fit:cover}
.tag{opacity:.95; font-weight:800; color:var(--accent-2)}

/* Playroom - command reference */
.section-title{
  font-weight:900; letter-spacing:.3px; margin:12px 0 8px; color:#fff;
}
.cmdgrid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px;
}
.cmdcard{
  background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:14px;
  padding:12px; box-shadow:0 0 10px rgba(179,107,255,.14);
}
.cmdhead{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px}
.cmdname{font-weight:800}
.badge{
  font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(179,107,255,.12);
  border:1px solid rgba(179,107,255,.35); color:var(--accent-2)
}
.kbd{
  display:inline-block; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:#0f1117; border:1px solid rgba(255,255,255,.12); border-radius:8px;
  padding:2px 6px; font-size:12px; color:#e7e7e7
}
.cmddesc{color:#d9c7ea; font-size:13px; margin-top:6px}

/* Manage - custom dropdown */
.manage{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.label{font-weight:800; color:var(--accent-2)}

.dropdown{position:relative; width:min(420px,100%)}
.drop-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:var(--panel); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:12px 14px; min-height:56px;
  font-weight:800; font-size:16px; color:var(--ink);
  box-shadow:0 0 8px rgba(179,107,255,.12) inset;
}
.drop-btn .chev{transition:transform .15s ease}
.dropdown.open .chev{transform:rotate(180deg)}
.drop-menu{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30;
  background:var(--panel); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:6px; max-height:360px; overflow:auto; display:none;
  box-shadow:0 14px 28px rgba(0,0,0,.45), 0 0 20px rgba(179,107,255,.18);
}
.dropdown.open .drop-menu{display:block}
.drop-item{
  display:flex; align-items:center; gap:10px; padding:12px; border-radius:10px;
  cursor:pointer; font-size:15px; min-height:48px;
}
.drop-item:hover,.drop-item.active{background:rgba(179,107,255,.14)}
.drop-item .icon{
  width:28px; height:28px; border-radius:8px; background:#0d1117;
  display:grid; place-items:center; overflow:hidden; flex:0 0 28px;
}
.drop-item .icon img{width:28px; height:28px; object-fit:cover}
.drop-item .label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.manage-info{margin-top:8px}
.manage-card{
  background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:14px;
  padding:14px; display:flex; align-items:center; gap:12px; margin-top:10px;
}
.manage-card .icon{width:40px; height:40px; border-radius:10px}
.manage-card .icon img{width:40px; height:40px; object-fit:cover}
.manage-card .name{font-weight:800}

/* --- Mobile-only tweaks (keep desktop untouched) --- */
@media (max-width: 900px){
  header{ padding:12px 14px; }
  .logo{ font-size:16px; }
  .btn{ padding:8px 12px; border-radius:12px; }
  .app{ gap:14px; padding:0 14px; }
  .sidebar{ top:64px; }
}

/* tighter phones */
@media (max-width: 700px){
  /* layout */
  .app{ grid-template-columns:1fr; gap:12px; padding:0 12px; }
  .sidebar{ position:static; width:100%; padding:10px; border-radius:14px; }

  /* turn left nav into a horizontal, scrollable tab bar */
  .nav{ flex-direction:row; gap:8px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .navitem{ flex:0 0 auto; padding:10px 12px; border-radius:10px; }

  /* controls */
  .controls{ flex-direction:column; align-items:stretch; gap:8px; }
  .search{ min-width:0; padding:9px 10px; }
  .search input{ font-size:16px; } /* prevent iOS zoom-on-focus */
  .stats{ gap:8px; }

  /* server cards */
  .card{ padding:12px; gap:10px; align-items:flex-start; flex-wrap:wrap; border-radius:12px; }
  .icon{ width:44px; height:44px; border-radius:12px; }
  .icon img{ width:44px; height:44px; }
  .name{ max-width:100%; font-weight:800; }
  .meta{ font-size:11px; opacity:.9; }
  .pill.miss{ margin-left:0; margin-top:6px; }
  .xbtn{ margin-left:0; margin-top:8px; padding:8px 10px; border-radius:9px; }

  /* profile chip */
  .profile{ padding:5px 8px; gap:8px; }
  .avatar{ width:26px; height:26px; }
  .tag{ font-size:13px; }

  /* playroom command grid */
  .cmdgrid{ grid-template-columns:1fr; gap:10px; }
  .cmdcard{ padding:10px; border-radius:12px; }
  .cmdname{ font-size:14px; }
  .badge,.kbd{ font-size:11px; }

  /* manage dropdown */
  .manage{ flex-direction:column; align-items:stretch; gap:10px; }
  .dropdown{ width:100%; }
  .drop-btn{ min-height:52px; padding:10px 12px; }
  .drop-menu{
    top:calc(100% + 6px);
    max-height:50vh;
    overflow:auto;
    box-shadow:0 10px 20px rgba(0,0,0,.45), 0 0 14px rgba(179,107,255,.18);
  }
  .drop-item{ padding:10px; border-radius:10px; }
  .drop-item .icon{ width:26px; height:26px; border-radius:8px; }
  .drop-item .icon img{ width:26px; height:26px; }
}

/* reduce motion on mobile if user prefers */
@media (prefers-reduced-motion: reduce){
  .btn, .card{ transition:none; }
}

/* Header anti-squish on phones */
@media (max-width: 700px){
  header{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; flex-wrap:wrap; /* lets auth drop to a second row if needed */
    padding:12px 14px;
  }
  .logo{ min-width:0; flex:1 1 auto; }

  /* auth area (login OR profile + logout) */
  #auth{
    display:flex; align-items:center; gap:8px;
    flex:1 1 100%;              /* move below logo when tight */
    justify-content:flex-end;   /* keep buttons/profile to the right */
  }

  /* profile chip stays compact and ellipses the tag */
  .profile{
    flex:0 1 auto; max-width:68vw; padding:5px 8px; border-radius:999px;
  }
  .avatar{ width:24px; height:24px; }
  .tag{ max-width:48vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* buttons don’t wrap or crush */
  .btn,
  .xbtn{
    white-space:nowrap;
    padding:8px 12px; border-radius:10px; font-size:14px;
    flex:0 0 auto;
  }
}

/* ultra-small devices */
@media (max-width: 360px){
  .logo{ font-size:14px; }
  .btn,.xbtn{ font-size:13px; padding:7px 10px; }
  .tag{ max-width:44vw; }
}