=========================
   Reset & Base
========================= 
 {
  margin 0;
  padding 0;
  box-sizing border-box;
}

root {
  --bg-main #07090d;
  --bg-secondary #10141a;
  --bg-card rgba(20, 24, 31, 0.85);
  --bg-card-2 rgba(255, 255, 255, 0.04);

  --text-main #f5f7fa;
  --text-soft #b6beca;
  --text-muted #8f98a6;

  --silver #c5ccd6;
  --silver-2 #9ea7b3;
  --border rgba(255, 255, 255, 0.08);

  --accent #dfe6ef;
  --accent-glow rgba(196, 206, 220, 0.16);
  --shadow-soft 0 10px 30px rgba(0, 0, 0, 0.28);
  --shadow-hover 0 18px 45px rgba(0, 0, 0, 0.45);

  --success #7ee0b1;
  --danger #ff7676;
  --warning #ffd479;

  --radius-xl 24px;
  --radius-lg 18px;
  --radius-md 14px;
  --radius-sm 10px;

  --transition all 0.35s ease;
}

html {
  scroll-behavior smooth;
}

body {
  background
    radial-gradient(circle at top right, rgba(111, 179, 125, 0.10), transparent 22%),
    radial-gradient(circle at bottom left, rgba(74, 105, 160, 0.12), transparent 26%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.03), transparent 45%),
    linear-gradient(180deg, #06070b 0%, #08101b 45%, #0b1320 100%);
  color var(--text-main);
  min-height 100vh;
  overflow-x hidden;
  position relative;
  transition background 0.35s ease;
}

 =========================
   Decorative Background
========================= 
.bg-glow {
  position fixed;
  border-radius 50%;
  filter blur(100px);
  z-index -3;
  opacity 0.28;
  transition transform 0.5s ease, opacity 0.5s ease, background 0.5s ease;
  will-change transform, background;
}

.bg-glow-1 {
  width 360px;
  height 360px;
  background rgba(105, 170, 130, 0.35);
  top -80px;
  right -100px;
}

.bg-glow-2 {
  width 320px;
  height 320px;
  background rgba(75, 105, 165, 0.30);
  left -100px;
  bottom 40px;
}

.noise-layer {
  position fixed;
  inset 0;
  background-image
    linear-gradient(rgba(255,255,255,0.015), rgba(255,255,255,0.015));
  pointer-events none;
  z-index -2;
}

.container {
  width min(1200px, calc(100% - 32px));
  margin 0 auto;
}

 =========================
   Utilities
========================= 
.glass {
  background rgba(18, 22, 29, 0.72);
  border 1px solid var(--border);
  box-shadow var(--shadow-soft);
  backdrop-filter blur(14px);
  -webkit-backdrop-filter blur(14px);
}

.fade-in {
  animation fadeIn 1s ease both;
}

.fade-in-up {
  animation fadeInUp 1s ease both;
}

.full-width {
  width 100%;
}

.hidden {
  display none !important;
}

 =========================
   Header
========================= 
.site-header {
  width min(1240px, calc(100% - 24px));
  margin 18px auto 0;
  padding 18px 22px;
  border-radius var(--radius-xl);
  display flex;
  align-items center;
  justify-content space-between;
  gap 18px;
  position sticky;
  top 12px;
  z-index 50;
}

.header-right,
.header-left {
  display flex;
  align-items center;
  gap 12px;
  flex-wrap wrap;
}

.brand {
  font-size 1.35rem;
  font-weight 800;
  display flex;
  align-items center;
  gap 12px;
  color var(--text-main);
}

.brand i {
  color var(--silver);
  text-shadow 0 0 18px rgba(255,255,255,0.18);
}

 =========================
   Buttons
========================= 
button,
a {
  font-family inherit;
}

.primary-btn,
.secondary-btn,
.google-btn,
.cart-toggle-btn,
.icon-btn {
  border none;
  outline none;
  cursor pointer;
  transition var(--transition);
}

