/* ============================================
   SKYARENA — Cinematic Frost Theme
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --frost:#4ab0f0;
  --frost-dark:#1a6aaa;
  --frost-dim:#2a7abf;
  --bg:#020b14;
  --bg2:#030f1e;
  --bg3:#051525;
  --text:#c8dff0;
  --text-muted:#5a8aaa;
  --text-dim:#3a6a8a;
  --border:rgba(80,160,220,0.15);
  --border-hover:rgba(80,160,220,0.4);
  --gold:#c8a84b;
  --gold-dark:#8a6a2a;
  --red:#e05050;
  --green:#40d080;
}
html{scroll-behavior:smooth;}
body{font-family:'Rajdhani',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}
input,textarea,select{font-family:'Rajdhani',sans-serif;}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--frost-dark);border-radius:3px;}

/* ── CONTAINER ── */
.sa-container{max-width:1200px;margin:0 auto;padding:0 32px;}

/* ── NAVBAR ── */
.sa-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;
  background:rgba(2,11,20,0.95);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
}
.sa-nav-logo{font-family:'Cinzel',serif;font-size:1.25rem;font-weight:700;color:#e0f0ff;letter-spacing:4px;}
.sa-nav-logo span{color:var(--frost);}
.sa-nav-links{display:flex;gap:28px;}
.sa-nav-links a{font-size:0.75rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);transition:color 0.2s;}
.sa-nav-links a:hover,.sa-nav-links a.active{color:var(--frost);}
.sa-nav-right{display:flex;align-items:center;gap:10px;}
.sa-nav-user{font-size:0.8rem;color:var(--text);font-family:'Cinzel',serif;letter-spacing:1px;}
.sa-nav-dp{font-size:0.72rem;color:var(--gold);background:rgba(200,168,75,0.08);border:1px solid rgba(200,168,75,0.2);padding:4px 12px;letter-spacing:1px;}
.sa-nav-online{font-size:0.72rem;color:var(--green);padding:4px 10px;border:1px solid rgba(64,208,128,0.2);background:rgba(64,208,128,0.05);}

