/* ===========================================================
   ValoConquer — New Theme
   Re-skin only. All PHP logic / class hooks preserved.
   =========================================================== */

:root{
  --bg:#0a0a0c;
  --bg-soft:#111116;
  --panel:#15151b;
  --gold:#c9a44a;
  --gold-bright:#f0d28a;
  --crimson:#8a2530;
  --steel:#3f5d76;
  --ink:#e8e4da;
  --ink-dim:#9a958a;
  --line:#2a2a32;
  --green:#4caf6a;
  --err:#8a2530;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  font-family:'Segoe UI', Tahoma, 'Roboto', sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201,164,74,0.07), transparent 60%),
    radial-gradient(circle at 12% 22%, rgba(138,37,48,0.10), transparent 40%),
    radial-gradient(circle at 88% 30%, rgba(63,93,118,0.10), transparent 40%);
}

a{text-decoration:none;}
img{max-width:100%;}

/* ===================== Navbar ===================== */
.navbar{
  background:rgba(10,10,12,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:14px 0;
  text-align:center;
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  box-shadow:0 4px 24px rgba(0,0,0,.4);
}
.navbar ul{list-style:none; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px;}
.navbar li{display:inline-flex; align-items:center;}
.navbar a{
  color:var(--ink-dim);
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  font-family:'Cinzel', serif;
  padding:9px 18px; border-radius:6px;
  transition:color .25s, background .25s;
  display:inline-block;
}
.navbar a:hover{color:var(--gold-bright); background:rgba(201,164,74,.08);}

.welcome{
  font-size:13px; font-weight:600;
  background:linear-gradient(135deg,var(--gold),#8a6a1f);
  color:#1a1308; padding:8px 16px; border-radius:6px; margin-left:8px;
  font-family:'Cinzel', serif; letter-spacing:.05em;
}
.welcome a{color:#1a1308;}
.welcome a:hover{text-decoration:underline;}

.online-count{
  font-weight:bold; color:var(--gold-bright);
  font-size:13px; letter-spacing:.08em;
  padding:7px 14px; border-radius:6px;
  background:rgba(201,164,74,0.08); border:1px solid var(--line);
  font-family:'Cinzel', serif;
  display:inline-flex; align-items:center; gap:8px;
  transition:all .25s;
}
.online-count::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--green); box-shadow:0 0 10px var(--green);
  display:inline-block; animation:dotPulse 1.8s ease-in-out infinite;
}
.online-count:hover{border-color:var(--gold);}
@keyframes dotPulse{0%,100%{box-shadow:0 0 8px var(--green);}50%{box-shadow:0 0 18px var(--green);}}

/* ===================== Social rail ===================== */
.social-links{
  position:fixed; top:50%; right:22px; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:14px; z-index:900;
}
.social-links a{
  width:52px; height:52px; border-radius:50%;
  background:rgba(20,20,28,0.7); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:all .25s;
}
.social-links a:hover{border-color:var(--gold); transform:translateY(-3px);}
.social-links img, .social-icon{
  width:26px !important; height:26px !important;
  object-fit:contain; transition:transform .25s;
}
.social-links a:hover img{transform:scale(1.1);}

/* ===================== Hero header ===================== */
.header-image, header.header-image{
  position:relative; width:100%; min-height:88vh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  margin-top:0; padding:120px 24px 90px;
  background:url('images/hero-bg.jpg') center/cover no-repeat fixed;
  overflow:hidden;
}
.header-image::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 55% 50% at 50% 46%, rgba(10,10,12,0.10), rgba(10,10,12,0.5) 90%),
    linear-gradient(180deg, rgba(10,10,12,0.6) 0%, rgba(10,10,12,0.15) 30%, rgba(10,10,12,0.3) 68%, rgba(10,10,12,0.95) 100%);
}
.header-image .overlay{position:relative; z-index:2; max-width:760px;}
.header-image .overlay img.hero-logo{
  width:180px; margin:0 auto 6px; display:block;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.7));
  animation:floatLogo 6s ease-in-out infinite;
}
.header-image h1{
  font-family:'Cinzel', serif; font-weight:700;
  font-size:64px; line-height:1.05; color:var(--gold-bright);
  letter-spacing:.04em;
  text-shadow:0 4px 30px rgba(0,0,0,.8), 0 0 40px rgba(201,164,74,.25);
  animation:fadeIn 1.4s ease-out;
}
.header-image p{
  font-size:20px; color:var(--ink); opacity:.9; margin-top:16px;
  animation:fadeIn 1.4s ease-out .3s both;
}
@keyframes floatLogo{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
@keyframes fadeIn{from{opacity:0; transform:translateY(-24px);}to{opacity:1; transform:translateY(0);}}

/* hero action buttons inside overlay */
.hero-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:34px;}

