/* =========================================================================
   RANKPOP.CSS — 18 Sep 2026 (kode 248)
   1. Deret medali Rank 1-5 dirapatkan & dipresisikan ke tengah
      (jiplak konten.com: medali 53px, jarak antar-medali 3px, kolom 56px).
   2. Popup rank dirapikan supaya simetris kiri-kanan.
   Dimuat PALING AKHIR supaya menang atas app.css & rankfix.css.
   ========================================================================= */

/* ---------- 1. DERET MEDALI RANK 1-5 ---------- */
body[data-path="/clipper/rank"] .rank-track{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  width:100% !important;
  padding:0 !important;
  overflow:visible !important;
}

/* baris medali: rapat + di tengah, bukan space-between selebar kartu */
body[data-path="/clipper/rank"] .rank-track-line{
  width:auto !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:3px !important;
  margin:0 auto !important;
}
body[data-path="/clipper/rank"] .rank-track-line::before{ display:none !important; }

body[data-path="/clipper/rank"] .rank-track-line i,
body[data-path="/clipper/rank"] .rank-track-line i.active{
  width:53px !important;
  height:53px !important;
  flex:0 0 53px !important;
  margin:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:transform .15s ease;
}
body[data-path="/clipper/rank"] .rank-track-line i:hover{ transform:translateY(-2px) scale(1.06); }
body[data-path="/clipper/rank"] .rank-track-line i:focus-visible{
  outline:2px solid #ff2e6a; outline-offset:2px; border-radius:10px;
}
body[data-path="/clipper/rank"] .rank-track-line i img{
  display:block !important;
  width:100% !important; height:100% !important;
  object-fit:contain !important;
}

/* label di bawah medali: kolom selebar medali, sejajar persis di tengahnya */
body[data-path="/clipper/rank"] .rank-track-labels{
  width:auto !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:3px !important;
  margin:2px auto 0 !important;
  grid-template-columns:none !important;
}
body[data-path="/clipper/rank"] .rank-track-labels article{
  width:53px !important;
  flex:0 0 53px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  cursor:pointer;
}
body[data-path="/clipper/rank"] .rank-track-labels article span{
  display:block !important;
  white-space:nowrap !important;
}

/* ---------- 2. POPUP RANK: SIMETRIS ---------- */
dialog.rank-modal-dialog[open]{
  width:min(420px, calc(100vw - 32px)) !important;
  max-width:min(420px, calc(100vw - 32px)) !important;
  margin:auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:16px !important;
  background:transparent !important;
  overflow:visible !important;
  max-height:90vh !important;
}
dialog.rank-modal-dialog::backdrop{
  background:rgba(0,0,0,.72) !important;
  backdrop-filter:blur(4px) !important;
}

.rank-modal-box{
  box-sizing:border-box !important;
  width:100% !important;
  /* padding kiri = kanan persis, atas = bawah persis */
  padding:32px 24px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:0 !important;
  max-height:90vh !important;
  overflow-y:auto !important;
  border:1px solid #22222c !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,#0a0a0e 0%,#0c0c11 100%) !important;
  text-align:left !important;
}
.rank-modal-box::-webkit-scrollbar{ display:none !important; }

/* tombol tutup: jarak sama dari tepi atas & kanan */
.rank-modal-close{
  position:absolute !important;
  top:14px !important; right:14px !important;
  width:28px !important; height:28px !important;
  display:grid !important; place-items:center !important;
  padding:0 !important; border:0 !important; border-radius:8px !important;
  background:transparent !important; color:#b8b8b8 !important;
  font-size:20px !important; line-height:1 !important; cursor:pointer;
}
.rank-modal-close:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }

/* kepala: medali + judul, semua center */
.rank-modal-head{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; text-align:center !important;
  gap:12px !important; width:100% !important; margin:0 0 10px !important;
}
.rank-modal-badge{
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:100% !important; height:auto !important; margin:0 !important;
}
.rank-modal-badge img{
  width:auto !important; height:112px !important; max-width:100% !important;
  object-fit:contain !important;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.6)) !important;
}
.rank-modal-titles{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; gap:3px !important; width:100% !important;
}
.rank-modal-titles span{ font-size:13px !important; color:#a1a1aa !important; }
.rank-modal-titles strong{ font-size:23px !important; font-weight:700 !important; color:#fff !important; }

/* blok bonus: center, sama seperti referensi */
.rank-modal-bonus[style*="none"]{ display:none !important; }
.rank-modal-bonus:not([style*="none"]){
  width:100% !important; text-align:center !important;
  margin:0 0 4px !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; gap:2px !important;
}
.rank-modal-bonus span{ font-size:20px !important; font-weight:600 !important; }
.rank-modal-bonus small{ font-size:13px !important; color:#a1a1aa !important; }

.rank-modal-hr{ width:100% !important; height:1px !important; background:#22222c !important; margin:16px 0 !important; }

.rank-modal-section-title{
  width:100% !important; text-align:left !important;
  font-size:14px !important; font-weight:600 !important; color:#fff !important;
  margin:0 0 12px !important;
}

.rank-modal-benefits{
  width:100% !important; display:flex !important; flex-direction:column !important; gap:11px !important;
}
.rank-benefit-item{
  display:flex !important; align-items:flex-start !important; gap:10px !important;
  font-size:13px !important; line-height:1.45 !important; color:#e4e4e7 !important;
}
.rank-benefit-icon{
  flex:0 0 18px !important; width:18px !important; height:18px !important; margin-top:1px !important;
  border-radius:50% !important; display:grid !important; place-items:center !important;
  font-size:11px !important; background:#22c55e !important; color:#000 !important;
}

/* kotak syarat: padding seragam, lebar penuh */
.rank-modal-syarat-wrap[style*="none"]{ display:none !important; }
.rank-modal-syarat-wrap:not([style*="none"]){
  box-sizing:border-box !important;
  width:100% !important;
  margin:18px 0 0 !important;
  padding:16px !important;
  display:flex !important; flex-direction:column !important; gap:14px !important;
  border:1px solid #22222c !important; border-radius:14px !important;
  background:#0a0a0e !important;
}
.rank-modal-syarat-wrap .rank-modal-section-title{ margin:0 !important; }
.rank-modal-syarat-list{ width:100% !important; display:flex !important; flex-direction:column !important; gap:16px !important; }
.rank-syarat-item{ display:flex !important; align-items:flex-start !important; gap:12px !important; }
.rank-syarat-content{ flex:1 1 auto !important; min-width:0 !important; display:flex !important; flex-direction:column !important; gap:6px !important; }
.rank-syarat-header{ display:flex !important; justify-content:space-between !important; align-items:center !important; gap:10px !important; }
.rank-syarat-bar{ width:100% !important; height:6px !important; border-radius:999px !important; overflow:hidden !important; background:#1b1b24 !important; }
.rank-syarat-btn{ align-self:flex-start !important; }

/* ---------- 3. KARTU "TOTAL VIEWS" (analitik) ----------
   Perintah Arip 18 Sep 2026: ikon mata SEWARNA teks "Total Views",
   ikon "i" dihapus (sudah dari template), jarak ikon->teks dilonggarkan. */
body[data-path="/clipper/analytics"] .analytics-stats .analytics-main-stat span{
  gap:9px !important;
  align-items:center !important;
}
body[data-path="/clipper/analytics"] .analytics-stats .analytics-main-stat span > svg{
  stroke:currentColor !important;
  fill:none !important;
  color:inherit !important;
}

/* ---------- 4. KARTU "TOTAL PENDAPATAN" (pendapatan) ----------
   Perintah Arip 18 Sep 2026: angka Rp jadi PUTIH, ukuran dikecilkan, dirapikan. */
body[data-path="/clipper/earnings"] .earning-stats > .earning-main{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:10px !important;
}
body[data-path="/clipper/earnings"] .earning-stats > .earning-main .earning-main-label{
  font-size:14px !important;
  line-height:20px !important;
  color:#bbb !important;
  gap:8px !important;
}
body[data-path="/clipper/earnings"] .earning-stats > .earning-main strong{
  display:block !important;
  font-size:34px !important;
  line-height:40px !important;
  font-weight:700 !important;
  letter-spacing:-.6px !important;
  color:#ffffff !important;
  white-space:nowrap !important;
}

/* ---------- 5. LOGO SIDEBAR: dikecilkan, presisi dengan wordmark ----------
   Perintah Arip 18 Sep 2026: ikon cuma sedikit lebih besar dari teks.
   Teks 'clypora' font 20px (kotak baris 20px) -> ikon 24px = +20%, bukan 34px. */
body:has(.app-main) .sidebar .brand .brand-mark,
.sidebar .brand .brand-mark,
.brand .brand-mark{
  width:24px !important;
  height:24px !important;
  flex:0 0 24px !important;
  margin:0 !important;
  object-fit:contain !important;
}
body:has(.app-main) .sidebar .brand,
.sidebar .brand{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
}
.sidebar .brand .brand-word,
.brand .brand-word{
  font-size:19px !important;
  line-height:1 !important;
}


/* ---------- 6. HALAMAN PENDAPATAN: disamakan dengan konten.com ----------
   Ukuran referensi (CDP 9227, /clipper-earnings, viewport 393x852):
     judul "Pendapatan"  y_halaman = 104   (Clypora tadinya 181)
     tombol Withdraw     y_halaman = 101   (Clypora tadinya 175)
     kartu utama 361x176, pad 24px 20px, flex column SPACE-BETWEEN
        label "Total Pendapatan" y = 24    (Clypora tadinya 53)
        angka Rp                 y = 120   (Clypora tadinya 83), font 28px
     kartu kecil 176x89, pad 12px, label y=13, angka y=60
   ---------------------------------------------------------------- */
@media(max-width:900px){
  body[data-path="/clipper/earnings"] .app-main{
    padding-top:24px !important;   /* was 101px -> judul naik mepet topbar seperti ref */
  }
}

/* kartu utama: label naik ke atas, angka turun ke bawah */
body[data-path="/clipper/earnings"] .earning-stats > .earning-main{
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:0 !important;
  padding:24px 20px !important;
  height:176px !important;
}
body[data-path="/clipper/earnings"] .earning-stats > .earning-main .earning-main-label{
  margin:0 !important;
  flex:0 0 auto !important;
}
body[data-path="/clipper/earnings"] .earning-stats > .earning-main strong{
  margin:0 !important;
  font-size:28px !important;
  line-height:34px !important;
  font-weight:700 !important;
  letter-spacing:-.4px !important;
  color:#ffffff !important;
}

/* kartu kecil: tinggi & padding ikut referensi */
body[data-path="/clipper/earnings"] .earning-stats > article:not(.earning-main){
  height:89px !important;
  padding:12px !important;
  justify-content:space-between !important;
}
body[data-path="/clipper/earnings"] .earning-stats > article:not(.earning-main) strong{
  font-size:18px !important;
  line-height:24px !important;
}


/* ---------- 7. ANALITIK: angka besar Total Views jadi PUTIH ----------
   Perintah Arip 18 Sep 2026: HANYA angkanya; label "Views" di bawahnya
   tetap pink, angka kartu kecil tidak disentuh. */
body[data-path="/clipper/analytics"] .analytics-stats .analytics-main-stat > strong{
  color:#ffffff !important;
}


/* =========================================================================
   8. DASHBOARD BRAND — disamakan dengan dashboard clipper (19 Sep 2026, 248)
   Temuan live sebelum perbaikan:
     - tab aktif brand  : bg rgb(40,41,61) kebiruan  vs clipper: transparan+putih
     - teks sekunder    : rgb(143,155,184) kebiruan  vs clipper: netral
     - "Export Report" / "Refund via Admin": bg #121218 datar, belum ikut palet
     - kartu brand radius 14px vs clipper 12px
   ========================================================================= */

/* --- tab / pill aktif: samakan gaya clipper (garis bawah, bukan blok biru) --- */
body:has(.app-main) .tabs button.active,
body:has(.app-main) .seg button.active,
body:has(.app-main) [class*=tab] button.active,
body:has(.app-main) button[class*=tab].active{
  background:linear-gradient(105deg,rgba(255,4,62,.22),rgba(114,2,255,.12)) !important;
  color:#fff !important;
  border-color:rgba(255,4,62,.42) !important;
}

/* --- tombol sekunder (outline) brand: ikut aksen logo, bukan abu datar --- */
body:has(.app-main) .btn.secondary,
body:has(.app-main) button.ghost,
body:has(.app-main) .btn-outline{
  background:#121218 !important;
  border:1px solid #3a2030 !important;
  color:#ff7fb0 !important;
}
body:has(.app-main) .btn.secondary:hover,
body:has(.app-main) button.ghost:hover,
body:has(.app-main) .btn-outline:hover{
  border-color:#ff2e6a !important;
  background:#1a0d18 !important;
}

/* --- kartu brand: radius seragam 12px seperti clipper --- */
body[data-path^="/brand/"] main article,
body[data-path^="/brand/"] main .card{
  border-radius:12px !important;
}

/* --- ikon nav non-aktif: netral, tidak kebiruan --- */
body:has(.app-main) .sidebar nav a svg{ color:#a09aa8 !important; }
body:has(.app-main) .sidebar nav a.active svg{ color:#fff !important; }


/* ---------- 9. DIALOG: posisi simetris di tengah layar ----------
   Temuan live 19 Sep 2026 (kode 248):
     #withdraw-dialog dan #payment-dialog di /clipper/earnings melekat ke
     pojok kiri-atas: kiri=0 kanan=38 atas=0 bawah=476 -> tidak simetris.
     Penyebab: <dialog> default memakai margin:auto hanya kalau tidak
     ditimpa; aturan lama menyetel width tanpa inset/margin.
   Perbaikan: semua dialog dipusatkan presisi, sisa kiri=kanan, atas=bawah. */
dialog#withdraw-dialog[open],
dialog#payment-dialog[open],
body:has(.app-main) dialog:not(.rank-modal-dialog):not(#topup-dialog):not(.learning-dialog)[open]{
  position:fixed !important;
  inset:0 !important;
  margin:auto !important;
  width:min(360px, calc(100vw - 32px)) !important;
  max-width:min(360px, calc(100vw - 32px)) !important;
  max-height:calc(100vh - 48px) !important;
  border-radius:14px !important;
}