/* =============================================
   CABAL ONLINE - MAIN STYLES
   Beautiful architecture with BEM conventions
   ============================================= */

/* =============================================
   VARIABLES & RESET
   ============================================= */
@font-face {
    font-family: 'Heir of Light';
    src: url('/fonts/HeirofLightRegular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html, body {
    font-family: 'Heir of Light', 'Noto Sans KR', sans-serif !important;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #000000;
    background-attachment: fixed;
    color: #e6eef6;
    font-family: 'Heir of Light', 'Noto Sans KR', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

:root{
  --bg:#000000;
  --panel:#0a0a0a;
  --muted:#6b7280;
  --accent:#10b981;
  --accent-2:#14b8a6;
  --accent-3:#34d399;
  --violet:#32142b;
  --glass: rgba(16,185,129,0.1);
  --success:#10b981;
  --danger:#ef4444;
  --radius:12px;
  --divider: rgba(16,185,129,0.3);
  --green-glow: rgba(20,184,166,0.5);
  --green-bright: #34d399;
  --green-teal: #14b8a6;
  --green-emerald: #10b981;
}

*{box-sizing:border-box;margin:0;padding:0;}
*, *::before, *::after{box-sizing:border-box;}
html,body{height:100%;margin:0;padding:0;}

/* =============================================
   BASE BODY STYLES
   ============================================= */

/* =============================================
   BASE LINK STYLES
   ============================================= */
a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  text-decoration: none;
}

.site{max-width:1200px;margin:0 auto;padding:0 20px;width:100%;box-sizing:border-box;flex:1;}

/* =============================================
   HEADER STYLES
   ============================================= */
.header{
  background:linear-gradient(180deg,var(--panel),rgba(10,10,10,0.95));
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(16,185,129,0.2);
  padding:16px 0;
  position:sticky;
  top:0;
  z-index:1000;
  margin-bottom:30px;
  width:100%;
  box-sizing:border-box;
}

.header__content{
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

.header__brand{display:flex;align-items:center;}
.header__brand-info h1{
  margin:0;
  font-size:28px;
  font-weight:800;
  color:var(--green-emerald);
  text-transform:uppercase;
  letter-spacing:2px;
  text-shadow:0 0 10px var(--green-glow);
}

/* =============================================
   NAVIGATION STYLES
   ============================================= */
.nav{display:flex;gap:4px;align-items:center;margin-left:-60px;}
.nav__link{
  padding:10px 16px;
  border-radius:8px;
  color:var(--muted);
  text-decoration:none;
  font-weight:500;
  font-size:14px;
  cursor:pointer;
  transition:all 0.3s ease;
  position:relative;
}
.nav__link:hover:not(.nav__link--active){color:white;background:linear-gradient(90deg,rgba(255,255,255,0.05),transparent);}
.nav__link--active,
.nav__link.nav__link--active{
  color:white !important;
  background:linear-gradient(90deg,var(--green-emerald),var(--green-teal)) !important;
  box-shadow:0 4px 12px var(--green-glow) !important;
}
.nav__link--active:hover{
  color:white !important;
  background:linear-gradient(90deg,var(--green-emerald),var(--green-teal)) !important;
  box-shadow:0 4px 12px var(--green-glow) !important;
}

/* =============================================
   USER MENU STYLES
   ============================================= */
.user-menu{position:relative;}
.user-menu__btn{
  padding:8px 12px;
  border-radius:8px;
  background:linear-gradient(90deg,rgba(255,255,255,0.03),transparent);
  border:1px solid rgba(255,255,255,0.05);
  color:var(--muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  transition:all 0.3s ease;
}
.user-menu__btn:hover{background:linear-gradient(90deg,rgba(255,255,255,0.05),transparent);}

.user-menu__dropdown{
  position:absolute;
  top:100%;
  right:0;
  background:linear-gradient(180deg,var(--panel),rgba(15,23,32,0.95));
  border:1px solid rgba(255,255,255,0.05);
  border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  min-width:180px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:all 0.3s ease;
  margin-top:8px;
}
.user-menu__dropdown--show,
.user-menu__dropdown--active{opacity:1;visibility:visible;transform:translateY(0);}
.user-menu__dropdown a{
  display:block;
  padding:12px 16px;
  color:var(--muted);
  text-decoration:none;
  transition:all 0.3s ease;
  border-bottom:1px solid rgba(255,255,255,0.02);
}
.user-menu__dropdown a:hover{background:linear-gradient(90deg,rgba(255,255,255,0.05),transparent);color:white;}
.user-menu__dropdown a:last-child{border-bottom:none;}

/* =============================================
   USER PROFILE STYLES (for authorized users)
   ============================================= */
.user-profile{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 16px;
  border-radius:25px;
  background:linear-gradient(90deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.1);
  color:white;
  text-decoration:none;
  transition:all 0.3s ease;
  font-weight:500;
}

.user-profile:hover{
  background:linear-gradient(90deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05));
  border-color:rgba(255,255,255,0.2);
  transform:translateY(-1px);
  color:var(--accent-2);
}

.user-profile__avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--green-teal),var(--green-emerald));
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:18px;
}

.user-profile__name{
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
}

/* =============================================
   BUTTONS STYLES
   ============================================= */
.btn{
  padding:10px 20px;
  border-radius:8px;
  border:0;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  transition:all 0.3s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn--primary{background:linear-gradient(90deg,var(--green-emerald),var(--green-teal));box-shadow:0 4px 16px var(--green-glow);color:white;}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--green-glow);}
.btn--ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--muted);}
.btn--ghost:hover{background:linear-gradient(90deg,rgba(255,255,255,0.05),transparent);color:white;}
.btn--danger{background:linear-gradient(135deg,var(--danger),#c54343);color:white;}
.btn--danger:hover{background:linear-gradient(135deg,#c54343,var(--danger));transform:translateY(-2px);}

/* =============================================
   MAIN CONTENT STYLES
   ============================================= */
.main{margin-bottom:40px;}

/* =============================================
   HERO SECTION STYLES
   ============================================= */
.hero{
  display:grid;
  grid-template-columns:1fr 400px;
  gap:30px;
  margin-bottom:40px;
  align-items:stretch;
}

.hero__content{
  display:flex;
  flex-direction:column;
  gap:20px;
  animation:heroFadeIn 1s ease-out;
}

@keyframes heroFadeIn{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}

.hero__intro{text-align:center;}

.hero__content h2{
  font-size:32px;
  font-weight:700;
  margin-bottom:12px;
  line-height:1.2;
  background:linear-gradient(135deg,white,var(--green-bright));
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
}

.hero__content h2::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:2px;
  background:linear-gradient(90deg,var(--green-emerald),var(--green-teal));
  border-radius:2px;
}

.hero__content p{
  font-size:16px;
  line-height:1.5;
  color:var(--muted);
  margin-bottom:0;
}

.hero__media{
  display:flex;
  justify-content:center;
}

.hero__stats{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* =============================================
   CARDS STYLES
   ============================================= */
.card{
  background:linear-gradient(180deg,var(--panel),rgba(10,10,10,0.8));
  padding:24px;
  border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,0,0,0.8);
  border:1px solid rgba(16,185,129,0.1);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--green-emerald),transparent);
  opacity:0.5;
}

/* =============================================
   VIDEO SECTION STYLES
   ============================================= */
.video-section{width:100%;}
.video-container{
  position:relative;
  width:100%;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  border:2px solid rgba(255,255,255,0.05);
  transition:all 0.3s ease;
}
.video-container:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  border-color:rgba(183,28,28,0.3);
}
.video-container iframe{
  width:100%;
  height:380px;
  border:none;
}

/* =============================================
   STATS SECTION STYLES
   ============================================= */
.stats-section{
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.stats-grid--compact{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.stat-item--compact{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:linear-gradient(90deg,rgba(255,255,255,0.03),transparent);
  border-radius:8px;
}

.stat-item--compact .number{
  font-size:24px;
  font-weight:800;
  color:var(--accent-2);
}

.stat-item--compact .label{
  font-size:13px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* =============================================
   RATES SECTION STYLES
   ============================================= */
.rates-section{padding-top:24px;}
.rates-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.rate-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:linear-gradient(90deg,var(--glass),transparent);
  border-radius:8px;
  border-left:2px solid var(--green-emerald);
}
.rate-item__name{
  font-size:14px;
  color:var(--muted);
  font-weight:500;
}
.rate-item__value{
  font-size:16px;
  font-weight:700;
  color:var(--green-bright);
}




/* =============================================
   NEWS SECTION STYLES
   ============================================= */
.section-header{
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:2px solid var(--divider);
}
.section-header h2{margin:0;font-size:28px;font-weight:700;}
.section-header p{margin:4px 0 0 0;color:var(--muted);font-size:16px;}

.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.news-item{
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  border-radius:10px;
  transition:all 0.3s ease;
  cursor:pointer;
  overflow:hidden;
}
.news-item:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(255,255,255,0.04),transparent);
  box-shadow:0 8px 24px var(--green-glow);
}
.news-item__image{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:10px 10px 0 0;
}
.news-item__content{padding:20px;}
.news-item h3{margin:0 0 8px 0;font-size:18px;font-weight:600;}
.news-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.5;}
.news-item__date{margin-top:12px;font-size:12px;color:var(--muted);opacity:0.7;}

/* =============================================
   RATING SECTION STYLES
   ============================================= */