/* ===================== Buttons ===================== */
.cta-button, .download-button, .payment-button, button{
  font-family:'Cinzel', serif;
}
.cta-button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 34px; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  border-radius:8px; margin:8px; transition:all .25s;
  border:1px solid var(--gold); color:var(--gold-bright);
  background:rgba(15,15,21,0.5); backdrop-filter:blur(4px);
}
.cta-button:first-of-type{
  background:linear-gradient(135deg,var(--gold),#8a6a1f);
  color:#1a1308; border-color:transparent;
  box-shadow:0 6px 24px -8px rgba(201,164,74,.6);
}
.cta-button:hover{filter:brightness(1.1); transform:translateY(-2px);}

/* ===================== Main / sections ===================== */
main{padding:72px 24px 60px; max-width:1100px; margin:0 auto;}
main section{
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:40px; margin-bottom:28px; text-align:center;
}
h2{
  font-family:'Cinzel', serif; font-size:30px; color:var(--gold-bright);
  margin-bottom:18px; letter-spacing:.03em; text-transform:uppercase; font-weight:700;
}
h3{font-family:'Cinzel', serif; color:var(--gold-bright); font-size:20px; margin:18px 0 12px;}
main section p{color:var(--ink-dim); font-size:16px; line-height:1.7;}

/* CTA block */
.cta{
  background:linear-gradient(135deg, rgba(138,37,48,.15), rgba(63,93,118,.12)), var(--panel);
  border:1px solid var(--gold);
  border-radius:14px; padding:50px 30px; margin-top:30px; text-align:center;
}
.cta h2{color:var(--gold-bright);}
.cta p{color:var(--ink); margin-bottom:24px;}

/* ===================== Forms (login/register/forgot/dashboard) ===================== */
/* ===================== Auth pages (login / register / forgot) ===================== */
.auth-page{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:90px 20px 60px; position:relative; overflow:hidden;
  max-width:none !important; width:100%; margin:0 !important;
}
.auth-page::before{
  content:""; position:fixed; inset:0; z-index:0;
  background:url('images/hero-bg.jpg') center/cover no-repeat;
}
.auth-page::after{
  content:""; position:fixed; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(10,10,12,0.55), rgba(10,10,12,0.9) 70%);
}
.auth-card{position:relative; z-index:2; width:100%; max-width:480px; text-align:center;}
.auth-logo{
  display:block; width:300px; max-width:78%; margin:10px auto 4px;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.7));
}
.auth-tagline-top{
  display:block; font-family:'Cinzel',serif; color:var(--gold); font-size:14px;
  letter-spacing:.08em; margin-bottom:26px; text-shadow:0 0 18px rgba(201,164,74,.4);
}
.auth-tagline-top::before, .auth-tagline-top::after{content:"✧"; margin:0 12px; color:var(--gold); opacity:.7;}

form{
  background:linear-gradient(155deg, rgba(18,18,24,0.92), rgba(10,10,14,0.94));
  border:1px solid rgba(201,164,74,.4);
  border-radius:8px; padding:40px 36px 34px; max-width:480px; margin:0 auto;
  text-align:center; box-shadow:0 30px 80px -25px rgba(0,0,0,.9), inset 0 0 60px rgba(0,0,0,.4);
  position:relative;
}
form::before{
  content:""; position:absolute; inset:6px; border:1px solid rgba(201,164,74,.25);
  border-radius:5px; pointer-events:none;
}
form::after{
  content:"◆"; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  color:var(--steel); font-size:16px; text-shadow:0 0 10px var(--steel);
}
form h2{
  color:var(--gold-bright); font-size:24px; margin-bottom:24px; position:relative;
  text-shadow:0 0 24px rgba(201,164,74,.35); letter-spacing:.04em;
}
form h2::before, form h2::after{content:"✧"; margin:0 14px; color:var(--gold); font-size:14px; opacity:.7; vertical-align:middle;}
form .auth-tagline{color:var(--ink-dim); font-size:13px; margin-bottom:24px; display:block;}

