/* =========================================================
   MLIST.LT BY KURIAME.LT // QUARE.LT V.1.0.1-3
   ========================================================= */
:root{
  /* Global palette */
  --bg:#0a1120;
  --panel:#0f172a;
  --glass:#0f172acc;
  --line:#1f2937;
  --text:#e8ecf4;
  --muted:#9aa6bf;
  --brand:#f59e0b;
  --blue:#2563eb;
  --blue-2:#60a5fa;
  --ok:#22c55e;
  --warn:#f59e0b;

  /* Server-list extras */
  --head:#0d152a;
  --card:#0f172a;
  --surface:#111827;

  /* Auth card sizing */
  --card-min:400px;
  --card-max:520px;
}

/* =========================================================
   BASE
   ========================================================= */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  margin:0;
  color:var(--text);
  background: var(--bg); /* SINGLE, SOLID BACKGROUND */
  font:15px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

a{color:var(--blue-2);text-decoration:none}
a:hover{text-decoration:underline}

/* =========================================================
   HEADER (sitebar)
   ========================================================= */
.sitebar{width:100%;background:linear-gradient(90deg,#0d152a,#0e1a34);border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(0,0,0,.35)}
.sitebar-inner{max-width:1100px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:16px}
.brand img{height:40px;display:block}
.nav{display:flex;gap:10px;margin-left:4px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid #21304a;background:#101825;color:#d8e1ff;text-decoration:none;font-weight:700}
.pill:hover{border-color:#2a3a56}
.grow{flex:1}
.lang{display:flex;align-items:center;gap:8px}
.lang .small{color:#9fb0d2;font-size:12px}
.lang select{padding:10px 12px;border-radius:10px;border:1px solid #21304a;background:#0f1624;color:#d8e1ff}

/* =========================================================
   WRAPPERS
   ========================================================= */
.wrap{max-width:1100px;margin:0 auto;padding:18px 22px 24px}

/* =========================================================
   SERVER LIST: HEADER GRID
   ========================================================= */
.card-h.header-grid{display:grid;grid-template-columns:110px 130px minmax(280px,460px) 2fr 240px;align-items:center;gap:14px}
.card-h.header-grid .hdr{font-weight:700;color:#cfe0ff}
.card-h.header-grid .hdr.center{text-align:center}

/* =========================================================
   SERVER LIST: CARDS, LISTS, ROWS
   ========================================================= */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 6px 28px rgba(0,0,0,.35);
  margin-bottom:16px;
}
.card-h{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.card-c{padding:16px}
.small{color:var(--muted);font-size:12px}

.search-wrap{display:flex;justify-content:center}
.search-box{width:100%;max-width:520px}
.search-input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0b1526;color:var(--text)}

.cats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.cats select{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#0b1526;color:var(--text)}

.list{display:flex;flex-direction:column;gap:18px}
.row{
  display:grid;
  grid-template-columns:90px 140px minmax(260px,520px) 1.2fr 200px;
  gap:14px;align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
  cursor:pointer;text-decoration:none;color:inherit
}
.row:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.35);border-color:#2a3a56}
.row:visited{color:inherit}
.row:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}

.row.premium{border-color:#facc15;box-shadow:0 0 15px rgba(250,204,21,.6);animation:glow 1.5s ease-in-out infinite alternate}
@keyframes glow{from{box-shadow:0 0 10px rgba(250,204,21,.6)}to{box-shadow:0 0 25px rgba(250,204,21,.9)}}

/* Rank & votes */
.rank-col{display:flex;align-items:center;justify-content:center}
.rank{font-weight:900;font-size:35px;color:#eab308}
.premium-rank{background:#1e293b;border:1px solid #374151}
.premium-icon{width:28px;height:28px;display:inline-block;vertical-align:middle}

.votes-col{display:flex;align-items:center;justify-content:center}
.votes-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:6px;background:#101a31;border:1px solid #2a3a56;
  color:#f2cc78;font-weight:800;font-size:15px;min-width:50px;text-align:center
}

/* Title stack */
.stack{display:flex;flex-direction:column;gap:10px}
.title-line{display:flex;gap:8px;align-items:center;max-width:100%;white-space:nowrap;overflow:hidden}
.title-name{font-weight:800;font-size:14px;padding:6px 10px;background:#0c1428;border:1px solid #2a3a56;border-radius:10px;color:#e8eefc}
.title-dash{color:#697a9c}
.title-short{color:#aab7d6;overflow:hidden;text-overflow:ellipsis}
.badge-name{display:inline-flex;align-items:center;gap:4px;background:#22c55e;color:#fff;font-weight:700;font-size:12px;padding:4px 8px;border-radius:8px}

/* Banner */
.banner-wrap{position:relative;border-radius:12px;overflow:hidden;border:1px solid #2a3a56}
.banner{display:block;width:100%;height:76px;object-fit:cover;border:none}
.banner-strip{
  position:absolute;left:0;right:0;bottom:0;height:28px;background:rgba(10,16,28,.85);
  border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;font-size:12px
}
.strip-left,.strip-right{display:flex;align-items:center;gap:12px}
.strip-left span,.strip-right span{font-weight:700;color:#e5e7eb}
.players-mini{color:#93c5fd;font-weight:800}
.strip-left span:last-child{color:#9ca3af}

/* Chips & meta */
.ip-chip{background:none;border:none;padding:0;font-weight:700;color:#facc15}
.ip-chip.copyable.chip-ok{color:#86efac}
.desc{min-height:1px}
.divider{height:1px;background:var(--line);margin:4px 0}
.meta-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pill-dark{background:#0c1428;border:1px solid #2a3a56;color:#dbe7ff;border-radius:999px;height:30px;padding:4px 10px;font-size:12px;font-weight:800}
.side{display:flex;align-items:center;justify-content:center;min-width:170px}

/* Icons */
.copy-icon{width:12px;height:12px;flex:0 0 12px;stroke-width:1.5;vertical-align:middle}
.verified-img{width:14px;height:14px;display:inline-block}

/* =========================================================
   STATUS PILL
   ========================================================= */
.status-pill{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 14px;
  font-size:.875rem;font-weight:600;border:2px solid;background:transparent;transition:all .25s ease-in-out
}
.status-pill.on{color:#16a34a;border-color:#16a34a}
.status-pill.on::before{content:"";width:8px;height:8px;background:#16a34a;border-radius:50%}
.status-pill.off{color:#6b7280;border-color:#6b7280}
.status-pill.off::before{content:"";width:8px;height:8px;background:#ef4444;border-radius:50%}

/* =========================================================
   SEO TEXT + TYPOGRAPHY
   ========================================================= */
.seo-text.collapsed{max-height:120px;overflow:hidden;position:relative}
.seo-text.collapsed::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:40px;
  background:linear-gradient(to top, var(--bg), transparent)
}
.seo h1{font-size:22px;margin:0 0 8px;color:#e8eefc}
.seo h2{font-size:18px;margin:16px 0 8px;color:#cfe0ff}
.seo p{margin:8px 0;color:#cbd5e1}
.seo ul{margin:8px 0 8px 18px}
.seo a.anchor{color:#93c5fd;text-decoration:underline}

/* =========================================================
   KPIs
   ========================================================= */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}
.kpi strong{font-size:18px;display:block;color:#cfe0ff}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  margin-top:auto;
  background:linear-gradient(90deg,#0d152a,#0e1a34);
  border-top:1px solid var(--line);
  box-shadow:0 -2px 14px rgba(0,0,0,.35);
  color:#a6b2cc;
}
.footer-inner{max-width:1100px;margin:0 auto;padding:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.footer-left{max-width:420px}
.footer-nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.footer-nav a{color:#a9c7ff;font-weight:700;text-decoration:none}
.footer-nav a:hover{text-decoration:underline}
.footer-bottom{text-align:center;border-top:1px solid var(--line);padding:12px;font-size:12px}

/* =========================================================
   MEDIA QUERIES
   ========================================================= */
@media (max-width:980px){
  .row{grid-template-columns:80px 100px 1fr}
  .desc,.side{grid-column:1/-1}
  .side{align-items:flex-start;justify-content:flex-start}
  .rank{font-size:34px}
}

/* =========================================================
   AUTH SCOPED STYLES (login/register pages only)
   Use with: <body class="auth">
   ========================================================= */

/* Auth container centers card vertically */
.auth .container{
  max-width:1100px; margin:0 auto; padding:32px 22px;
  min-height:calc(100vh - 160px);
  display:grid; place-items:center;
}

/* Glassy card (scoped) */
.auth .card{
  width: clamp(var(--card-min), 50vw, var(--card-max));
  padding: 28px 26px;
  position:relative;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)), var(--glass);
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.auth .card::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.auth .card-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.auth .card-head .logo{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#0f192c;border:1px solid #22314c;color:#ffd166;font-weight:900}
.auth .card-title{margin:0;font-size:22px;font-weight:900;letter-spacing:.2px}
.auth .card-sub{color:var(--muted);margin-top:2px;font-size:14px}

/* Auth form controls */
.auth form[data-form]{display:flex;flex-direction:column;gap:16px}
.auth .field{display:flex;flex-direction:column;gap:8px}
.auth .input-wrap{position:relative}
.auth .input{
  width:100%; padding:12px 14px 12px 46px; border-radius:12px;
  border:1px solid #22324f; background:#0b1526; color:var(--text);
  outline:none; transition:border-color .15s, box-shadow .15s; font-size:15px; min-height:46px;
}
.auth .input:focus{border-color:#3a57a0; box-shadow:0 0 0 3px rgba(58,87,160,.22)}
.auth .input-icon{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; opacity:.9; color:#9fb0d2}

/* Auth buttons */
.auth .btn{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 16px; border-radius:12px; border:1px solid #22324f;
  background:#0f192c; color:#e7eeff; font-weight:900; letter-spacing:.2px;
  text-decoration:none; cursor:pointer; transition:transform .04s ease, filter .2s, border-color .15s;
  min-height:46px; font-size:15px;
}
.auth .btn:hover{border-color:#2b436c; filter:brightness(1.04)}
.auth .btn:active{transform:translateY(1px)}
.auth .btn .icon{font-size:20px; line-height:1}

.auth .btn-primary{
  background:linear-gradient(135deg, #1f55ff 0%, #00b5ff 100%);
  border:0; color:#fff;
  box-shadow:0 12px 28px rgba(31,85,255,.28), inset 0 1px 0 rgba(255,255,255,.22);
}
.auth .btn-primary:hover{filter:brightness(1.06)}

/* Providers */
.auth .provider-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){ .auth .provider-row{grid-template-columns:1fr} }
.auth .btn-google{background:#ffffff;border:1px solid #e5e7eb;color:#111827}
.auth .btn-google:hover{filter:none;border-color:#d1d5db;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.auth .btn-discord{background:#5865F2;border:0;color:#ffffff;box-shadow:0 8px 22px rgba(88,101,242,.35)}
.auth .btn-discord:hover{filter:brightness(1.05)}

/* Auth divider (scoped so it won’t clash with server-list .divider line) */
.auth .divider{
  display:flex;align-items:center;gap:12px;color:#9fb0d2;margin:16px 0
}
.auth .divider::before,.auth .divider::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg, transparent, #23314d, transparent)
}

/* Auth alerts */
.auth .alert{
  padding:12px 14px; border-radius:14px; background:#2a1215; border:1px solid #5b1b1f;
  color:#fecaca; margin-bottom:12px; font-weight:700;
}

/* Auth links/tweaks */
.auth label{font-weight:700}
.auth a.link{color:#a9c7ff;font-weight:800;text-decoration:none}
.auth a.link:hover{text-decoration:underline}


  .sidebar{width:220px;display:flex;flex-direction:column;gap:12px}
  .sidebar .btn{display:block;text-align:left}
  
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 Arial,Helvetica,sans-serif}
  a{color:var(--blue-2);text-decoration:none}
  a:hover{text-decoration:underline}
  .sitebar{width:100%;background:linear-gradient(90deg,#0d152a,#0e1a34);border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(0,0,0,.35)}
  .sitebar-inner{max-width:1100px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:16px}
    .pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
  .pill:hover{border-color:#2a3a56}
  .grow{flex:1}
  .wrap{max-width:1100px;margin:0 auto;padding:18px 22px 24px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 28px rgba(0,0,0,.35);margin-bottom:16px}
  .card-h{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
  .card-c{padding:16px}
  .small{color:var(--muted);font-size:12px}
  .input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0b1526;color:var(--text);}
  textarea.input{resize:vertical}
  .btn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;padding:12px 16px;cursor:pointer;text-align:center;font-weight:700}
  .btn:hover{border-color:#2a3a56}


/* =========================================================
   FIXED MYSERVERS STYLES
   ========================================================= */

body.my-servers {
  --ms-bg:#0b1220;
  --ms-head:#0d152a;
  --ms-card:#0f172a;
  --ms-surface:#111827;
  --ms-line:#1f2937;
  --ms-text:#e5e7eb;
  --ms-muted:#9aa6bf;
  --ms-blue:#3b82f6;
  --ms-blue2:#60a5fa;

  margin: 0;
  background: var(--ms-bg);
  color: var(--ms-text);
  font: 14px/1.5 Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Links */
body.my-servers a {
  color: var(--ms-blue2);
  text-decoration: none;
}
body.my-servers a:hover {
  text-decoration: underline;
}

/* Header */
body.my-servers .sitebar {
  width: 100%;
  background: linear-gradient(90deg,#0d152a,#0e1a34);
  border-bottom: 1px solid var(--ms-line);
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
}
body.my-servers .sitebar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Layout */
body.my-servers .wrap {
  flex: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 22px 24px;
}
body.my-servers .grid {
  display: flex;
  gap: 20px;
}
body.my-servers .sidebar {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Buttons */
body.my-servers .btn {
  border: 1px solid var(--ms-line);
  background: var(--ms-surface);
  color: var(--ms-text);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  font-weight: 700;
  text-decoration: none;
}
body.my-servers .btn:hover {
  border-color: #2a3a56;
}

/* Cards */
body.my-servers .card {
  background: var(--ms-card);
  border: 1px solid var(--ms-line);
  border-radius: 16px;
  box-shadow: 0 6px 28px rgba(0,0,0,.35);
  margin-bottom: 16px;
}
body.my-servers .card-h {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ms-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.my-servers .card-c {
  padding: 0 18px 18px 18px; /* same side padding as header */
  overflow-x: auto;
}

body.my-servers table.table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 0;
  background: transparent;
  border-radius: 8px;
}

html body.my-servers table.table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 12px !important;
}
html body.my-servers table.table th,
html body.my-servers table.table td {
  padding: 10px 14px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--ms-line) !important;
}
body.my-servers table th,
body.my-servers table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ms-line);
}
body.my-servers table thead th {
  color: #cfd8e3;
  background: var(--ms-head);
}
/* Make tbody visually consistent with the table */
body.my-servers table.table tbody {
  display: table-row-group; /* default for tbody */
  width: 100%;
  background: transparent; /* same as table background */
}

body.my-servers table.table tbody tr {
  display: table-row;
  width: 100%;
  border-bottom: 1px solid var(--ms-line);
}

body.my-servers table.table tbody td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ms-line);
  background: transparent; /* optional: inherit row background */
}
/* Actions */
body.my-servers .actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
body.my-servers .btn-mini {
  border: 1px solid #2a3a56;
  background: #0c1428;
  color: #e5e7eb;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
body.my-servers .btn-mini:hover {
  filter: brightness(1.1);
}

/* Responsive */
@media (max-width: 980px) {
  body.my-servers .grid { flex-direction: column; }
  body.my-servers .sidebar { width: 100%; }
}