/* Import Montserrat font dari Google */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* ====== Variabel Warna (Root CSS) ====== */
:root {
  --color-background: #222;
  --color-foreground: #fff;

  --color-primary: #ffc107;
  --color-secondary: #f39c12;
  --color-blackpearl: #2b333d;
  --color-primary-dark: #e0a800;
  --color-primary-light: #ffe082;

  --color-danger: #dc3545;
  --color-success: #28a745;
  --color-info: #17a2b8;

  --color-dark: #111;
  --color-light: #f8f9fa;
  --color-muted: #6c757d;

  --color-border: #333;
  --shadow-soft: 0 2px 4px rgba(0,0,0,0.3);
}

/* ====== Base Styles ====== */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  font-family: 'Montserrat', sans-serif;
  background-color: var(--color-background);
  color: var(--color-foreground);
}

main {
  flex: 1; /* Mengisi ruang kosong antara header dan footer */
}
/* ====== Navbar Login ====== */
.navbar-login {
  background-color: var(--color-dark);
  color: var(--color-foreground);

  position: sticky;
  top: 0;
  z-index: 1040;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ====== Navbar Menu Utama ====== */
.navbar-mainmenu {
  background-color: var(--color-blackpearl);
  color: var(--color-foreground);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;

  position: sticky;
  top: 48px; /* posisinya tepat di bawah login bar */
  z-index: 1039;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.navbar-mainmenu a {
  color: var(--color-foreground);
  text-decoration: none;
  font-size: 16px;
}

.navbar-mainmenu a .fas {
  font-size: 20px;
  display: block;
  margin-bottom: 4px;
  color: var(--color-foreground);
}

.menu-icon-svg {
  width: 60px;
  height: 60px;
  margin: 0 auto 5px;
  display: block;
  transition: transform 0.3s ease;
}

.navbar-mainmenu a:hover .menu-icon-svg {
  transform: scale(1.1); /* efek zoom saat hover */
}

/* Hover Menu Utama */
.navbar-mainmenu a:hover,
.navbar-mainmenu a:focus {
  color: var(--color-primary);
}

/* ====== Menu Scroll Mobile ====== */
.menu-scroll-wrapper {
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 10px;
  margin: 0 -10px;
  scrollbar-width: none; /* Firefox */
}
.menu-scroll-wrapper::-webkit-scrollbar {
  display: none;
}
.menu-scroll-row {
  display: inline-flex;
  gap: 1rem;
  padding-bottom: 5px;
}
.menu-item {
  display: inline-block;
  text-align: center;
}
.menu-item img.menu-icon-svg {
  width: 50px;
  height: 50px;
  margin-bottom: 4px;
}

/* ===========================================================
   LC SideDrawer v4.2  — mengikuti alurmu + tombol 2 kolom
   =========================================================== */

/* -- tombol tetap, dipoles -- */
#mobileMenuToggle{
  position:fixed; top:15px; right:15px; z-index:1051;
  width:44px; height:44px; display:none;
  background:var(--color-secondary); color:var(--color-foreground);
  border:2px solid #fff; border-radius:50%; font-size:20px;
  align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
#mobileMenuToggle i{ line-height:1; transition:transform .2s ease }
#mobileMenuToggle:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.45) }

/* Drawer: animasi transform (lebih halus) */
#sideDrawer{
  position:fixed; top:0; right:0; height:100vh;
  width:clamp(288px, 86vw, 340px);
  background:linear-gradient(to right,#1d2227,#111418); color:#e9ecef; z-index:1050;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  transform:translateX(100%);
  transition:transform .28s ease-in-out;
  box-shadow:-2px 0 18px rgba(0,0,0,.55);
  border-left:1px solid rgba(255,255,255,.06);
  padding-bottom:max(76px, env(safe-area-inset-bottom));
  max-width:300px;
}
#sideDrawer.open, #sideDrawer.active{ transform:translateX(0) }

/* penting */
#sideDrawer, #sideDrawer *{ box-sizing:border-box }
#sideDrawer .section, 
#sideDrawer .header, 
#sideDrawer .quick-actions, 
#sideDrawer .btn-block, 
#sideDrawer .menu-item{ width:100% }

/* xs screen */
@media (max-width:360px){
  #sideDrawer{ width:86vw }
}

/* Body lock + backdrop */
body.lc-sd-open{ overflow:hidden }
.lc-sd-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; z-index:1049;
}
.lc-sd-backdrop.show{ opacity:1; visibility:visible }

/* Scrollbar */
#sideDrawer::-webkit-scrollbar{ width:8px }
#sideDrawer::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px }

/* =================== HEADER =================== */
#sideDrawer .header{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(180deg,#f0b93b 0%, #905f00 100%);
  padding:14px 56px 14px 14px;
  border-bottom:1px solid rgba(0,0,0,.25);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  color:#0e0f10;
}

/* close button */
#sideDrawer .header .lc-sd-close{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(0,0,0,.28); color:#fff; border:1px solid rgba(255,255,255,.25);
}

/* badge level */
#sideDrawer .header .badge{
  max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.2));
}

/* Bungkus konten ringkasan dalam panel agar tidak “nabrak” gradient header */
#sideDrawer .header > .section{
  margin-top:10px;
  background:rgba(20,24,30,.8);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px;
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.25) inset, 0 10px 24px rgba(0,0,0,.2);
  color:#e9ecef;
  width:273px;
}

/* =================== STAT CARDS =================== */
#sideDrawer .stat-card{
  background:#151a20;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px; padding:10px 12px; margin:10px 0 0;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}
#sideDrawer .stat-card .small{ opacity:.9; font-size:.7rem; letter-spacing:.2px }
#sideDrawer .stat-card .val{ font-weight:800; font-size:0.7rem }
#sideDrawer .stat-card.lp  .val{ color:#ffcf6a }
#sideDrawer .stat-card.exp .val{ color:#dfe6ee }

/* =================== QUICK ACTIONS =================== */
#sideDrawer .quick-actions{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin:12px 0 12px;
}
#sideDrawer .quick-actions .qa{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:50px; gap:6px; text-align:center;
  border:1px solid rgba(255,255,255,.10); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color:#e9ecef; text-decoration:none; user-select:none;
  transition:transform .08s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.28);
}
#sideDrawer .quick-actions .qa i{ color:#ffc107; font-size:13px }
#sideDrawer .quick-actions .qa span{ font-size:.5rem; font-weight:700; letter-spacing:.3px }
#sideDrawer .quick-actions .qa:hover{ transform:translateY(-1px); background:rgba(255,255,255,.08) }
#sideDrawer .quick-actions .qa:active{ transform:translateY(0) }

/* =================== BUTTONS (Akun & Logout kiri–kanan) =================== */
#sideDrawer .btn-block{
  display:grid;
  grid-template-columns:1fr 1fr;  /* dua kolom sama besar */
  gap:10px;
  margin:6px 0 10px;
}
#sideDrawer .btn-block > *{ min-width:0 }  /* cegah overflow grid item */
#sideDrawer .btn-block a.btn,
#sideDrawer .btn-block form,
#sideDrawer .btn-block form .btn{ width:100% }

#sideDrawer .btn-block .btn{
  height:30px; border-radius:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; 
  font-size:0.7rem;/* pusatkan icon+teks */
}

/* primary tegas & bersih di atas panel gelap */
#sideDrawer .btn-block .btn.btn-primary{
  background:#2f6df6; border-color:#2755ca; color:#fff;
  box-shadow:0 10px 24px rgba(47,109,246,.35);
}
#sideDrawer .btn-block .btn.btn-primary:hover{ filter:brightness(1.06) }

/* outline-danger dibuat solid/kontras */
#sideDrawer .btn-block .btn.btn-outline-danger{
  color:#fff; background:linear-gradient(180deg,#e94545 0%,#c72f2f 100%);
  border:1px solid #c72f2f;
}
#sideDrawer .btn-block .btn.btn-outline-danger:hover{
  color:#fff; background:#ef4444; border-color:#ef4444;
  box-shadow:0 10px 24px rgba(239,68,68,.35);
}

