@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --ink:        #15181f;
  --surface:    #1c2029;
  --surface-2:  #242835;
  --border:     #343947;
  --text:       #e7e9f0;
  --text-dim:   #9498ab;
  --text-faint: #5b5f70;

  --violet:     #7b5cfa;
  --violet-dim: #5d3fd6;
  --cyan:       #34e7c6;
  --amber:      #ffb020;
  --red:        #ff5470;

  --radius: 10px;
  --radius-lg: 16px;
  --font-display: 'Rajdhani', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --ink:        #f4f5f8;
    --surface:    #ffffff;
    --surface-2:  #eef0f5;
    --border:     #dde0e8;
    --text:       #14161f;
    --text-dim:   #565a6c;
    --text-faint: #8b8fa0;

    --violet:     #6c4bf4;
    --violet-dim: #5636d8;
    --cyan:       #0fae91;
    --amber:      #d9860a;
    --red:        #e5484d;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--text);
  line-height: 1.55;
  font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--cyan); }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
code, .mono { font-family: var(--font-display); }

.site-header {
  background: rgba(11, 14, 20, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
@media (prefers-color-scheme: light) {
  .site-header { background: rgba(255, 255, 255, 0.9); }
}

.header-inner { display: flex; align-items: center; gap: 28px; padding: 14px 24px; flex-wrap: wrap; }

.logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  color: var(--text); letter-spacing: -0.02em;
}
.logo-mark { color: var(--violet); font-weight: 800; }

.main-nav { display: flex; gap: 20px; flex: 1; flex-wrap: wrap; }
.main-nav a { color: var(--text-dim); font-weight: 600; font-size: 14px; font-family: var(--font-display); padding: 4px 0; }
.main-nav a::before { content: '/'; color: var(--text-faint); margin-right: 6px; }
.main-nav a:hover { color: var(--text); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.icon-link { position: relative; color: var(--text); font-size: 14px; font-family: var(--font-display); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.badge { position: absolute; top: -8px; right: -14px; background: var(--violet); color: #fff; font-size: 10px; font-family: var(--font-display); border-radius: 999px; padding: 1px 6px; }
.inline-form { display: inline; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-weight: 700; font-family: var(--font-display); cursor: pointer;
  padding: 10px 18px; font-size: 13px;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--violet); color: #fff; }
.btn-primary:hover { background: var(--violet-dim); color: #fff; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--violet); color: var(--violet); }
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-lg { padding: 14px 26px; font-size: 14px; }

.flash { padding: 12px 16px; border-radius: var(--radius); margin: 16px 0; font-size: 14px; font-family: var(--font-display); border: 1px solid transparent; }
.flash-success { background: rgba(52, 231, 198, 0.08); color: var(--cyan); border-color: rgba(52, 231, 198, 0.3); }
.flash-error { background: rgba(255, 84, 112, 0.08); color: var(--red); border-color: rgba(255, 84, 112, 0.3); }

.hero { padding: 70px 0 50px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; }
.hero-eyebrow { font-family: var(--font-display); color: var(--cyan); font-size: 13px; letter-spacing: 0.06em; margin: 0 0 14px; }
.hero-eyebrow::before { content: '// '; color: var(--text-faint); }
.hero-text h1 { font-family: var(--font-display); font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 18px; }
.hero-text h1 .accent { color: var(--violet); }
.hero-text p { color: var(--text-dim); max-width: 480px; margin: 0 0 28px; font-size: 16px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.terminal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
@media (prefers-color-scheme: light) { .terminal { box-shadow: 0 20px 60px rgba(20,22,31,0.08); } }
.terminal-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-dot.red { background: #ff5f57; }
.terminal-dot.yellow { background: #febc2e; }
.terminal-dot.green { background: #28c840; }
.terminal-title { margin-left: 8px; font-family: var(--font-display); font-size: 12px; color: var(--text-faint); }
.terminal-body { padding: 20px 22px; font-family: var(--font-display); font-size: 13px; line-height: 1.9; min-height: 220px; }
.terminal-body .prompt { color: var(--cyan); }
.terminal-body .ok { color: var(--cyan); }
.terminal-body .warn { color: var(--amber); }
.terminal-body .dim { color: var(--text-faint); }
.terminal-body .cursor { display: inline-block; width: 7px; height: 14px; background: var(--violet); vertical-align: middle; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

.games-strip { display: flex; gap: 12px; flex-wrap: wrap; padding: 10px 0 50px; border-bottom: 1px dashed var(--border); margin-bottom: 50px; }
.game-pill { background: var(--surface); border: 1px solid var(--border); padding: 8px 16px; border-radius: 999px; font-size: 13px; font-family: var(--font-display); font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.game-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--violet)); }
.g-samp { --dot: var(--violet); }
.g-crmp { --dot: var(--cyan); }
.g-radmir { --dot: var(--amber); }
.game-pill:hover { border-color: var(--violet); }

.section { padding: 10px 0 60px; }
.section-eyebrow { font-family: var(--font-display); color: var(--text-faint); font-size: 12px; margin: 0 0 8px; }
.section-title, .page-title { font-family: var(--font-display); font-size: 24px; margin: 0 0 28px; letter-spacing: -0.01em; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 60px; }
.feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.feature-cmd { display: inline-block; font-family: var(--font-display); font-size: 12px; color: var(--cyan); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; margin-bottom: 14px; }
.feature-card h3 { margin: 0 0 8px; font-size: 16px; }
.feature-card p { margin: 0; color: var(--text-dim); font-size: 14px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
}

.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 28px 0 60px; }
.stat { text-align: center; }
.stat-num { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--violet); }
.stat-label { font-size: 12px; color: var(--text-faint); font-family: var(--font-display); }
@media (max-width: 700px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease; }
.product-card:hover { border-color: var(--violet); transform: translateY(-2px); }
.product-card-img { display: block; background: var(--surface-2); aspect-ratio: 16/10; overflow: hidden; }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card-body { padding: 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.product-card-body h3 { font-size: 15px; margin: 0; font-family: var(--font-display); }
.product-card-body h3 a { color: var(--text); }

.tag { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); color: var(--text-dim); font-family: var(--font-display); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; width: fit-content; border: 1px solid var(--border); }
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--violet)); }
.tag-success { color: var(--cyan); }
.tag-success::before { background: var(--cyan); }

.muted { color: var(--text-dim); font-size: 14px; }
.small { font-size: 12px; }

.price-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 10px; }
.price { font-weight: 800; font-size: 16px; color: var(--text); font-family: var(--font-display); }
.price-lg { font-size: 26px; }
.price-old { text-decoration: line-through; color: var(--text-faint); font-size: 13px; margin-left: 6px; font-family: var(--font-display); }

.catalog-layout { display: grid; grid-template-columns: 220px 1fr; gap: 30px; padding: 30px 0 60px; }
.catalog-filters { display: flex; flex-direction: column; gap: 6px; align-self: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; position: sticky; top: 90px; }
.catalog-filters h3 { margin: 0 0 8px; font-size: 12px; color: var(--text-faint); font-family: var(--font-display); }
.filter-link { padding: 7px 10px; border-radius: 8px; color: var(--text); font-size: 14px; font-family: var(--font-display); font-weight: 600; }
.filter-link:hover { background: var(--surface-2); }
.filter-link.active { background: var(--violet); color: #fff; }
@media (max-width: 780px) { .catalog-layout { grid-template-columns: 1fr; } .catalog-filters { position: static; } }

.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px 0; }
.product-detail-img img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.product-detail-info h1 { margin: 10px 0; font-family: var(--font-display); font-size: 26px; }
.back-link { display: inline-block; margin-top: 18px; font-family: var(--font-display); font-size: 13px; }
@media (max-width: 780px) { .product-detail { grid-template-columns: 1fr; } }

.cart-list { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; }
.cart-row { display: grid; grid-template-columns: 70px 1fr auto auto auto; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; }
.cart-row-img { width: 70px; height: 50px; object-fit: cover; border-radius: 8px; }
.cart-row-info h3 { margin: 0 0 4px; font-size: 15px; font-family: var(--font-display); }
.cart-summary { display: flex; justify-content: flex-end; align-items: center; gap: 20px; padding: 20px 0 60px; }
.cart-total { font-size: 18px; font-family: var(--font-display); }

.auth-box { max-width: 400px; margin: 50px auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; }
.auth-box h1 { font-family: var(--font-display); font-size: 22px; }
.form, .form-inline { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); font-family: var(--font-display); }
.form input, .form-inline input { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 14px; font-family: var(--font-body); }
.form input:focus, .form-inline input:focus { outline: 2px solid var(--violet); outline-offset: 1px; }
.form-inline { flex-direction: row; align-items: center; }
.form-inline input { flex: 1; }

.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding: 20px 0 60px; }
.account-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.account-card h3 { margin-top: 0; font-family: var(--font-display); font-size: 14px; color: var(--text-faint); }

