* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

body {
  background: #0a0a0a;
  color: #d0d0d0;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
  min-height: 100vh;
}

/* ── VIDEO BACKGROUND ─────────────────────────────────────── */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}


/* ── NAVBAR ───────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  padding: 0 35px;
  height: 50px;
  backdrop-filter: blur(8px);
}

.nav-logo {
  height: 27px;
  margin-right: 25px;
  display: block;
}

.nav-tabs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1px;
}

.nav-tab {
  padding: 5px 14px;
  cursor: pointer;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  height: 50px;
}

.nav-tab:hover { color: rgb(122,120,255); }
.nav-tab.active { color: #fff; border-bottom-color: rgb(122,120,255); }

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── MAIN WRAPPER ─────────────────────────────────────────── */
.main {
  position: relative;
  z-index: 2;
  max-width: 1800px;
  margin: 0 auto;
  padding: 16px 20px;
}

/* ── BADGES ───────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* ── USER TIER EFFECTS ──────────────────────────────────────── */
.user-t1 { color: rgba(255,255,255,0.5); }

.user-t2 {
  background: linear-gradient(90deg, #00f2ff, #fff, #5678ff, #fff, #00f2ff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 4px rgba(0, 195, 255, 0.5));
  animation: shimmer 8s linear infinite;
}
.fannouncement-bar {
      display: flex; align-items: center; justify-content: left; gap: 15px;
      backdrop-filter: blur(8px); background: rgba(0, 255, 34, 0.02);
      border: 1px solid rgba(0, 255, 21, 0.2); border-radius: 18px;
      padding: 28px 28px; margin-bottom: 16px; font-size: 16px; color: #00ff3c;
    }
    .fannouncement-content { display: flex; flex-direction: column; gap: 4px; }
    .fannouncement-title { font-size: 16px; font-weight: 600; color: #00ff3c; }
    .fannouncement-desc { font-size: 14px; color: rgba(4, 255, 0, 0.7); }

.user-t3 {
  position: relative;
      color: #ffae00;
      font-family: monospace;
      filter: drop-shadow(0 0 6px #ffb300) drop-shadow(0 0 12px #ffc800);
      animation: flicker-glow 8s ease-in-out infinite;
}

.user-t3::before, .user-t3::after {
  content: attr(data-text);
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      font-family: monospace;
}

.user-t3::before {color: #ffcc00;
      animation: glitch-1 2s infinite;
      clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
      transform: translateX(-2px);
      opacity: 0.7; }
.user-t3::after  { color: #ff00ff;
      animation: glitch-2 2s infinite;
      clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
      transform: translateX(2px);
      opacity: 0.7;}

.role-badge {
  display: inline-block; padding: 4px 6px; border-radius: 3px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  margin-right: 5px; vertical-align: middle;
}
.role-admin, .role-moderator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  font-size: 9px;
  font-weight: 500;
  padding: 3px 0;
  border-radius: 3px;
  text-transform: uppercase;
}

.role-admin     { background: rgba(255,80,80,0.15); color: #ff5050; border: 1px solid rgba(255,80,80,0.3); }
.role-moderator { background: rgba(0,255,26,0.1);   color: #00ff1a; border: 1px solid rgba(0,255,26,0.2); }
/* Tier 4 — gold shimmer */
.user-t4 {
  background: linear-gradient(90deg, #ffd700, #fff, #ffaa00, #fff, #ffd700);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(255,215,0,0.7));
  animation: shimmer 3s linear infinite;
}

/* Tier 5 — red glitch */
.user-t5 {
  position: relative;
  color: #ff3030;
  filter: drop-shadow(0 0 6px #ff3030) drop-shadow(0 0 12px #ff3030);
  animation: flicker-glow-red 3s ease-in-out infinite;
}

.user-t5::before, .user-t5::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}

.user-t5::before { color: #ffff00; animation: glitch-1 2s infinite; clip-path: polygon(0 0,100% 0,100% 35%,0 35%); transform: translateX(-2px); opacity: 0.7; }
.user-t5::after  { color: #ff00ff; animation: glitch-2 2s infinite; clip-path: polygon(0 65%,100% 65%,100% 100%,0 100%); transform: translateX(2px); opacity: 0.7; }

/* Tier 6 — rainbow cycle */
.user-t6 {
  background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0088ff, #ff00ff, #ff0000);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.4));
  animation: rainbow 4s linear infinite;
}

/* Tier 7 — ice blue */
.user-t7 {
  position: relative;
  color: #00bfff;
  filter: drop-shadow(0 0 6px #00bfff) drop-shadow(0 0 14px #007fff);
  animation: flicker-ice 3s ease-in-out infinite;
}

.user-t7::before, .user-t7::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}

.user-t7::before { color: #ffffff; animation: glitch-1 3s infinite; clip-path: polygon(0 0,100% 0,100% 35%,0 35%); transform: translateX(-2px); opacity: 0.5; }
.user-t7::after  { color: #0055ff; animation: glitch-2 3s infinite; clip-path: polygon(0 65%,100% 65%,100% 100%,0 100%); transform: translateX(2px); opacity: 0.5; }
/* Tier 8 — corrupted matrix */
.user-t8 {
  position: relative;
  color: #00ff41;
  font-family: inherit;
  animation: matrix-corrupt 0.1s steps(1) infinite;
  filter: drop-shadow(0 0 4px #00ff41);
}

.user-t8::before {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  color: #00ff41;
  animation: matrix-slice 2s steps(1) infinite;
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
  transform: translateX(3px);
  filter: blur(0.5px);
  opacity: 0.9;
}

.user-t8::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  color: #ff0000;
  animation: matrix-slice2 1.5s steps(1) infinite;
  clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);
  transform: translateX(-4px);
  filter: blur(0.3px);
  opacity: 0.8;
  mix-blend-mode: screen;
}

@keyframes matrix-corrupt {
  0%,94%,100% { letter-spacing: normal; }
  95%         { letter-spacing: 2px; filter: drop-shadow(0 0 8px #00ff41) blur(0.3px); }
  96%         { letter-spacing: -1px; }
  97%         { letter-spacing: normal; filter: drop-shadow(0 0 2px #00ff41); }
}

@keyframes matrix-slice {
  0%,89%,100% { transform: translateX(0); opacity: 0; }
  90%         { transform: translateX(4px); opacity: 0.9; clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); }
  91%         { transform: translateX(-3px); clip-path: polygon(0 50%, 100% 50%, 100% 65%, 0 65%); }
  92%         { transform: translateX(2px); clip-path: polygon(0 10%, 100% 10%, 100% 25%, 0 25%); }
  93%         { opacity: 0; }
}

@keyframes matrix-slice2 {
  0%,91%,100% { transform: translateX(0); opacity: 0; }
  92%         { transform: translateX(-5px); opacity: 0.8; }
  93%         { transform: translateX(3px); opacity: 0.6; }
  94%         { opacity: 0; }
}

/* Tier 9 — holographic refraction */
.user-t9 {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    105deg,
    #ff0080 0%,
    #ff0080 10%,
    #ffff00 20%,
    #00ff80 30%,
    #00ffff 40%,
    #0080ff 50%,
    #8000ff 60%,
    #ff0080 70%,
    #ff8000 80%,
    #ffff00 90%,
    #00ff80 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: holo-shift 2s linear infinite;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.8));
}

.user-t9::before {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.8) 45%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0.8) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: holo-shine 2s linear infinite;
  mix-blend-mode: overlay;
}

@keyframes holo-shift {
  0%   { background-position: 0% 0%; filter: drop-shadow(0 0 3px #ff0080) brightness(1.2); }
  25%  { filter: drop-shadow(0 0 3px #00ffff) brightness(1.3); }
  50%  { background-position: 100% 0%; filter: drop-shadow(0 0 3px #8000ff) brightness(1.2); }
  75%  { filter: drop-shadow(0 0 3px #00ff80) brightness(1.3); }
  100% { background-position: 200% 0%; filter: drop-shadow(0 0 3px #ff0080) brightness(1.2); }
}

@keyframes holo-shine {
  0%   { background-position: -100% 0%; }
  100% { background-position: 200% 0%; }
}
@keyframes flicker-glow-red { 0%,100% { filter: drop-shadow(0 0 6px #ff3030) drop-shadow(0 0 12px #ff3030); } 50% { filter: drop-shadow(0 0 3px #ff3030); } }
@keyframes flicker-ice { 0%,100% { filter: drop-shadow(0 0 6px #00bfff) drop-shadow(0 0 14px #007fff); } 50% { filter: drop-shadow(0 0 3px #00bfff); } }
@keyframes rainbow { 0% { background-position: 0% 0%; } 100% { background-position: 400% 0%; } }
/* ── KEYFRAMES ───────────────────────────────────────────────── */
@keyframes shimmer      { 0% { background-position: 0% 0%; } 100% { background-position: 300% 0%; } }
@keyframes flicker-glow {
      0%, 100% { filter: drop-shadow(0 0 6px #ffbb00); }
      50%       { filter: drop-shadow(0 0 3px #ffd334); }
    }
    @keyframes glitch-1     { 0%,90%,100%{transform:translateX(0);opacity:0} 91%{transform:translateX(-3px);opacity:.7;clip-path:polygon(0 0,100% 0,100% 35%,0 35%)} 92%{transform:translateX(3px);opacity:.7;clip-path:polygon(0 20%,100% 20%,100% 55%,0 55%)} 93%{transform:translateX(0);opacity:0} }
@keyframes glitch-2     { 0%,93%,100%{transform:translateX(0);opacity:0} 94%{transform:translateX(3px);opacity:.7;clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%)} 95%{transform:translateX(-3px);opacity:.7;clip-path:polygon(0 45%,100% 45%,100% 80%,0 80%)} 96%{transform:translateX(0);opacity:0} }

/* ── PAGINATION ───────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 14px;
}

.page-btn {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,1);
  width: 34px;
  height: 34px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-btn:hover { background: rgba(255,255,255,0.06); color: #ffffff; }
.page-btn.active { background: rgb(122,120,255); border-color: rgb(122,120,255); color: #fff; }

/* ── TOAST ────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 26px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.2);
  border-left: 2px solid #4ade80;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  z-index: 999;
  opacity: 0;
  transform: translateY(8px);
  backdrop-filter: blur(8px);
  transition: all 0.18s;
  pointer-events: none;
}

.toast.show { opacity: 1; transform: translateY(0); }

/* ── FOOTER ───────────────────────────────────────────────── */
.footer {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
}

.footer a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.footer a:hover { color: #fff; }
.footer-sep { opacity: 0.4; }

/* ── ANNOUNCEMENT BAR ─────────────────────────────────────── */
.announcement-bar {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 15px;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 18px;
  padding: 28px 28px;
  margin-bottom: 16px;
  font-size: 16px;
  color: rgba(255,255,255,1);
}

.announcement-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.announcement-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.announcement-desc {
  font-size: 14px;
  color: rgba(255,255,255,1);
}

/* ── TOOLBAR ──────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 22px 0;
  gap: 10px;
}

.toolbar-left { display: flex; align-items: center; gap: 12px; }

.results-count { font-size: 12px; color: #ffffff; }
.results-count span { color: #00ff1a; }

.selected-count { font-size: 12px; color: #00ff1a; display: none; }
.selected-count.visible { display: inline; }

.btn-bulk {
  background: rgba(255,255,255,0.04);
  border: 1px solid #00ff1a;
  color: #00ff1a;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  display: none;
}

.btn-bulk.visible { display: inline-block; }
.btn-bulk:hover { background: rgba(9,255,0,0.3); }

/* ── CART BUTTON ──────────────────────────────────────────── */
.btn-cart {
  background: #ffffff00;
  border: 1px solid #00ff1a;
  color: #00ff1a;
  padding: 7px 10px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  transition: all 0.12s;
}

.btn-cart:hover { background: rgba(9,255,0,0.3); color: #00ff1a; }
.btn-cart.added { background: rgba(9,255,0,0.3); color: #00ff1a; cursor: default; }

/* ── GENERIC SECTION CARD ─────────────────────────────────── */
.section {

  border-radius: 14px;

  margin-bottom: 20px;
  backdrop-filter: blur(8px);
}

.section-title {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 20px;
}

/* ── UTILITY ──────────────────────────────────────────────── */
.mono { font-family: 'SF Mono','Fira Code','Consolas',monospace; }

.price { color: #00ff1a; font-weight: 600; font-size: 12px; }

input[type="checkbox"] {
  width: 13px;
  height: 13px;
  cursor: pointer;
  accent-color: #3b82f6;
}

.flag { font-size: 20px; line-height: 1; }

.country-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.iban-val { color: #ffffff; letter-spacing: 0.5px; font-size: 11px; }

/* ── BADGES ─────────────────────────────────────────────────── */
.badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  justify-content: center;
}

.user-badge {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid;
  cursor: default;
  transition: transform 0.15s;
  position: relative;
}

/* .user-badge:hover { transform: scale(1.2); z-index: 10; } */

.user-badge .badge-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  font-family: 'Inter', sans-serif;
}
.chat-emoji {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  display: inline-block;
}
/* .user-badge:hover .badge-tooltip { opacity: 1; } */

.mention {
  color: #a78bfa;
  font-weight: 600;
}

.reply-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}

.reply-profile {
  background: rgba(255,255,255,0.03);
  border-right: 1px solid rgba(255,255,255,0.08);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  width: 200px;
}

.reply-avatar {
  width: 150px; height: 150px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}

.reply-avatar img { width: 100%; height: 100%; object-fit: cover; }

.reply-username { font-size: 18px; font-weight: 600; }

.reply-stats {
  display: flex; gap: 12px;
  margin-top: 4px;
}

.reply-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.reply-stat-val { font-size: 16px; font-weight: 600; color: #00ff1a; }
.reply-stat-label { font-size: 13px; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.5px; }
.nav-cart-btn {
      position: relative;
      cursor: pointer;
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.7);
      font-size: 18px;
      transition: color 0.2s;
      border: none;
    }
    .nav-balance .fa-gear {
      font-size: 18px;
      color: rgba(255,255,255,0.6);
      margin-left: 6px;
      transition: color 0.2s, transform 0.3s;
    }

    .nav-balance:hover .fa-gear {
      color: white;
      transform: rotate(45deg);
    }
    .nav-cart-btn:hover { color: white; background: none; }

    .cart-badge {
  

      color: white;
      font-size: 15px;
      font-weight: 700;
      min-width: 16px;
      height: 16px;
      border-radius: 99px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 6px;
      line-height: 1;
    }

       .nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
    .nav-balance { font-size: 13px; color: #fff; font-family: 'SF Mono', monospace; }
    .nav-balance span { color: #00ff1a; font-weight: 600; }

    /* ── Forgot / Reset Password Pages ─────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
}

.auth-logo {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.auth-logo img { height: 70px; display: block; }

.auth-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 340px;
  padding: 0 20px;
  gap: 14px;
}

.auth-title {
  color: rgba(255,255,255,0.9);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.auth-sub {
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  text-align: center;
  margin-top: -8px;
}

.auth-input-group {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0,0,0,0.2);
}

.auth-input-group input {
  width: 100%;
  padding: 13px 16px;
  background: rgba(0,0,0,0.15);
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: background 0.2s;
}

.auth-input-group input::placeholder { color: rgba(255,255,255,0.7); }
.auth-input-group input:focus { background: rgba(255,255,255,0.02); }

.auth-btn {
  width: 100%;
  padding: 13px 20px;
  background: rgba(0,0,0,0.15);
  border: none;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}

.auth-btn:hover { background: rgba(255,255,255,0.02); }
.auth-btn:disabled { cursor: default; opacity: 0.7; }
.auth-btn.centered { text-align: center; cursor: default; }

.auth-back {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s;
}

.auth-back:hover { color: #fff; }

.auth-error {
  color: #c0392b;
  font-size: 13px;
  text-align: center;
  display: none;
}

.auth-error.show { display: block; }



.summary-divider {
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 8px 0;
}

.summary-total-row .summary-label,
.summary-total-row .summary-value {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

    .btn-checkout {
      width: 100%;
      padding: 14px;
     background:rgba(152, 151, 255, 0.15);
      border:1px solid rgba(122,120,255,0.3);
      border-radius: 8px;
      color:rgb(154, 152, 255);
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s;
      margin-top: 20px;
    }
    .btn-checkout:hover { background: rgba(105, 255, 112, 0.215);color:rgb(30, 255, 0);  border:1px solid rgba(0, 255, 13, 0.3);}
    .btn-checkout:disabled { opacity: 0.4; cursor: not-allowed; }


    .payment-row {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.payment-row:last-child { border-bottom: none; }
.payment-top { display: flex; justify-content: space-between; align-items: center; }
.payment-amount { font-size: 14px; font-weight: 600; color: #fff; }
.payment-status-waiting    { color: #fbbf24; font-size: 11px; font-weight: 600; }
.payment-status-finished   { color: #00ff1a; font-size: 11px; font-weight: 600; }
.payment-status-confirming { color: #38bdf8; font-size: 11px; font-weight: 600; }
.payment-status-failed     { color: #ff5050; font-size: 11px; font-weight: 600; }
.payment-date { font-size: 11px; color: rgba(255,255,255,0.3); }
.payment-meta { font-size: 11px; color: rgba(255,255,255,0.3); display: flex; gap: 12px; }
.payments-table-wrap {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  overflow: hidden;
}

.payments-table {
  width: 100%;
  border-collapse: collapse;
}

.payments-table thead tr {
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.payments-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.payments-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.1s;
}

.payments-table tbody tr:last-child { border-bottom: none; }
.payments-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.payments-table tbody tr:hover { background: rgba(255,255,255,0.03); }

.payments-table td {
  padding: 14px 16px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}