/* =================== MENU LIST =================== */
#sideDrawer .menu-item{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(to right,#1d2227,#111418); color:#e9ecef; text-decoration:none;
  transition:background .15s ease, color .15s ease, transform .06s ease;
  cursor:pointer; user-select:none;
}
#sideDrawer .menu-item i{
  width:28px; min-width:28px; text-align:center; font-size:18px; color:#ffc107;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
#sideDrawer .menu-item span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#sideDrawer .menu-item:hover{ background:#161b22 }
#sideDrawer .menu-item:active{ transform:translateY(1px) }
#sideDrawer .menu-item:last-of-type{ border-bottom:0 }

/* =================== RESPONSIVE =================== */
@media (max-width:768px){
  #mobileMenuToggle{ display:flex }
  #sideDrawer{ display:block }
}

/* Motion preference */
@media (prefers-reduced-motion:reduce){
  #sideDrawer, #mobileMenuToggle{ transition:none }
}
/* Sidenav — warna angka Saldo/LP/EXP */
#sideDrawer .stat-card .val { font-weight: 800; }

/* Saldo & LP kuning */
#sideDrawer .stat-card.stat-saldo .val,
#sideDrawer .stat-card.lp .val {
  color: #ffd34d !important;
}

/* EXP hijau */
#sideDrawer .stat-card.exp .val {
  color: #0be881 !important;
}
  /* pastikan kartu EXP bisa tinggi dinamis */
  #sideDrawer .stat-card.exp {
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding-top: .6rem;
    padding-bottom: .6rem;
  }
  #sideDrawer .stat-card.exp .val { display:block; }

  /* Track */
  #sideDrawer .exp .exp-progress {
    width: 100%;
    height: 8px;
    border-radius: 9999px;
    background: linear-gradient(180deg, #2b333d, #232a33);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
    overflow: hidden;
  }
  /* Bar */
  #sideDrawer .exp .exp-progress-bar {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    box-shadow: 0 0 10px rgba(34,197,94,.55);
    transition: width .45s ease;
  }
  /* Teks kecil di bawah bar */
  #sideDrawer .exp .exp-meta {
    font-size: 11px;           /* kecil */
    line-height: 1.2;
    opacity: .8;
    margin-top: .25rem;
    color:#fff !important;
  }
  #sideDrawer .exp .exp-meta b { opacity: .95; }

/* ====== Scroll Menu Horizontal Mobile ====== */
.menu-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 0.5rem 0;
  cursor: grab;
  white-space: nowrap;
}

.menu-scroll-wrapper::-webkit-scrollbar {
  display: none;
}
.menu-scroll-wrapper {
  scrollbar-width: none;
}

.menu-scroll-wrapper.dragging {
  cursor: grabbing;
  user-select: none;
}

.menu-scroll-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  padding: 0 1rem;
}

.menu-item {
  flex: 0 0 auto;
  width: 80px;
  text-align: center;
}
.carousel-inner img {
  object-fit: cover;
  max-height: 400px;
}

@media (max-width: 768px) {
  .carousel-inner img {
    max-height: 200px;
  }
}
.announcement-bar {
  background-color: #1d232b; /* latar belakang luar */
  padding: 8px;
}

.announcement-container {
  background: linear-gradient(to right, #2c343f, #1f272f);
  border-radius: 8px;
  color: #ffffff;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 12px; /* Tambahkan jarak ke bawah */
}

.announcement-container i {
  color: #fff;
}
/* === Mobile Bottom Nav === */
.mobile-bottom-nav{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to right,#1d2227,#111418);
  display: flex; justify-content: space-around; align-items: flex-end;
  z-index: 9999;
  padding-bottom: 5px;
  border-top: 1px solid rgba(255,255,255,.05);

  /* ... punyamu yang lain tetap ... */
  box-shadow: 0 -1px 6px rgba(0,0,0,.22); /* lebih tipis */
}

.mobile-bottom-nav::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-8px;          /* sebelumnya -14px */
  height:8px;        /* sebelumnya 14px */
  pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.22),  /* turunkan opasitas (lebih ringan) */
    rgba(0,0,0,0)
  );
}



.mobile-bottom-nav .nav-item {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
}

.mobile-bottom-nav .nav-item i {
  font-size: 18px;
  margin-bottom: 6px;
  color: #ffc107;
  display: block;
}

.mobile-bottom-nav .nav-item span {
  display: block;
}

/* === Center Floating Icon === */
.mobile-bottom-nav .center-icon {
  position: relative;
  margin-top: -30px;
  text-align: center;
}

.mobile-bottom-nav .center-icon .circle-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(to bottom, #2a2f35, #111418);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

.mobile-bottom-nav .center-icon .circle-icon i {
  font-size: 24px;
  color: #ffc107;
  margin: 0;
}

.mobile-bottom-nav .center-icon .center-label {
  margin-top: 6px;
  font-size: 12px;
  color: #fff;
  display: block;
}

/* === Responsive Menu Icon (Mobile) === */
@media (max-width: 576px) {
  .menu-scroll-row {
    gap: 6px;
    padding: 0 0.5rem;
  }

  .menu-item {
    width: 58px;
  }

  .menu-icon-svg {
    width: 38px;
    height: auto;
    margin-bottom: 2px;
  }

  .menu-item div {
    font-size: 11px;
    font-weight: 600; /* ✔ Tebalkan font */
    letter-spacing: 0.3px; /* ✔ Tambahkan jarak antar huruf */
    line-height: 1.2; /* ✔ Supaya tidak terlalu rapat vertikal */
  }
}


@media (max-width: 576px) {
  .announcement-bar {
    padding: 4px;
    margin-bottom: 10px;
  }

  .announcement-bar .d-flex {
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }

  .announcement-bar .fa-volume-up {
    font-size: 14px !important;
    margin-right: 6px !important;
  }

  .announcement-bar marquee {
    font-size: 12px !important;
  }
}

@font-face {
  font-family: 'AdvancedDotDigital';
  src: url('/assets/fonts/advanced_dot_digital-7-webfont.woff2') format('woff2'),
       url('/assets/fonts/advanced_dot_digital-7-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.jackpot-section {
  background: none !important;
  padding: 10px;
  border-radius: 10px;
}

.jackpot-wrapper {
  position: relative;
  display: inline-block;
}

.jackpot-img {
  max-width: 100%;
  height: auto;
  display: block;
}

.jackpot-amount {
  position: absolute;
  top: 63%; /* sedikit lebih ke bawah */
  left: 50%;
  transform: translate(-50%, -50%);
}

#jackpotValue {
  font-family: 'AdvancedDotDigital', monospace !important;
  font-size: 2.6rem !important;
  color: #ffd700;
  text-shadow: 2px 2px 4px #000;
  line-height: 1;
  font-weight: bold;
}
@media (max-width: 768px) {
  #jackpotValue {
    font-size: 3.0vw !important; /* responsif fleksibel */
  }

  .jackpot-amount {
    top: 60%; /* sesuaikan tengah vertikal */
  }
}