.order-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 16px; }
.order-card-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; font-family: var(--font-display); }
.order-items { margin: 0; padding-left: 18px; color: var(--text-dim); font-size: 14px; }

.not-found { text-align: center; padding: 100px 0; }
.not-found h1 { font-size: 72px; margin: 0; font-family: var(--font-display); color: var(--violet); }

.site-footer { border-top: 1px solid var(--border); margin-top: 60px; padding-top: 40px; background: var(--surface); }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; padding-bottom: 30px; }
.footer-brand { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-display); }
.footer-brand p { color: var(--text-dim); font-size: 13px; max-width: 320px; font-family: var(--font-body); }
.footer-col { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-family: var(--font-display); }
.footer-col h4 { margin: 0 0 6px; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.footer-bottom { border-top: 1px solid var(--border); padding: 16px 24px; font-size: 12px; color: var(--text-faint); font-family: var(--font-display); }
@media (max-width: 780px) { .footer-inner { grid-template-columns: 1fr; } }

.site-header {
  background: transparent;
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px 0 0;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 12px 10px 20px;
  flex-wrap: wrap;
  background: rgba(18, 20, 28, 0.82);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.32);
}
@media (prefers-color-scheme: light) {
  .header-inner { background: rgba(255,255,255,0.86); box-shadow: 0 12px 34px rgba(20,22,31,0.1); }
}

.main-nav a::before { content: none; }
.main-nav a { padding: 8px 4px; }

.icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: border-color .15s ease, transform .15s ease;
}
.icon-btn:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-1px); }
.icon-btn .badge { top: -4px; right: -4px; }

.balance-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.balance-pill:hover { border-color: var(--violet); color: var(--violet); }

.auth-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.user-menu { position: relative; }
.avatar-btn { border: none; background: none; padding: 0; cursor: pointer; display: flex; }
.avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
  animation: dropdownIn .16s ease;
}
.user-dropdown.open { display: flex; }
@keyframes dropdownIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.user-dropdown-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.user-dropdown-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); }
.user-dropdown-email { font-size: 12px; color: var(--text-faint); }

