*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html{
  overflow-x:hidden;
  max-width:100vw;
}

body {
  font-family: system-ui, sans-serif;
  background: #0f0f0f;
  color: #f0f0f0;
  min-height: 100vh;
  overflow-x:hidden;
  max-width:100vw;
}

/* ── Page wrapper — constrains all content to screen width ─────────────────── */

main,
.products-page,
.chart-panel,
.featured-section,
.featured-banner,
.admin-login-wrap{
  width:100%;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(16px, 4vw, 60px);
  padding-right:clamp(16px, 4vw, 60px);
}

/* Products grid layout */
.products-page{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:28px;
  padding-top:32px;
  padding-bottom:60px;
}

img, video, canvas, iframe, input, button, select, textarea{
  max-width:100%;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
}

.logo { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }

nav { display: flex; align-items: center; gap: 1rem; }
nav a { color: #aaa; text-decoration: none; font-size: 0.9rem; }
nav a:hover { color: #fff; }

button {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: #e63946;
  color: #fff;
  transition: background 0.15s;
}
button:hover { background: #c1121f; }
#btn-logout { background: transparent; border: 1px solid #555; color: #aaa; }
#btn-logout:hover { background: #333; }

main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }

.auth-box {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 2rem;
  max-width: 360px;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.auth-box input {
  padding: 0.55rem 0.75rem;
  border: 1px solid #333;
  border-radius: 6px;
  background: #111;
  color: #f0f0f0;
  font-size: 0.9rem;
  outline: none;
}
.auth-box input:focus { border-color: #e63946; }

#auth-message { font-size: 0.85rem; color: #e63946; min-height: 1.2em; }

h1 { font-size: 1.75rem; margin-bottom: 1.5rem; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card .name { font-weight: 700; font-size: 1rem; }
.card .price { color: #e63946; font-size: 1.1rem; font-weight: 700; }
.card .stock { font-size: 0.8rem; color: #666; }
.card button { margin-top: 0.5rem; }

/* Dashboard */
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #2a2a2a; font-size: 0.9rem; }
th { color: #aaa; font-weight: 600; }
.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #2a2a2a;
}
.badge.paid { background: #1a3a1a; color: #4caf50; }
.badge.pending { background: #3a2a00; color: #ffc107; }

#particles{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-5;
}

.cursor-glow{
  position:fixed;
  width:250px;
  height:250px;

  background:
  radial-gradient(
    circle,
    rgba(0,234,255,0.18),
    transparent 70%
  );

  border-radius:50%;

  pointer-events:none;

  transform:
  translate(-50%,-50%);

  z-index:-1;
}

/* hero-grid is now a ::before on .home-hero — no standalone div needed */

@keyframes gridMove{
  from{
    transform:translateY(0);
  }

  to{
    transform:translateY(50px);
  }
}

.premium-card{
  position:relative;
  overflow:hidden;
  transition:0.35s ease;
  border:1px solid rgba(255,255,255,0.09);
  background:rgba(255,255,255,0.03);
  border-radius:18px;
  padding:36px 28px 26px;
  display:flex;
  flex-direction:column;
  gap:0;
}

.premium-card h2{
  font-size:1.15rem;
  font-weight:800;
  color:#fff;
  margin-bottom:8px;
  line-height:1.3;
}

.premium-card p{
  font-size:0.875rem;
  color:rgba(255,255,255,0.45);
  line-height:1.5;
  flex:1;
}

.premium-card:hover{

  transform:
  translateY(-10px)
  scale(1.02);

  box-shadow:
  0 0 35px rgba(0,234,255,0.28),
  0 0 80px rgba(212,0,255,0.18);
}

.card-glow{
  position:absolute;

  inset:0;

  background:
  radial-gradient(
    circle at top,
    rgba(212,0,255,0.16),
    transparent 60%
  );

  pointer-events:none;
}

.badge{
  position:absolute;

  top:15px;
  right:15px;

  padding:6px 12px;

  border-radius:30px;

  background:
  linear-gradient(
    90deg,
    #d400ff,
    #00eaff
  );

  font-size:0.75rem;
  font-weight:bold;
}

.price{
  display:block;
  margin-top:20px;
  margin-bottom:12px;
  color:#00eaff;
  font-size:1.6rem;
  font-weight:900;
  letter-spacing:-0.01em;
}

.buy-btn{
  margin-top:auto;
  width:100%;
  padding:13px;
  border:none;
  border-radius:12px;
  cursor:pointer;

  color:white;

  font-weight:bold;

  background:
  linear-gradient(
    90deg,
    #d400ff,
    #00eaff
  );

  transition:0.3s;
}

.buy-btn:hover{

  transform:scale(1.03);

  box-shadow:
  0 0 25px #00eaff;
}

/* ── Price with discount applied ─────────────────────────────────────────── */
.price-orig{
  display:block;
  font-size:0.85rem;
  color:rgba(255,255,255,0.35);
  text-decoration:line-through;
  margin-bottom:2px;
  font-weight:500;
}

.price-new{
  display:block;
  font-size:1.5rem;
  font-weight:800;
  color:#00eaff;
}

/* ── Coupon section (below all product cards) ────────────────────────────── */
/* ── Coupon top banner ───────────────────────────────────────────────────── */
.coupon-top-wrap{
  background:rgba(255,255,255,0.03);
  border-bottom:1px solid rgba(255,255,255,0.07);
}

.coupon-top-inner{
  max-width:1200px;
  margin:0 auto;
  padding:20px clamp(16px,4vw,60px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.coupon-top-left{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}

.coupon-top-icon{
  font-size:1.5rem;
  line-height:1;
}

.coupon-top-label{
  font-size:0.9rem;
  font-weight:700;
  color:#fff;
}

.coupon-top-sub{
  font-size:0.75rem;
  color:rgba(255,255,255,0.35);
  margin-top:2px;
}

.coupon-top-right{
  flex:1;
  max-width:420px;
}

/* ── Page header (products page) ─────────────────────────────────────────── */
.products-header{
  max-width:1200px;
  margin:0 auto;
  padding:40px clamp(16px,4vw,60px) 0;
}

.products-title{
  font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:900;
  color:#fff;
  letter-spacing:-0.02em;
}

.products-sub{
  font-size:0.95rem;
  color:rgba(255,255,255,0.4);
  margin-top:6px;
}

.coupon-section{
  max-width:480px;
  margin:0 auto 48px;
  padding:0 20px;
}

.coupon-label{
  font-size:0.78rem;
  color:rgba(255,255,255,0.4);
  letter-spacing:0.07em;
  text-transform:uppercase;
  margin-bottom:10px;
  font-weight:600;
}

.coupon-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}

.coupon-input{
  flex:1;
  padding:13px 16px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  color:#f0f0f0;
  font-size:0.95rem;
  font-family:inherit;
  letter-spacing:0.05em;
  outline:none;
  transition:border-color 0.2s, background 0.2s;
}

.coupon-input:focus{
  border-color:#00eaff;
  background:rgba(0,234,255,0.04);
}

.coupon-input:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

.coupon-apply-btn{
  padding:13px 22px;
  border-radius:12px;
  border:none;
  background:linear-gradient(90deg,#d400ff,#00eaff);
  color:#fff;
  font-weight:800;
  font-size:0.82rem;
  letter-spacing:0.08em;
  cursor:pointer;
  white-space:nowrap;
  transition:opacity 0.2s, transform 0.15s;
}

.coupon-apply-btn:hover{
  opacity:0.88;
  transform:scale(1.02);
}

.coupon-apply-btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
  transform:none;
}

.coupon-msg{
  margin-top:10px;
  font-size:0.85rem;
  min-height:20px;
  border-radius:8px;
  transition:all 0.2s;
}

.coupon-success{
  color:#00eaff;
  background:rgba(0,234,255,0.08);
  border:1px solid rgba(0,234,255,0.2);
  padding:9px 14px;
  border-radius:10px;
  font-weight:600;
}

.coupon-error{
  color:#ff6b6b;
  background:rgba(255,107,107,0.08);
  border:1px solid rgba(255,107,107,0.2);
  padding:9px 14px;
  border-radius:10px;
}

/* .launcher-overlay removed — was a body-level overlay div, now unused */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(16px);
  background:rgba(15,15,15,0.92);
  border-bottom:1px solid rgba(255,255,255,0.07);
}

.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 30px;
  height:60px;
  gap:20px;
}

.navbar .logo{
  font-size:1rem;
  font-weight:900;
  letter-spacing:0.1em;
  background:linear-gradient(90deg,#d400ff,#00eaff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  white-space:nowrap;
  flex-shrink:0;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.nav-auth-btn{
  padding:7px 16px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.05);
  color:white;
  font-size:0.85rem;
  cursor:pointer;
  text-decoration:none;
  transition:0.2s;
}

.nav-auth-btn:hover{
  border-color:#00eaff;
  color:#00eaff;
  background:rgba(0,234,255,0.08);
}

.nav-auth-btn--primary{
  background:linear-gradient(90deg,#d400ff,#00eaff);
  border:none;
  font-weight:700;
}

.nav-auth-btn--primary:hover{
  opacity:0.85;
  color:white;
  border:none;
}

.nav-admin-btn{
  padding:7px 16px;
  border-radius:8px;
  border:1px solid rgba(212,0,255,0.4);
  background:rgba(212,0,255,0.1);
  color:#d400ff;
  font-size:0.85rem;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  letter-spacing:0.05em;
  transition:0.2s;
}

.nav-admin-btn:hover{
  background:rgba(212,0,255,0.25);
  border-color:#d400ff;
}

/* ── Admin Layout ─────────────────────────────────────────────────────────── */

.admin-body{
  display:flex;
  height:100vh;
  overflow:hidden;
  background:#0a0a0a;
}

/* Sidebar */
.admin-sidebar{
  width:240px;
  flex-shrink:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(20px);
  border-right:1px solid rgba(255,255,255,0.07);
  padding:28px 16px;
  gap:6px;
}

.sidebar-logo{
  font-size:0.9rem;
  font-weight:900;
  letter-spacing:0.1em;
  background:linear-gradient(90deg,#d400ff,#00eaff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:30px;
  padding-left:4px;
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}

.sidebar-btn{
  width:100%;
  padding:11px 16px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  color:rgba(255,255,255,0.6);
  background:transparent;
  font-size:0.875rem;
  font-weight:500;
  text-align:left;
  transition:all 0.2s;
}

.sidebar-btn:hover{
  background:rgba(255,255,255,0.07);
  color:#fff;
}

.sidebar-btn--active{
  background:rgba(0,234,255,0.1);
  color:#00eaff;
  border:1px solid rgba(0,234,255,0.2);
}

.sidebar-exit{
  display:block;
  padding:11px 16px;
  border-radius:10px;
  color:rgba(255,255,255,0.35);
  text-decoration:none;
  font-size:0.8rem;
  transition:0.2s;
  border:1px solid transparent;
  margin-top:auto;
}

.sidebar-exit:hover{
  color:#fff;
  border-color:rgba(255,255,255,0.1);
}

/* Main scrollable area */
.admin-main{
  flex:1;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  min-width:0;
  padding:0;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.1) transparent;
}

/* Top bar */
.admin-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 32px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:sticky;
  top:0;
  background:rgba(10,10,10,0.85);
  backdrop-filter:blur(12px);
  z-index:10;
}

.admin-topbar-title{
  font-size:1.2rem;
  font-weight:800;
  color:#fff;
}

.admin-badge{
  padding:5px 14px;
  border-radius:20px;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.08em;
  background:rgba(212,0,255,0.15);
  color:#d400ff;
  border:1px solid rgba(212,0,255,0.3);
}

/* Panel grid */
.admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:20px;
  padding:28px 32px;
}

.admin-panel{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:16px;
  padding:24px;
  transition:border-color 0.2s;
}

.admin-panel:hover{
  border-color:rgba(255,255,255,0.13);
}

.admin-panel-title{
  font-size:0.95rem;
  font-weight:700;
  color:#fff;
  margin-bottom:18px;
  letter-spacing:0.04em;
}

.admin-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.admin-input{
  width:100%;
  padding:11px 14px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  color:#f0f0f0;
  font-size:0.875rem;
  outline:none;
  transition:border-color 0.2s;
}

.admin-input:focus{
  border-color:#00eaff;
  background:rgba(0,234,255,0.04);
}

.admin-action-btn{
  padding:11px;
  border-radius:10px;
  border:none;
  background:linear-gradient(90deg,#d400ff,#00eaff);
  color:#fff;
  font-weight:700;
  font-size:0.85rem;
  cursor:pointer;
  letter-spacing:0.06em;
  transition:opacity 0.2s;
}

.admin-action-btn:hover{
  opacity:0.85;
}

.admin-quick-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.admin-quick-btn{
  padding:12px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.09);
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.75);
  font-size:0.8rem;
  cursor:pointer;
  transition:all 0.2s;
}

.admin-quick-btn:hover{
  background:rgba(0,234,255,0.08);
  border-color:rgba(0,234,255,0.25);
  color:#00eaff;
}

/* ── Hamburger ─────────────────────────────────────────────────────────── */
.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:transparent;
  border:none;
  padding:6px;
  cursor:pointer;
  border-radius:8px;
  flex-shrink:0;
}
.hamburger span{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:0.2s;
}
.hamburger:hover{ background:rgba(255,255,255,0.08); }

/* ── Topbar left group ─────────────────────────────────────────────────── */
.admin-topbar-left{
  display:flex;
  align-items:center;
  gap:12px;
}

/* ── Sidebar overlay (mobile) ──────────────────────────────────────────── */
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:99;
}

/* ── Stats row ─────────────────────────────────────────────────────────── */
.stats-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  padding:24px 24px 0;
}

.stat-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:20px;
  transition:border-color 0.2s;
}
.stat-card:hover{ border-color:rgba(0,234,255,0.3); }

.stat-label{
  font-size:0.75rem;
  color:rgba(255,255,255,0.45);
  letter-spacing:0.06em;
  margin-bottom:8px;
}

.stat-value{
  font-size:1.6rem;
  font-weight:800;
  color:#fff;
}

/* ── Section wrapper ───────────────────────────────────────────────────── */
.admin-section{ animation:fadeIn 0.18s ease; }
@keyframes fadeIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

.admin-section-inner{
  padding:24px;
}
.admin-section-inner .admin-panel{
  width:100%;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.table-wrap{
  overflow-x:auto;
  border-radius:10px;
  -webkit-overflow-scrolling:touch;
}

.admin-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.85rem;
  min-width:480px;
}

.admin-table th{
  text-align:left;
  padding:10px 14px;
  font-size:0.75rem;
  letter-spacing:0.06em;
  color:rgba(255,255,255,0.4);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.admin-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.8);
}

.admin-table tbody tr:hover td{
  background:rgba(255,255,255,0.03);
}

.empty-row{
  text-align:center;
  color:rgba(255,255,255,0.25);
  padding:32px !important;
  font-size:0.85rem;
}

/* ── Labels ────────────────────────────────────────────────────────────── */
.admin-label{
  font-size:0.75rem;
  color:rgba(255,255,255,0.45);
  letter-spacing:0.05em;
  margin-bottom:-4px;
}

/* ── Social preview ────────────────────────────────────────────────────── */
.social-preview{ display:flex; flex-direction:column; gap:14px; }

.social-preview-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  background:rgba(255,255,255,0.04);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.07);
}