.rating-tabs{
  display:flex;
  gap:8px;
  margin-bottom:24px;
  background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);
  padding:8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.05);
}
.rating-tab{
  flex:1;
  padding:12px 20px;
  background:transparent;
  border:none;
  color:var(--muted);
  border-radius:8px;
  cursor:pointer;
  transition:all 0.3s ease;
  font-weight:500;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.rating-tab:hover:not(.rating-tab--active){
  background:linear-gradient(90deg,rgba(255,255,255,0.05),transparent);
  color:white;
}
.rating-tab--active{
  background:linear-gradient(90deg,var(--green-emerald),var(--green-teal)) !important;
  color:white !important;
  box-shadow:0 4px 12px var(--green-glow) !important;
}
.rating-tab--active:hover{
  background:linear-gradient(90deg,var(--green-emerald),var(--green-teal)) !important;
  color:white !important;
  box-shadow:0 4px 12px var(--green-glow) !important;
}

/* =============================================
   TABLES STYLES
   ============================================= */
.table{width:100%;border-collapse:collapse;}
.table th,.table td{padding:16px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.03);font-size:14px;}
.table th{font-weight:600;color:white;background:linear-gradient(90deg,rgba(255,255,255,0.05),transparent);}
.table tr:hover{background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);}
.table .rank-column{width:60px;text-align:center;}
.table td:first-child{text-align:center;}

.rating-table{border-radius:8px;overflow:hidden;}
.rating-table thead tr{background:linear-gradient(90deg,var(--panel),rgba(15,23,32,0.9));}
.rating-table th{
  padding:18px 16px;
  font-weight:700;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:0.5px;
}
.rating-table td{padding:16px;font-size:14px;}

.rank-badge{
  min-width:32px;
  padding:6px 10px;
  border-radius:6px;
  background:linear-gradient(90deg,var(--green-emerald),var(--green-teal));
  display:inline-block;
  text-align:center;
  font-weight:700;
  color:white;
  font-size:13px;
}

/* =============================================
   FORMS STYLES
   ============================================= */
.form-container{max-width:500px;margin:0 auto;}
.form{display:flex;flex-direction:column;gap:20px;}
.form__field{display:flex;flex-direction:column;gap:8px;}
.form__label{font-size:14px;color:var(--muted);font-weight:500;}
.form__input{
  background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);
  border:1px solid rgba(255,255,255,0.06);
  padding:14px 16px;
  border-radius:8px;
  color:white;
  font-size:14px;
  transition:all 0.3s ease;
}
.form__input:focus{
  outline:none;
  border-color:var(--green-emerald);
  background:linear-gradient(90deg,rgba(255,255,255,0.04),transparent);
  box-shadow:0 0 0 3px var(--green-glow);
}
.form__footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}

/* =============================================
   MODALS STYLES
   ============================================= */
.modal{
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.78);
  backdrop-filter:blur(5px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
  opacity:0;
  visibility:hidden;
  transition:all 0.35s ease;
}
.modal--show,
.modal--active{opacity:1;visibility:visible;}

.modal__content{
  background:
    radial-gradient(circle at top center, rgba(85,225,214,0.06), transparent 35%),
    linear-gradient(180deg, rgba(10,16,24,0.98), rgba(7,12,18,0.985));
  border-radius:18px;
  padding:34px;
  max-width:500px;
  width:90%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:
    0 24px 70px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  transform:scale(0.88) translateY(18px);
  transition:all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position:relative;
}
.modal--show .modal__content,
.modal--active .modal__content{
  transform:scale(1) translateY(0);
}

.modal__header{
  margin-bottom:26px;
  text-align:center;
}

.modal__header h2{
  margin:0;
  font-size:24px;
  font-weight:800;
  color:#f4fbff;
  letter-spacing:0.2px;
  text-shadow:0 0 10px rgba(255,255,255,0.05);
}

.modal__header p{
  margin:10px 0 0 0;
  color:#b8c7d9;
  font-size:15px;
  font-weight:500;
  line-height:1.6;
}

.modal__close{
  position:absolute;
  top:16px;
  right:16px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  color:#9fb2c5;
  font-size:16px;
  cursor:pointer;
  padding:8px;
  border-radius:8px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.25s ease;
}
.modal__close:hover{
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.22);
  color:#ffffff;
  transform:scale(1.06);
}

/* =============================================
   CABINET STYLES
   ============================================= */
.cabinet-container{display:grid;grid-template-columns:280px 1fr;gap:30px;margin-top:40px;}
.cabinet-sidebar{position:sticky;top:100px;height:fit-content;z-index:10;}

.cabinet-nav{
  padding:0;
  overflow:hidden;
  border-radius:12px;
  background:linear-gradient(180deg,var(--panel),rgba(15,23,32,0.95));
  border:1px solid rgba(255,255,255,0.05);
}

.cabinet__user-profile{
  padding:20px;
  border-bottom:1px solid rgba(255,255,255,0.1);
  display:flex;
  align-items:center;
  gap:16px;
  background:linear-gradient(135deg,var(--glass),transparent);
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}

.cabinet__user-avatar{
  font-size:42px;
  color:var(--green-emerald);
  line-height:1;
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
}