.user-dropdown a, .user-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--surface-2); color: var(--violet); }
.user-dropdown form { margin: 0; }

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--violet);
  border-radius: 12px;
  padding: 13px 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text);
  animation: toastIn .25s cubic-bezier(.2,.8,.3,1);
}
.toast.hide { animation: toastOut .2s ease forwards; }
.toast.toast-success { border-left-color: var(--cyan); }
.toast.toast-error { border-left-color: var(--red); }
.toast.toast-warn { border-left-color: var(--amber); }

.toast-icon { flex-shrink: 0; margin-top: 1px; }
.toast.toast-success .toast-icon { color: var(--cyan); }
.toast.toast-error .toast-icon { color: var(--red); }
.toast.toast-warn .toast-icon { color: var(--amber); }
.toast-close { margin-left: auto; background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 0 0 0 8px; font-size: 15px; line-height: 1; }
.toast-close:hover { color: var(--text); }

@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

.hero-text > * { animation: heroIn .6s ease both; }
.hero-text .hero-eyebrow { animation-delay: 0s; }
.hero-text h1 { animation-delay: .05s; }
.hero-text p { animation-delay: .1s; }
.hero-text .hero-actions { animation-delay: .15s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.fly-clone {
  position: fixed;
  z-index: 999;
  border-radius: 10px;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.35,0,.25,1), opacity .55s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.cart-icon-pulse { animation: cartPulse .4s ease; }
@keyframes cartPulse { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

.product-card-img img { transition: transform .35s ease; }
.product-card:hover .product-card-img img { transform: scale(1.05); }

.btn { transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.btn-primary:hover { box-shadow: 0 6px 18px rgba(123,92,250,0.35); }

.site-footer { border-top: none; margin-top: 70px; padding: 0 0 40px; background: transparent; }
.footer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px 36px 0;
  overflow: hidden;
}
.footer-social { display: flex; gap: 10px; margin-top: 6px; }
.footer-social-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
}
.footer-social-btn:hover { color: var(--violet); border-color: var(--violet); }

.footer-bottom {
  border-top: 1px solid var(--border);
  margin: 30px -36px 0;
  padding: 16px 36px;
  font-size: 12px;
  color: var(--text-faint);
  font-family: var(--font-display);
  display: flex;
  gap: 10px;
}
.footer-dot { color: var(--text-faint); }

.topup-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  padding: 20px 0 60px;
  align-items: start;
}
.topup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
}
.topup-card h3 { margin: 0 0 16px; font-family: var(--font-display); font-size: 15px; color: var(--text-faint); }

.topup-amount-display {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  background: var(--surface-2);
  margin-bottom: 18px;
}
.topup-amount-display input {
  border: none;
  background: none;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  width: 100%;
  outline: none;
}
.topup-currency { color: var(--text-faint); }

.topup-presets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.topup-preset {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  font-size: 14px;
}
.topup-preset:hover, .topup-preset.active { border-color: var(--violet); color: var(--violet); }

.topup-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.topup-method {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 600;
}
.topup-method svg { display: block; margin: 0 auto 8px; }
.topup-method:hover, .topup-method.active { border-color: var(--violet); color: var(--violet); }

.topup-history { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; }
.topup-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
}
.topup-history-row .amount { font-family: var(--font-display); font-weight: 700; color: var(--cyan); }
.topup-history-date { color: var(--text-faint); font-size: 12px; }

@media (max-width: 860px) {
  .topup-layout { grid-template-columns: 1fr; }
  .topup-methods { grid-template-columns: 1fr 1fr; }
}

.account-greeting {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 6px;
}
.account-greeting .name { color: var(--violet); }
.account-sub { color: var(--text-dim); margin: 0 0 28px; }

.product-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.product-gallery img { width: 100%; border-radius: 10px; border: 1px solid var(--border); aspect-ratio: 4/3; object-fit: cover; }
.product-video {
  margin-top: 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  text-align: center;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: 13px;
}

.purchase-items { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.purchase-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.purchase-item-img { width: 56px; height: 40px; object-fit: cover; border-radius: 8px; margin-top: 2px; }
.purchase-item-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.purchase-item-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 260px; }

.dev-badge {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--amber);
  background: rgba(255, 176, 32, 0.1);
  border: 1px solid rgba(255, 176, 32, 0.3);
  border-radius: 999px;
  padding: 5px 12px;
}

.license-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.license-label { font-family: var(--font-display); font-size: 11px; color: var(--text-faint); }
.ip-bound {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--cyan);
  background: rgba(52, 231, 198, 0.1);
  border: 1px solid rgba(52, 231, 198, 0.3);
  border-radius: 999px;
  padding: 5px 10px;
}
.ip-bind-form { display: flex; gap: 6px; }
.ip-bind-form input {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  width: 160px;
}

.license-manage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 240px;
}
.license-manage summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.license-manage summary::-webkit-details-marker { display: none; }
.license-manage-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--violet);
}
.license-manage-btn svg { transition: transform .15s ease; }
.license-manage[open] .license-manage-btn svg { transform: rotate(180deg); }