.primary-btn,
.secondary-btn,
.google-btn,
.cart-toggle-btn {
  border-radius 14px;
  padding 12px 18px;
  font-size 0.95rem;
  font-weight 600;
  text-decoration none;
  display inline-flex;
  align-items center;
  justify-content center;
  gap 10px;
}

.primary-btn {
  background linear-gradient(135deg, #e6ebf2, #aeb8c5);
  color #0a0c10;
  box-shadow 0 10px 24px rgba(220, 228, 239, 0.18);
}

.primary-btnhover {
  transform translateY(-2px) scale(1.02);
  box-shadow 0 14px 30px rgba(220, 228, 239, 0.25);
}

.secondary-btn {
  background rgba(255, 255, 255, 0.04);
  color var(--text-main);
  border 1px solid var(--border);
}

.secondary-btnhover {
  background rgba(255,255,255,0.08);
  transform translateY(-2px);
}

.google-btn {
  background #ffffff;
  color #222;
  border 1px solid #d9d9d9;
  box-shadow 0 8px 20px rgba(255,255,255,0.08);
}

.google-btn i {
  color #db4437;
  font-size 1rem;
}

.google-btnhover {
  transform translateY(-2px) scale(1.02);
  box-shadow 0 14px 28px rgba(255,255,255,0.12);
}

.cart-toggle-btn {
  background linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  color var(--text-main);
  border 1px solid var(--border);
}

.cart-toggle-btn b {
  min-width 24px;
  height 24px;
  border-radius 999px;
  background var(--accent);
  color #111;
  display inline-flex;
  align-items center;
  justify-content center;
  font-size 0.8rem;
}

.cart-toggle-btnhover {
  transform translateY(-2px);
  box-shadow 0 12px 28px rgba(255,255,255,0.08);
}

.icon-btn {
  width 42px;
  height 42px;
  border-radius 12px;
  background rgba(255,255,255,0.05);
  color var(--text-main);
  border 1px solid var(--border);
}

.icon-btnhover {
  transform scale(1.06);
  background rgba(255,255,255,0.08);
}

 =========================
   User Status
========================= 
.user-status-wrap {
  margin-top 18px;
}

.user-status {
  border-radius var(--radius-lg);
  padding 16px 18px;
  display flex;
  align-items center;
  justify-content space-between;
  gap 14px;
}

.user-status-info {
  display flex;
  align-items center;
  gap 12px;
  color var(--text-soft);
}

.user-status-info i {
  color var(--silver);
}

 =========================
   Hero
========================= 
.hero {
  padding 80px 0 40px;
}

.hero-content {
  position relative;
  overflow hidden;
  border-radius 32px;
  padding 46px 32px;
  background
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    rgba(12, 15, 20, 0.85);
  border 1px solid var(--border);
  box-shadow var(--shadow-soft);
}

.hero-contentbefore {
  content ;
  position absolute;
  inset auto auto -80px -80px;
  width 240px;
  height 240px;
  background radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
  border-radius 50%;
  pointer-events none;
}

.hero-badge {
  display inline-block;
  margin-bottom 16px;
  padding 8px 14px;
  border-radius 999px;
  color var(--silver);
  border 1px solid rgba(255,255,255,0.08);
  background rgba(255,255,255,0.03);
  font-size 0.9rem;
}

.hero h2 {
  font-size clamp(2rem, 4vw, 3.3rem);
  margin-bottom 18px;
  line-height 1.4;
}

.hero p {
  max-width 760px;
  color var(--text-soft);
  font-size 1.05rem;
  line-height 2;
}

.hero-actions {
  display flex;
  gap 14px;
  flex-wrap wrap;
  margin-top 28px;
}

.hero-stats {
  display grid;
  grid-template-columns repeat(3, minmax(120px, 1fr));
  gap 16px;
  margin-top 34px;
}

.stat-card {
  padding 18px;
  border-radius 18px;
  background rgba(255,255,255,0.035);
  border 1px solid rgba(255,255,255,0.06);
  text-align center;
  transition var(--transition);
}

.stat-cardhover {
  transform translateY(-5px);
  box-shadow 0 15px 28px rgba(255,255,255,0.05);
}

.stat-card strong {
  display block;
  font-size 1.4rem;
  margin-bottom 6px;
  color var(--accent);
}

.stat-card span {
  color var(--text-soft);
  font-size 0.92rem;
}

 =========================
   Notice
========================= 
.notice-box {
  margin 10px 0 36px;
  padding 16px 18px;
  border-radius 18px;
  color var(--warning);
  border-right 4px solid var(--warning);
  line-height 1.9;
}

 =========================
   Section Heading
========================= 
.section-heading {
  margin-bottom 24px;
}

.section-heading span {
  color var(--silver-2);
  font-size 0.92rem;
  display inline-block;
  margin-bottom 8px;
}

.section-heading h3 {
  font-size clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom 10px;
}

.section-heading p {
  color var(--text-soft);
  line-height 1.9;
}

 =========================
   Classes
========================= 
.classes-section {
  padding-bottom 50px;
}

.classes-grid {
  display grid;
  grid-template-columns repeat(3, 1fr);
  gap 22px;
}

.class-card {
  position relative;
  overflow hidden;
  border-radius 24px;
  padding 22px;
  background
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    rgba(14, 18, 24, 0.92);
  border 1px solid var(--border);
  box-shadow var(--shadow-soft);
  transition var(--transition);
}

.class-cardbefore {
  content ;
  position absolute;
  top -30px;
  left -30px;
  width 120px;
  height 120px;
  border-radius 50%;
  background radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
  opacity 0.8;
}

.class-cardhover {
  transform translateY(-8px) scale(1.02);
  box-shadow var(--shadow-hover), 0 0 22px rgba(255,255,255,0.07);
  border-color rgba(255,255,255,0.14);
}

.class-card-top {
  display flex;
  align-items center;
  justify-content space-between;
  gap 14px;
  margin-bottom 20px;
}

.class-icon {
  width 66px;
  height 66px;
  border-radius 18px;
  display flex;
  align-items center;
  justify-content center;
  font-size 1.6rem;
  background linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border 1px solid rgba(255,255,255,0.08);
  color var(--accent);
  transition var(--transition);
}

.class-cardhover .class-icon {
  transform scale(1.08);
  box-shadow 0 0 26px rgba(255,255,255,0.08);
}

.class-price-badge {
  background rgba(255,255,255,0.05);
  color var(--silver);
  padding 8px 12px;
  border-radius 999px;
  font-size 0.85rem;
  border 1px solid rgba(255,255,255,0.06);
}

.class-card h4 {
  font-size 1.15rem;
  margin-bottom 12px;
}

.class-card p {
  color var(--text-soft);
  line-height 1.9;
  min-height 60px;
  margin-bottom 18px;
}

.class-card-footer {
  display flex;
  align-items center;
  justify-content space-between;
  gap 12px;
}

.class-cost {
  font-weight 700;
  color var(--accent);
}

 =========================
   Owner Panel
========================= 
.owner-panel-section {
  padding-bottom 60px;
}

#ownerPanelSection {
  display none;
}