.cabinet__user-info h3{margin:0;color:#e6eef6;font-size:18px;font-weight:600;}
.cabinet__user-status{margin:4px 0 0 0;color:var(--green-emerald);font-size:13px;font-weight:500;}

.cabinet-nav__list{display:flex;flex-direction:column;padding:0;margin:0;list-style:none;}
.cabinet-nav__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 24px;
  color:var(--muted);
  text-decoration:none;
  transition:all 0.3s ease;
  border:none;
  background:none;
  border-bottom:1px solid rgba(255,255,255,0.05);
  position:relative;
  margin:0;
  cursor:pointer;
}
.cabinet-nav__item:hover:not(.cabinet-nav__item--active){background:rgba(255,255,255,0.02);color:#e6eef6;}
.cabinet-nav__item--active{
  background:var(--green-emerald) !important;
  color:#fff !important;
  border-bottom:1px solid var(--green-emerald);
  font-weight:600;
  box-shadow:0 2px 8px var(--green-glow) !important;
}
.cabinet-nav__item--active:hover{
  background:var(--green-emerald) !important;
  color:#fff !important;
}
.cabinet-nav__item--active i{color:#fff;}
.cabinet-nav__item:last-child{border-bottom:none;}
.cabinet-nav__item i{width:18px;font-size:16px;text-align:center;}

.cabinet__content{display:flex;flex-direction:column;}
.cabinet__section{display:none;}
.cabinet__section--active{display:block;}

/* Cabinet Form Styles */
.cabinet__section .form-group{
  margin-bottom:1.5rem;
}

.cabinet__section label{
  display:block;
  margin-bottom:0.5rem;
  color:var(--text-light);
  font-weight:500;
}

.cabinet__section input[type="password"],
.cabinet__section input[type="text"],
.cabinet__section input[type="email"],
.cabinet__section select{
  width:100%;
  padding:0.8rem 1rem;
  background-color:var(--bg-darker);
  border:1px solid var(--border-color);
  border-radius:var(--border-radius-md);
  color:var(--text-light);
  font-size:1rem;
  transition:border-color 0.3s ease,box-shadow 0.3s ease;
}

.cabinet__section input:focus,
.cabinet__section select:focus{
  border-color:var(--green-emerald);
  outline:none;
  box-shadow:0 0 0 3px var(--green-glow);
}

.cabinet__section small{
  display:block;
  margin-top:0.4rem;
  color:var(--muted);
  font-size:0.85rem;
}

.cabinet__section .password-form,
.cabinet__section .pk-form{
  max-width:500px;
}

/* Alert Styles */
.alert{
  padding:1rem 1.5rem;
  border-radius:var(--border-radius-md);
  margin-bottom:1rem;
  border-left:4px solid;
}

.alert-warning{
  background:rgba(255,193,7,0.1);
  border-color:#ffc107;
  color:#ffc107;
}

.alert-success{
  background:rgba(40,167,69,0.1);
  border-color:#28a745;
  color:#28a745;
}

.alert-danger{
  background:rgba(220,53,69,0.1);
  border-color:#dc3545;
  color:#dc3545;
}

.alert-info{
  background:rgba(23,162,184,0.1);
  border-color:#17a2b8;
  color:#17a2b8;
}

.alert i{
  margin-right:0.5rem;
}

/* Button Warning Style */
.btn--warning{
  background:linear-gradient(135deg,#ffc107,#ff9800);
  color:#000;
  border:none;
  padding:0.75rem 1.5rem;
  border-radius:var(--border-radius-md);
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
}

.btn--warning:hover{
  background:linear-gradient(135deg,#ff9800,#ffc107);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(255,193,7,0.3);
}

/* =============================================
   FOOTER STYLES
   ============================================= */
.footer{
  background:linear-gradient(180deg,var(--panel),rgba(15,23,32,0.95));
  padding:32px 0;
  text-align:center;
  border-top:1px solid rgba(255,255,255,0.05);
  margin-top:60px;
  width:100%;
  box-sizing:border-box;
}
.footer .site{max-width:1200px;margin:0 auto;padding:0 20px;width:100%;box-sizing:border-box;}
.footer p{color:var(--muted);font-size:14px;margin:8px 0;}

.footer__social-links{display:flex;gap:16px;justify-content:center;margin-top:16px;}
.footer__social-links a{color:var(--muted);font-size:18px;transition:all 0.3s ease;}
.footer__social-links a:hover{color:var(--accent);transform:translateY(-2px);}

/* =============================================
   PROFILE & CHARACTER STYLES
   ============================================= */
.profile-info{margin:20px 0;}
.info-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.info-row:last-child{border-bottom:none;}
.info-label{color:var(--muted);}
.info-value{color:#e6eef6;font-weight:500;}
.profile-actions{display:flex;gap:12px;margin-top:24px;}
.info-balance{display:flex;align-items:center;gap:12px;}
.btn-balance-add{
  background:var(--accent);
  color:#fff;
  border:none;
  width:24px;
  height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.3s ease;
  font-size:12px;
}
.btn-balance-add:hover{background:#a91c2b;transform:scale(1.1);}

.characters-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
  margin-top:20px;
}
.character-card{
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:12px;
  padding:16px;
  transition:all 0.3s ease;
  cursor:pointer;
  text-align:center;
}
.character-card:hover{
  border-color:var(--green-glow);
  background:linear-gradient(180deg,rgba(255,255,255,0.04),transparent);
  transform:translateY(-2px);
}
.character-avatar{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:12px;
}
.character-info h4{margin:0 0 6px 0;color:#e6eef6;font-size:16px;}
.character-class{margin:0 0 8px 0;color:var(--green-emerald);font-size:14px;font-weight:500;}
.character-level{
  color:var(--muted);
  font-size:12px;
  padding:4px 8px;
  background:rgba(255,255,255,0.05);
  border-radius:6px;
  display:inline-block;
}

.status-active{color:#28a745!important;}

/* =============================================
   CHARACTER CLASSES STYLES
   ============================================= */
.classes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:24px;
  margin-top:30px;
}

.class-card{
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:var(--radius);
  overflow:hidden;
  transition:all 0.3s ease;
  display:flex;
  flex-direction:column;
}

.class-card:hover{
  border-color:var(--green-glow);
  background:linear-gradient(180deg,rgba(255,255,255,0.04),transparent);
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
}

.class-card__image-container{
  position:relative;
  width:100%;
  overflow:hidden;
}

.class-card__image{
  width:100%;
  min-height:300px;
  background:linear-gradient(135deg,rgba(16,185,129,0.1),rgba(20,184,166,0.1));
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.class-card__overlay{
  position:absolute;
  top:20px;
  left:20px;
  z-index:2;
}

.class-card__icon{
  width:60px;
  height:60px;
  background:rgba(0,0,0,0.5);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(10px);
  border:2px solid var(--green-teal);
}

.class-card__icon i{
  font-size:24px;
  color:var(--green-bright);
}

.class-card__content{
  padding:24px;
  flex:1;
  display:flex;
  flex-direction:column;
}

.class-card__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

.class-card__title{
  font-size:28px;
  font-weight:700;
  color:#e6eef6;
  margin:0;
  text-transform:uppercase;
  letter-spacing:1px;
}

.class-card__armor{
  background:var(--accent);
  color:#fff;
  padding:6px 12px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
}

.class-card__description{
  color:var(--muted);
  line-height:1.6;
  margin-bottom:24px;
  flex:1;
  font-size:14px;
}

.class-card__stats{
  margin-top:auto;
}

.class-stats__title{
  color:var(--accent-2);
  font-size:16px;
  font-weight:600;
  margin-bottom:16px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.class-stats__list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:16px;
}

.class-stat{
  display:flex;
  align-items:center;
  gap:12px;
}

.class-stat__label{
  min-width:100px;
  color:var(--muted);
  font-size:13px;
  font-weight:500;
}

.class-stat__bar-container{
  flex:1;
  height:8px;
  background:rgba(255,255,255,0.05);
  border-radius:4px;
  overflow:hidden;
  position:relative;
}

.class-stat__bar{
  height:100%;
  border-radius:4px;
  transition:width 0.3s ease;
}

.class-stat__bar--str{
  background:linear-gradient(90deg,var(--green-bright),var(--green-emerald));
}

.class-stat__bar--dex{
  background:linear-gradient(90deg,var(--green-teal),var(--green-bright));
}

.class-stat__bar--int{
  background:linear-gradient(90deg,var(--green-emerald),var(--green-teal));
}

.class-stat__value{
  min-width:60px;
  text-align:right;
  color:#e6eef6;
  font-size:13px;
  font-weight:600;
}

.class-card__primary-stat{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px;
  background:var(--glass);
  border-radius:8px;
  border:1px solid var(--green-glow);
  color:var(--green-bright);
  font-size:14px;
}

.class-card__primary-stat strong{
  color:#e6eef6;
  font-weight:700;
}

@media (max-width:768px){
  .classes-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  
  .class-card__title{
    font-size:24px;
  }
  
  .class-card__content{
    padding:20px;
  }
}
.status-premium{color:#ffc107!important;}
.status-blocked{color:#dc3545!important;}

/* =============================================
   DOWNLOAD STYLES
   ============================================= */
.download-hero{
  text-align:center;
  padding:32px 24px;
  background:linear-gradient(135deg,rgba(16,185,129,0.1),rgba(10,10,10,0.8));
}
.download-stats{
  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
}
.download-stat{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:14px;
}
.download-options{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
  gap:24px;
  margin-bottom:40px;
}
.download-card{
  display:flex;
  gap:20px;
  padding:24px;
  transition:all 0.3s ease;
}
.download-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px var(--green-glow);
}
.download-icon{
  width:80px;
  height:80px;
  background:linear-gradient(135deg,var(--green-emerald),var(--green-teal));
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.download-icon i{
  font-size:32px;
  color:white;
}
.download-content{flex:1;}
.download-content h3{
  margin:0 0 8px 0;
  font-size:20px;
  font-weight:700;
}
.download-content p{
  margin:0 0 16px 0;
  color:var(--muted);
  font-size:14px;
}
.download-features{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:16px;
}
.download-features .feature{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}
.download-features .feature i{
  color:var(--success);
  font-size:10px;
}
.download-size{
  font-size:13px;
  color:var(--accent-2);
  font-weight:600;
  margin-bottom:20px;
}
.download-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  font-size:14px;
}
.download-btn div{text-align:left;}
.download-btn span{display:block;font-weight:600;}
.download-btn small{display:block;font-size:11px;opacity:0.8;}

/* =============================================
   DOWNLOAD LIST STYLES (New Layout)
   ============================================= */
.download-list{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin:30px 0;
}
.download-list .download-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px;
  background:var(--bg-darker);
  border:1px solid var(--border-color);
  border-radius:var(--border-radius-md);
  transition:all 0.3s ease;
}
.download-list .download-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,255,136,0.15);
  border-color:var(--green-emerald);
}
.download-list .download-info{
  flex:1;
}
.download-header{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:12px;
}
.download-icon-small{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--green-emerald),var(--green-teal));
  border-radius:50%;
  flex-shrink:0;
}
.download-icon-small i{
  font-size:24px;
  color:#000;
}
.download-header h3{
  color:var(--text-light);
  margin:0 0 4px 0;
  font-size:20px;
  font-weight:700;
}
.download-header p{
  color:var(--muted);
  margin:0;
  font-size:14px;
}
.download-action{
  margin-left:24px;
}
.download-action .btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  white-space:nowrap;
}
.download-meta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
  margin-top:12px;
}
.download-meta span{
  display:flex;
  align-items:center;
  gap:4px;
}
.download-meta i{
  color:var(--green-emerald);
}

@media (max-width:768px){
  .download-list .download-card{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }
  .download-list .download-card > div:last-child{
    width:100%;
    margin-left:0;
  }
  .download-list .download-card .btn{
    width:100%;
    justify-content:center;
  }
  .download-meta{
    flex-direction:column;
    gap:8px;
  }
  .requirements-grid{
    grid-template-columns:1fr;
  }
  .download-action{
    margin-left:0;
    width:100%;
  }
}

/* =============================================
   SYSTEM REQUIREMENTS STYLES
   ============================================= */
.system-requirements{
  margin-top:40px;
}
.system-requirements h3{
  font-size:20px;
  margin-bottom:24px;
  font-weight:700;
  color:var(--green-emerald);
  text-align:center;
}
.system-requirements h3 i{
  margin-right:8px;
}
.requirements-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.req-column{
  background:linear-gradient(180deg,rgba(255,255,255,0.03),transparent);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:12px;
  padding:20px;
  transition:all 0.3s ease;
}
.req-column:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.1);
}
.req-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:2px solid rgba(255,255,255,0.05);
}
.req-header i{
  font-size:24px;
  color:var(--green-emerald);
}
.req-header h4{
  margin:0;
  font-size:16px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--text-light);
}
.req-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.req-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.02);
}
.req-item:last-child{border-bottom:none;}
.req-label{
  font-size:13px;
  color:var(--muted);
  font-weight:600;
  min-width:80px;
}
.req-value{
  font-size:13px;
  color:var(--text-light);
  font-weight:500;
  text-align:right;
  flex:1;
}

/* =============================================
   RULES STYLES
   ============================================= */