.license-status {
  font-family: var(--font-display);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.license-status.is-bound { color: var(--cyan); border-color: rgba(52,231,198,0.3); background: rgba(52,231,198,0.08); }
.license-status.is-pending { color: var(--amber); border-color: rgba(255,176,32,0.3); background: rgba(255,176,32,0.08); }

.license-manage-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 14px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
  padding-top: 12px;
}
.ip-bound-block { display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 700px) {
  .purchase-item { grid-template-columns: 44px 1fr; }
  .purchase-item-actions { grid-column: 1 / -1; align-items: flex-start; }
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.nav-pill:hover { color: var(--text); background: var(--surface-2); }
.nav-pill.active { color: var(--violet); background: none; }

.nav-dropdown { position: relative; }
.nav-dropdown .chevron { transition: transform .15s ease; }
.nav-dropdown:hover .chevron { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: flex;
  animation: dropdownIn .16s ease;
}
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
}
.nav-dropdown-menu a:hover { background: var(--surface-2); color: var(--violet); }

@media (max-width: 860px) {
  .main-nav { order: 3; width: 100%; justify-content: center; }
}

.site-footer { border-top: 1px solid var(--border); margin-top: 70px; padding: 22px 0; background: transparent; }
.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-faint);
}
.footer-brand-mini { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-weight: 700; }
.footer-brand-mini .logo-mark { color: var(--violet); }
.footer-copy { color: var(--text-faint); }
.footer-live { display: flex; align-items: center; gap: 7px; color: var(--text-dim); }
.footer-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(52,231,198,0.6);
  animation: liveDot 1.8s infinite;
}
@keyframes liveDot {
  0% { box-shadow: 0 0 0 0 rgba(52,231,198,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(52,231,198,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,231,198,0); }
}
@media (max-width: 700px) { .footer-bar { justify-content: center; text-align: center; } }

.catalog-hero { padding: 40px 0 30px; }
.catalog-hero h1 { font-family: var(--font-display); font-size: 34px; line-height: 1.2; margin: 0 0 12px; }
.catalog-hero h1 .accent { color: var(--violet); }

.catalog-choice {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  padding-bottom: 60px;
  align-items: start;
}
.choice-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
}

.game-choice-grid { display: flex; flex-direction: column; gap: 14px; }
.game-choice-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: stretch;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.game-choice-card:hover { border-color: var(--dot, var(--violet)); transform: translateX(3px); }
.game-choice-visual {
  background: linear-gradient(160deg, color-mix(in srgb, var(--dot, var(--violet)) 30%, transparent), transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-right: 1px solid var(--border);
}
.game-choice-tag { font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--dot, var(--violet)); }
.game-choice-glyph { font-family: var(--font-mono); font-size: 20px; color: var(--dot, var(--violet)); opacity: .8; }
.game-choice-body { padding: 16px 16px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.game-choice-body h3 { margin: 0; font-family: var(--font-display); font-size: 17px; }
.game-choice-body p { margin: 0; color: var(--text-dim); font-size: 13px; }
.game-choice-cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--dot, var(--violet)); font-family: var(--font-display); font-weight: 600; font-size: 13px;
  margin-top: 4px;
}
.game-choice-card:hover .game-choice-cta svg { transform: translateX(3px); }
.game-choice-cta svg { transition: transform .15s ease; }

.trending-head { display: flex; align-items: center; justify-content: space-between; }
.trending-list { display: flex; flex-direction: column; gap: 10px; }
.trending-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text);
}
.trending-row:hover { border-color: var(--violet); }
.trending-row img { width: 52px; height: 38px; object-fit: cover; border-radius: 8px; }
.trending-info h4 { margin: 4px 0 2px; font-size: 14px; font-family: var(--font-display); }
.trending-rank { font-family: var(--font-display); font-weight: 800; color: var(--text-faint); font-size: 15px; }

@media (max-width: 860px) {
  .catalog-choice { grid-template-columns: 1fr; }
  .game-choice-card { grid-template-columns: 72px 1fr; }
}

.home-top {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 18px;
  margin: 20px 0 26px;
}
.home-greet-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.home-greet-copy { display: flex; flex-direction: column; gap: 14px; }
.home-greet-text { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0; }
.home-greet-card .btn { width: fit-content; }
.home-greet-avatar { width: 68px; height: 68px; font-size: 26px; flex-shrink: 0; }

.home-stats-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.home-stats-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.home-stats-head h3 { margin: 0; font-family: var(--font-display); font-size: 15px; }
.home-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.home-stat { display: flex; align-items: center; gap: 10px; }
.home-stat-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.home-stat-icon.icon-violet { background: rgba(123,92,250,0.14); color: var(--violet); }
.home-stat-icon.icon-cyan { background: rgba(52,231,198,0.14); color: var(--cyan); }
.home-stat-icon.icon-amber { background: rgba(255,176,32,0.14); color: var(--amber); }
.home-stat-num { font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.home-stat-label { font-size: 11px; color: var(--text-faint); font-family: var(--font-display); }

@media (max-width: 780px) {
  .home-top { grid-template-columns: 1fr; }
  .home-stats-grid { grid-template-columns: 1fr; }
}

html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.nav-pill-mobile-only { display: none; }

.nav-pill { position: relative; }
.nav-pill.active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--violet);
}
.nav-pill:focus-visible, .icon-btn:focus-visible, .avatar-btn:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.balance-pill { position: relative; overflow: hidden; }
.balance-pill:active { transform: scale(0.96); }