@media (max-width: 480px) {
  #jackpotValue {
    font-size: 3.0vw !important;
  }

  .jackpot-amount {
    top: 68%;
  }
}
.w-45 {
  width: 45%;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === ANIMASI SLIDE UP === */
@keyframes slideUpFade {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}
.table-fade-row {
  animation: slideUpFade 0.5s ease;
}

/* === TABEL MODERN === */
.table-modern {
  background-color: #2d323c !important;
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

/* HEADER TABEL */
.table-modern thead {
  background-color: #1d232b !important;
  color: #ffffff !important;
  font-weight: 600;
  border-bottom: 1px solid #2d323c;
}

/* ISI TABEL */
.table-modern tbody tr {
  background-color: #2d323c !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.table-modern td {
  background-color: #2d323c !important;
}

.table-modern td,
.table-modern th {
  padding: 10px 12px;
  vertical-align: middle;
  border: none !important;
}

/* === BADGE STATUS === */
.table-modern .badge {
  padding: 5px 10px;
  font-size: 0.75rem;
  border-radius: 8px;
  font-weight: bold; /* Diubah dari 500 ke bold */
}

/* === CARD WRAPPER === */
.modern-card {
  background-color: #1d232b !important;
  border: 3px solid #1d232b !important;
  border-radius: 10px !important;
  overflow: hidden;
}

/* HEADER CARD */
.modern-card .card-header {
  background-color: #1d232b !important;
  border-bottom: 1px solid #2d323c !important;
  color: #ffffff;
  padding: 10px 15px;
  font-weight: bold;
}

/* BODY CARD */
.modern-card .card-body {
  padding: 0 !important;
}

/* === RESPONSIVE MOBILE === */
@media (max-width: 767.98px) {
  .table-modern td,
  .table-modern th {
    padding: 8px 10px;
  }
}
.togel-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.result-box {
  background-color: #2d333c;
  border: 2px solid #1d232b;
  border-radius: 15px;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  color: white;
  box-shadow: 0 0 5px rgba(0,0,0,0.15);
}

.result-box .region {
  font-size: 13px;
  margin-bottom: 5px;
}

.result-box .number {
  background-color: #f5a623;
  color: white;
  font-size: 24px;
  border-radius: 10px;
  padding: 6px 12px;
}
.togel-date {
  font-size: 13px;
  color: #ccc;
  margin-top:7px;
}
/* CARD FORM REGISTER DARK MODE */
.form-register-card {
  background-color: #2d323c !important;
  color: #fff;
  border-radius: 10px;
  border: 5px solid #1d232b;
  padding: 20px;
}

.form-register-card .card-header {
  background-color: #2d323c !important;
  border-bottom: 1px solid #1d232b;
  color: #ffc107;
  font-weight: bold;
  font-size: 18px;
}

.form-register-card label {
  color: #fff;
}

.form-register-card .form-control,
.form-register-card .form-select {
  background-color: #1d232b;
  color: #fff;
  border: 1px solid #444;
}

.form-register-card .form-control::placeholder {
  color: #aaa;
}

.form-register-card .input-group-text {
  background-color: #1d232b;
  color: #ffc107;
  border: 1px solid #444;
}

.form-register-card .form-control:focus,
.form-register-card .form-select:focus {
  background-color: #1d232b;
  color: #fff;
  border-color: #ffc107;
  box-shadow: none;
}

.form-register-card .btn-warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;
  font-weight: bold;
}

.form-register-card .btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.form-register-card .btn-outline-warning:hover {
  background-color: #ffc107;
  color: #000;
}
.footer-wrapper {
  margin-top: 40px;
}

/* Bagian atas */
.footer-top {
  background-color: #2d323c;
}


/* Bagian copyright */
.footer-bottom {
  background-color: var(--color-dark);
  font-size: 0.875rem;
}

/* Link footer */
.footer-link {
  color: #ccc;
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
  transition: all 0.2s ease-in-out;
}

.footer-link:hover {
  color: #ffc107;
  text-decoration: underline;
}
/* Tambahan khusus mobile agar footer tidak tertutup bottom nav */
@media (max-width: 768px) {
  .footer-wrapper {
    padding-bottom: 60px; /* Sesuaikan dengan tinggi bottom nav kamu */
  }
}
@media (max-width: 768px) {
  .footer-bottom .copyright-text {
    display: flex;
    justify-content: flex-start;
    padding-left: 15px;
  }
}

/* =========================================================
   Provider Card — ANDROID LOOK (rapi 3 kolom di iPhone)
   + Shimmer untuk .provider-name
   ========================================================= */

/* iOS suka auto-zoom/resize text, matikan */
html { -webkit-text-size-adjust: 100%; }

/* --- Grid helper: kolom equal-height & full-width (fix iOS flex bug) --- */
.provider-grid > [class*="col-"],
.row.g-4.justify-content-center > [class*="col-"]{
  display:flex;
  min-width:0;               /* cegah kolom melar di iOS */
}

/* Gutter */
.row.g-4{
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1.25rem;
}
@media (max-width:576px){
  .row.g-4{
    --bs-gutter-x: .6rem;
    --bs-gutter-y: .9rem;
  }
}

/* ===== Kartu Provider ===== */
.provider-card{
  background:#1e232b;
  border-radius:16px;
  overflow:hidden;           /* kunci tinggi seragam */
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  transition:transform .3s ease, box-shadow .3s ease;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  position:relative;
  box-sizing:border-box;
}
.provider-card:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:0 8px 20px rgba(0,0,0,.6);
}

/* ===== Gambar kotak penuh ===== */
.provider-image-wrapper{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  flex:1 0 auto;             /* ambil ruang di atas judul */
  background:#0f1318;
}
.provider-logo{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .5s ease;
}
.provider-card:hover .provider-logo{ transform:scale(1.05); }

/* Fallback Safari lama (tanpa aspect-ratio) */
@supports not (aspect-ratio:1/1){
  .provider-image-wrapper{ position:relative; padding-top:100%; }
  .provider-image-wrapper .provider-logo{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
}

/* ===== Nama provider (ANDROID LOOK) ===== */
.provider-name{
  position:relative;         /* penting utk shimmer */
  background:#ffc107;
  color:#1a1a1a;
  font-weight:700;
  font-size:clamp(.78rem, 2vw, .9rem);
  letter-spacing:.3px;

  display:flex; align-items:center; justify-content:center;
  text-align:center;

  padding:10px 10px;
  margin:0; width:100%;
  border-radius:0 0 16px 16px;
  line-height:1.15;

  /* desktop: boleh 2 baris */
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

/* ✨ Shimmer kembali */
.provider-name::before{
  content:"";
  position:absolute; top:0; left:-75%;
  width:55%; height:100%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-18deg);
  pointer-events:none;
  animation:providerShimmer 2.2s ease-in-out infinite;
  will-change:left;
}
@keyframes providerShimmer{
  0%   { left:-75%; }
  100% { left:125%; }
}

/* Mobile iPhone: 1 baris + tinggi seragam (Android-look) */
@media (max-width:576px){
  .provider-card{ border-radius:12px; box-shadow:0 3px 10px rgba(0,0,0,.35); }

  .provider-name{
    border-radius:0 0 12px 12px;
    font-size:clamp(.65rem, 2.5vw, .7rem);
    padding:8px 6px;

    /* 1 baris + ellipsis */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    /* tinggi seragam (Android look) */
    height:30px;            /* sesuaikan kalau perlu 34–40px */
    min-height:30px;
    max-height:30px;
  }
}

/* ===== Overlay Maintenance ===== */
.maintenance-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.65);
  color:#fff; font-weight:700; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  z-index:5; border-radius:16px;
}
@media (max-width:576px){
  .maintenance-overlay{ border-radius:12px; }
}

/* Aksesibilitas */
@media (prefers-reduced-motion:reduce){
  .provider-card, .provider-logo{ transition:none !important; }
  .provider-name::before{ animation:none !important; }
}

/* Rendering */
body{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}



/* =========================================================
   GAMELIST — Android look, 3 grid di iPhone (375–480px),
   jarak padat, RTP panjang, Title gold + shimmer
   ========================================================= */

/* iOS text scaling fix */
html{ -webkit-text-size-adjust:100%; }