.rules-container{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:32px;
  margin-top:24px;
}
.rules-nav{
  position:sticky;
  top:120px;
  height:fit-content;
}
.rules-nav h3{
  margin:0 0 20px 0;
  font-size:18px;
  color:var(--accent-2);
  padding-bottom:16px;
  border-bottom:2px solid var(--divider);
}
.rules-nav-list{
  list-style:none;
  padding:0;
  margin:0;
}
.rules-nav-list li{margin-bottom:8px;}
.rules-nav-link{
  display:block;
  padding:12px 16px;
  color:var(--muted);
  text-decoration:none;
  border-radius:8px;
  transition:all 0.3s ease;
  font-size:14px;
  border-left:3px solid transparent;
}
.rules-nav-link:hover:not(.rules-nav-link--active){
  background:linear-gradient(90deg,rgba(255,255,255,0.05),transparent);
  color:white;
  border-left-color:var(--green-emerald);
}
.rules-nav-link--active{
  background:linear-gradient(90deg,var(--green-emerald),var(--green-teal)) !important;
  color:white !important;
  border-left-color:var(--green-bright) !important;
}
.rules-nav-link--active:hover{
  background:linear-gradient(90deg,var(--green-emerald),var(--green-teal)) !important;
  color:white !important;
  border-left-color:var(--green-bright) !important;
}
.rules-content{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.rule-section{display:none;padding:32px;}
.rule-section--active{display:block;}
.rule-section h3{
  margin:0 0 24px 0;
  font-size:24px;
  color:white;
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:16px;
  border-bottom:2px solid var(--divider);
}
.rule-section h3 i{
  color:var(--green-emerald);
  font-size:20px;
}
.rule-text p{
  margin-bottom:16px;
  line-height:1.6;
  color:var(--muted);
  font-size:15px;
}
.rule-text p strong{
  color:var(--green-bright);
  font-weight:700;
}

/* =============================================
   NEWS GRID & CARD STYLES
   ============================================= */
.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:24px;
  margin-bottom:40px;
}

.news-card{
  background:linear-gradient(180deg,var(--panel),rgba(15,23,32,0.8));
  border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(2,6,10,0.6);
  border:1px solid rgba(255,255,255,0.02);
  overflow:hidden;
  transition:all 0.3s ease;
  text-decoration:none;
  color:inherit;
  position:relative;
}

.news-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(2,6,10,0.8);
}

.news-card__image{
  width:100%;
  height:200px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:var(--violet);
}

.news-card__content{
  padding:24px 24px 60px 24px;
  display:flex;
  flex-direction:column;
  min-height:200px;
}

.news-card__meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.news-card__category{
  display:inline-block;
  padding:4px 8px;
  background:linear-gradient(90deg,var(--green-emerald),var(--green-teal));
  border-radius:6px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:white;
}

.news-card__date{
  color:var(--muted);
  font-size:12px;
}

.news-card__title{
  margin:0 0 12px 0;
  font-size:18px;
  font-weight:600;
  line-height:1.3;
}

.news-card__title a{
  color:white;
  text-decoration:none;
}

.news-card__title a:hover{
  color:var(--accent-2);
}

.news-card__excerpt{
  color:var(--muted);
  line-height:1.5;
  margin:0 0 16px 0;
  font-size:14px;
  flex-grow:1;
}

.news-card__link{
  position:absolute;
  bottom:16px;
  right:16px;
  color:var(--muted);
  text-decoration:none;
  font-weight:500;
  font-size:14px;
  transition:all 0.3s ease;
  padding:8px 16px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;
  background:rgba(255,255,255,0.02);
  text-align:center;
}

.news-card__link:hover{
  color:white;
  background:linear-gradient(90deg,rgba(255,255,255,0.05),transparent);
  border-color:rgba(255,255,255,0.2);
  transform:translateY(-2px);
}

.news-card--featured{
  border:2px solid var(--accent-2);
  transform:scale(1.02);
}

/* =============================================
   NEWS DETAIL STYLES
   ============================================= */
.news-detail{
  max-width:800px;
  margin:0 auto;
}

.news-detail__header{
  margin-bottom:32px;
  display:flex;
  align-items:center;
  gap:16px;
}

.news-detail__article{
  background:linear-gradient(180deg,var(--panel),rgba(15,23,32,0.8));
  border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(2,6,10,0.6);
  border:1px solid rgba(255,255,255,0.02);
  overflow:hidden;
}

.news-detail__image{
  width:100%;
  height:300px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.news-detail__content{
  padding:32px;
}

.news-detail__meta{
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:12px;
}

.news-detail__title{
  margin:0 0 24px 0;
  font-size:32px;
  font-weight:700;
  line-height:1.2;
  color:white;
}

.news-detail__text{
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
}

.news-detail__text p{
  margin-bottom:20px;
}

.news-detail-content{
  background:linear-gradient(180deg,var(--panel),rgba(15,23,32,0.8));
  padding:32px;
  border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(2,6,10,0.6);
  border:1px solid rgba(255,255,255,0.02);
}
.news-detail-header{
  margin-bottom:24px;
  text-align:center;
  padding-bottom:24px;
  border-bottom:2px solid var(--divider);
}
.news-detail-header h1{
  margin:0 0 8px 0;
  font-size:32px;
  font-weight:700;
  line-height:1.2;
}
.news-detail-date{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.news-detail-image{
  margin-bottom:32px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.news-detail-image img{
  width:100%;
  height:300px;
  object-fit:cover;
}
.news-detail-text{
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
}
.news-detail-text p{margin-bottom:20px;}
.news-detail-text h3{
  color:white;
  margin:32px 0 16px 0;
  font-size:20px;
  font-weight:600;
  padding-left:16px;
  border-left:4px solid var(--accent);
}

/* =============================================
   LOADING SPINNER
   ============================================= */
.loading-spinner {
  border: 3px solid rgba(255,255,255,0.1);
  border-top: 3px solid var(--accent-2);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =============================================
   LOGOUT CONFIRMATION STYLES
   ============================================= */
.logout-confirmation {
  text-align: center;
  padding: 20px 0;
}

.logout-icon {
  margin-bottom: 20px;
}

.logout-icon i {
  font-size: 48px;
  color: var(--danger);
  opacity: 0.8;
}

/* =============================================
   CUSTOM CHECKBOX STYLES
   ============================================= */
.agreement-checkbox {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  gap: 10px;
}

.checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}

.checkbox-custom {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
  transition: all 0.3s ease;
  margin-top: 1px; 
}

.checkbox-custom:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.05);
}

.checkbox-input:checked + .checkbox-custom {
  background: linear-gradient(135deg, var(--green-teal), var(--green-emerald));
  border-color: var(--green-teal);
  box-shadow: 0 0 15px var(--green-glow);
  transform: scale(1.05);
}

.checkbox-input:checked + .checkbox-custom::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
  opacity: 1;
}

.checkbox-text {
  flex: 1;
  margin-top: 0;
  line-height: 1.5;
}

/* =============================================
   UTILITIES
   ============================================= */
.muted{color:var(--muted);}
.pill{padding:6px 12px;border-radius:20px;background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);font-weight:600;font-size:12px;display:inline-block;}
.divider{margin:40px 0;height:1px;background:linear-gradient(90deg,transparent,var(--divider),transparent);border:none;}
.text-center{text-align:center;}
.mb-0{margin-bottom:0;}
.mt-0{margin-top:0;}
.hidden{display:none;}
.small{font-size:13px;color:var(--muted);}

/* =============================================
   DEFAULT PAGE DISPLAY (Fallback)
   ============================================= */
.view {
  display: none;
}

/* =============================================
   SERVER INFO SECTION
   ============================================= */
.server-info-section{
  background:linear-gradient(180deg,var(--panel),rgba(10,10,10,0.95));
  border:1px solid rgba(16,185,129,0.2);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:30px;
}

.server-info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;
  margin-bottom:20px;
}

.server-info-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  background:rgba(255,255,255,0.02);
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.05);
  transition:all 0.3s ease;
}

.server-info-item:hover{
  background:rgba(255,255,255,0.04);
  border-color:var(--green-glow);
}

.server-info-icon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--green-teal),var(--green-emerald));
  border-radius:8px;
  color:#fff;
  font-size:18px;
}

.server-info-icon--online i{
  color:var(--green-bright);
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.5;}
}

.server-info-content{
  flex:1;
}

.server-info-label{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:4px;
}

.server-info-value{
  font-size:16px;
  font-weight:600;
  color:#e6eef6;
}

.server-info-value--online{
  color:var(--green-bright);
}

.server-info-download{
  text-align:center;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.05);
}

.btn--large{
  padding:14px 32px;
  font-size:16px;
  font-weight:600;
}

/* =============================================
   HERO SLIDER
   ============================================= */
.hero-slider{
  position:relative;
  margin-bottom:40px;
  border-radius:var(--radius);
  overflow:hidden;
}

.slider-container{
  position:relative;
  width:100%;
  height:400px;
  background:linear-gradient(135deg,rgba(16,185,129,0.2),rgba(20,184,166,0.2));
  border-radius:var(--radius);
  overflow:hidden;
}

.slide{
  position:absolute;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 1s ease-in-out;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(16,185,129,0.1),rgba(20,184,166,0.1));
}

.slide.active{
  opacity:1;
  z-index:1;
}

.slide-content{
  text-align:center;
  z-index:2;
}

.slide-content h2{
  font-size:48px;
  font-weight:800;
  color:#fff;
  margin-bottom:16px;
  text-shadow:0 4px 12px rgba(0,0,0,0.5);
}

.slide-content p{
  font-size:24px;
  color:var(--accent-2);
  font-weight:600;
  text-shadow:0 2px 8px rgba(0,0,0,0.5);
}

.slider-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  display:flex;
  justify-content:space-between;
  padding:0 20px;
  z-index:10;
}

.slider-btn{
  width:50px;
  height:50px;
  border-radius:50%;
  background:rgba(0,0,0,0.5);
  border:2px solid rgba(255,255,255,0.3);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.3s ease;
  backdrop-filter:blur(10px);
}

.slider-btn:hover{
  background:rgba(16,185,129,0.8);
  border-color:var(--green-emerald);
  transform:scale(1.1);
}