@media (max-width: 860px) {
  .nav-burger { display: flex; }
  .main-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    display: none;
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  }
  .main-nav.open { display: flex; }
  .main-nav .nav-pill, .main-nav .nav-pill-btn { justify-content: flex-start; width: 100%; }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-menu { position: static; box-shadow: none; border: none; padding: 4px 0 4px 14px; display: none; }
  .nav-dropdown.open .nav-dropdown-menu { display: flex; animation: none; }
  .nav-dropdown:hover .nav-dropdown-menu { display: none; }
  .nav-dropdown.open:hover .nav-dropdown-menu { display: flex; }
  .nav-pill-mobile-only { display: flex; }
  .header-inner { flex-wrap: nowrap; }
}

.profile-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  padding: 20px 0 60px;
}
.profile-avatar-preview { display: flex; align-items: center; gap: 14px; margin: 14px 0 22px; }
.avatar-circle-lg { width: 64px; height: 64px; font-size: 24px; }
.avatar-palette { display: flex; gap: 12px; flex-wrap: wrap; }
.avatar-swatch {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.avatar-swatch:hover { transform: scale(1.1); }
.avatar-swatch.active { border-color: var(--surface); box-shadow: 0 0 0 2px var(--text); }

.avatar-swatch-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all .15s ease;
}
.avatar-swatch-icon:hover { border-color: var(--violet); color: var(--text); transform: translateY(-2px); }
.avatar-swatch-icon.active { background: var(--violet); color: #fff; border-color: var(--violet); box-shadow: 0 4px 14px rgba(123,92,250,0.4); }

.profile-subhead { font-family: var(--font-display); font-size: 12px; color: var(--text-faint); margin: 20px 0 10px; text-transform: uppercase; letter-spacing: .04em; }

.profile-tabs {
  display: flex;
  gap: 6px;
  margin: 6px 0 22px;
  border-bottom: 1px solid var(--border);
}
.profile-tab-btn {
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: -1px;
}
.profile-tab-btn:hover { color: var(--text); }
.profile-tab-btn.active { color: var(--violet); border-bottom-color: var(--violet); }
.profile-tab-panel { display: none; }
.profile-tab-panel.active { display: block; animation: heroIn .35s ease; }

.form textarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body);
  resize: vertical;
}

.cart-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cart-empty svg { color: var(--text-faint); }
.cart-empty p { margin: 0; font-family: var(--font-display); font-size: 15px; }

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  padding: 10px 0 60px;
  align-items: start;
}
.cart-list { display: flex; flex-direction: column; gap: 12px; }
.cart-row {
  display: grid;
  grid-template-columns: 64px 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
}
.cart-row-img { width: 64px; height: 46px; object-fit: cover; border-radius: 8px; }
.cart-row-info h3 { margin: 6px 0 2px; font-size: 15px; font-family: var(--font-display); }
.cart-row-qty { font-family: var(--font-display); color: var(--text-faint); font-size: 13px; }
.cart-row-price { font-family: var(--font-display); font-weight: 700; }
.cart-remove-btn:hover { border-color: var(--red); color: var(--red); }

.cart-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  position: sticky;
  top: 90px;
}
.cart-summary-card h3 { margin: 0 0 16px; font-family: var(--font-display); font-size: 15px; }
.cart-summary-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; }
.cart-summary-total {
  display: flex; justify-content: space-between;
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  border-top: 1px solid var(--border);
  padding-top: 14px; margin: 6px 0 18px;
}
.cart-warning {
  font-size: 13px; color: var(--red);
  background: rgba(255,84,112,0.08);
  border: 1px solid rgba(255,84,112,0.3);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

@media (max-width: 780px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: 48px 1fr auto; }
  .cart-row-qty { display: none; }
  .cart-summary-card { position: static; }
}

.auth-header-inner { justify-content: center; padding: 14px 24px; }
.auth-body .site-main { display: flex; align-items: center; }
.auth-body .container { width: 100%; }

.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 920px;
  margin: 30px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
}

.auth-brand-panel {
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--violet) 22%, transparent), transparent 60%),
    var(--surface-2);
  padding: 40px 36px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-brand-panel h2 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.2;
  margin: 10px 0 12px;
}
.auth-brand-panel h2 .accent { color: var(--violet); }
.auth-brand-panel > p.muted { margin-bottom: 22px; }