/* ── BUTTONS ── */
.sa-btn{
  font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:2px;
  text-transform:uppercase;padding:9px 22px;display:inline-flex;
  align-items:center;gap:8px;transition:all 0.25s;cursor:pointer;
  border:none;white-space:nowrap;
}
.sa-btn-primary{background:linear-gradient(135deg,#1a6aaa,#0d3a6c);color:#c8e8ff;border:1px solid var(--frost-dim);}
.sa-btn-primary:hover{background:linear-gradient(135deg,#2a7aba,#1a4a7c);box-shadow:0 0 24px rgba(80,160,220,0.25);}
.sa-btn-secondary{background:transparent;color:var(--text-muted);border:1px solid var(--border);}
.sa-btn-secondary:hover{border-color:var(--frost);color:var(--frost);}
.sa-btn-gold{background:linear-gradient(135deg,#c8a84b,#8a6a2a);color:#1a1209;border:1px solid #c8a84b;}
.sa-btn-gold:hover{background:linear-gradient(135deg,#e8c97a,#c8a84b);}
.sa-btn-danger{background:linear-gradient(135deg,#6a1a1a,#3c0d0d);color:#ffcccc;border:1px solid #8a2a2a;}
.sa-btn-danger:hover{background:linear-gradient(135deg,#7a2a2a,#4c1d1d);}
.sa-btn-success{background:linear-gradient(135deg,#1a6a3a,#0d3c1e);color:#c8ffdc;border:1px solid #2a8a4a;}
.sa-btn-success:hover{background:linear-gradient(135deg,#2a7a4a,#1a4c2e);}
.sa-btn-sm{padding:6px 14px;font-size:0.65rem;}
.sa-btn-lg{padding:14px 40px;font-size:0.82rem;letter-spacing:3px;}
.sa-btn:disabled{opacity:0.4;cursor:not-allowed;}

/* ── CONTENT ── */
.sa-content-wrap{padding-top:64px;}
.sa-page{padding:60px 0;}
.sa-page-header{text-align:center;margin-bottom:48px;}
.sa-page-label{font-size:0.68rem;letter-spacing:5px;text-transform:uppercase;color:var(--frost);margin-bottom:10px;display:block;}
.sa-page-title{font-family:'Cinzel',serif;font-size:2rem;color:#d0e8f8;font-weight:600;}
.sa-page-title::after{content:'';display:block;width:50px;height:1px;margin:14px auto 0;background:linear-gradient(90deg,transparent,var(--frost),transparent);}

/* ── CARDS ── */
.sa-card{background:var(--bg3);border:1px solid var(--border);padding:28px;}
.sa-card:hover{border-color:var(--border-hover);}
.sa-card-title{font-family:'Cinzel',serif;font-size:1rem;color:#b0d0e8;margin-bottom:16px;letter-spacing:1px;}

/* ── FORM ── */
.sa-form-group{margin-bottom:20px;}
.sa-label{display:block;font-size:0.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;}
.sa-input{
  width:100%;padding:12px 16px;
  background:rgba(5,20,40,0.8);
  border:1px solid var(--border);
  color:var(--text);font-size:0.9rem;
  transition:border-color 0.2s;outline:none;
}
.sa-input:focus{border-color:var(--frost);}
.sa-input::placeholder{color:var(--text-dim);}
.sa-select{
  width:100%;padding:12px 16px;
  background:rgba(5,20,40,0.8);
  border:1px solid var(--border);
  color:var(--text);font-size:0.9rem;outline:none;cursor:pointer;
}
.sa-select:focus{border-color:var(--frost);}
.sa-textarea{
  width:100%;padding:12px 16px;min-height:100px;resize:vertical;
  background:rgba(5,20,40,0.8);
  border:1px solid var(--border);
  color:var(--text);font-size:0.9rem;outline:none;
}
.sa-textarea:focus{border-color:var(--frost);}

/* ── ALERTS ── */
.sa-alert{padding:12px 16px;font-size:0.85rem;margin-bottom:16px;border-left:3px solid;}
.sa-alert-error{background:rgba(180,40,40,0.1);border-color:var(--red);color:#ffaaaa;}
.sa-alert-success{background:rgba(40,160,80,0.1);border-color:var(--green);color:#aaffcc;}
.sa-alert-info{background:rgba(40,120,200,0.1);border-color:var(--frost);color:#aaddff;}
.sa-alert-warning{background:rgba(200,168,75,0.1);border-color:var(--gold);color:#ffd88a;}

/* ── TABLE ── */
.sa-table{width:100%;border-collapse:collapse;font-size:0.85rem;}
.sa-table th{
  font-family:'Cinzel',serif;font-size:0.65rem;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-dim);
  border-bottom:1px solid var(--border);padding:10px 14px;text-align:left;
}
.sa-table td{padding:12px 14px;border-bottom:1px solid rgba(80,160,220,0.06);color:var(--text-muted);}
.sa-table tr:hover td{background:rgba(80,160,220,0.03);}
.sa-table td strong{color:var(--text);}

/* ── BADGE ── */
.sa-badge{display:inline-block;font-size:0.65rem;letter-spacing:1px;text-transform:uppercase;padding:3px 10px;}
.sa-badge-blue{background:rgba(80,160,220,0.15);color:var(--frost);border:1px solid rgba(80,160,220,0.3);}
.sa-badge-gold{background:rgba(200,168,75,0.12);color:var(--gold);border:1px solid rgba(200,168,75,0.25);}
.sa-badge-green{background:rgba(64,208,128,0.1);color:var(--green);border:1px solid rgba(64,208,128,0.25);}
.sa-badge-red{background:rgba(220,80,80,0.1);color:var(--red);border:1px solid rgba(220,80,80,0.25);}
.sa-badge-gray{background:rgba(80,120,160,0.1);color:var(--text-dim);border:1px solid var(--border);}

/* ── HERO ── */
.sa-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.sa-hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 20%,rgba(20,80,140,0.35) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%,rgba(10,40,80,0.25) 0%,transparent 60%),
    linear-gradient(180deg,#020b14 0%,#030f1e 50%,#020a18 100%);
}
.sa-hero-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.15;filter:blur(2px);}
.sa-hero-canvas{position:absolute;inset:0;pointer-events:none;}
.sa-hero-content{position:relative;z-index:2;text-align:center;padding:130px 24px 60px;}
.sa-hero-eyebrow{
  font-size:0.68rem;letter-spacing:6px;text-transform:uppercase;color:var(--frost);
  margin-bottom:24px;display:flex;align-items:center;justify-content:center;gap:16px;
}
.sa-hero-eyebrow::before,.sa-hero-eyebrow::after{content:'';width:40px;height:1px;}
.sa-hero-eyebrow::before{background:linear-gradient(90deg,transparent,var(--frost));}
.sa-hero-eyebrow::after{background:linear-gradient(90deg,var(--frost),transparent);}
.sa-hero-title{
  font-family:'Cinzel',serif;font-size:clamp(3rem,9vw,6.5rem);
  font-weight:900;line-height:0.9;margin-bottom:8px;
  color:#e8f4ff;letter-spacing:10px;
  text-shadow:0 0 80px rgba(80,180,240,0.25);
}
.sa-hero-title .frost{color:var(--frost);}
.sa-hero-sub{
  display:block;font-family:'Cinzel',serif;
  font-size:clamp(0.8rem,2vw,1.1rem);
  letter-spacing:8px;color:var(--text-dim);font-weight:400;margin-top:8px;
}
.sa-hero-divider{width:100px;height:1px;background:linear-gradient(90deg,transparent,var(--frost),transparent);margin:28px auto;}
.sa-hero-desc{font-size:0.9rem;letter-spacing:2px;color:var(--text-dim);margin-bottom:40px;text-transform:uppercase;}

/* ── STATS BAR ── */
.sa-stats-bar{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--border);
  background:rgba(5,20,40,0.7);
  backdrop-filter:blur(10px);
  margin-bottom:44px;
}
.sa-stat{padding:16px 28px;text-align:center;border-right:1px solid var(--border);}
.sa-stat:last-child{border-right:none;}
.sa-stat-val{display:block;font-family:'Cinzel',serif;font-size:1.6rem;font-weight:700;color:var(--frost);}
.sa-stat-val.green{color:var(--green);}
.sa-stat-label{display:block;font-size:0.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-top:4px;}

/* ── FEATURES ── */
.sa-features{padding:90px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);}
.sa-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}
.sa-feature{
  background:var(--bg);padding:32px 24px;text-align:center;
  transition:all 0.3s;position:relative;overflow:hidden;
}
.sa-feature::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--frost),transparent);
  transform:scaleX(0);transition:transform 0.3s;
}
.sa-feature:hover{background:rgba(10,30,60,0.6);}
.sa-feature:hover::before{transform:scaleX(1);}
.sa-feature-icon{font-size:1.8rem;margin-bottom:14px;}
.sa-feature h3{font-family:'Cinzel',serif;font-size:0.88rem;color:#b0d0e8;margin-bottom:10px;letter-spacing:1px;}
.sa-feature p{font-size:0.8rem;color:var(--text-dim);line-height:1.7;}

/* ── SECTION TITLE ── */
.sa-section-title{text-align:center;margin-bottom:48px;}
.sa-section-label{font-size:0.65rem;letter-spacing:5px;text-transform:uppercase;color:var(--frost);display:block;margin-bottom:10px;}
.sa-section-h{font-family:'Cinzel',serif;font-size:1.9rem;color:#d0e8f8;font-weight:600;}
.sa-section-h::after{content:'';display:block;width:50px;height:1px;margin:14px auto 0;background:linear-gradient(90deg,transparent,var(--frost),transparent);}

/* ── SHOP ── */
.sa-shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.sa-shop-item{
  background:var(--bg3);border:1px solid var(--border);
  transition:all 0.25s;position:relative;overflow:hidden;
}
.sa-shop-item:hover{border-color:var(--border-hover);transform:translateY(-3px);}
.sa-shop-img{height:160px;background:rgba(5,20,40,0.8);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.sa-shop-img img{width:100%;height:100%;object-fit:cover;}
.sa-shop-body{padding:16px;}
.sa-shop-name{font-family:'Cinzel',serif;font-size:0.85rem;color:#b0d0e8;margin-bottom:6px;}
.sa-shop-desc{font-size:0.75rem;color:var(--text-dim);margin-bottom:12px;line-height:1.5;}
.sa-shop-footer{display:flex;align-items:center;justify-content:space-between;}
.sa-shop-price{font-family:'Cinzel',serif;font-size:1rem;color:var(--gold);}
.sa-shop-price span{font-size:0.65rem;color:var(--text-dim);letter-spacing:1px;margin-left:3px;}
.sa-shop-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;}
.sa-shop-cat{
  font-size:0.68rem;letter-spacing:1px;text-transform:uppercase;
  padding:6px 16px;cursor:pointer;border:1px solid var(--border);
  color:var(--text-dim);transition:all 0.2s;background:transparent;
}
.sa-shop-cat:hover,.sa-shop-cat.active{border-color:var(--frost);color:var(--frost);background:rgba(80,160,220,0.05);}

/* ── ACCOUNT PANEL ── */
.sa-panel-grid{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;}
.sa-panel-sidebar{display:flex;flex-direction:column;gap:4px;}
.sa-panel-menu-item{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  font-size:0.78rem;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-dim);border:1px solid transparent;
  transition:all 0.2s;cursor:pointer;background:transparent;width:100%;text-align:left;
}
.sa-panel-menu-item:hover,.sa-panel-menu-item.active{
  color:var(--frost);border-color:var(--border);
  background:rgba(80,160,220,0.05);
}
.sa-panel-menu-item i{font-size:1rem;}
.sa-panel-main{min-height:400px;}

/* ── ADMIN ── */
.sa-admin-layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 64px);}
.sa-admin-sidebar{
  background:rgba(2,8,16,0.95);border-right:1px solid var(--border);
  padding:24px 0;position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto;
}
.sa-admin-sidebar-title{font-size:0.6rem;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim);padding:0 20px;margin-bottom:8px;}
.sa-admin-nav a{
  display:flex;align-items:center;gap:10px;padding:10px 20px;
  font-size:0.75rem;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-dim);border-left:2px solid transparent;transition:all 0.2s;
}
.sa-admin-nav a:hover,.sa-admin-nav a.active{color:var(--frost);border-left-color:var(--frost);background:rgba(80,160,220,0.05);}
.sa-admin-content{padding:36px 40px;}
.sa-admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px;}
.sa-admin-stat{
  background:var(--bg3);border:1px solid var(--border);
  padding:20px;text-align:center;
}
.sa-admin-stat-val{font-family:'Cinzel',serif;font-size:1.8rem;font-weight:700;color:var(--frost);}
.sa-admin-stat-label{font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-top:4px;}

/* ── DONATE ── */
.sa-donate-grid{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start;}
.sa-dp-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;}
.sa-dp-pack{
  background:var(--bg3);border:2px solid var(--border);
  padding:20px;text-align:center;cursor:pointer;transition:all 0.2s;
}
.sa-dp-pack:hover,.sa-dp-pack.selected{border-color:var(--frost);background:rgba(80,160,220,0.05);}
.sa-dp-pack.popular{border-color:var(--gold);}
.sa-dp-pack-dp{font-family:'Cinzel',serif;font-size:1.5rem;color:var(--frost);}
.sa-dp-pack-price{font-size:0.85rem;color:var(--gold);margin-top:4px;}
.sa-dp-pack-badge{font-size:0.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:6px;}

/* ── NEWS ── */
.sa-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sa-news-card{background:var(--bg3);border:1px solid var(--border);transition:all 0.25s;display:block;}
.sa-news-card:hover{border-color:var(--border-hover);transform:translateY(-3px);}
.sa-news-img{height:170px;overflow:hidden;background:var(--bg2);}
.sa-news-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s;}
.sa-news-card:hover .sa-news-img img{transform:scale(1.05);}
.sa-news-body{padding:18px;}
.sa-news-date{font-size:0.68rem;letter-spacing:1px;color:var(--text-dim);display:block;margin-bottom:8px;}
.sa-news-body h3{font-family:'Cinzel',serif;font-size:0.9rem;color:#b0d0e8;margin-bottom:6px;}

/* ── CTA ── */
.sa-cta{padding:80px 0;}
.sa-cta-box{
  background:rgba(5,15,30,0.8);border:1px solid var(--border);
  padding:60px;text-align:center;position:relative;max-width:800px;margin:0 auto;
}
.sa-cta-box::before,.sa-cta-box::after{content:'';position:absolute;width:20px;height:20px;border-color:var(--frost);border-style:solid;}
.sa-cta-box::before{top:-1px;left:-1px;border-width:2px 0 0 2px;}
.sa-cta-box::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;}
.sa-cta-box h2{font-family:'Cinzel',serif;font-size:1.9rem;color:#d0e8f8;margin-bottom:14px;}
.sa-cta-box p{color:var(--text-dim);max-width:500px;margin:0 auto 32px;line-height:1.8;}
.sa-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ── FOOTER ── */
.sa-footer{border-top:1px solid var(--border);padding:28px 48px;display:flex;justify-content:space-between;align-items:center;}
.sa-footer-logo{font-family:'Cinzel',serif;color:var(--text-dim);letter-spacing:3px;font-size:0.9rem;}
.sa-footer-logo span{color:var(--frost);}
.sa-footer-text{font-size:0.72rem;color:var(--text-dim);letter-spacing:1px;}
.sa-footer-links{display:flex;gap:20px;}
.sa-footer-links a{font-size:0.7rem;letter-spacing:1px;color:var(--text-dim);text-transform:uppercase;transition:color 0.2s;}
.sa-footer-links a:hover{color:var(--frost);}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .sa-panel-grid{grid-template-columns:1fr;}
  .sa-admin-layout{grid-template-columns:1fr;}
  .sa-admin-sidebar{position:static;height:auto;}
  .sa-donate-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .sa-nav{padding:0 20px;}
  .sa-nav-links{display:none;}
  .sa-features-grid{grid-template-columns:1fr;}
  .sa-news-grid{grid-template-columns:1fr;}
  .sa-admin-stats{grid-template-columns:repeat(2,1fr);}
  .sa-dp-packs{grid-template-columns:1fr;}
  .sa-shop-grid{grid-template-columns:repeat(2,1fr);}
  .sa-footer{flex-direction:column;gap:16px;text-align:center;padding:24px;}
}
@media(max-width:480px){
  .sa-container{padding:0 16px;}
  .sa-shop-grid{grid-template-columns:1fr;}
  .sa-admin-stats{grid-template-columns:1fr;}
}