.slider-dots{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  z-index:10;
}

.dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,0.3);
  cursor:pointer;
  transition:all 0.3s ease;
}

.dot.active,
.dot:hover{
  background:var(--accent-2);
  transform:scale(1.2);
}

.join-now-banner{
  text-align:center;
  margin-top:20px;
}

.btn--accent{
  background:linear-gradient(135deg,var(--green-teal),var(--green-emerald));
  color:#fff;
  border:none;
}

.btn--accent:hover{
  background:linear-gradient(135deg,var(--green-emerald),var(--green-teal));
  transform:translateY(-2px);
  box-shadow:0 8px 24px var(--green-glow);
}

/* =============================================
   RANKINGS SECTION
   ============================================= */
.rankings-section{
  margin:60px 0;
}

.rankings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
  gap:24px;
  margin-top:30px;
}

.ranking-card{
  padding:24px;
}

.ranking-card__title{
  font-size:24px;
  font-weight:700;
  color:#e6eef6;
  margin-bottom:20px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:1px;
}

.ranking-table{
  width:100%;
}

.ranking-table__header{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:12px;
  padding:12px 0;
  border-bottom:2px solid rgba(255,255,255,0.1);
  margin-bottom:12px;
}

.ranking-table__header .ranking-table__col{
  font-weight:600;
  color:var(--accent-2);
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:0.5px;
}

.ranking-table__body{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ranking-table__row{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:12px;
  padding:12px;
  background:rgba(255,255,255,0.02);
  border-radius:8px;
  transition:all 0.3s ease;
}

.ranking-table__row:hover{
  background:rgba(255,255,255,0.04);
  transform:translateX(4px);
}

.ranking-table__col{
  color:#e6eef6;
  font-size:14px;
}

.ranking-table__col strong{
  display:block;
  margin-bottom:4px;
  color:#fff;
}

.ranking-table__col small{
  color:var(--muted);
  font-size:12px;
}

.ranking-card__footer{
  text-align:center;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.05);
}

.btn--small{
  padding:8px 16px;
  font-size:13px;
}

/* =============================================
   INFORMATION SECTION
   ============================================= */
.information-section{
  margin:60px 0;
}

.information-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
  margin-top:30px;
}

.info-card{
  padding:20px;
  text-align:center;
}

.info-card__title{
  font-size:16px;
  font-weight:600;
  color:var(--accent-2);
  margin-bottom:12px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.info-card__value{
  font-size:14px;
  color:#e6eef6;
  line-height:1.6;
}

/* =============================================
   FOOTER ENHANCED
   ============================================= */
.footer__content{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:32px;
  margin-bottom:32px;
  text-align:left;
}

.footer__section{
  display:flex;
  flex-direction:column;
}

.footer__title{
  font-size:16px;
  font-weight:700;
  color:#e6eef6;
  margin-bottom:16px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.footer__links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer__links li a{
  color:var(--muted);
  text-decoration:none;
  transition:all 0.3s ease;
  font-size:14px;
}

.footer__links li a:hover{
  color:var(--accent-2);
  padding-left:4px;
}

.footer__text{
  color:var(--muted);
  font-size:14px;
  margin:4px 0;
  line-height:1.6;
}

.footer__text a{
  color:var(--accent-2);
  text-decoration:none;
}

.footer__text a:hover{
  text-decoration:underline;
}

.footer__social{
  text-align:center;
  padding:24px 0;
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  margin:24px 0;
}

.footer__bottom{
  text-align:center;
  padding-top:24px;
}

.footer__bottom p{
  margin:8px 0;
  color:var(--muted);
  font-size:13px;
}

.footer__back-to-top{
  position:fixed;
  bottom:30px;
  right:30px;
  z-index:999;
}

.footer__back-to-top a{
  width:50px;
  height:50px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--green-emerald),var(--green-teal));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 4px 12px var(--green-glow);
  transition:all 0.3s ease;
}

.footer__back-to-top a:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px var(--green-glow);
}

/* =============================================
   CLASS DETAIL PAGE (Exact Copy from Reference)
   ============================================= */
.class-detail-page{
  min-height:80vh;
  padding:40px 0;
}

.class-detail-container{
  display:grid;
  grid-template-columns:0.7fr 1.3fr;
  gap:40px;
  margin-bottom:60px;
  align-items:center;
}

.class-detail-left{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.class-detail-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:4px;
}

.class-detail-icon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.05);
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.1);
}

.class-detail-icon i{
  font-size:20px;
  color:#fff;
}

.class-detail-title{
  font-size:32px;
  font-weight:800;
  color:#fff;
  margin:0;
  text-transform:uppercase;
  letter-spacing:1px;
  text-shadow:0 2px 8px rgba(0,0,0,0.5);
}

.class-detail-description{
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,0.85);
  margin:0;
}

.class-detail-stats{
  margin-top:16px;
}

.class-detail-stats-title{
  font-size:14px;
  font-weight:700;
  color:var(--green-bright);
  margin-bottom:12px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.class-detail-stats-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.class-detail-stat{
  display:flex;
  align-items:center;
  gap:10px;
}

.class-detail-stat-label{
  min-width:80px;
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.7);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.class-detail-stat-bar-container{
  flex:1;
  height:8px;
  background:rgba(255,255,255,0.05);
  border-radius:4px;
  overflow:hidden;
  position:relative;
}

.class-detail-stat-bar{
  height:100%;
  border-radius:4px;
  transition:width 0.6s ease;
}

.class-detail-stat-bar--str{
  background:linear-gradient(90deg,var(--green-bright),var(--green-emerald));
  box-shadow:0 0 10px var(--green-glow);
}

.class-detail-stat-bar--dex{
  background:linear-gradient(90deg,var(--green-teal),var(--green-bright));
  box-shadow:0 0 10px var(--green-glow);
}

.class-detail-stat-bar--int{
  background:linear-gradient(90deg,var(--green-emerald),var(--green-teal));
  box-shadow:0 0 10px var(--green-glow);
}

.class-detail-stat-value{
  min-width:50px;
  text-align:right;
  font-size:12px;
  font-weight:700;
  color:#fff;
}

.class-detail-right{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.class-detail-image{
  width:100%;
  max-width:800px;
  height:800px;
  background:transparent;
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
  cursor:default;
  user-select:none;
  pointer-events:none;
}

.class-detail-character{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.class-character-image{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  user-select:none;
}

.class-character-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}


/* =============================================
   CLASS CAROUSEL (Bottom Navigation)
   ============================================= */
.class-carousel{
  position:relative;
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:60px;
  padding:20px 0;
  border-top:2px solid rgba(255,255,255,0.1);
}

.class-carousel-container{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  flex:1;
  padding:10px 0;
}

.class-carousel-container::-webkit-scrollbar{
  display:none;
}

.class-carousel-item{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:16px;
  border-radius:12px;
  background:rgba(255,255,255,0.02);
  border:2px solid rgba(255,255,255,0.1);
  text-decoration:none;
  transition:all 0.3s ease;
  min-width:100px;
  cursor:pointer;
}

.class-carousel-item:hover{
  background:rgba(255,255,255,0.05);
  border-color:var(--green-glow);
  transform:translateY(-4px);
}

.class-carousel-item.active{
  background:rgba(16,185,129,0.2);
  border-color:var(--green-teal);
  box-shadow:0 0 20px var(--green-glow);
  transform:scale(1.1);
}

.class-carousel-icon{
  width:60px;
  height:60px;
  border-radius:50%;
  background:rgba(0,0,0,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,0.2);
  transition:all 0.3s ease;
}

.class-carousel-item.active .class-carousel-icon{
  background:linear-gradient(135deg,var(--green-teal),var(--green-emerald));
  border-color:var(--green-teal);
  box-shadow:0 0 15px var(--green-glow);
}

.class-carousel-icon i{
  font-size:24px;
  color:#fff;
}

.class-carousel-name{
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,0.7);
  text-align:center;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.class-carousel-item.active .class-carousel-name{
  color:var(--green-bright);
  font-weight:700;
}

.class-carousel-btn{
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,255,255,0.05);
  border:2px solid rgba(255,255,255,0.1);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.3s ease;
  flex-shrink:0;
}

.class-carousel-btn:hover{
  background:var(--green-glow);
  border-color:var(--green-teal);
  transform:scale(1.1);
}

.class-card-link{
  text-decoration:none;
  color:inherit;
  display:block;
}

.class-card-link:hover .class-card{
  transform:translateY(-8px);
  border-color:var(--green-glow);
}

@media (max-width:1024px){
  .class-detail-container{
    grid-template-columns:1fr;
    gap:30px;
  }
  
  .class-detail-image{
    height:500px;
    max-width:100%;
  }
  
  .class-detail-title{
    font-size:24px;
  }
  
  .class-detail-description{
    font-size:12px;
  }
}

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;}
  .header__content{flex-direction:column;gap:16px;}
  .header__brand{justify-content:center;}
  .site{padding:0 15px;}
  .header__content{padding:0 15px;}
  .hero__content h2{font-size:28px;}
  .hero__content p{font-size:16px;}
  .stats-grid--compact{grid-template-columns:repeat(2,1fr);}
  .video-container iframe{height:320px;}
}