.auth-benefits { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.auth-benefits li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-dim); }
.auth-benefit-icon {
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(123,92,250,0.14); color: var(--violet);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.auth-terminal { transform: scale(0.94); transform-origin: left top; }
.auth-terminal .terminal-body { min-height: auto; padding: 16px 18px; font-size: 12px; }

.auth-form-panel { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.auth-form-panel h1 { font-family: var(--font-display); font-size: 24px; margin: 0; }

.pw-strength-meter { margin-top: 8px; }
.pw-strength-bar { display: flex; gap: 4px; margin-bottom: 5px; }
.pw-strength-bar span { flex: 1; height: 4px; border-radius: 2px; background: var(--border); transition: background .2s ease; }
.pw-strength-bar span.seg-weak { background: var(--red); }
.pw-strength-bar span.seg-ok { background: var(--amber); }
.pw-strength-bar span.seg-good { background: var(--cyan); }
.pw-strength-bar span.seg-great { background: #34e78f; }
.pw-strength-label { font-family: var(--font-body); font-size: 11px; min-height: 14px; color: var(--text-faint); }
.pw-strength-label.seg-weak { color: var(--red); }
.pw-strength-label.seg-ok { color: var(--amber); }
.pw-strength-label.seg-good { color: var(--cyan); }
.pw-strength-label.seg-great { color: #34e78f; font-weight: 700; }

@media (max-width: 820px) {
  .auth-split { grid-template-columns: 1fr; margin: 16px auto; }
  .auth-brand-panel { border-right: none; border-bottom: 1px solid var(--border); padding: 30px 26px; }
  .auth-form-panel { padding: 30px 26px; }
  .auth-terminal { display: none; }
}

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, color-mix(in srgb, var(--violet) 18%, var(--surface)), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  margin-bottom: 60px;
}
.cta-band h2 { font-family: var(--font-display); font-size: 22px; margin: 0 0 6px; }
.cta-band p { margin: 0; }

.faq-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 60px; max-width: 720px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px 4px;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { flex-shrink: 0; color: var(--text-faint); transition: transform .15s ease; }
.faq-item[open] summary svg { transform: rotate(180deg); color: var(--violet); }
.faq-answer { padding: 0 16px 16px; color: var(--text-dim); font-size: 14px; line-height: 1.6; }

.page-preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}
.page-preloader.hide {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.preloader-mark { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.preloader-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--violet);
  letter-spacing: .04em;
  animation: preloaderPulse 1.1s ease-in-out infinite;
}
.preloader-bar { width: 120px; height: 3px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.preloader-bar-fill {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  animation: preloaderSlide 1s ease-in-out infinite;
}
@keyframes preloaderPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes preloaderSlide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader-logo, .preloader-bar-fill { animation: none; }
}

.field-error { border-color: var(--red) !important; }

.boosty-card { position: relative; overflow: hidden; }
.boosty-badge {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--amber);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  background: rgba(255,176,32,0.1);
  border: 1px solid rgba(255,176,32,0.3);
  border-radius: 999px;
  padding: 6px 14px;
  width: fit-content;
}
.topup-boosty-btn { position: relative; overflow: hidden; }
.topup-boosty-btn::after {
  content: '';
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg);
  animation: btnShine 3s ease-in-out infinite;
}
@keyframes btnShine {
  0% { left: -60%; }
  40% { left: 120%; }
  100% { left: 120%; }
}

.boosty-badge-glow { animation: badgeGlow 2.4s ease-in-out infinite; }
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,176,32,0.25); }
  50% { box-shadow: 0 0 0 6px rgba(255,176,32,0); }
}

.topup-steps { display: flex; flex-direction: column; gap: 14px; margin: 22px 0 18px; }
.topup-step { display: flex; gap: 12px; align-items: flex-start; opacity: 0; animation: heroIn .5s ease forwards; }
.topup-step:nth-child(1) { animation-delay: .05s; }
.topup-step:nth-child(2) { animation-delay: .15s; }
.topup-step:nth-child(3) { animation-delay: .25s; }
.topup-step:nth-child(4) { animation-delay: .35s; }
.topup-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--violet);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  flex-shrink: 0;
}
.topup-step-title { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; margin-bottom: 2px; }
.topup-step-text { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }

.topup-balance-glow {
  color: var(--cyan);
  text-shadow: 0 0 16px rgba(52,231,198,0.35);
  animation: balancePulse 2.6s ease-in-out infinite;
}
@keyframes balancePulse {
  0%, 100% { text-shadow: 0 0 10px rgba(52,231,198,0.25); }
  50% { text-shadow: 0 0 20px rgba(52,231,198,0.5); }
}

.section-title-icon { display: flex; align-items: center; gap: 10px; }
.section-title-icon svg { color: var(--violet); flex-shrink: 0; }

.section-icon { color: var(--violet); vertical-align: -4px; margin-right: 4px; }
.account-card h3 { display: flex; align-items: center; gap: 6px; }

.telegram-card { transition: border-color .3s ease; }
.telegram-card.is-linked { border-color: rgba(52,231,198,0.4); }
.telegram-linked-badge {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--cyan);
}
.telegram-pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(52,231,198,0.6);
  animation: liveDot 1.8s infinite;
  flex-shrink: 0;
}
.telegram-code-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0;
}
.telegram-code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .08em;
  color: var(--violet);
}
.telegram-steps { margin: 0 0 16px; padding-left: 20px; color: var(--text-dim); font-size: 13px; line-height: 1.9; }
.telegram-steps code { background: var(--surface-2); padding: 2px 6px; border-radius: 5px; color: var(--cyan); }

.manage-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 0 20px; }
.manage-title { font-family: var(--font-display); font-size: 24px; margin: 0 0 6px; }
.manage-subtitle { color: var(--text-dim); font-size: 14px; display: flex; align-items: center; gap: 8px; margin: 0; }
.manage-topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.manage-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 60px; align-items: start; }
@media (max-width: 860px) { .manage-layout { grid-template-columns: 1fr; } }

.manage-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.manage-banner { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16/9; }
.manage-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.manage-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.7; max-height: 140px; overflow-y: auto; padding-right: 6px; margin-bottom: 16px; }

.manage-meta { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.manage-meta-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }

.manage-status-bar {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 10px 14px;
  background: rgba(52,231,198,0.08);
  border: 1px solid rgba(52,231,198,0.25);
  color: var(--cyan);
  border-radius: 10px;
  font-size: 13px;
  font-family: var(--font-display);
}

.manage-banner-msg { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 10px; }
.manage-banner-info { background: rgba(52,231,198,0.1); border: 1px solid rgba(52,231,198,0.3); color: var(--cyan); }
.manage-banner-warn { background: rgba(255,84,112,0.08); border: 1px solid rgba(255,84,112,0.25); color: var(--red); font-family: var(--font-body); }

