@import url('https://fonts.googleapis.com/css?family=Karla:400,700');

/* ─── CSS VARIABLES / THEME ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

body {
  overflow-x: hidden;
  --theme-main-color: #232f4c;
  --theme-main-color-dark: #151f38;
  --theme-text-color: #bdbdbd;
  --theme-border-light: rgba(255,255,255,0.1);
  --main-color: #efba4d;
  --main-color-dark: #a7791c;
  --main-color-light: #ffb92a;
  --admin-username: #e22d2d;
  background: var(--theme-main-color-dark);
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--theme-text-color);
}

a { color: #5673bb; transition: all .25s ease-in-out; text-decoration: none; }
a:hover, a:focus { color: var(--main-color); text-decoration: none; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--theme-main-color); }
::-webkit-scrollbar-thumb { background: var(--main-color); }
::-webkit-scrollbar-thumb:hover { background: var(--main-color-dark); }

hr { border-color: var(--theme-border-light)!important; border-top: 1px solid; }

/* ─── CONTAINER ─── */
.pie-container {
  width: 100%; margin: 0 auto;
  padding-left: 15px; padding-right: 15px;
}
@media(min-width:768px){.pie-container{max-width:720px;}}
@media(min-width:992px){.pie-container{max-width:960px;}}
@media(min-width:1200px){.pie-container{max-width:1140px;}}
@media(min-width:1400px){.pie-container{max-width:1320px;}}

/* ─── HEADER ─── */
#main {
  height: 500px; position: relative;
  background: url('https://i.imgur.com/M7RK4C4.jpg') no-repeat top / cover;
}
.header_wrap {
  position: relative; height: 100%;
  background-image: linear-gradient(to right,#0049ff3b,#0000004d,#ffed0752,#ff1a954a,#3fb5ff4d);
  background-size: 600%;
  box-shadow: inset 0 0 5em rgba(0,0,0,.5);
  animation: gradients 20s infinite;
}
.header_wrap::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(#151f3800, var(--theme-main-color-dark));
}
@keyframes gradients {
  0%{background-position:0 0} 25%{background-position:50% 0}
  50%{background-position:90% 0} 60%{background-position:60%}
  75%{background-position:40%} 100%{background-position:0 0}
}
.pie_particles_wrapper { position: relative; }
#particles-js {
  position: absolute; left: 0; width: 100%; height: 500px; pointer-events: none;
}

/* ─── NAV BAR ─── */
.navigation__bar {
  position: relative; height: 70px; background: rgba(0,0,0,0.5);
}
.navigation__bar ul { list-style:none; text-align:center; margin:0; padding:0; }
.navigation__bar ul li {
  display:inline-block; margin:0 15px; width:150px; transition:0.25s all; z-index:99;
}
.navigation__bar ul li a {
  font-family:'Karla',sans-serif; text-transform:uppercase; font-weight:700;
  display:block; line-height:70px; font-size:18px; color:#fdfbfb;
  letter-spacing:2px; transition:0.25s all;
}
.navigation__bar ul li:hover { background: var(--theme-border-light); }
.navigation__bar ul li:hover a { color: var(--main-color); }
.navigation__bar ul li.active a { color: var(--main-color); }

/* ─── SERVER BAR ─── */
#server_bar {
  position:relative; font-family:'Karla',sans-serif;
  background:rgba(0,0,0,0.3);
  border-top:1px solid var(--theme-border-light);
  border-bottom:1px solid rgba(255,255,255,0.04);
  height:70px;
}
#server_bar .pie-container { height:100%; }
.server_bar_wrapper { display:flex; align-items:center; justify-content:space-between; height:100%; }
#server_bar .ipid { text-align:right; }
.serverbox .on_players, .serverbox #ip {
  font-size:17px; font-weight:700; color:var(--main-color);
  letter-spacing:0.8px; text-transform:uppercase; transition:0.25s all;
}
.on_players p, #ip p {
  color:rgba(255,255,255,0.5); font-size:8px; font-weight:900;
  margin:0; letter-spacing:1px; line-height:140%;
}
#server_bar .ipid:hover #ip,
#server_bar .ipid:hover #ip p { letter-spacing:1.5px; }