.social-label{
  font-size:0.8rem;
  color:rgba(255,255,255,0.45);
  letter-spacing:0.05em;
}

.social-val{
  font-size:0.8rem;
  color:#00eaff;
  max-width:60%;
  text-align:right;
  word-break:break-all;
}

/* ── Sidebar icon ──────────────────────────────────────────────────────── */
.sb-icon{
  font-size:0.55rem;
  margin-right:6px;
  opacity:0.5;
}

/* ── Product count badge ───────────────────────────────────────────────── */
.prod-count-badge{
  display:inline-block;
  margin-left:10px;
  padding:2px 10px;
  border-radius:20px;
  font-size:0.7rem;
  font-weight:700;
  background:rgba(0,234,255,0.1);
  color:#00eaff;
  border:1px solid rgba(0,234,255,0.2);
  vertical-align:middle;
}

/* ── Product edit rows ─────────────────────────────────────────────────── */
.product-cards-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.prod-edit-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:12px;
  transition:border-color 0.2s;
}
.prod-edit-row:hover{
  border-color:rgba(255,255,255,0.14);
}

.prod-edit-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.prod-edit-name{
  font-size:0.95rem;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.prod-edit-desc{
  font-size:0.78rem;
  color:rgba(255,255,255,0.35);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.prod-edit-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.prod-edit-price{
  font-size:1rem;
  font-weight:800;
  color:#fff;
  min-width:52px;
  text-align:right;
}
.prod-edit-qty{
  font-size:0.78rem;
  color:rgba(255,255,255,0.35);
}

.stock-pill-in{
  font-size:0.75rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:20px;
  background:rgba(0,255,128,0.1);
  color:#00e676;
  border:1px solid rgba(0,255,128,0.25);
  white-space:nowrap;
}
.stock-pill-out{
  font-size:0.75rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:20px;
  background:rgba(255,80,80,0.1);
  color:#ff5252;
  border:1px solid rgba(255,80,80,0.25);
  white-space:nowrap;
}

.prod-edit-btn{
  padding:8px 18px;
  border-radius:8px;
  border:1px solid rgba(0,234,255,0.25);
  background:rgba(0,234,255,0.07);
  color:#00eaff;
  font-size:0.8rem;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
  transition:all 0.2s;
}
.prod-edit-btn:hover{
  background:rgba(0,234,255,0.18);
  border-color:#00eaff;
}

/* ── Edit product modal ────────────────────────────────────────────────── */
.edit-modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  z-index:200;
}

.edit-modal{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -46%) scale(0.96);
  opacity:0;
  pointer-events:none;
  width:min(480px, calc(100vw - 32px));
  background:#141414;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;
  padding:28px;
  z-index:201;
  transition:transform 0.22s ease, opacity 0.22s ease;
  max-height:90vh;
  overflow-y:auto;
}
.edit-modal--open{
  transform:translate(-50%, -50%) scale(1);
  opacity:1;
  pointer-events:all;
}