.manage-field-label { display: block; font-family: var(--font-display); font-size: 12px; color: var(--text-faint); margin: 16px 0 8px; }
.manage-ip-input, .manage-ip-readonly {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font-family: var(--font-display); font-size: 15px;
  box-sizing: border-box;
}
.manage-ip-readonly { color: var(--cyan); font-weight: 700; }
.manage-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; }

.manage-ready { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 50px 20px; color: var(--text-faint); }
.manage-ready p { margin: 0; font-family: var(--font-display); font-size: 14px; }

.license-row-link {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; color: var(--text);
  transition: border-color .15s ease;
}
.license-row-link:hover { border-color: var(--violet); }
.license-row-link .license-manage-btn { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--violet); font-family: var(--font-display); font-weight: 600; font-size: 12px; }

.manage-layout-wide { grid-template-columns: 1fr 1.4fr; }
@media (max-width: 860px) { .manage-layout-wide { grid-template-columns: 1fr; } }

.launcher-tabs {
  display: flex; gap: 4px; overflow-x: auto;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.launcher-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px; white-space: nowrap;
  color: var(--text-dim); font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.launcher-tab:hover { color: var(--text); }
.launcher-tab.active { color: var(--violet); border-bottom-color: var(--violet); }

.launcher-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.launcher-section-head h4 { margin: 0; font-family: var(--font-display); font-size: 15px; }

.launcher-add-server-form { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.launcher-add-server-form input {
  flex: 1; min-width: 160px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13px;
}

.launcher-servers-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13.5px; }
.launcher-servers-table th {
  text-align: left; color: var(--text-faint); font-family: var(--font-display); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.launcher-servers-table td { padding: 10px; border-bottom: 1px solid var(--border); }
.launcher-servers-table .mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); }

.server-status { font-family: var(--font-display); font-size: 11px; padding: 4px 10px; border-radius: 999px; }
.server-status.status-online { background: rgba(52,231,198,0.12); color: var(--cyan); }
.server-status.status-offline, .server-status.status-unknown { background: rgba(255,84,112,0.1); color: var(--red); }

.launcher-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 8px; }
@media (max-width: 700px) { .launcher-grid-2 { grid-template-columns: 1fr; } }
.launcher-grid-2 input, .manage-field-label input, .manage-field-label textarea {
  width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 13.5px; box-sizing: border-box; font-family: var(--font-body);
}

.color-field-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.color-field-row input[type="color"] { width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }
.color-field-row input[type="text"] { margin-top: 0; font-family: var(--font-mono); }

.launcher-toggle-row { display: flex; gap: 24px; margin: 18px 0; flex-wrap: wrap; }
.launcher-toggle { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-dim); cursor: pointer; }
.launcher-toggle input { position: absolute; opacity: 0; }
.toggle-slider {
  width: 38px; height: 22px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  position: relative; transition: background .15s ease;
}
.toggle-slider::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-faint); transition: transform .15s ease, background .15s ease;
}
.launcher-toggle input:checked + .toggle-slider { background: var(--violet); border-color: var(--violet); }
.launcher-toggle input:checked + .toggle-slider::before { transform: translateX(16px); background: #fff; }

.launcher-preview {
  border-radius: 12px; border: 1px solid var(--border);
  padding: 24px; margin: 20px 0; text-align: center; transition: background .2s ease, color .2s ease;
}
.launcher-preview-badge {
  display: inline-block; padding: 8px 18px; border-radius: 999px; font-family: var(--font-display);
  font-weight: 700; font-size: 13px; margin-bottom: 10px; transition: background .2s ease;
}
.launcher-preview p { margin: 0; font-size: 13px; }

.proof-upload {
  position: relative;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  background: var(--surface-2);
  transition: border-color .2s ease, background .2s ease;
  margin-top: 8px;
}
.proof-upload:hover, .proof-upload.drag-over { border-color: var(--violet); background: rgba(123,92,250,0.06); }
.proof-upload.has-file { padding: 8px; }
.proof-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.proof-upload-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-faint); pointer-events: none; }
.proof-upload-empty span:not(.muted) { font-size: 13px; color: var(--text-dim); font-family: var(--font-display); }
.proof-upload-preview { max-width: 100%; max-height: 220px; border-radius: 8px; display: block; margin: 0 auto; }

.request-row { align-items: flex-start; }
.request-status {
  display: inline-block; margin-top: 6px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
}
.request-status.is-pending { background: rgba(255,176,32,0.12); color: var(--amber); }
.request-status.is-approved { background: rgba(52,231,198,0.12); color: var(--cyan); }
.request-status.is-rejected { background: rgba(255,84,112,0.12); color: var(--red); }
.request-proof-link { font-size: 12px; font-family: var(--font-display); display: inline-block; margin-top: 6px; }

.referral-stats-row { display: flex; gap: 14px; margin-bottom: 18px; }
.referral-stat { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; }
.referral-stat-num { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.referral-stat-label { font-size: 11px; color: var(--text-faint); font-family: var(--font-display); margin-top: 2px; }
.referral-link-row { display: flex; gap: 8px; margin-top: 6px; }
.referral-link-row input {
  flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-dim); font-family: var(--font-mono); font-size: 12px;
}

.twofa-status-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; background: var(--surface-2); border-radius: 10px; }
.twofa-status-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; }

