:root{
  --bg: #f3f3f3;
  --panel-bg: #fff;
  --muted: #e7e7e7;
  --accent: #8bc34a;
  --accent2: #673ab7;
  --accent3: #e53935;
  --text:#222;
  --max-width:1200px;   /* change to 1280 if you want wider */
}

*{box-sizing:border-box}
body{
  margin:0;
  overflow-x:hidden;
  min-height:100vh;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

html{
  scroll-behavior:smooth;
}

/* HEADER */
.site-header{
  background:#fff;
  border-bottom:1px solid #ddd;
  position:sticky;
  top:0;
  z-index:40;
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  justify-content:space-between;
  padding:12px 18px;
}

/* NAV */
.main-nav{ display:flex; gap:20px; align-items:center; }
.main-nav{
  display:flex;
  gap:16px;
  align-items:center;

  flex:0 1 auto;   /* ❗ ΔΕΝ πιάνει όλο τον χώρο */
  overflow:hidden; /* ❗ δεν σπρώχνει το header */
}
.main-nav a{
  text-decoration:none;
  color:#444;
  font-weight:500;
  font-size:14px;
  padding:4px 6px;
  white-space:nowrap;
  flex:0 0 auto;
  flex-shrink:0;
}
.main-nav a:hover{ color:#2a7de1; }

.main-nav-search{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  white-space:nowrap;
  min-width:0;
  margin-left:6px;
}

.main-nav-search__input{
  width:220px;
  height:38px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(180deg, rgba(27,18,42,0.98), rgba(18,12,30,0.98));
  color:#fff;
  font-size:14px;
  font-weight:600;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  transition:width .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.main-nav-search__input::placeholder{
  color:#8f86aa;
}


.main-nav-search__input:focus{
  width:260px;
  border-color:rgba(249,155,7,0.35);
  box-shadow:0 0 0 4px rgba(249,155,7,0.10);
  background:linear-gradient(180deg, rgba(31,21,50,0.98), rgba(20,13,34,0.98));
}
 
.header-right{
  display:flex;
  align-items:center;
  gap:10px;

  flex:0 0 auto;  /* ❗ δεν σπάει ΠΟΤΕ */
  white-space:nowrap;
}
.header-right .langs{ font-size:13px; color:#444; }
.auth{
  color:#444;
  text-decoration:none;
  font-size:14px;
  padding:4px 6px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
}
.theme-toggle{ background:#222; color:#fff; border:none; border-radius:4px; padding:6px; cursor:pointer; }
.user-box{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#ddd;
  font-size:14px;
  white-space:nowrap;
  flex-wrap:nowrap;
}
.auth-logout{ color:#9ec2ff; text-decoration:none; }
.auth-logout:hover{ text-decoration:underline; }

/* TOP HORIZONTAL BANNERS */
.top-banners{
  background:transparent;
  padding:6px 0;
  border-bottom:none;
}
.banner-row{ max-width:var(--max-width); margin:0 auto; display:flex; gap:12px; justify-content:center; align-items:center; padding:0 16px; }
.banner-row img{ height:68px; object-fit:cover; border-radius:6px; }

/* page: outer full-width layout that creates big left/right gutters (B) */
.page-layout{
  display:block;
  width:100%;
  position:relative;
  margin:0;
}

.side-space{
  position:fixed;
  top:86px;
  bottom:0;
  width:400px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}

.left-space{ left:0; }
.right-space{ right:0; }

.outer-banner{
  width:400px;
  height:calc(100vh - 86px);
  max-height:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.outer-banner img{
  width:400px;
  height:100%;
  max-height:none;
  object-fit:cover;
  border-radius:10px;
}

.left-space{ }
.right-space{ }

.main-container{
  width:100%;
  padding:0 16px;
  margin:10px auto 0;
  max-width:var(--max-width);
  position:relative;
  z-index:2;
}
 
/* grid layout: left / center / right */
.inner-grid{
  display:grid;
  /* make inner-left and inner-right the same width so vertical ads match */
  grid-template-columns: 200px 1fr 200px; /* inner-left ad | panels | inner-right ad */
  gap:25px;
  align-items:start;
  width:100%;
}

/* small helpers: the old .container-grid is no longer used */
.container-grid{ display:none; }

/* SIDE ADS */
.col-inner-left,
.col-inner-right{
position:sticky;
top:90px;
height:fit-content;
}

.col-inner-left .banner-vertical.inner,
.col-inner-right .banner-vertical.inner{
  /* make inner vertical banners equal size */
  width:200px;
  height:600px;
  border-radius:12px;
}

/* center panels: 2x2 grid */
.panel-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.panel{
  background:var(--panel-bg);
  border:1px solid var(--muted);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.03);
}
.panel h4{
  margin:0;
	padding:6px 10px;
	font-size:13px;
  background:#f1f1f1;
  color:#333;
  border-bottom:1px solid #eee;
}
.servers{ list-style:none; margin:0; padding:0; }
.servers li{
padding:4px 8px;
border-bottom:1px dashed #f0f0f0;
display:flex;
justify-content:space-between;
align-items:center;
gap:4px;
font-size:12px;
}
.servers li .meta{ color:#666; font-size:12px; margin-left:8px; }

.servers li.server-item,
.servers li.server-empty{
  display:block;
  padding:0;
}

.server-link{  
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  width:100%;
  border-radius:6px;
  text-decoration:none;
  color:inherit;
  transition:0.2s;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.01)
  );
}

.server-link:visited{
  color:inherit;
}

.server-link:hover{
  background:rgba(255,255,255,0.05);
}

.server-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
  color:#cfcfcf;
  min-width:120px;
  letter-spacing:0.01em;
}

.server-sep{
  width:5px;
}

.server-rank{
  width:22px;
  font-weight:700;
  color:#aaa;
  font-size:12px;
}

.server-rate{
  color:#9c9c9c;
  font-size:12px;
  flex:0 0 22px;
  min-width:60px;
  white-space:nowrap;
  font-weight:700;
}

.server-votes{
  margin-left:auto;
  color:#ffffff;
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
  min-width:56px;
  text-align:right;
}

.server-votes::after{
  content:" ★";
  color:#ffd700;
}

.server-item{
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.server-name--empty{
  color:#8c8c8c;
  font-weight:700;
}

.server-link--empty{
  opacity:0.72;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

.server-item--premium .server-link{
  background:rgba(255,215,0,0.06);
}

.server-item--premium .server-name{
  color:#ececec;
}

.server-item--premium .server-rate{
  color:#ffbf52;
}

.server-item--premium .server-votes{
  color:#fff6c8;
}

.server-item:nth-child(1) .server-rank{ color:#ffd54a; }
.server-item:nth-child(2) .server-rank{ color:#cfcfcf; }
.server-item:nth-child(3) .server-rank{ color:#d8a06a; }

.server-item--premium .server-link{
  background:rgba(255,215,0,.08);
}

.server-item--premium .server-rate{
  color:#8de04f;
}

.server-item--premium .server-votes{
  color:#fff3a0;
}

.server-item--coming .meta{
  color:#b87333;
}

.server-empty a{
  display:block;
  width:100%;
  padding:4px 8px;
  text-align:center;
  text-decoration:none;
  color:inherit;
}

.server-empty a:hover,
.server-link:hover{
  background:rgba(0,0,0,.03);
}

.server-link--empty{
  border:1px dashed rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
}

.server-name--empty{
  color:#cbb8ff;
  font-weight:700;
}

.server-rate--empty{
  color:#a6a6a6;
  font-style:italic;
}

body.dark .server-link:hover,
body.dark .server-empty a:hover{
  background:rgba(255,255,255,.04);
}

body.dark .server-rate{
  color:#d6a24b;
}

body.dark .server-votes{
  color:#f4f4f4;
}

body.dark .server-link--empty{
  background:rgba(132,110,255,0.08);
  border-color:rgba(170,150,255,0.30);
}

/* VIP colors */
.vip{ font-weight:700; color:#fff; }
.vip.green{
background:var(--accent);
padding:4px 8px;
border-radius:4px;
display:block;
}
.vip.purple{
background:var(--accent2);
padding:4px 8px;
border-radius:4px;
display:block;
}
.vip.red{
background:var(--accent3);
padding:4px 8px;
border-radius:4px;
display:block;
}

/* FOOTER */
.site-footer{

margin-top:0px;

text-align:center;

font-size:13px;

color:#777;

}

/* DARK THEME */
body.dark{
  --bg:#0e0e13;
  --panel-bg:#111316;
  --muted:#1e1f23;
  --text:#ddd;
}
body.dark .site-header{ background:#0b0b0d; border-color:#161619; }
body.dark .main-nav a, body.dark .auth, body.dark .header-right .langs{ color:#ddd; }
body.dark .theme-toggle{ background:#f3f3f3; color:#111; }

@media (max-width: 1280px){
  .main-nav-search__input{
    width:170px;
  }

  .main-nav-search__input:focus{
    width:210px;
  }
}

/* RESPONSIVE: collapse sidebars on small widths */
@media(max-width: 1024px){
  .container-grid{ grid-template-columns: 140px 1fr 220px; }
  .col-left .side-ad img{ width:120px; height:420px; }
  .col-right .side-ad img{ width:220px; height:420px; }
}
@media(max-width: 900px){
  .container-grid{ grid-template-columns: 1fr; }
  .col-left, .col-right{ display:none; }
  .panel-grid{ grid-template-columns:1fr; }
  .top-banners .banner-row img{ height:48px; }
}

@media(max-width: 1550px){
  .side-space{ display:none; }
}

/* TOP BANNERS */

.top-banners{
  position:relative;
  top:0px;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  gap:10px;
  z-index:20;
}

.banner-top{
width:260px;
height:70px;
background:#111;
color:#888;
display:flex;
align-items:center;
justify-content:center;
border-radius:6px;
font-size:12px;
}

.banner-top img{
  width:260px;
  height:70px;
  object-fit:cover;
  display:block;
}

/* SIDE BANNERS */

.banner-vertical{
  width:130px;
  height:480px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.banner-vertical img{
  width:130px;
  height:480px;
  object-fit:cover;
  border-radius:10px;
}



/* RIGHT bigger */

.banner-vertical.right{

   /* used when you place a .banner-vertical outside or inside; inner overrides width */
   width:200px; /* default to same width for consistency */

}

/* ============================= */
/* SERVER PAGE */
/* ============================= */
.inner-grid{
align-items:stretch;
}

.banner-vertical{
height:600px;
}

.server-card{
background:#0f1115;
border-radius:12px;
padding:25px;
box-shadow:0 10px 35px rgba(0,0,0,0.45);
color:#eee;
max-width:900px;
margin:auto;
}

.server-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.server-title{
  font-size:28px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
}

.server-title-votes{
  font-size:14px;
  font-weight:700;
  color:#ffffff; /* bright like index */
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.server-title-votes::after{
  content:" ★";
  color:#ffd700; /* gold star */
}

.server-buttons{
display:flex;
gap:10px;
}

.vote-btn{
background:#4caf50;
border:none;
padding:10px 20px;
border-radius:6px;
color:white;
font-weight:bold;
cursor:pointer;
}

.visit-btn{
background:#ffc107;
border:none;
padding:10px 20px;
border-radius:6px;
font-weight:bold;
cursor:pointer;
}

.server-buttons .vote-btn,
.server-buttons .visit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  line-height:1;
}

.server-info{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin-bottom:20px;
}

.info-box{
background:#1a1c21;
padding:15px;
border-radius:8px;
}

.features{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-bottom:20px;
}

.feature{
background:#1a1c21;
padding:10px;
border-radius:6px;
font-size:14px;
}

.description{
background:#1a1c21;
padding:20px;
border-radius:8px;
}

.vote-message{
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
}

.vote-message--ok{
  background:rgba(76,175,80,0.12);
  color:#9be59f;
  border:1px solid rgba(76,175,80,0.25);
}

.vote-message--warn{
  background:rgba(255,193,7,0.10);
  color:#ffd36a;
  border:1px solid rgba(255,193,7,0.20);
}

.server-page .description p{
  margin:0;
  line-height:1.6;
}

/* PLATFORM BADGE */

.badge{
display:inline-block;
padding:2px 7px;
margin-right:5px;
border-radius:4px;
font-size:11px;
font-weight:600;
}

.badge.l2j{
background:#ff4fa3;
color:#fff;
}

.badge.l2off{
background:#e53935;
color:#fff;
}

/* ADD SERVER PAGE */

.add-title{
margin-bottom:20px;
font-size:24px;
}

.add-server-form{
display:flex;
flex-direction:column;
gap:25px;
}

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.form-group{
display:flex;
flex-direction:column;
gap:6px;
}

.form-group.full{
grid-column:1 / -1;
}

.form-group input,
.form-group textarea,
.form-group select{
padding:10px;
border-radius:6px;
border:1px solid #333;
background:#111;
color:#fff;
}

.section-title{
margin-top:10px;
font-size:18px;
}

.features-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}

.features-grid label{
background:#111;
padding:8px;
border-radius:6px;
font-size:13px;
}

.submit-server{
margin-top:10px;
padding:14px;
background:#4caf50;
border:none;
border-radius:8px;
font-size:16px;
font-weight:700;
color:white;
cursor:pointer;
}

.submit-server:hover{
background:#43a047;
}

/* LOGIN/REGISTER HERE */
.auth-cta{
  background:#111316;
  border:1px solid var(--muted);
  border-radius:10px;
  padding:16px;
}

.auth-cta h3{
  margin:0 0 6px;
  font-size:18px;
}

.auth-cta p{
  margin:0;
  color:#9b9b9b;
  font-size:13px;
  line-height:1.45;
}

.auth-cta-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

.auth-cta-actions .submit-server{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  min-width:150px;
}

.auth-cta-actions .secondary{
  background:#2a2f3a;
}

.user-box{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
}

.auth-logout{
  opacity:.9;
}

/* ============================= */
/* VOTE PAGE */
/* ============================= */
.vote-page{
  background:#181c20;
}

.vote-wrap{
  max-width:760px;
  margin:0 auto;
  padding:34px 16px 60px;
}

.vote-card{
  background:#24282d;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:28px 24px 30px;
  text-align:center;
  box-shadow:0 14px 40px rgba(0,0,0,0.35);
}

.vote-title{
  margin:0 0 18px;
  font-size:18px;
  font-weight:700;
  color:#f3f3f3;
}

.vote-subtitle{
  display:inline-block;
  margin:0 auto 18px;
  padding:8px 14px;
  border:1px solid #e0b800;
  border-radius:8px;
  color:#ffd54a;
  font-size:13px;
  font-weight:700;
}

.vote-alert{
  margin:6px 0 14px;
  color:#ff5e5e;
  font-weight:700;
}

.vote-note{
  margin:10px 0 12px;
  color:#eaeaea;
  font-size:18px;
  font-weight:600;
}

.vote-countdown{
  margin:4px 0 18px;
  color:#ffffff;
  font-size:20px;
  font-weight:800;
}

.vote-domain{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:150px;
  padding:14px 24px;
  margin:4px 0 18px;
  border-radius:8px;
  background:#f4c21f;
  color:#111;
  text-decoration:none;
  font-weight:900;
}

.vote-mainbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  padding:18px 34px;
  border:none;
  border-radius:10px;
  background:#26c15f;
  color:#111;
  font-size:20px;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
}

.vote-mainbtn:hover{
  transform:translateY(-1px);
}

.vote-form{
  margin:0;
}

/* ============================= */
/* LISTING PAGES */
/* ============================= */
body.listing-page{
  background:
    radial-gradient(circle at top, rgba(122,51,13,0.16), transparent 36%),
    linear-gradient(180deg, #0c0814 0%, #0b0712 100%);
  color:#e9e7f2;
}

body.listing-page .site-header{
  background:rgba(12,8,20,0.92);
  border-bottom:1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
}

body.listing-page .header-inner,
body.listing-page .listing-shell{
  max-width: 1400px;
}

.listing-shell{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:28px 18px 56px;
}

.listing-hero{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-end;
  margin:18px 0 24px;
}

.listing-kicker{
  margin:0 0 10px;
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:12px;
  color:#8d7db8;
  font-weight:800;
}

.listing-hero h1{
  margin:0;
  font-size: clamp(2.1rem, 3vw, 3.6rem);
  line-height:1;
  letter-spacing:-0.05em;
  color:#f3efff;
}

.listing-hero p{
  margin:14px 0 0;
  max-width: 880px;
  color:#a89fc1;
  font-size: 1rem;
  line-height:1.55;
}

.listing-hero-stats{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.listing-stat{
  min-width:130px;
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(27,18,42,0.98), rgba(18,12,30,0.98));
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 18px 40px rgba(0,0,0,0.22);
  text-align:right;
}

.listing-stat-value{
  display:block;
  font-size:1.45rem;
  font-weight:900;
  color:#ffffff;
  line-height:1;
}

.listing-stat-label{
  display:block;
  margin-top:6px;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#8a7cab;
  font-weight:800;
}

.listing-tabs{
  display:flex;
  gap:10px;
  overflow:auto;
  padding: 2px 0 18px;
  margin-bottom: 6px;
  scrollbar-width:none;
}
.listing-tabs::-webkit-scrollbar{ display:none; }

.listing-tab{
  flex:0 0 auto;
  text-decoration:none;
  color:#a697bf;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  padding:12px 16px;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.04em;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.listing-tab:hover{
  color:#fff;
  transform:translateY(-1px);
  border-color:rgba(249,155,7,0.35);
}
.listing-tab.is-active{
  color:#0b0712;
  background:linear-gradient(180deg, #facc15, #f59e0b);
  border-color:transparent;
  box-shadow:0 10px 30px rgba(249,155,7,0.20);
}

.listing-featured-banners{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  margin:0 0 18px;
}

.featured-banner{
  position:relative;
  min-height:0;
  aspect-ratio:300 / 250;
  padding:22px;
  border-radius:24px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,255,255,0.07);
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,0.10), transparent 28%),
    linear-gradient(180deg, rgba(27,16,43,0.98), rgba(17,10,29,0.98));
  box-shadow:0 18px 40px rgba(0,0,0,0.20);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
}

.featured-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%),
    linear-gradient(90deg, rgba(249,155,7,0.08), transparent 30%, rgba(249,155,7,0.04));
  pointer-events:none;
}

.featured-banner:hover{
  transform:translateY(-2px);
  border-color:rgba(249,155,7,0.24);
}

.featured-banner-badge{
  position:absolute;
  top:18px;
  right:18px;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(180deg, #facc15, #f59e0b);
  color:#150c18;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.featured-banner-title{
  position:relative;
  z-index:1;
  display:block;
  font-size:28px;
  line-height:1;
  font-weight:900;
  letter-spacing:-0.05em;
}

.featured-banner-copy{
  position:relative;
  z-index:1;
  display:block;
  color:#c6bfd8;
  font-size:14px;
  line-height:1.45;
  max-width:220px;
}

@media (max-width: 1200px){
  .listing-featured-banners{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .featured-banner{
    min-height:210px;
  }
}

@media (max-width: 700px){
  .listing-featured-banners{
    grid-template-columns:1fr;
  }

  .featured-banner{
    min-height:190px;
  }

  .featured-banner-title{
    font-size:24px;
  }
}

.listing-featured-banners{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  margin: 0 0 18px;
}

.featured-banner{
  position:relative;
  width:100%;
  min-height:240px;
  aspect-ratio:330 / 240;
  padding:22px;
  border-radius:24px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,255,255,0.07);
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,0.10), transparent 28%),
    linear-gradient(180deg, rgba(27,16,43,0.98), rgba(17,10,29,0.98));
  box-shadow:0 18px 40px rgba(0,0,0,0.20);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
}

.featured-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%),
    linear-gradient(90deg, rgba(249,155,7,0.08), transparent 30%, rgba(249,155,7,0.04));
  pointer-events:none;
}

.featured-banner:hover{
  transform:translateY(-2px);
  border-color:rgba(249,155,7,0.24);
}

.featured-banner-badge{
  position:absolute;
  top:18px;
  right:18px;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(180deg, #facc15, #f59e0b);
  color:#150c18;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.featured-banner-title{
  position:relative;
  z-index:1;
  display:block;
  font-size:28px;
  line-height:1;
  font-weight:900;
  letter-spacing:-0.05em;
}

.featured-banner-copy{
  position:relative;
  z-index:1;
  display:block;
  color:#c6bfd8;
  font-size:14px;
  line-height:1.45;
  max-width: 220px;
}

.listing-card{
  background:linear-gradient(180deg, rgba(20,12,34,0.94), rgba(14,9,24,0.94));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:28px;
  box-shadow:0 32px 80px rgba(0,0,0,0.35);
  overflow:hidden;
}

.listing-card-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-end;
  padding:22px 24px 16px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.listing-card-head h2{
  margin:0;
  font-size:1.7rem;
  line-height:1.1;
  color:#f5f2ff;
  letter-spacing:-0.04em;
}
.listing-card-head p{
  margin:8px 0 0;
  color:#9187ab;
  font-size:.95rem;
}

.listing-card-badge{
  flex:0 0 auto;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.05);
  color:#d8d0ea;
  font-weight:800;
  font-size:.88rem;
}

.listing-grid{
  display:grid;
  grid-template-columns: 96px minmax(0, 1.9fr) 132px 76px 76px 76px 84px 160px;
  gap:0;
  align-items:stretch;
}

.listing-grid-head{
  padding: 10px 18px 0;
}
.listing-grid-head span{
  display:flex;
  align-items:center;
  min-height:54px;
  color:#7f769a;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  font-weight:900;
  padding:0 12px;
}

.listing-rows{
  padding:0 18px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.listing-row{
  position:relative;
  display:grid;
  grid-template-columns: 96px minmax(0, 1.9fr) 132px 76px 76px 76px 84px 160px;
  align-items:stretch;
  background:linear-gradient(180deg, rgba(27,16,43,0.98), rgba(20,12,33,0.98));
  border:1px solid rgba(255,255,255,0.05);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,0.16);
}
.listing-row::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg, rgba(249,155,7,0.95), rgba(249,155,7,0.2));
  opacity:0;
}
.listing-row.is-premium::before{
  opacity:1;
  background:linear-gradient(180deg, #facc15, #f59e0b);
}
.listing-row.is-coming::before{
  opacity:1;
  background:linear-gradient(180deg, #60a5fa, #a78bfa);
}

.listing-rank,
.listing-center,
.listing-rate,
.listing-votes{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 12px;
  border-left:1px solid rgba(255,255,255,0.05);
}

.listing-rank{
  border-left:none;
  flex-direction:column;
  gap:6px;
  color:#d9d2ea;
  font-weight:900;
  font-size:1.55rem;
  letter-spacing:-0.05em;
}
.listing-rank small{
  color:#69d27d;
  font-size:.82rem;
  font-weight:900;
}

.listing-info{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
  padding:18px 18px 18px 18px;
}

.listing-thumb{
  width:96px;
  height:96px;
  border-radius:18px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.18), transparent 26%),
    linear-gradient(145deg, rgba(44,28,74,0.96), rgba(20,11,35,0.96));
  border:1px solid rgba(255,255,255,0.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 20px rgba(0,0,0,0.22);
  color:#f3c14f;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:2rem;
  letter-spacing:-0.06em;
  flex:0 0 auto;
}

.listing-info-body{
  min-width:0;
}

.listing-name-line{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.listing-name{
  color:#ffffff;
  text-decoration:none;
  font-size:1.1rem;
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:1.1;
}
.listing-name:hover{
  color:#fbbf24;
}

.listing-description{
  color:#bdb3d1;
  font-size:.95rem;
  line-height:1.5;
  max-width: 100%;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

.listing-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.listing-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.05);
  color:#e8defd;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.listing-pill--muted{
  background:rgba(255,255,255,0.03);
  color:#9e94b7;
}

.pill-premium{
  background:linear-gradient(180deg, rgba(249,155,7,0.18), rgba(249,155,7,0.08));
  border-color:rgba(249,155,7,0.28);
  color:#ffc86c;
}
.pill-coming{
  background:linear-gradient(180deg, rgba(96,165,250,0.16), rgba(167,139,250,0.10));
  border-color:rgba(96,165,250,0.22);
  color:#9dccff;
}

.listing-center{
  color:#dbd2ef;
  font-size:.84rem;
  font-weight:800;
  text-align:center;
}
.listing-rate{
  color:#ffffff;
  font-size:.96rem;
  font-weight:900;
  letter-spacing:-0.02em;
}

.listing-votes{
  flex-direction:column;
  gap:12px;
}
.listing-votes .votes-label{
  color:#7f769a;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.7rem;
  font-weight:900;
}
.listing-votes .votes-count{
  color:#f59e0b;
  font-size:1.55rem;
  font-weight:900;
  line-height:1;
}
.vote-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  padding:10px 16px;
  border-radius:12px;
  text-decoration:none;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.07);
  color:#d9d2ea;
  font-weight:900;
  font-size:.84rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.vote-button:hover{
  transform:translateY(-1px);
  color:#ffffff;
  border-color:rgba(249,155,7,0.28);
  background:rgba(249,155,7,0.11);
}
.vote-button.is-disabled{
  pointer-events:none;
  opacity:.55;
}

.listing-footer{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
  padding:14px 24px 22px;
  border-top:1px solid rgba(255,255,255,0.05);
}

.listing-footer-note{
  color:#958aad;
  font-size:.93rem;
}

.listing-table-wrap{
  overflow-x:auto;
  padding: 0 18px 18px;
}

.listing-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 12px;
  table-layout:fixed;
}

.listing-table thead th{
  padding:14px 12px 10px;
  text-align:left;
  color:#8c80aa;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.18em;
  white-space:nowrap;
}

.listing-table thead th:not(.col-info):not(.col-rank){
  text-align:center;
}

.listing-table .col-rank{
  width:88px;
}
.listing-table .col-info{
  width:auto;
}
.listing-table thead th.col-info{
  padding-left:16px;
}

.listing-table tbody tr{
  position:relative;
}

.listing-table tbody td{
  padding:18px 12px;
  background:linear-gradient(180deg, rgba(27,16,43,0.98), rgba(20,12,33,0.98));
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  vertical-align:middle;
}

.listing-table tbody td:first-child{
  border-left:1px solid rgba(255,255,255,0.05);
  border-radius:20px 0 0 20px;
}

.listing-table tbody td:last-child{
  border-right:1px solid rgba(255,255,255,0.05);
  border-radius:0 20px 20px 0;
}

.listing-table tbody tr:hover td{
  background:linear-gradient(180deg, rgba(33,20,53,0.98), rgba(22,14,36,0.98));
}

.listing-table .listing-info{
  min-width:0;
  padding-left:16px;
  display:flex;
  align-items:center;
  gap:16px;
}

.listing-table .listing-info-box{
  min-width:0;
  width:100%;
}

.listing-table .listing-name-line{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.listing-table .listing-name{
  font-size:26px;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.listing-table .listing-description{
  max-width:none;
  margin:0;
}

.listing-table .listing-tags{
  margin-top:12px;
}

.listing-table .listing-center,
.listing-table .listing-rate,
.listing-table .listing-votes{
  border-left:1px solid rgba(255,255,255,0.05);
  text-align:center;
}

.listing-table .listing-center{
  font-size:.9rem;
}

.listing-table .listing-rate{
  font-size:.98rem;
}

.listing-table .listing-votes{
  flex-direction:column;
  gap:12px;
}

.listing-table .listing-votes::after{
  display:none;
}

.listing-table .votes-label{
  color:#7f769a;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.68rem;
  font-weight:900;
}

.listing-table .votes-count{
  color:#ffad1d;
  font-size:1.7rem;
  line-height:1;
  font-weight:900;
}

.listing-table .vote-button{
  min-width:92px;
}

.listing-table .listing-empty-row td{
  background:linear-gradient(180deg, rgba(27,16,43,0.98), rgba(20,12,33,0.98));
  border:1px solid rgba(255,255,255,0.05);
}

.listing-pagination{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.page-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 12px;
  border-radius:10px;
  text-decoration:none;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  color:#d8d0ea;
  font-weight:800;
  font-size:.9rem;
}
.page-link:hover{
  border-color:rgba(249,155,7,0.28);
  background:rgba(249,155,7,0.10);
  color:#fff;
}
.page-link.is-current{
  background:linear-gradient(180deg, #facc15, #f59e0b);
  border-color:transparent;
  color:#0b0712;
}
.page-link.is-disabled{
  pointer-events:none;
  opacity:.45;
}
.page-dots{
  color:#7f769a;
  font-weight:900;
  padding:0 4px;
}

.listing-empty-row td{
  padding:38px 24px;
  color:#9e95b8;
  text-align:center;
  font-weight:700;
 }
 
 
 @media (max-width: 1200px){
   .listing-featured-banners{
     grid-template-columns:repeat(2, minmax(0, 1fr));
   }
 
   .featured-banner{
     min-height:210px;
   }
 }
 
 @media (max-width: 700px){
   .listing-featured-banners{
     grid-template-columns:1fr;
   }
 
   .featured-banner{
     min-height:190px;
   }
 
   .featured-banner-title{
     font-size:24px;
   }
}

@media (max-width: 1180px){
  .listing-grid,
  .listing-row{
    grid-template-columns: 84px minmax(0, 1.7fr) 116px 70px 70px 70px 76px 136px;
  }
  .listing-thumb{
    width:84px;
    height:84px;
    border-radius:16px;
    font-size:1.7rem;
  }
}

@media (max-width: 980px){
  .listing-hero{
    flex-direction:column;
    align-items:flex-start;
  }
  .listing-hero-stats{
    justify-content:flex-start;
  }

  .listing-grid-head,
  .listing-grid-head span{
    display:none;
  }

  .listing-row{
    grid-template-columns: 72px minmax(0, 1fr) 96px;
    grid-auto-rows:auto;
  }

  .listing-info{
    grid-column:2 / -1;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }

  .listing-center,
  .listing-rate,
  .listing-votes{
    border-left:none;
    border-top:1px solid rgba(255,255,255,0.05);
  }

  .listing-rank{
    grid-row:1 / span 3;
  }

  .listing-row > .listing-center:nth-of-type(1){ grid-column:2; }
  .listing-row > .listing-rate:nth-of-type(2){ grid-column:3; }
  .listing-row > .listing-rate:nth-of-type(3){ grid-column:4; }
  .listing-row > .listing-rate:nth-of-type(4){ grid-column:5; }
  .listing-row > .listing-rate:nth-of-type(5){ grid-column:6; }
  .listing-votes{
    grid-column:7 / -1;
  }

  .listing-center,
  .listing-rate{
    padding:12px 8px;
    font-size:.82rem;
  }
  .listing-votes{
    padding:14px 10px;
  }
}

@media (max-width: 720px){
  .listing-shell{
    padding:20px 12px 44px;
  }
  .listing-card-head,
  .listing-rows,
  .listing-footer{
    padding-left:14px;
    padding-right:14px;
  }

  .listing-row{
    grid-template-columns: 1fr;
  }
  .listing-rank,
  .listing-info,
  .listing-center,
  .listing-rate,
  .listing-votes{
    grid-column:1 / -1;
    border-left:none;
  }
  .listing-info{
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .listing-rank{
    flex-direction:row;
    justify-content:flex-start;
  }
  .listing-center,
  .listing-rate{
    justify-content:flex-start;
  }
  .listing-votes{
    align-items:flex-start;
  }
  .listing-votes .votes-count{
    font-size:1.35rem;
  }
}

 body.listing-page{
   background:
     radial-gradient(circle at top, rgba(249,155,7,0.10), transparent 34%),
     radial-gradient(circle at 80% 0%, rgba(124,58,237,0.16), transparent 28%),
     linear-gradient(180deg, #09050f 0%, #0d0815 35%, #09050f 100%);
   color:#efeaf9;
 }
 
 body.listing-page .site-header{
   background:rgba(10,6,16,0.92);
   border-bottom:1px solid rgba(255,255,255,0.06);
   backdrop-filter: blur(16px);
 }
 
 body.listing-page .header-inner{
   max-width:1400px;
   padding:14px 20px;
 }
 
 body.listing-page .main-nav a{
   color:#ddd7ea;
 }
 
 body.listing-page .main-nav a:hover{
   color:#fff;
 }
 
 body.listing-page .main-nav a.is-active{
   color:#ffffff;
 }
 
 body.listing-page .header-right .langs{
   color:#bdaed8;
 }
 
 body.listing-page .auth{
   color:#ddd7ea;
 }
 
 body.listing-page .theme-toggle{
   background:#f3f3f3;
   color:#111;
 }
 
 body.listing-page .site-footer{
   background:transparent;
   color:#85789f;
   padding:28px 16px 40px;
   border-top:1px solid rgba(255,255,255,0.05);
 }
 
 .hz-shell{
   width:100%;
   max-width:1400px;
   margin:0 auto;
   padding:28px 18px 56px;
 }
 
 .hz-hero{
   display:flex;
   justify-content:space-between;
   gap:24px;
   align-items:flex-end;
   margin:10px 0 18px;
 }
 
 .hz-kicker{
   margin:0 0 10px;
   text-transform:uppercase;
   letter-spacing:.26em;
   font-size:12px;
   color:#9d89d0;
   font-weight:800;
 }
 
 .hz-hero h1{
   margin:0;
   font-size: clamp(2.2rem, 3vw, 4rem);
   line-height:0.95;
   letter-spacing:-0.06em;
   color:#fff;
 }
 
 .hz-hero p{
   margin:14px 0 0;
   max-width:820px;
   color:#b0a5c8;
   font-size:1rem;
   line-height:1.55;
 }
 
 .hz-hero-stats{
   display:flex;
   gap:14px;
   flex-wrap:wrap;
   justify-content:flex-end;
 }
 
 .hz-stat{
   min-width:136px;
   padding:16px 18px;
   border-radius:20px;
   background:linear-gradient(180deg, rgba(26,16,43,0.96), rgba(17,10,29,0.96));
   border:1px solid rgba(255,255,255,0.06);
   box-shadow:0 18px 40px rgba(0,0,0,0.22);
   text-align:right;
 }
 
 .hz-stat-value{
   display:block;
   font-size:1.5rem;
   font-weight:900;
   color:#ffffff;
   line-height:1;
 }
 
 .hz-stat-label{
   display:block;
   margin-top:6px;
   font-size:.72rem;
   letter-spacing:.18em;
   text-transform:uppercase;
   color:#8e7fb0;
   font-weight:800;
 }
 
 .hz-tabs{
   display:flex;
   gap:10px;
   overflow:auto;
   padding: 2px 0 18px;
   margin-bottom: 8px;
   scrollbar-width:none;
 }
 .hz-tabs::-webkit-scrollbar{ display:none; }
 
 .hz-tab{
   flex:0 0 auto;
   text-decoration:none;
   color:#a89fc1;
   background:rgba(255,255,255,0.03);
   border:1px solid rgba(255,255,255,0.05);
   padding:12px 16px;
   border-radius:999px;
   font-size:14px;
   font-weight:800;
   letter-spacing:.04em;
   transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
 }
 
 .hz-tab:hover{
   color:#fff;
   transform:translateY(-1px);
   border-color:rgba(249,155,7,0.35);
 }
 
 .hz-tab.is-active{
   color:#120b16;
   background:linear-gradient(180deg, #facc15, #f59e0b);
   border-color:transparent;
   box-shadow:0 10px 30px rgba(249,155,7,0.22);
 }
 
 .hz-board{
   background:linear-gradient(180deg, rgba(22,12,36,0.98), rgba(12,7,20,0.98));
   border:1px solid rgba(255,255,255,0.06);
   border-radius:26px;
   box-shadow:0 32px 80px rgba(0,0,0,0.40);
   overflow:hidden;
 }
 
 .hz-board-head{
   display:grid;
   grid-template-columns: 88px minmax(560px,1fr) 150px 72px 72px 72px 72px 118px 140px;
   gap:0;
   padding: 14px 18px 12px;
   border-bottom:1px solid rgba(255,255,255,0.05);
   color:#8c80aa;
   text-transform:uppercase;
   letter-spacing:.18em;
   font-size:.72rem;
   font-weight:900;
 }
 
 .hz-board-head span{
   display:flex;
   align-items:center;
   min-height:24px;
   padding:0 10px;
   justify-content:center;
   text-align:center;
   line-height:1.15;
 }
 
 .hz-col-info{
   padding-left:16px !important;
   justify-content:flex-start !important;
   text-align:left !important;
 }
 
  .hz-server{
   display:flex;
   align-items:center;
   gap:16px;
   min-width:0;
   width:100%;
   overflow:hidden;
   width:100%;
   overflow:hidden;
   padding:18px 18px 18px 0;
   border-left:1px solid rgba(255,255,255,0.04);
 }
 
 .hz-card--empty .hz-server{
   padding-right:18px;
 }
 
 .hz-list{
   padding:18px;
   display:flex;
   flex-direction:column;
   gap:12px;
 }
 
 .hz-card{
   position:relative;
   display:grid;
   grid-template-columns: 88px minmax(560px,1fr) 150px 72px 72px 72px 72px 118px 140px;
   align-items:stretch;
   gap:0;
   background:linear-gradient(180deg, rgba(30,18,49,0.96), rgba(18,11,30,0.96));
   border:1px solid rgba(255,255,255,0.05);
   border-radius:18px;
   overflow:hidden;
   min-height:142px;
   transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
 }
 
 .hz-card::before{
   content:"";
   position:absolute;
   inset:0;
   background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent 35%, rgba(255,255,255,0.01));
   pointer-events:none;
 }
 
 .hz-card:hover{
   transform:translateY(-2px);
   box-shadow:0 18px 46px rgba(0,0,0,0.34);
   border-color:rgba(249,155,7,0.22);
 }
 
 .hz-card.is-premium{
   border-color:rgba(249,155,7,0.34);
   box-shadow:inset 4px 0 0 rgba(249,155,7,0.92), 0 14px 34px rgba(0,0,0,0.25);
 }
 
 .hz-card.is-coming{
   box-shadow:inset 4px 0 0 rgba(99,102,241,0.92), 0 14px 34px rgba(0,0,0,0.25);
 }
 
 .hz-rank{
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   gap:6px;
   padding:14px 8px;
   color:#f2eaff;
   font-weight:900;
   text-align:center;
   border-right:1px solid rgba(255,255,255,0.04);
 }
 
 .hz-rank span{
   font-size:2rem;
   line-height:1;
   letter-spacing:-0.06em;
 }
 
 .hz-rank small{
   color:#27c96f;
   font-size:.95rem;
   line-height:1;
 }
 
 .hz-avatar{
   display:flex;
   align-items:center;
   justify-content:center;
   padding:16px 8px;
 }
 
 .hz-avatar img,
 .hz-avatar-fallback{
   width:72px;
   height:72px;
   border-radius:14px;
   border:1px solid rgba(255,255,255,0.10);
   background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
   box-shadow:0 8px 22px rgba(0,0,0,0.30);
 }
 
 .hz-avatar img{
   object-fit:cover;
   display:block;
 }
 
 .hz-avatar-fallback{
   display:flex;
   align-items:center;
   justify-content:center;
   color:#d8c7f9;
   font-weight:900;
   font-size:1.15rem;
   letter-spacing:.08em;
 }
 
 .hz-info{
   flex:1;
   min-width:0;
   flex:1;
   padding:16px 16px 16px 6px;
   display:flex;
   flex-direction:column;
   justify-content:center;
   gap:10px;
 }
 
 .hz-title-line{
   display:flex;
   align-items:center;
   gap:10px;
   flex-wrap:wrap;
   min-width:0;
 }
 
 .hz-name{
   text-decoration:none;
   color:#fff;
   font-size:1.35rem;
   font-weight:900;
   letter-spacing:-0.04em;
   line-height:1.1;
 }
 
 .hz-name:hover{
   color:#facc15;
 }
 
 .hz-dot{
   width:10px;
   height:10px;
   border-radius:999px;
   background:#2bd46d;
   box-shadow:0 0 0 5px rgba(43,212,109,0.12);
   flex:0 0 auto;
 }
 
 .hz-desc{
   color:#b4a8ca;
   font-size:.98rem;
   line-height:1.42;
   max-width:880px;
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
 }
 
 .hz-tags{
   display:flex;
   gap:8px;
   flex-wrap:wrap;
 }
 
 .hz-pill{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   white-space:nowrap;
   border-radius:999px;
   padding:6px 11px;
   font-size:11px;
   line-height:1;
   font-weight:900;
   letter-spacing:.08em;
   text-transform:uppercase;
   border:1px solid rgba(255,255,255,0.10);
 }
 
 .hz-pill--soft{
   background:rgba(255,255,255,0.04);
   color:#d8d0ea;
 }
 
 .hz-pill--premium{
   background:linear-gradient(180deg, #f59e0b, #d97706);
   color:#160c1f;
   border-color:transparent;
   box-shadow:0 8px 18px rgba(249,155,7,0.18);
 }
 
 .hz-pill--coming{
   background:linear-gradient(180deg, #6366f1, #4f46e5);
   color:#eff1ff;
   border-color:transparent;
   box-shadow:0 8px 18px rgba(99,102,241,0.18);
 }
 
 .hz-chronicle,
 .hz-rate,
 .hz-votes,
 .hz-action{
   display:flex;
   align-items:center;
   justify-content:center;
   padding:14px 10px;
   border-left:1px solid rgba(255,255,255,0.04);
   text-align:center;
 }
 
 .hz-chronicle{
   color:#9ec0ff;
   font-size:1rem;
   font-weight:800;
   text-transform:uppercase;
   letter-spacing:.04em;
 }
 
 .hz-rate{
   color:#f6f3ff;
   font-size:1rem;
   font-weight:900;
 }
 
 .hz-rate strong{
   font-size:1.02rem;
 }
 
 .hz-votes{
   flex-direction:column;
   gap:4px;
 }
 
 .hz-votes strong{
   display:block;
 }
 
 .hz-votes-label{
   color:#8d7fa9;
   text-transform:uppercase;
   letter-spacing:.14em;
   font-size:.68rem;
   font-weight:900;
 }
 
 .hz-votes strong{
   color:#ffad1d;
   font-size:1.9rem;
   line-height:1;
   font-weight:900;
 }
 
 .hz-action{
   padding-right:16px;
 }
 
 .hz-vote-btn{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   min-width:100px;
   padding:11px 18px;
   border-radius:14px;
   background:linear-gradient(180deg, rgba(249,155,7,0.18), rgba(249,155,7,0.12));
   border:1px solid rgba(249,155,7,0.20);
   color:#ffd68b;
   text-decoration:none;
   font-weight:900;
   letter-spacing:.08em;
   text-transform:uppercase;
   box-shadow:0 10px 24px rgba(0,0,0,0.18);
   transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
 }
 
 .hz-vote-btn:hover{
   transform:translateY(-1px);
   background:linear-gradient(180deg, rgba(249,155,7,0.28), rgba(249,155,7,0.18));
   border-color:rgba(249,155,7,0.35);
   color:#fff4d0;
 }
 
 .hz-vote-btn.is-disabled{
   opacity:.5;
   pointer-events:none;
 }
 
 .hz-card--empty{
   min-height:110px;
 }
 
 .hz-card--empty .hz-name{
   font-size:1.2rem;
 }
 
 .hz-footer{
   display:flex;
   justify-content:space-between;
   align-items:center;
   gap:18px;
   flex-wrap:wrap;
   padding:18px 6px 0;
 }
 
 .hz-footer-note{
   color:#9487b0;
   font-size:.95rem;
   font-weight:700;
 }
 
 .hz-pagination{
   display:flex;
   gap:8px;
   flex-wrap:wrap;
   align-items:center;
 }
 
 .hz-page-link{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   min-width:42px;
   height:40px;
   padding:0 14px;
   border-radius:12px;
   text-decoration:none;
   color:#ddd4ef;
   background:rgba(255,255,255,0.03);
   border:1px solid rgba(255,255,255,0.05);
   font-weight:800;
   transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
 }
 
 .hz-page-link:hover{
   transform:translateY(-1px);
   background:rgba(255,255,255,0.06);
   border-color:rgba(249,155,7,0.22);
   color:#fff;
 }
 
 .hz-page-link.is-current{
   background:linear-gradient(180deg, #facc15, #f59e0b);
   color:#180e1f;
   border-color:transparent;
 }
 
 .hz-page-link.is-disabled{
   opacity:.35;
   pointer-events:none;
 }
 
 .hz-page-dots{
   color:#736889;
   font-weight:900;
   padding:0 4px;
 }
 
 @media (max-width: 1280px){
   .hz-board-head,
   .hz-card{
     grid-template-columns: 82px minmax(0,1fr) 138px 68px 68px 68px 68px 108px 126px;
   }
 
   .hz-rank span{
     font-size:1.7rem;
   }
 
   .hz-name{
     font-size:1.18rem;
   }
 }
 
 @media (max-width: 1080px){
   .hz-board-head{
     display:none;
   }
 
   .hz-card{
     grid-template-columns: 76px minmax(0,1fr) 104px 62px 62px 62px 62px 96px 102px;
   }
 
   .hz-chronicle{
     font-size:.92rem;
   }
 
   .hz-rate{
     font-size:.9rem;
   }
 
   .hz-votes strong{
     font-size:1.55rem;
   }
 
   .hz-vote-btn{
     min-width:86px;
     padding:10px 14px;
   }
 }
 
 @media (max-width: 920px){
   .hz-hero{
     flex-direction:column;
     align-items:flex-start;
   }
 
   .hz-hero-stats{
     justify-content:flex-start;
   }
 
   .hz-card{
    grid-template-columns: 72px minmax(0,1fr) 96px;
     min-height:auto;
   }

   .hz-server{
     border-left:none;
     padding-left:12px;
   }
   
   .hz-chronicle,
   .hz-rate,
   .hz-votes,
   .hz-action{
     justify-content:flex-start;
     border-left:none;
     padding-left:12px;
   }
 
   .hz-votes{
     align-items:flex-start;
   }
 
   .hz-action{
     justify-content:flex-end;
   }
 }
 
 @media (max-width: 640px){
   .hz-shell{
     padding:20px 12px 40px;
   }
 
   .hz-hero h1{
     font-size:2rem;
   }
 
   .hz-card{
     min-height:auto;
     grid-template-columns: 66px minmax(0,1fr) 68px;
   }
 
   .hz-info{
     padding:14px 12px 14px 4px;
   }
 
   .hz-desc{
     font-size:.92rem;
   }
 
   .hz-name{
     font-size:1.05rem;
   }
 
   .hz-hero-stats{
     width:100%;
   }
 
   .hz-stat{
     flex:1 1 140px;
   }
 
   .hz-pagination{
     width:100%;
   }
}



/* =========================================================
   L2RANKING INDEX — HOMEPAGE V2
   ========================================================= */
body.home-page{background:#eef0f4;color:#171b23}
body.home-page .site-header{background:#0a090d;border-bottom:1px solid #17151b;box-shadow:0 4px 18px rgba(0,0,0,.12)}
body.home-page .header-inner{max-width:1400px;min-height:58px}
body.home-page .logo-wrap img{width:160px;height:auto}
body.home-page .main-nav{gap:14px}
body.home-page .main-nav a,body.home-page .auth,body.home-page .header-right .langs{color:#e7e4ea;font-size:13px;font-weight:600}
body.home-page .main-nav a:hover,body.home-page .auth:hover{color:#fff}
body.home-page .main-nav-search{margin-left:2px}
body.home-page .main-nav-search__input{width:180px;height:34px;background:#141118;border-color:#2b2530}
body.home-page .main-nav-search__input:focus{width:220px}
body.home-page .home-footer{background:#11131a;border-top:1px solid #282c35;color:#8991a1;margin-top:28px;padding:24px 18px 30px}

body.home-page .main-nav-search__input:focus{
  width:200px;
}

body.home-page .header-right{
  gap:8px;
}

body.home-page .header-advertising{
  white-space:nowrap;
}

body.listing-page .main-nav{
  gap:12px;
}

body.listing-page .main-nav-search{
  margin-left:2px;
}

body.listing-page .main-nav-search__input{
  width:180px;
}

body.listing-page .main-nav-search__input:focus{
  width:200px;
}

body.listing-page .header-right{
  gap:8px;
}

body.listing-page .header-advertising{
  white-space:nowrap;
}

.home-l2-shell{position:relative;width:100%;max-width:none;margin:auto;padding:14px 8px 36px}
.home-l2-top-adbar{width:1098px;max-width:calc(100vw - 24px);margin:0 auto 14px;display:grid;grid-template-columns:repeat(6,178px);gap:6px}
.home-l2-top-ad{position:relative;width:178px;min-height:78px;border-radius:8px;overflow:hidden;text-decoration:none;box-shadow:0 3px 12px rgba(18,24,38,.1);transition:.18s}
.home-l2-top-ad:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(18,24,38,.16)}
.home-l2-top-ad--featured{display:flex;flex-direction:column;justify-content:center;padding:10px 13px;color:#fff;border:1px solid #2d3444;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.16),transparent 24%),linear-gradient(135deg,#172234,#0a0e16 68%,#24364c)}
.home-l2-top-ad--featured:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 10px)}
.home-l2-top-ad__kicker{position:relative;z-index:1;font:20px Georgia,serif;text-transform:uppercase}
.home-l2-top-ad--featured strong{position:relative;z-index:1;font-size:9px;letter-spacing:.16em;margin-top:6px}
.home-l2-top-ad--featured span:last-child{position:relative;z-index:1;font-size:8px;color:#b8c3d6}
.home-l2-top-ad--gold{display:flex;align-items:center;padding:8px 10px 7px 16px;gap:8px;color:#231706;border:1px solid rgba(105,68,0,.28);background:linear-gradient(135deg,#f4bd3e,#cf870c)}
.home-l2-top-ad--gold b{position:absolute;top:0;left:0;padding:3px 6px;font-size:7px;color:#fff;background:rgba(0,0,0,.24)}
.home-l2-top-ad__megaphone{font-size:14px;transform:rotate(180deg)}
.home-l2-top-ad__copy{display:flex;flex-direction:column;min-width:0}
.home-l2-top-ad__copy strong{font-size:12px;line-height:1.05}
.home-l2-top-ad__copy small{font-size:8px;line-height:1.1;margin-top:2px}
.home-l2-top-ad--gold em{position:absolute;right:7px;top:5px;font-style:normal;font-size:10px;opacity:.55}

 .home-l2-content-row{
   display:grid;
   grid-template-columns:
     clamp(200px,17vw,300px)
     120px
     minmax(0,1fr)
     120px
     clamp(200px,17vw,300px);
   gap:10px;
   align-items:start;
   justify-content:center;
   width:100%;
   max-width:1880px;
   margin:0 auto;
 }.home-l2-main{min-width:0}
.home-l2-inner-ad{width:120px}
.home-l2-inner-ad__link{position:sticky;top:72px;min-height:600px;width:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px;text-align:center;text-decoration:none;border-radius:8px;border:1px solid rgba(172,111,0,.22);color:#332000;background:linear-gradient(180deg,#f0b429,#cf8608);box-shadow:0 7px 24px rgba(120,83,8,.12);overflow:hidden}
.home-l2-inner-ad__link:before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.18);border-radius:6px}
.home-l2-inner-ad__plus{position:absolute;top:7px;right:8px;font-size:11px;opacity:.55}
.home-l2-inner-ad__icon{font-size:22px;transform:rotate(180deg);margin-bottom:24px}
.home-l2-inner-ad__link strong{font-size:19px;line-height:.95}
.home-l2-inner-ad__link small{margin-top:7px;font-size:10px;line-height:1.2}

.home-l2-diamond-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.home-l2-diamond{min-height:34px;padding:8px 10px;border-radius:7px;background:linear-gradient(135deg,#c5900c,#b37b00);color:#fff;text-decoration:none;font-size:11px;font-weight:800;display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.home-l2-diamond span,.home-l2-diamond b{display:inline-flex;align-items:center;padding:2px 6px;border-radius:999px;font-size:8px;line-height:1;color:#fff}
.home-l2-diamond span:nth-of-type(1){background:#e4173e}.home-l2-diamond span:nth-of-type(2){background:#4d53e7}.home-l2-diamond span:nth-of-type(3){background:#2875dc}.home-l2-diamond b{background:#f5ecc3;color:#9b6b00}

.home-l2-panels{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.home-l2-panel{min-width:0;background:#fff;border:1px solid #dbe0e6;border-radius:9px;box-shadow:0 5px 16px rgba(22,31,48,.07);overflow:hidden}
.home-l2-panel-head{min-height:54px;padding:15px 15px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #e3e6eb;background:#fff}
.home-l2-panel-head h2{margin:0;font-size:17px;line-height:1.15;color:#121820;font-weight:800;letter-spacing:-.02em}
.home-l2-panel-head a{flex:none;color:#728097;text-decoration:none;font-size:10px;font-weight:800}
.home-l2-panel-head a:hover{color:#1d63c7}

.home-l2-servers{list-style:none;margin:0;padding:7px}
.home-l2-servers .server-item,.home-l2-servers .server-empty{margin:0 0 4px;padding:0;border:0}
.home-l2-servers .server-link{min-height:37px;display:flex;align-items:center;gap:5px;width:100%;padding:6px 8px;border:0;border-radius:6px;color:#fff;text-decoration:none;box-shadow:none}
.home-l2-servers .server-rank{width:18px;flex:0 0 18px;padding:0;background:none;border:0;color:inherit;font-size:10px;justify-content:flex-start}
.home-l2-servers .server-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:12px;font-weight:800;text-transform:uppercase}
.home-l2-servers .server-rate{flex:0 0 auto;min-width:auto;padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.16);color:inherit;font-size:8px;font-weight:800;line-height:1;letter-spacing:0;white-space:nowrap}
.home-l2-servers .server-votes{flex:0 0 auto;min-width:auto;margin:0;padding:3px 6px;border-radius:999px;background:#fff4cd;color:#8e6700;font-size:8px;font-weight:900}
.home-l2-servers .server-votes:after{content:""}

.home-l2-servers .server-item:nth-child(1) .server-link{background:#06aa4d}
.home-l2-servers .server-item:nth-child(2) .server-link{background:#274798}
.home-l2-servers .server-item:nth-child(3) .server-link{background:#ad0618}
.home-l2-servers .server-item:nth-child(n+4):nth-child(-n+6) .server-link{background:#0f9bbb}
.home-l2-servers .server-item:nth-child(n+7) .server-link{background:#d7e6fb;color:#0754b9}
.home-l2-servers .server-item:nth-child(odd):nth-child(n+7) .server-link{background:#fff6b7}
.home-l2-servers--premium .server-item:nth-child(1) .server-link{background:#06aa4d}
.home-l2-servers--premium .server-item:nth-child(2) .server-link{background:#ae0818}
.home-l2-servers--premium .server-item:nth-child(3) .server-link{background:#274798}
.home-l2-servers--premium .server-item:nth-child(n+4) .server-link{background:#fff7c7;color:#0754b9}
.home-l2-servers--premium .server-item:nth-child(4n+4) .server-link{background:#d8f2ff}
.home-l2-servers--top .server-item:nth-child(1) .server-link{background:#06aa4d}
.home-l2-servers--top .server-item:nth-child(2) .server-link{background:#ad0618}
.home-l2-servers--top .server-item:nth-child(3) .server-link{background:#274798}
.home-l2-servers--top .server-item:nth-child(n+4) .server-link{background:#dceeff;color:#0754b9}
.home-l2-servers--top .server-item:nth-child(5) .server-link,.home-l2-servers--top .server-item:nth-child(7) .server-link{background:#fff7bd}
.home-l2-servers--coming .server-item:nth-child(-n+3) .server-link{background:#06aa4d}
.home-l2-servers--coming .server-item:nth-child(n+4) .server-link{background:#e3f0ff;color:#0754b9}
.home-l2-servers .server-item--premium .server-link{box-shadow:inset 3px 0 0 #ffd647}
.home-l2-servers--coming .server-rate{background:#ef4f9a;color:#fff}
.home-l2-servers .server-link--empty{color:#737b88;border:1px dashed #cfd4da;background:#f7f8fa!important;min-height:35px}
.home-l2-servers .server-link--empty .server-name{color:#717985;text-transform:none}
.home-l2-servers .server-rate--empty{color:#8c94a0;background:#edf0f4;text-transform:none}

.home-l2-side-banner{width:100%;aspect-ratio:428 / 1000;height:auto;min-height:0;max-height:none;border-radius:0 0 10px 10px;text-decoration:none;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(24,31,43,.12);box-shadow:0 8px 26px rgba(18,25,40,.14);background:radial-gradient(circle at 50% 25%,rgba(245,180,44,.20),transparent 24%),radial-gradient(circle at 50% 76%,rgba(55,92,164,.20),transparent 34%),linear-gradient(180deg,#111a2a,#0c111b 42%,#1b1018);position:relative;top:auto;}
.home-l2-side-banner:before{content:"";position:absolute;inset:0;background:linear-gradient(150deg,transparent 0 38%,rgba(255,255,255,.05) 39% 40%,transparent 41% 100%),repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 2px,transparent 2px 12px);pointer-events:none}
.home-l2-side-banner:after{content:"";position:absolute;left:50%;bottom:12%;transform:translateX(-50%);width:58%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(240,180,41,.22);box-shadow:0 0 0 10% rgba(240,180,41,.04),0 0 0 20% rgba(240,180,41,.025);pointer-events:none}
.home-l2-side-banner__halo{position:absolute;top:12%;width:65%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(235,181,53,.22),transparent 68%);filter:blur(5px)}
.home-l2-side-banner__brand{position:absolute;top:6%;font-size:12px;letter-spacing:.30em;color:#bdc4d2}
.home-l2-side-banner__crest,.home-l2-side-banner strong,.home-l2-side-banner small,.home-l2-side-banner__cta{position:relative;z-index:1}
.home-l2-side-banner__crest{display:flex;align-items:center;justify-content:center;width:35%;aspect-ratio:1;border-radius:22%;margin-bottom:9%;border:1px solid rgba(240,180,41,.34);background:linear-gradient(180deg,rgba(240,180,41,.16),rgba(255,255,255,.03));color:#f6c44b;font-size:clamp(22px,2.2vw,42px);font-weight:900;box-shadow:0 16px 40px rgba(0,0,0,.26)}
.home-l2-side-banner strong{font-size:clamp(34px,3.05vw,58px);line-height:.86;letter-spacing:-.06em;text-align:center}
.home-l2-side-banner small{margin-top:4%;font-size:8px;letter-spacing:.20em;color:#aab1bf}
.home-l2-side-banner__cta{margin-top:6%;padding:10px 18px;border-radius:999px;border:1px solid rgba(240,180,41,.34);background:linear-gradient(180deg,#f0b429,#c77d0a);color:#26170a;font-size:9px;font-weight:900;letter-spacing:.11em}

 @media (max-width:1719px) and (min-width:1401px){
   .home-l2-content-row{
     grid-template-columns:
       clamp(200px,17vw,300px)
       120px
       minmax(0,1fr)
       120px
       clamp(200px,17vw,300px);
     gap:10px;
     max-width:100%;
   }
 
   .home-l2-side-banner{
     display:flex;
     width:100%;
     aspect-ratio:428 / 1000;
     height:auto;
   }
 
   .home-l2-top-adbar{
     width:1098px;
     max-width:calc(100vw - 24px);
     grid-template-columns:repeat(6,178px);
     gap:6px;
   }
 
   .home-l2-top-ad{
     width:178px;
   }
 }
 
 @media (min-width:1720px){
   .home-l2-content-row{
     grid-template-columns:
       300px
       120px
       minmax(0,1000px)
       120px
       300px;
     gap:10px;
     max-width:1880px;
   }
 }
@media (max-width:1220px){.home-l2-content-row{grid-template-columns:120px minmax(0,1fr) 120px}.home-l2-side-banner{display:none}}
@media (max-width:980px){.home-l2-content-row{grid-template-columns:1fr}.home-l2-inner-ad{display:none}.home-l2-panels{gap:12px}}
@media (max-width:820px){.home-l2-top-adbar{grid-template-columns:1fr 1fr;width:100%}.home-l2-top-ad--featured{grid-column:1/-1}.home-l2-diamond-grid,.home-l2-panels{grid-template-columns:1fr}}
@media (max-width:560px){.home-l2-shell{padding:10px 8px 24px}.home-l2-top-adbar{grid-template-columns:1fr}.home-l2-top-ad--featured{grid-column:auto}.home-l2-top-ad{min-height:68px}.home-l2-panel-head{min-height:49px;padding:12px}.home-l2-panel-head h2{font-size:15px}.home-l2-servers .server-link{min-height:35px;padding:5px 7px}.home-l2-servers .server-rate{display:none}}

/* =========================================================
   LIGHT THEME
   Dark remains the default theme.
   Toggled by script.js via body.light.
   ========================================================= */

body.light{
  --bg:#f3f5f8;
  --panel-bg:#ffffff;
  --muted:#dfe4ea;
  --text:#20242b;
  background:#f3f5f8;
  color:#20242b;
}

body.light .site-header{
  background:#ffffff;
  border-bottom:1px solid #dfe3e8;
  box-shadow:0 2px 14px rgba(31,43,61,.06);
}

body.light .main-nav a,
body.light .auth,
body.light .header-right .langs{
  color:#4b5563;
}

body.light .main-nav a:hover,
body.light .auth:hover{
  color:#b87900;
}

body.light .main-nav-search__input{
  background:#ffffff;
  border-color:#d9dfe7;
  color:#1f2937;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.03);
}
body.light .main-nav-search__input::placeholder{color:#9aa3b2}
body.light .main-nav-search__input:focus{
  border-color:rgba(212,146,15,.55);
  box-shadow:0 0 0 4px rgba(212,146,15,.10);
  background:#fff;
}

body.light .theme-toggle{
  background:#ffffff;
  color:#374151;
  border:1px solid #d8dee6;
  box-shadow:0 2px 8px rgba(15,23,42,.06);
}
body.light .theme-toggle:hover{
  color:#9a6700;
  border-color:#d6aa50;
}

body.light .home-footer,
body.light .site-footer{
  color:#7b8794;
  border-color:#e3e7ec;
}

/* INDEX */
body.light.home-page{
  background:
    radial-gradient(circle at 8% 8%, rgba(245,191,65,.08), transparent 22%),
    radial-gradient(circle at 92% 8%, rgba(89,122,169,.08), transparent 22%),
    linear-gradient(180deg,#f6f8fb 0%,#edf1f5 100%);
  color:#20242b;
}

body.light.home-page .home-l2-page{
  background:transparent;
}

body.light.home-page .home-l2-panel{
  background:#fff;
  border-color:#dfe4ea;
  box-shadow:0 10px 28px rgba(31,43,61,.08);
}

body.light.home-page .home-l2-panel-head{
  background:#fff;
  border-bottom-color:#e4e8ed;
}

body.light.home-page .home-l2-panel-head h2{
  color:#20242b;
}
body.light.home-page .home-l2-panel-head a{
  color:#7b8794;
}
body.light.home-page .home-l2-panel-head a:hover{
  color:#9a6700;
}

body.light.home-page .home-l2-servers .server-link{
  color:#3f4650;
  background:#fff;
  border-color:#e1e5eb;
  box-shadow:none;
}
body.light.home-page .home-l2-servers .server-link:hover{
  background:#f8fafc;
  border-color:#d6dce4;
}

body.light.home-page .home-l2-servers .server-name{
  color:#27313d;
}
body.light.home-page .home-l2-servers .server-rank{
  color:#7a8693;
}
body.light.home-page .home-l2-servers .server-rate{
  color:#64748b;
}
body.light.home-page .home-l2-servers .server-votes{
  color:#b77900;
}

body.light.home-page .home-l2-servers .server-link--empty{
  background:#fbfcfd;
  border-color:#dfe4ea;
}
body.light.home-page .home-l2-servers .server-name--empty{
  color:#7f8a96;
}
body.light.home-page .home-l2-servers .server-rate--empty{
  color:#a0a8b2;
}

body.light.home-page .home-l2-diamond{
  box-shadow:0 4px 12px rgba(31,43,61,.08);
  border-color:#d3d9e0;
}

body.light.home-page .home-l2-side-banner,
body.light.home-page .home-l2-inner-ad__link{
  box-shadow:0 10px 26px rgba(31,43,61,.10);
}

body.light.home-page .home-l2-side-banner{
  border-color:#ccd4dd;
}

body.light.home-page .home-l2-top-ad--featured{
  box-shadow:0 6px 18px rgba(31,43,61,.10);
}

/* LISTING */
body.light.listing-page{
  background:
    radial-gradient(circle at top, rgba(242,188,54,.07), transparent 34%),
    linear-gradient(180deg,#f6f8fb 0%,#eef1f5 100%);
  color:#20242b;
}
body.light.listing-page .listing-shell{
  color:#20242b;
}
body.light.listing-page .listing-kicker{
  color:#8b6a1f;
}
body.light.listing-page .listing-hero h1{
  color:#1f2937;
}
body.light.listing-page .listing-hero p{
  color:#687383;
}
body.light.listing-page .listing-stat{
  background:#fff;
  border-color:#dfe4ea;
  box-shadow:0 10px 26px rgba(31,43,61,.07);
  color:#27313d;
}
body.light.listing-page .listing-stat-value{color:#1f2937}
body.light.listing-page .listing-stat-label{color:#8a96a5}
body.light.listing-page .listing-tab{
  background:#fff;
  border-color:#dfe4ea;
  color:#667281;
}
body.light.listing-page .listing-tab:hover{
  color:#7b5300;
  border-color:#d4b15d;
}
body.light.listing-page .listing-tab.is-active{
  color:#3b2a05;
  box-shadow:0 10px 24px rgba(208,148,18,.17);
}
body.light.listing-page .featured-banner{
  background:
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.45),transparent 28%),
    linear-gradient(180deg,#fffaf0,#f2f0f4);
  border-color:#dfe4ea;
  box-shadow:0 12px 30px rgba(31,43,61,.08);
  color:#27313d;
}
body.light.listing-page .featured-banner-copy{color:#667281}
body.light.listing-page .listing-card{
  background:#fff;
  border-color:#dfe4ea;
  box-shadow:0 16px 40px rgba(31,43,61,.08);
}
body.light.listing-page .listing-card-head{
  border-color:#e5e9ee;
}
body.light.listing-page .listing-card-head h2{color:#1f2937}
body.light.listing-page .listing-card-head p{color:#728091}
body.light.listing-page .listing-card-badge{
  background:#f8fafc;
  border-color:#dfe4ea;
  color:#667281;
}
body.light.listing-page .listing-row{
  background:linear-gradient(180deg,#fff,#f9fafb);
  border-color:#e0e5eb;
  box-shadow:0 8px 20px rgba(31,43,61,.05);
}
body.light.listing-page .listing-rank{
  color:#4b5563;
  border-color:#e5e9ee;
}
body.light.listing-page .listing-info,
body.light.listing-page .listing-center,
body.light.listing-page .listing-rate,
body.light.listing-page .listing-votes{
  border-color:#e5e9ee;
}
body.light.listing-page .listing-name{color:#27313d}
body.light.listing-page .listing-name:hover{color:#a06f00}
body.light.listing-page .listing-description{color:#657181}
body.light.listing-page .listing-pill{
  background:#f5f7fa;
  border-color:#dfe4ea;
  color:#667281;
}
body.light.listing-page .listing-pill--muted{color:#8a95a2}
body.light.listing-page .listing-center{color:#596675}
body.light.listing-page .listing-rate{color:#2f3a46}
body.light.listing-page .listing-votes .votes-label{color:#8a95a2}
body.light.listing-page .listing-footer{
  border-color:#e5e9ee;
}
body.light.listing-page .listing-footer-note{color:#7b8794}
body.light.listing-page .vote-button{
  background:#f6f8fa;
  border-color:#dfe4ea;
  color:#596675;
}
body.light.listing-page .vote-button:hover{
  color:#7b5300;
  border-color:#d4b15d;
  background:#fff8e8;
}
body.light.listing-page .listing-table thead th{color:#8490a0}
body.light.listing-page .listing-table tbody td{
  background:#fff;
  border-color:#e1e6eb;
}
body.light.listing-page .listing-table tbody tr:hover td{
  background:#fafbfd;
}

/* SERVER / ADD SERVER */
body.light.server-page{
  background:#f4f6f9;
  color:#20242b;
}
body.light.server-page .top-banners{
  background:transparent;
}
body.light.server-page .server-card{
  background:#fff;
  color:#26313d;
  box-shadow:0 16px 42px rgba(31,43,61,.09);
  border:1px solid #dfe4ea;
}
body.light.server-page .info-box,
body.light.server-page .feature,
body.light.server-page .description{
  background:#f8fafc;
  color:#364152;
  border:1px solid #e3e8ed;
}
body.light.server-page .server-title{color:#20242b}
body.light.server-page .server-info label,
body.light.server-page .features,
body.light.server-page .description{
  color:#596675;
}
body.light.server-page .form-group input,
body.light.server-page .form-group textarea,
body.light.server-page .form-group select{
  background:#fff;
  color:#27313d;
  border-color:#d8dee6;
}
body.light.server-page .section-title,
body.light.server-page .add-title{
  color:#27313d;
}
body.light.server-page .auth-cta{
  background:#fff;
  border-color:#dfe4ea;
}
body.light.server-page .server-link{
  color:#34404d;
}

/* VOTE */
body.light.vote-page{
  background:#f4f6f9;
  color:#20242b;
}
body.light.vote-page .vote-card{
  background:#fff;
  border-color:#dfe4ea;
  box-shadow:0 16px 42px rgba(31,43,61,.09);
}
body.light.vote-page .vote-title{color:#20242b}
body.light.vote-page .vote-note{color:#34404d}
body.light.vote-page .vote-countdown{color:#475569}

/* ACCOUNT / ADMIN pages using style.css */
body.light:not(.home-page):not(.listing-page):not(.server-page):not(.vote-page) .main-container{
  color:#26313d;
}
body.light:not(.home-page):not(.listing-page):not(.server-page):not(.vote-page) .panel{
  background:#fff;
  border-color:#dfe4ea;
  box-shadow:0 10px 28px rgba(31,43,61,.07);
}
body.light:not(.home-page):not(.listing-page):not(.server-page):not(.vote-page) .panel h4{
  background:#f7f9fb;
  color:#374151;
  border-color:#e2e7ec;
}
body.light:not(.home-page):not(.listing-page):not(.server-page):not(.vote-page) .server-link{
  background:#fff;
  color:#34404d;
  box-shadow:inset 0 -1px 0 #edf0f3;
}
body.light:not(.home-page):not(.listing-page):not(.server-page):not(.vote-page) .server-name{
  color:#34404d;
}
body.light:not(.home-page):not(.listing-page):not(.server-page):not(.vote-page) .server-link:hover{
  background:#f8fafc;
}

/* FLOATING TOGGLE FOR ADMIN EDIT */
.theme-toggle--floating{
  position:fixed;
  top:16px;
  right:18px;
  z-index:100;
}

/* AUTH PAGES are themed in account/auth.css */


/* INDEX — DARK THEME (default) */
body.dark.home-page{
  background:
    radial-gradient(circle at 8% 10%, rgba(108,53,25,.18), transparent 24%),
    radial-gradient(circle at 92% 8%, rgba(83,47,126,.18), transparent 26%),
    linear-gradient(180deg,#0b0712 0%,#090611 58%,#07050c 100%);
  color:#eeeaf4;
}
body.dark.home-page .home-l2-page{background:transparent}
body.dark.home-page .home-l2-panel{
  background:linear-gradient(180deg,#171023,#100a18);
  border-color:rgba(255,255,255,.07);
  box-shadow:0 12px 30px rgba(0,0,0,.30);
}
body.dark.home-page .home-l2-panel-head{
  background:linear-gradient(180deg,#1a1227,#140d1f);
  border-bottom-color:rgba(255,255,255,.07);
}
body.dark.home-page .home-l2-panel-head h2{color:#f4effa}
body.dark.home-page .home-l2-panel-head a{color:#9f94b2}
body.dark.home-page .home-l2-panel-head a:hover{color:#f7b51d}
body.dark.home-page .home-l2-servers .server-link{
  border-color:rgba(255,255,255,.04);
}
body.dark.home-page .home-l2-servers .server-link--empty{
  color:#9e96a8;
  border-color:rgba(180,165,210,.16);
  background:rgba(255,255,255,.025)!important;
}
body.dark.home-page .home-l2-servers .server-link--empty .server-name{color:#a8a0b1}
body.dark.home-page .home-l2-servers .server-rate--empty{
  color:#857c8f;
  background:rgba(255,255,255,.05);
}

/* dark versions of the colored ranking rows */
body.dark.home-page .home-l2-servers .server-item:nth-child(1) .server-link{background:#08783d}
body.dark.home-page .home-l2-servers .server-item:nth-child(2) .server-link{background:#203a78}
body.dark.home-page .home-l2-servers .server-item:nth-child(3) .server-link{background:#7b0714}
body.dark.home-page .home-l2-servers .server-item:nth-child(n+4):nth-child(-n+6) .server-link{background:#0b7187}
body.dark.home-page .home-l2-servers .server-item:nth-child(n+7) .server-link{background:#1d334f;color:#dcecff}
body.dark.home-page .home-l2-servers .server-item:nth-child(odd):nth-child(n+7) .server-link{background:#4e4620;color:#fff2b5}

body.dark.home-page .home-l2-servers--premium .server-item:nth-child(1) .server-link{background:#08783d}
body.dark.home-page .home-l2-servers--premium .server-item:nth-child(2) .server-link{background:#7b0714}
body.dark.home-page .home-l2-servers--premium .server-item:nth-child(3) .server-link{background:#203a78}
body.dark.home-page .home-l2-servers--premium .server-item:nth-child(n+4) .server-link{background:#4e4620;color:#fff2b5}
body.dark.home-page .home-l2-servers--premium .server-item:nth-child(4n+4) .server-link{background:#173c50}

body.dark.home-page .home-l2-servers--top .server-item:nth-child(1) .server-link{background:#08783d}
body.dark.home-page .home-l2-servers--top .server-item:nth-child(2) .server-link{background:#7b0714}
body.dark.home-page .home-l2-servers--top .server-item:nth-child(3) .server-link{background:#203a78}
body.dark.home-page .home-l2-servers--top .server-item:nth-child(n+4) .server-link{background:#1d334f;color:#dcecff}
body.dark.home-page .home-l2-servers--top .server-item:nth-child(5) .server-link,
body.dark.home-page .home-l2-servers--top .server-item:nth-child(7) .server-link{background:#4e4620;color:#fff2b5}

body.dark.home-page .home-l2-servers--coming .server-item:nth-child(-n+3) .server-link{background:#08783d}
body.dark.home-page .home-l2-servers--coming .server-item:nth-child(n+4) .server-link{background:#1d334f;color:#dcecff}
body.dark.home-page .home-l2-servers .server-name{color:inherit}

body.dark.home-page .home-l2-servers .server-rate{
  background:rgba(255,255,255,.16);
}
body.dark.home-page .home-l2-servers .server-votes{
  background:#f0df9b;
  color:#6d5200;
}
body.dark.home-page .home-l2-diamond{
  box-shadow:0 5px 16px rgba(0,0,0,.30);
}
body.dark.home-page .home-footer{
  background:#0c0912;
  border-top-color:rgba(255,255,255,.05);
  color:#7f7691;
}

/* =========================================================
   INDEX DARK THEME — FINAL OVERRIDE
   The Index has its own legacy light base styles, so force
   the existing L2 dark-purple theme when dark mode is active.
   ========================================================= */

body.dark.home-page{
  background:
    radial-gradient(circle at 8% 8%, rgba(108,53,25,.18), transparent 24%),
    radial-gradient(circle at 92% 8%, rgba(83,47,126,.18), transparent 26%),
    linear-gradient(180deg,#0b0712 0%,#090611 58%,#07050c 100%) !important;
  color:#eeeaf4 !important;
}

body.dark.home-page .home-l2-page{
  background:transparent !important;
  color:#eeeaf4 !important;
}

body.dark.home-page .home-l2-panel{
  background:linear-gradient(180deg,#171023,#100a18) !important;
  border-color:rgba(255,255,255,.07) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.30) !important;
}

body.dark.home-page .home-l2-panel-head{
  background:linear-gradient(180deg,#1a1227,#140d1f) !important;
  border-bottom-color:rgba(255,255,255,.07) !important;
}

body.dark.home-page .home-l2-panel-head h2{
  color:#f4effa !important;
}

body.dark.home-page .home-l2-panel-head a{
  color:#9f94b2 !important;
}

body.dark.home-page .home-l2-panel-head a:hover{
  color:#f7b51d !important;
}

body.dark.home-page .home-l2-servers .server-link{
  color:#eeeaf4;
  border-color:rgba(255,255,255,.04) !important;
}

body.dark.home-page .home-l2-servers .server-link--empty{
  color:#9e96a8 !important;
  border-color:rgba(180,165,210,.16) !important;
  background:rgba(255,255,255,.025) !important;
}

body.dark.home-page .home-l2-servers .server-name{
  color:inherit !important;
}

body.dark.home-page .home-l2-servers .server-name--empty{
  color:#a8a0b1 !important;
}

body.dark.home-page .home-l2-servers .server-rate--empty{
  color:#857c8f !important;
  background:rgba(255,255,255,.05) !important;
}

body.dark.home-page .home-l2-diamond{
  box-shadow:0 5px 16px rgba(0,0,0,.30) !important;
}

body.dark.home-page .home-l2-inner-ad__link{
  box-shadow:0 7px 24px rgba(120,83,8,.22);
}

body.dark.home-page .home-footer{
  background:#0c0912 !important;
  border-top-color:rgba(255,255,255,.05) !important;
  color:#7f7691 !important;
}

/* =========================================================
   GLOBAL HEADER — FINAL CONSISTENT MENU
   ========================================================= */
.header-inner{
  max-width:1400px;
  width:100%;
}

.main-nav{
  gap:14px;
}

.main-nav-search{
  margin-left:4px;
}

.header-right{
  margin-left:auto;
  gap:10px;
}

.header-advertising{
  color:#444;
  text-decoration:none;
  font-size:14px;
  padding:4px 6px;
  white-space:nowrap;
}

.header-advertising:hover{
  color:#2a7de1;
}

.admin-label{
  color:inherit;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

body.dark .header-advertising{
  color:#ddd;
}

body.dark .header-advertising:hover{
  color:#fff;
}

@media (max-width:1450px){
  .main-nav{ gap:10px; }
  .main-nav a{ font-size:13px; padding:4px 4px; }
  .main-nav-search__input{ width:190px; }
  .main-nav-search__input:focus{ width:220px; }
}

@media (max-width:1180px){
  .header-inner{ padding-left:12px; padding-right:12px; }
  .main-nav{ gap:7px; }
  .main-nav a{ font-size:12px; padding:4px 3px; }
  .main-nav-search__input{ width:160px; }
  .main-nav-search__input:focus{ width:180px; }
  .header-advertising,.auth{ font-size:12px; }
}

/* =========================================================
   ADD SERVER — STYLE AD LAYOUT
   Reuses the same CSS-only advertising system as Index.
   The form itself remains untouched.
   ========================================================= */

.server-page .home-l2-top-adbar{
  width:1098px;
  max-width:calc(100vw - 24px);
  margin:14px auto;
  display:grid;
  grid-template-columns:repeat(6,178px);
  gap:6px;
}

.server-page .page-layout{
  display:grid;
  grid-template-columns:
    clamp(220px,17vw,300px)
    minmax(520px,1000px)
    clamp(220px,17vw,300px);
  gap:10px;
  align-items:start;
  justify-content:center;
  width:100%;
  max-width:1880px;
  margin:0 auto;
  padding:0 10px 40px;
}

.server-page .side-space{
  position:relative;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  width:100%;
  height:auto;
  min-height:0;
  display:block;
  overflow:visible;
  pointer-events:auto;
  z-index:1;
}

.server-page .main-container{
  width:100%;
  max-width:none;
  padding:0;
  margin:0;
  position:relative;
  z-index:2;
}

.server-page .inner-grid{
  display:grid;
  grid-template-columns:120px minmax(0,1fr) 120px;
  gap:10px;
  align-items:start;
  width:100%;
}

.server-page .col-inner-left,
.server-page .col-inner-right{
  width:120px;
  position:relative;
  top:auto;
  height:auto;
}

.server-page .col-inner-left .home-l2-inner-ad__link,
.server-page .col-inner-right .home-l2-inner-ad__link{
  position:sticky;
  top:72px;
  width:120px;
  min-height:600px;
}

.server-page .home-l2-side-banner{
  width:100%;
  aspect-ratio:428 / 1000;
  height:auto;
  min-height:0;
  max-height:none;
  position:sticky;
  top:74px;
}

.server-page .col-center{
  min-width:0;
}

.server-page .col-center .server-card{
  width:100%;
  max-width:none;
  margin:0;
}

@media (min-width:1720px){
  .server-page .page-layout{
    grid-template-columns:300px minmax(0,1000px) 300px;
    max-width:1880px;
  }
}

@media (max-width:1400px){
  .server-page .page-layout{
    grid-template-columns:220px minmax(0,1fr) 220px;
  }
}

@media (max-width:1100px){
  .server-page .page-layout{
    grid-template-columns:minmax(0,1fr);
  }

  .server-page .side-space{
    display:none;
  }

  .server-page .inner-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .server-page .col-inner-left,
  .server-page .col-inner-right{
    display:none;
  }
}

@media (max-width:820px){
  .server-page .home-l2-top-adbar{
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  .server-page .home-l2-top-ad{
    width:auto;
  }

  .server-page .home-l2-top-ad--featured{
    grid-column:1 / -1;
  }
}

@media (max-width:560px){
  .server-page .home-l2-top-adbar{
    grid-template-columns:1fr;
  }

  .server-page .home-l2-top-ad--featured{
    grid-column:auto;
  }
}

/* Advertising system */
.l2-ad-paid{position:relative;display:block;overflow:hidden;text-decoration:none;background:#0f1622;border:1px solid rgba(255,255,255,.08);width:100%;min-height:40px;}
.l2-ad-paid img{display:block;width:100%;height:100%;object-fit:cover;}
.l2-ad-paid:hover{filter:brightness(1.06);}
.l2-ad-paid--top_featured,.l2-ad-paid--top_small_1,.l2-ad-paid--top_small_2,.l2-ad-paid--top_small_3,.l2-ad-paid--top_small_4,.l2-ad-paid--top_small_5{width:178px;height:78px;border-radius:8px;}
.l2-ad-paid--side_left,.l2-ad-paid--side_right{width:100%;height:auto;aspect-ratio:428/1000;border-radius:10px;}
.l2-ad-paid--inner_left,.l2-ad-paid--inner_right{width:120px;height:600px;border-radius:8px;}
.l2-ad-paid--list_1,
.l2-ad-paid--list_2,
.l2-ad-paid--list_3,
.l2-ad-paid--list_4{
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:330 / 240;
  border-radius:24px;
  overflow:hidden;
}

.l2-ad-paid--list_1 img,
.l2-ad-paid--list_2 img,
.l2-ad-paid--list_3 img,
.l2-ad-paid--list_4 img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover;
  object-position:center;
}

.advertising-balance{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;margin:16px 0;border-radius:10px;background:linear-gradient(180deg,#1b1325,#120d1a);border:1px solid rgba(255,255,255,.06);color:#d7d0e3;}
.advertising-balance strong{color:#f6c44b;font-size:20px;}
.advertising-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.advertising-option{padding:16px;border-radius:10px;background:#15101f;border:1px solid rgba(255,255,255,.06);color:#eee;}
.advertising-option h3{margin:0 0 8px;font-size:15px;}
.advertising-option-status{font-size:12px;color:#8f86aa;}
.advertising-alert{padding:12px 14px;border-radius:8px;margin:14px 0;font-weight:700;}
.advertising-alert--error{color:#ffb4b4;background:rgba(170,30,30,.15);border:1px solid rgba(255,80,80,.2);}
.advertising-alert--success{color:#a8efb4;background:rgba(30,150,70,.12);border:1px solid rgba(80,220,100,.2);}
body.light .advertising-option{background:#fff;border-color:#dce2ea;color:#222;}
body.light .advertising-balance{background:#fff;color:#333;border-color:#dce2ea;}
@media(max-width:900px){.advertising-grid{grid-template-columns:1fr 1fr;}}
/* Banner placement IDs */
.l2-ad-slot-id{
  position:absolute;
  top:8px;
  left:9px;
  z-index:20;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:20px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(7,6,12,.82);
  border:1px solid rgba(255,193,7,.38);
  color:#ffd34d;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  box-shadow:0 4px 12px rgba(0,0,0,.22);
  pointer-events:none;
}

.home-l2-top-ad--gold .l2-ad-slot-id{
  top:7px;
  left:8px;
  background:rgba(38,23,5,.72);
  color:#fff3bf;
  border-color:rgba(255,255,255,.22);
}

.home-l2-top-ad--featured .l2-ad-slot-id{
  top:7px;
  left:8px;
}

.home-l2-side-banner .l2-ad-slot-id{
  top:14px;
  left:14px;
  min-width:34px;
  height:22px;
  font-size:10px;
}

.home-l2-inner-ad__link .l2-ad-slot-id{
  top:10px;
  left:50%;
  transform:translateX(-50%);
  min-width:34px;
  height:22px;
  color:#2a1b05;
  background:rgba(255,232,158,.92);
  border-color:rgba(90,57,0,.30);
  box-shadow:none;
}

.featured-banner .l2-ad-slot-id{
  top:12px;
  left:12px;
  min-width:36px;
  height:22px;
  font-size:10px;
}

.l2-ad-paid .l2-ad-slot-id{
  z-index:30;
}

.advertising-slot-help{
  margin:10px 0 4px;
  color:#8f86aa;
  font-size:12px;
  line-height:1.5;
}

.advertising-slot-help strong{
  color:#f6c44b;
}

/* =========================================================
   ADD SERVER - PAID AD PLACEMENTS
   Paid inner ads must fully occupy the 120x600 slot.
   ========================================================= */

.server-page .col-inner-left .l2-ad-paid--inner_left,
.server-page .col-inner-right .l2-ad-paid--inner_right{
  width:120px !important;
  height:600px !important;
  min-width:120px !important;
  min-height:600px !important;
  max-width:120px !important;
  max-height:600px !important;
  display:block;
  position:relative;
  top:0;
  margin:0;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-sizing:border-box;
  overflow:hidden;
  background:transparent !important;
  flex:none !important;
}

.server-page .col-inner-left .l2-ad-paid--inner_left::before,
.server-page .col-inner-right .l2-ad-paid--inner_right::before{
  display:none !important;
  content:none !important;
}

.server-page .col-inner-left .l2-ad-paid--inner_left img,
.server-page .col-inner-right .l2-ad-paid--inner_right img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:120px !important;
  height:600px !important;
  min-width:120px !important;
  min-height:600px !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:fill;
  object-position:center center;
  margin:0;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-sizing:border-box;
}

.server-page .side-space.left-space .l2-ad-paid--side_left,
.server-page .side-space.right-space .l2-ad-paid--side_right{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:428 / 1000;
  position:relative;
  top:0;
  margin:0;
  padding:0;
}

.server-page .side-space.left-space .l2-ad-paid--side_left img,
.server-page .side-space.right-space .l2-ad-paid--side_right img{
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  object-fit:cover;
}

/* =========================================================
   PAID AD PLACEMENTS — FINAL NORMALIZED SIZING
   Paid banners use only the advertising-system classes so
   placeholder styling cannot alter an uploaded campaign.
   ========================================================= */

.l2-ad-paid--top_featured,
.l2-ad-paid--top_small_1,
.l2-ad-paid--top_small_2,
.l2-ad-paid--top_small_3,
.l2-ad-paid--top_small_4,
.l2-ad-paid--top_small_5{
  width:178px !important;
  height:78px !important;
  min-width:178px !important;
  min-height:78px !important;
  max-width:178px !important;
  max-height:78px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:8px;
  box-sizing:border-box;
  position:relative;
  display:block;
}

.l2-ad-paid--side_left,
.l2-ad-paid--side_right{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:428 / 1000;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box;
  position:relative;
  display:block;
}

.l2-ad-paid--inner_left,
.l2-ad-paid--inner_right{
  width:120px !important;
  height:600px !important;
  min-width:120px !important;
  min-height:600px !important;
  max-width:120px !important;
  max-height:600px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:8px;
  box-sizing:border-box;
  position:relative !important;
  top:auto !important;
  display:block !important;
  overflow:hidden;
}

.l2-ad-paid--list_1,
.l2-ad-paid--list_2,
.l2-ad-paid--list_3,
.l2-ad-paid--list_4{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:330 / 240 !important;
  overflow:hidden;
}

.l2-ad-paid > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:cover;
  object-position:center center;
}

.home-l2-content-row > .home-l2-inner-ad > .l2-ad-paid--inner_left,
.home-l2-content-row > .home-l2-inner-ad > .l2-ad-paid--inner_right{
  position:relative !important;
  top:auto !important;
  width:120px !important;
  height:600px !important;
  min-height:600px !important;
}

.home-l2-content-row > .home-l2-inner-ad > .l2-ad-paid--inner_left::before,
.home-l2-content-row > .home-l2-inner-ad > .l2-ad-paid--inner_right::before,
.server-page .col-inner-left .l2-ad-paid--inner_left::before,
.server-page .col-inner-right .l2-ad-paid--inner_right::before{
  display:none !important;
  content:none !important;
}

/* =========================================================
   ACCOUNT PANEL REDESIGN
   Moved from account/panel.php
   ========================================================= */

.account-page {
    min-height: calc(100vh - 70px);
    padding: 34px 18px 70px;
}

.account-shell {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 24px;
}

.account-header-copy h1 {
    margin: 0;
    color: #f4efff;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.account-header-copy p {
    margin: 8px 0 0;
    color: #9589ad;
    font-size: 14px;
}

.account-header-user {
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
    color: #d8cfee;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.account-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.account-stat {
    background:
        linear-gradient(
            180deg,
            rgba(24,16,39,.96),
            rgba(15,10,25,.96)
        );
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 16px 36px rgba(0,0,0,.20);
}

.account-stat-label {
    color: #84799d;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 9px;
}

.account-stat-value {
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.account-stat--coins .account-stat-value {
    color: #f7c84d;
}

.account-card {
    background:
        linear-gradient(
            180deg,
            rgba(20,13,32,.97),
            rgba(13,9,22,.97)
        );
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0,0,0,.20);
    overflow: hidden;
    margin-bottom: 18px;
}

.account-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.account-card-head h2 {
    margin: 0;
    color: #f0ebfa;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.02em;
}

.account-card-head span {
    color: #7e7396;
    font-size: 12px;
}

/* COUPON */
.coupon-body {
    padding: 16px 18px 18px;
}

.coupon-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.coupon-form input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.08);
    background: #0d0e14;
    color: #fff;
    outline: none;
}

.coupon-form input:focus {
    border-color: rgba(249,155,7,.35);
    box-shadow: 0 0 0 3px rgba(249,155,7,.08);
}

.coupon-form button {
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(180deg,#55c45c,#46ae4d);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.coupon-message {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
}

.coupon-message.success {
    color: #8ce39a;
}

.coupon-message.error {
    color: #ff8f8f;
}

/* SERVERS */
.account-servers {
    padding: 10px 12px 12px;
}

.account-server-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 14px;
    border-radius: 13px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    margin-bottom: 8px;
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.account-server-row:last-child {
    margin-bottom: 0;
}

.account-server-row:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.04);
    border-color: rgba(249,155,7,.15);
}

.account-server-main {
    min-width: 0;
}

.account-server-name {
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-server-id {
    color: #756b89;
    font-size: 12px;
}

.account-server-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.account-status {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.account-status.active {
    color: #52d76a;
}

.account-status.inactive {
    color: #f06d6d;
}

.account-votes {
    color: #f7c84d;
    font-size: 12px;
    font-weight: 900;
    margin-right: 4px;
}

.account-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 36px;
    padding: 0 13px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    transition: .18s ease;
}

.account-action-view {
    background: linear-gradient(180deg,#facc15,#f59e0b);
    color: #17100a;
}

.account-action-edit {
    background: linear-gradient(180deg,#55c45c,#46ae4d);
    color: #fff;
}

.account-action:hover {
    transform: translateY(-1px);
}

.account-empty {
    padding: 24px;
    text-align: center;
    color: #8d829f;
    font-size: 13px;
}

.account-empty a {
    display: inline-flex;
    margin-top: 12px;
}

@media (max-width: 900px) {
    .account-stats {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 650px) {
    .account-page {
        padding: 24px 12px 50px;
    }

    .account-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .account-header-copy h1 {
        font-size: 28px;
    }

    .account-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .account-stat {
        padding: 14px;
    }

    .account-stat-value {
        font-size: 21px;
    }

    .coupon-form {
        grid-template-columns: 1fr;
    }

    .coupon-form button {
        width: 100%;
    }

    .account-server-row {
        grid-template-columns: 1fr;
    }

    .account-server-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 440px) {
    .account-stats {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ADD SERVER PAGE
   Dark / Purple / Gold redesign
   ========================================================= */

.server-page .main-container{
    margin-top:20px;
}

.server-page .col-center{
    min-width:0;
}

.server-page .server-card{
    max-width:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    background:
        linear-gradient(
            180deg,
            rgba(20,13,32,.98),
            rgba(13,9,22,.98)
        );
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    box-shadow:0 24px 55px rgba(0,0,0,.28);
}

.server-page .add-title{
    margin:0;
    padding:22px 24px 18px;
    color:#f4efff;
    font-size:28px;
    font-weight:900;
    letter-spacing:-.03em;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.server-page .add-server-form{
    padding:22px 24px 24px;
}

.server-page .form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-bottom:22px;
}

.server-page .form-group{
    min-width:0;
}

.server-page .form-group.full{
    grid-column:1 / -1;
}

.server-page .form-group label{
    display:block;
    margin-bottom:7px;
    color:#b8aec9;
    font-size:12px;
    font-weight:800;
}

.server-page .form-group input,
.server-page .form-group textarea,
.server-page .form-group select{
    width:100%;
    box-sizing:border-box;
    color:#fff;
    background:#0d0e14;
    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;
    outline:none;
    font:inherit;
    font-size:13px;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.server-page .form-group input,
.server-page .form-group select{
    height:44px;
    padding:0 13px;
}

.server-page .form-group textarea{
    min-height:120px;
    padding:12px 13px;
    resize:vertical;
    line-height:1.5;
}

.server-page .form-group input:focus,
.server-page .form-group textarea:focus,
.server-page .form-group select:focus{
    border-color:rgba(246,196,75,.38);
    box-shadow:0 0 0 3px rgba(246,196,75,.07);
    background:#101118;
}

/* Section titles */
.server-page .section-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin:4px 0 14px;
    padding:12px 14px;
    border-radius:11px;
    background:
        linear-gradient(
            90deg,
            rgba(246,196,75,.09),
            rgba(246,196,75,.025)
        );
    border:1px solid rgba(246,196,75,.10);
    color:#f0ebfa;
    font-size:14px;
    font-weight:900;
    letter-spacing:.01em;
}

.server-page .section-title::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#f6c44b;
    box-shadow:0 0 12px rgba(246,196,75,.45);
    flex:0 0 auto;
}

/* Login CTA */
.server-page .auth-cta{
    margin:18px 24px 0 !important;
    padding:18px;
    border-radius:14px;
    background:
        linear-gradient(
            135deg,
            rgba(77,57,116,.24),
            rgba(18,12,28,.95)
        );
    border:1px solid rgba(255,255,255,.06);
}

.server-page .auth-cta h3{
    margin:0 0 5px;
    color:#fff;
    font-size:17px;
    font-weight:900;
}

.server-page .auth-cta p{
    margin:0;
    color:#9589ad;
    font-size:13px;
    line-height:1.5;
}

.server-page .auth-cta-actions{
    display:flex;
    gap:10px;
    margin-top:14px;
    flex-wrap:wrap;
}

.server-page .auth-cta .submit-server{
    min-width:110px;
}

.server-page .auth-cta .submit-server.secondary{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.07);
    color:#ddd5ea;
}

/* Success */
.server-page .addserver-success{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
    padding:13px 15px;
    border-radius:12px;
    background:rgba(40,180,75,.10);
    border:1px solid rgba(80,220,100,.17);
}

.server-page .addserver-success__text{
    color:#8ce39a;
    font-size:13px;
    font-weight:800;
}

.server-page .addserver-success__link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 12px;
    border-radius:9px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    transition:.18s ease;
    white-space:nowrap;
}

.server-page .addserver-success__link:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.08);
}

/* Features */
.server-page .features-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:22px;
}

.server-page .features-grid label{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:42px;
    padding:0 12px;
    border-radius:10px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.05);
    color:#c3b9d0;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:.18s ease;
}

.server-page .features-grid label:hover{
    border-color:rgba(246,196,75,.16);
    background:rgba(246,196,75,.035);
}

.server-page .features-grid input{
    accent-color:#f6c44b;
    width:15px;
    height:15px;
    margin:0;
}

/* Submit */
.server-page .addserver-submit-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.05);
}

.server-page .addserver-submit-hint{
    color:#756b89;
    font-size:12px;
    line-height:1.45;
}

.server-page .submit-server.addserver-submit{
    min-width:175px;
    height:46px;
    border:0;
    border-radius:11px;
    background:linear-gradient(180deg,#f8cd53,#efab19);
    color:#1a1208;
    font-size:13px;
    font-weight:950;
    letter-spacing:.04em;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(246,196,75,.16);
    transition:.18s ease;
}

.server-page .submit-server.addserver-submit:hover{
    transform:translateY(-1px);
    filter:brightness(1.03);
}

/* Keep inner ads visually aligned */
.server-page .col-inner-left,
.server-page .col-inner-right{
    align-self:start;
}

.server-page .col-inner-left .l2-ad-paid,
.server-page .col-inner-right .l2-ad-paid{
    margin-top:0;
}

@media (max-width:1000px){
    .server-page .features-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:760px){
    .server-page .add-title{
        font-size:24px;
        padding:18px;
    }

    .server-page .add-server-form{
        padding:18px;
    }

    .server-page .form-grid{
        grid-template-columns:1fr;
    }

    .server-page .form-group.full{
        grid-column:auto;
    }

    .server-page .features-grid{
        grid-template-columns:1fr 1fr;
    }

    .server-page .addserver-submit-row{
        align-items:stretch;
        flex-direction:column;
    }

    .server-page .submit-server.addserver-submit{
        width:100%;
    }

    .server-page .addserver-success{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media (max-width:460px){
    .server-page .features-grid{
        grid-template-columns:1fr;
    }
}

/* Premium server controls */
.account-action-message{
  margin:0 0 18px;
  padding:13px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  font-weight:700;
}
.account-action-message.success{
  color:#bff7c8;
  background:rgba(55,185,92,.12);
  border-color:rgba(80,220,110,.22);
}
.account-action-message.error{
  color:#ffc0c0;
  background:rgba(185,45,45,.12);
  border-color:rgba(255,90,90,.22);
}
.account-premium-form{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.account-premium-form select{
  min-width:145px;
  height:38px;
  padding:0 11px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.08);
  background:#0e0a16;
  color:#f1edf6;
}
.account-premium-badge{
  display:inline-flex;
  align-items:center;
  padding:7px 9px;
  border-radius:999px;
  background:#f8b916;
  color:#17110a;
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
}
.account-premium-until{
  color:#c7bfd5;
  font-size:12px;
  white-space:nowrap;
}
.account-action-buy{
  background:linear-gradient(135deg,#f4bb1e,#ffcf38);
  color:#1a1204;
  font-weight:900;
}
.account-action-premium{
  background:#8b63ff;
  color:#fff;
  font-weight:900;
}
@media (max-width:900px){
  .account-premium-form{width:100%;}
  .account-premium-form select{flex:1 1 180px;}
}

/* =========================================================
   HOMEPAGE SPOTLIGHT
   ========================================================= */
.home-l2-spotlight-columns{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  column-gap:14px !important;
  row-gap:0 !important;
  margin-bottom:12px;
  align-items:start;
  width:100%;
}

.home-l2-spotlight-group{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
  min-width:0;
  width:100%;
}

.home-l2-spotlight-columns > .home-l2-spotlight-group > .home-l2-spotlight-card{
  width:100% !important;
  flex:0 0 auto !important;
  display:flex !important;
}

.home-l2-spotlight-card{
  position:relative;
  min-height:34px;
  height:34px;
  box-sizing:border-box;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border-radius:7px;
  text-decoration:none;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 12px rgba(0,0,0,.14);
  transition:transform .18s ease,filter .18s ease,border-color .18s ease;
}

.home-l2-spotlight-card:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  border-color:rgba(255,255,255,.16);
}

.home-l2-spotlight-card--empty{
  background:linear-gradient(135deg,#171122,#0f0b18);
  color:#fff;
  border-style:dashed;
}

.home-l2-spotlight-card--empty strong{
  flex:1;
  min-width:0;
  font-size:12px;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.home-l2-spotlight-card--empty small{
  margin-left:auto;
  color:#827793;
  font-size:8px;
  white-space:nowrap;
}

.home-l2-spotlight-card--active strong{
  flex:1;
  min-width:0;
  font-size:12px;
  line-height:1;
  font-weight:950;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.home-l2-spotlight-slot{
  flex:0 0 auto;
  min-width:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:18px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(0,0,0,.16);
  color:inherit;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.home-l2-spotlight-meta{
  flex:0 0 auto;
  color:inherit;
  font-size:8px;
  font-weight:800;
  opacity:.9;
  white-space:nowrap;
}

.home-l2-spotlight-card--active small{
  margin-left:auto;
  color:inherit;
  opacity:.74;
  font-size:8px;
  white-space:nowrap;
}

.spotlight-page{
  min-height:calc(100vh - 70px);
  padding:32px 18px 70px;
}

.spotlight-shell{
  width:100%;
  max-width:1080px;
  margin:0 auto;
}

.spotlight-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.spotlight-header h1{
  margin:0;
  color:#f4efff;
  font-size:34px;
  font-weight:900;
  letter-spacing:-.04em;
}

.spotlight-header p{
  margin:8px 0 0;
  color:#9589ad;
  font-size:14px;
}

.spotlight-balance{
  min-width:170px;
  padding:13px 15px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  text-align:right;
}

.spotlight-balance span{
  display:block;
  color:#827793;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.spotlight-balance strong{
  display:block;
  margin-top:4px;
  color:#f6c44b;
  font-size:20px;
}

.spotlight-alert{
  margin-bottom:16px;
  padding:13px 15px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
}

.spotlight-alert--success{
  background:rgba(40,180,75,.10);
  border:1px solid rgba(80,220,100,.17);
  color:#8ce39a;
}

.spotlight-alert--error{
  background:rgba(170,30,30,.12);
  border:1px solid rgba(255,80,80,.20);
  color:#ff9d9d;
}

.spotlight-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:16px;
}

.spotlight-card{
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(20,13,32,.98),rgba(13,9,22,.98));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 24px 50px rgba(0,0,0,.24);
}

.spotlight-card-head{
  padding:17px 18px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.spotlight-card-head h2{
  margin:0;
  color:#f0ebfa;
  font-size:16px;
  font-weight:900;
}

.spotlight-card-head p{
  margin:5px 0 0;
  color:#756b89;
  font-size:11px;
}

.spotlight-slots{
  padding:12px;
  display:grid;
  gap:8px;
}

.spotlight-slot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px;
  border-radius:11px;
  text-decoration:none;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  transition:.18s ease;
}

.spotlight-slot:hover,
.spotlight-slot.is-selected{
  transform:translateY(-1px);
  border-color:rgba(246,196,75,.28);
  background:rgba(246,196,75,.045);
}

.spotlight-slot.is-occupied{
  opacity:.62;
}

.spotlight-slot-title{
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.spotlight-slot-status{
  color:#84799d;
  font-size:10px;
  font-weight:800;
}

.spotlight-form{
  padding:18px;
}

.spotlight-occupied-message{
  margin-bottom:14px;
  padding:12px;
  border-radius:10px;
  background:rgba(249,180,42,.08);
  border:1px solid rgba(249,180,42,.13);
  color:#f6c44b;
  font-size:12px;
  font-weight:800;
}

.spotlight-field{
  display:block;
  margin-bottom:16px;
}

.spotlight-field > span{
  display:block;
  margin-bottom:7px;
  color:#b8aec9;
  font-size:12px;
  font-weight:800;
}

.spotlight-field select{
  width:100%;
  height:44px;
  box-sizing:border-box;
  padding:0 13px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.08);
  background:#0d0e14;
  color:#fff;
  outline:none;
}

.spotlight-colors{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.spotlight-color{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:0 9px;
  border-radius:9px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  color:#d2c9dc;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}

.spotlight-color input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.spotlight-color-swatch{
  width:17px;
  height:17px;
  flex:0 0 17px;
  border-radius:50%;
  background:var(--spot-color);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);
}

.spotlight-color:has(input:checked){
  border-color:rgba(246,196,75,.42);
  box-shadow:0 0 0 2px rgba(246,196,75,.08);
}

.spotlight-preview-wrap > span{
  display:block;
  margin-bottom:7px;
  color:#b8aec9;
  font-size:12px;
  font-weight:800;
}

.spotlight-preview{
  min-height:64px;
  padding:13px;
  border-radius:10px;
  background:#08a95a;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  margin-bottom:16px;
}

.spotlight-preview strong{
  font-size:14px;
  font-weight:950;
  text-transform:uppercase;
}

.spotlight-preview small{
  font-size:9px;
  opacity:.9;
}

.spotlight-submit{
  width:100%;
  height:46px;
  border:0;
  border-radius:11px;
  background:linear-gradient(180deg,#f8cd53,#efab19);
  color:#1a1208;
  font-size:12px;
  font-weight:950;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(246,196,75,.16);
}

.spotlight-submit:disabled{
  opacity:.42;
  cursor:not-allowed;
  box-shadow:none;
}

.admin-feature-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:18px;
}

.admin-feature-head h2{
  margin:0;
  color:#f4efff;
}

.admin-feature-head p{
  margin:7px 0 0;
  color:#9589ad;
  font-size:13px;
}

.admin-feature-card{
  padding:18px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(20,13,32,.98),rgba(13,9,22,.98));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 22px 50px rgba(0,0,0,.22);
}

.admin-feature-card__intro{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.admin-feature-card__intro strong{
  color:#fff;
  font-size:13px;
}

.admin-feature-card__intro span{
  color:#756b89;
  font-size:11px;
}

.admin-feature-slots{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}

.admin-feature-slot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  min-height:56px;
  padding:10px 11px;
  border-radius:10px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
}

.admin-feature-slot strong{
  display:block;
  color:#fff;
  font-size:11px;
}

.admin-feature-slot small{
  display:block;
  margin-top:3px;
  color:#756b89;
  font-size:9px;
}

.admin-feature-slot > span{
  flex:0 0 auto;
  padding:4px 7px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
}

.admin-feature-slot .is-free{
  background:rgba(82,215,106,.10);
  color:#52d76a;
}

.admin-feature-slot .is-occupied{
  background:rgba(246,196,75,.12);
  color:#f6c44b;
}

.admin-feature-table-wrap{
  overflow:auto;
}

.admin-feature-table{
  width:100%;
  min-width:800px;
  border-collapse:collapse;
}

.admin-feature-table th{
  padding:10px;
  text-align:left;
  color:#9589ad;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.admin-feature-table td{
  padding:9px 10px;
  border-top:1px solid rgba(255,255,255,.05);
}

.admin-feature-table input{
  width:100%;
  height:38px;
  box-sizing:border-box;
  padding:0 10px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.07);
  background:#0d0e14;
  color:#fff;
}

.admin-feature-table .text-center{
  text-align:center;
}

.admin-feature-new-row td{
  border-top:1px dashed rgba(249,180,42,.25);
  color:#756b89;
}

.admin-feature-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
  flex-wrap:wrap;
}

@media(max-width:900px){
  .home-l2-spotlight-group{
    grid-template-columns:1fr;
  }

  .spotlight-layout{
    grid-template-columns:1fr;
  }

  .admin-feature-slots{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:650px){
  .home-l2-spotlight-columns{
    grid-template-columns:1fr;
  }

  .home-l2-spotlight-group{
    gap:6px;
  }
  
  .spotlight-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .spotlight-colors{
    grid-template-columns:1fr 1fr;
  }

  .admin-feature-slots{
    grid-template-columns:1fr;
  }

  .admin-feature-card__intro{
    flex-direction:column;
  }
}

/* =========================================================
   HOMEPAGE SPOTLIGHT - FINAL 2x2 GRID
   ========================================================= */

.home-l2-spotlight-columns{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:auto auto !important;
    gap:8px 14px !important;
    width:100% !important;
    margin-bottom:12px !important;
    align-items:stretch !important;
}

/* Four cards = one real 2x2 grid */
.home-l2-spotlight-columns > .home-l2-spotlight-card{
    width:100% !important;
    min-width:0 !important;
    height:37px !important;
    min-height:37px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    display:flex !important;
    padding:6px 8px !important;
    align-items:center !important;
}

.home-l2-spotlight-columns > .home-l2-spotlight-card{
    align-self:start !important;
}

.home-l2-spotlight-columns > .home-l2-spotlight-card:nth-child(1){
    grid-column:1 !important;
    grid-row:1 !important;
}

.home-l2-spotlight-columns > .home-l2-spotlight-card:nth-child(2){
    grid-column:2 !important;
    grid-row:1 !important;
}

.home-l2-spotlight-columns > .home-l2-spotlight-card:nth-child(3){
    grid-column:1 !important;
    grid-row:2 !important;
}

.home-l2-spotlight-columns > .home-l2-spotlight-card:nth-child(4){
    grid-column:2 !important;
    grid-row:2 !important;
}

/* =========================================================
   HOMEPAGE SPOTLIGHT - FIX FINAL
   Same height as homepage server rows
   ========================================================= */

.home-l2-spotlight-columns{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:auto auto !important;
    gap:6px 14px !important;
    width:100% !important;
    margin-bottom:12px !important;
    align-items:start !important;
}

/* Remove the visual wrapper so all 4 cards participate
   directly in the 2x2 homepage grid. */
.home-l2-spotlight-columns > .home-l2-spotlight-group{
    display:contents !important;
}

/* Exactly the same height as .home-l2-servers .server-link */
.home-l2-spotlight-columns > .home-l2-spotlight-group > .home-l2-spotlight-card{
    width:100% !important;
    min-width:0 !important;
    width:100% !important;
    height:37px !important;
    min-height:37px !important;
    max-height:37px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:6px 8px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:7px !important;
    overflow:hidden !important;
}

/* #1 #2 */
.home-l2-spotlight-group:nth-child(1) > .home-l2-spotlight-card:nth-child(1){
    grid-column:1 !important;
    grid-row:1 !important;
}

.home-l2-spotlight-group:nth-child(1) > .home-l2-spotlight-card:nth-child(2){
    grid-column:2 !important;
    grid-row:1 !important;
}

/* #3 #4 */
.home-l2-spotlight-group:nth-child(2) > .home-l2-spotlight-card:nth-child(1){
    grid-column:1 !important;
    grid-row:2 !important;
}

.home-l2-spotlight-group:nth-child(2) > .home-l2-spotlight-card:nth-child(2){
    grid-column:2 !important;
    grid-row:2 !important;
}

/* Active and empty cards must obey exactly the same height. */
.home-l2-spotlight-card--active,
.home-l2-spotlight-card--empty{
    height:37px !important;
    min-height:37px !important;
    max-height:37px !important;
}

/* =========================================================
HOMEPAGE SPOTLIGHT - FINAL 2x2
#1 #2
#3 #4
========================================================= */

.home-l2-spotlight-columns{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    width:100% !important;
    margin-bottom:12px !important;
}

.home-l2-spotlight-row{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    width:100% !important;
}

.home-l2-spotlight-row > .home-l2-spotlight-card{
    width:100% !important;
    min-width:0 !important;
    height:37px !important;
    min-height:37px !important;
    max-height:37px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:6px 8px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:7px !important;
    overflow:hidden !important;
}

/* Same height as the normal server rows */
.home-l2-spotlight-row > .home-l2-spotlight-card--active,
.home-l2-spotlight-row > .home-l2-spotlight-card--empty{
    height:37px !important;
    min-height:37px !important;
    max-height:37px !important;
}

@media(max-width:650px){
    .home-l2-spotlight-row{
        grid-template-columns:1fr !important;
    }
}

/* =========================================================
   ACCOUNT QUICK ACTIONS
   ========================================================= */

.account-quick-actions{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:14px 0 18px;
}

.account-quick-card{
    min-width:0;
    padding:15px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:linear-gradient(145deg,#171126,#100c18);
    box-shadow:0 10px 28px rgba(0,0,0,.16);
}

.account-quick-card--spotlight{
    border-color:rgba(246,196,75,.22);
}

.account-quick-card-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}

.account-quick-card-head strong{
    display:block;
    font-size:14px;
    color:#fff;
}

.account-quick-card-head small{
    display:block;
    margin-top:3px;
    color:#9e94b8;
    font-size:11px;
}

.account-quick-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:10px;
    background:rgba(246,196,75,.12);
    color:#f6c44b;
    font-weight:900;
}

.account-quick-button{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    width:100%;
    border-radius:9px;
    background:linear-gradient(180deg,#ffc526,#e5a90f);
    color:#211708;
    text-decoration:none;
    font-size:12px;
    font-weight:900;
    transition:.18s ease;
}

.account-quick-button:hover{
    filter:brightness(1.05);
    transform:translateY(-1px);
}

.account-spotlight-status{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
    color:#9e94b8;
    font-size:11px;
}

.account-spotlight-status strong{
    color:#fff;
}

.account-spotlight-controls{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.account-spotlight-controls form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
}

.account-spotlight-controls select{
    width:100%;
    min-width:0;
    min-height:34px;
    padding:0 9px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    background:#0e0b15;
    color:#fff;
}

.account-spotlight-controls .account-action{
    white-space:nowrap;
    min-height:34px;
    padding:0 10px;
}

@media(max-width:1100px){
    .account-quick-actions{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:650px){
    .account-quick-actions{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   ACCOUNT QUICK ACTIONS / MODALS
   ========================================================= */

.account-quick-actions{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:14px 0 18px;
}

.account-quick-button{
    appearance:none;
    border:0;
    cursor:pointer;
    width:100%;
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:linear-gradient(135deg,#f5b91b,#ffc933);
    color:#1b1407;
    font-size:12px;
    font-weight:900;
    text-decoration:none;
    transition:transform .18s ease,filter .18s ease;
}

.account-quick-button:hover{
    filter:brightness(1.05);
    transform:translateY(-1px);
}

.account-modal{
    width:min(520px,calc(100vw - 30px));
    max-width:520px;
    padding:0;
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    background:#120d1b;
    color:#fff;
    box-shadow:0 30px 90px rgba(0,0,0,.55);
}

.account-modal::backdrop{
    background:rgba(4,3,8,.74);
    backdrop-filter:blur(5px);
}

.account-modal-box{
    position:relative;
    padding:24px;
}

.account-modal-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
}

.account-modal-head h2{
    margin:0 0 4px;
    font-size:20px;
}

.account-modal-head p{
    margin:0;
    color:#9388a8;
    font-size:12px;
}

.account-modal-close{
    position:absolute;
    top:12px;
    right:12px;
    width:32px;
    height:32px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:9px;
    background:rgba(255,255,255,.04);
    color:#cfc7dc;
    cursor:pointer;
    font-size:20px;
}

.account-modal-field{
    display:block;
    margin-bottom:14px;
}

.account-modal-field > span{
    display:block;
    margin-bottom:7px;
    color:#aaa0bd;
    font-size:12px;
    font-weight:800;
}

.account-modal-field select{
    width:100%;
    height:44px;
    padding:0 12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.08);
    background:#0c0911;
    color:#fff;
}

.account-modal-submit{
    width:100%;
    min-height:44px;
    margin-top:6px;
    border:0;
    border-radius:10px;
    background:linear-gradient(135deg,#f5b91b,#ffc933);
    color:#1b1407;
    font-weight:900;
    cursor:pointer;
}

.account-modal-submit--purple{
    background:linear-gradient(135deg,#7956ee,#9b72ff);
    color:#fff;
}

@media(max-width:1000px){
    .account-quick-actions{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:650px){
    .account-quick-actions{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   HOMEPAGE SPOTLIGHT - MODERN MANAGEMENT
   ========================================================= */
.spotlight-modern-colors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.spotlight-modern-color{position:relative;display:flex;align-items:center;gap:8px;min-height:42px;padding:7px 9px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.025);cursor:pointer;transition:.18s ease}
.spotlight-modern-color:hover{border-color:rgba(255,255,255,.18);transform:translateY(-1px)}
.spotlight-modern-color.is-selected{border-color:var(--modern-color);background:color-mix(in srgb,var(--modern-color) 12%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--modern-color) 30%,transparent)}
.spotlight-modern-color input{position:absolute;opacity:0;pointer-events:none}
.spotlight-modern-color>span:first-of-type{width:16px;height:16px;flex:0 0 16px;border-radius:50%;background:var(--modern-color);box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.spotlight-modern-color strong{color:#eee8f5;font-size:10px}
.spotlight-modern-colors--compact{grid-template-columns:repeat(8,minmax(0,1fr));margin-bottom:9px}
.spotlight-modern-colors--compact .spotlight-modern-color{justify-content:center;padding:7px}
.spotlight-modern-colors--compact .spotlight-modern-color strong{display:none}
.spotlight-small-action{width:100%;min-height:36px;border:0;border-radius:9px;background:linear-gradient(135deg,#f5b91b,#ffc933);color:#1b1407;font-size:11px;font-weight:900;cursor:pointer}
.spotlight-small-action--extend{background:linear-gradient(135deg,#7956ee,#9b72ff);color:#fff}
.spotlight-my-active{margin-bottom:16px;padding:18px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:linear-gradient(145deg,#161021,#0f0b16)}
.spotlight-my-active-head{margin-bottom:14px}
.spotlight-my-active-head h2{margin:0 0 4px;font-size:17px}
.spotlight-my-active-head p{margin:0;color:#8e849f;font-size:11px}
.spotlight-my-active-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.spotlight-active-item{padding:14px;border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--active-spot-color);border-radius:12px;background:rgba(255,255,255,.02)}
.spotlight-active-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.spotlight-active-top strong{display:block;font-size:14px;color:#fff}
.spotlight-active-top small{display:block;margin-top:3px;color:#8c819d;font-size:10px}
.spotlight-active-badge{padding:4px 7px;border-radius:999px;background:rgba(45,205,111,.12);color:#55d98b;font-size:9px;font-weight:900}
.spotlight-active-meta{display:flex;justify-content:space-between;gap:10px;margin:12px 0;color:#9489a7;font-size:10px}
.spotlight-active-actions{display:grid;gap:8px}
.spotlight-active-actions form{margin:0}
.spotlight-active-actions select{width:100%;min-height:36px;margin-bottom:7px;padding:0 10px;border-radius:9px;border:1px solid rgba(255,255,255,.07);background:#0d0913;color:#fff}
@media(max-width:800px){.spotlight-modern-colors{grid-template-columns:repeat(2,minmax(0,1fr))}.spotlight-modern-colors--compact{grid-template-columns:repeat(4,minmax(0,1fr))}.spotlight-my-active-grid{grid-template-columns:1fr}}

/* =========================================================
   ACCOUNT - MY SERVERS COMPACT ROW
   ========================================================= */

.account-servers{
    display:grid;
    gap:10px;
}

.account-server-item{
    width:100%;
    box-sizing:border-box;
    padding:14px 16px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.025),
        rgba(255,255,255,.012)
    );
    transition:border-color .18s ease,
               background .18s ease,
               transform .18s ease;
}

.account-server-item:hover{
    border-color:rgba(255,255,255,.12);
    background:rgba(255,255,255,.035);
}

.account-server-main{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    width:100%;
}

.account-server-info{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.account-server-name{
    color:#f7f2fc;
    font-size:14px;
    font-weight:900;
    line-height:1.2;
}

.account-server-id{
    color:#817792;
    font-size:10px;
    line-height:1.2;
}

.account-server-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-shrink:0;
}

.account-server-status{
    font-size:11px;
    font-weight:900;
}

.account-server-votes{
    color:#f6c44b;
    font-size:11px;
    font-weight:900;
    min-width:34px;
    text-align:center;
}

.account-server-actions .account-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:68px;
    height:36px;
    padding:0 14px;
    box-sizing:border-box;
    border-radius:9px;
    text-decoration:none;
    font-size:11px;
    font-weight:900;
}

.account-server-actions .account-action-view{
    background:linear-gradient(135deg,#f5b91b,#ffc933);
    color:#1b1407;
}

.account-server-actions .account-action-edit{
    background:linear-gradient(135deg,#45b957,#57c968);
    color:#fff;
}

@media(max-width:700px){

    .account-server-main{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }

    .account-server-actions{
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
    }

}

/* =========================================================
   ACCOUNT - MY SERVERS
   ========================================================= */

.account-server-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    width:100%;
    padding:14px 12px;
    box-sizing:border-box;
    border-bottom:none !important;
}

.account-server-info{
    min-width:0;
}

.account-server-name{
    font-size:15px !important;
    font-weight:900 !important;
    line-height:1.3;
    color:#f5f1fa;
}

.account-server-id{
    font-size:11px !important;
    color:#8d819d;
}

.account-server-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-shrink:0;
}

.account-server-status{
    font-size:12px !important;
    font-weight:900 !important;
}

.account-server-votes{
    color:#ffd54a;
    font-size:12px;
    font-weight:900;
    min-width:38px;
    text-align:center;
}

.account-server-button{
    min-width:72px;
    min-height:38px;
    padding:0 16px !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    font-size:12px !important;
    font-weight:900 !important;
}

/* Remove the old dotted separator between My Servers rows. */
.account-page .servers .server-item{
    border-bottom:none !important;
    border-top:none !important;
}

.account-page .servers .server-item + .server-item{
    border-top:none !important;
}

/* Keep the server list clean and compact. */
.account-page .servers{
    gap:0;
}

@media (max-width:700px){
    .account-server-row{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }

    .account-server-actions{
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
    }
}

/* =========================================================
   ACCOUNT - MY SERVERS / FINAL STYLE
   ========================================================= */

/* Clean server rows - remove old dashed separators */
.account-page .servers,
.account-page .servers li,
.account-page .servers li.server-item{
    border:0 !important;
    border-top:0 !important;
    border-bottom:0 !important;
    box-shadow:none !important;
}

.account-page .servers li.server-item{
    padding:0 !important;
    margin:0 !important;
}

/* Row itself */
.account-page .account-server-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:20px !important;
    width:100% !important;
    min-height:62px !important;
    padding:12px 14px !important;
    box-sizing:border-box !important;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.026),
        rgba(255,255,255,.012)
    ) !important;
    border:1px solid rgba(255,255,255,.055) !important;
    border-radius:12px !important;
    box-shadow:none !important;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}

.account-page .server-item + .server-item .account-server-row{
    margin-top:6px !important;
}

.account-page .account-server-row:hover{
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.045),
        rgba(255,255,255,.020)
    ) !important;
    border-color:rgba(249,155,7,.18) !important;
    transform:translateY(-1px);
}

/* Server name */
.account-page .account-server-name{
    color:#f8f6fc !important;
    font-size:15px !important;
    font-weight:900 !important;
    line-height:1.25 !important;
    letter-spacing:.01em;
}

.account-page .account-server-id{
    color:#817892 !important;
    font-size:11px !important;
}

/* Right side */
.account-page .account-server-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:9px !important;
    flex-shrink:0 !important;
}

/* ACTIVE / INACTIVE */
.account-page .account-server-status{
    font-size:12px !important;
    font-weight:900 !important;
    letter-spacing:.02em;
}

.account-page .account-server-status[style*="#4caf50"]{
    color:#4ade80 !important;
}

.account-page .account-server-status[style*="#e53935"]{
    color:#fb7185 !important;
}

/* Votes + star */
.account-page .account-server-votes{
    color:#facc15 !important;
    font-size:12px !important;
    font-weight:900 !important;
    min-width:40px !important;
    text-align:center !important;
    text-shadow:0 0 10px rgba(250,204,21,.12);
}

/* View / Edit buttons */
.account-page .account-server-button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:72px !important;
    height:36px !important;
    padding:0 15px !important;
    border:0 !important;
    border-radius:10px !important;
    font-size:12px !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-decoration:none !important;
    transition:
        transform .16s ease,
        filter .16s ease,
        box-shadow .16s ease !important;
}

/* View */
.account-page .account-server-button.visit-btn{
    background:linear-gradient(
        180deg,
        #facc15,
        #f59e0b
    ) !important;
    color:#17100a !important;
    box-shadow:0 7px 16px rgba(245,158,11,.12);
}

/* Edit */
.account-page .account-server-button.vote-btn{
    background:linear-gradient(
        180deg,
        #4ade80,
        #22c55e
    ) !important;
    color:#07140b !important;
    box-shadow:0 7px 16px rgba(34,197,94,.10);
}

.account-page .account-server-button:hover{
    transform:translateY(-1px);
    filter:brightness(1.05);
}

@media(max-width:700px){
    .account-page .account-server-row{
        align-items:flex-start !important;
        flex-direction:column !important;
        gap:10px !important;
    }

    .account-page .account-server-actions{
        width:100% !important;
        justify-content:flex-start !important;
        flex-wrap:wrap !important;
    }
}

/* =========================================================
   HOMEPAGE SPOTLIGHT - COLOR PICKER SELECTED STATE
   ========================================================= */

.spotlight-color{
    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.spotlight-color:hover{
    border-color:rgba(246,196,75,.22);
}

/* Selected color */
.spotlight-color:has(input:checked){
    border-color:rgba(246,196,75,.70) !important;
    background:rgba(246,196,75,.08) !important;
    box-shadow:
        0 0 0 2px rgba(246,196,75,.15),
        0 6px 16px rgba(0,0,0,.12) !important;
    transform:translateY(-1px);
}

.spotlight-color:has(input:checked) .spotlight-color-swatch{
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.35),
        0 0 0 3px rgba(255,255,255,.08);
}

/* Make non-selected colors neutral */
.spotlight-color:not(:has(input:checked)){
    border-color:rgba(255,255,255,.05);
    background:rgba(255,255,255,.025);
    box-shadow:none;
    transform:none;
}

/* =========================================================
   L2RANKING VOTE OWNER SETUP
   ========================================================= */
.account-quick-card--vote{border-color:rgba(68,209,126,.28)}
.l2ranking-vote-info{margin-bottom:14px}
.vote-setup-steps{display:grid;gap:9px}
.vote-setup-steps>div{display:flex;gap:10px;align-items:flex-start;color:#b9afca;font-size:12px;line-height:1.45}
.vote-setup-steps b{display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;height:24px;border-radius:8px;background:rgba(246,196,75,.12);color:#f6c44b}
.l2ranking-vote-server{margin-top:14px}
.l2ranking-vote-server-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px}
.vote-setup-label{margin-bottom:7px;color:#9e94b8;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.vote-setup-key{display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0c0912}
.vote-setup-key code{flex:1;min-width:0;overflow:auto;color:#f6c44b;font-size:11px}
.vote-setup-copy{border:0;border-radius:8px;padding:8px 10px;background:#252032;color:#fff;font-weight:800;cursor:pointer}
.vote-setup-empty{padding:12px;border:1px dashed rgba(255,255,255,.10);border-radius:10px;color:#8f85a2;background:rgba(255,255,255,.02)}
.vote-setup-code{margin:0;min-height:214px;padding:14px;border-radius:10px;overflow:auto;background:#09070d;border:1px solid rgba(255,255,255,.07);color:#d7d0e3;font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}
.vote-setup-actions{display:flex;gap:10px;margin-top:14px}
.vote-setup-actions form,.vote-setup-actions a{flex:1}
.vote-setup-actions .account-quick-button,.vote-setup-actions .account-modal-submit{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:38px}
.account-quick-actions{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1200px){.account-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.l2ranking-vote-server-grid{grid-template-columns:1fr}}
@media(max-width:650px){.account-quick-actions{grid-template-columns:1fr}.vote-setup-actions{flex-direction:column}}

/* SEO homepage main heading */
.home-l2-main .seo-main-heading {
    display: block;
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
    color: inherit;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.2;
    font-weight: 800;
    text-align: center;
}