.edit-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
}
.edit-modal-title{
  font-size:1.05rem;
  font-weight:800;
  color:#fff;
}
.edit-modal-close{
  background:rgba(255,255,255,0.07);
  border:none;
  color:#fff;
  font-size:0.9rem;
  width:32px;
  height:32px;
  border-radius:8px;
  cursor:pointer;
  transition:background 0.2s;
}
.edit-modal-close:hover{ background:rgba(255,255,255,0.15); }

.edit-modal-footer{
  display:flex;
  gap:12px;
  margin-top:22px;
}

/* ── In/Out stock toggle inside modal ─────────────────────────────────── */
.stock-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
}
.stock-toggle-group{
  display:flex;
  gap:8px;
}
.stock-toggle-btn{
  padding:7px 14px;
  border-radius:8px;
  font-size:0.8rem;
  font-weight:700;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.1);
  background:transparent;
  color:rgba(255,255,255,0.4);
  transition:all 0.18s;
}
.stock-in.stock-toggle-active{
  background:rgba(0,255,128,0.12);
  color:#00e676;
  border-color:rgba(0,255,128,0.35);
}
.stock-out.stock-toggle-active{
  background:rgba(255,80,80,0.12);
  color:#ff5252;
  border-color:rgba(255,80,80,0.35);
}