.launcher-toggle-btn {
  border: none; background: none; padding: 0; cursor: pointer;
}
.launcher-toggle-btn:disabled { cursor: not-allowed; opacity: .5; }
.launcher-toggle-btn .toggle-slider {
  width: 38px; height: 22px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  position: relative; display: block; transition: background .15s ease;
}
.launcher-toggle-btn .toggle-slider::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-faint); transition: transform .15s ease, background .15s ease;
}
.launcher-toggle-btn.is-on .toggle-slider { background: var(--violet); border-color: var(--violet); }
.launcher-toggle-btn.is-on .toggle-slider::before { transform: translateX(16px); background: #fff; }

.profile-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--hero-color) 35%, transparent), transparent 60%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
  padding: 34px 30px;
  margin: 20px 0 26px;
}
.profile-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .35;
  pointer-events: none;
}
.profile-hero-blob-1 { width: 180px; height: 180px; background: var(--hero-color); top: -60px; right: 10%; animation: heroBlobDrift 9s ease-in-out infinite; }
.profile-hero-blob-2 { width: 130px; height: 130px; background: var(--cyan); bottom: -50px; right: 30%; animation: heroBlobDrift 11s ease-in-out infinite reverse; }
.profile-hero-blob-3 { width: 100px; height: 100px; background: var(--amber); top: 20%; left: 40%; opacity: .18; animation: heroBlobDrift 13s ease-in-out infinite; }
@keyframes heroBlobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -16px) scale(1.12); }
}

.profile-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.profile-hero-avatar {
  width: 84px; height: 84px; font-size: 32px;
  flex-shrink: 0;
  box-shadow: 0 8px 26px rgba(0,0,0,0.35);
  border: 3px solid var(--surface);
  animation: heroIn .5s ease both;
}
.profile-hero-info { flex: 1; min-width: 200px; }
.profile-hero-name { font-family: var(--font-display); font-size: 24px; margin: 0 0 2px; }
.profile-hero-email { color: var(--text-dim); font-size: 13.5px; margin: 0; }
.profile-hero-bio { color: var(--text-dim); font-size: 13px; margin: 8px 0 0; max-width: 420px; }
.profile-hero-stats { display: flex; gap: 22px; }
.profile-hero-stat {
  display: flex; flex-direction: column-reverse; align-items: center; text-align: center;
  color: var(--text-faint); font-family: var(--font-display); font-size: 11px;
}
.profile-hero-stat span { font-size: 20px; font-weight: 800; color: var(--text); }

.profile-tabs { position: relative; }
.profile-tabs-indicator {
  position: absolute; bottom: -1px; left: 0; height: 2px;
  background: var(--violet); border-radius: 2px;
  transition: transform .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
}

.profile-layout .account-card:nth-child(1) { animation: heroIn .5s ease .05s both; }
.profile-layout .account-card:nth-child(2) { animation: heroIn .5s ease .12s both; }
.profile-layout .account-card:nth-child(3) { animation: heroIn .5s ease .19s both; }
.account-card { transition: transform .18s ease, box-shadow .18s ease; }
.account-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.25); }

@media (max-width: 700px) {
  .profile-hero-content { flex-direction: column; align-items: flex-start; text-align: left; }
  .profile-hero-stats { align-self: stretch; justify-content: space-around; }
}

.profile-tab-btn { display: flex; align-items: center; gap: 7px; }
.profile-tab-btn svg { flex-shrink: 0; }

.telegram-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.telegram-icon-badge {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(52,231,198,0.12); color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.telegram-card.is-linked .telegram-icon-badge { background: rgba(52,231,198,0.2); }

.telegram-linked-panel { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.telegram-code-box {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2);
  border: 1.5px dashed var(--violet);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.telegram-code-label { font-family: var(--font-display); font-size: 11px; color: var(--text-faint); text-transform: uppercase; }
.telegram-code { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: .1em; color: var(--violet); flex: 1; }

.telegram-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.telegram-steps li { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 13.5px; }
.telegram-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-faint);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.telegram-steps code { background: var(--surface-2); padding: 2px 7px; border-radius: 6px; color: var(--cyan); }

.telegram-open-bot-btn, .telegram-generate-btn { width: 100%; justify-content: center; }
.telegram-code-expiry { text-align: center; margin-top: 10px; }

.pay-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.pay-method {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1.5px solid var(--border);
  color: var(--text-dim); font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  cursor: pointer; transition: all .15s ease;
}
.pay-method:hover { border-color: var(--violet); color: var(--text); }
.pay-method-active { border-color: var(--violet); background: rgba(123,92,250,0.08); color: var(--text); }
.pay-method-icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pay-method-icon-yoomoney { background: rgba(123,92,250,0.14); color: var(--violet); }
.pay-method-icon-boosty { background: rgba(255,176,32,0.14); color: var(--amber); }
.pay-method-url { font-family: var(--font-display); }

.topup-amount-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.amount-preset {
  padding: 7px 14px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim); font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all .15s ease;
}
.amount-preset:hover, .amount-preset.active { border-color: var(--violet); color: var(--violet); }

.stat-glow {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.stat-glow:hover {
  border-color: var(--violet);
  box-shadow: 0 0 0 1px var(--violet), 0 10px 30px rgba(123,92,250,0.25);
  transform: translateY(-3px);
}
.stat-icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(123,92,250,0.12); color: var(--violet);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  animation: statIconGlow 3s ease-in-out infinite;
}
@keyframes statIconGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123,92,250,0.25); }
  50% { box-shadow: 0 0 0 8px rgba(123,92,250,0); }
}