/* ─── INFO BAR (logo/login/discord) ─── */
.info_bar_wrapper {
  display:flex; align-items:center; position:relative;
  width:100%; padding-top:10px; margin:0 auto; z-index:1;
}
.pie_box { display:flex; align-items:center; }
.pie_box.login_box { justify-content:flex-end; }
.pie_box.login_box, .pie_box.discord_box { width:29%; float:left; }
.pie_box.logo_box { width:42%; justify-content:center; float:left; }
.pie_box.logo_box img { width:100%; object-fit:contain; max-height:350px; transition:0.25s all; }
.pie_box.logo_box img:hover { transform:scale(1.05); }
.pie_box_icon {
  font-size:30px; color:var(--main-color); margin:0 8px;
  width:50px; height:50px; text-align:center;
  background:rgba(0,0,0,0.25); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.pie_box_text { color:var(--theme-text-color); letter-spacing:0.5px; transition:0.25s all; }
.pie_box.login_box .pie_box_text { text-align:right; }
.pie_box_text.discord:hover { letter-spacing:1px; }
.pie_box_text h2 { font-size:16px; font-weight:700; color:var(--main-color); text-transform:uppercase; margin:0 0 4px; }
.pie_box_text p { color:var(--theme-text-color); margin:0; }

/* ─── SCROLL TO TOP ─── */
.pie_scroll_top {
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  position:fixed; right:15px; bottom:15px;
  background:var(--theme-border-light); border-radius:4px;
  color:#fff; width:40px; height:40px; font-size:16px; z-index:9999;
  transition:0.25s all;
}
.pie_scroll_top:hover { background:var(--main-color-dark); }

/* ─── PANEL ─── */
.panel {
  background-color:var(--theme-main-color);
  box-shadow:0 2px 10px rgba(0,0,0,0.15)!important;
  border:none; border-radius:0; margin-bottom:5px;
}
.panel-body { padding:10px; color:var(--theme-text-color); }
.panel .panel-heading { background:none!important; padding:8px 10px; }
.panel-default > .panel-heading {
  color:var(--main-color); border:none;
  font-family:'Karla',sans-serif; text-transform:uppercase;
  font-weight:700!important; letter-spacing:1px; font-size:18px;
  border-bottom:2px solid var(--theme-border-light);
  box-shadow:0 2px 7px rgba(0,0,0,0.22);
}

/* ─── TOOLBAR / HEADER BUTTONS ─── */
.header { margin:0; }
.header .buttons {
  background-color:var(--theme-main-color);
  box-shadow:0 2px 10px rgba(0,0,0,0.15)!important;
  border:none; border-radius:0; margin:0; padding:14px;
  width:100%!important; font-family:'Karla',sans-serif; font-weight:700;
}
.header .buttons .toolbar { display:flex; align-items:center; }
.header .buttons .basket { margin-left:auto; margin-top:5px; position:relative; }
.custom-currency {
  font-weight:700; color:var(--main-color); background:var(--theme-border-light);
  border:none; padding:0 0 0 10px; text-transform:uppercase;
  outline:none!important; cursor:pointer;
  font-family:'Karla',sans-serif; font-size:14px;
  display:flex; align-items:center; gap:0;
}
.pie_curr {
  background:var(--theme-border-light); display:inline-block;
  padding:10px; margin-left:10px;
}

/* ─── FOOTER ─── */
footer {
  position:relative; width:100%;
  background:var(--theme-main-color-dark);
  font-family:'Karla',sans-serif; font-weight:700; margin-top:50px;
}
#footer_info { background:var(--theme-main-color); text-transform:uppercase; }
.footer_info_wrapper { display:flex; align-items:center; height:60px; }
#ft_servern { font-size:30px; color:var(--main-color); }
#ft_server { margin-left:auto; }
#ft_ip { color:var(--main-color); font-size:26px; font-weight:700; cursor:pointer; transition:0.25s; }
#ft_ip:hover { color:#5673bb; }
#ft_players { color:#5673bb; font-size:13px; }
.pie_style_changer {
  cursor:pointer; list-style:none; font-size:12px;
  background:var(--theme-border-light); padding:8px; color:#c9c9c9;
  margin:0 20px; transition:0.25s;
}
footer .footer_content_wrapper { display:flex; align-items:center; height:280px; }
footer .ft__row { flex:1; height:220px; }
footer .ft__row:not(:last-child) { margin-right:20px; }
footer .ft__row img {
  width:100%; object-fit:contain; max-height:215px;
  opacity:0.2; filter:grayscale(70%); transition:0.25s;
}
footer .ft__row img:hover { opacity:1; filter:grayscale(0%); }
footer .ft__row .about_us { padding:10px; color:var(--theme-text-color); font-size:13px; }
footer .ft__row .about_us b { color:var(--main-color); }
footer .ft__row h1 {
  margin:0; color:var(--main-color); font-size:25px; padding:5px;
  font-weight:bold; background:var(--theme-main-color);
  text-align:center; text-transform:uppercase;
}
footer .ft__row .sitemap { margin-top:10px; text-align:center; }
footer .ft__row .sitemap ul { margin:0; list-style:none; padding:0; }
footer .ft__row .sitemap li { transition:.25s; }
footer .ft__row .sitemap li:hover { background:var(--theme-main-color); }
footer .ft__row .sitemap li a { color:#5673bb; display:block; font-size:15px; padding:4px; }
footer .ft__row .sitemap li a:hover { color:var(--main-color); }
footer .ft_copyright_wrapper {
  display:flex; align-items:center; height:60px;
  border-top:1px solid var(--theme-border-light);
}
.copyright { color:var(--main-color); }

/* ─── TOASTS ─── */
.toast-wrap { position:fixed; bottom:20px; right:20px; z-index:99999; display:flex; flex-direction:column; gap:8px; }
.toast-msg {
  background:var(--theme-main-color); border:1px solid var(--theme-border-light);
  color:var(--theme-text-color); padding:10px 16px;
  font-size:13px; font-family:'Karla',sans-serif; border-radius:3px;
  animation:tin 0.2s ease; box-shadow:0 4px 15px rgba(0,0,0,0.5);
}
@keyframes tin{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.toast-msg.ok::before { content:'✓ '; color:#4caf50; }

/* ─── IP COPIED POPUP ─── */
#ip-copied {
  display:none; position:fixed; top:20px; left:50%; transform:translateX(-50%);
  background:var(--main-color); color:#111; font-weight:700;
  padding:8px 20px; border-radius:3px; z-index:99999;
  font-family:'Karla',sans-serif; font-size:13px;
}

/* ─── RESPONSIVE ─── */
@media(max-width:767px){
  .pie_box.login_box,.pie_box.discord_box{display:none;}
  .pie_box.logo_box{width:100%;}
  .navigation__bar ul{display:none;}
  #ft_server{display:none;}
  footer .footer_content_wrapper{height:auto;flex-direction:column;}
}
@media(max-width:550px){
  #server_bar .ipid{display:none;}
}
/* ═══════════════════════════════════════════════════════════════════
   STYLE CHANGER PANEL
   ═══════════════════════════════════════════════════════════════════ */

/* ── Trigger button ── */
.pie_style_changer {
  cursor: pointer; user-select: none;
  color: var(--main-color); font-size: 13px; font-weight: 700;
  transition: opacity .2s;
}
.pie_style_changer:hover { opacity: .75; }

/* ── Overlay backdrop ── */
#sc-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 9998;
}
#sc-backdrop.open { display: block; }

/* ── Panel ── */
#sc-panel {
  display: none; position: fixed; top: 0; right: 0;
  width: 420px; max-width: 100vw; height: 100vh;
  background: var(--theme-main-color);
  border-left: 1px solid var(--theme-border-light);
  z-index: 9999; overflow-y: auto;
  flex-direction: column;
  box-shadow: -6px 0 30px rgba(0,0,0,.5);
}
#sc-panel.open { display: flex; }

.sc-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--theme-border-light);
  display: flex; align-items: flex-start; justify-content: space-between;
}
.sc-head-title { color: var(--main-color); font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.sc-head-sub { color: var(--theme-text-color); font-size: 12px; }
.sc-close {
  background: none; border: none; cursor: pointer;
  color: var(--theme-text-color); font-size: 18px; line-height: 1;
  padding: 2px 6px; border-radius: 50%;
  transition: color .2s, background .2s;
}
.sc-close:hover { color: #fff; background: rgba(255,255,255,.1); }

.sc-body { padding: 0; flex: 1; }

/* ── Section ── */
.sc-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--theme-border-light);
}
.sc-section-title {
  color: var(--main-color); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px;
}