/* ── Mobile adjustments for product rows ──────────────────────────────── */
@media(max-width:600px){
  .prod-edit-row{
    flex-wrap:wrap;
    gap:10px;
  }
  .prod-edit-meta{
    flex-wrap:wrap;
    gap:8px;
  }
  .prod-edit-qty{ display:none; }
}

/* ══ VARIANT DROPDOWN — STORE ════════════════════════════════════════════ */

.variant-toggle{
  width:100%;
  margin-top:10px;
  padding:9px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  color:rgba(255,255,255,0.6);
  font-size:0.8rem;
  font-weight:600;
  cursor:pointer;
  transition:background 0.2s,color 0.2s;
}
.variant-toggle:hover{
  background:rgba(0,234,255,0.08);
  color:#00eaff;
  border-color:rgba(0,234,255,0.25);
}
.vt-count{
  background:rgba(0,234,255,0.15);
  color:#00eaff;
  font-size:0.7rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:20px;
}

.variant-list{
  display:none;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
  overflow:hidden;
}
.variant-list--open{
  display:flex;
}

.variant-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  transition:border-color 0.2s;
}
.variant-row:hover{
  border-color:rgba(0,234,255,0.2);
}
.variant-info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.variant-name{
  font-size:0.82rem;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.variant-desc{
  font-size:0.72rem;
  color:rgba(255,255,255,0.4);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.variant-price{
  font-size:0.9rem;
  font-weight:800;
  color:#00eaff;
  white-space:nowrap;
}
.variant-buy-btn{
  padding:6px 14px;
  background:linear-gradient(135deg,#9b59ff,#00c8ff);
  border:none;
  border-radius:8px;
  color:#fff;
  font-size:0.72rem;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:opacity 0.2s;
}
.variant-buy-btn:hover{ opacity:0.85; }

/* ══ VARIANT MANAGEMENT — ADMIN ══════════════════════════════════════════ */

.variant-admin-section{
  margin-top:4px;
  border-top:1px solid rgba(255,255,255,0.07);
  padding-top:16px;
}
.variant-admin-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.variant-admin-count{
  font-size:0.75rem;
  color:rgba(255,255,255,0.35);
  font-weight:600;
}
.variant-admin-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}
.variant-admin-empty{
  font-size:0.8rem;
  color:rgba(255,255,255,0.3);
  padding:8px 0;
}
.variant-admin-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:9px;
}
.variant-admin-info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.variant-admin-name{
  font-size:0.82rem;
  font-weight:700;
  color:#fff;
}
.variant-admin-desc{
  font-size:0.72rem;
  color:rgba(255,255,255,0.4);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.variant-admin-price{
  font-size:0.85rem;
  font-weight:800;
  color:#00eaff;
  white-space:nowrap;
}
.variant-admin-del{
  background:rgba(255,60,80,0.12);
  border:1px solid rgba(255,60,80,0.2);
  color:#ff4444;
  border-radius:6px;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.7rem;
  cursor:pointer;
  flex-shrink:0;
  transition:background 0.2s;
}
.variant-admin-del:hover{ background:rgba(255,60,80,0.25); }

.variant-add-form{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.variant-add-btn{
  width:100%;
  margin-top:2px;
}

/* ── Inline-editable variant rows ───────────────────────────────────────── */
.variant-edit-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:10px;
  margin-bottom:8px;
}
.variant-edit-label{
  font-size:0.68rem;
  font-weight:700;
  color:rgba(255,255,255,0.3);
  text-transform:uppercase;
  letter-spacing:0.06em;
  padding-top:10px;
  min-width:56px;
  white-space:nowrap;
}
.variant-edit-fields{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.variant-edit-price-input{
  max-width:140px;
}
@media(max-width:420px){
  .variant-edit-price-input{ max-width:100%; }
  .variant-edit-label{ min-width:44px; font-size:0.62rem; }
}

.prod-version-pill{
  font-size:0.68rem;
  font-weight:700;
  padding:3px 9px;
  border-radius:20px;
  background:rgba(0,234,255,0.12);
  color:#00eaff;
  border:1px solid rgba(0,234,255,0.2);
  white-space:nowrap;
}

/* ══ MOBILE RESPONSIVE — STORE ═══════════════════════════════════════════ */
@media(max-width:640px){
  .coupon-top-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .coupon-top-right{
    width:100%;
    max-width:100%;
  }
  .products-page{
    grid-template-columns:1fr;
    gap:16px;
  }
  .variant-row{
    flex-wrap:wrap;
    gap:8px;
  }
  .variant-info{ width:100%; }
}

/* ══ MOBILE RESPONSIVE — ADMIN ═══════════════════════════════════════════ */
@media(max-width:768px){
  .admin-body{
    flex-direction:column;
    height:auto;
    min-height:100vh;
    overflow:visible;
  }

  .admin-sidebar{
    position:fixed;
    left:-260px;
    top:0;
    height:100%;
    width:240px;
    z-index:200;
    transition:left 0.25s ease;
    overflow-y:auto;
  }
  .admin-sidebar.sidebar--open{ left:0; }

  .admin-main{
    width:100%;
    height:auto;
    min-height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
  }

  .hamburger{ display:flex; }

  .admin-topbar{
    padding:13px 16px;
    position:sticky;
    top:0;
    z-index:20;
  }
  .admin-topbar-title{ font-size:1rem; }

  .stats-row{
    grid-template-columns:1fr 1fr;
    padding:14px 14px 0;
    gap:10px;
  }
  .stat-card{ padding:16px 14px; }
  .stat-value{ font-size:1.2rem; }
  .stat-label{ font-size:0.7rem; }

  .admin-grid{
    grid-template-columns:1fr;
    padding:14px;
    gap:12px;
  }

  .admin-section-inner{
    padding:14px;
  }

  .admin-panel{
    padding:18px 16px;
  }

  .admin-panel-title{
    font-size:0.9rem;
  }

  /* Tables: horizontal scroll */
  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:10px;
  }
  .admin-table{
    min-width:540px;
  }

  /* Product rows: stack on mobile */
  .prod-edit-row{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:14px;
  }
  .prod-edit-meta{
    flex-wrap:wrap;
    gap:8px;
    width:100%;
  }
  .prod-edit-btn{
    width:100%;
    text-align:center;
  }
  .prod-edit-qty{ display:none; }

  /* Edit modal: full screen on mobile */
  .edit-modal{
    position:fixed;
    inset:0;
    top:auto;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    max-width:100%;
    max-height:88vh;
    border-radius:20px 20px 0 0;
    transform:translateY(100%);
    overflow-y:auto;
  }
  .edit-modal.edit-modal--open{
    transform:translateY(0);
  }

  .social-val{
    max-width:55%;
    font-size:0.75rem;
    word-break:break-all;
  }

  .admin-quick-grid{
    grid-template-columns:1fr 1fr;
  }

  .variant-admin-row{
    flex-wrap:wrap;
    gap:8px;
  }
  .variant-add-form{
    gap:8px;
  }
}

@media(max-width:420px){
  .stats-row{ gap:8px; padding:12px 12px 0; }
  .admin-grid{ padding:10px; gap:10px; }
  .admin-panel{ padding:14px 12px; }
  .stat-card{ padding:12px; }
  .stat-value{ font-size:1.05rem; }
  .edit-modal{ max-height:92vh; }
  .coupon-top-wrap{ padding:14px 14px; }
}

.admin-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.admin-user{
  padding:12px 18px;

  border-radius:12px;

  background:
  rgba(255,255,255,0.06);
}

.stats-grid{

  margin-top:35px;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));

  gap:25px;
}

