/* ---- page header ---- */
.ph-row{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.ph-row .sub{margin:4px 0 0}
.ph-ic{width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;color:var(--gold-l);background:linear-gradient(155deg,rgba(176,190,220,.18),rgba(176,190,220,.05));border:1px solid rgba(176,190,220,.25);box-shadow:0 10px 30px rgba(176,190,220,.08)}

/* ---- toolbar ---- */
.toolbar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:28px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 14px;border-radius:999px;font:inherit;font-size:14px;font-weight:500;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:.2s}
.chip svg{opacity:.75;transition:.2s}
.chip em{font-style:normal;font-size:12px;line-height:1;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.08);transition:.2s}
.chip:hover{color:#fff;border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
.chip.on{color:#0b1020;background:linear-gradient(90deg,var(--gold-m),var(--gold-l));border-color:transparent;box-shadow:0 8px 22px rgba(176,190,220,.28)}
.chip.on svg{opacity:1;color:#0b1020}
.chip.on em{background:rgba(11,16,32,.18);color:#0b1020}

.search-wrap{position:relative;max-width:300px;width:100%}
.search-wrap .search-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);display:grid;pointer-events:none}
.search{width:100%;max-width:none;padding:11px 16px 11px 42px;border-radius:999px;transition:.2s}
.search:focus{border-color:rgba(176,190,220,.5);box-shadow:0 0 0 3px rgba(176,190,220,.12)}

/* ---- server grid (banner-tile layout) ---- */
.servers{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}

@keyframes scardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.scard{
  padding-bottom:20px;display:flex;flex-direction:column;align-items:stretch;text-align:left;position:relative;
  animation:scardIn .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i, 0) * 45ms);
}
.scard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(140deg,rgba(176,190,220,.55),transparent 40%,transparent 60%,rgba(176,190,220,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
.scard:hover::before{opacity:1}
.scard:hover{transform:translateY(-6px)}

.sc-banner{position:relative}
.scard .banner{width:100%;height:118px;flex:none;background:radial-gradient(circle at 20% 0,rgba(176,190,220,.25),transparent 60%),linear-gradient(135deg,#1b1745,#2b1a3a);background-size:cover;background-position:center;position:relative;overflow:hidden}
.scard .banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,34,0) 45%,#0a0e22 100%)}
.scard .banner.has,.scard .banner.brand{transition:background-size .5s ease}
.scard:hover .banner.has,.scard:hover .banner.brand{background-size:112%}
.scard .banner.blur{background-size:220%;filter:saturate(1.3)}
.scard .banner.blur::before{content:"";position:absolute;inset:0;backdrop-filter:blur(22px);background:rgba(10,14,34,.35)}
.scard .banner.brand{opacity:.8}

.badge-r{
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:5px;top:12px;right:12px;
  background:rgba(10,14,34,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);
  color:var(--gold-l);box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.badge-r svg{flex:none}

/* header row: avatar pulled up over the banner edge + name/status/members beside it */
.sc-top{display:flex;align-items:flex-end;gap:14px;padding:0 18px;margin-top:-30px;position:relative;z-index:1}
.gwrap{position:relative;flex:none}
.scard .gav{margin:0;width:64px;height:64px;font-size:19px;border:4px solid #0a0e22;box-shadow:0 8px 20px rgba(0,0,0,.5);transition:box-shadow .25s}
.scard.botin .gav{box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 0 2px rgba(34,197,94,.35)}
.scard:hover .gav{box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 0 2px rgba(176,190,220,.45)}
.gcheck{position:absolute;right:-3px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:#22c55e;color:#04210f;border:3px solid #0a0e22;display:grid;place-items:center;box-shadow:0 0 14px rgba(34,197,94,.55)}

.sc-id{min-width:0;flex:1;padding-bottom:3px}
.sc-id h3{font-size:16.5px;margin:0 0 6px;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.mem{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--muted)}

.status{margin:0;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid transparent;display:inline-flex;align-items:center;gap:6px;flex:none}
.status::before{display:none}
.status .dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:statusPulse 2s infinite}
@keyframes statusPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.status.on{color:#4ade80;background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3)}
.status.off{color:#9ca3af;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}

.scard.botin{border-color:rgba(34,197,94,.22)}
.scard.nobot{opacity:.92}
.scard.nobot .gav img{filter:grayscale(.35)}

.scard .manage{
  width:calc(100% - 32px);display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 16px 0;
  background:linear-gradient(90deg,var(--gold-m),var(--gold-l));box-shadow:0 6px 18px rgba(176,190,220,.18);
}
.scard .manage:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(176,190,220,.28)}
.scard .manage.invite{color:#fff;background:linear-gradient(90deg,#5865f2,#707bf4);box-shadow:0 6px 18px rgba(88,101,242,.35)}
.scard .manage.invite:hover{background:linear-gradient(90deg,#4752c4,#5865f2);filter:none;box-shadow:0 10px 26px rgba(88,101,242,.45)}