/* -------- Header & Filter -------- */
.gamelist-page .page-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#2b3038;border:1px solid #3a404b;border-radius:14px;
  padding:12px 16px;margin:8px 0;box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.gamelist-page .page-h1{margin:0;font-size:1.15rem;color:#f8fafc;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gamelist-page .page-meta .count{color:#e6eaef;font-weight:400}

.gamelist-page .filter-bar{position:static;padding:6px 0}
.gamelist-page .filter-card{background:#262c33;border:1px solid #3a404b;border-radius:12px;padding:8px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.gamelist-page .sort-tabs{display:inline-flex;gap:8px;flex-wrap:wrap}
.gamelist-page .sort-tab{display:inline-block;padding:6px 10px;border:1px solid #4a5160;border-radius:999px;background:#323844;color:#dfe5ee;text-decoration:none;font-size:.82rem}
.gamelist-page .sort-tab.active{background:linear-gradient(180deg,#ffd773,#f6c343);border-color:#f6c343;color:#1f2328}

.gamelist-page #searchBox.form-control{
  background:#1f242b !important;color:#e9eef6 !important;border:1px solid #444b57 !important;border-radius:10px !important;box-shadow:none !important;
}
.gamelist-page #searchBox.form-control::placeholder{color:#9aa3af !important}
.gamelist-page #searchBox.form-control:focus{border-color:#f6c343 !important;box-shadow:0 0 0 2px rgba(246,195,67,.35) !important;outline:0 !important}

/* =========================================================
   GRID — rapi & padat
   ========================================================= */
.gamelist-page #grid.grid-6-3{
  display:grid !important;
  grid-auto-flow:row dense;
  align-items:start;
  gap:12px 10px; /* row | col */
  grid-template-columns:repeat(6,minmax(0,1fr));
}
@media (max-width:991.98px){
  .gamelist-page #grid.grid-6-3{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:767.98px){
  .gamelist-page #grid.grid-6-3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 8px; }
}
/* Paksa iPhone (375–480px) tetap 3 kolom */
@media (max-width:479.98px) and (min-width:360px){
  .gamelist-page #grid.grid-6-3{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px 8px !important;
  }
}
/* 2 kolom hanya layar sangat kecil */
@media (max-width:359.98px){
  .gamelist-page #grid.grid-6-3{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px 6px !important; }
}

/* reset anak grid */
.gamelist-page #grid.grid-6-3 > *{
  box-sizing:border-box;width:100% !important;max-width:none !important;min-width:0 !important;margin:0 !important;flex:0 0 auto !important;
}

/* =========================================================
   TILE — parent meng-clip agar lebar RTP/Title = lebar gambar
   ========================================================= */
.gamelist-page .card-game{
  background:#14181e;border:0;border-radius:14px !important;
  overflow:hidden !important;              /* anak ikut lebar & radius */
  padding-bottom:10px !important;          /* ruang badge, tetap padat */
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:transform .16s ease;container-type:inline-size;
}
.gamelist-page .card-game:hover{ transform:translateY(-3px); }

.gamelist-page .thumb{width:100%;aspect-ratio:1/1;border-radius:0 !important;overflow:hidden;background:#101419}
.gamelist-page .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.gamelist-page .card-game:hover .thumb img{ transform:scale(1.06) }

/* Fallback Safari lama */
@supports not (aspect-ratio:1/1){
  .gamelist-page .thumb{ position:relative; padding-top:100%; }
  .gamelist-page .thumb img{ position:absolute; inset:0; }
}

/* =========================================================
   META (RTP + TITLE + TAG)
   ========================================================= */
.gamelist-page .meta{
  padding:0 !important;min-width:0;display:grid;row-gap:0;
  grid-template-rows:auto auto 22px; /* RTP | TITLE | TAG */
  justify-items:start;
}

/* ----- RTP panjang — teks di luar ring ----- */
.gamelist-page .rtp-row{
  position:relative !important;display:block !important;margin:0 !important;padding:6px 10px !important;height:26px !important;
  background:rgba(0,0,0,.55) !important;border-left-width:0 !important;border-right-width:0 !important;border-bottom:none !important;border-radius:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 rgba(0,0,0,.35) !important;justify-self:stretch;
}
.gamelist-page .rtp-pill{
  position:absolute !important;top:50% !important;transform:translateY(-50%) !important;left:30px !important;right:30px !important;height:11px !important;
  border:2px solid rgba(255,255,255,.9) !important;background:rgba(255,255,255,.10) !important;border-radius:999px !important;overflow:hidden !important;z-index:1;
}
.gamelist-page .rtp-fill{height:100% !important;border-radius:999px !important;box-shadow:inset 0 1px 1px rgba(255,255,255,.25) !important}
.gamelist-page .rtp-red    .rtp-fill{background:linear-gradient(180deg,#ff6b6b,#c93f3f) !important}
.gamelist-page .rtp-yellow .rtp-fill{background:linear-gradient(180deg,#ffe280,#f0c03a) !important}
.gamelist-page .rtp-green  .rtp-fill{background:linear-gradient(180deg,#7fe691,#2ecc71) !important}

.gamelist-page .rtp-label,.gamelist-page .rtp-val{
  position:absolute !important;top:50% !important;transform:translateY(-50%) !important;z-index:2;color:#fff !important;
  font-weight:800 !important;font-size:8.5px !important;line-height:1;letter-spacing:.2px;-webkit-text-stroke:.25px rgba(0,0,0,.7);text-shadow:0 1px 1px rgba(0,0,0,.7);
}
.gamelist-page .rtp-label{left:5px !important}
.gamelist-page .rtp-val{right:5px !important;min-width:3.1ch !important;text-align:right !important;font-variant-numeric:tabular-nums}

/* ----- TITLE: match .provider-name (warna & shimmer) ----- */
.gamelist-page .title{
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  margin:0 !important;padding:7px 8px;line-height:1.16;overflow:hidden;
  background-color:#ffc107 !important;color:#1a1a1a !important;
  font-weight:700 !important;text-shadow:none !important;
  white-space:normal;word-break:break-word;hyphens:auto;
  font-size:clamp(.72rem,3cqi,.88rem);   /* lebih kecil (mobile-friendly) */
  height:calc(2 * 1.16em + 14px);        /* dua baris, padat */
  border:1px solid #ffc107 !important;border-left-width:0 !important;border-right-width:0 !important;border-top:none !important;
  border-radius:0 0 14px 14px !important;justify-self:stretch;
}
/* shimmer */
.gamelist-page .title::before{
  content:'';position:absolute;inset:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.30) 50%,rgba(255,255,255,0) 100%);
  animation:shimmer 2s infinite;pointer-events:none;
}
@keyframes shimmer{0%{left:-75%}100%{left:125%}}

/* ----- Badge ‘slot’ rapi ----- */
.gamelist-page .tag{
  display:inline-flex !important;align-items:center;justify-content:center;place-self:start;
  width:auto !important;max-width:100% !important;white-space:nowrap;
  height:20px;padding:0 8px;margin:8px 0 0 10px !important;
  color:#f6c343;background:rgba(246,195,67,.12);border:1px solid rgba(246,195,67,.38);border-radius:12px;font-size:.66rem;letter-spacing:.2px;
}
.gamelist-page .tag.w-100,.gamelist-page .tag.d-block{width:auto !important;display:inline-flex !important;}

/* =========================================================
   Reduce motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .gamelist-page .card-game,.gamelist-page .thumb img,.gamelist-page .title{ animation:none !important; transition:none !important; }
}

/* Render font halus */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* =========================================================
   GAMELIST — NON-RTP (Android look) | scope: .gamelist-nortp
   3 grid di iPhone (375–480px), jarak padat, title gold + shimmer
   ========================================================= */

/* iOS text scaling fix */
html{ -webkit-text-size-adjust:100%; }

/* -------- Header & Filter -------- */
.gamelist-nortp .page-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#2b3038;border:1px solid #3a404b;border-radius:14px;
  padding:12px 16px;margin:8px 0;box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.gamelist-nortp .page-h1{
  margin:0;font-size:1.15rem;color:#f8fafc;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gamelist-nortp .page-meta .count{color:#e6eaef;font-weight:400}

.gamelist-nortp .filter-bar{position:static;padding:6px 0}
.gamelist-nortp .filter-card{
  background:#262c33;border:1px solid #3a404b;border-radius:12px;
  padding:8px;box-shadow:0 4px 12px rgba(0,0,0,.25)
}
.gamelist-nortp .sort-tabs{display:inline-flex;gap:8px;flex-wrap:wrap}
.gamelist-nortp .sort-tab{
  display:inline-block;padding:6px 10px;border:1px solid #4a5160;border-radius:999px;
  background:#323844;color:#dfe5ee;text-decoration:none;font-size:.82rem
}
.gamelist-nortp .sort-tab.active{
  background:linear-gradient(180deg,#ffd773,#f6c343);
  border-color:#f6c343;color:#1f2328
}

.gamelist-nortp #searchBox.form-control{
  background:#1f242b !important;color:#e9eef6 !important;
  border:1px solid #444b57 !important;border-radius:10px !important;box-shadow:none !important;
}
.gamelist-nortp #searchBox.form-control::placeholder{color:#9aa3af !important}
.gamelist-nortp #searchBox.form-control:focus{
  border-color:#f6c343 !important;box-shadow:0 0 0 2px rgba(246,195,67,.35) !important;outline:0 !important
}

/* =========================================================
   GRID — rapi & padat (match snippetmu)
   ========================================================= */
.gamelist-nortp #grid.grid-6-3{
  display:grid !important;
  grid-auto-flow:row dense;
  align-items:start;
  gap:12px 10px; /* row | col */
  grid-template-columns:repeat(6,minmax(0,1fr));
}
@media (max-width:991.98px){
  .gamelist-nortp #grid.grid-6-3{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:767.98px){
  .gamelist-nortp #grid.grid-6-3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 8px; }
}
/* Paksa iPhone (375–480px) tetap 3 kolom */
@media (max-width:479.98px) and (min-width:360px){
  .gamelist-nortp #grid.grid-6-3{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px 8px !important;
  }
}
/* 2 kolom hanya layar sangat kecil */
@media (max-width:359.98px){
  .gamelist-nortp #grid.grid-6-3{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px 6px !important; }
}

/* reset anak grid */
.gamelist-nortp #grid.grid-6-3 > *{
  box-sizing:border-box;width:100% !important;max-width:none !important;min-width:0 !important;
  margin:0 !important;flex:0 0 auto !important;
}

/* =========================================================
   TILE — parent meng-clip agar lebar Title = lebar gambar
   ========================================================= */
.gamelist-nortp .card-game{
  background:#14181e;border:0;border-radius:14px !important;
  overflow:hidden !important;              /* anak ikut lebar & radius */
  padding-bottom:10px !important;          /* ruang badge, tetap padat */
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:transform .16s ease;container-type:inline-size;
}
.gamelist-nortp .card-game:hover{ transform:translateY(-3px); }

.gamelist-nortp .thumb{
  width:100%;aspect-ratio:1/1;border-radius:0 !important;overflow:hidden;background:#101419
}
.gamelist-nortp .thumb img{
  width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease
}
.gamelist-nortp .card-game:hover .thumb img{ transform:scale(1.06) }

/* Fallback Safari lama */
@supports not (aspect-ratio:1/1){
  .gamelist-nortp .thumb{ position:relative; padding-top:100%; }
  .gamelist-nortp .thumb img{ position:absolute; inset:0; }
}

/* =========================================================
   TITLE — match provider-name (warna & shimmer), 2 baris center
   ========================================================= */
.gamelist-nortp .title{
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  margin:0 !important;padding:7px 8px;line-height:1.16;overflow:hidden;
  background-color:#ffc107 !important;color:#1a1a1a !important;
  font-weight:700 !important;text-shadow:none !important;
  white-space:normal;word-break:break-word;hyphens:auto;

  /* ukuran font & tinggi persis seperti snippet */
  font-size:clamp(.72rem,3cqi,.88rem);
  height:calc(2 * 1.16em + 14px);

  border:1px solid #ffc107 !important;border-left-width:0 !important;border-right-width:0 !important;border-top:none !important;
  border-radius:0 0 14px 14px !important;justify-self:stretch;
}
/* shimmer */
.gamelist-nortp .title::before{
  content:'';position:absolute;inset:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.30) 50%,rgba(255,255,255,0) 100%);
  animation:shimmer 2s infinite;pointer-events:none;
}
@keyframes shimmer{0%{left:-75%}100%{left:125%}}

/* =========================================================
   Badge — rapi, tidak melebar, padat
   ========================================================= */
.gamelist-nortp .tag{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:auto !important;max-width:100% !important;white-space:nowrap;
  height:20px;padding:0 8px;margin:8px 0 0 10px !important;
  color:#f6c343;background:rgba(246,195,67,.12);
  border:1px solid rgba(246,195,67,.38);border-radius:12px;
  font-size:.66rem;letter-spacing:.2px;
}
.gamelist-nortp .tag.w-100,.gamelist-nortp .tag.d-block{width:auto !important;display:inline-flex !important;}

/* =========================================================
   Reduce motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .gamelist-nortp .card-game,.gamelist-nortp .thumb img,.gamelist-nortp .title{
    animation:none !important; transition:none !important;
  }
}

/* Render font halus */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* ===========================
   lcengine: Desktop Login Toast
   =========================== */
.lcengine-toast {
  position: fixed;
  right: 16px;
  top: 84px;
  z-index: 1085;
  min-width: 240px;
  max-width: 320px;
}

.lcengine-toast .card {
  background: #1f2329;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}

.lcengine-toast .leftbar {
  width: 56px;
  background: #2b333d;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.lcengine-toast .progressbar {
  height: 4px;
  background: #a06a2b;
  width: 0;
  animation: lcengineToast 4s linear forwards;
}

/* Progress animation */
@keyframes lcengineToast {
  from { width: 0; }
  to   { width: 100%; }
}

/* Sembunyikan toast di mobile */
@media (max-width: 767.98px) {
  .lcengine-toast { display: none; }
}
/* ============================
   Register (Scoped) — .lcreg
   ============================ */
.lcreg {
  --lcreg-green: #22c55e;
  --lcreg-muted: #94a3b8;
  --lcreg-border: rgba(148, 163, 184, .35);
}

/* Icon box kecil di ujung input (status username) */
.lcreg .lcreg-iconbox {
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-left: 0;
}

/* Badge status kecil (tersedia/tidak/teks bantuan) */
.lcreg .lcreg-badge {
  display: inline-block;
  padding: .15rem .55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
}
.lcreg .lcreg-badge--ok {
  color: var(--lcreg-green);
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .35);
}
.lcreg .lcreg-badge--bad {
  color: #ef4444;
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .35);
}
.lcreg .lcreg-badge--muted {
  color: var(--lcreg-muted);
  background: rgba(148, 163, 184, .12);
  border-color: rgba(148, 163, 184, .35);
}