.stat-card{

  padding:25px;

  border-radius:18px;

  background:
  rgba(255,255,255,0.05);

  border:
  1px solid rgba(255,255,255,0.08);

  box-shadow:
  0 0 25px rgba(0,234,255,0.08);
}

.stat-card p{
  margin-top:10px;

  font-size:2rem;

  color:#00eaff;
}

.chart-panel,
.inventory-panel,
.orders-panel{

  margin-top:35px;

  padding:25px;

  border-radius:18px;

  background:
  rgba(255,255,255,0.05);

  border:
  1px solid rgba(255,255,255,0.08);
}

table{
  width:100%;
  margin-top:20px;
  border-collapse:collapse;
}

th,td{
  padding:16px;
  text-align:left;

  border-bottom:
  1px solid rgba(255,255,255,0.08);
}

.order-card{

  margin-top:15px;

  padding:18px;

  border-radius:12px;

  background:
  rgba(255,255,255,0.04);
}

/* ── Admin Login Page ─────────────────────────────────────────────────────── */

.admin-login-body{

  display:flex;

  justify-content:center;
  align-items:center;

  min-height:100vh;
}

.admin-login-box{

  width:400px;

  padding:40px;

  border-radius:20px;

  background:
  rgba(0,0,0,0.45);

  backdrop-filter:blur(16px);

  border:
  1px solid rgba(255,255,255,0.08);

  text-align:center;
}