@media (max-width:768px){
  .site{padding:0 16px;}
  .header{padding:12px 0;}
  .header__content{max-width:none;padding:0 16px;}
  .header__brand-info h1{font-size:18px;}
  .nav{gap:2px;}
  .nav__link{padding:8px 12px;font-size:13px;}
  .news-grid{grid-template-columns:1fr;}
  .hero{gap:20px;}
  .hero__content h2{font-size:24px;}
  .hero__content p{font-size:14px;}
  .stats-grid--compact{grid-template-columns:1fr;}
  .video-container iframe{height:280px;}
  .rating-tab{padding:10px 16px;font-size:13px;}
  .cabinet-container{grid-template-columns:1fr;gap:20px;}
  .cabinet-sidebar{position:static;}
  .server-info-grid{grid-template-columns:1fr;}
  .slider-container{height:300px;}
  .slide-content h2{font-size:32px;}
  .slide-content p{font-size:18px;}
  .rankings-grid{grid-template-columns:1fr;}
  .information-grid{grid-template-columns:1fr;}
  .footer__content{grid-template-columns:1fr;text-align:center;}
}

@media (max-width:480px){
  .site{padding:0 12px;}
  .modal__content{padding:24px;}
  .form__footer{flex-direction:column;align-items:stretch;}
  .header{padding:12px 0;}
  .header__content{padding:0 12px;}
  .header__brand-info h1{font-size:16px;}
  .footer .site{padding:0 12px;}
  .hero__content h2{font-size:18px;}
  .hero__content p{font-size:13px;}
  .stat-item--compact{padding:10px 12px;}
  .stat-item--compact .number{font-size:20px;}
  .video-container iframe{height:240px;}
  .rating-tabs{flex-direction:column;}
  .rating-tab{padding:12px 16px;}
}


/* =========================================================
   PREMIUM HOMEPAGE REDESIGN OVERRIDE
   add this at the very bottom of styles.css
   ========================================================= */

:root{
  --bg-base:#04070b;
  --bg-deep:#071018;
  --bg-soft:#0c1720;
  --panel-strong:rgba(10,18,24,0.88);
  --panel-soft:rgba(11,19,27,0.72);
  --panel-stroke:rgba(121, 226, 255, 0.10);
  --panel-stroke-2:rgba(28, 214, 180, 0.14);

  --text-1:#f4fbff;
  --text-2:#c9d7e4;
  --text-3:#90a2b3;

  --accent-cyan:#66d9ff;
  --accent-teal:#1ee7c5;
  --accent-blue:#66aaff;
  --accent-gold:#ffd36b;

  --glow-cyan:0 0 24px rgba(102,217,255,0.16);
  --glow-teal:0 0 24px rgba(30,231,197,0.14);
  --shadow-xl:0 24px 60px rgba(0,0,0,0.42);
  --shadow-lg:0 14px 32px rgba(0,0,0,0.34);

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-xl:30px;

  --container:1280px;
}

/* base */
html{
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(circle at 10% 8%, rgba(30,231,197,0.10), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(102,217,255,0.09), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(40,120,255,0.06), transparent 28%),
    linear-gradient(180deg, #020508 0%, #071018 38%, #04070b 100%);
  color:var(--text-2);
  font-family:'Heir of Light','Noto Sans KR',sans-serif !important;
  letter-spacing:0.1px;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(to right, rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: linear-gradient(180deg, rgba(255,255,255,0.28), transparent 85%);
}

.site,
.header__content,
.footer .site{
  max-width:var(--container);
}

/* header */
.header{
  background:rgba(5,10,15,0.72);
  border-bottom:1px solid rgba(102,217,255,0.09);
  backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,0.18);
  margin-bottom:42px;
}

.header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(30,231,197,0.55), rgba(102,217,255,0.45), transparent);
  opacity:0.7;
}

.header__content{
  min-height:86px;
}

.header__brand-info h1{
  color:var(--text-1);
  font-size:30px;
  font-weight:900;
  letter-spacing:1.8px;
  text-transform:uppercase;
  text-shadow:
    0 0 22px rgba(30,231,197,0.14),
    0 0 10px rgba(102,217,255,0.10);
}

.nav{
  margin-left:0;
  gap:8px;
}

.nav__link{
  padding:12px 23px;
  border-radius:999px;
  color:var(--text-3);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.4px;
  border:1px solid transparent;
}

.nav__link:hover:not(.nav__link--active){
  color:var(--text-1);
  background:rgba(255,255,255,0.03);
  border-color:rgba(255,255,255,0.06);
}

.nav__link--active,
.nav__link.nav__link--active{
  color:#031015 !important;
  background:linear-gradient(135deg, var(--accent-teal) 0%, var(--accent-cyan) 100%) !important;
  box-shadow:
    0 10px 24px rgba(30,231,197,0.18),
    0 0 0 1px rgba(255,255,255,0.06) inset !important;
}

/* user menu / profile */
.user-menu__btn,
.user-profile{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
}

.user-menu__btn:hover,
.user-profile:hover{
  border-color:rgba(102,217,255,0.22);
  box-shadow:var(--glow-cyan);
}

.user-profile__avatar{
  background:linear-gradient(135deg, var(--accent-cyan), var(--accent-teal));
  box-shadow:0 10px 24px rgba(102,217,255,0.18);
}

/* buttons */
.btn{
  border-radius:14px;
  font-weight:800;
  letter-spacing:0.2px;
}

.btn--primary,
.btn--accent{
  color:#031015;
  background:linear-gradient(135deg, var(--accent-teal) 0%, var(--accent-cyan) 100%);
  box-shadow:
    0 12px 28px rgba(30,231,197,0.18),
    0 0 0 1px rgba(255,255,255,0.05) inset;
}

.btn--primary:hover,
.btn--accent:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 34px rgba(30,231,197,0.22),
    0 0 0 1px rgba(255,255,255,0.06) inset;
}

.btn--ghost{
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text-2);
}

.btn--ghost:hover{
  color:var(--text-1);
  border-color:rgba(102,217,255,0.20);
  box-shadow:var(--glow-cyan);
}

/* universal card system */
.card,
.news-card,
.news-detail__article,
.news-detail-content,
.req-column,
.class-card,
.download-list .download-card,
.ranking-card,
.server-info-section,
.cabinet-nav,
.rule-section{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    linear-gradient(180deg, var(--panel-strong), rgba(8,15,22,0.92));
  border:1px solid var(--panel-stroke);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px);
  position:relative;
  overflow:hidden;
}

.card::before,
.news-card::before,
.news-detail__article::before,
.news-detail-content::before,
.req-column::before,
.class-card::before,
.download-list .download-card::before,
.ranking-card::before,
.server-info-section::before,
.rule-section::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(30,231,197,0.7), rgba(102,217,255,0.55), transparent);
  opacity:0.72;
}

.card:hover,
.news-card:hover,
.req-column:hover,
.class-card:hover,
.download-list .download-card:hover,
.ranking-card:hover{
  border-color:var(--panel-stroke-2);
  box-shadow:
    0 22px 48px rgba(0,0,0,0.42),
    0 0 0 1px rgba(30,231,197,0.04) inset;
}

/* hero */
.hero{
  gap:32px;
  align-items:stretch;
}

.hero__content{
  background:
    radial-gradient(circle at 0% 0%, rgba(30,231,197,0.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
    linear-gradient(180deg, rgba(7,16,24,0.82), rgba(6,12,18,0.94));
  padding:34px;
  border:1px solid rgba(102,217,255,0.08);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
  position:relative;
  overflow:hidden;
}

.hero__content::after{
  content:"";
  position:absolute;
  inset:auto -10% -35% auto;
  width:280px;
  height:280px;
  background:radial-gradient(circle, rgba(102,217,255,0.16), transparent 65%);
  pointer-events:none;
}

.hero__content h2{
  font-size:44px;
  line-height:1.08;
  margin-bottom:16px;
  background:linear-gradient(135deg, #ffffff 0%, #d9faff 40%, #81f4de 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}

.hero__content h2::after{
  width:84px;
  height:3px;
  bottom:-10px;
  background:linear-gradient(90deg, var(--accent-teal), var(--accent-cyan));
  box-shadow:0 0 14px rgba(30,231,197,0.25);
}

.hero__content p{
  color:var(--text-3);
  font-size:16px;
  max-width:62ch;
}

.hero__stats{
  gap:18px;
}

/* slider */
.hero-slider,
.slider-container{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
}

.slider-container{
  height:460px;
  background:
    radial-gradient(circle at 20% 20%, rgba(30,231,197,0.18), transparent 26%),
    linear-gradient(135deg, rgba(10,18,24,0.94), rgba(6,12,18,0.94));
  border:1px solid rgba(102,217,255,0.08);
}

.slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.32)),
    radial-gradient(circle at 50% 45%, transparent 20%, rgba(0,0,0,0.18) 100%);
}

.slide-content h2{
  font-size:56px;
  letter-spacing:1px;
  color:var(--text-1);
  text-shadow:0 8px 30px rgba(0,0,0,0.55);
}

.slide-content p{
  font-size:22px;
  color:#b7fff2;
  text-shadow:0 4px 18px rgba(0,0,0,0.45);
}

.slider-btn{
  width:54px;
  height:54px;
  border:none;
  background:rgba(7,14,20,0.72);
  box-shadow:0 10px 28px rgba(0,0,0,0.35);
}

.slider-btn:hover{
  background:linear-gradient(135deg, var(--accent-teal), var(--accent-cyan));
  color:#031015;
  transform:scale(1.08);
}

.slider-dots .dot{
  width:10px;
  height:10px;
  background:rgba(255,255,255,0.18);
  box-shadow:none;
}

.slider-dots .dot.active,
.slider-dots .dot:hover{
  background:linear-gradient(135deg, var(--accent-teal), var(--accent-cyan));
  box-shadow:0 0 14px rgba(30,231,197,0.30);
}

/* section headers */
.section-header{
  margin-bottom:28px;
  padding-bottom:18px;
  border-bottom:none;
  position:relative;
}

.section-header::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:120px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent-teal), var(--accent-cyan), transparent);
  box-shadow:0 0 18px rgba(30,231,197,0.18);
}