/* ── Toggle rows ── */
.sc-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--theme-border-light);
}
.sc-toggle-row:last-child { border-bottom: none; }
.sc-toggle-label { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.sc-toggle-desc { color: var(--theme-text-color); font-size: 12px; }

/* Toggle switch */
.sc-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.sc-switch input { opacity: 0; width: 0; height: 0; }
.sc-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(255,255,255,.15); border-radius: 24px;
  transition: background .2s;
}
.sc-slider::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s;
}
.sc-switch input:checked + .sc-slider { background: var(--main-color); }
.sc-switch input:checked + .sc-slider::before { transform: translateX(20px); }

/* ── Color swatches ── */
.sc-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.sc-swatch {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent; transition: transform .15s, border-color .15s;
  flex-shrink: 0;
}
.sc-swatch:hover { transform: scale(1.15); }
.sc-swatch.active { border-color: #fff; transform: scale(1.1); }

/* ── Theme color grid ── */
.sc-theme-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.sc-theme-card {
  cursor: pointer; border-radius: 8px;
  border: 2px solid transparent; transition: border-color .15s, transform .15s;
  overflow: hidden;
}
.sc-theme-card:hover { transform: translateY(-2px); }
.sc-theme-card.active { border-color: var(--main-color); }
.sc-theme-card-label {
  font-size: 11px; color: var(--theme-text-color);
  margin-bottom: 5px; font-weight: 600;
}
.sc-theme-card-swatch {
  height: 70px; border-radius: 6px;
}

/* ── Light mode overrides ── */
body.pf-light {
  --theme-main-color: #e8eaf0;
  --theme-main-color-dark: #d0d3de;
  --theme-text-color: #333;
  --theme-border-light: rgba(0,0,0,.12);
}
body.pf-light a { color: #3a5aad; }
body.pf-light .navigation__bar { background: rgba(255,255,255,.7); }
body.pf-light .navigation__bar ul li a { color: #222; }

/* ── Fluid width override ── */
body.pf-fluid .pie-container { max-width: 100% !important; }