.owner-panel {
  border-radius 24px;
  padding 22px;
}

.owner-panel-header {
  display flex;
  align-items center;
  justify-content space-between;
  gap 16px;
  margin-bottom 22px;
}

.owner-panel-header p {
  color var(--text-soft);
  margin-top 6px;
}

.owner-users-list {
  display grid;
  gap 16px;
}

.owner-user-card {
  border-radius 18px;
  padding 18px;
  background rgba(255,255,255,0.03);
  border 1px solid rgba(255,255,255,0.06);
}

.owner-user-top {
  display flex;
  align-items center;
  justify-content space-between;
  gap 12px;
  margin-bottom 14px;
  flex-wrap wrap;
}

.owner-user-email {
  font-weight 700;
}

.owner-user-status {
  display flex;
  gap 8px;
  flex-wrap wrap;
}

.owner-badge {
  padding 6px 10px;
  border-radius 999px;
  font-size 0.82rem;
  border 1px solid rgba(255,255,255,0.08);
}

.badge-online {
  color var(--success);
}

.badge-banned {
  color var(--danger);
}

.badge-owner {
  color var(--warning);
}

.owner-user-cart {
  color var(--text-soft);
  line-height 1.9;
  margin-bottom 14px;
}

.owner-user-actions {
  display flex;
  gap 10px;
  flex-wrap wrap;
}