.admin-login-box h1{

  margin-bottom:30px;

  color:#00eaff;
}

.admin-login-box input{

  width:100%;

  margin-bottom:20px;

  padding:14px;

  border:none;

  border-radius:12px;

  background:
  rgba(255,255,255,0.08);

  color:white;
}

.admin-login-box button{

  width:100%;

  padding:14px;

  border:none;

  border-radius:12px;

  cursor:pointer;

  color:white;

  font-weight:bold;

  background:
  linear-gradient(
    90deg,
    #d400ff,
    #00eaff
  );
}

/* ── Social Links ─────────────────────────────────────────────────────────── */

.social-links{

  display:flex;

  gap:20px;
}

.social-links a{

  color:white;

  text-decoration:none;

  transition:0.3s;
}

.social-links a:hover{

  color:#00eaff;
}

/* ── Back Button ──────────────────────────────────────────────────────────── */

.back-btn{

  display:inline-block;

  margin:20px;

  padding:10px 20px;

  border:1px solid rgba(255,255,255,0.15);

  border-radius:10px;

  background:rgba(255,255,255,0.05);

  color:white;

  cursor:pointer;

  font-size:0.9rem;

  transition:0.3s;
}

.back-btn:hover{

  background:rgba(0,234,255,0.1);

  border-color:#00eaff;

  color:#00eaff;
}

/* ── Navigation Links ─────────────────────────────────────────────────────── */

.nav-links{

  display:flex;

  gap:25px;

  align-items:center;
}

.nav-links a{

  color:white;

  text-decoration:none;

  font-weight:600;

  position:relative;

  transition:0.3s;
}

.nav-links a::after{

  content:"";

  position:absolute;

  width:0;

  height:2px;

  left:0;
  bottom:-5px;

  background:#00eaff;

  transition:0.3s;
}

.nav-links a:hover::after{
  width:100%;
}

.nav-links a:hover{
  color:#00eaff;
}

/* ── Product Status ───────────────────────────────────────────────────────── */

.product-status{
  margin-top:0;
  margin-bottom:16px;
  padding:5px 14px;
  border-radius:30px;
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.06em;
}

.in-stock{

  background:
  rgba(0,255,128,0.15);

  color:#00ff80;

  border:
  1px solid rgba(0,255,128,0.3);
}

.out-stock{

  background:
  rgba(255,0,80,0.15);

  color:#ff0055;

  border:
  1px solid rgba(255,0,80,0.3);
}

/* ── Featured Grid ────────────────────────────────────────────────────────── */

.featured-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(260px,1fr));

  gap:25px;

  margin-top:25px;
}

.featured-section{
  margin-top:80px;
}

/* ── Featured Banner ──────────────────────────────────────────────────────── */

.featured-banner{
  margin-top:60px;
  padding:40px;
  border-radius:20px;
  text-align:center;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
}

/* ══ NAV TAB STRIP ═══════════════════════════════════════════════════════ */