.section-header h2{
  font-size:34px;
  font-weight:800;
  color:var(--text-1);
  letter-spacing:-0.4px;
}

.section-header p{
  margin-top:8px;
  color:var(--text-3);
  font-size:15px;
}

/* server info */
.server-info-section{
  padding:28px;
}

.server-info-item{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
}

.server-info-item:hover{
  border-color:rgba(102,217,255,0.16);
  box-shadow:var(--glow-cyan);
}

.server-info-icon{
  border-radius:12px;
  background:linear-gradient(135deg, var(--accent-cyan), var(--accent-teal));
  box-shadow:0 10px 24px rgba(30,231,197,0.14);
}

/* stats / mini cards */
.stat-item--compact,
.rate-item{
  border-radius:14px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.025), transparent),
    rgba(255,255,255,0.01);
  border:1px solid rgba(255,255,255,0.05);
}

.stat-item--compact .number,
.rate-item__value{
  color:#c8fff3;
}

/* tabs */
.rating-tabs{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  padding:8px;
}

.rating-tab{
  border-radius:12px;
  font-weight:700;
}

.rating-tab--active{
  color:#031015 !important;
  background:linear-gradient(135deg, var(--accent-teal), var(--accent-cyan)) !important;
}

/* tables */
.table,
.rating-table{
  border-collapse:separate;
  border-spacing:0;
}

.table th,
.table td,
.rating-table th,
.rating-table td{
  border-bottom:1px solid rgba(255,255,255,0.04);
}

.table th,
.rating-table th{
  color:#b8fff2;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  font-size:12px;
  letter-spacing:0.7px;
}

.table tr:hover,
.rating-table tbody tr:hover{
  background:linear-gradient(90deg, rgba(30,231,197,0.04), rgba(102,217,255,0.02));
}

.rank-badge{
  background:linear-gradient(135deg, var(--accent-teal), var(--accent-cyan));
  color:#031015;
  box-shadow:0 8px 18px rgba(30,231,197,0.18);
}

/* news */
.news-grid{
  gap:24px;
}

.news-card{
  border-radius:20px;
}

.news-card__image{
  height:220px;
  filter:saturate(1.02) contrast(1.03);
}

.news-card__content{
  padding:24px 24px 70px 24px;
}

.news-card__category{
  color:#031015;
  background:linear-gradient(135deg, var(--accent-teal), var(--accent-cyan));
  box-shadow:0 8px 18px rgba(30,231,197,0.18);
}

.news-card__title{
  color:var(--text-1);
  font-size:20px;
  font-weight:700;
}

.news-card__excerpt{
  color:var(--text-3);
}

.news-card__link{
  border-radius:12px;
  background:rgba(255,255,255,0.025);
}

.news-card__link:hover{
  color:var(--text-1);
  border-color:rgba(102,217,255,0.20);
  box-shadow:var(--glow-cyan);
}

/* class cards */
.class-card{
  border-radius:20px;
}

.class-card__image{
  min-height:320px;
  background:
    radial-gradient(circle at 50% 20%, rgba(30,231,197,0.16), transparent 25%),
    linear-gradient(135deg, rgba(8,16,24,0.96), rgba(10,18,24,0.86));
}

.class-card__title{
  color:var(--text-1);
  font-size:30px;
}

.class-card__armor{
  color:#031015;
  background:linear-gradient(135deg, var(--accent-gold), #ffefad);
}

.class-card__description{
  color:var(--text-3);
}

.class-card__primary-stat{
  background:rgba(30,231,197,0.08);
  border:1px solid rgba(30,231,197,0.18);
  color:#c9fff6;
}

/* forms */
.form__input,
.cabinet__section input[type="password"],
.cabinet__section input[type="text"],
.cabinet__section input[type="email"],
.cabinet__section select{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  color:var(--text-1);
}

.form__input:focus,
.cabinet__section input:focus,
.cabinet__section select:focus{
  border-color:rgba(30,231,197,0.45);
  box-shadow:
    0 0 0 4px rgba(30,231,197,0.08),
    0 0 24px rgba(30,231,197,0.10);
}

/* modal */
.modal{
  background:rgba(2,5,8,0.78);
  backdrop-filter:blur(8px);
}

.modal__content{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    linear-gradient(180deg, rgba(10,18,24,0.96), rgba(7,13,19,0.98));
  border:1px solid rgba(102,217,255,0.10);
  border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,0.50);
}

.modal__header h2{
  color:var(--text-1);
}

.modal__header p{
  color:var(--text-3);
}

/* rules */
.rules-nav h3,
.system-requirements h3,
.class-stats__title,
.info-card__title,
.ranking-card__title{
  color:#c6fff2;
}

.rules-nav-link{
  border-radius:12px;
}

.rules-nav-link--active{
  color:#031015 !important;
  background:linear-gradient(135deg, var(--accent-teal), var(--accent-cyan)) !important;
}

.rule-section h3{
  color:var(--text-1);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

/* footer */
.footer{
  background:
    linear-gradient(180deg, rgba(7,13,19,0.86), rgba(4,8,12,0.98));
  border-top:1px solid rgba(102,217,255,0.08);
  position:relative;
}

.footer::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(30,231,197,0.6), rgba(102,217,255,0.5), transparent);
}

.footer__title{
  color:var(--text-1);
}

.footer__links li a,
.footer__text,
.footer__bottom p{
  color:var(--text-3);
}

.footer__links li a:hover{
  color:#bffbf1;
}

.footer__social-links a{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

.footer__social-links a:hover{
  color:#031015;
  background:linear-gradient(135deg, var(--accent-teal), var(--accent-cyan));
  box-shadow:0 12px 24px rgba(30,231,197,0.18);
}

/* back to top */
.footer__back-to-top a{
  width:56px;
  height:56px;
  background:linear-gradient(135deg, var(--accent-teal), var(--accent-cyan));
  color:#031015;
  box-shadow:0 14px 28px rgba(30,231,197,0.22);
}

.footer__back-to-top a:hover{
  transform:translateY(-5px) scale(1.03);
}

/* responsive refinement */
@media (max-width: 1100px){
  .hero{
    grid-template-columns:1fr;
  }

  .hero__content h2{
    font-size:38px;
  }

  .slide-content h2{
    font-size:44px;
  }
}

@media (max-width: 768px){
  .header__content{
    flex-wrap:wrap;
    gap:16px;
    justify-content:center;
  }

  .nav{
    flex-wrap:wrap;
    justify-content:center;
  }

  .hero__content{
    padding:24px;
  }

  .hero__content h2{
    font-size:30px;
  }

  .slide-content h2{
    font-size:32px;
  }

  .slide-content p{
    font-size:18px;
  }

  .section-header h2{
    font-size:28px;
  }

  .news-card__image{
    height:180px;
  }
}

/* ===== HEADER MENU SIZE FIX ===== */
.header .nav .nav__link,
.header .nav__link,
.nav__link {
  font-size: 18px !important;
  font-weight: 700 !important;
  padding: 14px 24px !important;
  letter-spacing: 0.3px !important;
}

.header .nav,
.nav {
  gap: 12px !important;
}

.header .nav .nav__link--active,
.header .nav__link--active,
.nav__link--active {
  font-size: 18px !important;
  padding: 14px 26px !important;
}

@media (max-width: 768px) {
  .header .nav .nav__link,
  .header .nav__link,
  .nav__link {
    font-size: 15px !important;
    padding: 10px 16px !important;
  }

  .header .nav .nav__link--active,
  .header .nav__link--active,
  .nav__link--active {
    font-size: 15px !important;
    padding: 10px 18px !important;
  }
}


.player-ranking-page {
    width: 100%;
}

.player-ranking-header {
    margin-bottom: 20px;
}

.player-ranking-header h2 {
    margin: 0;
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    position: relative;
    display: inline-block;
}

.player-ranking-header h2::after {
    content: "";
    display: block;
    width: 90px;
    height: 3px;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #20e3d2, rgba(32, 227, 210, 0.15));
}

.player-ranking-card {
    width: 100%;
    padding: 28px;
    border-radius: 24px;
    background: rgba(7, 18, 28, 0.78);
    border: 1px solid rgba(39, 223, 210, 0.16);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
}

.player-ranking-title {
    margin: 0 0 24px;
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: #dffefd;
}

.player-ranking-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.player-ranking-table {
    width: 100%;
    min-width: 1200px;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.player-ranking-table thead th {
    padding: 16px 14px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #1ee6d3;
    border-bottom: 1px solid rgba(30, 230, 211, 0.16);
    white-space: nowrap;
}

.player-ranking-table tbody tr {
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
}

.player-ranking-table tbody tr:hover {
    background: rgba(30, 230, 211, 0.06);
}

.player-ranking-table tbody td {
    padding: 18px 14px;
    text-align: center;
    font-size: 15px;
    color: #e8f3ff;
    vertical-align: middle;
}

.player-ranking-table tbody td strong {
    color: #ffffff;
    font-weight: 700;
}

.player-ranking-table tbody tr td:first-child {
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

.player-ranking-table tbody tr td:last-child {
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

.empty-row {
    text-align: center;
    color: #9fb3c8;
    padding: 30px 0 !important;
}


.player-ranking-table {
    display: table !important;
}

.player-ranking-table thead {
    display: table-header-group !important;
}

.player-ranking-table tbody {
    display: table-row-group !important;
}

.player-ranking-table tr {
    display: table-row !important;
}

.player-ranking-table th,
.player-ranking-table td {
    display: table-cell !important;
}

/* =========================
   DOWNLOAD PAGE STYLE
========================= */

.download-card.main-download {
    border: 1px solid rgba(30,230,211,0.25);
    background: linear-gradient(135deg, rgba(10,30,40,0.9), rgba(5,15,25,0.95));
    box-shadow: 0 0 20px rgba(30,230,211,0.15);
    position: relative;
}

.download-card.main-download::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: radial-gradient(circle at top, rgba(30,230,211,0.15), transparent 70%);
    pointer-events: none;
}

.download-badge {
    margin-left: 8px;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(30,230,211,0.2);
    color: #1ee6d3;
    font-weight: 700;
}

.download-action .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(30,230,211,0.4);
}

.download-tip {
    margin-top: 10px;
    font-size: 13px;
    color: #9fb3c8;
}


/* ===== DOWNLOAD PAGE READABILITY FIX ===== */

.section-header h2{
  color:#f4fbff;
  text-shadow:0 0 10px rgba(255,255,255,0.04);
}

.section-header p{
  color:#b8c7d9;
  font-size:15px;
  font-weight:500;
}

.download-hero{
  background:linear-gradient(135deg, rgba(18,30,42,0.95), rgba(9,14,22,0.92));
  border:1px solid rgba(95,210,255,0.10);
}

.download-stat{
  color:#d9e8f5;
  font-size:15px;
  font-weight:600;
}

.download-list .download-card{
  background:linear-gradient(180deg, rgba(8,20,30,0.96), rgba(5,12,20,0.96));
  border:1px solid rgba(55,228,214,0.14);
  box-shadow:0 10px 28px rgba(0,0,0,0.26);
}

.download-header h3{
  color:#f4fbff !important;
  font-size:28px;
  font-weight:800;
  letter-spacing:0.2px;
}

.download-tip{
  margin:6px 0 4px;
  color:#c9f7ef;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
}

.download-header p{
  color:#aebfd0 !important;
  font-size:14px;
  font-weight:500;
}

.download-meta{
  color:#9fb2c5 !important;
  font-size:14px;
  font-weight:500;
}

.download-meta span{
  color:#9fb2c5;
}

.download-meta i{
  color:#62ead8 !important;
}

.download-action .btn{
  font-size:15px;
  font-weight:800;
}

.system-requirements{
  background:linear-gradient(180deg, rgba(11,20,30,0.96), rgba(7,12,18,0.96));
  border:1px solid rgba(95,210,255,0.10);
}

.system-requirements h3{
  color:#f4fbff;
  font-size:30px;
  font-weight:800;
}

.req-column{
  background:linear-gradient(180deg, rgba(14,22,30,0.94), rgba(9,15,22,0.94));
  border:1px solid rgba(255,255,255,0.07);
}

.req-header h4{
  color:#f4fbff !important;
  font-size:24px;
  font-weight:800;
}

.req-label{
  color:#aab9c8 !important;
  font-size:15px;
  font-weight:600;
}

.req-value{
  color:#edf6ff !important;
  font-size:15px;
  font-weight:700;
}

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

/* ===== MODAL TEXT FINAL OVERRIDE ===== */

.modal .form__label{
  color:#d8e5f2 !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:0.15px !important;
}

.modal .form__input{
  color:#eef7ff !important;
  font-size:15px !important;
  font-weight:500 !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.015)) !important;
}