.field{position:relative; margin:14px 0;}
.field .fi-icon{
  position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%);
  font-size:15px; color:var(--gold); opacity:.85; pointer-events:none;
}
.field input{margin:0 !important; padding-inline-start:44px !important;}
label{
  display:block; text-align:start; font-size:13px; color:var(--ink-dim);
  margin-top:14px; margin-bottom:6px; font-weight:600; letter-spacing:.02em;
}
input[type="text"], input[type="password"], input[type="email"], input[type="number"]{
  width:100%; padding:13px; margin:4px 0 6px;
  border:1px solid var(--line); border-radius:8px; font-size:15px;
  background:var(--bg-soft); color:var(--ink);
  box-sizing:border-box; transition:border-color .25s, background .25s;
}
input:focus{outline:none; border-color:var(--gold); background:#1a1a22;}
input::placeholder{color:#6a665d;}

button{
  margin-top:20px; padding:14px 30px; width:100%;
  font-size:14px; letter-spacing:.12em; text-transform:uppercase;
  border:none; border-radius:8px; cursor:pointer;
  background:linear-gradient(135deg,var(--gold),#8a6a1f); color:#1a1308;
  transition:filter .25s, transform .25s;
}
button:hover{filter:brightness(1.1); transform:translateY(-2px);}

/* captcha image */
form img[src="captcha.php"]{
  display:block; margin:12px auto; border-radius:6px; border:1px solid var(--line);
}

/* messages */
.error{
  background:rgba(138,37,48,.18); border:1px solid var(--crimson);
  color:#f0b3ba; padding:13px; border-radius:8px; margin-bottom:18px; font-size:15px;
}
.success, .message{
  background:rgba(76,175,106,.15); border:1px solid var(--green);
  color:#bfe6cc; padding:13px; border-radius:8px; margin-bottom:18px; font-size:15px;
}

form p a{color:var(--gold); font-size:14px;}
form p a:hover{color:var(--gold-bright); text-decoration:underline;}

/* ===================== Downloads ===================== */
.download-section{
  background:var(--panel); border:1px solid var(--line);
  padding:50px 30px; text-align:center; border-radius:14px;
}
.download-section h2{color:var(--gold-bright);}
.download-boxes{display:flex; justify-content:center; gap:24px; margin-top:34px; flex-wrap:wrap;}
.download-box{
  background:var(--bg-soft); border:1px solid var(--line);
  padding:34px; width:45%; min-width:280px; border-radius:14px;
  transition:transform .25s, border-color .25s;
}
.download-box:hover{transform:translateY(-4px); border-color:var(--gold);}
.download-box h3{color:var(--gold-bright); font-size:22px;}
.download-box p{color:var(--ink-dim); margin-bottom:24px;}
.download-button{
  display:inline-block; margin:6px; padding:12px 26px;
  background:linear-gradient(135deg,var(--gold),#8a6a1f); color:#1a1308;
  font-size:14px; border-radius:8px; letter-spacing:.06em;
  transition:filter .25s, transform .25s;
}
.download-button:hover{filter:brightness(1.1); transform:translateY(-2px);}

/* ===================== Payments ===================== */
.payment-section{
  max-width:1000px; margin:40px auto; padding:40px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; text-align:center;
}
.payment-section h2{color:var(--gold-bright);}
.payment-categories{display:flex; justify-content:center; gap:20px; margin-top:30px; flex-wrap:wrap;}
.payment-category{
  width:30%; min-width:220px; padding:26px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:12px;
  cursor:pointer; transition:border-color .25s, transform .25s;
}
.payment-category:hover{border-color:var(--gold); transform:translateY(-3px);}
.payment-category h3{color:var(--gold-bright); margin-bottom:10px;}
.payment-category p{color:var(--ink-dim); font-size:15px;}
.payment-form-container{
  margin-top:30px; text-align:right;
  background:var(--bg-soft); border:1px solid var(--line);
  padding:26px; border-radius:12px;
}
.payment-form-container h3{color:var(--gold-bright); text-align:center;}
.payment-form label{color:var(--ink-dim);}

/* ===================== Footer ===================== */
footer{
  background:var(--bg-soft); border-top:1px solid var(--line);
  color:var(--ink-dim); text-align:center; padding:28px; font-size:14px;
  font-family:'Cinzel', serif; letter-spacing:.04em;
}

/* ===================== Responsive ===================== */
@media (max-width:900px){
  .header-image h1{font-size:42px;}
  .header-image .overlay img.hero-logo{width:130px;}
  .navbar ul{gap:2px;}
  .navbar a{padding:8px 11px; font-size:11px;}
  .download-box{width:100%;}
  .payment-category{width:100%;}
  .social-links{right:10px; gap:10px;}
  .social-links a{width:44px; height:44px;}
  main{padding-top:56px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;}
  .header-image{background-attachment:scroll;}
}

/* ===================== Live server status sidebar ===================== */
.live-rail{
  position:fixed; top:50%; left:18px; transform:translateY(-50%);
  width:226px; z-index:950;
  background:linear-gradient(155deg, rgba(21,21,27,0.94), rgba(13,13,17,0.94));
  border:1px solid var(--line); border-radius:16px;
  padding:18px 16px; backdrop-filter:blur(10px);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.live-rail::before{
  content:""; position:absolute; inset:0; border-radius:16px; padding:1px;
  background:linear-gradient(160deg, rgba(201,164,74,.5), transparent 40%, transparent 70%, rgba(138,37,48,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.live-rail.collapsed,
.live-rail:has(#railToggleChk:checked),
#railToggleChk:checked + .live-rail{transform:translateY(-50%) translateX(-262px);}
.rail-toggle{
  position:absolute; top:50%; right:-15px; transform:translateY(-50%);
  user-select:none;
  width:30px; height:46px; border:1px solid var(--line); border-radius:8px;
  background:linear-gradient(155deg,#1a1a22,#101015); color:var(--gold-bright);
  cursor:pointer; font-size:16px; font-family:'Cinzel',serif;
  display:flex; align-items:center; justify-content:center;
}
.rail-toggle:hover{color:var(--gold);}
.live-rail.collapsed .rail-toggle,
.live-rail:has(#railToggleChk:checked) .rail-toggle,
#railToggleChk:checked + .live-rail .rail-toggle{right:-44px;}
.live-rail.collapsed .rail-arrow,
.live-rail:has(#railToggleChk:checked) .rail-arrow,
#railToggleChk:checked + .live-rail .rail-arrow{transform:rotate(180deg); display:inline-block;}
.rail-head{display:flex; flex-direction:column; gap:2px; margin-bottom:14px;}
.rail-live{display:flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--green);}
.rail-dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:dotPulse 1.8s ease-in-out infinite;}
.rail-title{font-family:'Cinzel',serif; font-size:14px; color:var(--gold-bright); letter-spacing:.06em;}
.rail-card{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.025); border:1px solid var(--line);
  border-radius:10px; padding:11px 12px; margin-bottom:8px;
}
.rail-card.big{flex-direction:column; align-items:flex-start; gap:3px; padding:13px;}
.rail-num{font-family:'Cinzel',serif; font-size:30px; color:#fff; line-height:1; text-shadow:0 0 16px rgba(76,175,106,.5);}
.rail-num.sm{font-size:18px; color:var(--gold-bright); display:block; text-shadow:none;}
.rail-lbl{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); display:block;}
.rail-bar{width:100%; height:4px; background:rgba(255,255,255,.08); border-radius:3px; margin-top:8px; overflow:hidden;}
.rail-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--green),#9fe0b3); border-radius:3px; box-shadow:0 0 8px var(--green);}
.rail-ico{font-size:18px; flex-shrink:0;}
.rail-split{height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.35; margin:12px 0;}
.rail-feat{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink); padding:5px 2px;}
.rail-crown{font-size:18px;}
.rail-name{font-family:'Cinzel',serif; font-size:14px; color:var(--gold-bright); display:block; line-height:1.2;}

@media (max-width:1180px){
  /* on small screens: hidden by default, checkbox shows it */
  .live-rail{top:120px; transform:translateX(-262px);}
  .live-rail.collapsed,
  .live-rail:has(#railToggleChk:checked){transform:translateX(-262px);}
  #railToggleChk:checked + .live-rail{transform:translateX(0);}
  /* keep the toggle button on screen even when the panel is hidden, so it can be reopened/closed */
  .live-rail .rail-toggle{right:-42px; top:24px; transform:none;}
  .live-rail.collapsed .rail-toggle,
  .live-rail:has(#railToggleChk:checked) .rail-toggle,
  #railToggleChk:checked + .live-rail .rail-toggle{right:-42px;}
  .live-rail::before{display:none;}
}

/* ===================== Animations ===================== */
@keyframes floatLogo{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
@keyframes vcFadeUp{from{opacity:0; transform:translateY(28px);}to{opacity:1; transform:translateY(0);}}
@keyframes vcGlow{
  0%,100%{filter:drop-shadow(0 10px 30px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(201,164,74,.2));}
  50%{filter:drop-shadow(0 14px 40px rgba(0,0,0,.7)) drop-shadow(0 0 44px rgba(201,164,74,.5));}
}

/* hero logo float + glow */
.header-image .overlay img.hero-logo{
  animation:floatLogo 6s ease-in-out infinite, vcGlow 4s ease-in-out infinite;
}

/* hero load-in sequence */
.header-image .overlay > *{opacity:0; animation:vcFadeUp .9s cubic-bezier(.2,.7,.2,1) forwards;}
.header-image .overlay img.hero-logo{animation:floatLogo 6s ease-in-out infinite, vcGlow 4s ease-in-out infinite, vcFadeUp .9s cubic-bezier(.2,.7,.2,1) forwards;}
.header-image .overlay h1{animation-delay:.15s;}
.header-image .overlay p{animation-delay:.3s;}
.header-image .overlay .hero-actions{animation-delay:.45s;}

/* fire particles canvas */
#fx-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1; opacity:.5;
}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(36px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* live rail fade-in on load (transform left free for the toggle) */
.live-rail{animation:railFade .8s ease .4s both;}
@keyframes railFade{from{opacity:0;}to{opacity:1;}}

@media (prefers-reduced-motion:reduce){
  .header-image .overlay > *,
  .header-image .overlay img.hero-logo,
  .live-rail,
  .reveal{animation:none !important; opacity:1 !important; transform:none !important; transition:none !important;}
  #fx-canvas{display:none !important;}
}

/* ===================== Page head (sub-pages) ===================== */
.page-head{max-width:900px; margin:0 auto; padding:120px 24px 10px; text-align:center; position:relative; z-index:2;}
.page-eyebrow{font-family:'Cinzel',serif; font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--steel);}
.page-title{font-family:'Cinzel',serif; font-size:42px; color:var(--gold-bright); margin-top:12px; text-shadow:0 0 30px rgba(201,164,74,.25);}
.page-sub{color:var(--ink-dim); margin-top:12px;}

/* ===================== Rankings ===================== */
.rank-wrap{max-width:900px; margin:0 auto 60px; padding:30px 24px 0; position:relative; z-index:2;}
.rank-tabs{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:22px;}
.rank-tab{
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:.1em;
  padding:11px 24px; border:1px solid var(--line); border-radius:8px;
  color:var(--ink-dim); transition:all .25s; background:rgba(20,20,28,.5);
}
.rank-tab:hover{color:var(--gold-bright); border-color:var(--gold);}
.rank-tab.active{
  background:linear-gradient(135deg,var(--gold),#8a6a1f); color:#1a1308; border-color:transparent;
  box-shadow:0 6px 20px -8px rgba(201,164,74,.6);
}
.rank-table-box{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.rank-table{width:100%; border-collapse:collapse;}
.rank-table th{
  font-family:'Cinzel',serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel); background:var(--bg-soft); padding:15px 16px; text-align:right;
}
.rank-table td{padding:14px 16px; border-top:1px solid var(--line); font-size:15px; color:var(--ink); text-align:right;}
.rank-table .col-rank{width:60px; text-align:center; font-family:'Cinzel',serif; color:var(--gold);}
.rank-table .col-name{color:var(--gold-bright); font-weight:600;}
.rank-table .col-val{font-family:'Cinzel',serif; color:var(--ink);}
.rank-table tbody tr:hover td{background:rgba(201,164,74,.05);}
.rank-table .medal{font-size:20px;}
.rank-table tr.top1 td{background:linear-gradient(90deg, rgba(201,164,74,.14), transparent);}
.rank-table tr.top2 td{background:linear-gradient(90deg, rgba(160,160,170,.10), transparent);}
.rank-table tr.top3 td{background:linear-gradient(90deg, rgba(176,108,60,.10), transparent);}
.reborn-badge{
  display:inline-block; font-family:'Cinzel',serif; font-size:10px;
  background:var(--crimson); color:#fff; padding:1px 7px; border-radius:10px; margin-right:4px;
}
.rank-empty{text-align:center !important; color:var(--ink-dim); padding:40px 16px !important;}

@media (max-width:700px){
  .page-title{font-size:30px;}
  .rank-table th, .rank-table td{padding:11px 9px; font-size:13px;}
}

/* ===================== Home feature cards ===================== */
.feature-section{background:transparent !important; border:none !important; padding:0 !important;}
.feature-section > h2{margin-bottom:30px;}
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.feature-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:30px 22px; text-align:center; transition:transform .25s, border-color .25s;
}
.feature-card:hover{transform:translateY(-5px); border-color:var(--gold);}
.feature-ico{font-size:34px; display:block; margin-bottom:14px;}
.feature-card h3{font-family:'Cinzel',serif; color:var(--gold-bright); font-size:18px; margin-bottom:10px;}
.feature-card p{color:var(--ink-dim); font-size:14px; line-height:1.6;}
@media (max-width:900px){.feature-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.feature-grid{grid-template-columns:1fr;}}


/* ===================== Language dropdown (compact) ===================== */
.lang-dd{position:relative; margin-inline-start:8px; align-self:center;}
.lang-dd-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Cinzel',serif; font-size:13px; font-weight:600;
  background:transparent; color:var(--ink-dim); cursor:pointer;
  border:none; border-radius:6px; padding:6px 8px;
  transition:color .2s; width:auto !important; min-height:34px; margin:0 !important; line-height:1;
  text-transform:uppercase; vertical-align:middle;
}
.lang-dd-btn:hover{color:var(--gold-bright);}
.lang-globe{font-size:11px; line-height:1;}
.lang-caret{font-size:8px; color:var(--ink-dim); transition:transform .2s;}
.lang-cur{font-size:11px;}
.lang-menu{
  position:absolute; top:calc(100% + 6px); inset-inline-end:0;
  min-width:140px; list-style:none; margin:0; padding:5px;
  background:linear-gradient(155deg,#1a1a22,#101015);
  border:1px solid var(--line); border-radius:9px;
  box-shadow:0 16px 36px -12px rgba(0,0,0,.8);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s; z-index:1200;
}
.lang-dd:hover .lang-menu, .lang-dd:focus-within .lang-menu{opacity:1; visibility:visible; transform:translateY(0);}
.lang-dd:hover .lang-caret, .lang-dd:focus-within .lang-caret{transform:rotate(180deg);}
.lang-menu li{display:block; margin:0;}
.lang-menu a{
  display:flex; align-items:center; gap:8px;
  font-family:'Segoe UI',Tahoma,sans-serif; font-size:13px; font-weight:500;
  color:var(--ink); padding:8px 10px !important; border-radius:6px;
  text-transform:none; letter-spacing:0;
}
.lang-menu a:hover{background:rgba(201,164,74,.1); color:var(--gold-bright);}
.lang-menu a.active{color:var(--gold-bright);}
.lang-menu a.active .lang-code{border-color:var(--gold); color:var(--gold-bright);}
.lang-code{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Cinzel',serif; font-size:10px; font-weight:700;
  min-width:24px; padding:2px 4px; border:1px solid var(--line); border-radius:4px;
  color:var(--ink-dim); background:rgba(255,255,255,.03);
}
.lang-code{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Cinzel',serif; font-size:11px; font-weight:700;
  min-width:28px; padding:2px 5px; border:1px solid var(--line); border-radius:5px;
  color:var(--ink-dim); background:rgba(255,255,255,.03);
}

/* ===================== Player dashboard ===================== */
.dashboard-body{
  min-height:100vh;
  background:
    linear-gradient(180deg, rgba(8,10,15,.82), rgba(8,9,12,.94)),
    url('images/hero-bg.jpg') center top/cover fixed no-repeat;
}

.dashboard-body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(196,106,33,.2), transparent 34%, rgba(53,101,151,.16)),
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.46));
  z-index:0;
}

.dashboard-page{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1180px;
  padding:92px 24px 70px;
}

.dashboard-page section{
  text-align:initial;
}

.referral-banner,
.dashboard-hero,
.dash-panel,
.stat-card{
  background:linear-gradient(145deg, rgba(14,22,37,.78), rgba(13,15,26,.62));
  border:1px solid rgba(93,122,167,.28);
  border-radius:8px;
  box-shadow:0 24px 70px -36px rgba(0,0,0,.95);
  backdrop-filter:blur(10px);
}

.referral-banner{
  min-height:132px;
  display:grid;
  grid-template-columns:82px 1fr auto;
  gap:26px;
  align-items:center;
  padding:28px;
  margin-bottom:28px;
  background:
    linear-gradient(120deg, rgba(214,111,25,.42), rgba(153,58,156,.36) 50%, rgba(36,80,143,.38)),
    rgba(14,22,37,.72);
  border-color:rgba(240,159,57,.36);
}

.referral-icon{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:30px;
  background:linear-gradient(135deg, #e27f24, #b34ce9);
}

.dash-eyebrow{
  display:block;
  margin-bottom:5px;
  color:#5be0b2;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.referral-banner h1{
  margin:0 0 8px;
  color:var(--gold-bright);
  font-family:'Cinzel',serif;
  font-size:30px;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.referral-banner p,
.dashboard-hero p,
.empty-character p,
.quick-action small{
  color:rgba(232,228,218,.68);
  line-height:1.55;
}

.dash-pill-button,
.dash-action,
.mini-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  border-radius:8px;
  font-family:'Cinzel',serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:transform .2s, filter .2s, border-color .2s;
}

.dash-pill-button,
.dash-action.primary,
.mini-button{
  color:#1d1106;
  background:linear-gradient(135deg, #ff8c19, #b46f13);
  border:1px solid transparent;
  padding:0 22px;
}

.dash-action{
  color:var(--ink);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  padding:0 20px;
}

.dash-pill-button:hover,
.dash-action:hover,
.mini-button:hover,
.quick-action:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}

.dashboard-hero{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  padding:28px 0 22px;
  margin-bottom:22px;
  background:transparent;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
}

.profile-mark{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:3px solid #00d08f;
  color:#39e2c3;
  background:rgba(15,31,39,.76);
  font-family:'Cinzel',serif;
  font-size:34px;
  font-weight:900;
}

.profile-title-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

.dashboard-hero h2{
  margin:0;
  color:#f4b23d;
  font-size:30px;
}

.status-pill,
.inline-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  min-height:28px;
  padding:0 13px;
  border-radius:999px;
  color:#47e9bf;
  background:rgba(30,183,135,.14);
  border:1px solid rgba(71,233,191,.32);
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
}

.status-pill span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#47e9bf;
  box-shadow:0 0 10px #47e9bf;
}

.hero-actions.compact{
  margin:0;
  justify-content:flex-end;
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  padding:0;
  margin-bottom:26px;
  background:transparent;
  border:none;
}

.stat-card{
  min-height:136px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.stat-icon,
.panel-icon,
.quick-action span,
.account-row span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.08);
}

.stat-card strong{
  color:#fff;
  font-size:22px;
  font-weight:900;
}

.stat-card small{
  color:rgba(232,228,218,.58);
  font-family:'Cinzel',serif;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.stat-card.teal .stat-icon{background:rgba(21,196,151,.18); color:#20e0b5;}
.stat-card.teal strong{color:#20e0b5;}
.stat-card.blue .stat-icon{background:rgba(65,145,255,.18); color:#68a8ff;}
.stat-card.blue strong{color:#68a8ff;}
.stat-card.purple .stat-icon{background:rgba(167,91,255,.18); color:#c179ff;}
.stat-card.purple strong{color:#c179ff;}
.stat-card.pink .stat-icon{background:rgba(255,86,172,.18); color:#ff64b5;}
.stat-card.pink strong{color:#ff64b5;}

.dashboard-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 352px;
  gap:20px;
  align-items:start;
}

.dashboard-main-col{
  display:grid;
  gap:20px;
}

.dash-panel{
  margin:0;
  padding:0;
  overflow:hidden;
}

.panel-head{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.panel-head h3{
  margin:0;
  color:#f0ad38;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.panel-icon{
  width:30px;
  height:30px;
  font-size:15px;
}

.panel-icon.purple{background:rgba(153,74,239,.2); color:#b85cff;}
.panel-icon.blue{background:rgba(68,143,232,.2); color:#5ea9ff;}
.panel-icon.gold{background:rgba(255,145,28,.18); color:#ffad3d;}

.character-panel{
  min-height:338px;
}

.empty-character{
  min-height:274px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px;
}

.empty-icon{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:8px;
  color:#a87a2b;
  background:rgba(170,107,28,.12);
  border:1px solid rgba(255,145,28,.18);
  font-size:32px;
}

.empty-character strong{
  color:#f5f1e8;
  font-family:'Cinzel',serif;
  font-size:18px;
  text-transform:uppercase;
}

.empty-character p{
  max-width:360px;
  margin:10px 0 20px;
}

.mini-button{
  min-height:38px;
  padding:0 18px;
  color:#ffd087;
  background:rgba(255,145,28,.1);
  border-color:rgba(255,145,28,.3);
}

.account-list{
  display:grid;
}

.account-row{
  display:grid;
  grid-template-columns:44px minmax(120px, 170px) minmax(0,1fr);
  gap:14px;
  align-items:center;
  min-height:62px;
  padding:10px 22px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.account-row:last-child{
  border-bottom:none;
}

.account-row span{
  width:34px;
  height:34px;
  color:#f0ad38;
  background:rgba(240,173,56,.12);
}

.account-row small{
  color:rgba(232,228,218,.48);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.account-row strong{
  min-width:0;
  color:#fff;
  overflow-wrap:anywhere;
}

.security-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
  padding:22px;
}

.security-form{
  max-width:none;
  margin:0;
  padding:22px;
  text-align:initial;
  background:rgba(7,10,17,.42);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:none;
}

.security-form::before,
.security-form::after{
  display:none;
}

.security-form h4{
  margin:0 0 16px;
  color:#ffd47d;
  font-family:'Cinzel',serif;
  font-size:16px;
  letter-spacing:.04em;
}

.security-form button{
  margin-top:16px;
}

.dash-sidebar{
  position:sticky;
  top:86px;
}

.quick-panel{
  padding-bottom:14px;
}

.quick-list{
  display:grid;
  gap:10px;
  padding:16px;
}

.quick-action{
  position:relative;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 16px;
  grid-template-rows:auto auto;
  column-gap:12px;
  align-items:center;
  min-height:70px;
  padding:12px;
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  transition:transform .2s, background .2s, border-color .2s;
}

.quick-action span{
  grid-row:1 / 3;
  color:#ffad3d;
  background:rgba(255,145,28,.13);
}

.quick-action strong{
  grid-column:2;
  color:#fff;
  font-size:13px;
}

.quick-action small{
  grid-column:2;
  display:block;
  margin-top:3px;
  font-size:11px;
}

.quick-action b{
  grid-column:3;
  grid-row:1 / 3;
  color:rgba(232,228,218,.38);
  font-size:24px;
  font-weight:400;
}

.quick-action:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(240,173,56,.24);
}

.online-side-card{
  margin:0 16px 16px;
  min-height:82px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(91,47,146,.18);
  border:1px solid rgba(177,108,255,.22);
}

.online-side-card span{
  display:flex;
  align-items:center;
  gap:7px;
  color:rgba(232,228,218,.74);
  font-family:'Cinzel',serif;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.online-side-card i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#41d49a;
  box-shadow:0 0 10px #41d49a;
}

.online-side-card strong{
  margin-top:8px;
  color:#c879ff;
  font-size:28px;
}

html[dir="rtl"] .dashboard-page,
html[dir="rtl"] .security-form,
html[dir="rtl"] .account-row,
html[dir="rtl"] .quick-action{
  text-align:right;
}

@media (max-width:1020px){
  .referral-banner{
    grid-template-columns:72px 1fr;
  }

  .dash-pill-button{
    grid-column:2;
    justify-self:start;
  }

  .dashboard-hero{
    grid-template-columns:70px 1fr;
  }

  .hero-actions.compact{
    grid-column:1 / -1;
    justify-content:flex-start;
  }

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

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

  .dash-sidebar{
    position:static;
  }
}

@media (max-width:680px){
  .dashboard-page{
    padding:82px 14px 46px;
  }

  .referral-banner,
  .dashboard-hero{
    grid-template-columns:1fr;
    padding:20px;
  }

  .referral-icon,
  .profile-mark{
    width:58px;
    height:58px;
    font-size:26px;
  }

  .referral-banner h1,
  .dashboard-hero h2{
    font-size:23px;
  }

  .dash-pill-button{
    grid-column:auto;
    justify-self:stretch;
  }

  .hero-actions.compact{
    justify-content:stretch;
  }

  .dash-action{
    flex:1 1 150px;
  }

  .stat-grid,
  .security-grid{
    grid-template-columns:1fr;
  }

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

  .account-row strong{
    grid-column:2;
  }

  .social-links{
    display:none;
  }
}

/* ===================== Vault dashboard redesign ===================== */
.vault-body{
  background:
    linear-gradient(180deg, rgba(5,7,10,.7), rgba(7,8,12,.96)),
    linear-gradient(115deg, rgba(102,44,28,.24), transparent 42%),
    linear-gradient(245deg, rgba(16,93,99,.18), transparent 46%),
    url('images/hero-bg.jpg') center top/cover fixed no-repeat;
}

.vault-body::before{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 84px),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.48));
}

.vault-dashboard{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1200px;
  padding:112px 24px 72px;
}

.vault-dashboard section{
  text-align:initial;
}

.vault-hero,
.vault-card,
.vault-security,
.payments-disabled{
  border-radius:8px;
  border:1px solid rgba(220,181,91,.18);
  background:linear-gradient(145deg, rgba(11,15,21,.86), rgba(13,18,25,.66));
  box-shadow:0 28px 90px -48px rgba(0,0,0,.95);
  backdrop-filter:blur(12px);
}

.vault-hero{
  position:relative;
  display:grid;
  grid-template-columns:132px minmax(0,1fr) 390px;
  gap:28px;
  align-items:center;
  min-height:230px;
  padding:34px;
  overflow:hidden;
  background:
    linear-gradient(100deg, rgba(177,116,34,.16), transparent 36%),
    linear-gradient(260deg, rgba(24,144,130,.16), transparent 36%),
    rgba(9,13,20,.78);
}

.vault-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:3px;
  background:linear-gradient(90deg, transparent, #c9a44a, #39d5bd, transparent);
  opacity:.75;
}

.vault-crest{
  position:relative;
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  clip-path:polygon(50% 0, 94% 24%, 94% 76%, 50% 100%, 6% 76%, 6% 24%);
  background:
    linear-gradient(145deg, rgba(49,224,194,.2), rgba(201,164,74,.22)),
    rgba(8,14,18,.92);
  border:1px solid rgba(67,229,199,.65);
  box-shadow:inset 0 0 0 2px rgba(201,164,74,.18), 0 0 42px rgba(57,213,189,.12);
}

.vault-crest span{
  color:#52f0d2;
  font-family:'Cinzel',serif;
  font-size:54px;
  font-weight:900;
  line-height:1;
}

.vault-crest i{
  position:absolute;
  right:22px;
  bottom:22px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#46e6b7;
  box-shadow:0 0 14px #46e6b7;
}

.vault-kicker,
.vault-card-head small,
.vault-section-head small,
.vault-list small,
.vault-meta small{
  color:#69dbc7;
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.vault-title h1{
  margin:8px 0 8px;
  color:#ffd47d;
  font-family:'Cinzel',serif;
  font-size:48px;
  line-height:1;
  letter-spacing:.02em;
}

.vault-title p,
.vault-section-head p,
.character-seal p,
.server-card p,
.payments-disabled p{
  color:rgba(232,228,218,.7);
  line-height:1.65;
}

.vault-meta{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.vault-meta div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:58px;
  padding:12px 16px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.vault-meta strong{
  color:#fff;
  font-family:'Cinzel',serif;
  font-size:17px;
  overflow-wrap:anywhere;
}

.vault-overview{
  display:grid;
  grid-template-columns:1.35fr .9fr .78fr;
  gap:18px;
  margin:22px 0;
  padding:0;
  background:transparent;
  border:none;
}

.vault-card{
  min-height:350px;
  padding:24px;
  margin:0;
}

.vault-card-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:26px;
}

.vault-card-head h2,
.vault-section-head h2{
  margin:4px 0 0;
  color:#f4b84a;
  font-family:'Cinzel',serif;
  font-size:19px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.vault-card-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:8px;
  color:#5ff0d2;
  background:rgba(49,224,194,.12);
  border:1px solid rgba(49,224,194,.2);
}

.vault-card-icon.amber{
  color:#ffc45d;
  background:rgba(255,183,75,.12);
  border-color:rgba(255,183,75,.2);
}

.vault-card-icon.green{
  color:#47e9ad;
  background:rgba(71,233,173,.12);
  border-color:rgba(71,233,173,.2);
}

.vault-list{
  display:grid;
  gap:12px;
}

.vault-list div{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:16px;
  align-items:center;
  min-height:54px;
  padding:12px 14px;
  border-radius:8px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}

.vault-list strong{
  color:#fff;
  overflow-wrap:anywhere;
}

.character-card{
  position:relative;
  overflow:hidden;
}

.character-card::after{
  content:"";
  position:absolute;
  inset:82px 24px 24px;
  pointer-events:none;
  border:1px solid rgba(201,164,74,.12);
  border-radius:8px;
}

.character-seal{
  position:relative;
  z-index:1;
  min-height:236px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px;
}

.character-seal span{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border-radius:8px;
  color:#c48a2d;
  background:rgba(201,132,38,.12);
  border:1px solid rgba(201,132,38,.25);
  font-size:32px;
}

.character-seal strong{
  color:#fff;
  font-family:'Cinzel',serif;
  font-size:18px;
  text-transform:uppercase;
}

.vault-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  margin-top:12px;
  padding:0 20px;
  border-radius:8px;
  border:1px solid rgba(201,164,74,.35);
  color:#ffd47d;
  background:rgba(201,164,74,.1);
  font-family:'Cinzel',serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:transform .2s, filter .2s, border-color .2s;
}

.vault-button:hover{
  transform:translateY(-2px);
  filter:brightness(1.12);
  border-color:rgba(201,164,74,.65);
}

.server-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.server-card .vault-card-head{
  width:100%;
}

.pulse-ring{
  width:142px;
  height:142px;
  display:grid;
  place-items:center;
  margin:auto 0 14px;
  border-radius:50%;
  background:
    conic-gradient(from 180deg, #47e9ad, #f2bc52, #47e9ad);
  padding:2px;
}

.pulse-ring span{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#0c1219;
  font-size:38px;
  font-weight:900;
}

.status-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:40px;
  margin-top:16px;
  border-radius:8px;
  color:#bff5e6;
  background:rgba(71,233,173,.1);
  border:1px solid rgba(71,233,173,.18);
  font-size:13px;
}

.status-strip i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#47e9ad;
  box-shadow:0 0 10px #47e9ad;
}

.vault-security{
  padding:26px;
}

.vault-section-head{
  max-width:620px;
  margin-bottom:22px;
}

.vault-section-head h2{
  font-size:24px;
}

.vault-security .security-grid{
  padding:0;
  gap:18px;
}

.vault-security .security-form{
  background:rgba(5,8,13,.52);
  border-color:rgba(255,255,255,.09);
}

.payments-disabled{
  max-width:760px;
  margin:70px auto 0;
  padding:48px 34px;
  text-align:center;
}

.disabled-mark{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin:0 auto 18px;
  border-radius:8px;
  color:#ffd47d;
  background:rgba(201,164,74,.12);
  border:1px solid rgba(201,164,74,.25);
  font-size:28px;
}

.payments-disabled .cta-button{
  margin-top:24px;
}

html[dir="rtl"] .vault-dashboard,
html[dir="rtl"] .vault-security .security-form{
  text-align:right;
}

@media (max-width:1080px){
  .vault-hero{
    grid-template-columns:116px minmax(0,1fr);
  }

  .vault-meta{
    grid-column:1 / -1;
    grid-template-columns:repeat(3, minmax(0,1fr));
  }

  .vault-overview{
    grid-template-columns:1fr 1fr;
  }

  .server-card{
    grid-column:1 / -1;
    min-height:260px;
  }
}

@media (max-width:760px){
  .vault-dashboard{
    padding:88px 14px 48px;
  }

  .vault-hero,
  .vault-overview,
  .vault-security .security-grid{
    grid-template-columns:1fr;
  }

  .vault-hero{
    padding:24px;
  }

  .vault-title h1{
    font-size:34px;
  }

  .vault-meta{
    grid-template-columns:1fr;
  }

  .vault-list div{
    grid-template-columns:1fr;
    gap:4px;
  }
}

/* ===================== Upgraded auth pages ===================== */
.upgraded-auth{
  justify-content:center;
  padding:112px 22px 64px;
}

.auth-shell{
  position:relative;
  z-index:2;
  width:min(100%, 940px);
  min-height:560px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(201,164,74,.28);
  background:rgba(8,10,14,.72);
  box-shadow:0 40px 120px -46px rgba(0,0,0,.95);
  backdrop-filter:blur(14px);
}

.auth-shell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(201,164,74,.14), transparent 36%),
    linear-gradient(225deg, rgba(64,217,190,.13), transparent 40%);
}

.auth-side,
.auth-form-panel{
  position:relative;
  z-index:1;
}

.auth-side{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:42px;
  min-height:560px;
  border-inline-end:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 24% 18%, rgba(201,164,74,.22), transparent 30%),
    linear-gradient(180deg, rgba(9,13,18,.08), rgba(7,9,13,.72));
}

.auth-side-kicker,
.auth-panel-head small{
  color:#63e6cf;
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.auth-side h1{
  margin:12px 0 12px;
  color:#ffd47d;
  font-family:'Cinzel',serif;
  font-size:42px;
  line-height:1.08;
  letter-spacing:.02em;
}

.auth-side p{
  color:rgba(232,228,218,.76);
  line-height:1.65;
  max-width:320px;
}

.auth-side-grid{
  display:grid;
  gap:10px;
  margin-top:28px;
}

.auth-side-grid span{
  min-height:38px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border-radius:8px;
  color:#f4ead2;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  font-size:13px;
}

.auth-form-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:42px;
}

.auth-panel-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}

.auth-mark{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#52f0d2;
  background:rgba(49,224,194,.12);
  border:1px solid rgba(49,224,194,.25);
  font-family:'Cinzel',serif;
  font-size:28px;
  font-weight:900;
  box-shadow:0 0 28px rgba(49,224,194,.08);
}

.auth-panel-head h2{
  margin:4px 0 0;
  color:#ffd47d;
  font-family:'Cinzel',serif;
  font-size:30px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.auth-form-v2{
  max-width:none;
  margin:0;
  padding:0;
  text-align:initial;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.auth-form-v2::before,
.auth-form-v2::after{
  display:none;
}

.auth-form-v2 .field{
  position:relative;
  margin:0 0 14px;
}

.auth-form-v2 .field .fi-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  inset-inline-start:8px;
  color:#e1b752;
  background:rgba(201,164,74,.09);
  border-radius:7px;
}

.auth-form-v2 input[type="text"],
.auth-form-v2 input[type="password"],
.auth-form-v2 input[type="email"]{
  height:56px;
  margin:0;
  padding:0 16px 0 58px !important;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}

html[dir="rtl"] .auth-form-v2 input[type="text"],
html[dir="rtl"] .auth-form-v2 input[type="password"],
html[dir="rtl"] .auth-form-v2 input[type="email"]{
  padding:0 58px 0 16px !important;
}

.auth-form-v2 input:focus{
  border-color:rgba(99,230,207,.58);
  background:rgba(11,19,24,.76);
  box-shadow:0 0 0 3px rgba(99,230,207,.08);
}

.auth-form-v2 input::placeholder{
  color:rgba(232,228,218,.46);
}

.captcha-field{
  display:grid;
  grid-template-columns:minmax(0,1fr) 132px;
  gap:12px;
  align-items:center;
}

.captcha-field .fi-icon{
  top:28px;
}

.auth-form-v2 .captcha-field input{
  grid-column:1;
}

.auth-form-v2 .captcha-field img[src="captcha.php"]{
  grid-column:2;
  width:132px;
  height:50px;
  object-fit:cover;
  margin:0;
  border-radius:8px;
  border:1px solid rgba(201,164,74,.26);
  background:#fff;
}

.auth-form-v2 button{
  height:54px;
  margin-top:8px;
  border-radius:8px;
  background:linear-gradient(135deg, #f0c35e, #9a711f);
  box-shadow:0 18px 42px -24px rgba(240,195,94,.8);
}

.auth-switch{
  margin-top:14px;
  text-align:center;
}

.auth-switch a{
  color:#e5c06a;
  font-size:13px;
}

.auth-switch.muted{
  margin-top:8px;
}

.auth-switch.muted a{
  color:#6de4cf;
}

.auth-form-v2 .error,
.auth-form-v2 .success{
  margin-bottom:16px;
}

html[dir="rtl"] .auth-form-panel,
html[dir="rtl"] .auth-form-v2{
  text-align:right;
}

@media (max-width:900px){
  .auth-shell{
    grid-template-columns:1fr;
    max-width:560px;
  }

  .auth-side{
    min-height:auto;
    padding:30px;
    border-inline-end:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .auth-side h1{
    font-size:32px;
  }

  .auth-form-panel{
    padding:30px;
  }
}

@media (max-width:560px){
  .upgraded-auth{
    padding:92px 14px 46px;
  }

  .auth-side,
  .auth-form-panel{
    padding:22px;
  }

  .captcha-field{
    grid-template-columns:1fr;
  }

  .auth-form-v2 .captcha-field img[src="captcha.php"]{
    grid-column:1;
    width:100%;
  }
}