body { padding-bottom:0; }

.promo-banner {
  border-radius:var(--radius-xl); overflow:hidden;
  background:linear-gradient(135deg, rgba(214,41,60,0.18), rgba(255,176,32,0.06));
  border:1px solid var(--border); padding:28px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.promo-banner-slim { padding:20px 28px; }
.promo-banner-text { flex:1; min-width:240px; }
.promo-banner-title { font-family:var(--font-display); font-size:1.3rem; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.promo-banner-desc { font-size:0.86rem; color:var(--text-2); }

.fs-section { padding:28px 0 8px; }
.fs-header { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.fs-title { font-family:var(--font-display); font-weight:700; font-size:1.1rem; display:flex; align-items:center; gap:8px; color:var(--volt-deep); }
.fs-subtitle { font-size:0.8rem; color:var(--text-3); }
.fs-carousel { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(min-width:640px) { .fs-carousel { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } }
.fs-card {
  cursor:pointer; transition:var(--transition); display:flex; flex-direction:column; gap:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:14px;
}
.fs-card:hover { transform:translateY(-3px); border-color:rgba(214,41,60,0.3); }
.fs-card-name { font-family:var(--font-display); font-weight:700; font-size:0.85rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.2em; }
.fs-card-game { font-size:0.72rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fs-card-price-row { display:flex; align-items:center; gap:8px; }
.fs-card-icon { width:26px; height:26px; border-radius:8px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; color:var(--volt-glow); flex-shrink:0; }
.fs-card-price-col { display:flex; flex-direction:column; gap:0; min-width:0; }
.fs-card-price { font-family:var(--font-mono); font-size:0.92rem; font-weight:700; color:var(--volt-deep); letter-spacing:-0.02em; }
.fs-card-price-old { font-family:var(--font-mono); font-size:0.66rem; color:var(--text-3); text-decoration:line-through; }
.fs-card-stock-bar { height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.fs-card-stock-fill { height:100%; background:var(--acid); border-radius:99px; }
.fs-card-purchased { font-family:var(--font-mono); font-size:0.62rem; color:var(--text-3); text-align:right; margin-top:-4px; }
.fs-card-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.fs-card-badge-discount { background:var(--acid); color:#241900; font-size:0.62rem; font-weight:800; padding:4px 8px; border-radius:6px; white-space:nowrap; }
.fs-card-badge-instant { display:inline-flex; align-items:center; gap:3px; background:var(--surface); border:1px solid var(--border); color:var(--success); font-size:0.6rem; font-weight:700; padding:4px 8px; border-radius:6px; white-space:nowrap; }
.fs-card-timer { display:flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:0.66rem; color:var(--volt-deep); font-weight:700; }

.tp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }

.game-grid-search {
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:9px 14px; max-width:320px; margin-bottom:18px;
}
.game-grid-search .search-icon { color:var(--text-3); display:flex; flex-shrink:0; }
.game-grid-search input { flex:1; background:none; border:none; outline:none; color:var(--text); font-size:0.85rem; min-width:0; }
.game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px 12px; }
.game-grid-card { cursor:pointer; display:flex; flex-direction:column; border-radius:var(--radius-lg); transition:var(--transition); box-shadow:var(--shadow-card); }
.game-grid-card:hover { transform:translateY(-3px); }
.game-grid-top { padding:20px 10px; display:flex; justify-content:center; border-radius:var(--radius-lg) var(--radius-lg) 0 0; color:#fff; }
.game-grid-perf { position:relative; height:0; border-top:2px dashed var(--border); margin:0 12px; }
.game-grid-perf::before, .game-grid-perf::after {
  content:''; position:absolute; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%; background:var(--void);
}
.game-grid-perf::before { left:-17px; }
.game-grid-perf::after { right:-17px; }
.game-grid-bottom { background:var(--surface); padding:10px; text-align:center; border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.game-grid-name { font-family:var(--font-display); font-weight:600; font-size:0.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-grid-meta { font-size:0.7rem; color:var(--text-3); margin-top:2px; display:flex; align-items:center; justify-content:center; gap:3px; }

.tu-back-link {
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  color:var(--text-2); font-size:0.82rem; font-weight:600; padding:0; margin-bottom:12px;
}
.tu-back-link:hover { color:var(--volt-deep); }
.tu-game-banner { padding:20px 0 24px; }
.tu-game-banner-inner { height:140px; border-radius:var(--radius-lg); overflow:hidden; }
.tu-game-banner-fallback {
  height:100%; display:flex; align-items:center; gap:16px; padding:0 24px; color:#fff; border-radius:var(--radius-lg);
}
.tu-game-banner-icon { width:56px; height:56px; border-radius:14px; background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tu-game-banner-name { font-family:var(--font-display); font-weight:800; font-size:1.3rem; }
.tu-game-banner-tag { font-size:0.8rem; opacity:0.85; margin-top:2px; }
@media(max-width:480px) { .tu-game-banner-inner { height:110px; } .tu-game-banner-icon { width:44px; height:44px; } .tu-game-banner-name { font-size:1.05rem; } }
.tp-card {
  display:flex; align-items:center; gap:12px; padding:12px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:var(--transition);
}
.tp-card:hover { border-color:var(--volt); background:var(--surface-2); }
.tp-card-icon { width:36px; height:36px; border-radius:10px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; color:var(--volt-glow); flex-shrink:0; }
.tp-card-info { flex:1; min-width:0; }
.tp-card-name { font-size:0.85rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tp-card-game { font-size:0.72rem; color:var(--text-3); }
.tp-card-price { font-family:var(--font-mono); font-weight:700; font-size:0.8rem; color:var(--volt-deep); flex-shrink:0; }

.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.section-title { font-family:var(--font-display); font-size:1.4rem; font-weight:700; display:flex; align-items:center; gap:8px; }
.section-title small { display:block; font-family:var(--font-body); font-size:0.8rem; font-weight:400; color:var(--text-3); margin-top:4px; }

.games-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:14px; }
.game-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
  transition:var(--transition); position:relative;
}
.game-card:hover { border-color:rgba(214,41,60,0.55); transform:translateY(-4px); box-shadow:0 14px 38px rgba(214,41,60,0.24); }
.game-card-img {
  width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--surface-3);
  display:flex; align-items:center; justify-content:center; color:#fff; position:relative;
}
.game-card-discount {
  position:absolute; top:8px; left:8px;
  padding:3px 9px; border-radius:6px;
  background:var(--coral); color:#fff; font-size:0.7rem; font-weight:700;
}
.game-card-body { padding:11px 12px; }
.game-card-name { font-family:var(--font-display); font-weight:600; font-size:0.87rem; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-card-meta { font-size:0.74rem; color:var(--text-3); }

.trust-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; padding:40px 0; }
.trust-item { text-align:center; padding:20px; }
.trust-icon { display:flex; justify-content:center; margin-bottom:10px; color:var(--volt-deep); }
.trust-title { font-weight:600; font-size:0.9rem; margin-bottom:4px; }
.trust-desc { font-size:0.78rem; color:var(--text-3); }

.tu-inline-banner {
  display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--radius);
  background:var(--acid-dim); border:1px solid rgba(245,166,35,0.25);
  font-size:0.76rem; color:#8A5A0A; font-weight:500; margin-bottom:10px;
}
.tu-inline-banner svg { flex-shrink:0; color:var(--acid); }
.tu-inline-banner.is-red { background:rgba(214,41,60,0.08); border-color:rgba(214,41,60,0.2); color:var(--volt-2); }
.tu-inline-banner.is-red svg { color:var(--volt); }

.tu-page { padding:8px 0 72px; }

.tu-shell { display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:start; }
@media(max-width:860px) { .tu-shell { grid-template-columns:1fr; } }

.tu-sidebar {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:16px; position:sticky; top:82px; max-height:calc(100vh - 100px); overflow-y:auto;
}
.tu-sidebar-title { font-family:var(--font-display); font-weight:700; font-size:0.95rem; margin-bottom:12px; }
.tu-sidebar-search {
  display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:7px 10px; margin-bottom:12px;
}
.tu-sidebar-search .search-icon { color:var(--text-3); display:flex; flex-shrink:0; }
.tu-sidebar-search input { flex:1; background:none; border:none; outline:none; color:var(--text); font-size:0.82rem; min-width:0; }
.tu-sidebar-list { display:flex; flex-direction:column; gap:4px; }
.tu-sidebar-item {
  display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--radius); cursor:pointer;
  border:1px solid transparent; transition:var(--transition); font-size:0.84rem; font-weight:500;
}
.tu-sidebar-item:hover { background:var(--surface-2); }
.tu-sidebar-item.selected { background:var(--volt-deep); border-color:var(--volt-deep); color:#fff; }
.tu-sidebar-item.selected .tu-sidebar-item-icon { box-shadow:0 0 0 2px rgba(255,255,255,0.35); }
.tu-sidebar-item-icon {
  width:32px; height:32px; border-radius:9px; flex-shrink:0; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.tu-sidebar-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Mobile: sidebar becomes a horizontal scroll strip instead of a tall vertical
   list. Every property that differs from the base rules above is redeclared
   here explicitly so nothing is left to source-order cascade luck. */
@media(max-width:860px) {
  .tu-sidebar { position:static; max-height:none; overflow-y:visible; padding:14px; }
  .tu-sidebar-list { flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:4px; scrollbar-width:none; }
  .tu-sidebar-list::-webkit-scrollbar { display:none; }
  .tu-sidebar-item {
    flex-direction:column; align-items:center; flex-shrink:0; width:76px;
    text-align:center; gap:6px; padding:10px 6px;
  }
  .tu-sidebar-item span { white-space:normal; overflow:visible; text-overflow:clip; font-size:0.72rem; line-height:1.25; }
}

.tu-content { min-width:0; }

.tu-layout { display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start; }
@media(max-width:1100px) { .tu-layout { grid-template-columns:1fr; } }

.tu-block { margin-bottom:22px; }
.tu-block-head {
  display:flex; align-items:center; gap:10px; font-family:var(--font-display); color:var(--text);
  font-weight:700; font-size:1rem; margin-bottom:12px;
}
.tu-block-head svg { color:var(--volt-glow); }
.tu-num {
  width:26px; height:26px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:0.82rem;
  background:var(--volt); color:#fff;
}
.tu-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:22px; }
@media(max-width:480px) { .tu-card { padding:16px; } }
.tu-hint { font-size:0.82rem; color:var(--text-3); margin-top:10px; }

.tu-qty-row { display:flex; align-items:center; gap:12px; }
.tu-qty-btn {
  width:38px; height:38px; border-radius:var(--radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text); cursor:pointer;
  transition:var(--transition);
}
.tu-qty-btn:hover:not(:disabled) { background:var(--surface-3); border-color:var(--volt); }
.tu-qty-btn:disabled { opacity:0.4; cursor:not-allowed; }
.tu-qty-input {
  width:64px; text-align:center; font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:8px 4px; color:var(--text);
}

.tu-summary-desktop { display:block; }
.tu-sticky-bar {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:95;
  background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -6px 20px rgba(26,29,41,0.1);
  padding:12px 16px; align-items:center; justify-content:space-between; gap:12px;
}
@media(max-width:1100px) {
  .tu-summary-desktop { display:none; }
  .tu-sticky-bar { display:flex; }
  .tu-page { padding-bottom:88px; }
}
.tu-sticky-bar-info { flex:1; min-width:0; font-size:0.82rem; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tu-sticky-bar #tuStickyBarBtn { flex-shrink:0; }

.tu-id-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.tu-id-row .form-input { flex:1; min-width:160px; }
.tu-id-row button { flex-shrink:0; }
@media(max-width:480px) {
  .tu-id-row { flex-direction:column; }
  .tu-id-row .form-input, .tu-id-row button { width:100%; min-width:0; }
}

.tu-nominal-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(148px,1fr)); gap:14px 10px; }

.tu-subsection-label {
  display:flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:700;
  font-size:0.86rem; color:var(--text); margin:20px 0 12px;
}
.tu-subsection-label:first-child { margin-top:0; }
.tu-subsection-label svg { color:var(--acid); }
.tu-subsection-label-fs { margin-top:0; color:var(--volt-deep); }
.tu-subsection-label-fs svg { color:var(--volt-glow); }

.tu-flashsale-box {
  border:1.5px solid var(--acid); border-radius:var(--radius-lg); padding:16px; margin-bottom:6px;
  background:rgba(245,166,35,0.05);
}
.tu-flashsale-box .fs-carousel { grid-template-columns:repeat(2,1fr); }
.tu-flashsale-box .fs-card { box-shadow:none; }
@media(max-width:400px) { .tu-flashsale-box { padding:12px; } }
.tu-nominal-tile {
  position:relative; cursor:pointer; display:flex; flex-direction:column;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg);
  overflow:visible; transition:var(--transition);
}
.tu-nominal-tile:hover { border-color:var(--volt); transform:translateY(-2px); box-shadow:var(--shadow-card); }
.tu-ticket-top { padding:16px 10px 18px; text-align:center; border-radius:var(--radius-lg) var(--radius-lg) 0 0; transition:var(--transition); }
.tu-ticket-perf { position:relative; height:0; border-top:2px dashed var(--border); margin:0 12px; }
.tu-ticket-perf::before, .tu-ticket-perf::after {
  content:''; position:absolute; top:50%; transform:translateY(-50%);
  width:15px; height:15px; border-radius:50%; background:var(--void); transition:var(--transition);
}
.tu-ticket-perf::before { left:-18px; }
.tu-ticket-perf::after { right:-18px; }
.tu-ticket-bottom {
  padding:10px 10px 12px; text-align:center; background:var(--surface-2);
  border-radius:0 0 var(--radius-lg) var(--radius-lg); transition:var(--transition);
}

.tu-nominal-tile.selected { border-color:var(--volt-deep); box-shadow:var(--shadow-card); }
.tu-nominal-tile.selected .tu-ticket-top { background:var(--volt-deep); color:#fff; }
.tu-nominal-tile.selected .tu-ticket-bottom { background:var(--volt); color:#fff; }
.tu-nominal-tile.selected .tu-nominal-icon { color:#fff; }
.tu-nominal-tile.selected .tu-nominal-price-old { color:rgba(255,255,255,0.65); }
.tu-nominal-tile.selected::after {
  content:''; position:absolute; top:10px; right:10px; width:16px; height:16px; z-index:2;
  background-color:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tu-nominal-icon { color:var(--volt-glow); margin-bottom:8px; display:flex; justify-content:center; transition:var(--transition); }
.tu-nominal-name { font-family:var(--font-display); font-weight:600; font-size:0.85rem; }
.tu-nominal-price-row { display:flex; flex-direction:column; align-items:center; gap:1px; }
.tu-nominal-price-old { font-family:var(--font-mono); font-size:0.66rem; color:var(--text-3); text-decoration:line-through; }
.tu-nominal-price { font-family:var(--font-mono); font-size:0.88rem; font-weight:700; letter-spacing:-0.02em; }
.tu-nominal-badge {
  position:absolute; top:-9px; z-index:3; display:inline-flex; align-items:center; gap:3px;
  padding:2px 8px; border-radius:99px; font-size:0.6rem; font-weight:700; letter-spacing:0.02em;
}
.tu-nominal-badge-popular { left:10px; background:var(--acid); color:#241900; }
.tu-nominal-badge-promo { right:10px; background:var(--coral); color:#fff; }

.tu-nominal-show-more {
  grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:12px; border-radius:var(--radius-lg); background:var(--surface-2); border:1px dashed var(--border-2);
  color:var(--text-2); font-size:0.84rem; font-weight:600; transition:var(--transition);
}
.tu-nominal-show-more:hover { background:var(--surface-3); color:var(--text); }

.fs-card.selected { border-color:var(--volt-deep); box-shadow:0 0 0 2px var(--volt-deep); }

.tu-payment-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px; }
.tu-payment-tile {
  padding:16px 10px; border-radius:var(--radius); text-align:center; cursor:pointer; position:relative;
  background:var(--surface); border:2px solid var(--border); transition:var(--transition);
}
.tu-payment-tile:hover:not(.disabled) { border-color:rgba(214,41,60,0.4); }
.tu-payment-tile.selected { border-color:var(--volt-deep); background:var(--volt-deep); color:#fff; }
.tu-payment-tile.selected .tu-payment-icon { color:#fff; }
.tu-payment-tile.disabled { opacity:0.5; cursor:not-allowed; }
.tu-payment-icon { font-size:1.3rem; margin-bottom:6px; }
.tu-payment-name { font-size:0.8rem; font-weight:600; }
.tu-payment-soon { margin-top:5px; font-size:0.62rem; font-weight:700; letter-spacing:0.03em; color:var(--text-3); text-transform:uppercase; }

.topup-layout { display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start; padding:36px 0 72px; }
@media(max-width:900px) { .topup-layout { grid-template-columns:1fr; } }

.step-bar { display:flex; align-items:center; gap:0; margin-bottom:28px; }
.step-item { display:flex; align-items:center; gap:0; flex:1; }
.step-item:last-child { flex:0; }
.step-dot {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.78rem; font-weight:700;
  background:var(--surface-2); border:2px solid var(--border-2);
  color:var(--text-3); transition:var(--transition); position:relative; z-index:1;
}
.step-item.done .step-dot  { background:var(--volt); border-color:var(--volt); color:#fff; }
.step-item.active .step-dot { background:rgba(214,41,60,0.15); border-color:var(--volt); color:var(--volt-glow); box-shadow:0 0 0 4px rgba(214,41,60,0.14); }
.step-line { flex:1; height:2px; background:var(--border); margin:0 4px; transition:var(--transition); }
.step-item.done .step-line { background:var(--volt); }
.step-label { font-size:0.72rem; color:var(--text-3); margin-top:6px; text-align:center; white-space:nowrap; }

.step-panel { display:none; }
.step-panel.active { display:block; animation:stepIn 0.3s ease; }
@keyframes stepIn { from{opacity:0;transform:translateX(12px)} to{opacity:1;transform:none} }

.products-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px; }
.product-tile {
  padding:14px 12px; border-radius:var(--radius);
  background:var(--surface); border:2px solid var(--border);
  cursor:pointer; transition:var(--transition); text-align:center; position:relative;
}
.product-tile:hover { border-color:rgba(214,41,60,0.4); background:var(--surface-2); }
.product-tile.selected { border-color:var(--volt); background:rgba(214,41,60,0.09); }
.product-tile.selected::after {
  content:''; position:absolute; top:6px; right:8px; width:14px; height:14px;
  background-color:var(--volt-glow);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.product-tile-name { font-family:var(--font-display); font-weight:600; font-size:0.85rem; margin-bottom:4px; }
.product-tile-price { font-size:0.82rem; color:var(--volt-glow); font-weight:500; }
.product-tile-badge { margin-top:6px; }

.summary-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:24px; position:sticky; top:82px; }
@media(max-width:1100px) { .summary-card { position:static; } }
@media(max-width:480px) { .summary-card { padding:18px; } }
.summary-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:0.88rem; }
.summary-row:last-of-type { border-bottom:none; }
.summary-row .label-col { color:var(--text-2); }
.summary-total { font-family:var(--font-mono); font-size:1.3rem; font-weight:700; color:var(--volt-deep); letter-spacing:-0.02em; }

.nick-result { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius); background:var(--surface-2); border:1px solid var(--border); margin-top:8px; font-size:0.88rem; }
.nick-result.valid   { border-color:rgba(46,230,166,0.32); }
.nick-result.invalid { border-color:rgba(255,92,124,0.32); }

/* --- Payment page (redesigned): hero status band --- */
.pay-hero { border-radius:var(--radius-xl); padding:32px 20px; text-align:center; margin-bottom:22px; }
.pay-hero-waiting { background:linear-gradient(160deg, var(--acid), #E08F0A); }
.pay-hero-processing { background:linear-gradient(160deg, #4C8DFF, #2F5FD1); }
.pay-hero-success { background:linear-gradient(160deg, var(--success), #1B8A4F); }
.pay-hero-failed { background:linear-gradient(160deg, var(--danger), #A81F30); }
.pay-hero-icon { width:60px; height:60px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; color:#fff; }
.pay-hero-title { font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:#fff; margin-bottom:6px; }
.pay-hero-desc { font-size:0.84rem; color:rgba(255,255,255,0.92); max-width:360px; margin:0 auto; line-height:1.55; }

.pay-stepper-label { font-family:var(--font-display); font-weight:700; font-size:0.9rem; margin-bottom:14px; }
.pay-stepper { display:flex; align-items:flex-start; margin-bottom:22px; }
.pay-step { display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; width:60px; }
.pay-step-dot {
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--text-3); border:2px solid var(--border); transition:var(--transition);
}
.pay-step.done .pay-step-dot { background:var(--success); color:#fff; border-color:var(--success); }
.pay-step.current .pay-step-dot { background:var(--surface); color:var(--acid); border-color:var(--acid); box-shadow:0 0 0 3px rgba(245,166,35,0.16); }
.pay-step span { font-size:0.62rem; color:var(--text-3); text-align:center; font-weight:600; }
.pay-step.done span, .pay-step.current span { color:var(--text); }
.pay-step-line { flex:1; height:2px; background:var(--border); margin-top:17px; transition:var(--transition); }
.pay-step-line.done { background:var(--success); }

.pay-timer-pill { display:inline-flex; align-items:center; gap:6px; background:var(--danger); color:#fff; font-weight:700; font-size:0.8rem; padding:9px 18px; border-radius:99px; margin-bottom:22px; }

.pay-info-card { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px 16px; margin-bottom:12px; }
.pay-info-card-icon { width:44px; height:44px; border-radius:10px; overflow:hidden; flex-shrink:0; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--volt-glow); }
.pay-info-card-icon img { width:100%; height:100%; object-fit:cover; }
.pay-info-rows { display:flex; flex-direction:column; gap:2px; font-size:0.82rem; min-width:0; }
.pay-info-rows b { font-weight:700; }

.pay-accordion { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:14px; background:var(--surface); }
.pay-accordion-head { display:flex; align-items:center; justify-content:space-between; padding:15px 16px; cursor:pointer; font-weight:700; font-size:0.88rem; user-select:none; }
.pay-accordion-head svg { transition:transform 0.2s; color:var(--text-3); flex-shrink:0; }
.pay-accordion.open .pay-accordion-head svg { transform:rotate(180deg); }
.pay-accordion-body { max-height:0; overflow:hidden; transition:max-height 0.25s ease; }
.pay-accordion.open .pay-accordion-body { max-height:800px; }
.pay-accordion-body-inner { padding:2px 16px 16px; font-size:0.83rem; color:var(--text-2); line-height:1.65; }

.pay-detail-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:0.84rem; }
.pay-detail-row.divider { border-top:1px solid var(--border); margin-top:2px; padding-top:12px; }
.pay-detail-row span:first-child { color:var(--text-2); }
.pay-detail-row span:last-child { font-weight:700; }
.pay-total-box { display:flex; align-items:center; justify-content:space-between; border:1.5px solid var(--volt-deep); border-radius:var(--radius-lg); padding:13px 15px; margin:12px 0 18px; background:rgba(214,41,60,0.04); }
.pay-total-box b:first-child { font-size:0.86rem; }
.pay-total-box b:last-child { font-family:var(--font-mono); font-size:1.05rem; color:var(--volt-deep); }
.pay-copy-btn { display:flex; align-items:center; color:var(--text-3); background:none; border:none; cursor:pointer; padding:2px; flex-shrink:0; }
.pay-copy-btn:hover { color:var(--volt-glow); }

.pay-kv-block { margin-bottom:14px; }
.pay-kv-block:last-child { margin-bottom:0; }
.pay-kv-label { font-size:0.68rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; font-weight:600; }
.pay-kv-value { font-weight:700; font-size:0.86rem; }
.pay-kv-value-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pay-status-badge { display:inline-block; font-size:0.7rem; font-weight:800; letter-spacing:0.02em; padding:4px 11px; border-radius:99px; }
.pay-status-unpaid, .pay-status-failed { background:rgba(214,41,60,0.14); color:var(--danger); }
.pay-status-paid, .pay-status-success { background:rgba(30,166,102,0.14); color:var(--success); }
.pay-status-pending { background:rgba(245,166,35,0.16); color:#8A5A00; }
.pay-status-processing { background:rgba(76,141,255,0.14); color:#2F5FD1; }

.pay-qr-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:22px 20px; text-align:center; margin-bottom:14px; transition:opacity 0.3s; }
.pay-qr-img-wrap { width:100%; max-width:240px; aspect-ratio:1; margin:0 auto 16px; background:#fff; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; padding:12px; box-shadow:var(--shadow-card); color:var(--text-3); }
.pay-qr-img-wrap img { width:100%; height:100%; object-fit:contain; }
.pay-qr-caption { font-size:0.72rem; color:var(--text-3); margin-top:12px; }

.confirm-order-icon { display:flex; justify-content:center; margin-bottom:12px; color:var(--success); }
.confirm-order-rows { background:var(--surface-2); border-radius:var(--radius); padding:6px 14px; margin-bottom:16px; }
.confirm-order-row { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); font-size:0.85rem; }
.confirm-order-row:last-child { border-bottom:none; }
.confirm-order-row span:first-child { color:var(--text-2); flex-shrink:0; }
.confirm-order-row span:last-child { font-weight:600; text-align:right; }
.confirm-order-agree { display:flex; align-items:flex-start; gap:9px; font-size:0.78rem; color:var(--text-2); cursor:pointer; line-height:1.5; }
.confirm-order-agree input { margin-top:2px; flex-shrink:0; }
.confirm-order-success { text-align:center; padding:16px 0; }
.confirm-order-check { display:flex; justify-content:center; color:var(--success); animation:popIn 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes popIn { from { transform:scale(0.5); opacity:0; } to { transform:scale(1); opacity:1; } }

.status-page { padding:44px 0 72px; max-width:600px; margin:0 auto; }
.status-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; }
.status-header { padding:24px; background:var(--surface-2); border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:16px; }
.status-icon { width:52px; height:52px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--volt-glow); background:var(--surface-3); flex-shrink:0; }
.status-row { display:flex; justify-content:space-between; align-items:center; padding:14px 24px; border-bottom:1px solid var(--border); font-size:0.9rem; }
.status-row:last-child { border-bottom:none; }
.status-row .col-l { color:var(--text-2); }
.status-row .col-r { font-weight:500; text-align:right; }

.auth-page { min-height:calc(100vh - 66px); display:flex; align-items:center; justify-content:center; padding:36px 20px; }
.auth-card { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:36px; }
@media(max-width:480px) { .auth-card { padding:24px 20px; } }
.auth-logo { text-align:center; margin-bottom:26px; }
.auth-logo .logo-icon { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,var(--volt),var(--volt-glow)); display:flex; align-items:center; justify-content:center; color:#fff; margin:0 auto 12px; box-shadow:0 0 24px rgba(214,41,60,0.4); }
.auth-tabs { display:flex; border-radius:var(--radius); overflow:hidden; background:var(--surface-2); padding:3px; gap:3px; margin-bottom:22px; }
.auth-tab { flex:1; padding:9px; border-radius:var(--radius-sm); font-size:0.88rem; font-weight:600; color:var(--text-2); transition:var(--transition); text-align:center; cursor:pointer; }
.auth-tab.active { background:var(--surface-3); color:var(--text); }
.auth-form { display:none; }
.auth-form.active { display:block; }

.history-page { padding:36px 0 72px; }
.order-list { display:flex; flex-direction:column; gap:12px; }
.order-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px; display:flex; align-items:center; gap:16px; transition:var(--transition); cursor:pointer; }
.order-item:hover { border-color:rgba(214,41,60,0.25); background:var(--surface-2); }
.order-item-icon { width:44px; height:44px; border-radius:var(--radius-sm); background:var(--surface-3); display:flex; align-items:center; justify-content:center; color:var(--volt-glow); flex-shrink:0; }
.pw-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--text-3); background:none; border:none; padding:4px; cursor:pointer; display:flex; align-items:center; transition:var(--transition); }
.pw-toggle:hover { color:var(--text-2); }
.order-item-info { flex:1; min-width:0; }
.order-item-name { font-weight:600; font-size:0.93rem; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.order-item-meta { font-size:0.78rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.order-item-right { text-align:right; flex-shrink:0; }
.order-item-price { font-family:var(--font-mono); font-weight:700; font-size:0.9rem; }
@media(max-width:480px) {
  .order-item { padding:14px; gap:12px; }
  .order-item-icon { width:38px; height:38px; }
}
.empty-state { text-align:center; padding:72px 24px; color:var(--text-3); }
.empty-icon { display:flex; justify-content:center; margin-bottom:16px; opacity:0.5; color:var(--volt-glow); }

/* --- Profile page --- */
.profile-layout { display:grid; grid-template-columns:280px 1fr; gap:24px; align-items:start; padding:36px 0 72px; }
@media(max-width:768px) { .profile-layout { grid-template-columns:1fr; padding:24px 0 56px; } }
.profile-avatar { width:76px; height:76px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:#fff; background:linear-gradient(135deg, var(--volt), var(--volt-2)); }
.profile-side-card { padding:28px 22px; text-align:center; height:fit-content; }
.profile-side-links { display:flex; flex-direction:column; gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.profile-side-links .btn { justify-content:flex-start; gap:10px; }
.profile-main-card { padding:28px; }
@media(max-width:480px) { .profile-main-card { padding:22px 18px; } }
.profile-form-row { display:flex; gap:14px; }
@media(max-width:560px) { .profile-form-row { flex-direction:column; } }

/* --- Payment page --- */
.payment-page { padding:32px 0 72px; max-width:520px; margin:0 auto; }

/* --- Event/Promo banner carousel (beranda) --- */
.event-banner-section { padding:20px 0 4px; }
.event-banner-track { display:flex; gap:14px; overflow-x:auto; padding:4px 2px 12px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.event-banner-track::-webkit-scrollbar { height:6px; }
.event-banner-card { flex:0 0 min(560px,88%); scroll-snap-align:start; border-radius:var(--radius-xl); overflow:hidden; position:relative; min-height:150px; display:flex; align-items:flex-end; background-size:cover; background-position:center; border:1px solid var(--border); }
.event-banner-card::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.72) 100%); }
.event-banner-body { position:relative; padding:20px; color:#fff; z-index:1; }
.event-banner-badge { display:inline-block; font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px; border-radius:99px; background:rgba(255,255,255,0.18); backdrop-filter:blur(6px); margin-bottom:8px; }
.event-banner-title { font-family:var(--font-display); font-size:1.15rem; font-weight:700; margin-bottom:4px; }
.event-banner-desc { font-size:0.82rem; opacity:0.88; max-width:90%; }

/* --- Blog pages --- */
.blog-page { padding:36px 0 72px; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:20px; }
.blog-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); box-shadow:var(--shadow-card); }
.blog-card:hover { transform:translateY(-3px); border-color:rgba(214,41,60,0.3); }
.blog-card-cover { height:150px; background:linear-gradient(135deg, var(--surface-3), var(--surface-2)); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; color:var(--text-3); flex-shrink:0; }
.blog-card-body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-card-title { font-family:var(--font-display); font-weight:700; font-size:0.98rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blog-card-excerpt { font-size:0.82rem; color:var(--text-2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.blog-card-meta { font-size:0.72rem; color:var(--text-3); margin-top:auto; padding-top:4px; }

.blog-detail-page { max-width:720px; margin:0 auto; padding:32px 0 72px; }
.blog-detail-cover { width:100%; aspect-ratio:16/8; border-radius:var(--radius-xl); background-size:cover; background-position:center; margin-bottom:24px; background-color:var(--surface-2); }
.blog-detail-title { font-family:var(--font-display); font-weight:800; font-size:clamp(1.35rem,4.5vw,1.9rem); line-height:1.3; margin-bottom:10px; }
.blog-detail-meta { font-size:0.82rem; color:var(--text-3); margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.blog-detail-content { font-size:0.95rem; line-height:1.85; color:var(--text-2); }
.blog-detail-content p { margin-bottom:18px; }
.blog-detail-content p:last-child { margin-bottom:0; }
.blog-detail-cta { margin-top:40px; padding:28px; text-align:center; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-xl); }


.footer { border-top:1px solid var(--border); background:var(--surface); padding:48px 0 24px; margin-top:48px; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:32px; margin-bottom:32px; }
@media(max-width:800px) { .footer-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px) { .footer-grid { grid-template-columns:1fr; } }
.footer-brand-desc { font-size:0.84rem; color:var(--text-3); line-height:1.6; margin-top:12px; max-width:280px; }
.footer-col-title { font-size:0.78rem; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:14px; }
.footer-col a { display:block; font-size:0.85rem; color:var(--text-3); padding:5px 0; transition:var(--transition); }
.footer-col a:hover { color:var(--volt-glow); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--border); flex-wrap:wrap; gap:12px; font-size:0.78rem; color:var(--text-3); }
.footer-social { display:flex; gap:10px; }
.footer-social a { width:32px; height:32px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.footer-social a:hover { background:var(--volt); }