.modal .form__input::placeholder{
  color:#8ea3b8 !important;
  opacity:1 !important;
  font-weight:500 !important;
}

.modal .form__field small,
.modal .small{
  color:#93a7bb !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.5 !important;
}

.modal .checkbox-label,
.modal .checkbox-text{
  color:#d8e5f2 !important;
  font-weight:500 !important;
}

.modal .checkbox-text a,
.modal .form__footer a{
  color:#66e6da !important;
  font-weight:700 !important;
}


/* ===== DOWNLOAD PAGE FINAL OVERRIDE ===== */

.section-header h2{
  color:#f4fbff !important;
}

.section-header p{
  color:#b8c7d9 !important;
  font-size:15px !important;
  font-weight:500 !important;
}

.download-hero{
  background:linear-gradient(135deg, rgba(18,30,42,0.95), rgba(9,14,22,0.92)) !important;
  border:1px solid rgba(95,210,255,0.10) !important;
}

.download-stat{
  color:#d9e8f5 !important;
  font-size:15px !important;
  font-weight:600 !important;
}

.download-card.main-download{
  border:1px solid rgba(30,230,211,0.25) !important;
  background:linear-gradient(135deg, rgba(10,30,40,0.96), rgba(5,15,25,0.98)) !important;
  box-shadow:0 0 20px rgba(30,230,211,0.15) !important;
}

.download-header h3{
  color:#f4fbff !important;
  font-size:28px !important;
  font-weight:800 !important;
}

.download-tip{
  margin-top:10px !important;
  color:#c9f7ef !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.5 !important;
}

.download-header p{
  color:#aebfd0 !important;
  font-size:14px !important;
  font-weight:500 !important;
}

.download-meta{
  color:#9fb2c5 !important;
  font-size:14px !important;
  font-weight:500 !important;
}

.download-meta span{
  color:#9fb2c5 !important;
}

.download-meta i{
  color:#62ead8 !important;
}

.system-requirements{
  background:linear-gradient(180deg, rgba(11,20,30,0.96), rgba(7,12,18,0.96)) !important;
  border:1px solid rgba(95,210,255,0.10) !important;
}

.system-requirements h3{
  color:#f4fbff !important;
  font-size:30px !important;
  font-weight:800 !important;
}

.req-column{
  background:linear-gradient(180deg, rgba(14,22,30,0.94), rgba(9,15,22,0.94)) !important;
  border:1px solid rgba(255,255,255,0.07) !important;
}

.req-header h4{
  color:#f4fbff !important;
  font-size:24px !important;
  font-weight:800 !important;
}

.req-label{
  color:#aab9c8 !important;
  font-size:15px !important;
  font-weight:600 !important;
}

.req-value{
  color:#edf6ff !important;
  font-size:15px !important;
  font-weight:700 !important;
}

/* ===== MODAL FINAL FIX (가독성 완전 개선) ===== */

.modal{
  font-weight:500;
}

/* 제목 */
.modal__header h2{
  color:#ffffff !important;
  font-weight:800 !important;
  letter-spacing:0.5px;
}

/* 설명 */
.modal__header p{
  color:#bcd0e0 !important;
  font-size:14px;
  font-weight:500;
}

/* 라벨 (사용자ID, 이메일 등) */
.modal .form__label{
  color:#e6f1fb !important;
  font-weight:700 !important;
  font-size:14px;
}

/* 입력창 */
.modal .form__input{
  color:#ffffff !important;
  font-weight:500 !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  background:rgba(255,255,255,0.03) !important;
}

/* placeholder */
.modal .form__input::placeholder{
  color:#9fb3c8 !important;
  opacity:1 !important;
  font-weight:500;
}

/* 밑에 설명 (4~32자 이런거) */
.modal small,
.modal .form__field small{
  color:#aabed0 !important;
  font-size:12px;
  font-weight:500;
}

/* 체크박스 */
.modal .checkbox-text{
  color:#dce9f5 !important;
  font-weight:500;
}

/* 링크 (규칙) */
.modal a{
  color:#5fe2d4 !important;
  font-weight:700;
}

/* 버튼 대비 */
.modal .btn{
  font-weight:800;
  letter-spacing:0.3px;
}

/* ===== MODAL TEXT FINAL OVERRIDE ===== */
.modal .form__label{
  color:#e6f1fb !important;
  font-weight:700 !important;
  font-size:14px !important;
}

.modal .form__input{
  color:#ffffff !important;
  font-weight:500 !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  background:rgba(255,255,255,0.03) !important;
}

.modal .form__input::placeholder{
  color:#9fb3c8 !important;
  opacity:1 !important;
}

.modal small,
.modal .small{
  color:#aabed0 !important;
  font-weight:500 !important;
}

.modal .checkbox-label,
.modal .checkbox-text{
  color:#dce9f5 !important;
}

.modal a{
  color:#5fe2d4 !important;
  font-weight:700 !important;
}

/* ===== DOWNLOAD READABILITY FIX ===== */
.section-header p{
  color:#b8c7d9 !important;
}

.download-stat{
  color:#d9e8f5 !important;
}

.download-header h3{
  color:#f4fbff !important;
}

.download-tip{
  color:#c9f7ef !important;
  font-weight:700 !important;
}

.download-header p{
  color:#aebfd0 !important;
}

.download-meta,
.download-meta span{
  color:#9fb2c5 !important;
}

.req-label{
  color:#aab9c8 !important;
}

.req-value{
  color:#edf6ff !important;
  font-weight:700 !important;
}

body{
  background:
    radial-gradient(circle at 10% 8%, rgba(30,231,197,0.10), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(102,217,255,0.09), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(40,120,255,0.06), transparent 28%),
    linear-gradient(180deg, #020508 0%, #071018 38%, #04070b 100%);
  color:var(--text-2);
  font-family:'Heir of Light','Noto Sans KR',sans-serif !important;
  letter-spacing:0.1px;
  position:relative;
}