.nav-tab-bar{
  position:sticky;
  top:60px;
  z-index:99;
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:#111;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.nav-tab-bar::-webkit-scrollbar{ display:none; }

/* legacy alias kept for any other pages */
.nav-tab-strip-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:rgba(255,255,255,0.04);
  border-top:1px solid rgba(255,255,255,0.1);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav-tab-strip-wrap::-webkit-scrollbar{ display:none; }

.nav-tab-strip{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:0;
  padding:0 8px;
  width:max-content;
  min-width:100%;
}

.nav-tab{
  display:inline-flex;
  align-items:center;
  padding:9px 14px;
  font-size:0.8rem;
  font-weight:600;
  color:rgba(255,255,255,0.8);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color 0.2s, border-color 0.2s;
  flex-shrink:0;
  letter-spacing:0.01em;
}
.nav-tab:hover{ color:#fff; }
.nav-tab--active{
  color:#00eaff;
  border-bottom-color:#00eaff;
}
.nav-tab--discord{ color:#7983f5; }
.nav-tab--discord:hover{ color:#99a5f7; }
.nav-tab--admin{
  color:rgba(212,0,255,0.9);
  margin-left:auto;
}
.nav-tab--admin:hover{ color:#d400ff; }

/* ── Mobile: single scrollable row, no wrapping ── */
@media(max-width:768px){
  .nav-tab-bar{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-tab-strip{
    flex-wrap:nowrap;
    width:max-content;
    min-width:100%;
    padding:0 4px;
  }
  .nav-tab{
    font-size:0.72rem;
    padding:9px 11px;
    flex-shrink:0;
  }
  .nav-tab--admin{
    margin-left:0;
  }
}

/* ══ ANNOUNCEMENT BAR ════════════════════════════════════════════════════ */

.announcement-bar{
  display:block;
  width:100%;
  padding:10px 16px;
  text-align:center;
  font-weight:700;
  font-size:0.82rem;
  color:#fff;
  letter-spacing:0.04em;
  background:linear-gradient(90deg,#d400ff,#5865f2,#00eaff);
  text-decoration:none;
  transition:opacity 0.2s;
}
.announcement-bar:hover{ opacity:0.9; }

/* ══ HOMEPAGE HERO ═══════════════════════════════════════════════════════ */

.home-hero{
  position:relative;
  z-index:10;
  text-align:center;
  padding:60px 20px 40px;
  isolation:isolate;
}
/* animated grid rendered as inert decoration behind hero content */
.home-hero::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size:50px 50px;
  opacity:0.2;
  animation:gridMove 12s linear infinite;
  z-index:-1;
}
.home-hero-tag{
  display:inline-block;
  padding:6px 16px;
  border-radius:30px;
  background:rgba(0,234,255,0.1);
  border:1px solid rgba(0,234,255,0.2);
  color:#00eaff;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.05em;
  margin-bottom:20px;
}
.home-hero-title{
  font-size:clamp(2.8rem,10vw,5.5rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg,#fff 0%,#00eaff 60%,#d400ff 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:16px;
}
.home-hero-sub{
  font-size:clamp(0.9rem,2.5vw,1.1rem);
  color:rgba(255,255,255,0.45);
  margin-bottom:28px;
  max-width:420px;
  margin-left:auto;
  margin-right:auto;
}
.home-hero-btn{
  display:inline-block;
  padding:14px 32px;
  background:linear-gradient(135deg,#d400ff,#00eaff);
  border-radius:40px;
  color:#fff;
  font-weight:800;
  font-size:0.95rem;
  text-decoration:none;
  letter-spacing:0.04em;
  transition:opacity 0.2s, transform 0.2s;
  position:relative;
  z-index:2;
}
.home-hero-btn:hover{ opacity:0.88; transform:translateY(-2px); }

/* ══ HOME SECTIONS ═══════════════════════════════════════════════════════ */

.home-section{
  width:100%;
  max-width:1200px;
  margin:0 auto 50px;
  padding:0 clamp(16px,4vw,48px);
}
.home-section-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:20px;
}
.home-section-title{
  font-size:clamp(1.1rem,3vw,1.4rem);
  font-weight:800;
  color:#fff;
}
.home-section-sub{
  font-size:0.78rem;
  color:rgba(255,255,255,0.35);
}
.home-see-all{
  font-size:0.8rem;
  font-weight:600;
  color:#00eaff;
  text-decoration:none;
  white-space:nowrap;
}
.home-see-all:hover{ opacity:0.75; }

/* ══ HOME PRODUCT GRID ═══════════════════════════════════════════════════ */

.home-product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:16px;
}
.home-product-grid .premium-card{
  padding:24px 20px 20px;
}
.home-product-grid .buy-btn{
  font-size:0.82rem;
  padding:11px;
}

@media(max-width:640px){
  .home-product-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .home-product-grid .premium-card{
    padding:40px 12px 14px;
    gap:0;
  }
  .home-product-grid .premium-card h2{
    font-size:0.82rem;
    font-weight:800;
    margin-bottom:4px;
    line-height:1.25;
    word-break:break-word;
  }
  .home-product-grid .premium-card p{
    font-size:0.7rem;
    line-height:1.4;
    margin-bottom:6px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .home-product-grid .price{
    font-size:1.05rem;
    margin-top:6px;
    margin-bottom:6px;
  }
  .home-product-grid .product-status{
    font-size:0.62rem;
    padding:3px 8px;
    margin-bottom:10px;
  }
  .home-product-grid .buy-btn{
    padding:9px 8px;
    font-size:0.72rem;
  }
  .home-product-grid .badge{
    font-size:0.58rem;
    padding:3px 8px;
    top:8px;
    right:8px;
  }
}

@media(max-width:360px){
  .home-product-grid{
    grid-template-columns:1fr;
  }
}

/* ══ HOT SALES GRID ══════════════════════════════════════════════════════ */

.hot-sales-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

@media(max-width:580px){
  .hot-sales-grid{
    grid-template-columns:1fr;
  }
}

.hot-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:28px 22px 22px;
  border-radius:18px;
  border:1px solid rgba(0,234,255,0.18);
  background:rgba(0,234,255,0.04);
  text-decoration:none;
  overflow:hidden;
  transition:transform 0.25s, border-color 0.25s;
  cursor:pointer;
}
.hot-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,234,255,0.4);
}
.hot-card--finals{
  border-color:rgba(212,0,255,0.2);
  background:rgba(212,0,255,0.04);
}
.hot-card--finals:hover{
  border-color:rgba(212,0,255,0.45);
}

.hot-card-glow{
  position:absolute;
  top:-60px;
  right:-60px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,234,255,0.12),transparent 70%);
  pointer-events:none;
}
.hot-card--finals .hot-card-glow{
  background:radial-gradient(circle,rgba(212,0,255,0.12),transparent 70%);
}

.hot-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 12px;
  border-radius:20px;
  background:rgba(0,234,255,0.12);
  border:1px solid rgba(0,234,255,0.25);
  color:#00eaff;
  font-size:0.7rem;
  font-weight:800;
  letter-spacing:0.07em;
  align-self:flex-start;
  margin-bottom:14px;
}
.hot-badge--new{
  background:rgba(212,0,255,0.12);
  border-color:rgba(212,0,255,0.3);
  color:#d400ff;
}

.hot-game-tag{
  font-size:0.72rem;
  font-weight:700;
  color:rgba(255,255,255,0.35);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:6px;
}
.hot-title{
  font-size:clamp(1rem,2.5vw,1.25rem);
  font-weight:800;
  color:#fff;
  line-height:1.2;
  margin-bottom:8px;
}
.hot-desc{
  font-size:0.8rem;
  color:rgba(255,255,255,0.45);
  line-height:1.5;
  flex:1;
  margin-bottom:16px;
}
.hot-price-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.hot-price{
  font-size:1.2rem;
  font-weight:900;
  color:#00eaff;
}
.hot-card--finals .hot-price{
  color:#d400ff;
}
.hot-versions{
  font-size:0.72rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:20px;
  background:rgba(255,255,255,0.07);
  color:rgba(255,255,255,0.45);
}
.hot-cta{
  font-size:0.82rem;
  font-weight:700;
  color:#00eaff;
}
.hot-card--finals .hot-cta{
  color:#d400ff;
}

@media(max-width:640px){
  .hot-card{ padding:22px 18px 18px; }
  .hot-title{ font-size:1rem; }
  .hot-desc{ font-size:0.76rem; }
}

/* ══ COMPATIBILITY SECTION ═══════════════════════════════════════════════ */

.compat-section{
  margin:12px 0 10px;
  padding:12px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
}

.compat-title{
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  margin-bottom:8px;
}

.compat-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}

