:root{
  --bg:#090711;
  --bg2:#160a20;
  --card:#120b1c;
  --card2:#1b1028;
  --text:#f8eefc;
  --muted:#e6c7df;
  --line:#6f2f75;
  --pink:#ff4fae;
  --pink2:#ff7ec8;
  --ok:#44d39a;
}
*{box-sizing:border-box}
body{
  font-family:Arial,sans-serif;
  margin:0;
  padding-top:58px;
  color:var(--text);
  background:
    radial-gradient(860px 460px at -8% 0%, #4a162f 0%, transparent 60%),
    radial-gradient(860px 460px at 108% 14%, #2a1440 0%, transparent 60%),
    linear-gradient(180deg,var(--bg2) 0%,var(--bg) 56%,#07050c 100%);
  min-height:100vh;
}
a{color:#ffd6ef}
a:hover{text-decoration:underline}
.navbar{
  position:fixed;top:0;left:0;right:0;height:58px;
  background:rgba(9,7,15,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
  z-index:9999;
}
.navbar .inner{max-width:1100px;margin:0 auto;height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;gap:18px}
.brandLink{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brandLink img{filter:brightness(0) invert(1)}
.brandLogo{height:32px;width:32px;object-fit:contain}
.brandText{font-weight:bold}
.navbar .links a{margin-right:14px;text-decoration:none;color:#f9deed}
.navbar .links a:last-child{margin-right:0}
.navbar .links a.active{font-weight:bold;text-decoration:none;color:#fff}
.container{max-width:1100px;margin:0 auto;padding:22px 18px}

h1,.h1{font-size:34px;line-height:1.1;margin:8px 0 16px}
.h2{margin:0;font-size:23px}
.p{color:var(--muted)}

.card{
  background:linear-gradient(140deg,rgba(23,13,34,.95),rgba(12,8,21,.95));
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.badge{display:inline-flex;align-items:center;padding:4px 9px;border:1px solid #824080;border-radius:999px;background:#2b1235;color:#ffd5ee;font-size:12px}
.kbd{display:inline-flex;align-items:center;padding:6px 10px;border-radius:10px;border:1px solid #7f3b79;background:#140b20;color:#fff;font-family:ui-monospace,Menlo,Consolas,monospace}
.small{color:#ebc7dd;font-size:12px}

.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}

table{border-collapse:collapse;width:100%}
th,td{border:1px solid #66376b;padding:8px 10px;text-align:left}
th{background:#1d102b;color:#ffd9ef}

input,select,button,textarea{
  font-family:Arial,sans-serif;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid #70407b;
  background:#130b1f;
  color:#fff;
}
button{cursor:pointer}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 14px;border-radius:10px;text-decoration:none;
  color:#240915;border:1px solid #ff8fd0;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  font-weight:700;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.btn:hover{transform:translateY(-1px);text-decoration:none;filter:brightness(1.03);box-shadow:0 10px 24px rgba(255,79,175,.3)}
.btn.secondary{background:#1c1029;color:#f7d6ea;border-color:#7a3f83}
.btn.disabled{opacity:.5;pointer-events:none}

.toast{padding:10px 12px;border-radius:10px;border:1px solid}
.toast.bad{background:#2a1019;border-color:#8c3551;color:#ffc6d8}
.toast.ok{background:#10231a;border-color:#2d7756;color:#cbffe7}

.server-card{
  margin-top:20px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:14px;
  border:1px solid #7d377b;
  background:linear-gradient(145deg,#1b0f29,#120a1b);
}
.server-icon{width:56px;height:56px;border-radius:14px;object-fit:cover;border:1px solid #7d377b;background:#2a1835;display:block}
.server-icon-fallback{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;border:1px solid #7d377b;background:#2a1835;color:#ffd1ea;font-weight:700}
.server-name{font-size:24px;font-weight:800;line-height:1.1}
.server-meta{margin-top:4px;color:#f5cde1;font-size:18px;display:flex;gap:18px;flex-wrap:wrap}
.server-meta span{font-size:18px}

.brandLink,.brandLink *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

@media (max-width:800px){
  .grid.two{grid-template-columns:1fr}
  h1,.h1{font-size:30px}
  .server-name{font-size:28px}
  .server-meta{font-size:16px}
  .server-meta span{font-size:16px}
}