.danger-btn {
  background rgba(255, 118, 118, 0.12);
  color #ff9a9a;
  border 1px solid rgba(255, 118, 118, 0.25);
}

.danger-btnhover {
  background rgba(255, 118, 118, 0.18);
}

.warning-btn {
  background rgba(255, 212, 121, 0.12);
  color #ffd479;
  border 1px solid rgba(255, 212, 121, 0.25);
}

.warning-btnhover {
  background rgba(255, 212, 121, 0.18);
}

 =========================
   Cart Sidebar
========================= 
.cart-sidebar {
  position fixed;
  inset 0;
  z-index 100;
  pointer-events none;
}

.cart-sidebar.active {
  pointer-events auto;
}

.cart-overlay {
  position absolute;
  inset 0;
  background rgba(0,0,0,0.55);
  opacity 0;
  transition var(--transition);
}

.cart-panel {
  position absolute;
  top 0;
  left 0;
  width min(420px, 100%);
  height 100%;
  padding 22px;
  transform translateX(-100%);
  transition var(--transition);
  border-radius 0 24px 24px 0;
  display flex;
  flex-direction column;
}

.cart-sidebar.active .cart-overlay {
  opacity 1;
}

.cart-sidebar.active .cart-panel {
  transform translateX(0);
}

.cart-header,
.cart-footer {
  flex-shrink 0;
}

.cart-header {
  display flex;
  align-items center;
  justify-content space-between;
  margin-bottom 18px;
}

.cart-header h3 {
  display flex;
  align-items center;
  gap 10px;
}

.cart-body {
  flex 1;
  overflow-y auto;
  padding-left 4px;
}

.empty-cart {
  min-height 220px;
  display flex;
  align-items center;
  justify-content center;
  flex-direction column;
  color var(--text-muted);
  gap 12px;
  text-align center;
}

.empty-cart i {
  font-size 2rem;
}

.cart-item {
  padding 14px;
  border-radius 16px;
  background rgba(255,255,255,0.03);
  border 1px solid rgba(255,255,255,0.06);
  margin-bottom 12px;
}

.cart-item-top {
  display flex;
  align-items start;
  justify-content space-between;
  gap 12px;
  margin-bottom 10px;
}

.cart-item h4 {
  font-size 1rem;
}

.cart-item p {
  color var(--text-soft);
  font-size 0.92rem;
}

.remove-btn {
  background transparent;
  color #ff9a9a;
  border none;
  cursor pointer;
  font-size 1rem;
}

.cart-total-row {
  display flex;
  justify-content space-between;
  margin 16px 0;
  font-size 1rem;
}

.cart-total-row strong {
  color var(--accent);
}

 =========================
   Modal
========================= 
.modal {
  position fixed;
  inset 0;
  z-index 120;
  display none;
}

.modal.active {
  display block;
}

.modal-backdrop {
  position absolute;
  inset 0;
  background rgba(0,0,0,0.6);
  animation fadeIn 0.25s ease;
}