/* Captcha: rapi & stabil di semua ukuran */
.lcreg .lcreg-captcha {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap; /* biar rapi di mobile */
}
.lcreg .lcreg-captcha-img {
  height: 40px;
  border-radius: .5rem;
  border: 1px solid var(--lcreg-border);
}
.lcreg .lcreg-captcha-refresh {
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lcreg .lcreg-captcha-input {
  max-width: 240px;
}

/* Submit: full di mobile, center & max-width di desktop */
.lcreg .lcreg-submit-wrap .btn {
  display: block;
  width: 100% !important;
}

@media (min-width: 768px) {
  .lcreg .lcreg-submit-wrap {
    display: flex;
    justify-content: center;
  }
  .lcreg .lcreg-submit-wrap .btn {
    max-width: 460px;
  }
}

/* Mobile: input captcha melebar rapi */
@media (max-width: 767.98px) {
  .lcreg .lcreg-captcha-input {
    max-width: none;
    flex: 1;
    min-width: 0;
  }
}

/* ===========================================================
   lc: WELCOME NEO MODAL (tema gelap + accent)
   =========================================================== */
.lc-neo-modal .modal-dialog{
  max-width:640px;
  width:auto;
  margin: .75rem auto;
}
.lc-neo-modal .modal-content{
  position:relative; overflow:hidden;
  background:#0e1217; color:#e9ecef;
  border-radius:16px; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  margin-left:10px;
  margin-right:10px;
}
.lc-neo-modal .modal-content::before{
  content:""; position:absolute; inset:0; padding:1px; border-radius:16px;
  background:conic-gradient(from 180deg at 50% 50%,
    rgba(255,193,7,.85), rgba(13,110,253,.7), rgba(25,135,84,.65), rgba(255,193,7,.85));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.25;
}

/* Header & footer */
.lc-neo-modal .modal-header,
.lc-neo-modal .modal-footer{border-color:rgba(255,255,255,.1)!important}
.lc-neo-modal .modal-header{gap:.6rem}
.lc-neo-modal .lc-title{
  display:flex; align-items:center; gap:.6rem; font-weight:800;
}
.lc-neo-modal .lc-bullet{
  width:24px; height:24px; border-radius:999px;
  background: radial-gradient( circle at 30% 30%, #ffd24d, #ffb703 60%, #926100 );
  box-shadow:0 0 0 3px rgba(255,193,7,.15), 0 0 24px rgba(255,193,7,.25);
}

/* Body */
.lc-neo-modal .lc-emoji{font-size:1.35rem}
.lc-neo-modal .lc-sub{opacity:.78}

/* Ikon sukses (SVG) + animasi garis */
.lc-neo-modal .lc-check{
  width:56px; height:56px; flex:0 0 56px;
  filter: drop-shadow(0 6px 16px rgba(255,193,7,.18));
}
.lc-neo-modal .lc-check circle{
  stroke:#ffd24d; stroke-width:8; fill:none; stroke-linecap:round;
  stroke-dasharray:180; stroke-dashoffset:180; animation:lc-draw 1s ease forwards .05s;
}
.lc-neo-modal .lc-check path{
  stroke:#ffd24d; stroke-width:8; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:60; stroke-dashoffset:60; animation:lc-draw .8s cubic-bezier(.2,.9,.2,1) forwards .25s;
}
@keyframes lc-draw{to{stroke-dashoffset:0}}

/* -----------------------------------------------------------
   CTA AREA — dua tombol seragam ukuran
   - Desktop/tablet: sejajar & sama lebar
   - ≤421px: menumpuk, full-width
   ----------------------------------------------------------- */
.lc-neo-modal .lc-neo-cta{
  display:flex;
  gap:12px;
  margin-top:.25rem;
}

/* samakan perilaku kedua tombol */
.lc-neo-modal .lc-neo-cta .btn{
  display:flex;                   /* jangan inline-block */
  align-items:center;
  justify-content:center;
  flex:1 1 0;                     /* bagi rata lebar */
  min-width:0;                    /* cegah overflow */
  padding:.70rem 1rem;            /* tinggi konsisten */
  line-height:1.2;
  border-radius:.6rem;
  font-weight:700;
  white-space:nowrap;
}
.lc-neo-modal .lc-neo-cta .btn i{ margin-right:.5rem }

/* Primary & Ghost styles */
.lc-neo-modal .lc-btn-primary{
  color:#1b1e22;
  background:linear-gradient(90deg,#ffe082,#ffc107);
  border:0;
  font-weight: 700;
  box-shadow:0 8px 22px rgba(255,193,7,.25);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.lc-neo-modal .lc-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(255,193,7,.32);
  filter:saturate(1.08);
}
.lc-neo-modal .lc-btn-ghost{
  color:#e9ecef;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.18);
}

/* Stack & full-width di layar sempit */
@media (max-width:421px){
  .lc-neo-modal .lc-neo-cta{ flex-direction:column; }
  .lc-neo-modal .lc-neo-cta .btn{
    width:100%;
    flex:0 0 auto;               /* jangan dibagi rata saat ditumpuk */
  }
}

/* Slide-up masuk modal */
.lc-neo-modal.lc-animate .modal-dialog{
  animation:lc-slide-up .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes lc-slide-up{
  from{ transform:translate3d(0,18px,0); opacity:.0 }
  to  { transform:none; opacity:1 }
}

/* Mini confetti (emoji) */
.lc-neo-modal .lc-confetti{
  position:absolute; inset:0; pointer-events:none; z-index:1;
}
.lc-neo-modal .lc-confetti span{
  position:absolute; top:20px; left:50%;
  font-size:30px; opacity:0; transform:translateX(-50%) translateY(0);
  animation:lc-burst .9s ease-out forwards;
}
.lc-neo-modal .lc-confetti span:nth-child(2){ left:38%; animation-delay:.05s }
.lc-neo-modal .lc-confetti span:nth-child(3){ left:62%; animation-delay:.1s }
@keyframes lc-burst{
  0%{opacity:0; transform:translateX(-50%) translateY(0) scale(.8)}
  40%{opacity:1}
  100%{opacity:0; transform:translateX(var(--x, -120%)) translateY(-28px) rotate(12deg) scale(1)}
}

/* ===== LC User Panel (desktop) ===== */
.lcup .lcup-card{
  display:flex; align-items:center; gap:16px;
  padding:8px 12px;
  background: linear-gradient(180deg,#1b1f24 0%, #222832 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}
.lcup-avatar{
  width:34px; height:34px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#2a3340; color:#fff; font-size:14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.lcup-name{
  color:#eaeef4; font-weight:700; line-height:1.1;
  display:flex; align-items:center; gap:6px;
}
.lcup-dot{
  width:8px; height:8px; border-radius:50%;
  background: #22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18);
}
.lcup-balance{
  margin-top:2px;
  font-size:.9rem; color:#bfe8c8;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.28);
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:999px;
}
.lcup-refresh{
  border:0; outline:0; background:transparent; color:#bfe8c8; line-height:0;
  padding:0; cursor:pointer; opacity:.9; transition:opacity .2s ease;
}
.lcup-refresh:hover{ opacity:1; }
.lcup-refresh.is-spinning i{ animation: lcup-spin .8s linear infinite; }
@keyframes lcup-spin{ to{ transform: rotate(360deg);} }

.lcup-actions .btn{
  --lcup-h:32px;
  height:var(--lcup-h); line-height:var(--lcup-h);
  padding:.25rem .7rem; border-radius:10px; font-weight:700;
}
.lcup-actions .btn + .btn, .lcup-actions .btn + form{ margin-left:.35rem; }
.lcup-actions form .btn{ height:var(--lcup-h); line-height:var(--lcup-h); }

/* Hover halus */
.lcup-actions .btn-warning:hover{ filter: brightness(1.05); }
.lcup-actions .btn-primary:hover{ filter: brightness(1.05); }
.lcup-actions .btn-outline-light:hover{ background:#fff; color:#111; }
.lcup-actions .btn-outline-danger:hover{ background:#dc3545; color:#fff; }


/* ===========================================================
   LC User Toolbar v2 
   =========================================================== */

.lcupx-toolbar-wrapper{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  max-width:100%;
  padding-right:8px;           
  overflow:hidden;
  box-sizing:border-box;
}

/* Batang toolbar */
.lcupx-toolbar{
  display:inline-flex;
  align-items:center;
  gap:8px;                     
  height:30px;
  padding:4px 6px;
  background:linear-gradient(180deg,#1e232a 0%, #171a1f 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  white-space:nowrap;
  flex-wrap:nowrap;
  box-sizing:border-box;

  /* muat isi, tapi jangan lebih lebar dari parent */
  width:max-content;
  max-width:min(600px, calc(100% - 12px)); 
  overflow:hidden;
}

/* ===== KIRI: avatar + nama + saldo ===== */
.lcupx-left{
  display:flex; align-items:center; gap:8px;
  flex:1 1 auto;               
  min-width:0;                 
}

.lcupx-avatar{
  position:relative; width:24px; height:24px; border-radius:999px;
  background:linear-gradient(180deg,#2b333c,#1b2128);
  display:grid; place-items:center; color:#a6b0bf; font-size:11px;
  border:1px solid rgba(255,255,255,.06);
}
.lcupx-online-dot{
  position:absolute; right:-1px; top:-1px; width:9px; height:9px; border-radius:999px;
  background:#22c55e; box-shadow:0 0 0 2px #171a1f;
}

.lcupx-ident{ display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden }
.lcupx-username{
  color:#e7ebf0; font-size:12px; font-weight:600;
  max-width:120px; overflow:hidden; text-overflow:ellipsis;
}

.lcupx-balance{
  height:22px; display:inline-flex; align-items:center; gap:6px;
  padding:0 8px; border-radius:999px; line-height:1;
  background:linear-gradient(180deg,#12161c,#0c0f13);
  border:1px solid rgba(255,255,255,.08); color:#e7ebf0; font-size:12px;
  flex:0 0 auto;               
}
.lcupx-balance-refresh{
  display:inline-flex; margin-left:4px; width:16px; height:16px; border-radius:50%;
  align-items:center; justify-content:center; background:rgba(255,255,255,.06);
  color:#a6b0bf; font-size:10px;
}
#lcupxBalanceBtn:hover .lcupx-balance-refresh{
  animation:lcupx-spin .8s linear infinite; color:#e7ebf0; background:rgba(255,255,255,.12);
}
@keyframes lcupx-spin{ to{ transform:rotate(360deg) } }

/* ===== KANAN: tombol (tidak boleh hilang) ===== */
.lcupx-actions{
  display:flex; align-items:center; gap:8px;
  flex:0 0 auto;              
  margin-left:6px;
}
.lcupx-btn{
  height:26px; display:inline-flex; align-items:center; gap:8px;
  padding:0 12px; border-radius:10px; font-weight:700; font-size:13px; line-height:1;
  border:1px solid transparent; text-decoration:none; white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.lcupx-btn i{ font-size:13px }

/* warna tombol */
.lcupx-btn--gold   { color:#0d0b00; background:linear-gradient(180deg,#f6c003 0%,#cc8f00 100%); border-color:#b98100 }
.lcupx-btn--gold:hover{ filter:brightness(1.06) }
.lcupx-btn--blue   { color:#fff; background:linear-gradient(180deg,#2f6df6 0%,#1f58d9 100%); border-color:#1e4dc0 }
.lcupx-btn--blue:hover{ filter:brightness(1.06) }
.lcupx-btn--ghost  { color:#e7ebf0; background:#2a2f36; border-color:#3a4049 }
.lcupx-btn--ghost:hover{ background:#333942 }
.lcupx-btn--danger { color:#fff; background:linear-gradient(180deg,#e94545 0%,#c72f2f 100%); border-color:#b72a2a }
.lcupx-btn--danger:hover{ filter:brightness(1.05) }

/* ===== Mode ringkas otomatis saat ruang ketat ===== */
@media (max-width:1320px){
  .lcupx-toolbar{ max-width:min(560px, calc(100% - 12px)); gap:6px }
  .lcupx-username{ max-width:90px }
  .lcupx-btn{ padding:0 10px; font-size:12px }
}
@media (max-width:1200px){
  .lcupx-toolbar{ max-width:min(520px, calc(100% - 12px)) }
  .lcupx-actions{ gap:6px }
  .lcupx-actions .lcupx-btn span{ display:none }  
  .lcupx-btn{ padding:0 10px }
}
@media (max-width:1100px){
  .lcupx-toolbar{ max-width:min(480px, calc(100% - 12px)) }
  .lcupx-username{ display:none }                  
}
/* --- FIX: jangan kepotong di kanan --- */
.lcupx-toolbar-wrapper{
  overflow: visible;        
  padding-right: 8px;
}

.lcupx-toolbar{
  width: max-content;       
  max-width: none;          
  overflow: visible;        
}

/* jaga-jaga kalau parent punya overflow:hidden */
.navbar-login,
.navbar-login .container{
  overflow: visible !important;
}

/* tombol tetap satu baris, tidak dibungkus */
.lcupx-actions{ flex-wrap: nowrap; }


/* =========================
   LC Engine — Cashier & Transactions
   ========================= */

/* Card wrapper (ikut lebar .container) */
.lc-card{
  background:#1d232b;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  margin:18px auto;
  width:100%;
}
.lc-card__header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;
}
.lc-title-trx{font-weight:800;color:#fff;font-size:32px;line-height:1.15;margin-bottom:2px}
.lc-sub{color:#9aa4af}

/* Panel (isi dalam card) */
.lc-panel{
  background:#2b333d;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.lc-panel + .lc-panel{margin-top:14px}

/* Stats */
.lc-stat__label{color:#c8d1dc;font-size:.95rem}
.lc-stat__value{font-size:1.8rem;font-weight:900;letter-spacing:.2px}

/* Tabs */
.lc-tabs{
  display:inline-flex;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  background:#222a33;
}
.lc-tab{
  padding:10px 16px;
  color:#c9d3df;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
}
.lc-tab:hover{filter:brightness(1.05)}
.lc-tab.active{background:#1b2128;color:#fff}

/* Form: input/textarea */
.lc-form .form-label{color:#cbd5e1;font-weight:700}
.lc-input{
  background:#1f262e;
  color:#e6edf5;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:.55rem .8rem;
  box-shadow:none;
}
.lc-input:focus{
  outline:0;
  border-color:#ffd34d;
  box-shadow:0 0 0 3px rgba(255,211,77,.2);
}
.lc-input::placeholder{color:#9aa4af}
.lc-file{
  background:#1f262e;color:#e6edf5;border:1px dashed rgba(255,255,255,.25);border-radius:12px;
}
.lc-note{color:#91a5be;font-size:.85rem}

/* Deposit methods (radio pills) — hanya 2 opsi */
.lc-methods{display:flex;gap:8px;flex-wrap:wrap}
.lc-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  background:#0f1419;border:1px solid rgba(255,255,255,.14);color:#ced6e0;font-weight:700}
.lc-pill input{appearance:none;width:14px;height:14px;border-radius:50%;border:2px solid #ffd34d;box-shadow:inset 0 0 0 3px #0f1419}
.lc-pill input:checked{background:#ffd34d}
.lc-pill:hover{filter:brightness(1.07)}

/* Select (dropdown) */
.lc-select{
  background:#1f262e;color:#e6edf5;border:1px solid rgba(255,255,255,.12);border-radius:12px;
  padding:.55rem 2.2rem .55rem .8rem;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23ffd34d'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right .6rem center;background-size:18px 18px
}
.lc-select:focus{outline:0;border-color:#ffd34d;box-shadow:0 0 0 3px rgba(255,211,77,.25)}

/* Tabel transaksi */
.lc-table th{color:#cbd5e1;font-weight:800;border-color:rgba(255,255,255,.12)!important}
.lc-table td{border-color:rgba(255,255,255,.06)!important}

/* Alerts */
.lc-alert{border-radius:12px;padding:.75rem 1rem;font-weight:600;margin:.5rem 0}
.lc-alert--success{background:rgba(59,179,99,.15);border:1px solid rgba(59,179,99,.35);color:#9de0b9}
.lc-alert--danger{background:rgba(220,53,69,.12);border:1px solid rgba(220,53,69,.35);color:#ffb0b8}

/* Gold Buttons (gradient + shimmer) */
.btn-gold{
  background-image:linear-gradient(180deg,#ffe08a,#ffbe2e);
  border:1px solid #e7b32b;
  color:#1a1f26;
  font-weight:900;letter-spacing:.2px;
  position:relative;overflow:hidden;
  box-shadow:0 8px 18px rgba(255,190,46,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-gold::after{
  content:"";position:absolute;top:-120%;left:-60%;width:60%;height:300%;transform:rotate(25deg);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  animation:btnShine 2.6s ease-in-out infinite;
}
@keyframes btnShine{0%{left:-60%}100%{left:140%}}
.btn-gold:hover{filter:brightness(1.02);transform:translateY(-1px)}
.btn-gold:active{transform:translateY(0)}
.btn-gold:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(255,211,77,.35),0 8px 18px rgba(255,190,46,.28)}
.btn-gold-outline{
  background:transparent;color:#ffd34d;border:1px solid #ffd34d;font-weight:800;border-radius:999px
}
.btn-gold-outline:hover{background:rgba(255,211,77,.08);color:#ffe18a;border-color:#ffe18a}
.btn-pill{border-radius:999px}
.btn-icon i{margin-right:.45rem}

/* Badges lembut */
.badge.bg-secondary-subtle{background:rgba(255,255,255,.12);color:#d1dae4}
.badge.bg-info-subtle{background:rgba(70,161,255,.18);color:#a8d2ff}

/* Mobile */
@media (max-width:576px){
  .lc-title-trx{font-size:26px}
  .lc-card{padding:14px}
  .lc-panel{padding:14px}
  .lc-tab{flex:1 1 50%;text-align:center}
  .lc-card__header{flex-direction:column;align-items:flex-start;gap:10px}
}



/* ===============================
   lce-nologin (desktop prompt)
   =============================== */

/* Kartu modal */
.lce-nologin .lce-nl-card{
  background:#0e1217;                 /* background gelap */
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.50);
}

/* Header: gradient KUNING + animasi flow */
.lce-nologin .lce-nl-header{
  padding:1.25rem;
  background:linear-gradient(90deg,#ffe27a 0%,#ffc107 35%,#ffb300 70%,#ffe27a 100%);
  background-size:220% 100%;
  animation:lce-nl-goldFlow 6s linear infinite;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
}
@keyframes lce-nl-goldFlow{
  0%{ background-position:0% 50%; }
  100%{ background-position:100% 50%; }
}
/* Warna teks header tidak putih */
.lce-nologin .lce-nl-header .lce-nl-title,
.lce-nologin .lce-nl-header .lce-nl-subtitle{ color:#333; }

/* Icon bubble */
.lce-nologin .lce-nl-iconbox{
  width:44px;height:44px;border-radius:12px;
  background:rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
}

/* Body list */
.lce-nologin .modal-body{ color:#fff; }
.lce-nologin .lce-nl-list{
  margin:0 0 1rem 0;
  padding-left:1.25rem;
  line-height:1.6;
}
.lce-nologin .lce-nl-list li{ margin:.25rem 0; }

/* Tombol OK: gradient KUNING + shimmer */
.lce-nologin .lce-nl-btn{
  position:relative; overflow:hidden;
  background:linear-gradient(90deg,#ffe27a 0%,#ffc107 40%,#ffb300 70%,#ffe27a 100%);
  background-size:220% 100%;
  color:#1a1a1a; border:0; border-radius:.6rem;
  padding:.7rem 1.1rem; font-weight:800;
  box-shadow:0 10px 18px rgba(255,193,7,.25), inset 0 -2px 0 rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  animation:lce-nl-goldFlow 3s linear infinite;      /* flow halus */
}
.lce-nologin .lce-nl-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(255,193,7,.32), inset 0 -2px 0 rgba(0,0,0,.22);
  filter:brightness(1.03);
}
.lce-nologin .lce-nl-btn:active{ transform:translateY(0); }

/* Shimmer kilau berjalan */
.lce-nologin .lce-nl-btn::after{
  content:""; position:absolute; top:0; left:-160%;
  width:55%; height:100%;
  background:linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.45) 45%,
    rgba(255,255,255,0) 70%);
  transform:skewX(-18deg);
  animation:lce-nl-shimmer 2.2s infinite;
}
@keyframes lce-nl-shimmer{
  0%{ left:-160%; } 100%{ left:200%; }
}

/* Responsif kecil: rapikan padding */
@media (max-width:575.98px){
  .lce-nologin .lce-nl-header{ padding:1rem; }
  .lce-nologin .lce-nl-btn{ width:100%; }
}

/* =========================
   LCE Referral — match Wallet/Transactions
   (prefix: lce-referral-*)
   ========================= */

/* Card wrapper (ikut .container) */
.lce-referral-card{
  background:#1d232b;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  margin:18px auto;
  width:100%;
}
.lce-referral-card__header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;
}
.lce-referral-title{font-weight:800;color:#fff;font-size:32px;line-height:1.15;margin:0 0 2px}
.lce-referral-sub{color:#9aa4af;margin:0}

/* Panel isi di dalam card */
.lce-referral-panel{
  background:#2b333d;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.lce-referral-panel + .lce-referral-panel{margin-top:14px}

/* Grid kolom */
.lce-referral-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:768px){.lce-referral-grid2{grid-template-columns:1fr}}

/* Tabs (ikuti lc-tabs) */
.lce-referral-tabs{
  display:inline-flex;border:1px solid rgba(255,255,255,.08);
  border-radius:12px;overflow:hidden;background:#222a33;margin-top:16px
}
.lce-referral-tab{
  padding:10px 16px;color:#c9d3df;text-decoration:none;font-weight:700;letter-spacing:.2px;
  background:transparent;border:0;cursor:pointer
}
.lce-referral-tab:hover{filter:brightness(1.05)}
.lce-referral-tab.active{background:#1b2128;color:#fff}

/* Form */
.lce-referral-form .form-label{color:#cbd5e1;font-weight:700;margin-bottom:6px;display:block}
.lce-referral-input{
  background:#1f262e;color:#e6edf5;border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:.55rem .8rem;box-shadow:none;width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.lce-referral-input:focus{
  outline:0;border-color:#ffd34d;box-shadow:0 0 0 3px rgba(255,211,77,.2);
}
.lce-referral-input::placeholder{color:#9aa4af}
.lce-referral-input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(85%) opacity(.85)}
.lce-referral-file{background:#1f262e;color:#e6edf5;border:1px dashed rgba(255,255,255,.25);border-radius:12px}

/* Notes & alerts */
.lce-referral-note{color:#91a5be;font-size:.85rem;margin-top:8px}
.lce-referral-alert{border-radius:12px;padding:.75rem 1rem;font-weight:600;margin:.5rem 0}
.lce-referral-alert.success{background:rgba(59,179,99,.15);border:1px solid rgba(59,179,99,.35);color:#9de0b9}
.lce-referral-alert.error{background:rgba(220,53,69,.12);border:1px solid rgba(220,53,69,.35);color:#ffb0b8}

/* Share pills (ikut lc-pill) */
.lce-referral-share{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.lce-referral-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  background:#0f1419;border:1px solid rgba(255,255,255,.14);color:#ced6e0;font-weight:700;text-decoration:none}
.lce-referral-pill:hover{filter:brightness(1.07)}

/* Tabel-like list */
.lce-referral-list{margin:0;padding:0;list-style:none}
.lce-referral-list li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.lce-referral-muted{color:#9aa4af}

/* Badges status */
.lce-referral-status{border-radius:999px;padding:.4rem .8rem;font-weight:800}
.lce-referral-status--subtle{background:rgba(255,255,255,.12);color:#d1dae4}
.lce-referral-status--danger{background:rgba(220,53,69,.12);border:1px solid rgba(220,53,69,.35);color:#ffb0b8}
.lce-referral-status--info{background:rgba(70,161,255,.18);color:#a8d2ff}

/* Buttons – GOLD (persis wallet) */
.lce-referral-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid transparent;padding:.6rem 1rem;font-weight:900;letter-spacing:.2px;position:relative;overflow:hidden;text-decoration:none;cursor:pointer}
.lce-referral-btn--gold{
  background-image:linear-gradient(180deg,#ffe08a,#ffbe2e);
  border:1px solid #e7b32b;color:#1a1f26;
  box-shadow:0 8px 18px rgba(255,190,46,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.lce-referral-btn--gold::after{
  content:"";position:absolute;top:-120%;left:-60%;width:60%;height:300%;transform:rotate(25deg);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  animation:lceRefBtnShine 2.6s ease-in-out infinite;
}
@keyframes lceRefBtnShine{0%{left:-60%}100%{left:140%}}
.lce-referral-btn--gold:hover{filter:brightness(1.02);transform:translateY(-1px)}
.lce-referral-btn--gold:active{transform:translateY(0)}
.lce-referral-btn--gold:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(255,211,77,.35),0 8px 18px rgba(255,190,46,.28)}
.lce-referral-btn--gold-outline{
  background:transparent;color:#ffd34d;border:1px solid #ffd34d;font-weight:800;border-radius:999px
}
.lce-referral-btn--gold-outline:hover{background:rgba(255,211,77,.08);color:#ffe18a;border-color:#ffe18a}
.lce-referral-btn--pill{border-radius:999px}

/* Mobile tweak */
@media (max-width:576px){
  .lce-referral-title{font-size:26px}
  .lce-referral-card{padding:14px}
  .lce-referral-panel{padding:14px}
  .lce-referral-tab{flex:1 1 50%;text-align:center}
  .lce-referral-card__header{flex-direction:column;align-items:flex-start;gap:10px}
}