.compat-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:20px;
  font-size:0.76rem;
  font-weight:600;
  background:rgba(0,234,255,0.08);
  border:1px solid rgba(0,234,255,0.25);
  color:#00eaff;
}

.xim-notice{
  font-size:0.72rem;
  font-weight:600;
  color:rgba(212,0,255,0.85);
  border-top:1px solid rgba(255,255,255,0.06);
  padding-top:8px;
  margin-top:2px;
  letter-spacing:0.01em;
}

/* ══ HOME PACK LINK ══════════════════════════════════════════════════════ */
.home-view-pack-btn{
  display:inline-block;
  margin-top:10px;
  font-size:0.82rem;
  font-weight:700;
  color:#00eaff;
  text-decoration:none;
  letter-spacing:0.04em;
  transition:opacity 0.2s;
}
.home-view-pack-btn:hover{ opacity:0.7; }

/* ══ CUSTOMER DASHBOARD ══════════════════════════════════════════════════ */

.dash-wrap{
  max-width:820px;
  margin:0 auto;
  padding:28px 20px 60px;
}

.dash-welcome-card{
  display:flex;
  align-items:center;
  gap:16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:20px 22px;
  margin-bottom:22px;
}
.dash-welcome-avatar{
  font-size:2.2rem;
  line-height:1;
  flex-shrink:0;
}
.dash-welcome-label{
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.1em;
  color:rgba(255,255,255,0.35);
  margin-bottom:4px;
}
.dash-welcome-email{
  font-size:1rem;
  font-weight:700;
  color:#fff;
}
.dash-welcome-since{
  font-size:0.78rem;
  color:rgba(255,255,255,0.35);
  margin-top:2px;
}

.dash-tabs{
  display:flex;
  gap:6px;
  margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding-bottom:0;
}
.dash-tab{
  padding:10px 18px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,0.5);
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color 0.2s, border-color 0.2s;
}
.dash-tab:hover{ color:#fff; }
.dash-tab--active{
  color:#00eaff;
  border-bottom-color:#00eaff;
}

.dash-tab-content{ animation:fadeIn 0.15s ease; }
@keyframes fadeIn{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

.dash-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
  flex-wrap:wrap;
  gap:10px;
}
.dash-section-title{
  font-size:1.05rem;
  font-weight:700;
  color:#fff;
  margin:0;
}
.dash-new-btn{
  padding:8px 16px !important;
  font-size:0.78rem !important;
}
.dash-form-msg{
  font-size:0.8rem;
  margin-top:6px;
}

/* ══ TICKETS ═════════════════════════════════════════════════════════════ */

.ticket-create-form{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:16px;
  margin-bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ticket-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:12px;
  margin-bottom:10px;
  overflow:hidden;
  transition:border-color 0.2s;
}
.ticket-card:hover{ border-color:rgba(255,255,255,0.14); }

.ticket-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  cursor:pointer;
  gap:12px;
  flex-wrap:wrap;
}
.ticket-card-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}
.ticket-card-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.ticket-id-badge{
  font-family:monospace;
  font-size:0.7rem;
  color:rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.06);
  border-radius:4px;
  padding:2px 7px;
  white-space:nowrap;
  flex-shrink:0;
}
.ticket-subject-text{
  font-size:0.88rem;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ticket-status-pill{
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.06em;
  border:1px solid;
  border-radius:20px;
  padding:2px 9px;
}
.ticket-date-text{
  font-size:0.75rem;
  color:rgba(255,255,255,0.35);
  white-space:nowrap;
}

.ticket-thread-wrap{
  border-top:1px solid rgba(255,255,255,0.06);
  padding:14px 16px;
}
.ticket-thread{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:12px;
}
.ticket-msg{
  border-radius:10px;
  padding:10px 14px;
  max-width:90%;
}
.ticket-msg--user{
  background:rgba(0,234,255,0.07);
  border:1px solid rgba(0,234,255,0.15);
  align-self:flex-start;
}
.ticket-msg--admin{
  background:rgba(212,0,255,0.07);
  border:1px solid rgba(212,0,255,0.2);
  align-self:flex-end;
}
.ticket-msg-meta{
  font-size:0.72rem;
  color:rgba(255,255,255,0.45);
  margin-bottom:5px;
}
.ticket-msg-text{
  font-size:0.86rem;
  color:rgba(255,255,255,0.9);
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
}
.ticket-reply-wrap{
  border-top:1px solid rgba(255,255,255,0.05);
  padding-top:12px;
}
.ticket-empty-state{
  text-align:center;
  padding:40px 20px;
  color:rgba(255,255,255,0.5);
}

@media(max-width:540px){
  .ticket-card-header{ flex-direction:column; align-items:flex-start; gap:8px; }
  .ticket-card-right{ width:100%; justify-content:flex-start; }
  .ticket-msg{ max-width:100%; }
}