.modal-content {
  position relative;
  width min(480px, calc(100% - 24px));
  margin 8vh auto 0;
  padding 24px;
  border-radius 24px;
  animation fadeInUp 0.35s ease;
}

.modal-close {
  position absolute;
  top 12px;
  left 12px;
  width 40px;
  height 40px;
  border-radius 12px;
  background rgba(255,255,255,0.05);
  color var(--text-main);
  border 1px solid var(--border);
}

.modal-header {
  margin-bottom 18px;
}

.modal-header p {
  color var(--text-soft);
  margin-top 8px;
  line-height 1.9;
}

.auth-form {
  display grid;
  gap 12px;
}

.auth-form label {
  color var(--text-soft);
  font-size 0.95rem;
}

.auth-form input {
  width 100%;
  padding 14px 16px;
  border-radius 14px;
  border 1px solid rgba(255,255,255,0.08);
  background rgba(255,255,255,0.04);
  color var(--text-main);
  font-size 0.98rem;
  outline none;
  transition var(--transition);
}

.auth-form inputfocus {
  border-color rgba(255,255,255,0.20);
  box-shadow 0 0 0 4px rgba(255,255,255,0.04);
}

.auth-submit-btn {
  margin-top 10px;
  width 100%;
}

.payment-modal-content {
  text-align center;
}

.payment-box {
  padding 24px 16px 10px;
}

.payment-box i {
  font-size 2.5rem;
  color var(--accent);
  margin-bottom 14px;
}

.payment-box p {
  color var(--text-soft);
  margin-bottom 16px;
  line-height 1.9;
}

.card-number {
  direction ltr;
  display inline-block;
  padding 14px 18px;
  border-radius 16px;
  background rgba(255,255,255,0.06);
  border 1px solid rgba(255,255,255,0.08);
  font-size 1.2rem;
  font-weight 800;
  letter-spacing 2px;
  color var(--accent);
}

 =========================
   Toast
========================= 
.toast-container {
  position fixed;
  left 16px;
  bottom 16px;
  z-index 150;
  display grid;
  gap 10px;
}

.toast {
  min-width 260px;
  max-width 360px;
  padding 14px 16px;
  border-radius 14px;
  color #fff;
  box-shadow var(--shadow-soft);
  animation fadeInUp 0.35s ease;
  border 1px solid rgba(255,255,255,0.08);
}

.toast.success {
  background rgba(27, 99, 68, 0.95);
}

.toast.error {
  background rgba(125, 34, 34, 0.95);
}

.toast.info {
  background rgba(45, 53, 72, 0.95);
}

 =========================
   Footer
========================= 
.site-footer {
  width min(1240px, calc(100% - 24px));
  margin 0 auto 18px;
  padding 20px;
  border-radius 24px;
  text-align center;
  color var(--text-soft);
}

 =========================
   Animations
========================= 
@keyframes fadeIn {
  from {
    opacity 0;
  }
  to {
    opacity 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity 0;
    transform translateY(24px);
  }
  to {
    opacity 1;
    transform translateY(0);
  }
}

 =========================
   Responsive
========================= 
@media (max-width 992px) {
  .classes-grid {
    grid-template-columns repeat(2, 1fr);
  }

  .site-header {
    flex-direction column;
    align-items stretch;
  }

  .header-right,
  .header-left {
    justify-content center;
  }

  .user-status {
    flex-direction column;
    align-items stretch;
  }

  .hero-stats {
    grid-template-columns 1fr;
  }
}

@media (max-width 768px) {
  .classes-grid {
    grid-template-columns 1fr;
  }

  .hero {
    padding-top 44px;
  }

  .hero-content {
    padding 28px 20px;
  }

  .hero h2 {
    line-height 1.7;
  }

  .class-card-footer {
    flex-direction column;
    align-items stretch;
  }

  .owner-panel-header,
  .owner-user-top {
    flex-direction column;
    align-items stretch;
  }

  .cart-panel {
    width 100%;
    border-radius 0;
  }
}