/* 01. IMPORT - Font khusus untuk identitas visual.
   Penggunaan: class="fo-caption fo-label fo-title fo-subtitle fo-desc fo-help" */
@import url('https://fonts.googleapis.com/css2?family=Athiti:wght@200;300;400;500;600;700&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Eagle+Lake&family=Inconsolata:wght@200..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* ==========================================================================
   URUTAN PRIORITAS CSS SUKSES58
   01. Import
   02. :root / design tokens
   03. bg-* / theme surface tokens
   04. typography dan utility dasar
   05. shell / layout global
   06. komponen (Tiles, Widget, POD, Tree, dan fitur halaman)
   07. responsive per komponen
   08. compatibility / final bridge hanya jika membutuhkan prioritas cascade
   Catatan: token tidak boleh didefinisikan ulang di bagian patch/final.
   ========================================================================== */
/* ==========================================================================
   RESPONSIVE POLICY
   Default / Full : >= 1280px
   Mobile + Tablet: <= 1279px
   Tidak ada breakpoint tablet terpisah; ukuran dalam mode mobile dapat fluid
   memakai clamp(), min(), max(), atau vw tanpa membuat mode responsive baru.
   ========================================================================== */
 /* 02. ROOT / DESIGN TOKENS - Token custom memakai prefix --ui-* agar terpisah dari --bs-* Bootstrap.
   Penggunaan: otomatis. */
:root {
    --ui-font-caption: "Bodoni Moda", serif;
    --ui-font-label: "Eagle Lake", serif;
    --ui-font-title: "Poppins", sans-serif;
    --ui-font-subtitle: "Courier New", Courier, monospace;
    --ui-font-body: "Athiti", sans-serif;
    --ui-font-help: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --ui-font-number: "Inconsolata", monospace;
    --ui-root-font-size: 12px;
    --s88-topbar-height: 72px;
    --s88-sidenav-width: 240px;
    --s88-shell-border: #dce3ea;
    --s88-shell-text: #334155;
    --s88-shell-muted: #64748b;
    --s88-shell-surface: #ffffff;
    --ui-text-light: rgba(240, 240, 250, 1);
    --ui-text-dark: rgba(20, 20, 40, 1);
    --ui-text-muted: rgba(180, 180, 200, 1);
    --ui-white-rgb: 250, 250, 250;
    --ui-dark-rgb: 20, 20, 20;
    --ui-border-light: rgba(250, 250, 250, .35);
    --ui-border-dark: rgba(20, 20, 50, .35);
    --ui-border-strong: rgba(20, 20, 50, .55);
    --ui-radius-sm: 6px;
    --ui-radius-md: 10px;
    --ui-radius-lg: 14px;
    --ui-radius-xl: 18px;
    --S58-global-gold: #d39a2c;
    --ui-gradient-light: linear-gradient(
        50deg,
        rgba(220, 220, 220, .40) 0%,
        rgba(200, 200, 200, .70) 30%,
        rgba(250, 250, 250, .40) 40%,
        rgba(170, 170, 170, .60) 70%,
        rgba(240, 240, 240, .50) 100%
    );
    --ui-gradient-dark: linear-gradient(
        50deg,
        rgba(20, 20, 20, .40) 0%,
        rgba(40, 40, 40, .70) 30%,
        rgba(20, 20, 20, .40) 50%,
        rgba(50, 50, 50, .60) 70%,
        rgba(30, 30, 30, .50) 100%
    );
    --ui-gradient-luxury: linear-gradient(
        50deg,
        rgba(190, 150, 20, .50) 0%,
        rgba(160, 80, 20, .80) 20%,
        rgba(230, 200, 80, .70) 35%,
        rgba(160, 80, 20, .50) 65%,
        rgba(190, 150, 40, .60) 100%
    );
    /* Palette surface utama: sumber tunggal bg-* dan POD. */
    --s58-pod-gold-solid: linear-gradient(
        150deg,
        rgba(170, 90, 30, 0.8) 0%,
        rgba(220, 140, 50, 0.7) 30%,
        rgba(250, 210, 10, 0.9) 50%,
        rgba(200, 120, 50, 0.8) 70%,
        rgba(140, 60, 20, 0.7) 100%
    );
    --s58-pod-gold-solid-text: var(--ui-text-dark);
    --s58-pod-gold-glass: linear-gradient(
        50deg,
        rgba(170, 90, 30, 0.4) 0%,
        rgba(220, 140, 50, 0.7) 30%,
        rgba(250, 210, 10, 0.6) 50%,
        rgba(200, 120, 50, 0.4) 70%,
        rgba(140, 60, 20, 0.5) 100%
    );
    --s58-pod-gold-glass-text: var(--ui-text-light);
    --s58-pod-ocean-solid: linear-gradient(
        150deg,
        rgba(0, 20, 40, 0.8) 0%,
        rgba(0, 100, 200, 0.7) 30%,
        rgba(0, 230, 250, 0.9) 50%,
        rgba(0, 140, 250, 0.8) 70%,
        rgba(0, 10, 20, 0.7) 100%     
    );
    --s58-pod-ocean-solid-text: var(--ui-text-light);
    --s58-pod-ocean-glass: linear-gradient(
        50deg,
        rgba(0, 20, 40, 0.4) 0%,
        rgba(0, 100, 200, 0.7) 30%,
        rgba(0, 230, 250, 0.6) 50%,
        rgba(0, 140, 250, 0.4) 70%,
        rgba(0, 10, 20, 0.5) 100%        
    );
    --s58-pod-ocean-glass-text: var(--ui-text-light);
    --s58-pod-sage-solid: linear-gradient(
        150deg,
        rgba(10, 60, 50, .8) 0%,
        rgba(50, 150, 70, .7) 30%,
        rgba(40, 160, 100, .9) 50%,
        rgba(10, 110, 50, .8) 70%,
        rgba(5, 120, 20, .7) 100%
    );
    --s58-pod-sage-solid-text: var(--ui-text-light);
    --s58-pod-sage-glass: linear-gradient(
        50deg,
        rgba(10, 60, 50, .40) 0%,
        rgba(50, 150, 70, .70) 30%,
        rgba(40, 160, 100, .60) 50%,
        rgba(10, 110, 50, .40) 70%,
        rgba(5, 120, 20, .50) 100%
    );
    --s58-pod-sage-glass-text: var(--ui-text-light);
    --s58-pod-rose-solid: linear-gradient(
        150deg,
        rgba(170, 20, 20, .8) 0%,
        rgba(240, 70, 20, .7) 30%,
        rgba(120, 10, 10, .9) 50%,
        rgba(240, 60, 10, .8) 70%,
        rgba(250, 10, 10, .7) 100%
    );
    --s58-pod-rose-solid-text: var(--ui-text-light);
    --s58-pod-rose-glass: linear-gradient(
        50deg,
        rgba(170, 20, 20, .40) 0%,
        rgba(240, 70, 20, .70) 30%,
        rgba(120, 10, 10, .60) 50%,
        rgba(240, 60, 10, .40) 70%,
        rgba(250, 10, 10, .50) 100%
    );
    --s58-pod-rose-glass-text: var(--ui-text-light);
    --s58-pod-future-solid: linear-gradient(
        150deg,
        rgba(20, 170, 100, .8) 0%,
        rgba(10, 120, 120, 0.7) 30%,
        rgba(120, 170, 220, .9) 50%,
        rgba(50, 100, 120, 0.8) 70%,
        rgba(50, 120, 250, .7) 100%
    );
    --s58-pod-future-solid-text: var(--ui-text-light);
    --s58-pod-future-glass: linear-gradient(
        50deg,
        rgba(20, 170, 100, .4) 0%,
        rgba(10, 120, 120, .7) 30%,
        rgba(10, 80, 150, 0.6) 50%,
        rgba(50, 100, 120, .4) 70%,
        rgba(10, 50, 100, 0.5) 100%
    );
    --s58-pod-future-glass-text: var(--ui-text-light);
    --s58-pod-mint-solid: linear-gradient(
        150deg,
        rgba(240, 250, 240, .8) 0%,
        rgba(100, 220, 40, .7) 30%,
        rgba(230, 250, 0, .9) 50%,
        rgba(130, 250, 70, .8) 70%,
        rgba(220, 240, 200, .7) 100%
    );
    --s58-pod-mint-solid-text: var(--ui-text-dark);
    --s58-pod-mint-glass: linear-gradient(
        50deg,
        rgba(50, 180, 10, 0.4) 0%,
        rgba(0, 250, 120, 0.7) 30%,
        rgba(180, 250, 0, 0.6) 50%,
        rgba(50, 200, 50, 0.4) 70%,
        rgba(180, 250, 0, 0.5) 100% 
    );
    --s58-pod-mint-glass-text: var(--ui-text-dark);
    --s58-pod-neon-solid: linear-gradient(
        150deg,
        rgba(70, 20, 80, .95) 0%,
        rgba(40, 20, 100, .95) 30%,
        rgba(110, 40, 240, .95) 50%,
        rgba(240, 30, 100, .95) 70%,
        rgba(240, 90, 160, .95) 100%
    );
    --s58-pod-neon-solid-text: var(--ui-text-light);
    --s58-pod-neon-glass: linear-gradient(
        50deg,
        rgba(70, 20, 80, .40) 0%,
        rgba(40, 20, 100, .70) 30%,
        rgba(110, 40, 240, .60) 50%,
        rgba(240, 30, 100, .40) 70%,
        rgba(240, 90, 160, .50) 100%
    );
    --s58-pod-neon-glass-text: var(--ui-text-light);
    --s58-pod-snow-solid: linear-gradient(
        150deg,
        rgba(250, 250, 250, .95) 0%,
        rgba(220, 230, 230, .95) 20%,
        rgba(250, 220, 160, .95) 30%,
        rgba(220, 220, 230, .95) 40%,
        rgba(250, 220, 150, .95) 60%,
        rgba(210, 210, 220, .95) 80%,
        rgba(240, 240, 250, .95) 100%
    );
    --s58-pod-snow-solid-text: rgba(50, 50, 50, .95);
    --s58-pod-snow-glass: linear-gradient(
        50deg,
    rgba(250, 250, 250, 0.5) 0%,
    rgba(220, 230, 230, 0.4) 20%,
    rgba(250, 220, 160, 0.5) 30%,
    rgba(220, 220, 230, 0.7) 40%,
    rgba(250, 220, 150, 0.5) 60%,
    rgba(210, 210, 220, 0.4) 80%,
    rgba(240, 240, 250, 0.5) 100%
    );
    --s58-pod-snow-glass-text: rgba(50, 50, 100, 1);
    --s58-pod-gray-solid: linear-gradient(
        150deg,
        rgba(240, 240, 250, .95) 0%,
        rgba(180, 180, 200, .95) 30%,
        rgba(250, 250, 250, .95) 40%,
        rgba(180, 180, 200, .95) 70%,
        rgba(240, 240, 250, .95) 100%
    );
    --s58-pod-gray-solid-text: rgb(50, 50, 100);
    --s58-pod-gray-glass: var(--ui-gradient-light);
    --s58-pod-gray-glass-text: rgb(40, 40, 50);
    --s58-pod-deep-solid: linear-gradient(
        150deg,
        rgba(40, 40, 100, .95) 0%,
        rgba(20, 20, 20, .95) 20%,
        rgba(20, 20, 50, .95) 40%,
        rgba(20, 20, 100, .95) 70%,
        rgba(50, 50, 50, .95) 100%
    );
    --s58-pod-deep-solid-text: var(--ui-text-light);
    --s58-pod-deep-glass: linear-gradient(
        50deg,
        rgba(60, 60, 100, .40) 0%,
        rgba(40, 40, 40, .70) 30%,
        rgba(30, 30, 140, .60) 50%,
        rgba(60, 60, 100, .40) 70%,
        rgba(30, 30, 30, .50) 100%
    );
    --s58-pod-deep-glass-text: var(--ui-text-light);
    --s58-pod-metal-solid: linear-gradient(
        150deg,
        rgba(20, 20, 20, .95) 0%,
        rgba(40, 40, 40, .95) 30%,
        rgba(20, 20, 20, .95) 50%,
        rgba(50, 50, 50, .95) 70%,
        rgba(30, 30, 30, .95) 100%
    );
    --s58-pod-metal-solid-text: var(--ui-text-light);
    --s58-pod-metal-glass: var(--ui-gradient-dark);
    --s58-pod-metal-glass-text: var(--ui-text-light);
    --s58-pod-white-solid: #ffffff;
    --s58-pod-white-solid-text: var(--ui-text-dark);
    --s58-pod-white-glass: linear-gradient(
        50deg,
        rgba(250, 250, 250, .40) 0%,
        rgba(240, 240, 240, .70) 30%,
        rgba(250, 250, 250, .60) 50%,
        rgba(250, 250, 250, .40) 70%,
        rgba(230, 230, 230, .50) 100%
    );
    --s58-pod-white-glass-text: var(--ui-text-dark);
    --s58-pod-luxury-solid: linear-gradient(
        150deg,
        rgba(190, 150, 20, .95) 0%,
        rgba(160, 80, 20, .95) 20%,
        rgba(230, 200, 80, .95) 35%,
        rgba(160, 80, 20, .95) 65%,
        rgba(190, 150, 40, .95) 100%
    );
    --s58-pod-luxury-solid-text: var(--ui-text-light);
    --s58-pod-luxury-glass: var(--ui-gradient-luxury);
    --s58-pod-luxury-glass-text: var(--ui-text-light);
}
html, body { min-height: 100%; }
body { margin: 0; }
.wrapper { min-height: 100vh; width: 100%; }
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1001;
    min-height: var(--s88-topbar-height);
    background: transparent !important;
}
.app-topbar .topbar-menu {
    min-height: var(--s88-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-inline: 1rem;
}
.app-topbar .topbar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--s88-topbar-height);
}
.app-topbar .topbar-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    border: 0;
    background: transparent;
    color: var(--s88-shell-text);
    text-decoration: none;
}
.app-topbar .topbar-link:hover,
.app-topbar .topbar-link:focus { color: #0f172a; }
.app-topbar .topbar-link-icon { font-size: 1.25rem; }
.logo-topbar { display: flex; align-items: center; min-height: var(--s88-topbar-height); }
.logo-topbar img { display: block; max-height: 56px; width: auto; }
.logo-topbar .logo-sm { display: none; }
.topnav-toggle-button { display: none; border: 0; background: transparent; }
.sidenav-menu {
    width: var(--s88-sidenav-width);
    background: var(--s88-shell-surface);
    border-inline-end: 1px solid var(--s88-shell-border);
}
.sidenav-menu .scrollbar {
    height: calc(100vh - 76px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}
.side-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: .5rem .35rem 3rem;
    list-style: none;
    text-decoration: none;
}
.side-nav-title {
    padding: .7rem .75rem .3rem;
    color: var(--s88-shell-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
}
.side-nav-item { list-style: none; }
.side-nav-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: .4rem .6rem;
    border-radius: .4rem;
    text-decoration: none;
    color: var(--s88-shell-text);
}
.side-nav-link:hover, .side-nav-link:focus, .side-nav-link.active {
    background: rgba(15, 23, 42, .07);
    color: #0f172a;
}
.side-nav .sub-menu {
    margin: 0;
    padding: .15rem 0 .3rem 1rem;
    list-style: none;
}
.side-nav .sub-menu .side-nav-link { min-height: 36px; font-size: .9rem; }
.menu-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-arrow { margin-inline-start: auto; }
.menu-arrow::before {
    content: "\ea5f";
    font-family: "tabler-icons";
    display: inline-block;
    transition: transform .15s ease;
}
.side-nav-link[aria-expanded="true"] .menu-arrow::before { transform: rotate(90deg); }
.content-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--s88-topbar-height));
    margin-inline-start: 0;
    padding-inline: .75rem;
}
.footer { margin-top: auto; }
.button-close-offcanvas {
    position: absolute;
    top: .45rem;
    inset-inline-end: .45rem;
    border: 0;
    background: transparent;
}
@media (max-width: 1279px) {
    :root { --s88-topbar-height: 64px; --s88-sidenav-width: min(86vw, 300px); }
    .app-topbar .topbar-menu { padding-inline: .55rem; }
    .content-page { padding-inline: .35rem; }
}
/* 03. GRADIENT BACKGROUND - Gradient utama custom UI. Bootstrap .bg-* standar tidak disentuh.
   Penggunaan: class="bg-golds" -> gradient transparan */
.bg-golds {
    --ui-bg-gradient: var(--s58-pod-gold-glass);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(250, 210, 10, 0.9);
}
.bg-oceans {
    --ui-bg-gradient: var(--s58-pod-ocean-glass);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(0, 100, 200, .9);
}
.bg-sages {
    --ui-bg-gradient: var(--s58-pod-sage-glass);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(10, 110, 50, .9);
}
.bg-roses {
    --ui-bg-gradient: var(--s58-pod-rose-glass);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(180, 40, 40, .9);
}
.bg-luxury {
    --ui-bg-gradient: var(--s58-pod-luxury-glass);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(190, 150, 60, .9);
}
.bg-futures {
    --ui-bg-gradient: var(--s58-pod-future-glass);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(50, 150, 200, .9);
}
.bg-mints {
    --ui-bg-gradient: var(--s58-pod-mint-glass);
    --ui-theme-text: var(--ui-text-dark);
    --ui-theme-border: rgba(180, 250, 30, .9);
}
.bg-neons {
    --ui-bg-gradient: var(--s58-pod-neon-glass);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(110, 40, 240, .9);
}
.bg-snows {
    --ui-bg-gradient: var(--s58-pod-snow-glass);
    --ui-theme-text: rgba(50, 50, 100, 1);
    --ui-theme-border: rgba(240, 240, 250, .9);
}
.bg-grays {
    --ui-bg-gradient: var(--s58-pod-gray-glass);
    --ui-theme-text: rgb(40, 40, 50);
    --ui-theme-border: rgba(150, 150, 150, .9);
}
.bg-deeps {
    --ui-bg-gradient: var(--s58-pod-deep-glass);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(40, 40, 140, .9);
}
.bg-whites {
    --ui-bg-gradient: var(--s58-pod-white-glass);
    --ui-theme-text: var(--ui-text-dark);
    --ui-theme-border: rgba(120, 120, 140, .9);
}
.bg-metals {
    --ui-bg-gradient: var(--s58-pod-metal-glass);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(50, 50, 40, 0.9);
}
.bg-gold {
    --ui-bg-gradient: var(--s58-pod-gold-solid);
    --ui-theme-text: var(--ui-text-dark);
    --ui-theme-border: rgba(250, 210, 40, .9);
}
.bg-ocean {
    --ui-bg-gradient: var(--s58-pod-ocean-solid);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(0, 100, 200, .9);
}
.bg-sage {
    --ui-bg-gradient: var(--s58-pod-sage-solid);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(10, 110, 50, .9);
}
.bg-rose {
    --ui-bg-gradient: var(--s58-pod-rose-solid);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(180, 40, 40, .9);
}
.bg-future {
    --ui-bg-gradient: var(--s58-pod-future-solid);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(50, 150, 200, .9);
}
.bg-mint {
    --ui-bg-gradient: var(--s58-pod-mint-solid);
    --ui-theme-text: var(--ui-text-dark);
    --ui-theme-border: rgba(100, 160, 30, .9);
}
.bg-neon {
    --ui-bg-gradient: var(--s58-pod-neon-solid);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(150, 50, 170, .9);
}
.bg-snow {
    --ui-bg-gradient: var(--s58-pod-snow-solid);
    --ui-theme-text: rgba(50, 50, 50, .95);
    --ui-theme-border: rgba(120, 120, 120, .9);
}
.bg-gray {
    --ui-bg-gradient: var(--s58-pod-gray-solid);
    --ui-theme-text: rgb(50, 50, 100);
    --ui-theme-border: rgba(100, 100, 120, .9);
}
.bg-deep {
    --ui-bg-gradient: var(--s58-pod-deep-solid);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(70, 70, 100, .9);
}
.bg-metal {
    --ui-bg-gradient: var(--s58-pod-metal-solid);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(50, 50, 20, .9);
}
.bg-luxuri {
    --ui-bg-gradient: var(--s58-pod-luxury-solid);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(190, 150, 60, .9);
}
/* Background none — memaksa background elemen menjadi transparan. */
.bg-none {
    --ui-bg-gradient: transparent;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
/* 04. TEXT COMPATIBILITY
   Engine txt-* memakai palette token pada bagian THEME TEXT / BUTTON UTILITIES.
   .txt-op dipertahankan sebagai utility transparan/outline legacy. */
.txt-op {
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 0, 0, .20);
}
/* 05. TYPOGRAPHY - Font body dan utility font custom.
   Penggunaan: class="fo-title", class="fo-desc", class="cfs-4", dst. */
body {
    font-size: var(--ui-root-font-size);
    font-weight: 400;
    font-family: var(--ui-font-body);
    background-color: transparent;
    overflow-x: hidden;
}
.fo-caption { font-family: var(--ui-font-caption); }
.fo-label { font-family: var(--ui-font-label); }
.fo-title { font-family: var(--ui-font-title); }
.fo-subtitle { font-family: var(--ui-font-subtitle); }
.fo-desc { font-family: var(--ui-font-body); }
.fo-help { font-family: var(--ui-font-help); }
.fo-number,
.fo-numb { font-family: var(--ui-font-number); }
.cfw-lighter { font-weight: 200; }
.cfw-lights { font-weight: 300; }
.cfw-light { font-weight: 400; }
.cfw-semi { font-weight: 500; }
.cfw-bold { font-weight: 700; }
.cfw-bolds { font-weight: 800; }
.cfw-bolder { font-weight: 900; }
.ch-1,
.ch-2,
.ch-3,
.ch-4,
.ch-5 { font-weight: 700; }
.ch-1 { font-size: clamp(2.5rem, 2vw, 2.7rem); }
.ch-2 { font-size: clamp(2.2rem, 2vw, 2.5rem); }
.ch-3 { font-size: clamp(1.7rem, 2vw, 2.2rem); }
.ch-4 { font-size: clamp(1.5rem, 2vw, 1.7rem); }
.ch-5 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.cfs-0 { font-size: calc(var(--ui-root-font-size) + 1px) !important; }
.cfs-1 { font-size: calc(var(--ui-root-font-size) + 2px) !important; }
.cfs-2 { font-size: calc(var(--ui-root-font-size) + 3px) !important; }
.cfs-3 { font-size: calc(var(--ui-root-font-size) + 4px) !important; }
.cfs-4 { font-size: calc(var(--ui-root-font-size) + 5px) !important; }
.cfs-5 { font-size: calc(var(--ui-root-font-size) + 6px) !important; }
.cfs-6 { font-size: calc(var(--ui-root-font-size) + 7px) !important; }
.cfs-is { font-size: clamp(.8rem, 1vw, .9rem); font-style: italic; }
.cfs-sm { font-size: clamp(.7rem, .9vw, .8rem); }
.cfs-ix { font-size: clamp(.6rem, .8vw, .7rem); font-style: italic; }
.cfs-xs { font-size: clamp(.5rem, .7vw, .6rem); }
/* 06. CUSTOM UTILITIES - Utility */
.ui-bg-white {
    --ui-alpha: 1;
    background-color: rgba(var(--ui-white-rgb), var(--ui-alpha));
}
.ui-bg-dark {
    --ui-alpha: 1;
    background-color: rgba(var(--ui-dark-rgb), var(--ui-alpha));
}
.ui-txt-white {
    --ui-alpha: 1;
    color: rgba(var(--ui-white-rgb), var(--ui-alpha));
}
.ui-txt-dark {
    --ui-alpha: 1;
    color: rgba(var(--ui-dark-rgb), var(--ui-alpha));
}
.ui-opacity-10 { --ui-alpha: .10; }
.ui-opacity-20 { --ui-alpha: .20; }
.ui-opacity-30 { --ui-alpha: .30; }
.ui-opacity-40 { --ui-alpha: .40; }
.ui-opacity-50 { --ui-alpha: .50; }
.ui-opacity-60 { --ui-alpha: .60; }
.ui-opacity-70 { --ui-alpha: .70; }
.ui-opacity-80 { --ui-alpha: .80; }
.ui-opacity-90 { --ui-alpha: .90; }
/* 07. BOOTSTRAP BUTTON EXTENSIONS */
.ui-btn-xl {
    padding: 18px 28px;
    font-size: 1.1rem;
    border-radius: var(--ui-radius-xl);
}
.ui-btn-wide { width: 100%; }
.ui-btn-icon,
.ui-btn-icon-lg,
.ui-btn-icon-only {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ui-btn-icon { width: 42px; height: 42px; }
.ui-btn-icon-lg { width: 52px; height: 52px; }
.ui-btn-icon-only { width: 38px; min-width: 38px; height: 38px; }
.ui-btn-icon i,
.ui-btn-icon-lg i,
.ui-btn-icon-only i {
    margin: 0;
    line-height: 1;
}
.ui-btn-icon i { font-size: 1rem; }
.ui-btn-icon-lg i { font-size: 1.2rem; }
.ui-btn-icon-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ui-btn-icon-text i {
    margin: 0;
    font-size: 1rem;
    line-height: 1;
}
.ui-btn-shadow { box-shadow: 0 2px 4px rgba(0, 0, 0, .15); }
.ui-btn-shadow:active { box-shadow: none; }
/* 08. BOTTOM SYSTEM NAVIGATION — ANDROID STYLE SUKSES58
   Fungsi: navigasi fixed 3 tombol persegi Logout / Launcher / Kembali.
   Konten halaman diberi ruang bawah agar navigation tidak menutup page.
   ========================================================================== */
:root {
    --s58-bottom-nav-reserve: 104px;
}
.content-page {
    padding-bottom: calc(var(--s58-bottom-nav-reserve) + env(safe-area-inset-bottom)) !important;
}
.footer {
    min-height: var(--s58-bottom-nav-reserve);
}
.s58-bottom-nav {
    --s58-bottom-gold: #d4a83f;
    --s58-bottom-gold-light: #f3d986;
    --s58-bottom-gold-dark: #76510e;
    --s58-bottom-silver-1: #f7f8f8;
    --s58-bottom-silver-2: #c7cbce;
    --s58-bottom-silver-3: #777f85;
    position: fixed;
    left: 50%;
    bottom: 8px;
    z-index: 1090;
    width: 70%;
    padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: repeat(3, clamp(76px, 7.2vw, 96px));
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1vw, 14px);
    transform: translateX(-50%);
    background: transparent !important;
    pointer-events: none;
}
.s58-bottom-nav .sidenav-toggle-button {
    -webkit-tap-highlight-color: transparent;
}
.s58-bottom-nav-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
    border: 2px solid var(--s58-bottom-gold);
    border-radius: 22px;
    background: linear-gradient(145deg, var(--s58-bottom-silver-1) 0%, var(--s58-bottom-silver-2) 48%, #d9b45d 76%, var(--s58-bottom-gold-dark) 100%);
    color: #2a251b;
    font-family: var(--ui-font-title);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none !important;
    transition: border-color .12s linear, filter .12s linear;
    pointer-events: auto;
}
.s58-bottom-nav-item > i {
    margin: 0;
    color: #6f5118;
    font-size: clamp(1.65rem, 2vw, 2rem);
    line-height: 1;
}
.s58-bottom-nav-logout > i { color: #8a2b25; }
.s58-bottom-nav-back > i { color: #43484e; }
.s58-bottom-nav-item > span:not(.s58-bottom-nav-logo):not(.visually-hidden) {
    display: block;
    min-width: 0;
    color: #2c271f;
    font-family: var(--ui-font-caption);
    font-size: clamp(.58rem, .68vw, .7rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.s58-bottom-nav-item:is(:hover, :focus-visible) {
    border-color: var(--s58-bottom-gold-light);
    filter: brightness(1.04);
    outline: 0;
}
.s58-bottom-nav-item:focus-visible {
    outline: 2px solid rgba(243, 217, 134, .7);
    outline-offset: 2px;
}
.s58-bottom-nav-launcher {
    background: linear-gradient(145deg, #f8f8f7 0%, #d3d6d8 40%, #e0bc66 72%, #8b6519 100%);
    border-color: #e4bd58;
}
.s58-bottom-nav-logo {
    width: 100%;
    min-width: 0;
    height: 56%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.s58-bottom-nav-logo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    filter: none;
}
.s58-bottom-nav-launcher > [data-s58-launcher-label] {
    display: block;
    margin: 0;
    color: #2b251a;
    font-family: var(--ui-font-caption);
    font-size: clamp(.58rem, .68vw, .7rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}
html.sidebar-enable .s58-bottom-nav-launcher {
    background: linear-gradient(145deg, #fff4c8 0%, #dfb952 48%, #8f6516 100%);
    border-color: #fff0a8;
}
body.modal-open .s58-bottom-nav {
    opacity: 0;
    pointer-events: none;
}
html.sidebar-enable .s58-mega-launcher {
    padding-bottom: calc(var(--s58-bottom-nav-reserve) + env(safe-area-inset-bottom));
}
@media (max-width: 1279px) {
    :root { --s58-bottom-nav-reserve: 94px; }
    .s58-bottom-nav {
        width: 100%;
        bottom: 4px;
        grid-template-columns: repeat(3, clamp(70px, 20vw, 88px));
        gap: clamp(7px, 2.5vw, 12px);
    }
    .s58-bottom-nav-item {
        border-radius: 18px;
        padding: 7px 5px;
    }
    .s58-bottom-nav-launcher > [data-s58-launcher-label] { display: none; }
    .s58-bottom-nav-logo { height: 72%; }
}
@media (max-width: 575px) {
    :root { --s58-bottom-nav-reserve: 86px; }
    .s58-bottom-nav {
        grid-template-columns: repeat(3, clamp(64px, 21vw, 78px));
        gap: 7px;
    }
    .s58-bottom-nav-item { border-radius: 16px; padding: 6px 4px; }
    .s58-bottom-nav-item > i { font-size: 1.38rem; }
    .s58-bottom-nav-item > span:not(.s58-bottom-nav-logo):not(.visually-hidden) { font-size: .52rem; }
}
@media (prefers-reduced-motion: reduce) {
    .s58-bottom-nav-item { transition: none !important; }
}
/* 09. MODAL BOOTSTRAP FAST - Menghilangkan fade, transform, blur, dan transition Bootstrap Modal agar
   Penggunaan: otomatis untuk seluruh .modal dan .modal-backdrop. */
.modal,
.modal.fade,
.modal.show,
.modal-dialog,
.modal.fade .modal-dialog,
.modal.show .modal-dialog,
.modal-content,
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show {
    animation: none !important;
    transition: none !important;
}
.modal.fade .modal-dialog,
.modal.show .modal-dialog {
    transform: none !important;
}
.modal,
.modal-dialog,
.modal-content,
.modal-backdrop {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.modal-backdrop {
    opacity: .5;
}
.modal-backdrop.show {
    opacity: .5 !important;
}
.modal-content {
    box-shadow: none !important;
}
.s58-modal-loading .modal-dialog {
    max-width: 320px;
}
.s58-modal-loading .modal-content {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-lg);
}
.s58-modal-loading .modal-body {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ==========================================================================
   10. TILES SYSTEM
   Tiles adalah komponen interaktif untuk menu/kategori/feature/activity.
   Tiles dapat berupa <div>, <a>, atau <button>. Mode ratio adalah layout
   mosaic custom: bentuk tile ditentukan oleh span kolom/baris, bukan sekadar
   aspect-ratio. Inspirasi struktur: kategori visual dengan satu tile besar,
   beberapa tile kecil, dan tile lebar.
   ========================================================================== */
.tiles-grid {
    --tiles-gap: 10px;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: var(--tiles-gap);
    box-sizing: border-box;
}
.tiles-grid-auto { grid-auto-rows: minmax(76px, auto); }
.tiles-grid-compact { --tiles-gap: 6px; grid-auto-rows: minmax(62px, auto); }
.tiles-gap-0 { --tiles-gap: 0; }
.tiles-gap-1 { --tiles-gap: 4px; }
.tiles-gap-2 { --tiles-gap: 8px; }
.tiles-gap-3 { --tiles-gap: 12px; }
.tiles-col {
    min-width: 0;
    display: flex;
    align-items: stretch;
}
.tiles-col > .tiles { width: 100%; }
:where(.tiles) {
    --tiles-col-span: 1;
    --tiles-row-span: 1;
    --tiles-radius: var(--ui-radius-lg);
    --tiles-pad: clamp(.72rem, 1.25vw, 1rem);
    --tiles-border: var(--ui-theme-border, rgba(100, 116, 139, .38));
    --tiles-color: var(--ui-theme-text, #263247);
    --tiles-surface: var(--ui-bg-gradient, #ffffff);
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 0;
    grid-column: span var(--tiles-col-span);
    grid-row: span var(--tiles-row-span);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    padding: var(--tiles-pad);
    overflow: hidden;
    box-sizing: border-box;
    background: var(--tiles-surface);
    color: var(--tiles-color);
    border: 1px solid var(--tiles-border);
    border-radius: var(--tiles-radius);
    font-family: var(--ui-font-body);
    line-height: 1.25;
    text-decoration: none;
    box-shadow: none;
    transition: none;
}
:where(a.tiles, button.tiles) {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    text-align: inherit;
    font: inherit;
}
:where(a.tiles, a.tiles:hover, a.tiles:focus, a.tiles:active, a.tiles:visited) {
    color: var(--tiles-color);
    text-decoration: none;
}
:where(a.tiles:hover, button.tiles:hover, a.tiles:focus-visible, button.tiles:focus-visible) {
    border-color: currentColor;
}
:where(a.tiles:active, button.tiles:active) { opacity: .94; }
:where(a.tiles:focus-visible, button.tiles:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
:where(button.tiles:disabled, .tiles[aria-disabled="true"]) {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}
/* Grid span universal untuk tiles-grid biasa. */
.tiles-1x1 { --tiles-col-span: 1; --tiles-row-span: 1; }
.tiles-1x2 { --tiles-col-span: 1; --tiles-row-span: 2; }
.tiles-1x3 { --tiles-col-span: 1; --tiles-row-span: 3; }
.tiles-1x4 { --tiles-col-span: 1; --tiles-row-span: 4; }
.tiles-2x1 { --tiles-col-span: 2; --tiles-row-span: 1; }
.tiles-2x2 { --tiles-col-span: 2; --tiles-row-span: 2; }
.tiles-2x3 { --tiles-col-span: 2; --tiles-row-span: 3; }
.tiles-2x4 { --tiles-col-span: 2; --tiles-row-span: 4; }
.tiles-3x1 { --tiles-col-span: 3; --tiles-row-span: 1; }
.tiles-3x2 { --tiles-col-span: 3; --tiles-row-span: 2; }
.tiles-3x3 { --tiles-col-span: 3; --tiles-row-span: 3; }
.tiles-3x4 { --tiles-col-span: 3; --tiles-row-span: 4; }
.tiles-4x1 { --tiles-col-span: 4; --tiles-row-span: 1; }
.tiles-4x2 { --tiles-col-span: 4; --tiles-row-span: 2; }
.tiles-4x3 { --tiles-col-span: 4; --tiles-row-span: 3; }
.tiles-4x4 { --tiles-col-span: 4; --tiles-row-span: 4; }
/* --------------------------------------------------------------------------
   TILES RATIO / MOSAIC
   Preset layout seperti kategori visual:
   [ featured 3x2 ][ small ][ small ][ small ]
                   [       wide       ][ medium ]
   Ratio berarti proporsi ruang di layout, bukan CSS aspect-ratio.
   -------------------------------------------------------------------------- */
.tiles-ratio-grid {
    --tiles-ratio-gap: 10px;
    --tiles-ratio-row: minmax(170px, auto);
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: var(--tiles-ratio-row);
    grid-auto-flow: dense;
    gap: var(--tiles-ratio-gap);
    box-sizing: border-box;
}
.tiles-ratio-grid > .tiles {
    --tiles-ratio-col: 3;
    --tiles-ratio-rows: 1;
    grid-column: span var(--tiles-ratio-col);
    grid-row: span var(--tiles-ratio-rows);
    min-height: 0;
}
/* Numeric ratio presets. */
.tiles-ratio-grid > .tiles.tiles-ratio-1x1 { --tiles-ratio-col: 3; --tiles-ratio-rows: 1; }
.tiles-ratio-grid > .tiles.tiles-ratio-2x1 { --tiles-ratio-col: 6; --tiles-ratio-rows: 1; }
.tiles-ratio-grid > .tiles.tiles-ratio-3x1 { --tiles-ratio-col: 9; --tiles-ratio-rows: 1; }
.tiles-ratio-grid > .tiles.tiles-ratio-4x1 { --tiles-ratio-col: 12; --tiles-ratio-rows: 1; }
.tiles-ratio-grid > .tiles.tiles-ratio-3x2 { --tiles-ratio-col: 3; --tiles-ratio-rows: 2; }
.tiles-ratio-grid > .tiles.tiles-ratio-4x2 { --tiles-ratio-col: 4; --tiles-ratio-rows: 2; }
.tiles-ratio-grid > .tiles.tiles-ratio-5x1 { --tiles-ratio-col: 5; --tiles-ratio-rows: 1; }
.tiles-ratio-grid > .tiles.tiles-ratio-7x1 { --tiles-ratio-col: 7; --tiles-ratio-rows: 1; }
.tiles-ratio-grid > .tiles.tiles-ratio-auto { --tiles-ratio-col: 12; --tiles-ratio-rows: 1; }
/* Semantic aliases untuk komposisi kategori. */
.tiles-ratio-grid > .tiles.tiles-ratio-featured { --tiles-ratio-col: 3; --tiles-ratio-rows: 2; }
.tiles-ratio-grid > .tiles.tiles-ratio-small { --tiles-ratio-col: 3; --tiles-ratio-rows: 1; }
.tiles-ratio-grid > .tiles.tiles-ratio-wide { --tiles-ratio-col: 5; --tiles-ratio-rows: 1; }
.tiles-ratio-grid > .tiles.tiles-ratio-medium { --tiles-ratio-col: 4; --tiles-ratio-rows: 1; }
.tiles-ratio-grid > .tiles.tiles-ratio-full { --tiles-ratio-col: 12; --tiles-ratio-rows: 1; }
/* Tile dengan background image/cover seperti kategori visual. */
.tiles-cover {
    --tiles-cover-position: center;
    min-height: 100%;
    justify-content: flex-end;
    background-position: var(--tiles-cover-position);
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
    border-color: rgba(255, 255, 255, .26);
}
.tiles-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        180deg,
        rgba(3, 10, 18, .04) 0%,
        rgba(3, 10, 18, .30) 54%,
        rgba(3, 10, 18, .86) 100%
    );
    pointer-events: none;
}
.tiles-cover > :where(.tiles-head, .tiles-body, .tiles-foot),
.tiles-cover > .tiles-content {
    position: relative;
    z-index: 2;
}
.tiles-cover .tiles-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.tiles-cover .tiles-title,
.tiles-cover .tiles-subtitle,
.tiles-cover .tiles-meta,
.tiles-cover .tiles-value {
    color: inherit;
}
.tiles-cover .tiles-subtitle,
.tiles-cover .tiles-meta {
    opacity: .82;
}
.tiles-cover-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--tiles-cover-position);
}
/* Struktur konten universal. */
:where(.tiles-head, .tiles-body, .tiles-foot) {
    position: relative;
    z-index: 2;
    min-width: 0;
}
:where(.tiles-head, .tiles-foot) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tiles-body { flex: 1; min-height: 0; }
.tiles-center { align-items: center; justify-content: center; text-align: center; }
.tiles-start { align-items: flex-start; justify-content: flex-start; text-align: left; }
.tiles-end { align-items: flex-end; justify-content: flex-end; text-align: right; }
.tiles-horizontal { flex-direction: row; align-items: center; justify-content: space-between; }
.tiles-horizontal .tiles-body { flex: 1; }
.tiles-kicker {
    margin: 0 0 4px;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: inherit;
    opacity: .78;
}
.tiles-title {
    margin: 0;
    max-width: 100%;
    font-family: var(--ui-font-title);
    font-size: clamp(.72rem, 1vw, .9rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: .01em;
    color: inherit;
    overflow-wrap: anywhere;
}
.tiles-subtitle {
    margin: 0;
    max-width: 100%;
    font-family: var(--ui-font-body);
    font-size: clamp(.68rem, .8vw, .78rem);
    font-weight: 400;
    line-height: 1.2;
    color: inherit;
    opacity: .80;
    overflow-wrap: anywhere;
}
.tiles-value {
    margin: 0;
    max-width: 100%;
    font-family: var(--ui-font-number);
    font-size: clamp(1rem, 1.45vw, 1.35rem);
    font-weight: 600;
    line-height: 1.05;
    color: inherit;
    overflow-wrap: anywhere;
}
.tiles-meta {
    margin: 0;
    font-size: .68rem;
    line-height: 1.2;
    color: inherit;
    opacity: .70;
}
.tiles-divider { width: 100%; height: 1px; background: currentColor; opacity: .14; }
.tiles-icon,
.tiles-avatar,
.tiles-mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}
.tiles-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border: 1px solid currentColor;
    border-radius: var(--ui-radius-md);
    background: rgba(255, 255, 255, .12);
    font-size: 1.25rem;
    line-height: 1;
}
.tiles-icon-sm { width: 32px; height: 32px; min-width: 32px; font-size: 1rem; }
.tiles-icon-lg { width: 56px; height: 56px; min-width: 56px; font-size: 1.6rem; }
.tiles-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    object-fit: cover;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
}
.tiles-avatar-sm { width: 32px; height: 32px; min-width: 32px; }
.tiles-avatar-lg { width: 62px; height: 62px; min-width: 62px; }
.tiles-avatar-square { border-radius: var(--ui-radius-md); }
.tiles-mark {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 5px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    color: #263247;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}
.tiles-actions {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tiles-actions-end { justify-content: flex-end; }
/* Menu tile — collapse tetap milik Bootstrap. */
.tiles-menu {
    --tiles-menu-accent: #087f86;
    border-top: 3px solid var(--tiles-menu-accent);
}
.tiles-menu .tiles-icon { color: var(--tiles-menu-accent); }
.tiles-menu-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.tiles-menu-toggle .tiles-title { flex: 1; }
.tiles-menu-arrow { margin-left: auto; line-height: 1; }
.tiles-menu-arrow::before {
    content: "\ea5f";
    font-family: "tabler-icons";
}
.tiles-menu-toggle[aria-expanded="true"] .tiles-menu-arrow::before { content: "\ea62"; }
.tiles-menu-panel {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(100, 116, 139, .24);
}
.tiles-menu-list { margin: 0; padding: 0; list-style: none; }
.tiles-menu-list > li + li { border-top: 1px solid rgba(100, 116, 139, .16); }
.tiles-menu-list a,
.tiles-menu-list button {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    text-align: left;
}
/* Dashboard panel tile. */
.tiles-panel {
    --tiles-panel-accent: #3156d9;
    border-left: 4px solid var(--tiles-panel-accent);
}
.tiles-panel .tiles-head { align-items: flex-start; }
.tiles-panel .tiles-icon {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--tiles-panel-accent);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    opacity: .20;
}
.tiles-panel .tiles-foot {
    margin: 0 calc(var(--tiles-pad) * -1) calc(var(--tiles-pad) * -1);
    padding: 7px var(--tiles-pad);
    background: rgba(15, 23, 42, .05);
    border-top: 1px solid rgba(100, 116, 139, .18);
}
/* Counter/name tile sederhana. */
.tiles-counter {
    --tiles-counter-accent: #087f86;
    min-height: 112px;
    background: var(--tiles-counter-accent);
    color: #ffffff;
    border-color: color-mix(in srgb, var(--tiles-counter-accent), #000 20%);
}
.tiles-counter .tiles-body {
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tiles-counter-name {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: inherit;
    opacity: .86;
}
.tiles-counter-value {
    margin-top: 4px;
    font-family: var(--ui-font-number);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1;
    color: inherit;
}
.tiles-counter-icon {
    position: absolute;
    z-index: 1;
    right: 12px;
    bottom: 4px;
    font-size: clamp(3.2rem, 7vw, 5rem);
    line-height: 1;
    color: #ffffff;
    opacity: .16;
    pointer-events: none;
}
/* Feature dan activity tetap merupakan keluarga tiles. */
.tiles-feature {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.tiles-feature > .tiles-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.tiles-feature .tiles-icon,
.tiles-feature .tiles-avatar { margin-left: auto; }
.tiles-activity {
    min-height: 64px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.tiles-activity > .tiles-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tiles-activity-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tiles-activity-value {
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--ui-font-number);
    font-weight: 600;
    white-space: nowrap;
}
/* --------------------------------------------------------------------------
   TILE HERO STAT — horizontal KPI besar + icon dominan.
   Cocok untuk visitor/member/omzet/bonus. Dapat dipadukan dengan bg-*.
   -------------------------------------------------------------------------- */
.tiles-hero-stat {
    --tiles-surface: var(--ui-bg-gradient, #f97316);
    min-height: 190px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: clamp(1.2rem, 2.4vw, 2rem);
    color: var(--ui-theme-text, #ffffff);
    border-color: var(--ui-theme-border, rgba(255, 255, 255, .34));
}
.tiles-hero-stat-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.tiles-hero-stat-title {
    margin: 0;
    font-family: var(--ui-font-body);
    font-size: clamp(.82rem, 1.3vw, 1.05rem);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tiles-hero-stat-value {
    margin: 0;
    font-family: var(--ui-font-number);
    font-size: clamp(2.8rem, 7vw, 5.4rem);
    font-weight: 500;
    line-height: .9;
}
.tiles-hero-stat-icon {
    width: clamp(110px, 16vw, 180px);
    min-width: clamp(110px, 16vw, 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(6rem, 12vw, 10rem);
    line-height: 1;
}
/* TILE STAT BOX — statistik vertikal flat seperti dashboard block. */
.tiles-stat-box {
    --tiles-surface: var(--ui-bg-gradient, #3f474d);
    min-height: 250px;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: clamp(1rem, 2vw, 1.65rem);
    color: var(--ui-theme-text, #ffffff);
    text-align: center;
    border-color: transparent;
}
.tiles-stat-box-title { margin: 0; font-size: .86rem; font-weight: 500; text-transform: uppercase; }
.tiles-stat-box-icon {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(4.5rem, 8vw, 7rem);
    line-height: 1;
}
.tiles-stat-box-divider { width: 100%; height: 1px; background: currentColor; opacity: .16; }
.tiles-stat-box-value {
    margin: 0;
    font-family: var(--ui-font-number);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: 1;
}
.tiles-stat-box-desc { margin: 0; font-size: .76rem; line-height: 1.35; opacity: .92; }
/* TILE ICON PLAIN — icon besar + title, tanpa background/border. */
.tiles.tiles-icon-plain {
    --tiles-surface: transparent;
    min-height: 132px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: .8rem;
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 0;
    overflow: visible;
    text-align: center;
}
.tiles-icon-plain-media {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: clamp(4.4rem, 8vw, 7.4rem);
    line-height: 1;
}
.tiles-icon-plain-title {
    margin: 0;
    color: inherit;
    font-family: var(--ui-font-body);
    font-size: clamp(.8rem, 1.3vw, 1rem);
    font-weight: 500;
    line-height: 1.1;
}
.tiles.tiles-icon-plain:is(:hover, :focus-visible) {
    background: transparent !important;
    border-color: transparent !important;
}
@supports not (color: color-mix(in srgb, #000, #fff)) {
    .tiles-counter { border-color: rgba(15, 23, 42, .24); }
}
/* MOBILE + TABLET */
@media (max-width: 1279px) {
    .tiles-grid {
        --tiles-gap: 6px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(68px, auto);
    }
    .tiles-1x1,
    .tiles-1x2,
    .tiles-1x3,
    .tiles-1x4 {
        --tiles-col-span: 1;
    }
    .tiles-2x1,
    .tiles-2x2,
    .tiles-2x3,
    .tiles-2x4,
    .tiles-3x1,
    .tiles-3x2,
    .tiles-3x3,
    .tiles-3x4,
    .tiles-4x1,
    .tiles-4x2,
    .tiles-4x3,
    .tiles-4x4 {
        --tiles-col-span: 2;
    }
    :where(.tiles) {
        --tiles-pad: .68rem;
        --tiles-radius: var(--ui-radius-md);
        gap: 5px;
    }
    /* Ratio mosaic tetap hidup pada mobile+tablet, tetapi dipadatkan 2 kolom. */
    .tiles-ratio-grid {
        --tiles-ratio-gap: 6px;
        --tiles-ratio-row: minmax(118px, auto);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tiles-ratio-grid > .tiles {
        --tiles-ratio-col: 1;
        --tiles-ratio-rows: 1;
    }
    .tiles-ratio-grid > .tiles:is(.tiles-ratio-1x1, .tiles-ratio-small) {
        --tiles-ratio-col: 1;
        --tiles-ratio-rows: 1;
    }
    .tiles-ratio-grid > .tiles.tiles-ratio-4x2 {
        --tiles-ratio-col: 2;
        --tiles-ratio-rows: 2;
    }
    .tiles-ratio-grid > .tiles:is(
        .tiles-ratio-2x1,
        .tiles-ratio-3x1,
        .tiles-ratio-4x1,
        .tiles-ratio-5x1,
        .tiles-ratio-7x1,
        .tiles-ratio-wide,
        .tiles-ratio-medium,
        .tiles-ratio-full,
        .tiles-ratio-auto
    ) {
        --tiles-ratio-col: 2;
        --tiles-ratio-rows: 1;
    }
    .tiles-ratio-grid > .tiles:is(.tiles-ratio-3x2, .tiles-ratio-featured) {
        --tiles-ratio-col: 1;
        --tiles-ratio-rows: 2;
    }
    .tiles-ratio-grid > .tiles-cover {
        min-height: 118px;
    }
    .tiles-title { font-size: .7rem; }
    .tiles-subtitle,
    .tiles-meta { font-size: .68rem; }
    .tiles-value { font-size: .82rem; }
    .tiles-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 1rem;
    }
    .tiles-avatar {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }
    .tiles-counter { min-height: 92px; }
    .tiles-counter-icon { font-size: 3rem; }
    .tiles-activity { min-height: 58px; }
    .tiles-activity > .tiles-body { gap: 6px; }
    .tiles-activity-value { font-size: .76rem; }
    .tiles-hero-stat { min-height: 150px; gap: 10px; padding: .9rem; }
    .tiles-hero-stat-icon {
        width: clamp(78px, 20vw, 130px);
        min-width: clamp(78px, 20vw, 130px);
        font-size: clamp(4rem, 15vw, 7rem);
    }
    .tiles-stat-box { min-height: 190px; gap: 10px; padding: .8rem; }
    .tiles-stat-box-icon { min-height: 64px; font-size: clamp(3.4rem, 12vw, 5.8rem); }
    .tiles.tiles-icon-plain { min-height: 106px; padding: .5rem; }
    .tiles-icon-plain-media { min-height: 66px; font-size: clamp(3.2rem, 14vw, 5.5rem); }
}
/* ==========================================================================
   11. WIDGET SYSTEM
   Komponen non-ratio: profile, news, resume, statistic, banner, media, promo,
   counter-content, image, split, dan model informasi lain.
   ========================================================================== */
.widget {
    --widget-radius: var(--ui-radius-lg);
    --widget-border: rgba(100, 116, 139, .28);
    --widget-surface: #ffffff;
    --widget-color: #263247;
    position: relative;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--widget-surface);
    color: var(--widget-color);
    border: 1px solid var(--widget-border);
    border-radius: var(--widget-radius);
    font-family: var(--ui-font-body);
    box-shadow: none;
}
.widget-head,
.widget-body,
.widget-foot {
    position: relative;
    z-index: 2;
    min-width: 0;
}
.widget-head,
.widget-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.widget-head {
    padding: .8rem 1rem;
    border-bottom: 1px solid rgba(100, 116, 139, .18);
}
.widget-body { padding: 1rem; }
.widget-foot {
    padding: .7rem 1rem;
    border-top: 1px solid rgba(100, 116, 139, .18);
}
.widget-title {
    margin: 0;
    font-family: var(--ui-font-title);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.15;
    color: inherit;
}
.widget-subtitle {
    margin: 3px 0 0;
    font-size: .74rem;
    line-height: 1.25;
    color: inherit;
    opacity: .72;
}
.widget-value {
    margin: 0;
    font-family: var(--ui-font-number);
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    font-weight: 600;
    line-height: 1.05;
    color: inherit;
}
.widget-meta {
    margin: 0;
    font-size: .7rem;
    line-height: 1.2;
    color: inherit;
    opacity: .68;
}
.widget-divider { width: 100%; height: 1px; background: currentColor; opacity: .12; }
.widget-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.widget-avatar {
    width: 54px;
    height: 54px;
    min-width: 54px;
    display: block;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(100, 116, 139, .28);
    border-radius: 50%;
    background: #f8fafc;
}
.widget-avatar-sm { width: 38px; height: 38px; min-width: 38px; }
.widget-avatar-lg { width: 78px; height: 78px; min-width: 78px; }
.widget-avatar-xl { width: 110px; height: 110px; min-width: 110px; }
.widget-avatar-square { border-radius: var(--ui-radius-md); }
.widget-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    color: inherit;
    font-size: 2.2rem;
}
.widget-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}
/* Widget model universal. */
/* -- WIDGET BANNER -- */
.widget-banner {
    --widget-banner-icon-opacity: .7;
    position: relative;
    isolation: isolate;
    min-height: 82px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid var(--ui-theme-border);
    border-radius: 0 24px 0 24px;
}
.widget-banner .widget-body {
    position: relative;
    z-index: 3;
    width: 100%;
    min-width: 0;
    min-height: 82px;
    padding: 1rem clamp(1rem, 4vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.widget-banner > .widget-icon {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0 !important;
    background: transparent !important;
    color: inherit;
    font-size: clamp(8rem, 8vw, 8rem);
    line-height: 1;
    opacity: var(--widget-banner-icon-opacity);
    pointer-events: none;
    user-select: none;
}
.widget-banner > .widget-icon > :is(i, svg) {
    flex: 0 0 auto;
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: 1;
    opacity: 1;
    transform: translateX(-2%) scale(0.7);
    transform-origin: left center;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .30))
            drop-shadow(0 -1px 0 rgba(255, 255, 255, .20));
}
.widget-banner :is(.widget-title) {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow-wrap: anywhere;
    font-family: var(--ui-font-title);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}
.widget-banner :is(.widget-subtitle) {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow-wrap: anywhere;
    font-family: var(--ui-font-body);
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: capitalize;
}
.widget-banner :is(.widget-value) {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow-wrap: anywhere;
    font-family: var(--ui-font-number);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
}
.widget-stat .widget-body { display: flex; flex-direction: column; gap: 4px; }
.widget-balance .widget-value { font-size: clamp(1.1rem, 2vw, 1.6rem); }
.widget-kpi-line {
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(127, 127, 127, .18);
}
.widget-kpi-line > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
    opacity: .72;
}
.widget-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.widget-metric .widget-body { flex: 1; }
.widget-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.widget-notice .widget-body { flex: 1; }
.widget-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 34%);
}
.widget-split-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-left: 1px solid rgba(100, 116, 139, .20);
}
.widget-triple-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.widget-triple-item {
    min-width: 0;
    padding: 1rem .65rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.widget-triple-item + .widget-triple-item {
    border-left: 1px solid rgba(100, 116, 139, .16);
}
.widget-image-card .widget-image { aspect-ratio: 16 / 8; }
.widget-info-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.widget-soft-surface {
    --widget-surface: rgba(255, 255, 255, .96);
    --widget-color: #1f2937;
}
.widget-dark-surface {
    --widget-surface: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    --widget-color: #ffffff;
    --widget-border: rgba(255, 255, 255, .12);
}
/* Social profile widget with photos. */
.widget-social-profile { overflow: hidden; }
.widget-social-cover {
    height: clamp(110px, 18vw, 180px);
    background: var(--ui-gradient-dark);
    overflow: hidden;
}
.widget-social-cover > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
.widget-social-main {
    position: relative;
    padding: 0 1rem 1rem;
}
.widget-social-avatar {
    width: 88px;
    height: 88px;
    margin-top: -44px;
    display: block;
    object-fit: cover;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #ffffff;
}
.widget-social-name {
    margin: .65rem 0 0;
    font-family: var(--ui-font-title);
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
}
.widget-social-desc {
    margin: .25rem 0 0;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.35;
}
.widget-social-stats {
    margin-top: .8rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.widget-social-stat {
    padding: .65rem .35rem;
    text-align: center;
}
.widget-social-stat + .widget-social-stat {
    border-left: 1px solid #e2e8f0;
}
.widget-social-stat strong {
    display: block;
    color: #1f2937;
    font-family: var(--ui-font-number);
    font-size: .9rem;
}
.widget-social-stat span {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: .65rem;
    text-transform: uppercase;
}
.widget-social-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: .8rem 1rem 1rem;
}
.widget-social-photos a {
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background: #f1f5f9;
    aspect-ratio: 1 / 1;
}
.widget-social-photos img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
/* Latest news widget: media + body. */
.widget-news {
    display: grid;
    grid-template-columns: minmax(180px, 38%) minmax(0, 1fr);
    min-height: 180px;
}
.widget-news-media {
    min-width: 0;
    overflow: hidden;
    background: #e2e8f0;
}
.widget-news-media img {
    width: 100%;
    height: 100%;
    min-height: 180px;
    display: block;
    object-fit: cover;
    object-position: center;
}
.widget-news-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.widget-news-date {
    margin-bottom: 6px;
    color: #64748b;
    font-size: .68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.widget-news-title {
    margin: 0;
    color: #1f2937;
    font-family: var(--ui-font-title);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.2;
}
.widget-news-title::after {
    content: "";
    display: block;
    width: 38px;
    height: 2px;
    margin: 9px 0;
    background: #d6aa4d;
}
.widget-news-desc {
    margin: 0;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.45;
}
.widget-news-actions { margin-top: .8rem; }
/* Resume/profile widget. */
.widget-resume {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
}
.widget-resume-side {
    padding: 1rem;
    text-align: center;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
}
.widget-resume-avatar {
    width: 82px;
    height: 82px;
    margin: 0 auto;
    display: block;
    object-fit: cover;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
}
.widget-resume-name {
    margin: .65rem 0 .15rem;
    color: #1f2937;
    font-family: var(--ui-font-title);
    font-size: .82rem;
    font-weight: 500;
}
.widget-resume-role {
    margin: 0;
    color: #64748b;
    font-size: .7rem;
    line-height: 1.3;
}
.widget-resume-main { padding: 1rem; }
.widget-resume-row {
    display: grid;
    grid-template-columns: minmax(90px, 28%) minmax(0, 1fr);
    gap: 10px;
    padding: .45rem 0;
}
.widget-resume-row + .widget-resume-row {
    border-top: 1px solid #e2e8f0;
}
.widget-resume-label {
    color: #475569;
    font-size: .7rem;
    font-weight: 700;
}
.widget-resume-value {
    min-width: 0;
    color: #64748b;
    font-size: .74rem;
    overflow-wrap: anywhere;
}
.widget-resume-skills {
    margin-top: .8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.widget-resume-skill {
    padding: 4px 7px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: .64rem;
    line-height: 1;
}
/* --------------------------------------------------------------------------
   WIDGET PROFILE MENU — profile header + linked metrics/actions.
   Semua row menu dirancang untuk <a href>.
   -------------------------------------------------------------------------- */
.widget-profile-menu { overflow: hidden; }
.widget-profile-head {
    min-height: 128px;
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ui-bg-gradient, #f59e0b);
    color: var(--ui-theme-text, #ffffff);
}
.widget-profile-avatar {
    width: 64px;
    height: 64px;
    min-width: 64px;
    display: block;
    object-fit: cover;
    object-position: center;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: rgba(255, 255, 255, .20);
}
.widget-profile-name { margin: 0; color: inherit; font-family: var(--ui-font-body); font-size: clamp(1rem, 1.8vw, 1.35rem); font-weight: 500; line-height: 1.08; }
.widget-profile-role { margin: .25rem 0 0; color: inherit; font-size: .78rem; line-height: 1.2; opacity: .92; }
.widget-profile-links { margin: 0; padding: 0; display: flex; flex-direction: column; list-style: none; background: #ffffff; }
.widget-profile-link {
    min-height: 50px;
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    border-top: 1px solid #edf0f3;
    text-decoration: none;
}
.widget-profile-link:is(:hover, :focus-visible) { color: #111827; background: #f8fafc; text-decoration: none; }
.widget-profile-link-label { min-width: 0; flex: 1; font-size: .82rem; line-height: 1.2; }
.widget-profile-link-badge {
    min-width: 28px;
    min-height: 22px;
    padding: 2px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--ui-bg-gradient, #0ea5e9);
    color: var(--ui-theme-text, #ffffff);
    font-family: var(--ui-font-number);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}
/* WIDGET STORY — media block + floating content panel. */
.widget-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 52px); }
.widget-story-item { position: relative; min-height: 350px; padding: 0 0 34px; }
.widget-story-media { width: 68%; min-height: 290px; background: var(--ui-bg-gradient, #f9a8b8); }
.widget-story-media > img { width: 100%; height: 100%; min-height: inherit; display: block; object-fit: cover; object-position: center; }
.widget-story-panel {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    width: 64%;
    min-height: 260px;
    padding: clamp(1rem, 2.2vw, 1.6rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, .98);
    color: #1f2937;
    border: 1px solid #e2e8f0;
    box-shadow: none;
}
.widget-story-date { margin: 0 0 .4rem; color: #64748b; font-size: .74rem; }
.widget-story-title { margin: 0; color: #111827; font-family: var(--ui-font-body); font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 700; line-height: 1.15; }
.widget-story-text { margin: 1rem 0; color: #64748b; font-size: .8rem; line-height: 1.5; }
.widget-story-link { width: fit-content; margin-top: auto; color: #1f2937; font-size: .78rem; font-weight: 500; text-decoration: none; }
.widget-story-link:is(:hover, :focus-visible) { text-decoration: underline; }
/* SOCIAL PROFILE STRIP — photo strip + centered identity + stats. */
.widget-social-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: .8rem .8rem 0; }
.widget-social-strip-item { overflow: hidden; aspect-ratio: 1 / 1; background: #e2e8f0; border-radius: 4px; }
.widget-social-strip-item img { width: 100%; height: 100%; display: block; object-fit: cover; }
.widget-social-tools { min-height: 34px; padding: 0 .85rem; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #111827; }
.widget-social-profile.is-strip .widget-social-main { padding: 0 1rem 1rem; text-align: center; }
.widget-social-profile.is-strip .widget-social-avatar { width: 116px; height: 116px; margin: -8px auto 0; border-width: 0; }
.widget-social-status { width: 10px; height: 10px; display: inline-block; margin-left: 5px; border-radius: 50%; background: #22c55e; }
.widget-social-username { margin: .55rem 0 0; color: #1f2937; font-family: var(--ui-font-body); font-size: .86rem; font-weight: 700; line-height: 1.1; }
.widget-social-display-name { margin: .25rem 0 0; color: #64748b; font-size: .72rem; }
.widget-social-profile.is-strip .widget-social-desc { max-width: 360px; margin: 1rem auto 0; text-align: center; }
.widget-social-profile.is-strip .widget-social-stats { margin: .75rem 0 0; border: 0; }
.widget-social-profile.is-strip .widget-social-stat + .widget-social-stat { border-left: 0; }
/* --------------------------------------------------------------------------
   11A. WIDGET COUNTER CONTENT
   Diamond berantai: grid dapat memakai bg-* untuk warna garis tengah.
   Setiap .widget-counter-inner dapat memakai bg-* sendiri untuk palette diamond
   dan icon. Panel dalam putih opacity .80. Semua item selalu overlap/dempet.
   -------------------------------------------------------------------------- */
.widget-counter-content {
    --widget-counter-bg: #100028;
    --widget-counter-size: clamp(140px, 20vw, 240px);
    --widget-counter-overlap: clamp(-16px, -1vw, -6px);
    --widget-counter-default-palette:
        linear-gradient(72deg, #086c83 0%, #3156d9 100%);
    --widget-counter-line-bg: var(--widget-counter-default-palette);
    position: relative;
    width: 100%;
    min-width: 0;
    overflow-x: clip;
    overflow-y: hidden;
    padding: clamp(4px, 1vw, 8px) 0;
    background: var(--widget-counter-bg);
    color: #ffffff;
    border: none;
}
.widget-counter-grid {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 auto;
    padding-inline: clamp(2px, .8vw, 10px);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: transparent !important;
}
.widget-counter-grid::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    transform: translateY(-50%);
    background: var(--widget-counter-line-bg);
    opacity: .8;
    pointer-events: none;
}
.widget-counter-grid[class*="bg-"] {
    --widget-counter-line-bg: var(--ui-bg-gradient, var(--widget-counter-default-palette));
    background: transparent !important;
}
.widget-counter-item {
    position: relative;
    z-index: 1;
    isolation: isolate;
    width: var(--widget-counter-size);
    min-width: 0;
    max-width: var(--widget-counter-size);
    flex: 0 1 var(--widget-counter-size);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: inline-size;
    transform: rotate(50deg);
    background: transparent;
    color: #ffffff;
    border: none;
}
.widget-counter-item + .widget-counter-item { margin-inline-start: var(--widget-counter-overlap); }
.widget-counter-item::before {
    content: "";
    position: absolute;
    inset: 12%;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, .10);
    pointer-events: none;
}
.widget-counter-inner {
    --widget-counter-palette: var(--widget-counter-default-palette);
    position: relative;
    isolation: isolate;
    width: 75%;
    aspect-ratio: 1 / 1;
    padding: 10%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    transform: rotate(-50deg);
    background: transparent !important;
    color: #111827;
    text-align: center;
}
.widget-counter-inner[class*="bg-"] {
    --widget-counter-palette: var(--ui-bg-gradient, var(--widget-counter-default-palette));
    background: transparent !important;
}
.widget-counter-inner::before,
.widget-counter-inner::after {
    content: "";
    position: absolute;
    z-index: -2;
    transform: rotate(50deg);
    pointer-events: none;
}
.widget-counter-inner::before { inset: 0; background: var(--widget-counter-palette); }
.widget-counter-inner::after { inset: 5px; z-index: -1; background: rgba(255, 255, 255, .80); }
.widget-counter-icon {
    position: relative;
    z-index: 2;
    display: block;
    margin: 0 0 clamp(.2rem, 3cqi, .5rem);
    background: var(--widget-counter-palette);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: clamp(.9rem, 18cqi, 3rem);
    line-height: 1;
}
.widget-counter-value {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #111827;
    font-family: var(--ui-font-number);
    font-size: clamp(.7rem, 12cqi, 2.4rem);
    font-weight: 500;
    line-height: 1;
}
.widget-counter-label {
    position: relative;
    z-index: 2;
    margin: clamp(.12rem, 2cqi, .42rem) 0 0;
    color: rgba(17, 24, 39, .78);
    font-family: var(--ui-font-body);
    font-size: clamp(.5rem, 8cqi, 1.4rem);
    line-height: 1.2;
}
/* --------------------------------------------------------------------------
   11B. S88 PROFIL
   Penggunaan:
   <div class="s88-profil">
       <aside class="user-aside">...</aside>
       <main class="user-main">...</main>
   </div>
   Root memakai s88-profil; seluruh child memakai namespace user-*.
   -------------------------------------------------------------------------- */
.s88-profil {
    --s88-profil-border: #dbe3ec;
    --s88-profil-surface: #ffffff;
    --s88-profil-muted: #64748b;
    --s88-profil-text: #1f2937;
    --s88-profil-accent: #087f86;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
    gap: 12px;
    color: var(--s88-profil-text);
    font-family: var(--ui-font-body);
}
.s88-profil .user-aside,
.s88-profil .user-main,
.s88-profil .user-card {
    min-width: 0;
    background: var(--s88-profil-surface);
    border: 1px solid var(--s88-profil-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: none;
}
.s88-profil .user-aside {
    align-self: start;
    overflow: hidden;
}
.s88-profil .user-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.s88-profil .user-identity {
    padding: 1.25rem 1rem;
    text-align: center;
}
.s88-profil .user-avatar {
    width: clamp(96px, 12vw, 136px);
    height: clamp(96px, 12vw, 136px);
    margin: 0 auto;
    display: block;
    object-fit: cover;
    object-position: center;
    border: 2px solid var(--s88-profil-border);
    border-radius: 50%;
    background: #f8fafc;
}
.s88-profil .user-name {
    margin: .8rem 0 .2rem;
    color: var(--s88-profil-text);
    font-family: var(--ui-font-title);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.15;
}
.s88-profil .user-role {
    margin: 0;
    color: var(--s88-profil-muted);
    font-size: .78rem;
}
.s88-profil .user-location {
    margin: .3rem 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--s88-profil-muted);
    font-size: .7rem;
}
.s88-profil .user-actions {
    width: auto;
    margin: .9rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: auto;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.s88-profil .user-actions .btn {
    width: auto;
    min-width: 0;
    min-height: 32px;
    flex: 0 1 auto;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    color: var(--s88-profil-text);
    background: #ffffff;
    border: 1px solid var(--s88-profil-border);
    border-radius: var(--ui-radius-md);
    box-shadow: none;
    transition: none;
}
.s88-profil .user-links {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--s88-profil-border);
}
.s88-profil .user-link {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--s88-profil-text);
}
.s88-profil .user-link + .user-link {
    border-top: 1px solid var(--s88-profil-border);
}
.s88-profil .user-link i {
    width: 24px;
    min-width: 24px;
    text-align: center;
    color: var(--s88-profil-accent);
    font-size: 1rem;
}
.s88-profil .user-link-label {
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
}
.s88-profil .user-link-value {
    min-width: 0;
    margin-left: auto;
    color: var(--s88-profil-muted);
    font-size: .7rem;
    text-align: right;
    overflow-wrap: anywhere;
}
.s88-profil .user-card { overflow: hidden; }
.s88-profil .user-card-head {
    min-height: 44px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--s88-profil-border);
}
.s88-profil .user-card-title {
    margin: 0;
    font-family: var(--ui-font-title);
    font-size: .8rem;
    font-weight: 500;
    color: var(--s88-profil-text);
}
.s88-profil .user-card-body { padding: 12px; }
.s88-profil .user-data { margin: 0; }
.s88-profil .user-row {
    display: grid;
    grid-template-columns: minmax(120px, 28%) minmax(0, 1fr);
    gap: 10px;
    padding: 9px 0;
    align-items: center;
}
.s88-profil .user-row + .user-row {
    border-top: 1px solid var(--s88-profil-border);
}
.s88-profil .user-label {
    color: #475569;
    font-size: .72rem;
    font-weight: 700;
}
.s88-profil .user-value {
    min-width: 0;
    color: var(--s88-profil-muted);
    font-size: .76rem;
    overflow-wrap: anywhere;
}
.s88-profil .user-skills {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.s88-profil .user-skill {
    --user-progress: 0%;
    min-width: 0;
}
.s88-profil .user-skill-head {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.s88-profil .user-skill-name {
    color: var(--s88-profil-text);
    font-size: .72rem;
    font-weight: 600;
}
.s88-profil .user-skill-value {
    color: var(--s88-profil-muted);
    font-family: var(--ui-font-number);
    font-size: .68rem;
}
.s88-profil .user-progress {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}
.s88-profil .user-progress-bar {
    height: 100%;
    width: var(--user-progress, 0%);
    background: var(--s88-profil-accent);
    border-radius: inherit;
}
.s88-profil .user-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.s88-profil .user-tag {
    padding: 4px 7px;
    border: 1px solid var(--s88-profil-border);
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: .65rem;
    line-height: 1;
}
/* --------------------------------------------------------------------------
   11C. S88 TIMELINE
   Timeline vertikal dua sisi pada Full; menjadi satu jalur pada Mobile+Tablet.
   -------------------------------------------------------------------------- */
.s88-timeline {
    --s88-timeline-line: #d5dce5;
    --s88-timeline-accent: #087f86;
    --s88-timeline-surface: #ffffff;
    --s88-timeline-text: #1f2937;
    --s88-timeline-muted: #64748b;
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 12px 0;
    color: var(--s88-timeline-text);
    font-family: var(--ui-font-body);
}
.s88-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--s88-timeline-line);
    transform: translateX(-50%);
}
.s88-timeline-item {
    position: relative;
    width: 50%;
    min-width: 0;
    padding: 0 36px 24px 0;
    box-sizing: border-box;
}
.s88-timeline-item:nth-child(even) {
    margin-left: 50%;
    padding: 0 0 24px 36px;
}
.s88-timeline-marker {
    position: absolute;
    top: 0;
    right: -18px;
    z-index: 3;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--s88-timeline-accent);
    color: #ffffff;
    font-family: var(--ui-font-number);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}
.s88-timeline-item:nth-child(even) .s88-timeline-marker {
    right: auto;
    left: -18px;
}
.s88-timeline-card {
    min-width: 0;
    padding: 12px 14px;
    background: var(--s88-timeline-surface);
    border: 1px solid var(--s88-timeline-line);
    border-radius: var(--ui-radius-md);
    box-shadow: none;
}
.s88-timeline-item:nth-child(odd) .s88-timeline-card {
    text-align: right;
}
.s88-timeline-date {
    display: block;
    margin-bottom: 5px;
    color: var(--s88-timeline-accent);
    font-family: var(--ui-font-number);
    font-size: .68rem;
    font-weight: 600;
}
.s88-timeline-title {
    margin: 0;
    color: var(--s88-timeline-text);
    font-family: var(--ui-font-title);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
}
.s88-timeline-text {
    margin: 5px 0 0;
    color: var(--s88-timeline-muted);
    font-size: .75rem;
    line-height: 1.45;
}
.s88-timeline-meta {
    margin-top: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--s88-timeline-muted);
    font-size: .66rem;
}
.s88-timeline-item:nth-child(odd) .s88-timeline-meta {
    justify-content: flex-end;
}
/* Compatibility sementara untuk tiles lama non-ratio. */
.tiles-banner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tiles-stat > .tiles-body,
.tiles-balance > .tiles-body,
.tiles-kpi > .tiles-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tiles-notice {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}
.tiles-split {
    flex-direction: row;
    align-items: stretch;
}
.tiles-split-side {
    min-width: 34%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    border-left: 1px solid currentColor;
}
/* MOBILE + TABLET */
@media (max-width: 1279px) {
    .widget-banner {
        --widget-banner-icon-opacity: .7;
        min-height: 72px;
    }
    .widget-banner .widget-body {
        min-height: 72px;
        padding: .8rem;
    }
    .widget-banner > .widget-icon {
        inset: 0;
        font-size: clamp(5rem, 14vw, 7rem);
    }
    .widget-banner > .widget-icon > :is(i, svg) {
        transform: translateX(-1%) scale(0.8);
    }
    .widget-banner,
    .widget-metric,
    .widget-notice,
    .widget-info-strip {
        gap: 8px;
    }
    .widget-split { grid-template-columns: 1fr; }
    .widget-split-side {
        border-left: 0;
        border-top: 1px solid rgba(100, 116, 139, .20);
    }
    .widget-triple-grid { grid-template-columns: 1fr; }
    .widget-triple-item + .widget-triple-item {
        border-left: 0;
        border-top: 1px solid rgba(100, 116, 139, .16);
    }
    .widget-news { grid-template-columns: 1fr; }
    .widget-news-media img {
        min-height: 140px;
        aspect-ratio: 16 / 8;
    }
    .widget-resume { grid-template-columns: 1fr; }
    .widget-resume-side {
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }
    .widget-resume-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }
    .widget-social-avatar {
        width: 76px;
        height: 76px;
        margin-top: -38px;
    }
    .widget-profile-head { min-height: 104px; padding: .8rem; }
    .widget-profile-avatar { width: 54px; height: 54px; min-width: 54px; }
    .widget-profile-link { min-height: 46px; padding: .55rem .8rem; }
    .widget-story-grid { grid-template-columns: 1fr; gap: 24px; }
    .widget-story-item { min-height: 300px; padding-bottom: 26px; }
    .widget-story-media { width: 74%; min-height: 230px; }
    .widget-story-panel { width: 70%; min-height: 210px; padding: 1rem; }
    .widget-social-profile.is-strip .widget-social-avatar { width: 92px; height: 92px; }
    .widget-counter-content {
        --widget-counter-size: clamp(118px, 29vw, 176px);
        --widget-counter-overlap: calc(var(--widget-counter-size) * -.14);
        padding: 52px 6px;
    }
    .widget-counter-grid {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding-inline: 0;
        justify-content: center;
    }
    .widget-counter-grid::before {
        left: 0;
        right: 0;
        height: 1px;
    }
    .widget-counter-inner {
        width: 90%;
        padding: 4%;
    }
    .widget-counter-inner::after {
        inset: 4px;
    }
    .s88-profil {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .s88-profil .user-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }
    .s88-profil .user-actions .btn {
        flex: 1 1 auto;
    }
    .s88-profil .user-link {
        align-items: flex-start;
    }
    .s88-profil .user-link-value {
        text-align: left;
        margin-left: 0;
    }
    .s88-timeline {
        padding-left: 0;
    }
    .s88-timeline::before {
        left: 18px;
        transform: none;
    }
    .s88-timeline-item,
    .s88-timeline-item:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding: 0 0 18px 50px;
    }
    .s88-timeline-marker,
    .s88-timeline-item:nth-child(even) .s88-timeline-marker {
        left: 0;
        right: auto;
    }
    .s88-timeline-item:nth-child(odd) .s88-timeline-card {
        text-align: left;
    }
    .s88-timeline-item:nth-child(odd) .s88-timeline-meta {
        justify-content: flex-start;
    }
}
/* 12. NAVIGASI CUSTOM - Navigasi khusus aplikasi; tidak memakai selector .nav atau .navbar Bootstrap.
   Penggunaan: class="navigasi", class="navigasi-brand", class="navigasi-btn" */
.navigasi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 18px;
    background: rgba(20, 20, 20, .20);
    border-bottom: 1px solid rgba(250, 250, 250, .18);
}
.navigasi-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    min-width: 0;
}
.navigasi-logo img { display: block; max-width: 100%; height: auto; }
.navigasi-divider {
    width: 2px;
    align-self: stretch;
    background: #d4af37;
}
.navigasi-title {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--ui-theme-text, var(--ui-text-light));
    font-family: var(--ui-font-help);
    line-height: 1;
    letter-spacing: 5px;
}
.navigasi-subtitle {
    margin-top: 4px;
    font-size: 1.5rem;
    font-weight: 400;
    color: rgba(220, 220, 220, .85);
    font-family: var(--ui-font-label);
}
.navigasi-btn-icon,
.navigasi-btn-menu {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--ui-radius-lg);
    border: 1px solid var(--ui-border-strong);
    background: #fff;
    color: #111827;
    font-size: 1.5rem;
    font-family: var(--ui-font-body);
    cursor: pointer;
}
.navigasi-button {
    display: flex;
    align-items: center;
    gap: 4px;
}
.navigasi-btn {
    width: auto;
    min-height: 44px;
    padding: 8px 18px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: var(--ui-radius-lg);
    border: 1px solid var(--ui-border-strong);
    background: #fff;
    color: #111827;
    font-size: .8rem;
    font-weight: 500;
    font-family: var(--ui-font-title);
    text-transform: capitalize;
    white-space: nowrap;
    cursor: pointer;
}
.navigasi-btn i,
.navigasi-btn svg { font-size: 1.3rem; }
.navigasi-btn:hover,
.navigasi-btn-icon:hover,
.navigasi-btn-menu:hover,
.navigasi-dropdown-item:hover,
.navigasi-dropdown-item:focus-visible {
    background: #334155;
    color: #fff;
    border-color: #0f172a;
}
.navigasi-mobile {
    display: none;
    position: relative;
}
.navigasi-dropdown {
    min-width: 220px;
    margin-top: 8px;
    padding: 0;
    background: transparent;
    border: 0;
}
.navigasi-dropdown-item {
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: var(--ui-radius-md);
    border: 1px solid var(--ui-border-strong);
    background: #fff;
    color: #111827;
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--ui-font-help);
    text-transform: capitalize;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}
.navigasi-dropdown li {
    margin-bottom: 8px;
    list-style: none;
}
.navigasi-dropdown li:last-child { margin-bottom: 0; }
@media (max-width: 1279px) {
    .navigasi { padding: 12px; gap: 12px; }
    .navigasi-logo img { width: 72px; }
    .navigasi-title { font-size: 1.5rem; letter-spacing: 4px; }
    .navigasi-subtitle { font-size: .8rem; font-family: var(--ui-font-body); }
    .navigasi-button { display: none; }
    .navigasi-mobile { display: block; flex-shrink: 0; }
    .navigasi-btn-icon { display: flex; flex-shrink: 0; }
}
/* 13. FAQ - Accordion visual ringan; mekanisme collapse tetap milik Bootstrap.
   Penggunaan: class="faq-item", class="faq-header", class="faq-body" */
.faq-item {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--ui-border-dark);
    border-radius: var(--ui-radius-md);
    background: #fff;
}
.faq-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 0;
    background: #fafafa;
    color: #1e293b;
    text-align: left;
    cursor: pointer;
}
.faq-header:not(.collapsed) {
    background: #f5f5f5;
    border-bottom: 1px solid #d1d5db;
}
.faq-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}
.faq-icon i { font-size: 1.2rem; }
.faq-title-wrap { flex: 1; min-width: 0; }
.faq-title {
    color: #1e293b;
    font-size: .85rem;
    font-weight: 600;
    font-family: var(--ui-font-subtitle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.faq-desc {
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid #dbe3ec;
    border-radius: 20px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .75rem;
    font-family: var(--ui-font-body);
    text-transform: uppercase;
    font-weight: 400;
}
.faq-body {
    padding: 18px;
    background: #fff;
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
    font-family: var(--ui-font-body);
}
.faq-section-title {
    margin: 20px 0 10px;
    color: #1e293b;
    font-size: .9rem;
    font-weight: 600;
}
.faq-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    border-top: 1px solid var(--ui-border-dark);
    background: #fafafa;
    color: #3c3c3c;
    font-size: .75rem;
    font-family: var(--ui-font-body);
}
.faq-footer span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.faq-body-primary,
.faq-body-secondary,
.faq-body-success,
.faq-body-danger,
.faq-body-warning,
.faq-body-info,
.faq-body-light,
.faq-body-dark {
    padding: 18px;
    margin: 12px 0;
}
.faq-body-primary { background: #f8fbff; border-left: 4px solid #2563eb; color: #1e3a5f; }
.faq-body-secondary { background: #f8f9fa; border-left: 4px solid #6b7280; color: #374151; }
.faq-body-success { background: #f6fcf8; border-left: 4px solid #16a34a; color: #166534; }
.faq-body-danger { background: #fff7f7; border-left: 4px solid #dc2626; color: #991b1b; }
.faq-body-warning { background: #fffdf6; border-left: 4px solid #d97706; color: #92400e; }
.faq-body-info { background: #f4fcfd; border-left: 4px solid #0891b2; color: #155e75; }
.faq-body-light { background: #fafafa; border-left: 4px solid #d1d5db; color: #52525b; }
.faq-body-dark { background: #f3f4f6; border-left: 4px solid #374151; color: #1f2937; }
.faq-header:not(.collapsed) .faq-icon { color: #2563eb; }
.faq-header:not(.collapsed) .faq-title { color: #0f172a; }
.faq-header:not(.collapsed) .faq-desc { background: #e2e8f0; color: #475569; }
.faq-body p { margin: 0 0 12px; }
.faq-body ul,
.faq-body ol { margin: 10px 0; padding-left: 22px; }
.faq-body li { margin: 6px 0; }
.faq-body strong { color: #1e293b; font-weight: 600; }
.faq-body a { color: #2563eb; text-decoration: none; }
.faq-body code { padding: 2px 5px; background: #f8fafc; color: #334155; border-radius: 4px; }
@media (max-width: 1279px) {
    .faq-header { padding: 10px 12px; gap: 8px; }
    .faq-icon { width: 32px; height: 32px; }
    .faq-icon i { font-size: 1rem; }
    .faq-title { font-size: .8rem; }
    .faq-desc { font-size: .7rem; padding: 3px 8px; }
    .faq-body { padding: 14px; font-size: .85rem; line-height: 1.6; }
    .faq-footer { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 14px; font-size: .75rem; }
}
/* ==========================================================================
   15. WIDGET USER - Widget dashboard member universal.
   ========================================================================== */
.widget-user {
    position: relative;
    box-sizing: border-box;
    isolation: isolate;
    width: 90%;
    min-width: 0;
    min-height: 320px;
    margin: 14px auto; 
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    overflow: hidden;
    color: var(--ui-theme-text, var(--ui-text-light));
    border: 1px solid rgba(250, 250, 250, .8);
    border-radius: 24px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.widget-user::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(20, 20, 50, .4);
}
/* WIDGET USER LEFT */
.widget-user-left {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    padding: 12px;
}
/* WIDGET USER HERO */
.widget-user-hero {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px;
}
/* WIDGET HERO EYEBROW */
.widget-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 12px;
    border: 2px solid rgb(240, 220, 150);
    border-radius: 999px;
    background: rgba(0, 0, 0, .5) !important;
    color: rgb(240, 220, 150);
    font-family: var(--ui-font-help);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.widget-hero-eyebrow i {
    flex: 0 0 auto;
    color: rgb(240, 220, 150);
    font-size: 1.2rem;
}
/* WIDGET HERO TITLE */
.widget-user #widget-hero-title {
    margin: 24px 0 24px 24px;
    color: rgb(220, 240, 250);
    font-family: var(--ui-font-caption);
    font-size: 1.4rem;
    font-weight: 200;
    line-height: 1;
}
.widget-user #widget-hero-title span {
    display: block;
    margin: 0 0 0 24px;
    color: rgb(250, 200, 50);
    font-family: var(--ui-font-title);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
}
/* WIDGET HERO DESCRIPTION */
.widget-hero-desc {
    max-width :640px;
    margin: 0 24px 24px 0;
    color: rgb(200, 200, 250);
    font-family: var(--ui-font-number);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: .1em;
}
/* WIDGET HERO IDENTITY */
.widget-hero-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
}
.widget-hero-identity > span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 42px;
    padding: 4px 6px;
    color: rgba(250, 250, 250, .9);
    background: rgba(10, 10, 10, .5);
    border: 1px solid rgba(250, 250, 250, .5);
    border-radius: var(--ui-radius-md);
    font-family: var(--ui-font-help);
    font-size: 0.8rem;
    line-height: 1.15;
}
.widget-hero-identity > span i {
    color: rgb(225, 190, 95);
    font-size: 1.1rem;
}
/* WIDGET USER RIGHT */
.widget-user-right {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: center;
    align-self: center;
    justify-self: center;
    gap: 4px;
    padding: 4px;
    margin: 0;
}
/* USER DASHBOARD */
.widget-user-dashboard {
    min-width: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-self: end;
    gap: 4px;
    margin: 0;
    padding: 0;
}
/* USER STAT */
.user-stat {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 82px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 10px;
    margin: 0;
    color: rgb(240, 220, 150);
    background: rgba(10, 10, 20, 0.7);
    border: 1px solid rgb(240, 220, 150);
    border-radius: 24px;
    box-shadow: none;
}
/* USER STAT ICON */
.user-stat > i {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin: 0;
    color: rgb(220, 200, 100);
    font-size: 1.8rem;
}
/* USER STAT LABEL */
.user-stat-label {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: block;
    margin: 0 0 4px;
    padding: 0;
    color: rgb(220, 200, 100);
    font-family: var(--ui-font-title);
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.1;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
/* USER STAT VALUE */
.user-stat-value {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    display: block;
    margin: 4px 0 0;
    padding: 0;
    color: rgb(250, 250, 250);
    font-family: var(--ui-font-number);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .1em;
    overflow-wrap: anywhere;
    text-decoration: none !important; 
    border-bottom: none !important;
    box-shadow: none !important;
}
/* USER ACTIONS */
.widget-user .user-actions {
    min-width: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}
/* USER ACTION BUTTON */
.widget-user .user-actions > .btn {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 8px 6px;
    text-align: center;
    color: rgb(10, 10, 0);
    background: linear-gradient(
        50deg,
        rgba(250, 250, 220, 0.9) 0%,
        rgba(210, 250, 210, 0.7) 30%,
        rgba(210, 250, 210, 0.8) 100%
    );
    border: 2px solid rgb(210, 250, 220);
    border-radius: 18px;
    box-shadow: none;
    transition: none !important;
}
/* USER ACTION BUTTON STATE */
.widget-user .user-actions > .btn:hover,
.widget-user .user-actions > .btn:focus,
.widget-user .user-actions > .btn:active {
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}
/* USER ACTION ICON */
.widget-user .user-actions > .btn i {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.2;
}
/* USER ACTION TEXT */
.widget-user .user-actions > .btn span {
    display: block;
    min-width: 0;
    margin: 0;
    font-family: var(--ui-font-title);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: .2em;
    text-transform: capitalize;
    overflow-wrap: anywhere;
}
/* WIDGET USER FOOTER */
.widget-user-footer {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
/* MOBILE + TABLET (max-width: 1279px) */
@media (max-width: 1279px) {
    .widget-user {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        min-width: 0;
        min-height: 250px;
        margin: 0 auto;
        padding: 8px;
        gap: 10px;
        border-radius: var(--ui-radius-md);
    }
    /* Kiri / Hero Section */
    .widget-user-left {
        width: 100%;
        display: flex;
        justify-content: center;
        min-width: 0;
        padding: 4px;
    }
    .widget-user-hero {
        width: 90%;
        padding: 2px;
    }
    /* Kanan / Stats & Actions Container */
    .widget-user-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        min-width: 0;
        gap: 8px;
        padding: 4px;
    }
    /* Dashboard & Actions dibuat Row Horizontal */
    .widget-user-dashboard,
    .widget-user .user-actions {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
    }
    /* Memastikan tombol action & stat membagi lebar sama rata dalam 1 baris */
    .widget-user-dashboard > *,
    .widget-user .user-actions > .btn {
        flex: 1 1 0%;
        min-width: 0; /* Mencegah overflow flex item */
    }
    /* TYPOGRAPHY & SPACING ADJUSTMENTS */
    .widget-hero-eyebrow {
        gap: 4px;
        margin-bottom: 6px;
        font-size: .8rem;
    }
    .widget-hero-eyebrow i {
        font-size: .8rem;
    }
    .widget-user #widget-hero-title {
        font-size: .8rem;
        line-height: 1.2;
    }
    .widget-user #widget-hero-title span {
        display: block;
        margin-top: 2px;
        font-size: 1rem;
    }
    .widget-hero-desc {
        margin-top: 6px;
        font-size: .9rem;
        line-height: 1;
    }
    .widget-hero-identity {
        gap: 3px;
        margin-top: 10px;
    }
    .widget-hero-identity > span {
        min-height: 32px;
        gap: 3px;
        padding: 3px 6px;
        font-size: .7rem;
        border-radius: 12px;
    }
    .widget-hero-identity > span i {
        font-size: .8rem;
    }
    /* STAT ITEMS */
    .user-stat {
        min-height: 84px;
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr); 
        grid-template-rows: auto auto;
        grid-template-areas: 
            "icon label"
            "value value"; 
        column-gap: 8px;
        row-gap: 4px;
        align-items: center;
        padding: 8px 12px;
        border-radius: 18px;
        text-decoration: none !important;
    }
    /* Positioning berdasarkan area */
    .user-stat > i {
        grid-area: icon;
        width: 32px;
        height: 32px;
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .user-stat-label {
        grid-area: label;
        font-size: .8rem;
        line-height: 1;
        letter-spacing: .2em;
    }
    .user-stat-value,
    .user-stat-value:hover,
    .user-stat-value:visited {
        grid-area: value;
        font-size: 1.1rem;
        line-height: 1.2;
        letter-spacing: .05em;
        margin: 8px;
        text-decoration: none !important; /* Mencegah garis bawah jika elemen berupa link */
        border-bottom: none !important;
    }
  /* ACTION BUTTONS */
    .widget-user .user-actions > .btn {
        min-height: 32px;
        gap: 6px;
        padding: 14px 4px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: rgb(10, 10, 0);
        background: linear-gradient(
            50deg,
            rgba(250, 250, 220, 0.7) 0%,
            rgba(210, 250, 210, 0.5) 30%,
            rgba(210, 250, 210, 0.6) 100%
        );
    border: 2px solid rgb(10, 50, 20);
    border-radius: 22px;
    }
    .widget-user .user-actions > .btn i {
        font-size: 1.2rem;
        flex-shrink: 0;
    }
    .widget-user .user-actions > .btn span {
        font-family: var(--ui-font-caption);
        font-size: 0.9rem;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
    }
     /* FOOTER */
    .widget-user-footer {
        width: 100%;
        min-height: 30px;
        padding-top: 5px;
    }
}
/* ==========================================================================
   MOBILE + TABLET (max-width: 1279px)
   Tetap mempertahankan konsep: hero di atas, statistik satu baris,
   action satu baris. Hanya skala dan spacing yang dipadatkan.
   ========================================================================== */
@media (max-width: 1279px) {
    .widget-user {
        width: 100%;
        min-height: 0;
        padding: 6px;
        gap: 8px;
        border-radius: 10px;
    }
    .widget-user-left,
    .widget-user-right {
        padding: 2px;
    }
    .widget-user-hero {
        width: 100%;
        padding: 2px;
    }
    .widget-hero-eyebrow {
        margin-bottom: 4px;
        padding: 5px 8px;
        letter-spacing: .12em;
    }
    .widget-user #widget-hero-title,
    .widget-hero-desc {
        margin-left: 4px;
        margin-right: 4px;
    }
    .widget-hero-identity {
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .widget-hero-identity::-webkit-scrollbar {
        display: none;
    }
    .widget-hero-identity > span {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .widget-user-dashboard,
    .widget-user .user-actions {
        gap: 4px;
    }
    .user-stat {
        min-height: 48px;
        grid-template-columns: 20px minmax(0, 1fr);
        column-gap: 3px;
        padding: 4px;
        border-radius: 10px;
    }
    .user-stat > i {
        width: 20px;
        height: 20px;
        font-size: .9rem;
    }
    .user-stat-label {
        font-size: clamp(.48rem, 2vw, .58rem);
        white-space: nowrap;
    }
    .user-stat-value {
        margin-top: 2px;
        font-size: clamp(.58rem, 2.6vw, .72rem);
        letter-spacing: .04em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .widget-user .user-actions > .btn {
        min-height: 44px;
        gap: 4px;
        padding: 4px 5px;
        border-radius: 10px;
    }
    .widget-user .user-actions > .btn i {
        font-size: 1.15rem;
    }
    .widget-user .user-actions > .btn span {
        font-size: clamp(.6rem, 2.6vw, .78rem);
    }
}
/* 17. MEMBER CARD - Card node jaringan custom; modifier border tidak memakai utility Bootstrap.
   Penggunaan: class="member-card member-border-primary" */
.member-card {
    position: relative;
    z-index: 2;
    width: 160px;
    min-width: 160px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    background: rgba(250, 250, 250, .98);
    border: 1px solid rgba(0, 0, 0, .22);
    border-radius: var(--ui-radius-lg);
    text-align: center;
}
.member-header {
    padding: 12px 12px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}
.member-icon { display: flex; align-items: center; justify-content: center; order: 2; }
.member-avatar { width: 32px; height: 32px; border-radius: var(--ui-radius-md); object-fit: cover; display: block; }
.member-caption {
    order: 1;
    margin-top: 2px;
    font-size: .75rem;
    font-weight: 600;
    font-family: var(--ui-font-subtitle);
    text-transform: uppercase;
    color: #495057;
}
.member-body {
    padding: 4px 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.member-title {
    margin: 0;
    line-height: 1.05;
    font-size: .9rem;
    font-weight: 500;
    font-family: var(--ui-font-body);
    text-transform: uppercase;
    color: #0f2942;
    overflow-wrap: anywhere;
}
.member-subtitle {
    display: block;
    margin-top: 8px;
    line-height: 1.1;
    font-size: .75rem;
    font-weight: 400;
    font-family: var(--ui-font-body);
    text-transform: capitalize;
    color: #64748b;
}
.member-footer {
    padding: 8px 6px;
    border-top: 1px solid rgba(0, 0, 0, .18);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.member-footer-kiri,
.member-footer-tengah,
.member-footer-kanan {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.member-border-purple { border-top: 4px solid #7048e8; }
.member-border-danger { border-top: 4px solid #dc2626; }
.member-border-primary { border-top: 4px solid #1c7ed6; }
.member-border-warning { border-top: 4px solid #f08c00; }
.member-border-success { border-top: 4px solid #5c940d; }
.member-border-dark { border-top: 4px solid #495057; }
.member-border-info { border-top: 4px solid #0c8599; }
.member-border-secondary { border-top: 4px solid #adb5bd; }
/* 18. FINTECH COMPONENTS - Komponen finansial custom memakai border, tanpa shadow dan transition.
   Penggunaan: class="fintech-bonus-card fintech-tier-gold" atau class="fin-card" */
.fintech-bonus-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: var(--ui-radius-lg);
}
.fintech-bonus-header {
    padding: 14px 14px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}
.fintech-tier-badge {
    padding: 3px 8px;
    border: 1px solid #cbd5e1;
    border-radius: var(--ui-radius-sm);
    background: #f1f5f9;
    color: #334155;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.fintech-date-label { font-size: .75rem; font-weight: 500; color: #64748b; }
.fintech-bonus-body {
    padding: 16px 14px;
    text-align: center;
    flex: 1;
    background: #fff;
}
.fintech-bonus-body small {
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.fintech-amount-title { margin: 0; font-size: .8rem; font-weight: 500; color: #252f46; line-height: 1.2; }
.fintech-amount-currency { margin-right: 3px; font-size: .9rem; font-weight: 600; color: #252f46; }
.fintech-bonus-footer {
    display: flex;
    align-items: center;
    background: #fff;
    border-top: 1px solid #cbd5e1;
}
.fintech-footer-col {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.fintech-footer-col:first-child { border-right: 1px solid #cbd5e1; }
.fintech-side-label { margin-bottom: 2px; font-size: .7rem; font-weight: 600; color: #64748b; letter-spacing: .04em; }
.fintech-side-value { font-size: .85rem; font-weight: 700; color: #0f172a; }
.fintech-tier-royal { border-top: 4px solid #000; }
.fintech-tier-prime { border-top: 4px solid #7048e8; }
.fintech-tier-elite { border-top: 4px solid #1c7ed6; }
.fintech-tier-gold { border-top: 4px solid #f08c00; }
.fintech-tier-upgrade { border-top: 4px solid #5c940d; }
.fintech-tier-silver { border-top: 4px solid #495057; }
.fintech-tier-hemat { border-top: 4px solid #0c8599; }
.fintech-tier-none { border-top: 4px solid #adb5bd; }
.fin-card {
    padding: 24px;
    background: #fff;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: var(--ui-radius-lg);
    font-family: var(--ui-font-body);
}
.fin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid #cbd5e1;
}
.fin-title { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #475569; }
.fin-date {
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    background: #f8fafc;
    color: #64748b;
    font-size: .75rem;
    font-weight: 600;
}
.fin-total-wrap { text-align: center; margin-bottom: 24px; }
.fin-total-label { display: block; margin-bottom: 8px; font-size: .75rem; text-transform: uppercase; color: #64748b; letter-spacing: 1px; font-weight: 600; }
.fin-total-amount { margin: 0; font-size: 2.25rem; font-weight: 800; color: #0f172a; line-height: 1; }
.fin-alert {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 24px;
    border: 1px solid #cbd5e1;
    border-radius: var(--ui-radius-md);
    font-size: .8rem;
    line-height: 1.5;
}
.fin-alert i { margin-right: 12px; font-size: 1.25rem; }
.fin-req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fin-req-box {
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: var(--ui-radius-md);
    text-align: center;
}
.fin-req-box.is-success { background: #f0fdf4; border-color: #86efac; }
.fin-req-label { display: block; margin-bottom: 10px; font-size: .75rem; text-transform: uppercase; color: #64748b; font-weight: 700; letter-spacing: .5px; }
.fin-req-badge {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    background: #e2e8f0;
    color: #475569;
    font-size: .75rem;
    font-weight: 600;
}
.fin-req-badge.is-success { background: #22c55e; color: #fff; border-color: #15803d; }
@media (max-width: 1279px) {
    .fin-card { padding: 16px; }
    .fin-header { gap: 8px; margin-bottom: 18px; }
    .fin-total-amount { font-size: 1.8rem; }
    .fin-req-grid { grid-template-columns: 1fr; gap: 10px; }
}
/* 19. LOADING - Loading statis tanpa spinner animation, pulse, dots atau glow.
   Penggunaan: class="ui-loading ui-loading-primary" */
.ui-loading {
    position: relative;
    width: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: hidden;
    background: var(--ui-gradient-dark);
    color: var(--ui-text-light);
    border: 1px solid var(--ui-border-light);
    border-radius: var(--ui-radius-lg);
}
.ui-loading-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(250, 250, 250, .70);
    border-top-color: #d4af37;
}
.ui-loading-text {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(250, 250, 250, .85);
}
.ui-loading-sm { padding: 14px; gap: 8px; }
.ui-loading-sm .ui-loading-spinner { width: 32px; height: 32px; }
.ui-loading-lg { padding: 40px 24px; }
.ui-loading-lg .ui-loading-spinner { width: 58px; height: 58px; }
.ui-loading-lg .ui-loading-text { font-size: .95rem; }
.ui-loading-warning .ui-loading-spinner { border-top-color: #ffc107; }
.ui-loading-success .ui-loading-spinner { border-top-color: #20c997; }
.ui-loading-danger .ui-loading-spinner { border-top-color: #ff4d6d; }
.ui-loading-primary .ui-loading-spinner { border-top-color: #4d8dff; }
@media (max-width: 1279px) {
    .ui-loading { border-radius: var(--ui-radius-md); padding: 18px 14px; }
    .ui-loading-spinner { width: 34px; height: 34px; }
    .ui-loading-text { font-size: .75rem; }
}
/* 20. FLOATING NOTIFICATION - Notification tampil langsung tanpa slide, scale, progress animation atau shadow.
   Penggunaan: id="notif-container" dan class="notif-card bg-oceans" */
#notif-container {
    position: fixed;
    right: 20px;
    bottom: 5px;
    z-index: 999;
    width: 50%;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}
.notif-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    overflow: hidden;
    background: var(--ui-bg-gradient, #fff);
    color: var(--ui-theme-text, var(--ui-text-dark));
    border: 1px solid var(--ui-theme-border, var(--ui-border-dark));
    border-radius: var(--ui-radius-md);
    pointer-events: auto;
}
#notif-container::after {
    content: "";
    display: block;
    min-height: 80px;
    flex-shrink: 0;
}
.notif-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid currentColor;
}
.notif-icon i { font-size: 1.6rem; line-height: 1; color: inherit; }
.notif-body {
    position: relative;
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}
.notif-title {
    padding-right: 90px;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.2;
    font-family: var(--ui-font-title);
    color: inherit;
}
.notif-desc {
    position: absolute;
    top: 0;
    right: 0;
    white-space: nowrap;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.2;
    font-family: var(--ui-font-help);
    color: inherit;
    text-align: right;
}
.notif-subtitle {
    margin-top: 5px;
    padding: 4px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.3;
    color: inherit;
    font-family: var(--ui-font-body);
}
.notif-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    opacity: .45;
}
@media (max-width: 1279px) {
    #notif-container { right: 12px; bottom: 50px; width: calc(100% - 24px); }
    .notif-icon { width: 42px; height: 42px; min-width: 42px; }
    .notif-icon i { font-size: 1.4rem; }
    .notif-title { padding-right: 72px; font-size: .85rem; }
    .notif-desc { font-size: .75rem; }
    .notif-subtitle { font-size: .8rem; }
}
/* 22. CERTIFICATE - Nama class dibuat spesifik agar tidak memakai .title/.nama/.bonus generik.
   Penggunaan: class="sertifikat", class="cert-title", class="cert-name" */
.sertifikat {
    position: relative;
    width: 840px;
    max-width: 100%;
    height: 100%;
    aspect-ratio: 840 / 560;
    margin: .7rem auto;
    padding: 1rem 1rem 1.5rem;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff url("../layouts/img/bg_sertifikat.webp") no-repeat center;
    background-size: cover;
    border: 1px solid rgba(0, 0, 0, .20);
    border-radius: var(--ui-radius-xl);
    text-align: center;
}
.cert-logo {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: clamp(50px, 8vw, 80px);
    height: auto;
}
.cert-tag {
    margin-bottom: .8rem;
    font-family: var(--ui-font-title);
    font-size: clamp(16px, 1.2vw, 20px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: #866f23;
}
.cert-title {
    font-size: clamp(16px, 2.5vw, 28px);
    font-family: var(--ui-font-title);
    font-weight: 500;
    letter-spacing: -.02em;
    color: #866f23;
    text-transform: uppercase;
    line-height: 1.2;
}
.cert-name,
.cert-noid,
.cert-bonus {
    background: linear-gradient(50deg, #145a5a 0%, #1478a0 45%, #3278fa 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.cert-name {
    margin-top: .8rem;
    margin-bottom: .2rem;
    font-size: clamp(24px, 4.5vw, 36px);
    font-family: var(--ui-font-title);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -.01em;
}
.cert-noid {
    font-size: clamp(22px, 4.2vw, 32px);
    font-family: var(--ui-font-body);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.cert-message {
    max-width: 520px;
    margin: 1.5rem auto;
    font-size: clamp(14px, 2vw, 20px);
    font-family: var(--ui-font-caption);
    color: #5c5b5a;
    line-height: 1.8;
}
.cert-bonus {
    margin-top: 1.8rem;
    font-size: clamp(18px, 4.5vw, 42px);
    font-family: var(--ui-font-body);
    font-weight: 600;
    letter-spacing: -.03em;
}
@media (max-width: 1279px) {
    .sertifikat { padding: .5rem; aspect-ratio: auto; }
    .cert-logo { top: 1rem; right: 1rem; }
    .cert-message { margin: 1rem auto; }
}
/* 23. LOGOUT MODAL EXTENSION - Tambahkan class custom pada elemen Bootstrap; selector .modal tidak dioverride.
   Penggunaan: class="modal-content logout-panel", class="btn logout-btn-danger" */
.logout-panel {
    overflow: hidden;
    background: rgba(255, 255, 255, .99);
    border: 1px solid #cbd5e1;
    border-radius: var(--ui-radius-xl);
}
.logout-status-danger { background: rgba(220, 53, 69, .12); border: 1px solid rgba(220, 53, 69, .30); }
.logout-status-success { background: rgba(25, 135, 84, .12); border: 1px solid rgba(25, 135, 84, .30); }
.logout-btn-danger {
    background: linear-gradient(135deg, #dc3545, #b02a37);
    color: #fff;
    border: 1px solid #842029;
    box-shadow: 0 2px 4px rgba(132, 32, 41, .22);
}
.logout-btn-danger:hover {
    background: #b02a37;
    color: #fff;
    border-color: #6f1b24;
}
.logout-btn-light {
    background: #fff;
    color: #334155;
    border: 1px solid #cbd5e1;
}
.logout-btn-light:hover {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #94a3b8;
}
/* 24. ACCESSIBILITY / FINAL - Focus memakai outline, bukan shadow atau animasi.
   Penggunaan: otomatis. */
.navigasi-btn:focus-visible,
.navigasi-btn-icon:focus-visible,
.navigasi-btn-menu:focus-visible,
.navigasi-dropdown-item:focus-visible,
.pod-btn:focus-visible,
.user-action-btn:focus-visible,
.logout-btn-danger:focus-visible,
.logout-btn-light:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
/* 25. AUTH LOGIN PORTAL - Layout login full-screen dengan navbar full width, hero dominan, dan form kecil.
   Penggunaan: class="s58-login-page" */
.s58-login-page {
    --s88-auth-navy: #061624;
    --s88-auth-navy-2: #0a1d2d;
    --s88-auth-panel: rgba(4, 18, 29, .94);
    --s88-auth-gold: #d6a740;
    --s88-auth-gold-light: #f3cf74;
    --s88-auth-white: #f7f8f8;
    --s88-auth-muted: #c4ccd2;
    --s88-auth-line: rgba(230, 192, 101, .42);
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(2, 14, 23, .72) 0%,
            rgba(2, 14, 23, .46) 42%,
            rgba(2, 14, 23, .20) 72%,
            rgba(2, 14, 23, .16) 100%
        ),
        linear-gradient(
            0deg,
            rgba(2, 11, 18, .50),
            rgba(2, 11, 18, .02) 55%
        ),
        url('../layouts/img/authlogin_bg.webp')
        center center / cover no-repeat;
    color: var(--s88-auth-white);
    font-family: var(--ui-font-body);
}
.s58-login-page,
.s58-login-page *,
.s58-login-page *::before,
.s58-login-page *::after {
    animation: none !important;
    transition: none !important;
}
.s58-login-page a {
    text-decoration: none;
}
.s58-login-page button {
    box-shadow: none !important;
}
.s58-login-page a:focus-visible,
.s58-login-page button:focus-visible,
.s58-login-page input:focus-visible {
    outline: 2px solid var(--s88-auth-gold-light) !important;
    outline-offset: 2px;
}
.s58-auth-navbar-wrap {
    width: 100%;
    padding: 0;
    position: relative;
    z-index: 10;
}
.s58-auth-navbar {
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 8px 24px;
    background: rgba(3, 18, 29, .94) !important;
    border: 0;
    border-bottom: 1px solid rgba(232, 198, 119, .32);
    border-radius: 0;
}
.s58-auth-navbar-container {
    width: min(100%, 1500px);
    margin: 0 auto;
    padding: 0 !important;
}
.s58-auth-brand {
    width: 180px;
    margin: 0 26px 0 0;
    padding: 0;
}
.s58-auth-brand img {
    display: block;
    width: 100%;
    height: auto;
}
.s58-auth-navbar .navbar-nav {
    gap: 18px;
}
.s58-auth-navbar .nav-link {
    position: relative;
    padding: 12px 11px !important;
    color: #f1f3f4 !important;
    font-size: .88rem;
    font-weight: 600;
}
.s58-auth-navbar .nav-link:hover,
.s58-auth-navbar .nav-link:focus,
.s58-auth-navbar .nav-link.active {
    color: var(--s88-auth-gold-light) !important;
}
.s58-auth-navbar .nav-link.active::after {
    content: '';
    position: absolute;
    right: 11px;
    bottom: 2px;
    left: 11px;
    height: 2px;
    background: var(--s88-auth-gold);
}
.s58-auth-navbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ececec;
    font-size: .88rem;
    white-space: nowrap;
}
.s58-auth-trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-right: 1px solid rgba(200, 200, 50, .7);
    color: var(--s88-auth-gold-light);
}
.s58-auth-trust i {
    color: var(--s88-auth-gold-light);
    font-size: 1.18rem;
}
.s58-auth-trust strong {
    color: var(--s88-auth-gold-light);
    font-family: var(--ui-font-title);
    font-size: 1.2rem;
    text-transform: uppercase;
}
.s58-auth-audio,
.s58-auth-toggler {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 1px solid rgba(232, 198, 119, .32) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .04) !important;
    color: var(--s88-auth-gold-light) !important;
}
.s58-auth-toggler {
    font-size: 1.3rem;
}
.s58-auth-navbar .collapsing {
    height: auto !important;
    transition: none !important;
}
.s58-auth-main {
    width: min(100%, 1500px);
    min-height: calc(100vh - 136px);
    flex: 1;
    margin: 0 auto;
    padding: 34px 54px 38px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(50px, 8vw, 130px);
    position: relative;
    z-index: 2;
}
.s58-auth-hero {
    max-width: 820px;
    align-self: center;
    padding: 0 0 16px;
}
.s58-auth-kicker {
    display: block;
    margin-bottom: 20px;
    color: var(--s88-auth-white);
    font-family: var(--ui-font-caption);
    font-size: clamp(1.8rem, 2.5vw, 2.7rem);
    font-weight: 300;
    line-height: 0.7;
}
.s58-auth-title {
    margin: 0;
    background: linear-gradient(
        50deg,
        rgba(255, 255, 255, 1) 0%,   
        rgba(225, 230, 235, 1) 70%,  
        rgba(255, 215, 0, 1) 80%,    
        rgba(255, 69, 0, 1) 100%     
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--ui-font-subtitle);
    font-size: clamp(5rem, 8.5vw, 8.7rem);
    font-weight: 700;
    letter-spacing: -.06em;
    line-height: .90;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .22));
}
.s58-auth-title span {
    background: linear-gradient(
        180deg,
        #fff0b4 0%,
        #e8bd55 52%,
        #bd7e19 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.s58-auth-tagline {
    max-width: 680px;
    margin: 0;
    color: var(--s88-auth-gold);
    font-family: var(--ui-font-help);
    font-size: clamp(1.08rem, 1.5vw, 1.2rem);
    font-weight: 500;
}
.s58-auth-divider {
    width: 62px;
    height: 2px;
    margin: 10px 0 28px;
    background: var(--ui-gradient-luxury);
}
.s58-auth-copy {
    max-width: 590px;
    margin: 0;
    color: #e3e8eb;
    font-size: .96rem;
    line-height: 1.65;
}
.s58-auth-features {
    max-width: 610px;
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.s58-auth-feature {
    min-width: 0;
    color: #fff;
}
.s58-auth-feature-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    padding: 0;
    overflow: hidden;
    background: rgba(6, 23, 34, .72);
    border: 1px solid rgba(226, 179, 75, .78);
    border-radius: 10px;
    color: var(--s88-auth-gold-light);
}
.s58-auth-feature-icon img {
    display: block;
    width: 30px;
    height: 30px;
    max-width: none;
    margin: 10px;
    padding: 0;
    object-fit: contain;
    object-position: center;
}
.s58-auth-feature strong,
.s58-auth-feature span {
    display: block;
}
.s58-auth-feature strong {
    margin-bottom: 2px;
    font-size: .9rem;
}
.s58-auth-feature span {
    max-width: 155px;
    color: #d8dfe3;
    font-size: .74rem;
    line-height: 1.38;
}
.s58-auth-card {
    width: 100%;
    max-width: 340px;
    align-self: center;
    justify-self: end;
    padding: 40px 20px 18px;
    position: relative;
    background: rgba(10, 10, 10, .85);
    border: 1px solid rgba(225, 177, 66, .55);
    border-radius: 12px;
    color: #fff;
}
.s58-auth-lock {
    position: absolute;
    top: -26px;
    left: 50%;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    transform: translateX(-50%);
    background: #081d2b;
    border: 1px solid var(--s88-auth-gold);
    border-radius: 50%;
    color: var(--s88-auth-gold-light);
    font-size: 1.2rem;
}
.s58-auth-lock::before,
.s58-auth-lock::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1px;
    background: var(--s88-auth-gold);
}
.s58-auth-lock::before {
    right: calc(100% + 1px);
}
.s58-auth-lock::after {
    left: calc(100% + 1px);
}
.s58-auth-card-head {
    text-align: center;
}
.s58-auth-card-title {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
}
.s58-auth-card-copy {
    margin: 5px 0 14px;
    color: var(--s88-auth-muted);
    font-size: .75rem;
}
.s58-auth-alert {
    margin-bottom: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    background: rgba(140, 34, 34, .28);
    border: 1px solid rgba(255, 120, 120, .42);
    border-radius: 7px;
    color: #ffd8d8;
    font-size: .72rem;
    line-height: 1.35;
}
.s58-auth-alert i {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: .95rem;
}
.s58-auth-form {
    margin: 0;
}
.s58-auth-field {
    width: 100%;
    min-height: 46px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 11px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(219, 227, 232, .28);
    border-radius: 7px;
}
.s58-auth-field > i {
    flex: 0 0 auto;
    color: #c8d0d5;
    font-size: 1.02rem;
}
.s58-auth-field input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-family: var(--ui-font-body);
    font-size: .8rem;
}
.s58-auth-field input::placeholder {
    color: #aeb8be;
    opacity: 1;
}
#noid_login {
    text-transform: uppercase;
}
.s58-auth-password-toggle {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #9ca7ad !important;
    font-size: 1rem;
}
.s58-auth-options {
    min-height: 28px;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.s58-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d3d8dc;
    font-size: .72rem;
}
.s58-auth-check {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0b04d;
    border-radius: 3px;
    background: #efc45f;
    color: #111;
    font-size: .62rem;
}
.s58-auth-forgot {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--s88-auth-gold-light) !important;
    font-size: .72rem;
}
.s58-auth-submit {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px !important;
    background: linear-gradient(
        90deg,
        #f1cc70 0%,
        #d99b2f 100%
    ) !important;
    border: 1px solid #e3b753 !important;
    border-radius: 7px !important;
    color: #121a1e !important;
    font-size: .84rem;
    font-weight: 800;
}
.s58-auth-submit i:last-child {
    margin-left: auto;
    font-size: 1.1rem;
}
.s58-auth-security {
    margin-top: 12px;
    padding-top: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #bac4ca;
}
.s58-auth-security i {
    color: var(--s88-auth-gold-light);
    font-size: 1.15rem;
}
.s58-auth-security span {
    display: block;
    font-size: .66rem;
    line-height: 1.38;
}
.s58-auth-footer {
    width: 100%;
    padding: 0;
    position: relative;
    z-index: 3;
    background: rgba(3, 17, 27, .88);
    border-top: 1px solid rgba(226, 179, 75, .24);
}
.s58-auth-footer-inner {
    width: min(100%, 1500px);
    min-height: 64px;
    margin: 0 auto;
    padding: 10px 28px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    color: #d2d8dc;
    font-size: .72rem;
}
.s58-auth-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.s58-auth-footer a {
    color: #d2d8dc;
}
.s58-auth-footer-help {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}
.s58-auth-footer-help i,
.s58-auth-footer-help button {
    color: var(--s88-auth-gold-light) !important;
}
/* 26. AUTH LOGIN RESPONSIVE - Dua mode canonical:
   Full >=1280px; Mobile + Tablet <=1279px.
   Penggunaan: otomatis. */
@media (max-width: 1279px) {
    .s58-login-page {
        min-height: 100vh;
        background:
            linear-gradient(
                0deg,
                rgba(2, 14, 23, .72),
                rgba(2, 14, 23, .32)
            ),
            url('../layouts/img/authlogin_bg_mobile.webp')
            52% center / cover no-repeat;
    }
    .s58-auth-navbar {
        min-height: 58px;
        padding: 7px 12px;
    }
    .s58-auth-navbar-container { width: 100%; }
    .s58-auth-brand {
        width: 132px;
        margin-right: 10px;
    }
    .s58-auth-navbar .navbar-collapse {
        margin-top: 8px;
        padding: 10px 0 6px;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .s58-auth-navbar .navbar-nav { gap: 0; }
    .s58-auth-navbar .nav-link {
        padding: 8px 0 !important;
        font-size: .8rem;
    }
    .s58-auth-navbar .nav-link.active::after {
        right: auto;
        bottom: 3px;
        left: 0;
        width: 30px;
    }
    .s58-auth-navbar-right {
        padding-top: 7px;
        justify-content: flex-start;
    }
    .s58-auth-trust {
        padding-left: 0;
        border-left: 0;
    }
    .s58-auth-main {
        min-height: auto;
        padding: 42px 16px 24px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 42px;
    }
    .s58-auth-hero { padding: 0; }
    .s58-auth-kicker { font-size: 1.35rem; }
    .s58-auth-title { font-size: clamp(3.8rem, 19vw, 5rem); }
    .s58-auth-tagline {
        margin-top: 14px;
        font-size: .92rem;
    }
    .s58-auth-divider { margin: 20px 0 16px; }
    .s58-auth-copy { font-size: .85rem; }
    .s58-auth-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin-top: 22px;
    }
    .s58-auth-feature { text-align: center; }
    .s58-auth-feature-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 7px;
    }
    .s58-auth-feature-icon img {
        width: 27px;
        height: 27px;
    }
    .s58-auth-feature strong { font-size: .76rem; }
    .s58-auth-feature span {
        margin: 0 auto;
        font-size: .64rem;
    }
    .s58-auth-card {
        width: min(100%, 340px);
        max-width: 340px;
        align-self: center;
        padding: 38px 16px 16px;
    }
    .s58-auth-lock {
        width: 50px;
        height: 50px;
        top: -25px;
    }
    .s58-auth-footer-inner {
        min-height: 0;
        padding: 12px 14px;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 7px;
        text-align: center;
    }
    .s58-auth-footer-links {
        gap: 12px;
        flex-wrap: wrap;
    }
    .s58-auth-footer-help { display: none; }
}
/* 27. RUNTIME UI FIX - Memastikan Bootstrap modal selalu berada di atas backdrop, sidebar bergerak
   Penggunaan: otomatis pada shell privat SUKSES58. */
body > .modal,
body > #s58ModalHost > .modal {
    z-index: 1085 !important;
}
.modal-backdrop {
    z-index: 1080 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.modal.show {
    display: block !important;
}
.modal-dialog,
.modal-content {
    opacity: 1 !important;
    visibility: visible !important;
}
#s58ModalHost {
    position: static !important;
    z-index: auto !important;
}
#s58ModalLoader {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .42);
}
#s58ModalLoader.show {
    display: flex;
}
.s58-modal-loader-card {
    width: min(320px, calc(100vw - 40px));
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #d7dde7;
    border-radius: 14px;
    text-align: center;
    color: #1f2937;
}
.s58-modal-loader-card i {
    margin-right: 6px;
    font-size: 1.05rem;
}
.sidenav-menu,
html[data-sidenav-size="offcanvas"] .sidenav-menu {
    transition: none !important;
    -webkit-transition: none !important;
}
#custom-backdrop {
    transition: none !important;
    animation: none !important;
}
.s58-error-page {
    min-height: calc(100vh - 230px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}
.s58-error-card {
    width: min(680px, 100%);
    padding: 34px;
    background: #ffffff;
    border: 1px solid #d8dee8;
    border-radius: 18px;
    text-align: center;
}
.s58-error-code {
    margin-bottom: 4px;
    font-size: clamp(4rem, 10vw, 7rem);
    line-height: .95;
    font-weight: 900;
    letter-spacing: -.05em;
    color: #1e293b;
}
.s58-error-icon {
    margin: 18px 0 12px;
    font-size: 2.2rem;
    color: #64748b;
}
.s58-error-title {
    margin: 0 0 10px;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 800;
    color: #0f172a;
}
.s58-error-desc {
    max-width: 520px;
    margin: 0 auto 22px;
    color: #64748b;
    line-height: 1.65;
}
.s58-error-desc strong {
    color: #334155;
    overflow-wrap: anywhere;
}
.s58-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.s58-error-help {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
    font-size: .82rem;
    color: #64748b;
}
@media (max-width: 1279px) {
    .s58-error-page {
        min-height: calc(100vh - 180px);
        padding: 20px 10px;
    }
    .s58-error-card {
        padding: 26px 18px;
        border-radius: 14px;
    }
    .s58-error-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .s58-error-actions .btn {
        width: 100%;
    }
}
/* 28. MEMBER HOME SUKSES58 - Dashboard member clean-minimal dengan hero gambar, tiga sumber bonus,
   Penggunaan: class="s58-member-home" */
.s58-member-home,
.s58-member-home *,
.s58-member-home *::before,
.s58-member-home *::after {
    animation: none !important;
    transition: none !important;
}
.s58-member-home {
    --s88-home-navy: #071827;
    --s88-home-navy-2: #10283b;
    --s88-home-teal: #087f86;
    --s88-home-teal-dark: #075f65;
    --s88-home-gold: #d6aa4d;
    --s88-home-text: #071827;
    --s88-home-muted: #071827;
    --s88-home-line: #d7e0e7;
    --s88-home-surface: #ffffff;
    overflow: hidden;
    margin: 0 0 18px;
    border: 1px solid #dbe3e9;
    border-radius: 20px;
    background: #f4f8f9;
    color: var(--s88-home-text);
}
.s58-member-hero {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    padding: clamp(14px, 5vw, 40px);
    background:
        linear-gradient(
            90deg,
            rgba(3, 16, 27, .7) 0%,
            rgba(3, 20, 32, .5) 40%,
            rgba(4, 27, 38, .3) 70%,
            rgba(4, 27, 38, .1) 100%
        ),
}
.s58-member-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 460px);
    align-items: center;
    gap: clamp(22px, 5vw, 42px);
    width: min(100%, 1420px);
    margin: 0 auto;
}
.s58-member-hero-copy {
    min-width: 0;
}
.s58-member-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 7px 11px;
    border: 1px solid rgba(238, 207, 132, .46);
    border-radius: 999px;
    background: rgba(8, 27, 39, .78);
    color: #f0ce79;
    font-family: var(--ui-font-help);
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.s58-member-eyebrow i {
    font-size: 1rem;
}
.s58-member-hero h1 {
    max-width: 720px;
    margin: 0;
    color: #f8fbfc;
    font-family: var(--ui-font-title);
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 200;
    letter-spacing: -.045em;
    line-height: .7;
}
.s58-member-hero h1 span {
    color: rgb(240, 200, 100);
    font-family: var(--ui-font-title);
    font-size: clamp(1.5rem, 2vw, 1.8rem);
    font-weight: 400;
    margin-left: 10px;
}
.s58-member-hero-desc {
    max-width: 680px;
    margin: 12px 0 0;
    color: rgb(240, 240, 250);
    font-family: var(--ui-font-body);
    font-size: clamp(.8rem, 1.2vw, 1.2rem);
    line-height: 1.2;
}
.s58-member-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}
.s58-member-identity span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 8px;
    background: rgba(4, 20, 31, .68);
    color: #edf4f7;
    font-size: .78rem;
    font-weight: 600;
}
.s58-member-balance {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, .50fr);
    gap: 10px;
    max-width: 720px;
    margin-top: 14px;
    padding: 8px;
    border: 0.8px solid rgba(240, 240, 240, .7);
    border-radius: 12px;
    background: rgba(10, 20, 30, .5);
}
.s58-member-balance > div:first-child {
    min-width: 0;
}
.s58-member-balance > div:first-child > span {
    display: block;
    color: rgb(250, 250, 200);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.s58-member-balance > div:first-child > strong {
    display: block;
    margin-top: 4px;
    color: rgb(250, 250, 250);
    font-family: var(--ui-font-title);
    font-size: clamp(2rem, 4vw, 2.0rem);
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.6;
}
.s58-member-balance > div:first-child > small {
    display: block;
    margin-top: 10px;
    color: rgb(200, 200, 240);
    font-family: var(--ui-font-body);
    font-size: .6rem;
}
.s58-member-balance-side {
    display: grid;
    align-content: center;
    gap: 8px;
    border-left: 1px solid rgba(250, 250, 250, .8);
    padding-left: 12px;
}
.s58-member-balance-side span {
    display: block;
    color: rgb(250, 250, 240);
    font-family: var(--ui-font-title);
    font-size: 0.8rem;
    font-weight: 200;
    text-transform: uppercase;
}
.s58-member-balance-side strong {
    display: block;
    margin-left: 16px;
    color: #f0c866;
    font-family: var(--ui-font-body);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .4em;
    line-height: 1.6;
    text-transform: uppercase;
}
.s58-member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}
.s58-member-btn-primary,
.s58-member-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: .84rem;
    font-weight: 700;
}
.s58-member-btn-primary {
    border: 1px solid #e1bd66 !important;
    background: #e1bd66 !important;
    color: #102030 !important;
}
.s58-member-btn-secondary {
    border: 1px solid rgba(255, 255, 255, .30) !important;
    background: rgba(4, 20, 31, .72) !important;
    color: #ffffff !important;
}
.s58-member-product {
    align-self: end;
    text-align: center;
}
.s58-member-product img {
    display: block;
    width: min(100%, 460px);
    height: auto;
    margin: 0 auto -12px;
    filter:
        drop-shadow(
            0 16px 20px
            rgba(0, 0, 0, .16)
        );
}
.s58-member-product span {
    display: block;
    max-width: 330px;
    margin: 6px auto 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    background: rgba(4, 20, 31, .76);
    color: #dbe8ec;
    font-size: .76rem;
}
.s58-member-product strong {
    display: block;
    color: #f0c866;
}
.s58-member-section {
    width: min(100%, 1420px);
    margin: 0 auto;
    padding: 30px clamp(18px, 4vw, 52px);
}
.s58-member-section + .s58-member-section {
    padding-top: 4px;
    padding-bottom: 38px;
}
.s58-member-section-head {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 440px);
    gap: 24px;
    align-items: end;
    margin-bottom: 18px;
}
.s58-member-section-head > div > span,
.s58-member-activity-head > div > span {
    display: block;
    margin-bottom: 5px;
    color: var(--s88-home-teal-dark);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.s58-member-section-head h2,
.s58-member-activity-head h2 {
    margin: 0;
    color: var(--s88-home-text);
    font-size: clamp(1.35rem, 2.1vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.025em;
}
.s58-member-section-head > p {
    margin: 0;
    color: var(--s88-home-muted);
    font-size: .86rem;
    line-height: 1.6;
}
.s58-member-commission-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.s58-member-commission-card {
    --s58-commission-accent: #2563eb;
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 20px;
    color: #0f172a;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}
.s58-member-commission-card:not([class*="bg-"]) {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.s58-member-commission-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--s58-commission-accent) 0%,
        color-mix(in srgb, var(--s58-commission-accent) 38%, transparent) 72%,
        transparent 100%
    );
}
.s58-member-commission-card--direct {
    --s58-commission-accent: #2563eb;
}
.s58-member-commission-card--group {
    --s58-commission-accent: #0f9f8f;
}
.s58-member-commission-card--profit {
    --s58-commission-accent: #d69b22;
}
.s58-member-commission-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 0;
}
.s58-member-commission-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--s58-commission-accent) 24%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--s58-commission-accent) 9%, transparent);
    color: var(--s58-commission-accent);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.s58-member-commission-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--s58-commission-accent) 22%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--s58-commission-accent) 10%, transparent);
    color: var(--s58-commission-accent);
    font-size: 1.35rem;
}
.s58-member-commission-copy {
    padding: 14px 18px 12px;
}
:where(.s58-member-commission-copy > span) {
    display: block;
    color: inherit;
    opacity: .66;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
:where(.s58-member-commission-copy > strong) {
    display: block;
    margin-top: 6px;
    color: inherit;
    font-size: clamp(1.55rem, 2.6vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.06;
}
:where(.s58-member-commission-copy > p) {
    min-height: 48px;
    margin: 10px 0 0;
    color: inherit;
    opacity: .68;
    font-size: .8rem;
    line-height: 1.55;
}
.s58-member-commission-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 18px 16px;
}
.s58-member-commission-stats > div {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 13px;
    background: rgba(255, 255, 255, .64);
}
.s58-member-commission-stats small,
.s58-member-commission-stats strong {
    display: block;
}
:where(.s58-member-commission-stats small) {
    color: inherit;
    opacity: .58;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
:where(.s58-member-commission-stats strong) {
    margin-top: 5px;
    color: inherit;
    font-size: .95rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.s58-member-commission-card footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(148, 163, 184, .16);
    background: rgba(248, 250, 252, .66);
}
.s58-member-commission-bar {
    position: relative;
    flex: 1 1 auto;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, .18);
}
.s58-member-commission-bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--s58-commission-accent) 0%,
        color-mix(in srgb, var(--s58-commission-accent) 58%, white) 100%
    );
}
.s58-member-commission-card footer strong {
    flex: 0 0 auto;
    color: var(--s58-commission-accent);
    font-size: .8rem;
    font-weight: 800;
}
.s58-member-commission-card[class*="bg-"]:not(.bg-none) {
    color: var(--ui-theme-text, #ffffff);
    border-color: var(--ui-theme-border, transparent);
    box-shadow: none;
}
.s58-member-commission-card[class*="bg-"]:not(.bg-none) .s58-member-commission-chip,
.s58-member-commission-card[class*="bg-"]:not(.bg-none) .s58-member-commission-icon,
.s58-member-commission-card[class*="bg-"]:not(.bg-none) .s58-member-commission-stats > div,
.s58-member-commission-card[class*="bg-"]:not(.bg-none) footer {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .10);
    color: inherit;
}
.s58-member-commission-card[class*="bg-"]:not(.bg-none) .s58-member-commission-chip,
.s58-member-commission-card[class*="bg-"]:not(.bg-none) .s58-member-commission-icon,
.s58-member-commission-card[class*="bg-"]:not(.bg-none) footer strong {
    color: inherit;
}
.s58-member-commission-card[class*="bg-"]:not(.bg-none) .s58-member-commission-bar {
    background: rgba(255, 255, 255, .18);
}
.s58-member-commission-card[class*="bg-"]:not(.bg-none) .s58-member-commission-bar > span {
    background: rgba(255, 255, 255, .88);
}
.s58-member-commission-card.bg-none {
    box-shadow: none;
}
/* --------------------------------------------------------------------------
   GET HOME — MARKET / ANALYTICS BOARD
   -------------------------------------------------------------------------- */
.s58-member-activity-card {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 22px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .07);
}
.s58-member-activity-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 22px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    background: linear-gradient(135deg, #081827 0%, #0d2740 56%, #0c5260 100%);
    color: #ffffff;
}
.s58-member-activity-head > div {
    min-width: 0;
}
.s58-member-activity-head > div > span {
    display: block;
    margin-bottom: 6px;
    color: #73e5f2;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}
.s58-member-activity-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.03em;
}
.s58-member-activity-head p {
    max-width: 760px;
    margin: 7px 0 0;
    color: rgba(235, 246, 250, .74);
    font-size: .8rem;
    line-height: 1.55;
}
.s58-member-activity-head .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.s58-member-analytics-hero {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 22px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.s58-member-kpi-card {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 16px;
    background: #ffffff;
}
.s58-member-kpi-card > span,
.s58-member-kpi-card > strong,
.s58-member-kpi-card > small {
    display: block;
}
.s58-member-kpi-card > span {
    color: #64748b;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.s58-member-kpi-card > strong {
    margin-top: 7px;
    color: #0f172a;
    font-size: clamp(1.25rem, 2.2vw, 1.9rem);
    font-weight: 800;
    line-height: 1.06;
    overflow-wrap: anywhere;
}
.s58-member-kpi-card > small {
    margin-top: 8px;
    color: #7b8794;
    font-size: .74rem;
    line-height: 1.45;
}
.s58-member-market-sources {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
    background: #ffffff;
}
.s58-member-market-sources > div {
    min-width: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    padding: 13px 18px;
}
.s58-member-market-sources > div + div {
    border-left: 1px solid rgba(148, 163, 184, .16);
}
.s58-member-market-sources i {
    grid-row: 1 / 3;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf5ff;
    color: #2563eb;
    font-size: 1rem;
}
.s58-member-market-sources span {
    color: #64748b;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.s58-member-market-sources strong {
    margin-top: 3px;
    color: #0f172a;
    font-size: .88rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.s58-member-activity-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 22px 0;
}
.s58-member-activity-switcher button,
.s58-member-chart-range button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 13px;
    border: 1px solid rgba(148, 163, 184, .30);
    border-radius: 999px;
    background: #ffffff;
    color: #526173;
    font-size: .74rem;
    font-weight: 800;
    cursor: pointer;
}
.s58-member-activity-switcher button.is-active,
.s58-member-chart-range button.is-active {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
}
.s58-member-analytics-panel {
    display: none;
    padding: 14px 22px 22px;
}
.s58-member-analytics-panel.is-active {
    display: block;
}
.s58-member-chart-shell {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 18px;
    background: #ffffff;
}
.s58-member-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 18px 4px;
}
.s58-member-chart-head > div:first-child {
    min-width: 0;
}
.s58-member-chart-head strong,
.s58-member-chart-head span {
    display: block;
}
.s58-member-chart-head strong {
    color: #0f172a;
    font-size: .95rem;
    font-weight: 800;
}
.s58-member-chart-head span {
    margin-top: 4px;
    color: #718096;
    font-size: .74rem;
}
.s58-member-chart-range {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
.s58-member-chart-range button {
    min-width: 44px;
    min-height: 30px;
    padding: 0 10px;
    font-size: .68rem;
}
.s58-member-chart-canvas {
    min-height: 360px;
    padding: 0 6px 4px;
}
.s58-member-chart-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0 18px 18px;
}
.s58-member-chart-summary article {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 13px;
    background: #f8fafc;
}
.s58-member-chart-summary span,
.s58-member-chart-summary strong {
    display: block;
}
.s58-member-chart-summary span {
    color: #718096;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.s58-member-chart-summary strong {
    margin-top: 5px;
    color: #0f172a;
    font-size: .93rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.s58-member-activity-subhead {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px 8px;
    border-top: 1px solid rgba(148, 163, 184, .14);
}
.s58-member-activity-subhead span,
.s58-member-activity-subhead strong {
    display: block;
}
.s58-member-activity-subhead span {
    color: #2563eb;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.s58-member-activity-subhead strong {
    margin-top: 3px;
    color: #0f172a;
    font-size: .9rem;
}
.s58-member-activity-subhead small {
    color: #7c8998;
    font-size: .7rem;
}
.s58-member-activity-list {
    padding: 0 22px 12px;
}
.s58-member-activity-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-top: 1px solid rgba(148, 163, 184, .14);
}
.s58-member-activity-item:first-child {
    border-top: 0;
}
.s58-member-activity-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 99, 235, .14);
    border-radius: 12px;
    background: #eef5ff;
    color: #2563eb;
    font-size: 1.08rem;
}
.s58-member-activity-copy {
    min-width: 0;
}
.s58-member-activity-copy strong,
.s58-member-activity-copy span,
.s58-member-activity-copy small {
    display: block;
}
:where(.s58-member-activity-copy strong) {
    color: #0f172a;
    font-family: var(--ui-font-body);
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.35;
    text-transform: none;
}
:where(.s58-member-activity-copy span) {
    margin-top: 3px;
    color: #64748b;
    font-size: .74rem;
    line-height: 1.4;
}
:where(.s58-member-activity-copy small) {
    margin-top: 5px;
    color: #94a3b8;
    font-size: .68rem;
    line-height: 1.3;
}
.s58-member-activity-value {
    color: #0f9f68;
    font-size: .84rem;
    font-weight: 800;
    white-space: nowrap;
}
.s58-member-activity-card.is-chart-error .s58-member-chart-canvas::before {
    content: "Grafik tidak dapat dimuat. Ringkasan nominal tetap tersedia.";
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #64748b;
    text-align: center;
}
.s58-member-empty {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px;
    text-align: center;
}
.s58-member-empty i {
    margin-bottom: 4px;
    font-family: var(--ui-font-body);
    font-size: 1.2rem;
    font-weight: 500;
    color: #7d8a94;
}
.s58-member-empty strong {
    font-family: var(--ui-font-title);
    font-size: .8rem;
    font-weight: 500;
    color: #7d8a94;
}
.s58-member-empty span {
    margin-top: 2px;
    font-family: var(--ui-font-body);
    font-size: .7rem;
    font-weight: 300;
    color: #7d8a94;
}
@media (max-width: 1279px) {
    .s58-member-home {
        border-radius: 16px;
    }
    .s58-member-hero {
        min-height: 440px;
        padding: 38px 34px;
    }
    .s58-member-hero-grid {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(240px, .85fr);
        gap: 22px;
    }
    .s58-member-product img {
        width: min(100%, 380px);
    }
    .s58-member-balance {
        grid-template-columns: 1fr;
    }
    .s58-member-balance-side {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        border-top: 1px solid rgba(255, 255, 255, .14);
        border-left: 0;
        padding-top: 12px;
        padding-left: 0;
    }
    .s58-member-section-head {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 340px);
    }
}
@media (max-width: 1279px) {
    .s58-member-home {
        margin-right: -6px;
        margin-left: -6px;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }
    .s58-member-hero {
        min-height: auto;
        padding: 28px 18px 24px;
        background-position:
            58% center;
    }
    .s58-member-hero-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .s58-member-hero h1 {
        font-size: 2.45rem;
    }
    .s58-member-hero-desc {
        font-size: .9rem;
    }
    .s58-member-identity {
        display: grid;
        grid-template-columns: 1fr;
    }
    .s58-member-balance {
        grid-template-columns: 1fr;
        padding: 15px;
    }
    .s58-member-balance-side {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        border-top: 1px solid rgba(255, 255, 255, .14);
        border-left: 0;
        padding-top: 11px;
        padding-left: 0;
    }
    .s58-member-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .s58-member-product {
        display: none;
    }
    .s58-member-section {
        padding: 24px 14px;
    }
    .s58-member-section-head {
        grid-template-columns: 1fr;
        gap: 9px;
    }
    .s58-member-commission-grid,
    .s58-member-analytics-hero,
    .s58-member-chart-summary {
        grid-template-columns: 1fr;
    }
    .s58-member-commission-copy > p {
        min-height: 0;
    }
    .s58-member-market-sources {
        grid-template-columns: 1fr;
    }
    .s58-member-market-sources > div + div {
        border-top: 1px solid rgba(148, 163, 184, .16);
        border-left: 0;
    }
    .s58-member-activity-head,
    .s58-member-chart-head,
    .s58-member-activity-subhead {
        flex-direction: column;
        align-items: flex-start;
    }
    .s58-member-activity-head,
    .s58-member-analytics-hero,
    .s58-member-activity-switcher,
    .s58-member-analytics-panel,
    .s58-member-activity-subhead,
    .s58-member-activity-list {
        padding-left: 15px;
        padding-right: 15px;
    }
    .s58-member-chart-range {
        width: 100%;
    }
    .s58-member-chart-range button {
        flex: 1 1 auto;
    }
    .s58-member-chart-canvas {
        min-height: 320px;
    }
    .s58-member-activity-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
    }
    .s58-member-activity-value {
        grid-column: 2;
        margin-top: -3px;
        font-size: .78rem;
    }
}
/* 29. HALAMAN 404 SUKSES58 - Halaman 404 dengan background brand yang sama dengan portal autentikasi.
   Penggunaan: pages/404.php */
.s58-404-page,
.s58-404-page *,
.s58-404-page *::before,
.s58-404-page *::after {
    animation: none !important;
    transition: none !important;
}
.s58-404-page {
    min-height: calc(100vh - 190px);
    display: flex;
    align-items: center;
    padding: clamp(28px, 6vw, 78px);
    border: 1px solid #d4dde4;
    border-radius: 20px;
    color: #ffffff;
}
.s58-404-panel {
    width: min(640px, 100%);
}
.s58-404-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(238, 204, 124, .44);
    border-radius: 999px;
    background: rgba(5, 22, 34, .76);
    color: #efca70;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .07em;
}
.s58-404-code {
    margin-top: 18px;
    color: rgba(255, 255, 255, .17);
    font-size: clamp(6rem, 15vw, 11rem);
    font-weight: 900;
    letter-spacing: -.075em;
    line-height: .72;
}
.s58-404-page h1 {
    max-width: 620px;
    margin: 20px 0 0;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.02;
}
.s58-404-page h1 span {
    display: block;
    color: #efca70;
}
.s58-404-page > .s58-404-panel > p {
    max-width: 570px;
    margin: 18px 0 0;
    color: #d3e0e6;
    font-size: .94rem;
    line-height: 1.7;
}
.s58-404-page p strong {
    color: #ffffff;
}
.s58-404-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}
.s58-404-primary,
.s58-404-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 43px;
    padding: 9px 15px;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 700;
}
.s58-404-primary {
    border: 1px solid #e0ba61 !important;
    background: #e0ba61 !important;
    color: #102132 !important;
}
.s58-404-secondary {
    border: 1px solid rgba(255, 255, 255, .32) !important;
    background: rgba(5, 22, 34, .74) !important;
    color: #ffffff !important;
}
.s58-404-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 540px;
    margin-top: 24px;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, .17);
    color: #b9c9d1;
    font-size: .76rem;
    line-height: 1.5;
}
.s58-404-note i {
    margin-top: 1px;
    color: #efca70;
}
@media (max-width: 1279px) {
    .s58-404-page {
        min-height: calc(100vh - 150px);
        padding: 30px 18px;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        background-position:
            58% center;
    }
    .s58-404-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .s58-404-actions .btn {
        width: 100%;
    }
}
/* 30. BACKGROUND MUSIC TOPBAR - Tombol musik ringkas dan konsisten dengan kontrol topbar.
   Penggunaan: id="s58-music-toggle" */
.s58-music-toggle {
    color: #ffffff !important;
}
.s58-music-toggle.is-muted {
    color: rgba(255, 255, 255, .66) !important;
}
.s58-music-toggle i {
    font-size: 1.18rem;
}
/* 31. BACKGROUND GLOBAL PRIVATE APP - Background gambar menempel pada body. Karena shell index.php tidak reload
   Penggunaan: <body class="latar-abu"> */
body.latar-abu {
    min-height: 110vh;
    background: transparent !important;
    color: #0a0a0a;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
}
body.latar-abu::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        url('img/authlogin_bg.webp')
        center center / cover no-repeat;
    opacity: 1;
}
body.latar-abu > .wrapper {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    background: rgba(10, 10, 10, 0.4) !important;
}
body.latar-abu .content-page,
body.latar-abu .content-page > .container-fluid,
body.latar-abu #pembungkus_utama,
body.latar-abu .konten-utama,
body.latar-abu #wadah_halaman {
    background: transparent !important;
}
body.latar-abu .page-title-head {
    margin-bottom: 8px !important;
    padding: 0 8px;
}
body.latar-abu .page-title-head,
body.latar-abu .page-title-head a,
body.latar-abu .page-main-title,
body.latar-abu .breadcrumb-item,
body.latar-abu .breadcrumb-item.active {
    color: #eaf2f5 !important;
}
body.latar-abu #pages {
    height: 100%;
    width: 100%;
    padding: 10px;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.s58-member-home {
    overflow: visible !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.s58-member-hero {
    min-height: 420px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    background:
        linear-gradient(
            90deg,
            rgba(20, 20, 50, .7) 0%,
            rgba(20, 20, 100, .5) 60%,
            rgba(240, 240, 200, .3) 80%
        ) !important;
}
.s58-member-section {
    color: #eaf2f5;
}
.s58-member-section-head h2 {
    color: #f6fafb !important;
}
.s58-member-section-head > p {
    color: #b7c7d0 !important;
}
.s58-404-page {
    min-height: calc(100vh - 220px);
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 16px;
    background:
        linear-gradient(
            90deg,
            rgba(3, 14, 23, .88) 0%,
            rgba(4, 18, 28, .68) 60%,
            rgba(4, 18, 28, .38) 100%
        ) !important;
}
/* 32. LOGOUT MODAL - Modal logout ringan tanpa blur/animasi. View berasal dari ajaxs/auth.php.
   Penggunaan: class="s58-logout-panel" */
.s58-logout-panel,
.s58-logout-panel * {
    animation: none !important;
    transition: none !important;
}
.s58-logout-panel {
    overflow: hidden;
    border: 1px solid #d7e0e6;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: none !important;
}
.s58-logout-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px auto 0;
    border: 1px solid #f0d5d7;
    border-radius: 50%;
    background: #fff4f4;
    color: #b3262e;
    font-size: 1.65rem;
}
.s58-logout-panel .modal-body {
    padding: 18px 22px 22px;
}
.s58-logout-kicker {
    display: block;
    margin-bottom: 6px;
    color: #7b8994;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
}
.s58-logout-title {
    margin: 0;
    color: #172532;
    font-size: 1.35rem;
    font-weight: 800;
    text-align: center;
}
.s58-logout-copy {
    margin: 8px auto 17px;
    color: #687783;
    font-size: .82rem;
    line-height: 1.55;
    text-align: center;
}
.s58-logout-account {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    padding: 11px 12px;
    border: 1px solid #dfe6eb;
    border-radius: 10px;
    background: #f7f9fa;
}
.s58-logout-account > i {
    color: #526473;
    font-size: 1.45rem;
}
.s58-logout-account span,
.s58-logout-account strong {
    display: block;
}
.s58-logout-account span {
    color: #7b8994;
    font-size: .66rem;
}
.s58-logout-account strong {
    margin-top: 1px;
    color: #1c2b37;
    font-size: .84rem;
}
.s58-logout-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.s58-logout-cancel,
.s58-logout-confirm {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 9px !important;
    font-size: .78rem;
    font-weight: 700;
}
.s58-logout-cancel {
    border: 1px solid #d5dde3 !important;
    background: #f5f7f8 !important;
    color: #384957 !important;
}
.s58-logout-confirm {
    border: 1px solid #9d2630 !important;
    background: #9d2630 !important;
    color: #ffffff !important;
}
@media (max-width: 1279px) {
    body.latar-abu #pages {
        min-height: calc(100vh - 150px);
        padding: 10px;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        background: rgba(3, 13, 21, .70);
    }
    .s58-member-hero,
    .s58-404-page {
        border-right: 0 !important;
        border-left: 0 !important;
        border-radius: 0 !important;
    }
    .s58-logout-actions {
        grid-template-columns: 1fr;
    }
}
:root,
[data-bs-theme="light"] {
    --theme-secondary-bg: #ffffff;
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
}
/* 33. UNIVERSAL BG THEME BRIDGE - Menjadikan dua versi background custom berlaku konsisten pada seluruh
   Penggunaan: <div class="card bg-golds">...</div> */
:is(
    .bg-golds,
    .bg-oceans,
    .bg-sages,
    .bg-roses,
    .bg-luxury,
    .bg-futures,
    .bg-mints,
    .bg-neons,
    .bg-snows,
    .bg-grays,
    .bg-deeps,
    .bg-whites,
    .bg-metals,
    .bg-gold,
    .bg-ocean,
    .bg-sage,
    .bg-rose,
    .bg-future,
    .bg-mint,
    .bg-neon,
    .bg-snow,
    .bg-gray,
    .bg-deep,
    .bg-metal,
    .bg-luxuri
) {
    background: var(--ui-bg-gradient) !important;
    color: var(--ui-theme-text) !important;
    border-color: var(--ui-theme-border) !important;
    --bs-card-color: var(--ui-theme-text);
    --bs-card-border-color: var(--ui-theme-border);
    --bs-modal-color: var(--ui-theme-text);
    --bs-modal-border-color: var(--ui-theme-border);
    --bs-alert-color: var(--ui-theme-text);
    --bs-alert-border-color: var(--ui-theme-border);
    --bs-nav-link-color: var(--ui-theme-text);
    --bs-nav-link-hover-color: var(--ui-theme-text);
    --bs-badge-color: var(--ui-theme-text);
    --bs-btn-color: var(--ui-theme-text);
    --bs-btn-border-color: var(--ui-theme-border);
    --bs-btn-hover-color: var(--ui-theme-text);
    --bs-btn-hover-border-color: var(--ui-theme-border);
    --bs-btn-active-color: var(--ui-theme-text);
    --bs-btn-active-border-color: var(--ui-theme-border);
}
:is(.card, .modal-content):is(
    .bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
    .bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
    .bg-deeps, .bg-whites, .bg-metals, .bg-gold, .bg-ocean,
    .bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
    .bg-snow, .bg-gray, .bg-deep, .bg-metal,
    .bg-luxuri
) > :is(.card-header, .card-body, .card-footer, .modal-header, .modal-body, .modal-footer) {
    background: transparent !important;
    color: inherit;
    border-color: var(--ui-theme-border) !important;
}
:is(.btn, button, a.btn):is(
    .bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
    .bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
    .bg-deeps, .bg-whites, .bg-metals, .bg-gold, .bg-ocean,
    .bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
    .bg-snow, .bg-gray, .bg-deep, .bg-metal,
    .bg-luxuri
):is(:hover, :focus, :focus-visible, :active) {
    background: var(--ui-bg-gradient) !important;
    color: var(--ui-theme-text) !important;
    border-color: var(--ui-theme-border) !important;
}
:is(.alert, .badge):is(
    .bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
    .bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
    .bg-deeps, .bg-whites, .bg-metals, .bg-gold, .bg-ocean,
    .bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
    .bg-snow, .bg-gray, .bg-deep, .bg-metal,
    .bg-luxuri
) {
    color: var(--ui-theme-text) !important;
    border-color: var(--ui-theme-border) !important;
}
:is(.nav-tabs, .nav-pills):is(
    .bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
    .bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
    .bg-deeps, .bg-whites, .bg-metals, .bg-gold, .bg-ocean,
    .bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
    .bg-snow, .bg-gray, .bg-deep, .bg-metal,
    .bg-luxuri
) {
    border-color: var(--ui-theme-border) !important;
}
:is(.nav-tabs, .nav-pills):is(
    .bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
    .bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
    .bg-deeps, .bg-whites, .bg-metals, .bg-gold, .bg-ocean,
    .bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
    .bg-snow, .bg-gray, .bg-deep, .bg-metal,
    .bg-luxuri
) .nav-link {
    background: transparent !important;
    color: inherit !important;
    border-color: transparent !important;
}
:is(.nav-tabs, .nav-pills):is(
    .bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
    .bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
    .bg-deeps, .bg-whites, .bg-metals, .bg-gold, .bg-ocean,
    .bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
    .bg-snow, .bg-gray, .bg-deep, .bg-metal,
    .bg-luxuri
) .nav-link.active {
    background: rgba(255, 255, 255, .16) !important;
    color: inherit !important;
    border-color: var(--ui-theme-border) !important;
}
.nav-link:is(
    .bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
    .bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
    .bg-deeps, .bg-whites, .bg-metals, .bg-gold, .bg-ocean,
    .bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
    .bg-snow, .bg-gray, .bg-deep, .bg-metal,
    .bg-luxuri
):is(:hover, :focus, .active) {
    background: var(--ui-bg-gradient) !important;
    color: var(--ui-theme-text) !important;
    border-color: var(--ui-theme-border) !important;
}
.widget-user:is(
    .bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
    .bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
    .bg-deeps, .bg-whites, .bg-metals, .bg-gold, .bg-ocean,
    .bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
    .bg-snow, .bg-gray, .bg-deep, .bg-metal, .bg-luxuri
) .user-surface,
.member-card:is(
    .bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
    .bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
    .bg-deeps, .bg-whites, .bg-metals, .bg-gold, .bg-ocean,
    .bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
    .bg-snow, .bg-gray, .bg-deep, .bg-metal, .bg-luxuri
) > .member-footer,
.fintech-bonus-card:is(
    .bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
    .bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
    .bg-deeps, .bg-whites, .bg-metals, .bg-gold, .bg-ocean,
    .bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
    .bg-snow, .bg-gray, .bg-deep, .bg-metal, .bg-luxuri
) > :is(.fintech-bonus-header, .fintech-bonus-body, .fintech-bonus-footer),
.fin-card:is(
    .bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
    .bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
    .bg-deeps, .bg-whites, .bg-metals, .bg-gold, .bg-ocean,
    .bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
    .bg-snow, .bg-gray, .bg-deep, .bg-metal, .bg-luxuri
) > .fin-header {
    background: transparent !important;
    color: inherit !important;
    border-color: var(--ui-theme-border) !important;
}
/* ==========================================================================
   34. TREE / NETWORK SYSTEM
   Engine visual jaringan universal SUKSES58.
   Mode:
   - class="tree jbinary"                  : fixed 2 cabang.
   - class="tree jmatrix" data-columns="3": Matrix 3 atau lebih.
   Struktur class universal:
   tree-root, tree-node, tree-child, tree-children, tree-summary,
   tree-label, tree-card, tree-root-name, tree-root-id, tree-node-name,
   tree-node-id, tree-child-name, tree-child-id, tree-avatar, tree-status,
   tree-package, tree-meta, tree-toolbar, tree-viewport, tree-stage,
   tree-empty.
   Responsive:
   - Mobile + Tablet <= 1279px
   - Full            >= 1280px
   Struktur jaringan tidak ditumpuk menjadi satu kolom pada layar kecil.
   Jika lebar tree melebihi viewport, navigasi memakai horizontal scroll.
   ========================================================================== */
.tree {
    --tree-columns: 3;
    --tree-card-width: 360px;
    --tree-child-gap: 12px;
    --tree-level-gap: 18px;
    --tree-line: #7b8794;
    --tree-left: rgb(10, 30, 70);
    --tree-center: rgb(200, 80, 10);
    --tree-right: rgb(10, 100, 30);
    --tree-root-color: #9a7b16;
    --tree-neutral: #64748b;
    position: relative;
    width: max-content;
    min-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}
/* --------------------------------------------------------------------------
   MODE / JUMLAH CABANG
   jbinary selalu 2. jmatrix memakai data-columns >= 3.
   Selector eksplisit dipertahankan sebagai fallback lintas browser.
   Browser yang mendukung typed attr() dapat membaca nilai lebih besar.
   -------------------------------------------------------------------------- */
.tree.jbinary {
    --tree-columns: 2;
}
.tree.jmatrix,
.tree.jmatrix[data-columns="3"] { --tree-columns: 3; }
.tree.jmatrix[data-columns="4"] { --tree-columns: 4; }
.tree.jmatrix[data-columns="5"] { --tree-columns: 5; }
.tree.jmatrix[data-columns="6"] { --tree-columns: 6; }
.tree.jmatrix[data-columns="7"] { --tree-columns: 7; }
.tree.jmatrix[data-columns="8"] { --tree-columns: 8; }
.tree.jmatrix[data-columns="9"] { --tree-columns: 9; }
.tree.jmatrix[data-columns="10"] { --tree-columns: 10; }
.tree.jmatrix[data-columns="11"] { --tree-columns: 11; }
.tree.jmatrix[data-columns="12"] { --tree-columns: 12; }
@supports (width: attr(data-columns type(<integer>), 3px)) {
    .tree.jmatrix[data-columns] {
        --tree-columns: attr(data-columns type(<integer>), 3);
    }
}
/* --------------------------------------------------------------------------
   VIEWPORT / STAGE
   -------------------------------------------------------------------------- */
.tree-viewport {
    position: relative;
    width: 100%;
    min-height: 360px;
    padding: 10px 4px;
    overflow-x: auto;
    overflow-y: auto;
    box-sizing: border-box;
    background: transparent !important;
    border: 1px solid rgba(250, 220, 220, .9);
    border-radius: var(--ui-radius-lg);
    -webkit-overflow-scrolling: touch;
}
.tree-viewport::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
.tree-viewport::-webkit-scrollbar-track {
    background: transparent;
}
.tree-viewport::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
}
.tree-stage {
    position: relative;
    width: max-content;
    min-width: 100%;
    min-height: 1px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
/* --------------------------------------------------------------------------
   ROOT / NODE / CHILDREN
   -------------------------------------------------------------------------- */
.tree-root,
.tree-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tree-root {
    margin: 0 auto;
}
.tree-children {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--tree-columns), max-content);
    align-items: start;
    justify-content: center;
    gap: var(--tree-child-gap);
    padding-top: var(--tree-level-gap);
}
.tree-child {
    position: relative;
    min-width: var(--tree-card-width);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.tree-child > .tree-node {
    width: max-content;
    min-width: var(--tree-card-width);
}
/* --------------------------------------------------------------------------
   CONNECTOR
   -------------------------------------------------------------------------- */
.tree-root:has(> .tree-children) > .tree-card::after,
.tree-node:has(> .tree-children) > .tree-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(var(--tree-level-gap) * -1);
    width: 1px;
    height: var(--tree-level-gap);
    background: var(--tree-line);
    transform: translateX(-50%);
}
.tree-children::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--tree-card-width) / 2);
    right: calc(var(--tree-card-width) / 2);
    height: 1px;
    background: var(--tree-line);
}
.tree-child::before {
    content: "";
    position: absolute;
    top: calc(var(--tree-level-gap) * -1);
    left: 50%;
    width: 1px;
    height: var(--tree-level-gap);
    background: var(--tree-line);
}
/* Connector disembunyikan untuk branch tunggal, node tanpa child, dan progressive row. */
.tree-children > .tree-child:only-child::before,
.tree-node:not(:has(> .tree-children)) > .tree-card::after,
.tree-root:not(:has(> .tree-children)) > .tree-card::after,
.tree-children.is-progressive::before {
    display: none;
}
/* --------------------------------------------------------------------------
   PROGRESSIVE BRANCH CONNECTOR
   Cabang dibuat ketika Kiri/Tengah/Kanan diklik. Row child progressive tetap
   mempertahankan tiga slot Matrix 3 agar sibling pada level aktif terlihat.
   -------------------------------------------------------------------------- */
.tree-children.is-progressive > .tree-child {
    visibility: hidden;
}
.tree-children.is-progressive > .tree-child.is-expanded {
    visibility: visible;
}
.tree-children.is-progressive > .tree-child:not(.is-expanded)::before,
.tree-children.is-progressive > .tree-child:not(.is-expanded)::after {
    display: none;
}
.tree-children.is-progressive > .tree-child.is-expanded::after {
    content: "";
    position: absolute;
    top: calc(var(--tree-level-gap) * -1);
    height: 1px;
    background: var(--tree-line);
}
.tree-children.is-progressive > .tree-child.is-left.is-expanded::after {
    left: 50%;
    width: calc(var(--tree-card-width) + var(--tree-child-gap));
}
.tree-children.is-progressive > .tree-child.is-right.is-expanded::after {
    right: 50%;
    width: calc(var(--tree-card-width) + var(--tree-child-gap));
}
.tree-children.is-progressive > .tree-child.is-center.is-expanded::after {
    display: none;
}
/* --------------------------------------------------------------------------
   ACTIVE PATH WINDOW
   Saat jalur turun sudah lebih dari dua level, sibling pada ancestor lama
   disembunyikan. Row yang memuat dua level terbawah tetap Matrix 3 penuh,
   sehingga sibling Kiri/Tengah/Kanan dari parent aktif tetap terlihat.
   -------------------------------------------------------------------------- */
.tree-children.is-path-only {
    grid-template-columns: max-content;
}
.tree-children.is-path-only::before {
    display: none !important;
}
.tree-children.is-path-only > .tree-child {
    display: none !important;
    visibility: hidden !important;
}
.tree-children.is-path-only > .tree-child.is-path-branch {
    display: flex !important;
    visibility: visible !important;
}
.tree-children.is-path-only > .tree-child.is-path-branch::after {
    display: none !important;
}
/* --------------------------------------------------------------------------
   ANCESTOR HAT / COMPACT PATH
   Ancestor lama pada jalur aktif dipadatkan menjadi ikon user dengan caret-up
   tepat di atasnya. Klik user = root ke ID ikon; klik caret = root ke upline
   langsung di atas ID tersebut.
   -------------------------------------------------------------------------- */
.tree-ancestor {
    position: relative;
    z-index: 5;
    width: 52px;
    min-height: 66px;
    margin: 0 auto 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}
.tree-ancestor-up,
.tree-ancestor-user {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #334155;
    border: 1px solid #94a3b8;
    box-shadow: none;
    cursor: pointer;
}
.tree-ancestor-up {
    width: 34px;
    height: 22px;
    margin-bottom: -3px;
    background: color-mix(in srgb, var(--tree-root-color) 14%, #ffffff 86%);
    color: var(--tree-root-color);
    border: 0;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.tree-ancestor-user {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #17324d;
}
.tree-ancestor-up i { font-size: 1.2rem; line-height: 1; }
.tree-ancestor-user i { font-size: 1.65rem; line-height: 1; }
.tree-ancestor-up:disabled {
    opacity: .28;
    cursor: default;
}
.tree-ancestor-up:focus-visible,
.tree-ancestor-user:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
/* Ancestor aktif yang sudah lebih dari dua level di atas node terdalam.
   Card lama dipadatkan menjadi user + caret-up (topi). */
.tree-root.is-ancestor-compact > .tree-card,
.tree-node.is-ancestor-compact > .tree-card {
    display: none !important;
}
.tree-root.is-ancestor-compact > .tree-ancestor.is-progressive-path,
.tree-node.is-ancestor-compact > .tree-ancestor.is-progressive-path {
    margin-bottom: 0;
}
.tree-root.is-ancestor-compact > .tree-ancestor.is-progressive-path::after,
.tree-node.is-ancestor-compact > .tree-ancestor.is-progressive-path::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(var(--tree-level-gap) * -1);
    width: 1px;
    height: var(--tree-level-gap);
    background: var(--tree-line);
    transform: translateX(-50%);
}
.tree-card.is-selected {
    outline: 1px solid color-mix(in srgb, var(--tree-card-color) 58%, #ffffff 42%);
    outline-offset: 2px;
}
/* --------------------------------------------------------------------------
   CARD
   -------------------------------------------------------------------------- */
.tree-card,
.tree-empty {
    position: relative;
    z-index: 2;
    width: var(--tree-card-width);
    min-width: var(--tree-card-width);
    box-sizing: border-box;
    border-radius: 12px;
}
.tree-card {
    min-height: 120px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    background: rgba(250, 250, 250, .9);
    border: 2px solid rgba(250, 250, 250, .8);
    border-left-width: 10px;
    border-left-color: var(--tree-neutral);
    color: rgb(220, 190, 100);
    cursor: default;
}
.tree-card[data-tree-node]:not(.is-root) {
    cursor: pointer;
}
.tree-card:hover,
.tree-card:focus,
.tree-card:focus-visible,
.tree-card:active {
    outline: none;
    box-shadow: none;
    filter: none;
}
.tree-root > .tree-card,
.tree-card.is-root {
    border-left-color: var(--tree-root-color);
}
.tree-child.is-left > .tree-node > .tree-card,
.tree-card.is-left,
.tree-summary.is-left {
    border-left-color: var(--tree-left);
}
.tree-child.is-center > .tree-node > .tree-card,
.tree-card.is-center,
.tree-summary.is-center {
    border-left-color: var(--tree-center);
}
.tree-child.is-right > .tree-node > .tree-card,
.tree-card.is-right,
.tree-summary.is-right {
    border-left-color: var(--tree-right);
}
/* --------------------------------------------------------------------------
   IDENTITAS
   -------------------------------------------------------------------------- */
.tree-root-name,
.tree-node-name,
.tree-child-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgb(10, 10, 10);
    font-family: var(--ui-font-subtitle);
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
}
.tree-root-id,
.tree-node-id,
.tree-child-id {
    flex: 0 0 auto;
    color: #061624;
    font-family: var(--ui-font-title);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
}
.tree-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15, 23, 42, .16);
    border-radius: 9px;
    background: linear-gradient(145deg, #e2f3ec, #e7edf5);
    color: #17324d;
    font-size: .72rem;
    font-weight: 800;
}
.tree-package {
    max-width: 140px;
    padding: 2px 6px;
    border: 1px solid rgba(10, 10, 10, .9);
    border-radius: 12px;
    background: rgba(0, 0, 0, .2);
    color: rgb(20, 20, 50);
    font-family: var(--ui-font-body);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tree-meta {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    color: #64748b;
    font-size: .70rem;
}
.tree-status {
    margin-top: 8px;
    min-height: 28px;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px;
    background: rgba(248, 250, 252, .95);
    color: #475569;
    font-size: .74rem;
    font-weight: 700;
}
.tree-status::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    display: inline-block;
    border-radius: 50%;
    background: #94a3b8;
}
.tree-status.is-active::before {
    background: #65a30d;
}
.tree-status.is-inactive::before {
    background: #dc2626;
}
/* --------------------------------------------------------------------------
   SUMMARY / LABEL
   -------------------------------------------------------------------------- */
.tree-summary {
    min-height: 74px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .14);
    border-left: 4px solid var(--tree-neutral);
    border-radius: var(--ui-radius-lg);
}
.tree-label {
    font-size: .76rem;
    font-weight: 700;
    color: #475569;
}
.tree-summary > .tree-label {
    grid-column: 1;
    grid-row: 1;
}
.tree-summary > strong,
.tree-summary > .tree-node-id,
.tree-summary > .tree-child-id {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-family: var(--ui-font-subtitle);
    font-size: 1.55rem;
    line-height: 1;
    color: #0f172a;
}
.tree-summary > small {
    grid-column: 1;
    grid-row: 2;
    font-size: .68rem;
    color: #94a3b8;
}
/* --------------------------------------------------------------------------
   TOOLBAR
   -------------------------------------------------------------------------- */
.tree-toolbar {
    min-height: 56px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 10px;
    background: rgba(248, 250, 252, .92);
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: var(--ui-radius-lg);
}
.tree-toolbar .tree-root-id {
    font-size: .88rem;
    color: #0f2942;
}
.tree-toolbar .tree-root-name {
    max-width: 320px;
    font-size: .76rem;
    color: #64748b;
}
/* --------------------------------------------------------------------------
   EMPTY SLOT
   -------------------------------------------------------------------------- */
.tree-empty {
    min-height: 96px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: rgba(248, 250, 252, .82);
    border: 1px dashed rgba(100, 116, 139, .42);
    color: #94a3b8;
    text-align: center;
}
.tree-empty i {
    font-size: 1.45rem;
}
.tree-empty .tree-label {
    color: inherit;
}
/* Slot Matrix 3 yang kosong tidak memakai card. Hanya icon user-plus
   berbentuk lingkaran seperti control ancestor/upline. Lebar slot grid tetap
   dipertahankan oleh .tree-child agar posisi Kiri/Tengah/Kanan tidak bergeser. */
.tree-empty.is-slot-empty {
    width: 52px;
    min-width: 52px;
    min-height: 52px;
    padding: 0;
    gap: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.tree-empty.is-slot-empty > i {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #17324d;
    border: 1px solid #94a3b8;
    border-radius: 50%;
    font-size: 1.65rem;
    line-height: 1;
}
/* ==========================================================================
   TREE RESPONSIVE — MOBILE + TABLET <= 1279px
   ========================================================================== */
@media (max-width: 1279px) {
    .tree {
        --tree-card-width: 160px;
        --tree-child-gap: 6px;
        --tree-level-gap: 16px;
    }
    .tree-viewport {
        min-height: 250px;
        padding: 10px 4px 14px;
    }
    .tree-card {
        min-height: 112px;
        padding: 7px;
        border-left-width: 6px;
        border-radius: 9px;
    }
    .tree-avatar {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        border-radius: 7px;
        font-size: .5rem;
    }
    .tree-package {
        max-width: 72px;
        padding: 2px 4px;
        font-size: .5rem;
    }
    .tree-root-id,
    .tree-node-id,
    .tree-child-id {
        font-size: .7rem;
    }
    .tree-root-name,
    .tree-node-name,
    .tree-child-name {
        font-size: .6rem;
    }
    .tree-meta,
    .tree-status {
        font-size: .5rem;
    }
    .tree-summary {
        min-height: 60px;
        padding: 7px;
        border-left-width: 3px;
    }
    .tree-label {
        font-size: .6rem;
    }
    .tree-summary > strong,
    .tree-summary > .tree-node-id,
    .tree-summary > .tree-child-id {
        font-size: 1.15rem;
    }
    .tree-summary > small {
        font-size: .5rem;
    }
    .tree-toolbar {
        min-height: 48px;
        padding: 7px;
        align-items: stretch;
    }
    .tree-toolbar .tree-root-name {
        max-width: 170px;
        font-size: .2rem;
    }
    .tree-empty {
        min-height: 82px;
        padding: 6px 3px;
    }
}
/* ==========================================================================
   TREE FULL DEFAULT >= 1280px
   ========================================================================== */
/* 35. POD SYSTEM MODERN — SINGLE COMPONENT CONTRACT
   Responsive policy: Full >=1280px; Mobile + Tablet <=1279px.
   Kontrak warna root:
   - .pod.bg-*s = surface gradient/glass sesuai utility bg-*s.
   - .pod.bg-*  = surface solid sesuai utility bg-*.
   Header transparan terhadap root; tidak ada lagi pertukaran solid ↔ glass.
   Header-left memakai icon inline normal di kiri, title lalu subtitle bertumpuk.
   Control header (button/group/pills/tabs) selalu memakai versi SOLID dari
   palette class bg-* maupun bg-*s; hover/active hanya menggelapkan warna.
   Body supports pod-light / pod-dark.
   pod-body-left is fixed 720px in both modes; pod-body-right is 720px on Full
   and content-driven (max 720px) on Mobile+Tablet.
   ========================================================================== */
.pod {
    --pod-scroll-height: 720px;
    --ui-palette-solid: #6b7280;
    --ui-palette-gradient: linear-gradient(50deg, #323246 0%, #646e82 25%, #b4bec8 50%, #646478 75%, #28283c 100%);
    --ui-palette-contrast: #ffffff;
    position: relative;
    width: 100%;
    min-width: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
    box-sizing: border-box;
    background: var(--ui-bg-gradient, #eef1f4);
    color: var(--ui-theme-text, #1f2937);
    border: 2px solid #d39a2c !important;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}
/* POD root surface mengikuti utility background global. */
:is(.pod.bg-golds, .pod.bg-oceans, .pod.bg-sages, .pod.bg-roses, .pod.bg-futures, .pod.bg-mints, .pod.bg-neons, .pod.bg-snows, .pod.bg-grays, .pod.bg-deeps, .pod.bg-whites, .pod.bg-metals, .pod.bg-luxury, .pod.bg-luxurys) {
    background: var(--ui-bg-gradient, var(--ui-palette-gradient)) !important;
    color: var(--ui-theme-text, var(--ui-palette-contrast)) !important;
}
:is(.pod.bg-gold, .pod.bg-ocean, .pod.bg-sage, .pod.bg-rose, .pod.bg-future, .pod.bg-mint, .pod.bg-neon, .pod.bg-snow, .pod.bg-gray, .pod.bg-deep, .pod.bg-metal, .pod.bg-luxuri) {
    background: var(--ui-bg-gradient, var(--ui-palette-solid)) !important;
    color: var(--ui-theme-text, var(--ui-palette-contrast)) !important;
}
/* bg-white adalah utility Bootstrap; POD menguncinya sebagai varian solid putih. */
.pod.bg-white {
    background: var(--s58-pod-white-solid) !important;
    color: var(--s58-pod-white-solid-text) !important;
}
:is(.pod.bg-outline-golds, .pod.bg-outline-oceans, .pod.bg-outline-sages, .pod.bg-outline-roses, .pod.bg-outline-futures, .pod.bg-outline-mints, .pod.bg-outline-neons, .pod.bg-outline-snows, .pod.bg-outline-grays, .pod.bg-outline-deeps, .pod.bg-outline-whites, .pod.bg-outline-metals, .pod.bg-outline-luxury, .pod.bg-outline-luxurys, .pod.bg-outline-gold, .pod.bg-outline-ocean, .pod.bg-outline-sage, .pod.bg-outline-rose, .pod.bg-outline-future, .pod.bg-outline-mint, .pod.bg-outline-neon, .pod.bg-outline-snow, .pod.bg-outline-gray, .pod.bg-outline-deep, .pod.bg-outline-white, .pod.bg-outline-metal, .pod.bg-outline-luxuri) {
    background: transparent !important;
    color: var(--ui-palette-solid) !important;
}
:is(.pod.bg-golds, .pod.bg-oceans, .pod.bg-sages, .pod.bg-roses, .pod.bg-futures, .pod.bg-mints, .pod.bg-neons, .pod.bg-snows, .pod.bg-grays, .pod.bg-deeps, .pod.bg-whites, .pod.bg-metals, .pod.bg-luxury, .pod.bg-luxurys, .pod.bg-gold, .pod.bg-ocean, .pod.bg-sage, .pod.bg-rose, .pod.bg-future, .pod.bg-mint, .pod.bg-neon, .pod.bg-snow, .pod.bg-gray, .pod.bg-deep, .pod.bg-metal, .pod.bg-luxuri, .pod.bg-outline-golds, .pod.bg-outline-oceans, .pod.bg-outline-sages, .pod.bg-outline-roses, .pod.bg-outline-futures, .pod.bg-outline-mints, .pod.bg-outline-neons, .pod.bg-outline-snows, .pod.bg-outline-grays, .pod.bg-outline-deeps, .pod.bg-outline-whites, .pod.bg-outline-metals, .pod.bg-outline-luxury, .pod.bg-outline-luxurys, .pod.bg-outline-gold, .pod.bg-outline-ocean, .pod.bg-outline-sage, .pod.bg-outline-rose, .pod.bg-outline-future, .pod.bg-outline-mint, .pod.bg-outline-neon, .pod.bg-outline-snow, .pod.bg-outline-gray, .pod.bg-outline-deep, .pod.bg-outline-white, .pod.bg-outline-metal, .pod.bg-outline-luxuri) {
    border: 2px solid #d39a2c !important;
}
.pod > .pod-header {
    --pod-header-height: clamp(62px, 5vw, 82px);
    --pod-header-item-height: clamp(52px, 4vw, 76px);
    --pod-header-icon-font: clamp(58px, 4vw, 78px);
    position: relative;
    min-height: var(--pod-header-height);
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 12px;
    overflow: hidden;
    text-align: left;
    color: inherit;
    background: transparent !important;
    border-radius: 12px 12px 0 0;
}
/* Garis bawah header: emas tebal + metallic silver tipis. */
.pod > .pod-header::after {
    content: "";
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background:
        linear-gradient(90deg, #9f6f18 0%, #f1d06d 22%, #b78328 50%, #f5df91 76%, #9f6f18 100%) top / 100% 2px no-repeat,
        linear-gradient(90deg, #7b8794 0%, #eef2f5 28%, #aab4bf 52%, #f8fafc 76%, #7b8794 100%) bottom / 100% 1px no-repeat;
    pointer-events: none;
}
/* Header-left: icon inline normal, sejajar dengan blok title/subtitle. */
.pod > .pod-header > .pod-header-left {
    min-width: 0;
    min-height: clamp(52.4px, 4vw, 76px);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 10px;
    flex: 1 1 auto;
    overflow: hidden;
}
.pod > .pod-header > .pod-header-left > .pod-icon {
    position: static;
    inset: auto;
    z-index: auto;
    width: var(--pod-header-item-height);
    height: var(--pod-header-item-height);
    min-width: var(--pod-header-item-height);
    max-width: var(--pod-header-item-height);
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    color: inherit !important;
    font-size: var(--pod-header-icon-font);
    line-height: 1;
    opacity: .5;
    transform: none;
    pointer-events: none;
    user-select: none;
}
/* Mendukung wrapper <span class="pod-icon"><i ...></i></span> dan direct <i class="pod-icon">. */
.pod > .pod-header > .pod-header-left > .pod-icon > :is(i, svg) {
    flex: 0 0 auto;
    margin: 0;
    color: inherit !important;
    font-size: inherit;
    line-height: 1;
    opacity: 1;
    transform: none;
}
.pod > .pod-header > .pod-header-left > :not(.pod-icon) {
    min-width: 0;
}
.pod > .pod-header > .pod-header-left > :not(.pod-icon):last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    text-align: left;
}
.pod-header-right,
.pod-actions {
    position: relative;
    z-index: 3;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: center;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.pod-title,
.pod .pod-header h1,
.pod .pod-header h2,
.pod .pod-header h3,
.pod .pod-header h4,
.pod .pod-header h5,
.pod .pod-header h6 {
    margin: 0;
    color: inherit;
    font-family: var(--ui-font-title);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.pod-subtitle {
    margin: 2px 0 0;
    color: inherit;
    font-family: var(--ui-font-body);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: lowercase;
}
.pod-tiles {
    width: 100%;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    justify-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    gap: 4px;
    box-sizing: border-box;
    background: transparent !important;
    color: inherit;
}
.pod-tiles > :is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]) {
    min-width: 0;
    height: 100%;
}
.pod > .pod-body,
.pod-bodys > .pod-body {
    position: relative;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    padding: 12px;
    color: inherit;
}
.pod-bodys {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 8fr);
    align-items: stretch;
    gap: 1px;
    padding: 4px;
    background: transparent !important;
    color: inherit;
}
.pod-body-right,
.pod-body-left {
    position: relative;
    min-width: 0;
    height: 720px;
    min-height: 720px;
    max-height: 720px;
    padding: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 20, .8) transparent;
    box-sizing: border-box;
    background: transparent;
    color: inherit;
    border: none;
}
.pod-body-right { grid-column: 1; width: 100%; }
.pod-body-left { grid-column: 2; width: 100%; }
.pod :is(.pod-body, .pod-body-right, .pod-body-left):is(.pod-scroller, .pod-scroll) {
    max-height: var(--pod-scroll-height);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(20, 20, 50, .8) transparent;
}
.pod :is(.pod-body, .pod-body-right, .pod-body-left):is(.pod-scroller, .pod-scroll)::-webkit-scrollbar,
.pod-bodys > :is(.pod-body-right, .pod-body-left)::-webkit-scrollbar { width: 5px; }
.pod :is(.pod-body, .pod-body-right, .pod-body-left):is(.pod-scroller, .pod-scroll)::-webkit-scrollbar-track,
.pod-bodys > :is(.pod-body-right, .pod-body-left)::-webkit-scrollbar-track { background: transparent !important; }
.pod :is(.pod-body, .pod-body-right, .pod-body-left):is(.pod-scroller, .pod-scroll)::-webkit-scrollbar-thumb,
.pod-bodys > :is(.pod-body-right, .pod-body-left)::-webkit-scrollbar-thumb {
    background: rgba(20, 20, 50, .8) !important;
    border-radius: 4px;
}
/* Body surface modifiers are independent from the root palette. */
.pod-bodys:is(.pod-lights, .pod-light),
.pod-bodys:is(.pod-lights, .pod-light) > :is(.pod-body, .pod-body-right, .pod-body-left),
.pod :is(.pod-body, .pod-body-right, .pod-body-left):is(.pod-lights, .pod-light) {
    background: rgba(220, 220, 220, .5) !important;
    color: var(--ui-text-dark) !important;
}
.pod-bodys:is(.pod-deeps, .pod-dark, .pod-op),
.pod-bodys:is(.pod-deeps, .pod-dark, .pod-op) > :is(.pod-body, .pod-body-right, .pod-body-left),
.pod :is(.pod-body, .pod-body-right, .pod-body-left):is(.pod-deeps, .pod-dark, .pod-op) {
    background: rgba(0, 0, 0, .2) !important;
    color: var(--ui-text-light) !important;
}
.pod .pod-body-right .list-group.list-group-flush.list-custom {
    --list-custom-milk: rgba(255, 253, 247, .97);
    --list-custom-paper: rgba(255, 255, 255, .72);
    --list-custom-text: #263247;
    --list-custom-muted: #64748b;
    --list-custom-line: rgba(148, 163, 184, .28);
    --list-custom-gold: #d6aa4d;
    --list-custom-silver: #c5ccd5;
    --list-custom-accent: var(--ui-palette-solid, #6b7280);
    /* Grid mobile universal: 12 kolom memudahkan 1/2/3/4 field per section. */
    --list-custom-grid-cols: 12;
    --list-custom-menu-span: 3;
    --list-custom-field-span: 6;
    --list-custom-title-span: 12;
    --list-custom-gap: 6px;
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px 8px 10px 24px;
    overflow: hidden;
    background: rgba(250, 250, 250, 1) !important;
    border: 1px solid rgba(148, 163, 184, .34) !important;
    border-radius: 24px 10px 10px 24px !important;
    box-shadow: inset 4px 0 0 var(--list-custom-gold), 0 4px 12px rgba(15, 23, 42, .14);
}
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 28px;
    margin: 0 0 6px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    background: transparent !important;
    color: var(--ui-text-dark) !important;
    font-family: var(--ui-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    text-decoration: none !important;
    transition: none !important;
}
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item:last-child { margin-bottom: 0; }
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item.list-group-item-action { cursor: pointer; }
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item.list-group-item-action:not(.active):is(:hover, :focus-visible) {
    background: rgba(10, 10, 50, .5) !important;
    color: #111827 !important;
    border-left: 3px solid var(--list-custom-accent) !important;
    text-decoration: none !important;
}
/* Active: accent kuat agar status terpilih mudah dibedakan. */
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item.list-group-item-action.active,
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item.list-group-item-action[aria-current="true"] {
    background: transparent !important;
    color: var(--ui-text-muted) !important;
    border-left: 3px solid var(--list-custom-gold) !important;
    font-weight: 700;
}
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item :is(strong, b) {
    color: inherit;
    font-weight: 600;
}
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item :is(small, .small, .list-custom-meta) {
    color: var(--list-custom-muted) !important;
    font-size: .7rem;
    font-weight: 400;
    line-height: 1.25;
}
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item.active :is(small, .small, .list-custom-meta),
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item[aria-current="true"] :is(small, .small, .list-custom-meta) {
    color: rgba(255, 255, 255, .76) !important;
}
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item > :is(i, svg):first-child {
    width: 24px;
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 9px;
    background: rgba(214, 170, 77, .12);
    color: var(--list-custom-accent);
    font-size: 1.2rem;
    line-height: 1;
}
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item.active > :is(i, svg):first-child,
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item[aria-current="true"] > :is(i, svg):first-child {
    background: rgba(255, 255, 255, .10);
    color: #f2cf78;
}
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item .badge {
    margin-left: auto;
    flex: 0 0 auto;
    background: #eef2f6 !important;
    color: #475569 !important;
    border: 1px solid #d8dee7;
    font-weight: 600;
}
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item.active .badge,
.pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item[aria-current="true"] .badge {
    background: rgba(255, 255, 255, .12) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .24);
}
/* Section/filter semantic. Gunakan --list-custom-field-span: 12/6/4/3 untuk 1/2/3/4 kolom. */
.pod .pod-body-right .list-custom > .list-custom-section {
    --list-custom-field-span: 6;
    min-width: 0;
    padding-top: 4px;
}
.pod .pod-body-right .list-custom > .list-custom-section.list-custom-cols-1 { --list-custom-field-span: 12; }
.pod .pod-body-right .list-custom > .list-custom-section.list-custom-cols-2 { --list-custom-field-span: 6; }
.pod .pod-body-right .list-custom > .list-custom-section.list-custom-cols-3 { --list-custom-field-span: 4; }
.pod .pod-body-right .list-custom > .list-custom-section.list-custom-cols-4 { --list-custom-field-span: 3; }
.pod .pod-body-right .list-custom .list-custom-title {
    color: var(--list-custom-text) !important;
    margin: 12px;
    font-family: var(--ui-font-caption);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .2em;
    text-transform: uppercase;
            border: 0 !important;
        border-bottom: 1px solid var(--list-custom-line) !important;
        border-radius: 0 !important;
}
.pod .pod-body-right .list-custom .list-custom-field { min-width: 0; margin: 4px;}
@media (max-width: 1279px) {
    .pod .pod-body-right .list-group.list-group-flush.list-custom {
        display: grid;
        grid-template-columns: repeat(var(--list-custom-grid-cols), minmax(0, 1fr));
        align-items: stretch;
        gap: var(--list-custom-gap);
        padding: 8px 6px 8px 20px;
        border-radius: 18px 7px 7px 18px !important;
    }
    .pod .pod-body-right .list-group.list-group-flush.list-custom::before { left: 9px; }
    .pod .pod-body-right .list-group.list-group-flush.list-custom::after { left: 1px; }
    .pod .pod-body-right .list-group.list-group-flush.list-custom > .list-group-item {
        min-height: 44px;
        margin: 0;
        padding: 9px 11px;
        gap: 8px;
        border-radius: 9px !important;
        font-size: .78rem;
    }
    /* Menu action utama: otomatis 4 kolom pada mobile/tablet. */
    .pod .pod-body-right .list-custom > :is([data-get-bonus-io], .list-custom-menu-item) {
        grid-column: span var(--list-custom-menu-span);
        min-width: 0;
        min-height: 62px;
        padding: 7px 5px !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        background: var(--list-custom-paper) !important;
        border: 1px solid var(--list-custom-line) !important;
        border-radius: 10px !important;
        line-height: 1.1;
    }
    .pod .pod-body-right .list-custom > :is([data-get-bonus-io], .list-custom-menu-item) > :is(i, svg):first-child {
        width: 26px;
        min-width: 26px;
        height: 26px;
        margin: 0 0 2px !important;
        font-size: 1rem;
    }
    .pod .pod-body-right .list-custom > :is([data-get-bonus-io], .list-custom-menu-item).active,
    .pod .pod-body-right .list-custom > :is([data-get-bonus-io], .list-custom-menu-item)[aria-current="true"] {
        background: linear-gradient(145deg, #18212f 0%, #26364a 100%) !important;
        color: #ffffff !important;
        border: 1px solid var(--list-custom-gold) !important;
        border-top-width: 3px !important;
    }
    /* Markup lama getBonus: title non-action + dua select langsung otomatis menjadi section Periode. */
    .pod .pod-body-right .list-custom > .list-group-item:not(.list-group-item-action):has(> span),
    .pod .pod-body-right .list-custom > .list-custom-title {
        grid-column: 1 / -1;
        min-height: 28px;
        margin-top: 4px;
        padding: 8px 4px 3px;
        align-items: flex-end;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid var(--list-custom-line) !important;
        border-radius: 0 !important;
        color: var(--list-custom-text) !important;
        font-family: var(--ui-font-caption);
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: .2em;
    }
    .pod .pod-body-right .list-custom > .list-group-item.list-group-item-action:has(> .form-select),
    .pod .pod-body-right .list-custom > .list-custom-field {
        grid-column: span var(--list-custom-field-span);
        min-width: 0;
        min-height: 0;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        cursor: default;
        overflow: visible;
    }
    .pod .pod-body-right .list-custom > .list-group-item.list-group-item-action:has(> .form-select):is(:hover, :focus-visible),
    .pod .pod-body-right .list-custom > .list-custom-field:is(:hover, :focus-visible) {
        background: transparent !important;
        color: inherit !important;
        border: 0 !important;
    }
    .pod .pod-body-right .list-custom :is(.list-custom-field, .list-group-item:has(> .form-select)) > :is(.form-select, .form-control) {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        margin: 0;
        border: 1px solid rgba(100, 116, 139, .55) !important;
        border-radius: 8px !important;
        background-color: rgba(255, 255, 255, .92) !important;
        color: var(--list-custom-text) !important;
    }
    /* Section generik: title + field merupakan satu kesatuan. */
    .pod .pod-body-right .list-custom > .list-custom-section {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(var(--list-custom-grid-cols), minmax(0, 1fr));
        gap: var(--list-custom-gap);
        min-width: 0;
        margin-top: 4px;
    }
    .pod .pod-body-right .list-custom > .list-custom-section > .list-custom-title {
        grid-column: 1 / -1;
        min-height: 28px;
        padding: 4px 4px 3px;
        display: flex;
        align-items: flex-end;
        border-bottom: 1px solid var(--list-custom-line);
        color: var(--list-custom-text) !important;
        font-family: var(--ui-font-caption);
        font-size: 1rem;
        font-weight: 500;
        line-height: 1;
        letter-spacing: .2em;
        text-transform: uppercase;
    }
    .pod .pod-body-right .list-custom > .list-custom-section > .list-custom-field {
        grid-column: span var(--list-custom-field-span);
        min-width: 0;
    }
    .pod .pod-body-right .list-custom > .list-custom-section > .list-custom-field > :is(.form-select, .form-control) {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        border: 1px solid rgba(100, 116, 139, .55) !important;
        border-radius: 8px !important;
        background-color: rgba(255, 255, 255, .92) !important;
        color: var(--list-custom-text) !important;
    }
}
.pod > .pod-footer {
    min-height: 34px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(220, 220, 220, .5) !important;
    color: rgba(70, 70, 80, .88) !important;
    border-top: 1px solid rgba(100, 100, 120, .35);
    font-family: "Times New Roman", Times, serif !important;
    font-size: 10px !important;
    font-style: italic;
    font-weight: 300;
    line-height: 1.2;
}
.pod .fo-caption,
.pod .fo-label,
.pod .fo-title,
.pod .fo-subtitle,
.pod .fo-desc,
.pod .fo-help {
    color: inherit;
}
.pod small,
.pod .small,
.pod .tree-summary small,
.pod .tree-package,
.pod .tree-root-id,
.pod .tree-node-id,
.pod .tree-child-id,
.pod .tree-root-name,
.pod .tree-node-name,
.pod .tree-child-name,
.pod .tree-meta,
.pod .tree-status,
.pod .tree-empty strong,
.pod .tree-empty span {
    font-size: 0.7rem;
}
.pod .input-group-text,
.pod .select2-container,
.pod .select2-results__option,
.pod .dataTables_wrapper,
.pod .dt-container,
.pod table {
    font-size: 0.8rem;
    font-weight: 400;
}
.pod .form-label,
.pod .col-form-label {
    display: inline-block;
    margin-bottom: 4px;
    padding: 1px 4px;
    border-radius: 4px;
    color: rgb(0, 0, 20) !important;
    background: transparent;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: capitalize;
}
.pod .form-text {
    display: inline-block;
    margin-bottom: 4px;
    padding: 1px 4px;
    border-radius: 4px;
    color: rgb(160, 100, 10) !important;
    background: transparent;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: -0.05rem;
    text-transform: capitalize;
}
.pod .form-control,
.pod .form-select,
.pod .input-group-text,
.pod .form-select .select2,
.pod .select2-container--default .select2-selection--single,
.pod .select2-container--default .select2-selection--multiple {
    border-color:  rgb(50, 50, 20) !important;
    color:  rgb(0, 0, 20) !important;
    background: rgb(250, 250, 250) !important;
    font-family: var(--ui-font-number);
    font-size: 0.9rem;
    font-weight: 400;
    box-shadow: none !important;
}
.pod .input-group-text {
    display: flex;
    align-items: center;
}
.pod .form-control::placeholder {
    color: #6b7280;
    opacity: 1;
}
.pod .form-control:disabled,
.pod .form-select:disabled,
.pod .form-control[readonly] {
    color: #374151 !important;
    background: #e5e7eb !important;
    opacity: 1;
}
.pod .form-select option {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    background-color: #fff !important;
    color: rgb(140, 140, 140) !important;
    font-weight: 400 !important;
}
.pod .select2-container--default .select2-selection--single .select2-selection__rendered,
.pod .select2-container--default .select2-selection--multiple .select2-selection__rendered,
.pod .select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: #111827 !important;
    font-weight: 400;
}
.pod .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: #374151;
}
.select2-dropdown,
.select2-results,
.select2-results__options,
.select2-results__option,
.select2-search--dropdown,
.select2-search--dropdown .select2-search__field {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    background-color: #fff !important;
    color:rgb(140, 140, 140) !important;
    font-weight: 400 !important;
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid #b8c0ca !important;
}
.pod .table,
.pod table.dataTable {
    --bs-table-color: #1f2937;
    --bs-table-bg: #fff;
    --bs-table-striped-color: #1f2937;
    --bs-table-striped-bg: #f8fafc;
    --bs-table-hover-color: #111827;
    --bs-table-hover-bg: #f1f5f9;
    width: 100%;
    margin-bottom: 0;
    color: #1f2937;
    background: transparent !important;
    font-weight: 400;
}
.pod .table-responsive,
.pod .dataTables_wrapper,
.pod .dt-container {
    color: #1f2937;
    background: transparent !important;
    font-weight: 400;
}
.pod .table thead th,
.pod table.dataTable thead th,
.pod table.dataTable thead td {
    white-space: nowrap;
    color: rgba(50, 50, 100, .9) !important;
    background: rgb(250, 250, 250) !important;
    border-color: #aeb7c2;
    font-family: var(--ui-font-number);
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
}
.pod .table tbody td,
.pod table.dataTable tbody td {
    vertical-align: middle;
    border-color: rgba(148, 163, 184, .34);
    font-weight: 400;
}
.pod .dataTables_wrapper .dataTables_filter input,
.pod .dt-search input,
.pod .dt-input,
.pod .dataTables_wrapper .dataTables_length select,
.pod .dt-length select {
    min-height: 32px;
    border: 1px solid #b8c0ca !important;
    border-radius: 4px;
    color: #111827 !important;
    background: #fff !important;
    font-weight: 400;
    box-shadow: none !important;
}
.pod .dataTables_wrapper :is(.dataTables_info, .dataTables_length, .dataTables_filter),
.pod .dt-container :is(.dt-info, .dt-length, .dt-search) {
    color: #374151 !important;
    font-weight: 200;
}
.pod .dataTables_wrapper .dataTables_paginate .paginate_button,
.pod .dt-paging .dt-paging-button {
    color: #1f2937 !important;
    background: #fff !important;
    border-color: #d1d5db !important;
    font-weight: 400;
    box-shadow: none !important;
}
/* DataTables Bootstrap pagination + export buttons. */
.pod .dt-paging .page-link,
.pod .dataTables_paginate .page-link {
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #334155 !important;
    background: #ffffff !important;
    border-color: #d1d5db !important;
    box-shadow: none !important;
}
.pod .dt-paging .active > .page-link,
.pod .dataTables_paginate .active > .page-link {
    color: #ffffff !important;
    background: #334155 !important;
    border-color: #334155 !important;
}
.pod .dt-buttons {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.pod .dt-buttons :is(.dt-button, .btn) {
    min-height: 32px;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #aeb7c2 !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    font-family: var(--ui-font-body);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}
.pod .dt-buttons :is(.buttons-print) { color: #334155 !important; }
.pod .dt-buttons :is(.buttons-pdf, .buttons-pdfHtml5) { color: #b42318 !important; }
.pod .dt-buttons :is(.buttons-excel, .buttons-excelHtml5) { color: #15803d !important; }
.pod .dt-buttons :is(.buttons-csv, .buttons-copy, .buttons-colvis) { color: #3156d9 !important; }
.pod .dt-buttons :is(.dt-button, .btn):hover,
.pod .dt-buttons :is(.dt-button, .btn):focus,
.pod .dt-buttons :is(.dt-button, .btn):active {
    background: #f1f5f9 !important;
    color: #111827 !important;
    border-color: #64748b !important;
    box-shadow: none !important;
}
@media (max-width: 1279px) {
    .pod .dt-buttons :is(.dt-button, .btn) {
        width: 32px;
        min-width: 32px;
        height: 32px;
        padding: 0 !important;
        font-size: 0;
    }
    .pod .dt-buttons :is(.dt-button, .btn) i {
        margin: 0 !important;
        font-size: 1rem;
    }
}
/* POD header controls: btn / btn-group / tabs share one visual contract. */
.pod .s58-portal-tabs,
.pod .pod-header-right :is(.nav, .nav-tabs, .nav-pills, .btn-group),
.pod .pod-actions :is(.nav, .nav-tabs, .nav-pills, .btn-group) {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: 0;
}
.pod :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link),
.pod .s58-portal-tabs .nav-link {
    position: relative;
    isolation: auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 4px;
    overflow: visible;
    /* Border control memakai warna contrast palette agar tegas di atas surface solid. */
    border: 2px solid var(--ui-palette-contrast, var(--ui-theme-border, #ffffff)) !important;
    border-radius: 10px !important;
    background: var(--ui-palette-solid, #f8fafc) !important;
    background-image: none !important;
    color: var(--ui-palette-contrast, #1f2937) !important;
    font-family: var(--ui-font-help);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    white-space: nowrap;
    text-transform: uppercase;
}
.pod :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link) > :is(i, svg, .btn-icon),
.pod .s58-portal-tabs .nav-link > :is(i, svg, .btn-icon) {
    position: static !important;
    inset: auto !important;
    width: auto;
    height: auto;
    margin: 0 !important;
    color: inherit !important;
    font-size: 1rem !important;
    font-weight: 500;
    line-height: 1 !important;
    opacity: 1;
    transform: none !important;
    z-index: auto;
    pointer-events: none;
}
/* --------------------------------------------------------------------------
   POD HEADER CONTROL COLOR CONTRACT
   - bg-*s dan bg-* pada control header selalu tampil sebagai versi SOLID.
   - suffix s tetap bermakna glass pada root POD, tetapi tidak pada control header.
   - hover/focus sedikit lebih gelap; active/selected/checked lebih kontras.
   - Full >=1280: btn-icon-mobile memakai icon watermark di belakang label.
   - Mobile+Tablet: btn-icon-mobile menjadi icon-only; control lain text-only.
   -------------------------------------------------------------------------- */
/* Outline tetap transparan saat idle, namun menggunakan warna solid palette. */
.pod :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link):is(
    .bg-outline-golds, .bg-outline-oceans, .bg-outline-sages, .bg-outline-roses,
    .bg-outline-futures, .bg-outline-mints, .bg-outline-neons, .bg-outline-snows,
    .bg-outline-grays, .bg-outline-deeps, .bg-outline-metals, .bg-outline-whites,
    .bg-outline-luxury, .bg-outline-luxurys,
    .bg-outline-gold, .bg-outline-ocean, .bg-outline-sage, .bg-outline-rose,
    .bg-outline-future, .bg-outline-mint, .bg-outline-neon, .bg-outline-snow,
    .bg-outline-gray, .bg-outline-deep, .bg-outline-metal, .bg-outline-white,
    .bg-outline-luxuri
),
.pod .s58-portal-tabs .nav-link:is(
    .bg-outline-golds, .bg-outline-oceans, .bg-outline-sages, .bg-outline-roses,
    .bg-outline-futures, .bg-outline-mints, .bg-outline-neons, .bg-outline-snows,
    .bg-outline-grays, .bg-outline-deeps, .bg-outline-metals, .bg-outline-whites,
    .bg-outline-luxury, .bg-outline-luxurys,
    .bg-outline-gold, .bg-outline-ocean, .bg-outline-sage, .bg-outline-rose,
    .bg-outline-future, .bg-outline-mint, .bg-outline-neon, .bg-outline-snow,
    .bg-outline-gray, .bg-outline-deep, .bg-outline-metal, .bg-outline-white,
    .bg-outline-luxuri
) {
    background: transparent !important;
    background-image: none !important;
    color: var(--ui-palette-solid, inherit) !important;
    border: 2px solid var(--ui-palette-solid, currentColor) !important;
}
/* Hover/focus mempertahankan palette yang sama, hanya dibuat sedikit lebih gelap. */
.pod :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link):not(.bg-none):is(:hover, :focus, :focus-visible),
.pod .s58-portal-tabs .nav-link:not(.bg-none):is(:hover, :focus, :focus-visible) {
    filter: brightness(.94) saturate(1.03) !important;
}
/* Active/selected/checked tetap SOLID dan dibuat sedikit lebih gelap/kontras. */
.pod :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link):not(.bg-none):is(.active, [aria-pressed="true"], [aria-selected="true"], :active),
.pod .s58-portal-tabs .nav-link:not(.bg-none):is(.active, [aria-pressed="true"], [aria-selected="true"], :active),
.pod :is(.pod-header-right, .pod-actions) .btn-check:checked + :is(.btn, .pod-btn):not(.bg-none) {
    background: var(--ui-palette-solid, #f8fafc) !important;
    background-image: none !important;
    color: var(--ui-palette-contrast, #1f2937) !important;
    border-color: var(--ui-palette-contrast, currentColor) !important;
    filter: brightness(.86) saturate(1.06) !important;
}
/* Outline yang aktif ikut terisi warna solid sebelum dibuat sedikit lebih gelap. */
.pod :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link):is(
    .bg-outline-golds, .bg-outline-oceans, .bg-outline-sages, .bg-outline-roses,
    .bg-outline-futures, .bg-outline-mints, .bg-outline-neons, .bg-outline-snows,
    .bg-outline-grays, .bg-outline-deeps, .bg-outline-metals, .bg-outline-whites,
    .bg-outline-luxury, .bg-outline-luxurys,
    .bg-outline-gold, .bg-outline-ocean, .bg-outline-sage, .bg-outline-rose,
    .bg-outline-future, .bg-outline-mint, .bg-outline-neon, .bg-outline-snow,
    .bg-outline-gray, .bg-outline-deep, .bg-outline-metal, .bg-outline-white,
    .bg-outline-luxuri
):is(.active, [aria-pressed="true"], [aria-selected="true"], :active),
.pod .s58-portal-tabs .nav-link:is(
    .bg-outline-golds, .bg-outline-oceans, .bg-outline-sages, .bg-outline-roses,
    .bg-outline-futures, .bg-outline-mints, .bg-outline-neons, .bg-outline-snows,
    .bg-outline-grays, .bg-outline-deeps, .bg-outline-metals, .bg-outline-whites,
    .bg-outline-luxury, .bg-outline-luxurys,
    .bg-outline-gold, .bg-outline-ocean, .bg-outline-sage, .bg-outline-rose,
    .bg-outline-future, .bg-outline-mint, .bg-outline-neon, .bg-outline-snow,
    .bg-outline-gray, .bg-outline-deep, .bg-outline-metal, .bg-outline-white,
    .bg-outline-luxuri
):is(.active, [aria-pressed="true"], [aria-selected="true"], :active) {
    background: var(--ui-palette-solid, #f8fafc) !important;
    color: var(--ui-palette-contrast, #1f2937) !important;
    filter: brightness(.86) saturate(1.06) !important;
}
/* Full >=1280px: control header-right setinggi 80% header.
   btn-icon-mobile memakai icon sebagai watermark, label tetap tampil di atasnya. */
@media (min-width: 1280px) {
    .pod > .pod-header > :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link),
    .pod > .pod-header .s58-portal-tabs .nav-link {
        height: var(--pod-header-item-height);
        min-height: var(--pod-header-item-height);
        max-height: var(--pod-header-item-height);
        box-sizing: border-box;
    }
    .pod > .pod-header > :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link).btn-icon-mobile,
    .pod > .pod-header .s58-portal-tabs .nav-link.btn-icon-mobile {
        isolation: isolate;
        overflow: hidden;
    }
    .pod > .pod-header > :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link).btn-icon-mobile > :is(i, svg, .btn-icon),
    .pod > .pod-header .s58-portal-tabs .nav-link.btn-icon-mobile > :is(i, svg, .btn-icon) {
        position: absolute !important;
        inset: 50% auto auto 50% !important;
        width: auto;
        height: auto;
        margin: 0 !important;
        color: inherit !important;
        font-size: var(--pod-header-icon-font) !important;
        line-height: 1 !important;
        opacity: .18;
        transform: translate(-50%, -50%) !important;
        z-index: 0;
        pointer-events: none;
    }
    .pod > .pod-header > :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link).btn-icon-mobile > :not(i):not(svg):not(.btn-icon),
    .pod > .pod-header .s58-portal-tabs .nav-link.btn-icon-mobile > :not(i):not(svg):not(.btn-icon) {
        position: relative;
        z-index: 2;
    }
}
.pod .s58-stat-card {
    height: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(100, 116, 139, .25);
    border-radius: 22px;
    color: #1f2937;
    background: #fff;
}
.pod .s58-stat-card small {
    display: block;
    margin-bottom: 2px;
    color: #4b5563;
}
.pod .s58-stat-card strong {
    color: #111827;
    font-size: 14px;
}
.pod .s58-info-box,
.pod .s58-product-card {
    padding: 9px 10px;
    border: 1px solid #c3cad3;
    border-radius: 9px;
    color: #1f2937;
    background: #fff;
}
.pod .s58-product-card {
    padding: 10px;
    border-radius: 10px;
}
.s58-portal-head .pod-header {
    --pod-header-height: 68px;
    --pod-header-item-height: 54.4px;
    --pod-header-icon-font: 38px;
    min-height: var(--pod-header-height);
}
@media (max-width: 1279px) {
    .pod {
        border-radius: var(--ui-radius-md);
        font-size: .8rem;
        margin-bottom: 14px;
    }
    .pod > .pod-header {
        --pod-header-height: clamp(58px, 16vw, 72px);
        --pod-header-item-height: clamp(46.4px, 12.8vw, 57.6px);
        --pod-header-icon-font: clamp(32.5px, 8.96vw, 40.3px);
        min-height: 0;
        height: auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 8px 10px;
        text-align: center;
    }
    .pod > .pod-header > .pod-header-left {
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding-inline-start: 0;
        flex: 0 0 auto;
        justify-content: center;
        align-items: center;
        align-self: center;
        text-align: center;
        overflow: visible;
    }
    .pod > .pod-header > .pod-header-left > .pod-icon {
        width: var(--pod-header-item-height);
        height: var(--pod-header-item-height);
        min-width: var(--pod-header-item-height);
        max-width: var(--pod-header-item-height);
        font-size: var(--pod-header-icon-font);
        opacity: .5;
    }
    .pod > .pod-header > .pod-header-left > :not(.pod-icon):last-child {
        align-items: center;
        text-align: center;
    }
    .pod > .pod-header .pod-title,
    .pod > .pod-header .pod-subtitle {
        width: 100%;
        text-align: left;
    }
    .pod > .pod-header > :is(.pod-header-right, .pod-actions) {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        align-self: center;
        flex-wrap: wrap;
        gap: 6px;
        overflow: visible;
        padding: 0;
    }
    .pod > .pod-header :is(.pod-header-right, .pod-actions) :is(.nav, .nav-tabs, .nav-pills, .btn-group),
    .pod > .pod-header .s58-portal-tabs {
        justify-content: center;
    }
    /* Mobile+Tablet: control tanpa btn-icon-mobile menjadi text-only. */
    .pod > .pod-header > :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link):not(.btn-icon-mobile),
    .pod > .pod-header .s58-portal-tabs .nav-link:not(.btn-icon-mobile) {
        width: auto !important;
        min-width: 68px;
        min-height: 36px;
        height: auto;
        padding: 8px 12px !important;
        font-size: .8rem !important;
        white-space: normal;
    }
    .pod > .pod-header > :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link):not(.btn-icon-mobile) > :is(i, svg, .btn-icon),
    .pod > .pod-header .s58-portal-tabs .nav-link:not(.btn-icon-mobile) > :is(i, svg, .btn-icon) {
        display: none !important;
    }
    /* Mobile+Tablet: btn-icon-mobile menjadi icon-only normal, bukan watermark. */
    .pod > .pod-header > :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link).btn-icon-mobile,
    .pod > .pod-header .s58-portal-tabs .nav-link.btn-icon-mobile {
        width: clamp(42px, 12vw, 52px) !important;
        min-width: clamp(42px, 12vw, 52px) !important;
        height: clamp(42px, 12vw, 52px) !important;
        min-height: clamp(42px, 12vw, 52px) !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: visible;
        font-size: 0 !important;
        white-space: nowrap;
    }
    .pod > .pod-header > :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link).btn-icon-mobile > :not(i):not(svg):not(.btn-icon),
    .pod > .pod-header .s58-portal-tabs .nav-link.btn-icon-mobile > :not(i):not(svg):not(.btn-icon) {
        display: none !important;
    }
    .pod > .pod-header > :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link).btn-icon-mobile > :is(i, svg, .btn-icon),
    .pod > .pod-header .s58-portal-tabs .nav-link.btn-icon-mobile > :is(i, svg, .btn-icon) {
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        margin: 0 !important;
        color: inherit !important;
        font-size: 1.35rem !important;
        opacity: 1;
        filter: none !important;
        transform: none !important;
        z-index: auto;
    }
    .pod > .pod-header > :is(.pod-header-right, .pod-actions) > .badge { display: none; }
    .pod-tiles {
        padding: 9px;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
        gap: 8px;
    }
    .pod-bodys {
        grid-template-columns: 1fr;
        gap: 1px;
        padding: 1px;
    }
    .pod > .pod-body,
    .pod-bodys > .pod-body,
    .pod-body-right,
    .pod-body-left { padding: 9px; }
    .pod-body-right {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: 720px;
        overflow-y: auto;
    }
    .pod-body-left {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        height: 720px;
        min-height: 720px;
        max-height: 720px;
        overflow-y: auto;
    }
    .pod .form-label,
    .pod .form-control,
    .pod .form-select,
    .pod .input-group-text,
    .pod .btn,
    .pod .badge,
    .pod .nav-link,
    .pod table { font-size: 11px; }
}
/* ==========================================================================
   36. TOAST UNIVERSAL RESPONSIVE
   Toast global selalu berada di tengah viewport.
   Page cukup menggunakan:
   <div class="toast-container p-2"></div>
   ========================================================================== */
.toast-container {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 2000 !important;
}
.toast-container .toast {
    width: min(70vw, 720px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    pointer-events: auto !important;
}
@media (max-width: 1279px) {
    .toast-container .toast {
        width: min(calc(100vw - 20px), 680px) !important;
        max-width: min(calc(100vw - 20px), 680px) !important;
    }
}
/* 37. AUTH LOGIN FLOATING ACTIVITY - Feed aktivitas publik di sisi tengah-kiri authLogin. Item ditampilkan
   Penggunaan: otomatis. */
.s58-auth-activity-feed {
    position: fixed;
    top: 90%;
    left: 15px;
    z-index: 20;
    width: min(450px, calc(120vw - 22px));
    transform: translateY(-50%);
    pointer-events: none;
    background-color: rgba(10, 10, 0, 0.7);
    border: 1px rgba(var(--ui-white-rgb), 1);
    border-radius: 12px;
}
.s58-auth-activity-card {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(20, 20, 80,.8);
    border-radius: 12px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
    pointer-events: auto;
}
.s58-auth-activity-card[hidden] {
    display: none !important;
}
.s58-auth-activity-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
}
.s58-auth-activity-head i {
    flex: 0 0 auto;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}
.s58-auth-activity-title {
    margin: 0;
    font-family: var(--ui-font-title);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.1;
    text-transform: lowercase;
}
.s58-auth-activity-body {
    margin: 14px 0px 4px 26px;
    font-family: var(--ui-font-body);
    font-size: 1.0rem;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.1;
}
.s58-auth-activity-meta {
    display: block;
    margin-top: 2px;
    font-size: .7rem;
    opacity: .84;
}
.s58-auth-activity-progress {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}
.s58-auth-activity-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
}
.s58-auth-activity-dot.active {
    background: rgba(255,255,255,.95);
}
@media (max-width: 1279px) {
    .s58-auth-activity-feed {
        top: auto;
        right: 10px;
        bottom: 74px;
        left: 10px;
        width: auto;
        transform: none;
    }
    .s58-auth-activity-card {
        padding: 10px 12px;
    }
}
/* 39. FLOATING NEWS AUTHLOGIN — V13 - Layout kiri bawah dengan 2 mode responsive.
   Penggunaan: otomatis. */
.s58-auth-activity-feed#notif-container {
    position: fixed;
    left: 20px;
    right: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    top: auto;
    width: 50%;
    max-width: 720px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    transform: none;
    z-index: 999;
    pointer-events: none;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.s58-auth-activity-feed#notif-container::after {
    content: "";
    display: block;
    min-height: 16px;
    flex-shrink: 0;
}
.s58-auth-activity-feed .notif-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 68px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid var(--ui-theme-border, rgba(255,255,255,.35));
    border-radius: 10px;
    background: var(--ui-bg-gradient, rgba(20,20,20,.88));
    color: var(--ui-theme-text, #fff);
    opacity: .80;
    transform: translateY(14px) scale(.98);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: auto;
}
.s58-auth-activity-feed .notif-card.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.s58-auth-activity-feed .notif-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255,255,255,.55);
}
.s58-auth-activity-feed .notif-icon i {
    font-size: 1.65rem;
    line-height: 1;
    color: inherit;
}
.s58-auth-activity-feed .notif-body {
    position: relative;
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4px;
}
.s58-auth-activity-feed .notif-title {
    padding-right: 90px;
    font-family: var(--ui-font-title);
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.15;
    color: inherit;
}
.s58-auth-activity-feed .notif-desc {
    position: absolute;
    top: 1px;
    right: 2px;
    white-space: nowrap;
    font-family: var(--ui-font-help);
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.1;
    color: inherit;
    text-align: right;
}
.s58-auth-activity-feed .notif-subtitle {
    margin-top: 5px;
    padding: 2px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: var(--ui-font-body);
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.3;
    color: inherit;
}
.s58-auth-activity-feed .notif-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    overflow: hidden;
    background: rgba(255,255,255,.12);
}
.s58-auth-activity-feed .notif-progress::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(250,250,250,.9);
    transform-origin: left center;
    animation: s58NotifProgress 5.5s linear forwards;
}
@keyframes s58NotifProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}
@media (max-width: 1279px) {
    .s58-auth-activity-feed#notif-container {
        left: 12px;
        right: 12px;
        bottom: calc(64px + env(safe-area-inset-bottom));
        width: auto;
        max-width: none;
        max-height: 36vh;
    }
    .s58-auth-activity-feed .notif-card {
        min-height: 60px;
        padding: 8px;
        gap: 6px;
    }
    .s58-auth-activity-feed .notif-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
    .s58-auth-activity-feed .notif-icon i { font-size: 1.35rem; }
    .s58-auth-activity-feed .notif-title { padding-right: 76px; font-size: .82rem; }
    .s58-auth-activity-feed .notif-desc { font-size: .72rem; }
    .s58-auth-activity-feed .notif-subtitle { font-size: .78rem; line-height: 1.25; }
}
/* 40. FONT ANGKA / KODE - system monospace + slashed-zero untuk membedakan 0/O dan 1/l pada NOID, PIN.
   Tidak memakai file font tambahan agar tidak memunculkan request/404 asset yang tidak tersedia. */
.s58-code-number,
.s58-number,
input[type="number"],
input[inputmode="numeric"],
input[inputmode="tel"],
[data-s58-number] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    font-variant-numeric: tabular-nums slashed-zero;
    font-feature-settings: "zero" 1, "tnum" 1;
    letter-spacing: .01em;
}
/* 41. TOKO STOKIS - Fitur UI modular, konsisten, dan ringan.
   Penggunaan: otomatis. */
.s58-store-photo {
    width: min(180px, 100%);
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
/* 42. LOGO BANK - Logo master bank pada tabel dan modal vBank.
   Penggunaan: otomatis. */
.s58-bank-logo{width:42px;height:42px;min-width:42px;border:1px solid rgba(0,0,0,.12);border-radius:10px;background:#fff;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:5px}.s58-bank-logo img{display:block;width:100%;height:100%;object-fit:contain}.s58-bank-logo-lg{width:64px;height:64px;min-width:64px}
/* 43. AUTH LOGIN NAVBAR CONTACT & VERSION — v19 - Menyamakan button Hubungi Kami dengan nav-link dan merapikan footer versi.
   Penggunaan: .s58-auth-navbar .nav-link dan .s58-auth-footer-version. */
.s58-auth-navbar button.nav-link {
    appearance: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
}
.s58-auth-footer-version {
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    color: #dfe4e8;
    font-size: .76rem;
}
.s58-auth-footer-version > :last-child {
    text-align: right;
}
#s58ContactModal .modal-content {
    color: #202a33;
}
#s58ContactModal .form-control {
    background: #fff !important;
    color: #202a33 !important;
    font-weight: 400;
}
@media (max-width: 1279px) {
    .s58-auth-footer-version {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 8px 12px;
    }
    .s58-auth-footer-version > :last-child {
        text-align: center;
    }
}
.s58-public-modal .modal-content {
    background: #f7f8fa;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 16px;
    color: #17202a;
}
.s58-public-modal .modal-header,
.s58-public-modal .modal-footer {
    background: #ffffff;
    border-color: #e2e8f0;
}
.s58-download-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.s58-download-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #dfe5ec;
    border-radius: 12px;
    color: #1f2937;
}
.s58-download-card:hover,
.s58-download-card:focus-within {
    border-color: #aab6c4;
}
.s58-download-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #eef2f6;
    border: 1px solid #d9e0e8;
    border-radius: 10px;
    color: #334155;
    font-size: 1.35rem;
}
.s58-download-info {
    min-width: 0;
}
.s58-download-name {
    display: block;
    overflow: hidden;
    color: #111827;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.s58-download-meta {
    margin-top: 3px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 400;
}
.s58-download-action {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    color: #0f172a;
}
.s58-download-empty,
.s58-gallery-empty {
    padding: 30px 18px;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    color: #64748b;
    text-align: center;
}
.s58-gallery-carousel {
    overflow: hidden;
    background: #0b1118;
    border-radius: 14px;
}
.s58-gallery-frame {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b1118;
}
.s58-gallery-frame img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: contain;
    object-position: center;
}
.s58-gallery-caption {
    right: 0;
    bottom: 0;
    left: 0;
    padding: 26px 18px 12px;
    background: linear-gradient(0deg, rgba(0,0,0,.78), transparent);
    color: #ffffff;
    text-align: left;
}
.s58-gallery-count {
    color: #64748b;
    font-size: .75rem;
}
@media (max-width: 1279px) {
    .s58-download-grid {
        grid-template-columns: 1fr;
    }
    .s58-download-card {
        grid-template-columns: 42px minmax(0, 1fr) 36px;
        padding: 10px;
    }
    .s58-download-icon {
        width: 42px;
        height: 42px;
    }
    .s58-gallery-frame,
    .s58-gallery-frame img {
        height: clamp(300px, 48vw, 440px);
        min-height: 300px;
    }
}
/* ==========================================================================
   44. FULL PAGE APP LAUNCHER SHELL — BETA v61.10102026

   #s58-sidenav tetap mempertahankan nama/API legacy agar SPA tidak rusak,
   tetapi secara visual bukan sidebar lagi. Elemen ini menjadi launcher penuh
   seperti app drawer Android / Windows tiles dengan material fintech terang.
   ========================================================================== */
html[data-sidenav-size="offcanvas"] .app-topbar,
html[data-sidenav-size="offcanvas"] .content-page {
    margin-inline-start: 0 !important;
}
html[data-sidenav-size="offcanvas"] #s58-sidenav,
html[data-sidenav-size="offcanvas"] .sidenav-menu {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(.992) !important;
    transform-origin: center !important;
    background:
        linear-gradient(135deg, rgba(3, 26, 45, .20), rgba(7, 61, 75, .08) 42%, rgba(214, 170, 77, .08)),
        url("img/member_home_bg.webp") center center / cover no-repeat !important;
    color: #172437 !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    z-index: 1080 !important;
    transition: opacity .14s ease, transform .14s ease !important;
}
html[data-sidenav-size="offcanvas"].sidebar-enable #s58-sidenav,
html[data-sidenav-size="offcanvas"].sidebar-enable .sidenav-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
}
html[data-sidenav-size="offcanvas"] #s58-sidenav *,
html[data-sidenav-size="offcanvas"] .sidenav-menu * {
    box-sizing: border-box;
}
.sidenav-menu .scrollbar,
html[data-sidenav-size="offcanvas"] #s58-sidenav > .scrollbar {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(30, 74, 91, .42) transparent;
}
.sidenav-menu .scrollbar::-webkit-scrollbar { width: 6px; }
.sidenav-menu .scrollbar::-webkit-scrollbar-track { background: transparent; }
.sidenav-menu .scrollbar::-webkit-scrollbar-thumb {
    background: rgba(30, 74, 91, .34);
    border-radius: 999px;
}
#sidenav-menu {
    width: 100%;
    min-height: 100%;
}
/* Launcher sudah menutup viewport sehingga backdrop terpisah tidak diperlukan. */
#custom-backdrop.offcanvas-backdrop {
    display: none !important;
}
body.s58-nav-open .app-topbar,
body.s58-nav-open .content-page,
body.s58-nav-mini .app-topbar,
body.s58-nav-mini .content-page {
    margin-inline-start: 0 !important;
}
.s58-apps-trigger {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-inline: 13px !important;
    border: 1px solid rgba(36, 73, 88, .34) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(227,241,244,.86)) !important;
    color: #17384a !important;
    box-shadow: none !important;
    font-family: var(--ui-font-body);
    font-size: .78rem;
    font-weight: 600;
}
.s58-apps-trigger i { color: #087f86; font-size: 1.15rem; }
.s58-apps-trigger:is(:hover, :focus-visible) {
    background: linear-gradient(135deg, #ffffff, #dff3f5) !important;
    border-color: rgba(8, 127, 134, .62) !important;
    color: #0b5360 !important;
}
@media (max-width: 1279px) {
    .s58-apps-trigger {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0 !important;
        border-radius: 11px !important;
    }
    .s58-apps-trigger span { display: none; }
    .s58-apps-trigger i { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-sidenav-size="offcanvas"] #s58-sidenav,
    html[data-sidenav-size="offcanvas"] .sidenav-menu {
        transition: none !important;
    }
}
/* ==========================================================================
   46. THEME TEXT / BUTTON UTILITIES — FINAL OVERRIDE
   Kontrak penamaan:
   - txt-*s                  : teks gradient
   - txt-*                   : teks solid
   - txt-outline-*s          : outline multicolor/gradient
   - txt-outline-*           : outline solid
   - btn bg-*s               : button gradient
   - btn bg-*                : button solid
   - btn bg-outline-*s       : button outline gradient
   - btn bg-outline-*        : button outline solid
   Catatan kompatibilitas:
   - luxury lama dipertahankan sebagai gradient: *-luxury.
   - alias gradient baru: *-luxurys.
   - solid luxury tetap memakai suffix lama: *-luxuri.
   ========================================================================== */
/* --------------------------------------------------------------------------
   46.01 PALETTE TOKENS — SINGLE SOURCE
   Satu deklarasi per keluarga warna untuk text/button/nav dan komponen.
   -------------------------------------------------------------------------- */
/* GOLD */
:is(
    .txt-golds, .txt-gold, .txt-outline-golds, .txt-outline-gold,
    .btn.bg-golds, .nav-link.bg-golds, .btn.bg-gold, .nav-link.bg-gold, .btn.bg-outline-golds, .nav-link.bg-outline-golds, .btn.bg-outline-gold, .nav-link.bg-outline-gold
),
:is(.pod, .tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-golds, .bg-gold, .bg-outline-golds, .bg-outline-gold) {
    --ui-palette-solid: #c9961a;
    --ui-palette-start: #8c5008;
    --ui-palette-mid: #ffe070;
    --ui-palette-end: #a66b0a;
    --ui-palette-gradient: linear-gradient(50deg, #8c5008 0%, #e5b72a 30%, #ffe070 50%, #d99c17 72%, #a66b0a 100%);
    --ui-palette-contrast: #101827;
}
/* OCEAN */
:is(
    .txt-oceans, .txt-ocean, .txt-outline-oceans, .txt-outline-ocean,
    .btn.bg-oceans, .nav-link.bg-oceans, .btn.bg-ocean, .nav-link.bg-ocean, .btn.bg-outline-oceans, .nav-link.bg-outline-oceans, .btn.bg-outline-ocean, .nav-link.bg-outline-ocean
),
:is(.pod, .tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-oceans, .bg-ocean, .bg-outline-oceans, .bg-outline-ocean) {
    --ui-palette-solid: #1677c8;
    --ui-palette-start: #283278;
    --ui-palette-mid: #2882dc;
    --ui-palette-end: #282864;
    --ui-palette-gradient: linear-gradient(50deg, #283278 0%, #285ab4 25%, #2882dc 50%, #465ac8 75%, #282864 100%);
    --ui-palette-contrast: #ffffff;
}
/* SAGE */
:is(
    .txt-sages, .txt-sage, .txt-outline-sages, .txt-outline-sage,
    .btn.bg-sages, .nav-link.bg-sages, .btn.bg-sage, .nav-link.bg-sage, .btn.bg-outline-sages, .nav-link.bg-outline-sages, .btn.bg-outline-sage, .nav-link.bg-outline-sage
),
:is(.pod, .tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-sages, .bg-sage, .bg-outline-sages, .bg-outline-sage) {
    --ui-palette-solid: #2f8f5b;
    --ui-palette-start: #0a5032;
    --ui-palette-mid: #3cb464;
    --ui-palette-end: #055a28;
    --ui-palette-gradient: linear-gradient(50deg, #0a5032 0%, #288c46 25%, #3cb464 50%, #1e8246 75%, #055a28 100%);
    --ui-palette-contrast: #ffffff;
}
/* ROSE */
:is(
    .txt-roses, .txt-rose, .txt-outline-roses, .txt-outline-rose,
    .btn.bg-roses, .nav-link.bg-roses, .btn.bg-rose, .nav-link.bg-rose, .btn.bg-outline-roses, .nav-link.bg-outline-roses, .btn.bg-outline-rose, .nav-link.bg-outline-rose
),
:is(.pod, .tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-roses, .bg-rose, .bg-outline-roses, .bg-outline-rose) {
    --ui-palette-solid: #d94a4a;
    --ui-palette-start: #96141e;
    --ui-palette-mid: #fa5032;
    --ui-palette-end: #aa1e1e;
    --ui-palette-gradient: linear-gradient(50deg, #aa1e1e 0%, #dc3232 25%, #fa5032 50%, #dc283c 75%, #96141e 100%);
    --ui-palette-contrast: #ffffff;
}
/* FUTURE */
:is(
    .txt-futures, .txt-future, .txt-outline-futures, .txt-outline-future,
    .btn.bg-futures, .nav-link.bg-futures, .btn.bg-future, .nav-link.bg-future, .btn.bg-outline-futures, .nav-link.bg-outline-futures, .btn.bg-outline-future, .nav-link.bg-outline-future
),
:is(.pod, .tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-futures, .bg-future, .bg-outline-futures, .bg-outline-future) {
    --ui-palette-solid: #0b7e8d;
    --ui-palette-start: #146496;
    --ui-palette-mid: #64bedc;
    --ui-palette-end: #2846a0;
    --ui-palette-gradient: linear-gradient(50deg, #146496 0%, #14a0be 25%, #64bedc 50%, #3c78dc 75%, #2846a0 100%);
    --ui-palette-contrast: #ffffff;
}
/* MINT */
:is(
    .txt-mints, .txt-mint, .txt-outline-mints, .txt-outline-mint,
    .btn.bg-mints, .nav-link.bg-mints, .btn.bg-mint, .nav-link.bg-mint, .btn.bg-outline-mints, .nav-link.bg-outline-mints, .btn.bg-outline-mint, .nav-link.bg-outline-mint
),
:is(.pod, .tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-mints, .bg-mint, .bg-outline-mints, .bg-outline-mint) {
    --ui-palette-solid: #9acb2d;
    --ui-palette-start: #46780a;
    --ui-palette-mid: #d9f05b;
    --ui-palette-end: #5a8c14;
    --ui-palette-gradient: linear-gradient(50deg, #5a8c14 0%, #8cbe1e 25%, #d9f05b 50%, #78b41e 75%, #46780a 100%);
    --ui-palette-contrast: #17210b;
}
/* NEON */
:is(
    .txt-neons, .txt-neon, .txt-outline-neons, .txt-outline-neon,
    .btn.bg-neons, .nav-link.bg-neons, .btn.bg-neon, .nav-link.bg-neon, .btn.bg-outline-neons, .nav-link.bg-outline-neons, .btn.bg-outline-neon, .nav-link.bg-outline-neon
),
:is(.pod, .tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-neons, .bg-neon, .bg-outline-neons, .bg-outline-neon) {
    --ui-palette-solid: #7a3ec8;
    --ui-palette-start: #5a1e78;
    --ui-palette-mid: #dc50be;
    --ui-palette-end: #5a28b4;
    --ui-palette-gradient: linear-gradient(50deg, #5a28b4 0%, #9632d2 25%, #dc50be 50%, #b42896 75%, #5a1e78 100%);
    --ui-palette-contrast: #ffffff;
}
/* SNOW */
:is(
    .txt-snows, .txt-snow, .txt-outline-snows, .txt-outline-snow,
    .btn.bg-snows, .nav-link.bg-snows, .btn.bg-snow, .nav-link.bg-snow, .btn.bg-outline-snows, .nav-link.bg-outline-snows, .btn.bg-outline-snow, .nav-link.bg-outline-snow
),
:is(.pod, .tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-snows, .bg-snow, .bg-outline-snows, .bg-outline-snow) {
    --ui-palette-solid: #e8eaee;
    --ui-palette-start: #6e6e78;
    --ui-palette-mid: #f5ebd2;
    --ui-palette-end: #82828c;
    --ui-palette-gradient: linear-gradient(50deg, #82828c 0%, #bebec8 25%, #f5ebd2 50%, #b4b4be 75%, #6e6e78 100%);
    --ui-palette-contrast: #222b3a;
}
/* GRAY */
:is(
    .txt-grays, .txt-gray, .txt-outline-grays, .txt-outline-gray,
    .btn.bg-grays, .nav-link.bg-grays, .btn.bg-gray, .nav-link.bg-gray, .btn.bg-outline-grays, .nav-link.bg-outline-grays, .btn.bg-outline-gray, .nav-link.bg-outline-gray
),
:is(.pod, .tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-grays, .bg-gray, .bg-outline-grays, .bg-outline-gray) {
    --ui-palette-solid: #6b7280;
    --ui-palette-start: #28283c;
    --ui-palette-mid: #b4bec8;
    --ui-palette-end: #323246;
    --ui-palette-gradient: linear-gradient(50deg, #323246 0%, #646e82 25%, #b4bec8 50%, #646478 75%, #28283c 100%);
    --ui-palette-contrast: #ffffff;
}
/* DEEP */
:is(
    .txt-deeps, .txt-deep, .txt-outline-deeps, .txt-outline-deep,
    .btn.bg-deeps, .nav-link.bg-deeps, .btn.bg-deep, .nav-link.bg-deep, .btn.bg-outline-deeps, .nav-link.bg-outline-deeps, .btn.bg-outline-deep, .nav-link.bg-outline-deep
),
:is(.pod, .tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-deeps, .bg-deep, .bg-outline-deeps, .bg-outline-deep) {
    --ui-palette-solid: #18233c;
    --ui-palette-start: #0a0a14;
    --ui-palette-mid: #464682;
    --ui-palette-end: #141428;
    --ui-palette-gradient: linear-gradient(50deg, #141428 0%, #282864 25%, #464682 50%, #1e1e46 75%, #0a0a14 100%);
    --ui-palette-contrast: #ffffff;
}
/* WHITE */
:is(
    .txt-whites, .txt-white, .txt-outline-whites, .txt-outline-white,
    .btn.bg-whites, .nav-link.bg-whites, .btn.bg-outline-whites, .nav-link.bg-outline-whites, .btn.bg-outline-white, .nav-link.bg-outline-white
),
:is(.pod, .tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-whites, .bg-outline-whites, .bg-outline-white) {
    --ui-palette-solid: #f8fafc;
    --ui-palette-start: #aeb4bd;
    --ui-palette-mid: #ffffff;
    --ui-palette-end: #d7dce2;
    --ui-palette-gradient: linear-gradient(50deg, #c4c9d0 0%, #ffffff 32%, #f5f1e7 52%, #d7dce2 78%, #aeb4bd 100%);
    --ui-palette-contrast: #1f2937;
}
/* METAL */
:is(
    .txt-metals, .txt-dark, .txt-outline-darks, .txt-outline-dark,
    .btn.bg-metals, .nav-link.bg-metals, .btn.bg-metal, .nav-link.bg-metal, .btn.bg-outline-metals, .nav-link.bg-outline-metals, .btn.bg-outline-metal, .nav-link.bg-outline-metal
),
:is(.pod, .tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-metals, .bg-metal, .bg-outline-metals, .bg-outline-metal) {
    --ui-palette-solid: #1f2937;
    --ui-palette-start: #0a0a0a;
    --ui-palette-mid: #4b5563;
    --ui-palette-end: #111827;
    --ui-palette-gradient: linear-gradient(50deg, #111827 0%, #374151 32%, #4b5563 50%, #1f2937 72%, #0a0a0a 100%);
    --ui-palette-contrast: #ffffff;
}
/* LUXURY */
:is(
    .txt-luxury, .txt-luxurys, .txt-luxuri, .txt-outline-luxury, .txt-outline-luxurys, .txt-outline-luxuri,
    .btn.bg-luxury, .nav-link.bg-luxury, .btn.bg-luxurys, .nav-link.bg-luxurys, .btn.bg-luxuri, .nav-link.bg-luxuri, .btn.bg-outline-luxury, .nav-link.bg-outline-luxury, .btn.bg-outline-luxurys, .nav-link.bg-outline-luxurys, .btn.bg-outline-luxuri, .nav-link.bg-outline-luxuri
),
:is(.pod, .tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-luxury, .bg-luxurys, .bg-luxuri, .bg-outline-luxury, .bg-outline-luxurys, .bg-outline-luxuri) {
    --ui-palette-solid: #b1842e;
    --ui-palette-start: #7c4c0a;
    --ui-palette-mid: #f2d06c;
    --ui-palette-end: #9d6316;
    --ui-palette-gradient: linear-gradient(50deg, #7c4c0a 0%, #c9972d 28%, #f2d06c 50%, #c58728 74%, #8b5410 100%);
    --ui-palette-contrast: #16120a;
}
/* --------------------------------------------------------------------------
   46.02 TEXT — GRADIENT (*s)
   -------------------------------------------------------------------------- */
:is(
    .txt-golds, .txt-oceans, .txt-sages, .txt-roses,
    .txt-futures, .txt-mints, .txt-neons, .txt-snows,
    .txt-grays, .txt-deeps, .txt-whites, .txt-metals,
    .txt-luxury, .txt-luxurys
) {
    display: inline-block;
    background-color: transparent !important;
    background-image: var(--ui-palette-gradient) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}
/* --------------------------------------------------------------------------
   46.03 TEXT — SOLID (*)
   -------------------------------------------------------------------------- */
:is(
    .txt-gold, .txt-ocean, .txt-sage, .txt-rose,
    .txt-future, .txt-mint, .txt-neon, .txt-snow,
    .txt-gray, .txt-deep, .txt-white, .txt-dark,
    .txt-luxuri
) {
    background: none !important;
    color: var(--ui-palette-solid) !important;
    -webkit-text-fill-color: var(--ui-palette-solid) !important;
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: none !important;
}
/* --------------------------------------------------------------------------
   46.04 TEXT OUTLINE — GRADIENT (*s)
   CSS text-stroke tidak mendukung gradient native. Outline multicolor dibuat
   dari empat sisi palette agar tetap bekerja pada teks dan icon font tanpa
   membutuhkan atribut tambahan/data-text.
   -------------------------------------------------------------------------- */
:is(
    .txt-outline-golds, .txt-outline-oceans, .txt-outline-sages,
    .txt-outline-roses, .txt-outline-futures, .txt-outline-mints,
    .txt-outline-neons, .txt-outline-snows, .txt-outline-grays,
    .txt-outline-deeps, .txt-outline-whites, .txt-outline-darks,
    .txt-outline-luxury, .txt-outline-luxurys
) {
    background: none !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 0 transparent !important;
    paint-order: stroke fill;
    text-shadow:
        -1px -1px 0 var(--ui-palette-start),
         1px -1px 0 var(--ui-palette-mid),
         1px  1px 0 var(--ui-palette-end),
        -1px  1px 0 var(--ui-palette-mid) !important;
}
/* --------------------------------------------------------------------------
   46.05 TEXT OUTLINE — SOLID (*)
   -------------------------------------------------------------------------- */
:is(
    .txt-outline-gold, .txt-outline-ocean, .txt-outline-sage,
    .txt-outline-rose, .txt-outline-future, .txt-outline-mint,
    .txt-outline-neon, .txt-outline-snow, .txt-outline-gray,
    .txt-outline-deep, .txt-outline-white, .txt-outline-dark,
    .txt-outline-luxuri
) {
    background: none !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1px var(--ui-palette-solid) !important;
    paint-order: stroke fill;
    text-shadow: none !important;
}
/* --------------------------------------------------------------------------
   46.06 BUTTON — GRADIENT (btn bg-*s)
   Ditempatkan sebagai final override agar tidak kalah oleh .pod/.modal rules.
   -------------------------------------------------------------------------- */
:is(
    .btn.bg-golds, .btn.bg-oceans, .btn.bg-sages, .btn.bg-roses,
    .btn.bg-futures, .btn.bg-mints, .btn.bg-neons, .btn.bg-snows,
    .btn.bg-grays, .btn.bg-deeps, .btn.bg-whites, .btn.bg-metals,
    .btn.bg-luxury, .btn.bg-luxurys
) {
    --bs-btn-color: var(--ui-palette-contrast);
    --bs-btn-hover-color: var(--ui-palette-contrast);
    --bs-btn-active-color: var(--ui-palette-contrast);
    --bs-btn-disabled-color: var(--ui-palette-contrast);
    background-color: transparent !important;
    background-image: var(--ui-palette-gradient) !important;
    color: var(--ui-palette-contrast) !important;
    border: 1px solid var(--ui-palette-solid) !important;
    box-shadow: none !important;
    filter: none !important;
}
:is(
    .btn.bg-golds, .btn.bg-oceans, .btn.bg-sages, .btn.bg-roses,
    .btn.bg-futures, .btn.bg-mints, .btn.bg-neons, .btn.bg-snows,
    .btn.bg-grays, .btn.bg-deeps, .btn.bg-whites, .btn.bg-metals,
    .btn.bg-luxury, .btn.bg-luxurys
):is(:hover, :focus, :focus-visible, :active, .active, [aria-pressed="true"]) {
    background-color: transparent !important;
    background-image: var(--ui-palette-gradient) !important;
    color: var(--ui-palette-contrast) !important;
    border-color: var(--ui-palette-solid) !important;
    box-shadow: none !important;
    filter: brightness(.92) !important;
}
/* --------------------------------------------------------------------------
   46.07 BUTTON — SOLID (btn bg-*)
   -------------------------------------------------------------------------- */
:is(
    .btn.bg-gold, .btn.bg-ocean, .btn.bg-sage, .btn.bg-rose,
    .btn.bg-future, .btn.bg-mint, .btn.bg-neon, .btn.bg-snow,
    .btn.bg-gray, .btn.bg-deep, .btn.bg-metal,
    .btn.bg-luxuri
) {
    --bs-btn-color: var(--ui-palette-contrast);
    --bs-btn-hover-color: var(--ui-palette-contrast);
    --bs-btn-active-color: var(--ui-palette-contrast);
    background: var(--ui-palette-solid) !important;
    color: var(--ui-palette-contrast) !important;
    border: 1px solid var(--ui-palette-solid) !important;
    box-shadow: none !important;
    filter: none !important;
}
:is(
    .btn.bg-gold, .btn.bg-ocean, .btn.bg-sage, .btn.bg-rose,
    .btn.bg-future, .btn.bg-mint, .btn.bg-neon, .btn.bg-snow,
    .btn.bg-gray, .btn.bg-deep, .btn.bg-metal,
    .btn.bg-luxuri
):is(:hover, :focus, :focus-visible, :active, .active, [aria-pressed="true"]) {
    background: var(--ui-palette-solid) !important;
    color: var(--ui-palette-contrast) !important;
    border-color: var(--ui-palette-solid) !important;
    box-shadow: none !important;
    filter: brightness(.90) !important;
}
/* --------------------------------------------------------------------------
   46.08 BUTTON OUTLINE — COMMON
   -------------------------------------------------------------------------- */
:is(
    .btn.bg-outline-golds, .btn.bg-outline-oceans, .btn.bg-outline-sages,
    .btn.bg-outline-roses, .btn.bg-outline-futures, .btn.bg-outline-mints,
    .btn.bg-outline-neons, .btn.bg-outline-snows, .btn.bg-outline-grays,
    .btn.bg-outline-deeps, .btn.bg-outline-whites, .btn.bg-outline-metals,
    .btn.bg-outline-luxury, .btn.bg-outline-luxurys,
    .btn.bg-outline-gold, .btn.bg-outline-ocean, .btn.bg-outline-sage,
    .btn.bg-outline-rose, .btn.bg-outline-future, .btn.bg-outline-mint,
    .btn.bg-outline-neon, .btn.bg-outline-snow, .btn.bg-outline-gray,
    .btn.bg-outline-deep, .btn.bg-outline-white, .btn.bg-outline-metal,
    .btn.bg-outline-luxuri
) {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}
/* Gradient border. */
:is(
    .btn.bg-outline-golds, .btn.bg-outline-oceans, .btn.bg-outline-sages,
    .btn.bg-outline-roses, .btn.bg-outline-futures, .btn.bg-outline-mints,
    .btn.bg-outline-neons, .btn.bg-outline-snows, .btn.bg-outline-grays,
    .btn.bg-outline-deeps, .btn.bg-outline-whites, .btn.bg-outline-metals,
    .btn.bg-outline-luxury, .btn.bg-outline-luxurys
) {
    color: var(--ui-palette-solid) !important;
    border: 1px solid transparent !important;
}
:is(
    .btn.bg-outline-golds, .btn.bg-outline-oceans, .btn.bg-outline-sages,
    .btn.bg-outline-roses, .btn.bg-outline-futures, .btn.bg-outline-mints,
    .btn.bg-outline-neons, .btn.bg-outline-snows, .btn.bg-outline-grays,
    .btn.bg-outline-deeps, .btn.bg-outline-whites, .btn.bg-outline-metals,
    .btn.bg-outline-luxury, .btn.bg-outline-luxurys
)::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--ui-palette-gradient);
    pointer-events: none;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
:is(
    .btn.bg-outline-golds, .btn.bg-outline-oceans, .btn.bg-outline-sages,
    .btn.bg-outline-roses, .btn.bg-outline-futures, .btn.bg-outline-mints,
    .btn.bg-outline-neons, .btn.bg-outline-snows, .btn.bg-outline-grays,
    .btn.bg-outline-deeps, .btn.bg-outline-whites, .btn.bg-outline-metals,
    .btn.bg-outline-luxury, .btn.bg-outline-luxurys
):is(:hover, :focus, :focus-visible, :active, .active, [aria-pressed="true"]) {
    background-image: var(--ui-palette-gradient) !important;
    color: var(--ui-palette-contrast) !important;
    border-color: transparent !important;
}
/* Solid border. */
:is(
    .btn.bg-outline-gold, .btn.bg-outline-ocean, .btn.bg-outline-sage,
    .btn.bg-outline-rose, .btn.bg-outline-future, .btn.bg-outline-mint,
    .btn.bg-outline-neon, .btn.bg-outline-snow, .btn.bg-outline-gray,
    .btn.bg-outline-deep, .btn.bg-outline-white, .btn.bg-outline-metal,
    .btn.bg-outline-luxuri
) {
    color: var(--ui-palette-solid) !important;
    border: 1px solid var(--ui-palette-solid) !important;
}
:is(
    .btn.bg-outline-gold, .btn.bg-outline-ocean, .btn.bg-outline-sage,
    .btn.bg-outline-rose, .btn.bg-outline-future, .btn.bg-outline-mint,
    .btn.bg-outline-neon, .btn.bg-outline-snow, .btn.bg-outline-gray,
    .btn.bg-outline-deep, .btn.bg-outline-white, .btn.bg-outline-metal,
    .btn.bg-outline-luxuri
):is(:hover, :focus, :focus-visible, :active, .active, [aria-pressed="true"]) {
    background: var(--ui-palette-solid) !important;
    color: var(--ui-palette-contrast) !important;
    border-color: var(--ui-palette-solid) !important;
}
/* --------------------------------------------------------------------------
   46.09 TILES / WIDGET — COMPONENT UTILITY BRIDGE
   ========================================================================== */
/* Palette token memakai 46.01 SINGLE SOURCE di atas. */
/* Surface gradient — suffix *s. */
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(
    .bg-golds, .bg-oceans, .bg-sages, .bg-roses,
    .bg-futures, .bg-mints, .bg-neons, .bg-snows,
    .bg-grays, .bg-deeps, .bg-whites, .bg-metals,
    .bg-luxury, .bg-luxurys
) {
    --tiles-surface: var(--ui-palette-gradient);
    --tiles-color: var(--ui-palette-contrast);
    --tiles-border: var(--ui-palette-solid);
    --widget-surface: var(--ui-palette-gradient);
    --widget-color: var(--ui-palette-contrast);
    background: transparent;
}
/* Surface solid — tanpa suffix s. */
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(
    .bg-gold, .bg-ocean, .bg-sage, .bg-rose,
    .bg-future, .bg-mint, .bg-neon, .bg-snow,
    .bg-gray, .bg-deep, .bg-metal,
    .bg-luxuri
) {
    --tiles-surface: var(--ui-palette-solid);
    --tiles-color: var(--ui-palette-contrast);
    --tiles-border: var(--ui-palette-solid);
    --widget-surface: var(--ui-palette-solid);
    --widget-color: var(--ui-palette-contrast);
    border-color: var(--ui-palette-solid) !important;
}
/* Outline common. */
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(
    .bg-outline-golds, .bg-outline-oceans, .bg-outline-sages,
    .bg-outline-roses, .bg-outline-futures, .bg-outline-mints,
    .bg-outline-neons, .bg-outline-snows, .bg-outline-grays,
    .bg-outline-deeps, .bg-outline-whites, .bg-outline-metals,
    .bg-outline-luxury, .bg-outline-luxurys,
    .bg-outline-gold, .bg-outline-ocean, .bg-outline-sage,
    .bg-outline-rose, .bg-outline-future, .bg-outline-mint,
    .bg-outline-neon, .bg-outline-snow, .bg-outline-gray,
    .bg-outline-deep, .bg-outline-white, .bg-outline-metal,
    .bg-outline-luxuri
) {
    --tiles-surface: transparent;
    --tiles-color: var(--ui-palette-solid);
    --widget-surface: transparent;
    --widget-color: var(--ui-palette-solid);
    background: transparent !important;
    color: var(--ui-palette-solid) !important;
    box-shadow: none !important;
    filter: none !important;
}
/* Gradient outline. border-image dipakai agar tidak bentrok dengan ::before/::after
   milik tiles-cover, widget-user, counter, progress, dan model lain. */
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(
    .bg-outline-golds, .bg-outline-oceans, .bg-outline-sages,
    .bg-outline-roses, .bg-outline-futures, .bg-outline-mints,
    .bg-outline-neons, .bg-outline-snows, .bg-outline-grays,
    .bg-outline-deeps, .bg-outline-whites, .bg-outline-metals,
    .bg-outline-luxury, .bg-outline-luxurys
) {
    --tiles-border: transparent;
    --widget-border: transparent;
    border: 1px solid transparent !important;
    border-image: var(--ui-palette-gradient) 1 !important;
}
/* Solid outline. */
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(
    .bg-outline-gold, .bg-outline-ocean, .bg-outline-sage,
    .bg-outline-rose, .bg-outline-future, .bg-outline-mint,
    .bg-outline-neon, .bg-outline-snow, .bg-outline-gray,
    .bg-outline-deep, .bg-outline-white, .bg-outline-metal,
    .bg-outline-luxuri
) {
    --tiles-border: var(--ui-palette-solid);
    --widget-border: var(--ui-palette-solid);
    border: 1px solid var(--ui-palette-solid) !important;
}
/* Icon palette pada mode outline.
   Baik bg-outline-*s (gradient outline) maupun bg-outline-* (solid outline)
   selalu memakai warna SOLID pasangan palette untuk glyph/icon model.
   Opacity/shape bawaan model tetap dipertahankan. */
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(
    .bg-outline-golds, .bg-outline-oceans, .bg-outline-sages,
    .bg-outline-roses, .bg-outline-futures, .bg-outline-mints,
    .bg-outline-neons, .bg-outline-snows, .bg-outline-grays,
    .bg-outline-deeps, .bg-outline-whites, .bg-outline-metals,
    .bg-outline-luxury, .bg-outline-luxurys,
    .bg-outline-gold, .bg-outline-ocean, .bg-outline-sage,
    .bg-outline-rose, .bg-outline-future, .bg-outline-mint,
    .bg-outline-neon, .bg-outline-snow, .bg-outline-gray,
    .bg-outline-deep, .bg-outline-white, .bg-outline-metal,
    .bg-outline-luxuri
) :is(
    .tiles-icon,
    .tiles-counter-icon,
    .tiles-hero-stat-icon,
    .tiles-stat-box-icon,
    .tiles-icon-plain-media,
    .tiles-kpi-inline-icon,
    .tiles-menu-card-icon,
    .widget-icon,
    .widget-counter-icon,
    .widget-stat-triple-icon,
    .widget-analytics-icon,
    .widget-upgrade-wave-icon,
    .widget-upgrade-badge-icon,
    .widget-upgrade-float-icon
) {
    color: var(--ui-palette-solid) !important;
}
/* Semua keluarga widget-* pada mode outline: wrapper icon dan glyph selalu
   menggunakan SOLID palette dari outline root. Selector generik ini mencakup
   model lama maupun model baru tanpa perlu mendaftarkan nama icon satu per satu. */
:is(.widget, [class^="widget-"], [class*=" widget-"])[class*="bg-outline-"]
:is([class*="-icon"], .widget-icon) {
    color: var(--ui-palette-solid) !important;
    border-color: currentColor;
}
:is(.widget, [class^="widget-"], [class*=" widget-"])[class*="bg-outline-"] :is(i, svg) {
    background: none !important;
    background-image: none !important;
    color: var(--ui-palette-solid) !important;
    fill: currentColor;
    stroke: currentColor;
    -webkit-text-fill-color: currentColor !important;
}
:is(.widget, [class^="widget-"], [class*=" widget-"])[class*="bg-outline-"]
:is(.widget-counter-icon, [class*="-icon"]) {
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
}
/* Counter widget memakai gradient-text secara default. Pada outline mode
   gradient icon dimatikan supaya benar-benar menjadi versi solid palette. */
:is(.widget, [class^="widget-"], [class*=" widget-"]):is(
    .bg-outline-golds, .bg-outline-oceans, .bg-outline-sages,
    .bg-outline-roses, .bg-outline-futures, .bg-outline-mints,
    .bg-outline-neons, .bg-outline-snows, .bg-outline-grays,
    .bg-outline-deeps, .bg-outline-whites, .bg-outline-metals,
    .bg-outline-luxury, .bg-outline-luxurys,
    .bg-outline-gold, .bg-outline-ocean, .bg-outline-sage,
    .bg-outline-rose, .bg-outline-future, .bg-outline-mint,
    .bg-outline-neon, .bg-outline-snow, .bg-outline-gray,
    .bg-outline-deep, .bg-outline-white, .bg-outline-metal,
    .bg-outline-luxuri
) .widget-counter-icon {
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
}
/* Interactive Tiles: outline berubah menjadi filled saat hover/focus/active. */
:is(a.tiles, button.tiles):is(
    .bg-outline-golds, .bg-outline-oceans, .bg-outline-sages,
    .bg-outline-roses, .bg-outline-futures, .bg-outline-mints,
    .bg-outline-neons, .bg-outline-snows, .bg-outline-grays,
    .bg-outline-deeps, .bg-outline-whites, .bg-outline-metals,
    .bg-outline-luxury, .bg-outline-luxurys
):is(:hover, :focus-visible, :active) {
    --tiles-surface: var(--ui-palette-gradient);
    --tiles-color: var(--ui-palette-contrast);
    background-image: var(--ui-palette-gradient) !important;
    color: var(--ui-palette-contrast) !important;
    border-image: none !important;
    border-color: var(--ui-palette-solid) !important;
}
:is(a.tiles, button.tiles):is(
    .bg-outline-gold, .bg-outline-ocean, .bg-outline-sage,
    .bg-outline-rose, .bg-outline-future, .bg-outline-mint,
    .bg-outline-neon, .bg-outline-snow, .bg-outline-gray,
    .bg-outline-deep, .bg-outline-white, .bg-outline-metal,
    .bg-outline-luxuri
):is(:hover, :focus-visible, :active) {
    --tiles-surface: var(--ui-palette-solid);
    --tiles-color: var(--ui-palette-contrast);
    background: var(--ui-palette-solid) !important;
    color: var(--ui-palette-contrast) !important;
}
/* Transparent surface final untuk component. */
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]).bg-none {
    --tiles-surface: transparent;
    --widget-surface: transparent;
    background: transparent !important;
    background-image: none !important;
}
/* Font family utility: direct utility selalu menang terhadap typography internal. */
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).fo-caption { font-family: var(--ui-font-caption) !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).fo-label { font-family: var(--ui-font-label) !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).fo-title { font-family: var(--ui-font-title) !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).fo-subtitle { font-family: var(--ui-font-subtitle) !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).fo-desc { font-family: var(--ui-font-body) !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).fo-help { font-family: var(--ui-font-help) !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *):is(.fo-number, .fo-numb) { font-family: var(--ui-font-number) !important; }
/* Font size utility. */
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfs-0 { font-size: calc(var(--ui-root-font-size) + 1px) !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfs-1 { font-size: calc(var(--ui-root-font-size) + 2px) !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfs-2 { font-size: calc(var(--ui-root-font-size) + 3px) !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfs-3 { font-size: calc(var(--ui-root-font-size) + 4px) !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfs-4 { font-size: calc(var(--ui-root-font-size) + 5px) !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfs-5 { font-size: calc(var(--ui-root-font-size) + 6px) !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfs-6 { font-size: calc(var(--ui-root-font-size) + 7px) !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfs-is { font-size: clamp(.8rem, 1vw, .9rem) !important; font-style: italic; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfs-sm { font-size: clamp(.7rem, .9vw, .8rem) !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfs-ix { font-size: clamp(.6rem, .8vw, .7rem) !important; font-style: italic; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfs-xs { font-size: clamp(.5rem, .7vw, .6rem) !important; }
/* Font weight utility. */
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfw-lighter { font-weight: 200 !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfw-lights { font-weight: 300 !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfw-light { font-weight: 400 !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfw-semi { font-weight: 500 !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfw-bold { font-weight: 700 !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfw-bolds { font-weight: 800 !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).cfw-bolder { font-weight: 900 !important; }
/* Heading size utility. */
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).ch-1 { font-size: clamp(2.5rem, 2vw, 2.7rem) !important; font-weight: 700 !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).ch-2 { font-size: clamp(2.2rem, 2vw, 2.5rem) !important; font-weight: 700 !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).ch-3 { font-size: clamp(1.7rem, 2vw, 2.2rem) !important; font-weight: 700 !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).ch-4 { font-size: clamp(1.5rem, 2vw, 1.7rem) !important; font-weight: 700 !important; }
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"], .tiles *, .widget *, [class^="widget-"] *, [class*=" widget-"] *).ch-5 { font-size: clamp(1.2rem, 2vw, 1.5rem) !important; font-weight: 700 !important; }
/* ==========================================================================
   47. TREE / NETWORK CARD — V36 SINGLE ACTIVE PATH
   Layout membaca markup renderer TREE:
   1) avatar/package row
   2) ID/name row
   3) meta posisi/tanggal
   4) meta aria-label="Ringkasan cabang" + panah hanya jika count > 0
   5) tree-status level/total
   6) ancestor lama berubah menjadi user + caret/topi ketika depth aktif > 2
   ========================================================================== */
.tree {
    --tree-card-width: 460px;
    --tree-card-color: var(--tree-neutral);
}
.tree-card {
    --tree-card-color: var(--tree-neutral);
    min-height: 164px;
    padding: 10px 12px 12px;
    display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(72px, auto);
    grid-template-areas:
        "date date date date date noid noid noid noid noid"
        "level level name name name name name name name name"
        "summary summary summary summary summary summary summary summary summary summary";
    gap: 4px;
    align-items: center;
    overflow: visible;
    background: rgb(250, 250, 250) !important;
    color: #111827 !important;
    border-left: 10px solid var(--tree-card-color) !important;
    border-radius: 10px;
    box-shadow: none !important;
}
.tree-root > .tree-card,
.tree-card.is-root {
    --tree-card-color: var(--tree-root-color);
    border-color: var(--tree-card-color) !important;
}
.tree-child.is-left > .tree-node > .tree-card,
.tree-card.is-left {
    --tree-card-color: var(--tree-left);
    border-color: var(--tree-card-color) !important;
}
.tree-child.is-center > .tree-node > .tree-card,
.tree-card.is-center {
    --tree-card-color: var(--tree-center);
    border-color: var(--tree-card-color) !important;
}
.tree-child.is-right > .tree-node > .tree-card,
.tree-card.is-right {
    --tree-card-color: var(--tree-right);
    border-color: var(--tree-card-color) !important;
}
/* Avatar/package lama tidak dipakai pada komposisi card final. */
.tree-card > .d-flex:first-child {
    display: none !important;
}
/* Wrapper ID/Nama dibuat transparan terhadap grid card. */
.tree-card > .d-flex:nth-child(2) {
    display: contents !important;
}
/* NOID — badge kanan atas. */
.tree-card > .d-flex:nth-child(2) > :is(
    .tree-root-id,
    .tree-node-id,
    .tree-child-id
) {
    grid-area: noid;
    justify-self: end;
    align-self: start;
    max-width: 100%;
    margin: 0;
    padding: 3px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid var(--tree-card-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--tree-card-color) 10%, #ffffff 90%);
    color: var(--tree-card-color) !important;
    font-family: var(--ui-font-title);
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    line-height: 1.2;
    text-align: right;
    text-transform: uppercase;
}
/* Nama member — tengah, capitalize. */
.tree-card > .d-flex:nth-child(2) > :is(
    .tree-root-name,
    .tree-node-name,
    .tree-child-name
) {
    grid-area: name;
    justify-self: left;
    align-self: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #06141f !important;
    font-family: var(--ui-font-body);
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    line-height: 1.1;
    text-align: left;
    text-transform: uppercase !important;
}
/* Meta posisi/tanggal: posisi disembunyikan karena posisi sudah direpresentasikan border. */
.tree-card > .tree-meta:not([aria-label]):not(:has(button)) {
    display: contents !important;
}
.tree-card > .tree-meta:not([aria-label]):not(:has(button)) > span:first-child {
    display: none !important;
}
.tree-card > .tree-meta:not([aria-label]):not(:has(button)) > span:last-child {
    grid-area: date;
    justify-self: start;
    align-self: start;
    margin: 4px 0;
    color: #64748b !important;
    font-family: var(--ui-font-help);
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.2;
    text-transform: lowercase;
    text-align: left;
    white-space: nowrap;
}
/* tree-status lama dipakai hanya sebagai sumber Level; status/total tidak membuat row baru. */
.tree-card > .tree-status {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: none !important;
    border: 0 !important;
}
.tree-card > .tree-status::before {
    display: none !important;
}
.tree-card > .tree-status > span:first-child {
    grid-area: level;
    justify-self: start;
    align-self: center;
    color: #5c5b5a !important;
    font-family: var(--ui-font-title);
    font-size: .8rem !important;
    font-weight: 400 !important;
    text-transform: lowercase;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
}
.tree-card > .tree-status > span:nth-child(2),
.tree-card > .tree-status > span:nth-child(3) {
    display: none !important;
}
/* Ringkasan Kiri / Tengah / Kanan + panah child per cabang. */
.tree-card > .tree-meta[aria-label="Ringkasan cabang"] {
    grid-area: summary;
    min-width: 0;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 64px);
    justify-content: center;
    align-items: stretch;
    gap: 5px;
}
.tree-card > .tree-meta[aria-label="Ringkasan cabang"] > span {
    width: 52px;
    max-width: 52px;
    min-height: 58px;
    padding: 4px 3px 3px;
    display: grid;
    grid-template-rows: 1fr 24px;
    align-items: center;
    justify-items: center;
    gap: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, .72);
    border: 1px solid color-mix(in srgb, var(--tree-card-color) 42%, #cbd5e1 58%);
    border-radius: 18px;
    color: #64748b !important;
    text-align: center;
}
.tree-card > .tree-meta[aria-label="Ringkasan cabang"] > span > strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--ui-font-title);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1;
}
.tree-branch-open {
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: currentColor;
    cursor: pointer;
    box-shadow: none;
}
.tree-branch-open i {
    margin: 0;
    font-size: 1rem;
    line-height: 1;
}
.tree-branch-open:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}
.tree-branch-open:disabled {
    opacity: .22;
    cursor: default;
}
.tree-branch-open.is-loading { opacity: .45; }
.tree-branch-open.is-expanded { opacity: .72; }
.tree-card > .tree-meta[aria-label="Ringkasan cabang"] > .tree-branch-summary.is-empty {
    grid-template-rows: 1fr;
}
.tree-card > .tree-meta[aria-label="Ringkasan cabang"] > .tree-branch-summary.is-empty > strong {
    align-self: center;
}
.tree-card > .tree-meta[aria-label="Ringkasan cabang"] > span:first-child,
.tree-card > .tree-meta[aria-label="Ringkasan cabang"] > span:first-child .tree-branch-open {
    color: var(--tree-left) !important;
    border-color: color-mix(in srgb, var(--tree-left) 55%, #cbd5e1 45%);
}
.tree-card > .tree-meta[aria-label="Ringkasan cabang"] > span:nth-child(2),
.tree-card > .tree-meta[aria-label="Ringkasan cabang"] > span:nth-child(2) .tree-branch-open {
    color: var(--tree-center) !important;
    border-color: color-mix(in srgb, var(--tree-center) 55%, #cbd5e1 45%);
}
.tree-card > .tree-meta[aria-label="Ringkasan cabang"] > span:nth-child(3),
.tree-card > .tree-meta[aria-label="Ringkasan cabang"] > span:nth-child(3) .tree-branch-open {
    color: var(--tree-right) !important;
    border-color: color-mix(in srgb, var(--tree-right) 55%, #cbd5e1 45%);
}
/* Mobile + Tablet. */
/* Mobile + Tablet — card tetap horizontal; tree memakai viewport scroll. */
@media (max-width: 1279px) {
    .tree {
        --tree-card-width: clamp(290px, 42vw, 480px);
    }
    .tree-card {
        min-height: 146px;
        padding: 8px;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        grid-template-rows: auto auto minmax(58px, auto);
        gap: 6px;
        border-width: 2px !important;
        border-radius: 8px;
    }
    .tree-card > .d-flex:nth-child(2) > :is(
        .tree-root-id,
        .tree-node-id,
        .tree-child-id
    ) {
        padding: 2px 6px;
        font-size: .64rem !important;
    }
    .tree-card > .d-flex:nth-child(2) > :is(
        .tree-root-name,
        .tree-node-name,
        .tree-child-name
    ) {
        font-size: .88rem !important;
    }
    .tree-card > .tree-meta:not([aria-label]):not(:has(button)) > span:last-child {
        font-size: .56rem !important;
    }
    .tree-card > .tree-status > span:first-child {
        font-size: .62rem !important;
    }
    .tree-card > .tree-meta[aria-label="Ringkasan cabang"] {
        grid-template-columns: repeat(3, 42px);
        justify-content: end;
        gap: 4px;
    }
    .tree-card > .tree-meta[aria-label="Ringkasan cabang"] > span {
        width: 42px;
        max-width: 42px;
        min-height: 52px;
        padding: 3px 2px 2px;
        grid-template-rows: 1fr 20px;
        border-radius: 18px;
    }
    .tree-card > .tree-meta[aria-label="Ringkasan cabang"] > span > strong {
        font-size: .86rem;
    }
    .tree-branch-open {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }
    .tree-branch-open i { font-size: .88rem; }
    .tree-ancestor { width: 46px; min-height: 58px; margin-bottom: 6px; }
    .tree-ancestor-up { width: 30px; height: 19px; }
    .tree-ancestor-user { width: 40px; height: 40px; }
    .tree-ancestor-user i { font-size: 1.4rem; }
}
/* ==========================================================================
   48. TILES / WIDGET EXTENSIONS — FINAL PACK
   Tambahan model berdasarkan referensi visual terakhir.
   Tidak mengubah widget-counter-content PATCH3.
   ========================================================================== */
/* --------------------------------------------------------------------------
   TILES KPI INLINE
   KPI horizontal compact: icon di kiri/kanan + value + label.
   Dapat memakai bg-* / bg-none / txt-* pada elemen turunannya.
   -------------------------------------------------------------------------- */
.tiles-kpi-inline {
    min-height: 106px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 1rem 1.15rem;
    color: var(--ui-theme-text, #06141f);
}
.tiles-kpi-inline.is-icon-end {
    grid-template-columns: minmax(0, 1fr) auto;
}
.tiles-kpi-inline.is-icon-end .tiles-kpi-inline-icon { order: 2; }
.tiles-kpi-inline.is-icon-end .tiles-kpi-inline-body { order: 1; text-align: left; }
.tiles-kpi-inline.is-value-end .tiles-kpi-inline-body { text-align: right; }
.tiles-kpi-inline-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: 2rem;
    line-height: 1;
    opacity: .62;
}
.tiles-kpi-inline.is-icon-circle .tiles-kpi-inline-icon {
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 18%, transparent);
    opacity: .9;
}
.tiles-kpi-inline-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tiles-kpi-inline-value {
    margin: 0;
    font-family: var(--ui-font-number);
    font-size: clamp(1.45rem, 2.3vw, 2rem);
    font-weight: 700;
    line-height: 1;
    color: inherit;
    overflow-wrap: anywhere;
}
.tiles-kpi-inline-label {
    margin: 0;
    font-size: .82rem;
    line-height: 1.15;
    color: inherit;
    opacity: .72;
}
/* --------------------------------------------------------------------------
   TILES MENU CARD
   Icon menu launcher: plain / outline-color / solid / image-overlay.
   -------------------------------------------------------------------------- */
.tiles-menu-card {
    min-height: 150px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 1rem;
    text-align: center;
    color: var(--ui-theme-text, #1f2937);
}
.tiles-menu-card-icon {
    position: relative;
    z-index: 2;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}
.tiles-menu-card-title {
    position: relative;
    z-index: 2;
    margin: 0;
    color: inherit;
    font-family: var(--ui-font-body);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tiles-menu-card.is-outline {
    background: #ffffff;
    color: var(--ui-theme-text, #1f2937);
}
.tiles-menu-card.is-image {
    color: #ffffff;
    background: #334155;
}
.tiles-menu-card-media,
.tiles-menu-card-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.tiles-menu-card-media {
    z-index: 0;
    display: block;
    object-fit: cover;
    object-position: center;
}
.tiles-menu-card-overlay {
    z-index: 1;
    background: linear-gradient(180deg, rgba(15, 23, 42, .18), rgba(15, 23, 42, .62));
}
.tiles-menu-card.is-image .tiles-menu-card-icon,
.tiles-menu-card.is-image .tiles-menu-card-title { color: #ffffff; }
/* --------------------------------------------------------------------------
   WIDGET STORY HERO
   Full-cover story/article card dengan category badge, counters dan title.
   -------------------------------------------------------------------------- */
.widget-story-hero {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    background: #1f2937;
    color: #ffffff;
    border-radius: var(--widget-radius, var(--ui-radius-lg));
}
.widget-story-hero-media,
.widget-story-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.widget-story-hero-media {
    z-index: 0;
    display: block;
    object-fit: cover;
    object-position: center;
}
.widget-story-hero-overlay {
    z-index: 1;
    background: linear-gradient(180deg, rgba(15, 23, 42, .20) 0%, rgba(15, 23, 42, .24) 40%, rgba(15, 23, 42, .82) 100%);
}
.widget-story-hero-head,
.widget-story-hero-body {
    position: relative;
    z-index: 2;
}
.widget-story-hero-head {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.widget-story-hero-badge {
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--ui-bg-gradient, #3156d9);
    color: var(--ui-theme-text, #ffffff);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.widget-story-hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .92);
    font-size: .68rem;
}
.widget-story-hero-meta span { display: inline-flex; align-items: center; gap: 4px; }
.widget-story-hero-body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.15rem;
}
.widget-story-hero-title {
    margin: 0;
    color: #ffffff;
    font-family: var(--ui-font-body);
    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
    font-weight: 700;
    line-height: 1.18;
}
.widget-story-hero-byline {
    margin: .35rem 0 0;
    color: rgba(255, 255, 255, .80);
    font-size: .76rem;
}
/* --------------------------------------------------------------------------
   WIDGET STORY LINKS / CARD GRID
   Card berita dengan image, category, body dan metrics footer.
   -------------------------------------------------------------------------- */
.widget-story-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.widget-story-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e2e8f0;
    border-radius: var(--ui-radius-md);
}
.widget-story-card-media {
    position: relative;
    min-height: 170px;
    overflow: hidden;
    background: #e2e8f0;
}
.widget-story-card-media img {
    width: 100%;
    height: 100%;
    min-height: 170px;
    display: block;
    object-fit: cover;
    object-position: center;
}
.widget-story-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 5px 9px;
    border-radius: 5px;
    background: var(--ui-bg-gradient, #3156d9);
    color: var(--ui-theme-text, #ffffff);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
}
.widget-story-card-body { padding: .85rem 1rem; }
.widget-story-card-title {
    margin: 0;
    color: #1f2937;
    font-family: var(--ui-font-body);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.25;
}
a.widget-story-card-title { text-decoration: none; }
a.widget-story-card-title:is(:hover, :focus-visible) { text-decoration: underline; }
.widget-story-card-byline { margin: .25rem 0 0; color: #64748b; font-size: .7rem; }
.widget-story-card-footer {
    min-height: 48px;
    padding: .65rem 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    background: #f8fafc;
    border-top: 1px solid #edf0f3;
    color: #94a3b8;
}
.widget-story-card-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: .68rem;
}
/* --------------------------------------------------------------------------
   WIDGET PROFILE STORIES
   Profile header + linked story list + footer actions.
   -------------------------------------------------------------------------- */
.widget-profile-stories { overflow: hidden; }
.widget-profile-stories-head {
    min-height: 96px;
    padding: 1rem 1.15rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    background: var(--ui-bg-gradient, #4b5563);
    color: var(--ui-theme-text, #ffffff);
}
.widget-profile-stories-name { margin: 0; color: inherit; font-size: .9rem; font-weight: 700; }
.widget-profile-stories-follower { margin: .2rem 0 0; color: inherit; font-size: .72rem; opacity: .82; }
.widget-profile-stories-avatar {
    width: 52px;
    height: 52px;
    display: block;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
}
.widget-profile-stories-list {
    margin: 1rem;
    padding: 0;
    overflow: hidden;
    list-style: none;
    border: 1px solid #e2e8f0;
    border-radius: var(--ui-radius-sm);
}
.widget-profile-stories-item + .widget-profile-stories-item { border-top: 1px solid #e2e8f0; }
.widget-profile-stories-link {
    min-height: 68px;
    padding: .75rem .9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    color: #1f2937;
    text-decoration: none;
}
.widget-profile-stories-link:is(:hover, :focus-visible) { background: #f8fafc; color: #111827; text-decoration: none; }
.widget-profile-stories-title { font-size: .8rem; font-weight: 700; line-height: 1.2; }
.widget-profile-stories-date { color: #64748b; font-size: .68rem; }
.widget-profile-stories-foot {
    min-height: 62px;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #e2e8f0;
}
.widget-profile-stories-count,
.widget-profile-stories-more {
    min-height: 32px;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    background: #eef2f7;
    color: #1f2937;
    font-size: .7rem;
    font-weight: 700;
    text-decoration: none;
}
/* --------------------------------------------------------------------------
   WIDGET STAT TRIPLE
   Tiga statistik sejajar. Surface mengikuti utility bridge Widget:
   bg-*s, bg-*, bg-outline-*s, bg-outline-* dan typography utility.
   -------------------------------------------------------------------------- */
.widget-stat-triple {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    color: var(--widget-color, #1f2937);
}
.widget-stat-triple-item {
    min-width: 0;
    min-height: 220px;
    padding: 1.25rem .8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}
.widget-stat-triple-item + .widget-stat-triple-item { border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.widget-stat-triple-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: inherit;
    font-size: 1.8rem;
    line-height: 1;
}
.widget-stat-triple-value {
    margin: .4rem 0 0;
    color: inherit;
    font-family: var(--ui-font-number);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 700;
    line-height: 1;
}
.widget-stat-triple-label { margin: 0; color: inherit; font-size: .82rem; opacity: .72; }
/* --------------------------------------------------------------------------
   WIDGET ANALYTICS
   KPI + icon + sparkline SVG/ApexCharts container.
   -------------------------------------------------------------------------- */
.widget-analytics {
    min-height: 280px;
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    color: var(--ui-theme-text, #1f2937);
}
.widget-analytics-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
}
.widget-analytics-value {
    margin: 0;
    color: inherit;
    font-family: var(--ui-font-number);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 700;
    line-height: 1;
}
.widget-analytics-label { margin: .25rem 0 0; color: inherit; font-size: .8rem; opacity: .68; }
.widget-analytics-icon { color: inherit; font-size: 2rem; line-height: 1; opacity: .58; }
.widget-analytics-chart {
    min-height: 150px;
    margin-top: auto;
    display: flex;
    align-items: flex-end;
}
.widget-analytics-chart > :is(svg, canvas, .apexcharts-canvas) { width: 100% !important; max-width: 100%; }
.widget-analytics-chart svg { height: 150px; overflow: visible; }
.widget-analytics-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* --------------------------------------------------------------------------
   WIDGET PROGRESS
   Group progress ring maupun single profile completion.
   --widget-progress-value: angka 0..100.
   -------------------------------------------------------------------------- */
.widget-progress { overflow: hidden; color: var(--ui-theme-text, #1f2937); }
.widget-progress-head {
    min-height: 64px;
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-bg-gradient, #3156d9);
    color: var(--ui-theme-text, #ffffff);
    text-align: center;
}
.widget-progress-title { margin: 0; color: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.widget-progress-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #ffffff;
    color: #1f2937;
}
.widget-progress-item {
    min-width: 0;
    min-height: 168px;
    padding: 1rem .7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: center;
}
.widget-progress-ring {
    --widget-progress-value: 70;
    --widget-progress-color: #3156d9;
    --widget-progress-track: #e5e7eb;
    position: relative;
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(
        var(--widget-progress-color) calc(var(--widget-progress-value) * 1%),
        var(--widget-progress-track) 0
    );
}
.widget-progress-ring::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: inherit;
    background: #ffffff;
}
.widget-progress-value,
.widget-progress-avatar {
    position: relative;
    z-index: 2;
}
.widget-progress-value {
    color: #1f2937;
    font-family: var(--ui-font-number);
    font-size: 1rem;
    font-weight: 700;
}
.widget-progress-avatar {
    width: 62px;
    height: 62px;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}
.widget-progress-label { margin: 0; color: #64748b; font-size: .78rem; }
.widget-progress.is-profile {
    min-height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 1.3rem;
    background: var(--ui-bg-gradient, #ffffff);
    color: var(--ui-theme-text, #1f2937);
}
.widget-progress.is-profile .widget-progress-ring {
    width: 112px;
    height: 112px;
    --widget-progress-track: color-mix(in srgb, currentColor 20%, transparent);
}
.widget-progress.is-profile .widget-progress-ring::before {
    background: rgba(255, 255, 255, .94);
}
.widget-progress.is-profile .widget-progress-avatar { width: 80px; height: 80px; }
.widget-progress-footer {
    width: 100%;
    margin-top: auto;
    padding-top: 1rem;
    color: inherit;
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: .05em;
    text-transform: uppercase;
}
:is(.widget-analytics, .widget-progress.is-profile)[class*="bg-"] {
    background: var(--ui-bg-gradient, var(--widget-surface, transparent));
    color: var(--ui-theme-text, inherit);
    border-color: var(--ui-theme-border, var(--widget-border, transparent));
}
@media (max-width: 1279px) {
    .tiles-kpi-inline { min-height: 92px; gap: 10px; padding: .8rem; }
    .tiles-kpi-inline-icon { width: 44px; height: 44px; min-width: 44px; font-size: 1.65rem; }
    .tiles-menu-card { min-height: 122px; padding: .75rem; }
    .tiles-menu-card-icon { min-height: 44px; font-size: clamp(1.7rem, 8vw, 2.5rem); }
    .widget-story-hero { min-height: 240px; }
    .widget-story-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
    .widget-story-card-media,
    .widget-story-card-media img { min-height: 130px; }
    .widget-profile-stories-head { min-height: 84px; padding: .8rem; }
    .widget-profile-stories-list { margin: .7rem; }
    .widget-stat-triple-item { min-height: 160px; padding: .9rem .5rem; }
    .widget-stat-triple-icon { width: 58px; height: 58px; font-size: 1.45rem; }
    .widget-analytics { min-height: 230px; padding: .9rem; }
    .widget-analytics-chart { min-height: 125px; }
    .widget-analytics-chart svg { height: 125px; }
    .widget-progress-grid { grid-template-columns: 1fr; }
    .widget-progress-item + .widget-progress-item { border-top: 1px solid #e2e8f0; }
    .widget-progress-item { min-height: 136px; }
    .widget-progress.is-profile { min-height: 230px; padding: 1rem; }
}
/* ==========================================================================
   50. LINK / ANCHOR DECORATION POLICY
   Link pada shell / komponen aplikasi default tanpa underline. Link konten di
   luar komponen tidak di-reset sehingga tetap mengikuti Bootstrap/browser.
   Class .link selalu opt-in underline.
   ========================================================================== */
:where(
    .app-topbar,
    .sidenav-menu,
    .navigasi,
    .pod,
    .tiles,
    .widget,
    [class^="widget-"],
    [class*=" widget-"],
    .s58-login-page
) a[href]:not(.link),
:where(
    .app-topbar,
    .sidenav-menu,
    .navigasi,
    .pod,
    .tiles,
    .widget,
    [class^="widget-"],
    [class*=" widget-"],
    .s58-login-page
) a[href]:not(.link):is(:hover, :focus, :focus-visible, :active, :visited) {
    text-decoration: none !important;
}
:where(a[href].link),
:where(a[href].link):is(:hover, :focus, :focus-visible, :active, :visited) {
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: .16em;
    text-decoration-skip-ink: auto;
}
/* ==========================================================================
   51. TREE / NETWORK CARD V2 — RESPONSIVE EDGE-SAFE
   Layout card:
   - Nama member di kiri, membungkus ke bawah bila panjang.
   - NOID kanan atas.
   - Tanggal daftar kanan tengah.
   - Ringkasan cabang (tree-meta) kiri bawah.
   - Level kanan bawah.
   Tree stage diberi edge-space agar node paling kiri/kanan tidak terpotong.
   ========================================================================== */
.tree-viewport {
    --tree-edge-space: clamp(24px, 3vw, 56px);
    padding-inline: 0;
    scroll-padding-inline: var(--tree-edge-space);
    scrollbar-gutter: stable both-edges;
}
.tree-stage {
    width: max-content;
    min-width: 100%;
    padding-inline: var(--tree-edge-space);
    justify-content: flex-start;
    box-sizing: border-box;
}
.tree-stage > .tree,
.tree {
    --tree-card-width: clamp(320px, 22vw, 380px);
    width: max-content;
    min-width: max-content;
    margin-inline: auto;
    flex: 0 0 max-content;
}
.tree-root,
.tree-node,
.tree-children {
    width: max-content;
    max-width: none;
}
.tree-child,
.tree-child > .tree-node {
    min-width: var(--tree-card-width);
}
.tree-card {
    --tree-card-color: var(--tree-neutral);
    width: var(--tree-card-width);
    min-width: var(--tree-card-width);
    max-width: var(--tree-card-width);
    min-height: 148px;
    padding: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(112px, 31%, 136px);
    grid-template-rows: minmax(54px, auto) minmax(48px, auto) minmax(54px, auto);
    grid-template-areas:
        "name id"
        "name date"
        "summary level";
    gap: 0;
    align-items: stretch;
    overflow: hidden;
    background: rgba(250, 250, 250, .98) !important;
    color: #111827 !important;
    border: 1px solid color-mix(in srgb, var(--tree-card-color) 56%, #cbd5e1 44%) !important;
    border-left: 4px solid var(--tree-card-color) !important;
    border-radius: 12px;
    box-shadow: none !important;
}
.tree-root > .tree-card,
.tree-card.is-root {
    --tree-card-color: var(--tree-root-color);
}
.tree-child.is-left > .tree-node > .tree-card,
.tree-card.is-left {
    --tree-card-color: var(--tree-left);
}
.tree-child.is-center > .tree-node > .tree-card,
.tree-card.is-center {
    --tree-card-color: var(--tree-center);
}
.tree-child.is-right > .tree-node > .tree-card,
.tree-card.is-right {
    --tree-card-color: var(--tree-right);
}
.tree-card-name-cell {
    grid-area: name;
    min-width: 0;
    padding: 14px 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.tree-card-name-cell :is(
    .tree-root-name,
    .tree-node-name,
    .tree-child-name
) {
    width: 100%;
    min-width: 0;
    margin: 0;
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: #111827 !important;
    font-family: var(--ui-font-body);
    font-size: clamp(.96rem, 1.15vw, 1.12rem) !important;
    font-weight: 700 !important;
    line-height: 1.22;
    letter-spacing: .01em;
    text-align: left;
    text-transform: uppercase !important;
}
.tree-card-id-cell {
    grid-area: id;
    min-width: 0;
    padding: 10px 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(100, 116, 139, .24);
    border-bottom: 1px solid rgba(100, 116, 139, .20);
}
.tree-card-id-cell :is(
    .tree-root-id,
    .tree-node-id,
    .tree-child-id
) {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--tree-card-color) !important;
    font-family: var(--ui-font-number);
    font-size: .82rem !important;
    font-weight: 700 !important;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}
.tree-card-date-cell {
    grid-area: date;
    min-width: 0;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-left: 1px solid rgba(100, 116, 139, .24);
}
.tree-card-date-cell small,
.tree-card-date-cell span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.tree-card-date-cell small {
    color: #7b8794;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.tree-card-date-cell span {
    color: #475569;
    font-family: var(--ui-font-number);
    font-size: .72rem;
    font-weight: 600;
}
.tree-card > .tree-meta[aria-label="Ringkasan cabang"] {
    grid-area: summary;
    min-width: 0;
    margin: 0 !important;
    padding: 7px 10px;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    align-items: center;
    gap: 6px;
    border-top: 1px solid rgba(100, 116, 139, .20);
}
.tree-card > .tree-meta[aria-label="Ringkasan cabang"] > span {
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: 40px;
    padding: 3px 4px;
    display: grid;
    grid-template-rows: 1fr 17px;
    align-items: center;
    justify-items: center;
    gap: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, .66);
    border: 1px solid color-mix(in srgb, var(--tree-card-color) 38%, #cbd5e1 62%);
    border-radius: 10px;
    color: #64748b !important;
    text-align: center;
}
.tree-card > .tree-meta[aria-label="Ringkasan cabang"] > span > strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--ui-font-number);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
}
.tree-card > .tree-status {
    grid-area: level;
    min-width: 0;
    margin: 0 !important;
    padding: 7px 8px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: rgba(248, 250, 252, .86) !important;
    border: 0 !important;
    border-left: 1px solid rgba(100, 116, 139, .24) !important;
    border-top: 1px solid rgba(100, 116, 139, .20) !important;
    text-align: center;
}
.tree-card > .tree-status > span:first-child {
    display: block !important;
    margin: 0;
    color: var(--tree-card-color) !important;
    font-family: var(--ui-font-title);
    font-size: .69rem !important;
    font-weight: 700 !important;
    line-height: 1.15;
    text-transform: uppercase;
    white-space: nowrap;
}
.tree-card > .tree-status > small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #7b8794;
    font-size: .56rem;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tree-branch-open {
    width: 18px;
    height: 18px;
    min-width: 18px;
}
.tree-branch-open i {
    font-size: .78rem;
}
@media (max-width: 1279px) {
    .tree-viewport {
        --tree-edge-space: clamp(14px, 3vw, 28px);
    }
    .tree-stage > .tree,
    .tree {
        --tree-card-width: clamp(250px, 82vw, 330px);
    }
    .tree-card {
        min-height: 136px;
        grid-template-columns: minmax(0, 1fr) clamp(94px, 31%, 112px);
        grid-template-rows: minmax(48px, auto) minmax(44px, auto) minmax(48px, auto);
        border-left-width: 3px !important;
        border-radius: 10px;
    }
    .tree-card-name-cell {
        padding: 10px 11px;
    }
    .tree-card-name-cell :is(
        .tree-root-name,
        .tree-node-name,
        .tree-child-name
    ) {
        font-size: clamp(.82rem, 2.8vw, .96rem) !important;
        line-height: 1.18;
        -webkit-line-clamp: 3;
    }
    .tree-card-id-cell {
        padding: 7px 8px;
    }
    .tree-card-id-cell :is(
        .tree-root-id,
        .tree-node-id,
        .tree-child-id
    ) {
        font-size: .66rem !important;
    }
    .tree-card-date-cell {
        padding: 6px 7px;
    }
    .tree-card-date-cell small {
        font-size: .48rem;
    }
    .tree-card-date-cell span {
        font-size: .58rem;
    }
    .tree-card > .tree-meta[aria-label="Ringkasan cabang"] {
        padding: 6px 7px;
        gap: 4px;
    }
    .tree-card > .tree-meta[aria-label="Ringkasan cabang"] > span {
        min-height: 36px;
        padding: 2px 3px;
        grid-template-rows: 1fr 15px;
        border-radius: 8px;
    }
    .tree-card > .tree-meta[aria-label="Ringkasan cabang"] > span > strong {
        font-size: .66rem;
    }
    .tree-card > .tree-status {
        padding: 5px 6px !important;
    }
    .tree-card > .tree-status > span:first-child {
        font-size: .56rem !important;
    }
    .tree-card > .tree-status > small {
        font-size: .46rem;
    }
    .tree-branch-open {
        width: 16px;
        height: 16px;
        min-width: 16px;
    }
    .tree-branch-open i {
        font-size: .68rem;
    }
}
/* ==========================================================================
   52. ADDITIONAL WIDGET MODELS — Promo / Dashcode style
   Model tambahan berdasarkan referensi pengguna.
   Group A (promo) mendukung full widget utility bridge termasuk outline.
   Group B (dashcode strip) dirancang terutama untuk bg-*s dan bg-* filled.
   ========================================================================== */
.widget-upgrade-wave {
    min-height: 210px;
    padding: 1.2rem 1.4rem;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    isolation: isolate;
}
.widget-upgrade-wave-body {
    position: relative;
    z-index: 2;
    max-width: min(68%, 320px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .85rem;
}
.widget-upgrade-wave-title {
    margin: 0;
    color: inherit;
    line-height: 1.08;
}
.widget-upgrade-wave-subtitle {
    margin: 0;
    color: inherit;
    line-height: 1.3;
    opacity: .92;
}
.widget-upgrade-wave-action {
    min-width: 84px;
    min-height: 32px;
    padding: .45rem .95rem;
    border: 0;
    border-radius: .35rem;
    background: rgba(255,255,255,.94);
    color: #1f2937;
    font-family: var(--ui-font-body);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
}
.widget-upgrade-wave-icon {
    position: absolute;
    right: 1rem;
    bottom: -.25rem;
    z-index: 2;
    font-size: clamp(4rem, 7vw, 5.6rem);
    line-height: 1;
    color: rgba(255,255,255,.92);
    opacity: .98;
}
.widget-upgrade-wave-line {
    position: absolute;
    z-index: 1;
    border: 2px solid rgba(255,255,255,.34);
    border-color: rgba(255,255,255,.38) transparent transparent transparent;
    border-radius: 999px;
    pointer-events: none;
}
.widget-upgrade-wave-line.line-1 { left: -10%; bottom: -22%; width: 72%; height: 78%; transform: rotate(-6deg); }
.widget-upgrade-wave-line.line-2 { left: 16%; top: 18%; width: 88%; height: 54%; transform: rotate(8deg); }
.widget-upgrade-wave-line.line-3 { right: -16%; top: -10%; width: 68%; height: 92%; transform: rotate(-13deg); }
.widget-upgrade-badge {
    min-height: 210px;
    padding: 2.2rem 1rem 1rem;
    display: flex;
    align-items: stretch;
    justify-content: center;
    text-align: center;
    overflow: visible;
}
.widget-upgrade-badge-bubble {
    position: absolute;
    top: -26px;
    left: 50%;
    z-index: 3;
    width: 76px;
    height: 76px;
    margin-left: -38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(15,23,42,.75);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15,23,42,.08);
}
.widget-upgrade-badge-icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--ui-palette-solid, #4f6cf7);
}
.widget-upgrade-badge-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
}
.widget-upgrade-badge-title,
.widget-upgrade-badge-subtitle { margin: 0; color: inherit; }
.widget-upgrade-badge-title { line-height: 1.08; }
.widget-upgrade-badge-subtitle { line-height: 1.28; opacity: .92; }
.widget-upgrade-badge-action {
    width: 100%;
    min-height: 34px;
    padding: .55rem 1rem;
    border: 0;
    border-radius: .35rem;
    background: rgba(255,255,255,.94);
    color: #1f2937;
    font-size: .84rem;
    font-weight: 700;
}
.widget-upgrade-float {
    min-height: 210px;
    padding: 3.35rem 1rem 1rem;
    display: flex;
    align-items: stretch;
    justify-content: center;
    text-align: center;
    overflow: visible;
}
.widget-upgrade-float-icon {
    position: absolute;
    top: -20px;
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    font-size: clamp(4rem, 7vw, 5.3rem);
    line-height: 1;
    color: rgba(255,255,255,.92);
}
.widget-upgrade-float-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
}
.widget-upgrade-float-title,
.widget-upgrade-float-subtitle { margin: 0; color: inherit; }
.widget-upgrade-float-title { line-height: 1.08; }
.widget-upgrade-float-subtitle { line-height: 1.28; opacity: .92; }
.widget-upgrade-float-action {
    width: 100%;
    min-height: 34px;
    padding: .55rem 1rem;
    border: 0;
    border-radius: .35rem;
    background: rgba(255,255,255,.94);
    color: #1f2937;
    font-size: .84rem;
    font-weight: 700;
}
.widget-dashcode-cta,
.widget-dashcode-greeting,
.widget-dashcode-balance {
    min-height: 96px;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    overflow: hidden;
    isolation: isolate;
}
.widget-dashcode-cta-content,
.widget-dashcode-greeting-content,
.widget-dashcode-balance-content {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.widget-dashcode-cta-title,
.widget-dashcode-greeting-title,
.widget-dashcode-balance-value {
    margin: 0;
    color: inherit;
    line-height: 1.1;
}
.widget-dashcode-cta-subtitle,
.widget-dashcode-greeting-subtitle,
.widget-dashcode-balance-kicker {
    margin: 0;
    color: inherit;
    line-height: 1.25;
    opacity: .92;
}
.widget-dashcode-cta-badge {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #6b7280;
    font-size: .78rem;
    font-weight: 700;
}
.widget-dashcode-cta-rings,
.widget-dashcode-balance-rings {
    position: absolute;
    inset: auto -6% -34% auto;
    width: 170px;
    height: 170px;
    z-index: 1;
    border-radius: 50%;
    border: 8px solid rgba(255,255,255,.24);
    box-sizing: border-box;
    pointer-events: none;
}
.widget-dashcode-cta-rings::before,
.widget-dashcode-cta-rings::after,
.widget-dashcode-balance-rings::before,
.widget-dashcode-balance-rings::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
    border: 8px solid rgba(255,255,255,.24);
}
.widget-dashcode-cta-rings::before,
.widget-dashcode-balance-rings::before { inset: 18px; }
.widget-dashcode-cta-rings::after,
.widget-dashcode-balance-rings::after { inset: 36px; }
.widget-dashcode-greeting-figure {
    position: relative;
    z-index: 2;
    width: 92px;
    min-width: 92px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3.2rem;
    line-height: 1;
    color: rgba(255,255,255,.85);
    opacity: .98;
}
.widget-dashcode-balance-action {
    position: relative;
    z-index: 2;
    min-width: 112px;
    min-height: 34px;
    padding: .5rem .95rem;
    border: 0;
    border-radius: .35rem;
    background: rgba(255,255,255,.94);
    color: #374151;
    font-size: .82rem;
    font-weight: 700;
}
@media (max-width: 1279px) {
    .widget-upgrade-wave,
    .widget-upgrade-badge,
    .widget-upgrade-float { min-height: 188px; }
    .widget-upgrade-wave { padding: 1rem; }
    .widget-upgrade-wave-body { max-width: 68%; gap: .65rem; }
    .widget-upgrade-wave-icon { right: .65rem; bottom: -.15rem; font-size: 3.8rem; }
    .widget-upgrade-wave-line.line-1 { width: 86%; height: 72%; }
    .widget-upgrade-wave-line.line-2 { width: 94%; }
    .widget-upgrade-badge-bubble { top: -22px; width: 66px; height: 66px; margin-left: -33px; }
    .widget-upgrade-badge-icon { font-size: 1.75rem; }
    .widget-upgrade-float-icon { top: -14px; font-size: 3.8rem; }
    .widget-dashcode-cta,
    .widget-dashcode-greeting,
    .widget-dashcode-balance {
        min-height: 90px;
        padding: .9rem;
        gap: .8rem;
    }
    .widget-dashcode-greeting-figure { width: 72px; min-width: 72px; font-size: 2.6rem; }
    .widget-dashcode-cta-badge { width: 38px; height: 38px; min-width: 38px; font-size: .72rem; }
    .widget-dashcode-balance-action { min-width: 92px; font-size: .76rem; padding: .45rem .75rem; }
    .widget-dashcode-cta-rings,
    .widget-dashcode-balance-rings { width: 130px; height: 130px; border-width: 6px; }
    .widget-dashcode-cta-rings::before,
    .widget-dashcode-cta-rings::after,
    .widget-dashcode-balance-rings::before,
    .widget-dashcode-balance-rings::after { border-width: 6px; }
}
/* ==========================================================================
   53. S58 GLOBAL TREE V2 — GETJGLOBAL ICON MAP
   Namespace S58-* khusus peta jaringan Global versi kedua.
   Root/login = bg-neons, seluruh downline = bg-mints, slot kosong tidak dibuat.
   ========================================================================== */
#S58-global-page .S58-global-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(148, 163, 184, .55);
    border-radius: 12px;
}
#S58-global-page .S58-global-toolbar-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
#S58-global-page .S58-global-toolbar-info .tree-root-name,
#S58-global-page .S58-global-toolbar-info .tree-root-id {
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#S58-global-page .S58-global-toolbar-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(58px, 1fr));
    gap: 6px;
}
#S58-global-page .S58-global-toolbar-stats > span {
    min-width: 58px;
    padding: 6px 8px;
    display: grid;
    justify-items: center;
    gap: 1px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(100, 116, 139, .30);
    border-radius: 9px;
}
#S58-global-page .S58-global-toolbar-stats small {
    color: #64748b;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}
#S58-global-page .S58-global-toolbar-stats strong {
    color: #111827;
    font-family: var(--ui-font-number);
    font-size: .9rem;
    line-height: 1.2;
}
#S58-global-page .S58-global-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
#S58-global-page .S58-global-viewport {
    min-height: clamp(500px, 68vh, 820px);
    padding: 18px 8px 44px;
    scroll-padding: 36px;
}
#S58-global-page .S58-global-stage {
    position: relative;
    width: max-content;
    min-width: 100%;
    min-height: 460px;
    padding: 18px clamp(28px, 4vw, 72px) 80px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}
#S58-global-page .S58-global-canvas {
    width: max-content;
    min-width: max-content;
    margin-inline: auto;
    transform-origin: top center;
}
#S58-global-page .S58-global-tree,
#S58-global-page .S58-global-tree ul {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
#S58-global-page .S58-global-tree,
#S58-global-page .S58-global-tree ul,
#S58-global-page .S58-global-tree li {
    list-style: none;
}
#S58-global-page .S58-global-tree > .S58-global-item {
    padding-top: 0;
}
#S58-global-page .S58-global-item {
    position: relative;
    min-width: 76px;
    padding: 42px 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#S58-global-page .S58-global-tree ul.S58-global-children {
    padding-top: 42px;
}
#S58-global-page .S58-global-children::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 42px;
    border-left: 1px solid rgba(226, 232, 240, .72);
}
#S58-global-page .S58-global-children > .S58-global-item::before,
#S58-global-page .S58-global-children > .S58-global-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: 42px;
    border-top: 1px solid rgba(226, 232, 240, .72);
}
#S58-global-page .S58-global-children > .S58-global-item::after {
    right: auto;
    left: 50%;
    border-left: 1px solid rgba(226, 232, 240, .72);
}
#S58-global-page .S58-global-children > .S58-global-item:only-child {
    padding-top: 42px;
}
#S58-global-page .S58-global-children > .S58-global-item:only-child::before,
#S58-global-page .S58-global-children > .S58-global-item:only-child::after {
    width: 0;
    border-top: 0;
}
#S58-global-page .S58-global-children > .S58-global-item:first-child::before,
#S58-global-page .S58-global-children > .S58-global-item:last-child::after {
    border: 0;
}
#S58-global-page .S58-global-children > .S58-global-item:last-child::before {
    border-right: 1px solid rgba(226, 232, 240, .72);
    border-radius: 0 8px 0 0;
}
#S58-global-page .S58-global-children > .S58-global-item:first-child::after {
    border-radius: 8px 0 0 0;
}
#S58-global-page .S58-global-user {
    position: relative;
    z-index: 2;
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 2px solid var(--ui-theme-border, rgba(148, 163, 184, .8));
    border-radius: 50%;
    color: var(--ui-theme-text, #111827);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .78);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
#S58-global-page .S58-global-user:hover,
#S58-global-page .S58-global-user:focus-visible {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .88), 0 8px 18px rgba(15, 23, 42, .18);
    outline: none;
}
#S58-global-page .S58-global-user.is-root {
    width: 62px;
    height: 62px;
    min-width: 62px;
    min-height: 62px;
    border-width: 3px;
}
#S58-global-page .S58-global-user .ti {
    font-size: 1.55rem;
    line-height: 1;
}
#S58-global-page .S58-global-user.is-root .ti {
    font-size: 1.8rem;
}
#S58-global-member-modal .S58-global-member-dialog {
    width: min(1040px, calc(100vw - 40px));
    max-width: 1040px;
    margin: 1.75rem auto;
}
#S58-global-member-modal .S58-global-modal-content {
    --S58-global-gold: #d39a2c;
    --S58-global-gold-dark: #9a5b00;
    --S58-global-ink: #10192d;
    --S58-global-copy: #50617a;
    --S58-global-line: #dce3ea;
    overflow: hidden;
    color: var(--S58-global-ink);
    background: #f7f8fa;
    border: 1px solid rgba(211, 154, 44, .58);
    border-radius: 18px;
    box-shadow: 0 24px 58px rgba(2, 12, 27, .34);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#S58-global-member-modal .S58-global-modal-hero {
    position: relative;
    min-height: 110px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    overflow: hidden;
    color: #f8fafc;
    background:
        linear-gradient(90deg, rgba(2, 35, 42, .96) 0%, rgba(4, 50, 57, .89) 48%, rgba(2, 24, 39, .94) 100%),
        url('img/member_home_bg.webp') center 48% / cover no-repeat;
    border-bottom: 1px solid rgba(211, 154, 44, .40);
}
#S58-global-member-modal .S58-global-modal-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(211, 154, 44, .78), transparent);
    pointer-events: none;
}
#S58-global-member-modal .S58-global-modal-heading {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}
#S58-global-member-modal .S58-global-modal-heading-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    display: inline-grid;
    place-items: center;
    color: #f4bc54;
    background: rgba(211, 154, 44, .10);
    border: 1px solid rgba(236, 183, 78, .62);
    border-radius: 50%;
    box-shadow: inset 0 0 0 5px rgba(211, 154, 44, .07);
}
#S58-global-member-modal .S58-global-modal-heading-icon .ti {
    font-size: 30px;
    line-height: 1;
}
#S58-global-member-modal .S58-global-modal-heading-copy {
    min-width: 0;
}
#S58-global-member-modal .S58-global-modal-heading-copy .modal-title {
    margin: 0;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: clamp(22px, 2.1vw, 29px);
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
}
#S58-global-member-modal .S58-global-modal-heading-copy .modal-title em {
    color: #efb649;
    font-style: normal;
}
#S58-global-member-modal .S58-global-modal-heading-copy p {
    margin: 7px 0 0;
    color: rgba(241, 245, 249, .88);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
}
#S58-global-member-modal .S58-global-modal-close {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: #fff;
    background: rgba(8, 26, 35, .72);
    border: 1px solid rgba(236, 183, 78, .82);
    border-radius: 12px;
    box-shadow: none;
}
#S58-global-member-modal .S58-global-modal-close:hover,
#S58-global-member-modal .S58-global-modal-close:focus-visible {
    color: #fff;
    background: rgba(211, 154, 44, .23);
    border-color: #efb649;
    outline: none;
}
#S58-global-member-modal .S58-global-modal-close .ti {
    font-size: 25px;
    line-height: 1;
}
#S58-global-member-modal .S58-global-modal-body {
    padding: 18px;
    display: grid;
    gap: 14px;
    background: linear-gradient(180deg, #fdfdfd 0%, #f4f6f8 100%);
}
#S58-global-member-modal .S58-global-member-card,
#S58-global-member-modal .S58-global-network-card {
    background: rgba(255, 255, 255, .98);
    border: 1px solid #dfe5ec;
    border-radius: 15px;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .045);
}
#S58-global-member-modal .S58-global-member-card {
    padding: 18px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 225px;
    gap: 24px;
    align-items: stretch;
}
#S58-global-member-modal .S58-global-member-detail {
    min-width: 0;
    padding-right: 4px;
}
#S58-global-member-modal .S58-global-section-title {
    position: relative;
    min-width: 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--S58-global-line);
}
#S58-global-member-modal .S58-global-section-title::after {
    content: '';
    width: 104px;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -1px;
    background: linear-gradient(90deg, var(--S58-global-gold), transparent);
}
#S58-global-member-modal .S58-global-section-icon {
    width: 31px;
    height: 31px;
    min-width: 31px;
    display: inline-grid;
    place-items: center;
    color: #bd7b06;
    background: rgba(211, 154, 44, .11);
    border-radius: 50%;
}
#S58-global-member-modal .S58-global-section-icon .ti {
    font-size: 19px;
}
#S58-global-member-modal .S58-global-section-title h6 {
    margin: 0;
    color: #111827;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
}
#S58-global-member-modal .S58-global-detail-list {
    padding: 11px 4px 0;
    display: grid;
    gap: 0;
}
#S58-global-member-modal .S58-global-detail-row {
    min-height: 46px;
    padding: 5px 0;
    display: grid;
    grid-template-columns: 30px 140px 12px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border: 0;
}
#S58-global-member-modal .S58-global-detail-row > .ti {
    color: #60748f;
    font-size: 21px;
    line-height: 1;
}
#S58-global-member-modal .S58-global-detail-row > span {
    color: #53647b;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    text-transform: none;
}
#S58-global-member-modal .S58-global-detail-row > b {
    color: #62738a;
    font-size: 15px;
    font-weight: 600;
}
#S58-global-member-modal .S58-global-detail-row > strong {
    min-width: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
#S58-global-member-modal .S58-global-detail-row:first-child > strong,
#S58-global-member-modal .S58-global-detail-row:last-child > strong {
    color: var(--S58-global-gold-dark);
}
#S58-global-member-modal .S58-global-member-visual {
    min-width: 0;
    display: grid;
    place-items: center;
}
#S58-global-member-modal .S58-global-avatar-wrap {
    width: 100%;
    max-width: 215px;
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 4px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, #ffffff, #eef1f5);
    border: 1px solid rgba(211, 154, 44, .82);
    border-radius: 17px;
    box-shadow: 0 7px 16px rgba(15, 23, 42, .10), inset 0 0 0 1px rgba(255, 255, 255, .85);
}
#S58-global-member-modal .S58-global-avatar-wrap img {
    width: 100%;
    height: 100%;
    max-height: none;
    display: block;
    object-fit: cover;
    object-position: center top;
    border-radius: 13px;
}
#S58-global-member-modal .S58-global-avatar-wrap img[hidden] {
    display: none !important;
}
#S58-global-member-modal .S58-global-avatar-fallback {
    width: 100%;
    height: 100%;
    display: none;
    place-items: center;
    color: #b87709;
    background:
        radial-gradient(circle at 50% 34%, rgba(239, 182, 73, .15), transparent 34%),
        linear-gradient(145deg, #fffdfa, #f3f5f7);
    border-radius: 13px;
}
#S58-global-member-modal .S58-global-avatar-fallback .ti {
    font-size: clamp(64px, 7vw, 94px);
    line-height: 1;
}
#S58-global-member-modal .S58-global-avatar-wrap.is-empty .S58-global-avatar-fallback {
    display: grid;
}
#S58-global-member-modal .S58-global-network-card {
    padding: 14px 20px 16px;
}
#S58-global-member-modal .S58-global-network-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
#S58-global-member-modal .S58-global-network-heading > .S58-global-section-title {
    flex: 1 1 auto;
}
#S58-global-member-modal .S58-global-network-total {
    flex: 0 0 auto;
    color: #607086;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
#S58-global-member-modal .S58-global-network-total strong {
    color: #344966;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    font-weight: 700;
}
#S58-global-member-modal .S58-global-branch-counts {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
#S58-global-member-modal .S58-global-branch-card {
    min-width: 0;
    min-height: 94px;
    padding: 12px 12px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 10px;
    border: 1px solid;
    border-radius: 12px;
}
#S58-global-member-modal .S58-global-branch-card.is-left {
    color: #0765d9;
    background: linear-gradient(135deg, #eef7ff 0%, #f8fbff 100%);
    border-color: #88bfff;
}
#S58-global-member-modal .S58-global-branch-card.is-center {
    color: #c65100;
    background: linear-gradient(135deg, #fff5ec 0%, #fffaf5 100%);
    border-color: #f1ad72;
}
#S58-global-member-modal .S58-global-branch-card.is-right {
    color: #08773a;
    background: linear-gradient(135deg, #eefbf4 0%, #f7fcf9 100%);
    border-color: #87d5a7;
}
#S58-global-member-modal .S58-global-branch-icon {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    color: currentColor;
    background: rgba(255, 255, 255, .74);
    border-radius: 50%;
}
#S58-global-member-modal .S58-global-branch-icon .ti {
    font-size: 26px;
    line-height: 1;
}
#S58-global-member-modal .S58-global-branch-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
#S58-global-member-modal .S58-global-branch-copy > strong {
    color: #162033;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
}
#S58-global-member-modal .S58-global-branch-copy > small {
    color: #66778c;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    text-transform: none;
}
#S58-global-member-modal .S58-global-branch-value {
    min-width: 0;
    padding-left: 11px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1px;
    border-left: 1px solid rgba(95, 113, 137, .22);
}
#S58-global-member-modal .S58-global-branch-value > strong {
    color: currentColor;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 29px;
    font-weight: 750;
    line-height: 1;
}
#S58-global-member-modal .S58-global-branch-value > small {
    color: #50617a;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: none;
}
#S58-global-member-modal .S58-global-modal-note {
    margin-top: 14px;
    min-height: 48px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #607086;
    background: linear-gradient(90deg, rgba(247, 238, 216, .78), rgba(255, 249, 239, .92));
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.35;
}
#S58-global-member-modal .S58-global-modal-note .ti {
    flex: 0 0 auto;
    color: #bb7909;
    font-size: 22px;
}
@media (max-width: 1279px) {
    #S58-global-page .S58-global-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    #S58-global-page .S58-global-toolbar-actions {
        justify-content: flex-start;
    }
    #S58-global-page .S58-global-stage {
        padding-inline: 28px;
    }
    #S58-global-page .S58-global-item {
        min-width: 66px;
        padding-inline: 8px;
    }
    #S58-global-page .S58-global-user {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
    #S58-global-page .S58-global-user.is-root {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
    }
}
@media (max-width: 1279px) {
    #S58-global-page .S58-global-toolbar-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #S58-global-member-modal .S58-global-member-dialog {
        width: min(390px, calc(100vw - 20px));
        max-width: 390px;
        min-height: 0;
        margin: 10px auto;
    }
    #S58-global-member-modal .S58-global-modal-content {
        border-radius: 16px;
    }
    #S58-global-member-modal .S58-global-modal-hero {
        min-height: 84px;
        padding: 12px 13px;
        gap: 10px;
    }
    #S58-global-member-modal .S58-global-modal-heading {
        gap: 9px;
    }
    #S58-global-member-modal .S58-global-modal-heading-icon {
        width: 43px;
        height: 43px;
        min-width: 43px;
        box-shadow: inset 0 0 0 3px rgba(211, 154, 44, .07);
    }
    #S58-global-member-modal .S58-global-modal-heading-icon .ti {
        font-size: 24px;
    }
    #S58-global-member-modal .S58-global-modal-heading-copy .modal-title {
        font-size: clamp(15px, 4.7vw, 19px);
        line-height: 1.08;
    }
    #S58-global-member-modal .S58-global-modal-heading-copy p {
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.25;
    }
    #S58-global-member-modal .S58-global-modal-close {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 10px;
    }
    #S58-global-member-modal .S58-global-modal-close .ti {
        font-size: 22px;
    }
    #S58-global-member-modal .S58-global-modal-body {
        padding: 12px;
        gap: 11px;
    }
    #S58-global-member-modal .S58-global-member-card {
        padding: 14px;
        grid-template-columns: 1fr;
        gap: 13px;
    }
    #S58-global-member-modal .S58-global-member-visual {
        grid-row: 1;
        justify-items: center;
    }
    #S58-global-member-modal .S58-global-member-detail {
        grid-row: 2;
        padding-right: 0;
    }
    #S58-global-member-modal .S58-global-avatar-wrap {
        width: min(155px, 52vw);
        max-width: 155px;
        min-height: 0;
        border-radius: 15px;
    }
    #S58-global-member-modal .S58-global-avatar-wrap img {
        border-radius: 11px;
    }
    #S58-global-member-modal .S58-global-avatar-fallback {
        border-radius: 11px;
    }
    #S58-global-member-modal .S58-global-avatar-fallback .ti {
        font-size: 68px;
    }
    #S58-global-member-modal .S58-global-section-title {
        min-height: 39px;
        gap: 8px;
    }
    #S58-global-member-modal .S58-global-section-icon {
        width: 27px;
        height: 27px;
        min-width: 27px;
    }
    #S58-global-member-modal .S58-global-section-icon .ti {
        font-size: 17px;
    }
    #S58-global-member-modal .S58-global-section-title h6 {
        font-size: 15px;
    }
    #S58-global-member-modal .S58-global-detail-list {
        padding: 8px 0 0;
    }
    #S58-global-member-modal .S58-global-detail-row {
        min-height: 38px;
        padding: 4px 0;
        grid-template-columns: 24px minmax(80px, 96px) 8px minmax(0, 1fr);
        gap: 5px;
    }
    #S58-global-member-modal .S58-global-detail-row > .ti {
        font-size: 18px;
    }
    #S58-global-member-modal .S58-global-detail-row > span,
    #S58-global-member-modal .S58-global-detail-row > b {
        font-size: 12px;
    }
    #S58-global-member-modal .S58-global-detail-row > strong {
        font-size: 12px;
        line-height: 1.3;
    }
    #S58-global-member-modal .S58-global-network-card {
        padding: 11px 12px 12px;
    }
    #S58-global-member-modal .S58-global-network-heading {
        align-items: flex-end;
        gap: 8px;
    }
    #S58-global-member-modal .S58-global-network-total {
        padding-bottom: 8px;
        font-size: 10px;
    }
    #S58-global-member-modal .S58-global-network-total strong {
        font-size: 11px;
    }
    #S58-global-member-modal .S58-global-branch-counts {
        margin-top: 10px;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    #S58-global-member-modal .S58-global-branch-card {
        min-height: 68px;
        padding: 9px 10px;
        grid-template-columns: 38px minmax(0, 1fr) 58px;
        gap: 8px;
    }
    #S58-global-member-modal .S58-global-branch-icon {
        width: 36px;
        height: 36px;
    }
    #S58-global-member-modal .S58-global-branch-icon .ti {
        font-size: 22px;
    }
    #S58-global-member-modal .S58-global-branch-copy > strong {
        font-size: 13px;
    }
    #S58-global-member-modal .S58-global-branch-copy > small {
        font-size: 9px;
    }
    #S58-global-member-modal .S58-global-branch-value {
        padding-left: 8px;
    }
    #S58-global-member-modal .S58-global-branch-value > strong {
        font-size: 24px;
    }
    #S58-global-member-modal .S58-global-branch-value > small {
        font-size: 8px;
    }
    #S58-global-member-modal .S58-global-modal-note {
        margin-top: 10px;
        min-height: 44px;
        padding: 8px 9px;
        gap: 8px;
        font-size: 9px;
    }
    #S58-global-member-modal .S58-global-modal-note .ti {
        font-size: 18px;
    }
}
/* ========================================================================== 
   53B. GLOBAL MEMBER MODAL — COMPACT + SCROLL SAFE
   ========================================================================== */
#S58-global-member-modal .S58-global-member-dialog {
    width: min(820px, calc(100vw - 24px));
    max-width: 820px;
    max-height: calc(100dvh - 24px);
    margin: 12px auto;
    display: flex;
}
#S58-global-member-modal .S58-global-modal-content {
    width: 100%;
    max-height: calc(100dvh - 24px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: none;
}
#S58-global-member-modal .S58-global-modal-hero {
    flex: 0 0 auto;
    min-height: 76px;
    padding: 10px 13px;
    gap: 10px;
}
#S58-global-member-modal .S58-global-modal-heading { gap: 9px; }
#S58-global-member-modal .S58-global-modal-heading-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    box-shadow: none;
}
#S58-global-member-modal .S58-global-modal-heading-icon .ti { font-size: 21px; }
#S58-global-member-modal .S58-global-modal-heading-copy .modal-title {
    font-size: clamp(14px, 1.45vw, 18px);
    line-height: 1.05;
}
#S58-global-member-modal .S58-global-modal-heading-copy p {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.2;
}
#S58-global-member-modal .S58-global-modal-close {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
}
#S58-global-member-modal .S58-global-modal-close .ti { font-size: 18px; }
#S58-global-member-modal .S58-global-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
#S58-global-member-modal .S58-global-member-card,
#S58-global-member-modal .S58-global-network-card {
    border-radius: 11px;
    box-shadow: none;
}
#S58-global-member-modal .S58-global-member-card {
    padding: 10px 12px;
    grid-template-columns: minmax(0,1fr) 150px;
    gap: 14px;
}
#S58-global-member-modal .S58-global-avatar-wrap {
    max-width: 142px;
    border-radius: 12px;
    box-shadow: none;
}
#S58-global-member-modal .S58-global-avatar-wrap img,
#S58-global-member-modal .S58-global-avatar-fallback { border-radius: 9px; }
#S58-global-member-modal .S58-global-avatar-fallback .ti { font-size: 52px; }
#S58-global-member-modal .S58-global-section-title {
    min-height: 32px;
    gap: 7px;
}
#S58-global-member-modal .S58-global-section-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
}
#S58-global-member-modal .S58-global-section-icon .ti { font-size: 15px; }
#S58-global-member-modal .S58-global-section-title h6 { font-size: 13px; }
#S58-global-member-modal .S58-global-detail-list { padding: 5px 0 0; }
#S58-global-member-modal .S58-global-detail-row {
    min-height: 31px;
    padding: 2px 0;
    grid-template-columns: 22px 112px 8px minmax(0,1fr);
    gap: 5px;
}
#S58-global-member-modal .S58-global-detail-row > .ti { font-size: 15px; }
#S58-global-member-modal .S58-global-detail-row > span,
#S58-global-member-modal .S58-global-detail-row > b { font-size: 10px; }
#S58-global-member-modal .S58-global-detail-row > strong { font-size: 11px; line-height: 1.2; }
#S58-global-member-modal .S58-global-network-card { padding: 9px 11px 10px; }
#S58-global-member-modal .S58-global-network-heading { gap: 8px; }
#S58-global-member-modal .S58-global-network-total { font-size: 9px; }
#S58-global-member-modal .S58-global-network-total strong { font-size: 10px; }
#S58-global-member-modal .S58-global-branch-counts { margin-top: 8px; gap: 7px; }
#S58-global-member-modal .S58-global-branch-card {
    min-height: 64px;
    padding: 7px 8px;
    grid-template-columns: 32px minmax(0,1fr) 48px;
    gap: 6px;
    border-radius: 9px;
}
#S58-global-member-modal .S58-global-branch-icon { width: 30px; height: 30px; }
#S58-global-member-modal .S58-global-branch-icon .ti { font-size: 18px; }
#S58-global-member-modal .S58-global-branch-copy > strong { font-size: 11px; }
#S58-global-member-modal .S58-global-branch-copy > small { font-size: 8px; }
#S58-global-member-modal .S58-global-branch-value { padding-left: 6px; }
#S58-global-member-modal .S58-global-branch-value > strong { font-size: 20px; }
#S58-global-member-modal .S58-global-branch-value > small { font-size: 7px; }
#S58-global-member-modal .S58-global-modal-note {
    margin-top: 8px;
    min-height: 34px;
    padding: 6px 8px;
    gap: 6px;
    font-size: 8px;
}
#S58-global-member-modal .S58-global-modal-note .ti { font-size: 15px; }
@media (max-width: 767px) {
    #S58-global-member-modal .S58-global-member-dialog {
        width: min(360px, calc(100vw - 12px));
        max-width: 360px;
        max-height: calc(100dvh - 12px);
        margin: 6px auto;
    }
    #S58-global-member-modal .S58-global-modal-content { max-height: calc(100dvh - 12px); }
    #S58-global-member-modal .S58-global-modal-hero { min-height: 66px; padding: 8px 9px; }
    #S58-global-member-modal .S58-global-member-card { padding: 8px; grid-template-columns: 1fr; gap: 8px; }
    #S58-global-member-modal .S58-global-member-visual { grid-row: 1; }
    #S58-global-member-modal .S58-global-member-detail { grid-row: 2; }
    #S58-global-member-modal .S58-global-avatar-wrap { width: 108px; max-width: 108px; }
    #S58-global-member-modal .S58-global-detail-row { grid-template-columns: 20px 88px 7px minmax(0,1fr); }
    #S58-global-member-modal .S58-global-branch-counts { grid-template-columns: 1fr; }
}

/* ==========================================================================
   54. ADMIN PETA JARINGAN — ADMJAR
   Filter Select2 + mode edit akses 91-99 di atas Global Tree V2 existing.
   ========================================================================== */
.S58-admjar-page .S58-admjar-filter {
    width: 100%;
    margin-bottom: 12px;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(260px, 1.45fr) minmax(220px, .8fr) auto;
    align-items: end;
    gap: 12px;
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(148, 163, 184, .48);
    border-radius: 12px;
}
.S58-admjar-page .S58-admjar-filter-field {
    min-width: 0;
    display: grid;
    gap: 5px;
}
.S58-admjar-page .S58-admjar-filter-field .form-label {
    margin: 0;
    color: #172033;
    font-size: .78rem;
    font-weight: 700;
}
.S58-admjar-page .S58-admjar-filter-help {
    min-height: 18px;
    color: #64748b;
    font-size: .68rem;
    line-height: 1.25;
}
.S58-admjar-page .S58-admjar-filter-help .ti {
    margin-right: 3px;
}
.S58-admjar-page .S58-admjar-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-bottom: 18px;
}
.S58-admjar-page #txtnoid:disabled + .select2-container .select2-selection--single {
    cursor: not-allowed;
    opacity: .82;
    background: rgba(226, 232, 240, .86);
}
#S58-global-member-modal .S58-admjar-modal-input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 6px 9px;
    color: #172033;
    background: #fff;
    border: 1px solid #cfd8e3;
    border-radius: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    font-weight: 650;
    box-shadow: none;
}
#S58-global-member-modal .S58-admjar-modal-input:focus {
    border-color: #d39a2c;
    box-shadow: 0 0 0 3px rgba(211, 154, 44, .12);
}
#S58-global-member-modal .S58-admjar-region-edit {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}
#S58-global-member-modal .S58-admjar-avatar-button {
    width: min(180px, 100%);
    margin-top: 8px;
    justify-content: center;
}
#S58-global-member-modal .S58-admjar-avatar-name {
    width: min(200px, 100%);
    margin-top: 5px;
    color: #66778c;
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
}
#S58-global-member-modal .S58-admjar-modal-footer {
    min-height: 64px;
    padding: 11px 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    background: #fff;
    border-top: 1px solid #dce3ea;
}
#S58-global-member-modal .S58-admjar-modal-footer .btn {
    min-width: 132px;
}
@media (max-width: 1279px) {
    .S58-admjar-page .S58-admjar-filter {
        padding: 10px;
        grid-template-columns: 1fr;
        gap: 9px;
    }
    .S58-admjar-page .S58-admjar-filter-actions {
        grid-column: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: flex-start;
        padding-bottom: 0;
    }
    .S58-admjar-page .S58-admjar-filter-actions .btn {
        width: 100%;
        justify-content: center;
    }
    #S58-global-member-modal .S58-admjar-region-edit {
        grid-template-columns: 1fr;
    }
    #S58-global-member-modal .S58-admjar-modal-input {
        height: 34px;
        padding: 5px 8px;
        font-size: 11px;
    }
    #S58-global-member-modal .S58-admjar-modal-footer {
        padding: 9px 12px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #S58-global-member-modal .S58-admjar-modal-footer .btn {
        min-width: 0;
        width: 100%;
    }
}
/* ==========================================================================
   55. WITHDRAW SYSTEM — MEMBER MODAL
   Fintech 2026: reusable modal member. Admin Command Center v60 berada
   pada Section 57 agar kontrak lama dan baru tidak berjalan paralel.
   Penggunaan: #getWithdrawModal / .s58-withdraw-*
   ========================================================================== */
.user-stat[data-bs-url="ajaxs/getWithdraw.php"] {
    color: inherit;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.user-stat[data-bs-url="ajaxs/getWithdraw.php"]:hover {
    color: inherit;
    transform: translateY(-2px);
}
.s58-withdraw-modal .modal-dialog {
    width: min(1120px, calc(100vw - 24px));
}
.s58-withdraw-shell {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 22px;
    background:
        radial-gradient(circle at 92% 0%, rgba(14, 165, 233, .12), transparent 26%),
        radial-gradient(circle at 0% 100%, rgba(34, 197, 94, .08), transparent 28%),
        #f8fafc;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .26);
}
.s58-withdraw-head {
    min-height: 92px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, .84);
    border-bottom: 1px solid rgba(148, 163, 184, .18) !important;
    backdrop-filter: blur(16px);
}
.s58-withdraw-mark {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--s58-pod-ocean-solid);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(2, 132, 199, .24);
    font-size: 1.65rem;
}
.s58-withdraw-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: #0284c7;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
}
.s58-withdraw-body {
    padding: 18px 22px 22px;
}
.s58-withdraw-balance-card {
    min-height: 142px;
    padding: 22px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    color: #f8fafc;
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .22), transparent 28%),
        var(--s58-pod-ocean-solid);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(2, 132, 199, .18);
}
.s58-withdraw-label,
.s58-withdraw-balance-card small,
.s58-withdraw-balance-meta span {
    display: block;
    color: rgba(248, 250, 252, .78);
    font-size: .75rem;
}
.s58-withdraw-balance {
    display: block;
    margin: 4px 0 2px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1;
    letter-spacing: -.04em;
}
.s58-withdraw-balance-meta {
    min-width: 180px;
    padding: 12px 14px;
    text-align: right;
    background: rgba(15, 23, 42, .16);
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 14px;
    backdrop-filter: blur(10px);
}
.s58-withdraw-balance-meta strong {
    display: block;
    margin: 2px 0 4px;
    color: #fff;
    font-size: 1.15rem;
}
.s58-withdraw-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 14px;
}
.s58-withdraw-alert > .ti {
    flex: 0 0 auto;
    font-size: 1.55rem;
}
.s58-withdraw-alert strong,
.s58-withdraw-alert span {
    display: block;
}
.s58-withdraw-alert span {
    margin-top: 2px;
    font-size: .77rem;
    line-height: 1.45;
}
.s58-withdraw-alert-warning {
    color: #854d0e;
    background: rgba(254, 249, 195, .78);
    border-color: rgba(234, 179, 8, .25);
}
.s58-withdraw-alert-info {
    color: #075985;
    background: rgba(224, 242, 254, .82);
    border-color: rgba(14, 165, 233, .22);
}
.s58-withdraw-form,
.s58-withdraw-side-card {
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .055);
}
.s58-withdraw-form {
    padding: 17px;
}
.s58-withdraw-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.s58-withdraw-section-title > div {
    display: flex;
    align-items: center;
    gap: 8px;
}
.s58-withdraw-section-title > div > span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    color: #0369a1;
    background: #e0f2fe;
    border-radius: 9px;
    font-family: var(--ui-font-number);
    font-size: .72rem;
    font-weight: 800;
}
.s58-withdraw-section-title strong {
    color: #172033;
    font-size: .86rem;
}
.s58-withdraw-amount-input {
    margin-top: 12px;
}
.s58-withdraw-amount-input .input-group-text {
    color: #0369a1;
    background: #f0f9ff;
    border-color: #bae6fd;
    font-weight: 800;
}
.s58-withdraw-amount-input .form-control {
    color: #0f172a;
    border-color: #bae6fd;
    font-size: 1.35rem;
    font-weight: 800;
}
.s58-withdraw-calc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
.s58-withdraw-calc-grid > div {
    padding: 11px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.s58-withdraw-calc-grid span,
.s58-withdraw-calc-grid strong {
    display: block;
}
.s58-withdraw-calc-grid span {
    color: #64748b;
    font-size: .7rem;
}
.s58-withdraw-calc-grid strong {
    margin-top: 3px;
    color: #172033;
    font-size: .95rem;
}
.s58-withdraw-calc-grid .s58-withdraw-calc-wide {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.s58-withdraw-calc-grid .s58-withdraw-calc-wide strong {
    margin-top: 0;
    font-size: 1.05rem;
}
.s58-withdraw-inline-note {
    min-height: 42px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    font-size: .75rem;
    line-height: 1.45;
}
.s58-withdraw-inline-note.is-valid {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.s58-withdraw-inline-note.is-invalid {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}
.s58-withdraw-side-card {
    padding: 16px;
}
.s58-withdraw-bank-list > div {
    padding: 10px 0;
    display: grid;
    grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr);
    gap: 12px;
    border-top: 1px dashed #e2e8f0;
}
.s58-withdraw-bank-list > div:first-child {
    border-top: 0;
}
.s58-withdraw-bank-list dt {
    color: #64748b;
    font-size: .72rem;
    font-weight: 600;
}
.s58-withdraw-bank-list dd {
    margin: 0;
    color: #172033;
    text-align: right;
    font-size: .8rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}
.s58-withdraw-payout-date {
    padding: 13px 14px;
    color: #0c4a6e;
    background: linear-gradient(135deg, #e0f2fe, #ecfeff);
    border: 1px solid #bae6fd;
    border-radius: 13px;
}
.s58-withdraw-payout-date span,
.s58-withdraw-payout-date strong {
    display: block;
}
.s58-withdraw-payout-date span {
    font-size: .68rem;
}
.s58-withdraw-payout-date strong {
    margin-top: 2px;
    font-size: 1.15rem;
}
.s58-withdraw-rules {
    padding: 12px 0 0;
    list-style: none;
}
.s58-withdraw-rules li {
    padding: 8px 0;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 8px;
    color: #475569;
    border-top: 1px dashed #e2e8f0;
    font-size: .72rem;
    line-height: 1.45;
}
.s58-withdraw-rules li:first-child {
    border-top: 0;
}
.s58-withdraw-rules .ti {
    color: #0284c7;
    font-size: 1rem;
}
.s58-withdraw-footer {
    padding: 13px 22px;
    background: rgba(255, 255, 255, .9);
    border-top: 1px solid rgba(148, 163, 184, .18) !important;
}
.s58-withdraw-safe {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #64748b;
    font-size: .7rem;
}
.s58-withdraw-safe .ti {
    color: #16a34a;
    font-size: 1.05rem;
}
@media (max-width: 1279px) {
    .s58-withdraw-modal .modal-dialog {
        width: min(100% - 12px, 960px);
        margin: 6px auto;
    }
    .s58-withdraw-head,
    .s58-withdraw-body,
    .s58-withdraw-footer {
        padding-left: 14px;
        padding-right: 14px;
    }
    .s58-withdraw-balance-card {
        padding: 16px;
        align-items: flex-start;
        flex-direction: column;
    }
    .s58-withdraw-balance-meta {
        width: 100%;
        min-width: 0;
        text-align: left;
    }
    .s58-withdraw-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .s58-withdraw-safe {
        grid-column: 1 / -1;
    }
    .s58-withdraw-footer .btn {
        width: 100%;
    }
}
@media (max-width: 575px) {
    .s58-withdraw-mark {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 13px;
        font-size: 1.25rem;
    }
    .s58-withdraw-head .modal-title {
        font-size: 1rem;
    }
    .s58-withdraw-head .text-secondary {
        display: none;
    }
    .s58-withdraw-balance {
        font-size: 2rem;
    }
    .s58-withdraw-calc-grid {
        grid-template-columns: 1fr;
    }
    .s58-withdraw-calc-grid .s58-withdraw-calc-wide {
        display: block;
    }
    .s58-withdraw-calc-grid .s58-withdraw-calc-wide strong {
        margin-top: 3px;
    }
    .s58-withdraw-bank-list > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .s58-withdraw-bank-list dd {
        text-align: left;
    }
    .s58-withdraw-alert {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .s58-withdraw-alert .btn {
        width: 100%;
    }
}

/* ==========================================================================
   56. NAVBAR FULL PAGE CATEGORY ROW LAUNCHER — BETA v62 HOTFIX

   Arah visual:
   - Komposisi dominan metallic gold + silver, tanpa shadow.
   - Header: logo | judul launcher | avatar + akses + NOID.
   - Kategori memakai pola pod-header-left: icon watermark + title + subtitle.
   - Desktop/tablet menampilkan seluruh app bila ruang cukup.
   - Mobile <= 767px memakai limit 5 + carousel bila jumlah app > 5.
   ========================================================================== */
.s58-mega-launcher {
    --mega-gold: #d4a83f;
    --mega-gold-light: #f3d986;
    --mega-gold-dark: #76510e;
    --mega-silver: #d9dcde;
    --mega-silver-light: #f6f7f7;
    --mega-silver-dark: #737b82;
    --mega-ink: #25231e;
    --mega-muted: #625a49;
    --mega-gap: 7px;
    --mega-visible: 5;
    width: min(100%, 1760px);
    min-height: 100%;
    margin: 0 auto;
    padding: clamp(10px, 1.2vw, 18px) clamp(8px, 1.7vw, 24px) 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: var(--mega-ink);
    font-family: var(--ui-font-body);
}
.s58-mega-header {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 68px;
    padding: 7px 10px;
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    align-items: center;
    gap: 12px;
    background: linear-gradient(110deg, rgba(246,247,247,.94) 0%, rgba(204,208,211,.90) 42%, rgba(212,168,63,.82) 78%, rgba(118,81,14,.82) 100%);
    border: 2px solid rgba(212,168,63,.92);
    border-radius: 18px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: none !important;
}
.s58-mega-brand { min-width: 0; display: flex; align-items: center; }
.s58-mega-brand-logo {
    display: block;
    width: auto;
    height: clamp(42px, 3.5vw, 58px);
    max-width: min(34vw, 300px);
    object-fit: contain;
    object-position: left center;
    filter: none;
}
.s58-mega-search {
    min-width: 0;
    min-height: 36px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(118,81,14,.52);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255,255,255,.52), rgba(224,226,227,.50), rgba(240,213,145,.52));
    color: #3b321f;
    font-family: var(--ui-font-caption);
    font-size: clamp(.66rem, .86vw, .84rem);
    font-weight: 800;
    letter-spacing: .06em;
    text-align: center;
}
.s58-mega-search i { flex: 0 0 auto; color: var(--mega-gold-dark); font-size: 1rem; }
.s58-mega-search input { display: none !important; }
.s58-mega-account { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.s58-mega-access,
.s58-mega-login-id { min-width: 0; display: flex; align-items: center; gap: 7px; }
.s58-mega-account-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s58-mega-account-copy strong {
    max-width: 180px;
    overflow: hidden;
    color: #2f2a20;
    font-family: var(--ui-font-title);
    font-size: clamp(.65rem, .82vw, .82rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.s58-mega-login-id .s58-mega-account-copy strong { font-family: var(--ui-font-number); letter-spacing: .055em; }
.s58-mega-account-copy small { color: var(--mega-muted); font-size: .5rem; font-weight: 600; line-height: 1.1; }
.s58-mega-account-divider { width: 1px; height: 34px; flex: 0 0 auto; background: linear-gradient(180deg, transparent, rgba(118,81,14,.72), transparent); }
.s58-mega-avatar {
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--mega-gold);
    border-radius: 50%;
    background: linear-gradient(145deg, #f8f8f7, #c7cbce);
    box-shadow: none !important;
}
.s58-mega-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.s58-mega-close {
    position: static !important;
    inset: auto !important;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mega-gold-dark);
    border-radius: 50%;
    background: linear-gradient(145deg, #f6f7f7, #c7cbce);
    color: #4d3a13;
    font-size: .96rem;
    cursor: pointer;
    box-shadow: none !important;
}
.s58-mega-close:is(:hover,:focus-visible) { border-color: var(--mega-gold-light); background: #ead08d; color: #2a2110; }

.s58-mega-content { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; }
.s58-mega-category {
    min-width: 0;
    min-height: 80px;
    padding: 6px 7px;
    display: grid;
    grid-template-columns: minmax(170px, 205px) minmax(0, 1fr);
    align-items: stretch;
    gap: 7px;
    background: linear-gradient(105deg, rgba(246,247,247,.92) 0%, rgba(201,205,208,.90) 32%, rgba(229,200,128,.86) 68%, rgba(130,91,21,.82) 100%);
    border: 2px solid rgba(212,168,63,.88);
    border-radius: 18px;
    box-shadow: none !important;
}
.s58-mega-category.active { border-color: var(--mega-gold-light); }
.s58-mega-category-head {
    position: relative;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    padding: 6px 9px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    text-align: left;
    border-right: 1px solid rgba(118,81,14,.42);
}
.s58-mega-category-head::after {
    content: '';
    position: absolute;
    left: 56px;
    right: 10px;
    bottom: 8px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--mega-gold-dark), var(--mega-gold-light), transparent);
}
.s58-mega-category-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #76510e;
    font-size: clamp(2rem, 2vw, 2.45rem);
    line-height: 1;
    opacity: .5;
}
.s58-mega-category-copy {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    padding-bottom: 7px;
    color: #2f2a20;
    text-transform: uppercase;
}
.s58-mega-category-copy strong {
    max-width: 100%;
    color: #322a1b;
    font-family: var(--ui-font-caption);
    font-size: clamp(.84rem, 1.02vw, 1rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .035em;
    overflow-wrap: anywhere;
}
.s58-mega-category-badge {
    position: static;
    min-width: 0;
    padding: 0;
    display: block;
    border: 0 !important;
    background: transparent;
    color: #72551c;
    font-family: var(--ui-font-caption);
    font-size: .52rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .09em;
    white-space: nowrap;
}
.s58-mega-category-apps { min-width: 0; width: 100%; display: flex; align-items: center; }
.s58-mega-category.is-carousel-active .s58-mega-category-apps { display: grid; grid-template-columns: 26px minmax(0,1fr) 26px; align-items: center; gap: 3px; }
.s58-mega-category-viewport { min-width: 0; width: 100%; overflow: visible; scrollbar-width: none; scroll-snap-type: none; scroll-behavior: smooth; }
.s58-mega-category-viewport::-webkit-scrollbar { display: none; }
.s58-mega-category-list { width: 100%; min-width: 0; display: flex; align-items: stretch; justify-content: flex-start; gap: var(--mega-gap); }
.s58-mega-carousel-btn {
    width: 26px;
    min-width: 26px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mega-gold-dark);
    border-radius: 9px;
    background: linear-gradient(145deg, #f4f5f5, #bfc4c7 48%, #c49a3a 100%);
    color: #5f4515;
    font-size: .78rem;
    box-shadow: none !important;
    cursor: pointer;
}
.s58-mega-carousel-btn:disabled { opacity: .3; cursor: default; }
.s58-mega-carousel-btn[hidden] { display: none !important; }

.s58-mega-app {
    position: relative;
    isolation: isolate;
    flex: 1 1 76px;
    max-width: 116px;
    min-width: 68px;
    min-height: 62px;
    padding: 4px 5px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
    scroll-snap-align: start;
    background: linear-gradient(145deg, #f5f6f6 0%, #c6cacc 42%, #d8b254 74%, #805c18 100%) !important;
    color: #2b261d !important;
    border: 1px solid #b88725 !important;
    border-radius: 14px !important;
    text-align: center;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: filter .10s linear, border-color .10s linear !important;
}
.s58-mega-app::before { display: none; }
.s58-mega-app-icon {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #745316;
    font-size: clamp(1.72rem, 2.25vw, 2.15rem);
    line-height: 1;
    opacity: .92;
}
.s58-mega-app-icon > :is(i,svg) { margin: 0; color: inherit; font-size: inherit; line-height: 1; }
.s58-mega-app-name {
    min-width: 0;
    max-width: 100%;
    color: #2a251c;
    font-family: var(--ui-font-title);
    font-size: clamp(.67rem, .78vw, .82rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: .002em;
    text-align: center;
    text-shadow: none;
    overflow-wrap: anywhere;
}
.s58-mega-app-cursor {
    position: absolute;
    left: 24%;
    right: 24%;
    bottom: 2px;
    height: 2px;
    border-radius: 999px;
    background: var(--mega-gold-light);
    opacity: 0;
    pointer-events: none;
}
.s58-mega-app:is(:hover,:focus-visible) { border-color: var(--mega-gold-light) !important; filter: brightness(1.04); }
.s58-mega-app.active,
.s58-mega-app[aria-current="page"] { background: linear-gradient(145deg, #fff2b8 0%, #ddb749 48%, #8a6217 100%) !important; border-color: #fff0a0 !important; }
.s58-mega-app.active .s58-mega-app-cursor,
.s58-mega-app[aria-current="page"] .s58-mega-app-cursor { opacity: 1; }

.s58-mega-empty { min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #4a4130; text-align: center; }
.s58-mega-empty[hidden], .s58-mega-app[hidden], .s58-mega-category[hidden] { display: none !important; }
.s58-mega-empty i { font-size: 1.8rem; color: var(--mega-gold-dark); }
.s58-mega-footer {
    min-height: 44px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: linear-gradient(100deg, rgba(244,245,245,.88), rgba(197,201,204,.84), rgba(211,174,83,.76));
    border: 1px solid rgba(118,81,14,.46);
    border-radius: 14px;
    box-shadow: none !important;
}
.s58-mega-footer-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.s58-mega-footer-copy strong { color: #332a1a; font-size: .58rem; letter-spacing: .07em; }
.s58-mega-footer-copy span { color: #625a49; font-size: .5rem; }
.s58-mega-docs { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.s58-mega-docs a, .s58-mega-logout {
    min-height: 28px;
    padding: 4px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(118,81,14,.48);
    border-radius: 8px;
    background: rgba(255,255,255,.34);
    color: #44391f;
    font-size: .54rem;
    text-decoration: none !important;
    box-shadow: none !important;
}

@media (min-width: 1280px) {
    .s58-mega-app { flex-basis: 78px; max-width: 116px; min-width: 68px; }
}
@media (max-width: 1279px) {
    .s58-mega-launcher { --mega-gap: 5px; padding: 9px 7px 14px; gap: 7px; }
    .s58-mega-header { min-height: 62px; grid-template-columns: auto minmax(140px,1fr) auto; gap: 7px; border-radius: 15px; }
    .s58-mega-brand-logo { height: clamp(36px,6vw,48px); max-width: min(30vw,220px); }
    .s58-mega-search { min-height: 32px; font-size: .62rem; border-radius: 10px; }
    .s58-mega-account { gap: 5px; }
    .s58-mega-avatar { width: 32px; min-width: 32px; height: 32px; }
    .s58-mega-account-copy strong { max-width: 94px; font-size: .58rem; }
    .s58-mega-account-copy small { font-size: .44rem; }
    .s58-mega-account-divider { height: 26px; }
    .s58-mega-close { width: 28px; min-width: 28px; height: 28px; }
    .s58-mega-category { grid-template-columns: minmax(132px,155px) minmax(0,1fr); min-height: 72px; gap: 5px; padding: 5px; border-radius: 15px; }
    .s58-mega-category-head { padding: 4px 6px; gap: 6px; }
    .s58-mega-category-head::after { left: 44px; bottom: 6px; }
    .s58-mega-category-icon { width: 34px; min-width: 34px; height: 34px; font-size: 1.75rem; }
    .s58-mega-category-copy { padding-bottom: 6px; }
    .s58-mega-category-copy strong { font-size: clamp(.72rem,1.35vw,.86rem); }
    .s58-mega-category-badge { font-size: .43rem; }
    .s58-mega-app { flex-basis: 66px; max-width: 100px; min-width: 58px; min-height: 56px; padding: 3px 4px 5px; border-radius: 12px !important; }
    .s58-mega-app-icon { min-height: 25px; font-size: clamp(1.48rem,2.8vw,1.8rem); }
    .s58-mega-app-name { font-size: clamp(.58rem,1.06vw,.68rem); }
    .s58-mega-footer { align-items: stretch; flex-direction: column; }
    .s58-mega-docs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 767px) {
    .s58-mega-launcher { --mega-visible: 5; --mega-gap: 3px; }
    .s58-mega-header { grid-template-columns: auto minmax(0,1fr) auto; }
    .s58-mega-account .s58-mega-account-divider,
    .s58-mega-login-id { display: none; }
    .s58-mega-search { padding-inline: 6px; font-size: .54rem; letter-spacing: .03em; }
    .s58-mega-category { grid-template-columns: 110px minmax(0,1fr); min-height: 64px; }
    .s58-mega-category-head { gap: 5px; }
    .s58-mega-category-head::after { left: 37px; right: 6px; bottom: 4px; }
    .s58-mega-category-icon { width: 29px; min-width: 29px; height: 29px; font-size: 1.5rem; opacity: .5; }
    .s58-mega-category-copy { padding-bottom: 4px; }
    .s58-mega-category-copy strong { font-size: clamp(.64rem,2vw,.76rem); }
    .s58-mega-category-badge { font-size: .38rem; }
    .s58-mega-category.is-carousel-active .s58-mega-category-apps { grid-template-columns: 20px minmax(0,1fr) 20px; gap: 2px; }
    .s58-mega-category-viewport { overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; }
    .s58-mega-carousel-btn { width: 20px; min-width: 20px; height: 30px; border-radius: 7px; font-size: .62rem; }
    .s58-mega-app {
        flex: 0 0 calc((100% - (var(--mega-gap) * (var(--mega-visible) - 1))) / var(--mega-visible));
        max-width: none;
        min-width: 0;
        min-height: 50px;
        padding: 2px 1px 4px;
        gap: 1px;
        border-radius: 9px !important;
    }
    .s58-mega-app-icon { min-height: 21px; font-size: clamp(1.25rem,4.2vw,1.48rem); }
    .s58-mega-app-name { font-size: clamp(.48rem,1.65vw,.58rem); line-height: 1; }
    .s58-mega-app-cursor { left: 24%; right: 24%; bottom: 1px; height: 1px; }
}
@media (max-width: 575px) {
    .s58-mega-brand-logo { max-width: 27vw; }
    .s58-mega-access .s58-mega-account-copy { display: none; }
    .s58-mega-search { font-size: .48rem; }
    .s58-mega-category { grid-template-columns: 96px minmax(0,1fr); }
    .s58-mega-category-icon { width: 25px; min-width: 25px; height: 25px; font-size: 1.32rem; }
    .s58-mega-category-copy strong { font-size: .62rem; }
    .s58-mega-category-badge { font-size: .34rem; }
    .s58-mega-docs { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .s58-mega-app { transition: none !important; }
    .s58-mega-category-viewport { scroll-behavior: auto !important; }
}

/* ==========================================================================
   57. WITHDRAW COMMAND CENTER v60
   Dashboard direksi + modal bertab + configuration + RUN KOMISI.
   ========================================================================== */
.s58-wd-command { overflow: visible; }
.s58-wd-board-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.s58-wd-board-card {
    min-width: 0;
    min-height: 96px;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255,255,255,.94);
    color: #1e293b;
    border: 1px solid #d9e1e8;
    border-radius: 14px;
}
.s58-wd-board-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #075f65;
    background: rgba(8,127,134,.08);
    border: 1px solid rgba(8,127,134,.24);
    border-radius: 13px;
    font-size: 1.35rem;
}
.s58-wd-board-card div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.s58-wd-board-card small { color: #64748b; font-size: .60rem; font-weight: 700; letter-spacing: .08em; }
.s58-wd-board-card strong { color: #0f172a; font-size: 1.02rem; line-height: 1; }
.s58-wd-board-card span { color: #64748b; font-size: .68rem; }
.s58-wd-board-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    overflow: hidden;
    background: rgba(255,255,255,.92);
    border: 1px solid #d9e1e8;
    border-radius: 12px;
}
.s58-wd-board-strip > div { min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.s58-wd-board-strip > div + div { border-left: 1px solid #e5eaf0; }
.s58-wd-board-strip span { color: #64748b; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }
.s58-wd-board-strip strong { color: #172033; font-size: .76rem; overflow-wrap: anywhere; }
.s58-wd-admin-modal .modal-content { overflow: hidden; background: #f4f7fa; border: 1px solid #cdd7e0; border-radius: 18px; }
.s58-wd-admin-modal-head {
    min-height: 86px;
    padding: 14px 18px;
    color: #eef6f8;
    background: linear-gradient(120deg, #061c29 0%, #0a4a58 56%, #102a42 100%);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, #9f6f18, #f1d06d, #aab4bf, #f8fafc, #9f6f18) 1;
}
.s58-wd-admin-modal-mark {
    width: 52px;
    min-width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244,213,128,.5);
    border-radius: 15px;
    background: rgba(255,255,255,.06);
    color: #f4d580;
    font-size: 1.6rem;
}
.s58-wd-admin-modal-head .modal-title { margin: 2px 0; font-family: var(--ui-font-title); font-size: 1.15rem; font-weight: 600; }
.s58-wd-admin-modal-head p { color: rgba(226,238,244,.72); font-size: .70rem; }
.s58-wd-kicker { color: #e8c76e; font-size: .58rem; font-weight: 700; letter-spacing: .14em; }
.s58-wd-admin-tabs-wrap { padding: 8px 12px 0; background: #ffffff; border-bottom: 1px solid #dfe6ed; }
.s58-wd-admin-tabs { display: flex; gap: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.s58-wd-admin-tabs .nav-link {
    min-height: 38px;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #526274;
    background: #f5f7fa;
    border: 1px solid #dce4eb;
    border-radius: 10px 10px 0 0;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.s58-wd-admin-tabs .nav-link.active { color: #ffffff; background: #075f65; border-color: #075f65; }
.s58-wd-admin-modal-body { padding: 14px; background: #f4f7fa; }
.s58-wd-panel {
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #dce4eb;
    border-radius: 14px;
}
.s58-wd-panel-head {
    min-height: 56px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #edf1f5;
}
.s58-wd-panel-head > div:first-child { min-width: 0; }
.s58-wd-panel-head span { color: #6b7b8c; font-size: .58rem; font-weight: 700; letter-spacing: .08em; }
.s58-wd-panel-head h6 { margin: 2px 0 0; color: #172033; font-size: .84rem; font-weight: 600; }
.s58-wd-panel-head > .ti { color: #087f86; font-size: 1.25rem; }
.s58-wd-chart { min-height: 300px; padding: 3px 8px 8px; }
.s58-wd-accounting-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.s58-wd-accounting-grid > div {
    min-width: 0;
    min-height: 76px;
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #ffffff;
    border: 1px solid #dce4eb;
    border-left: 3px solid #d6aa4d;
    border-radius: 10px;
}
.s58-wd-accounting-grid span { color: #64748b; font-size: .66rem; }
.s58-wd-accounting-grid strong { color: #172033; font-family: var(--ui-font-number); font-size: .90rem; }
.s58-wd-accounting-grid small { color: #7a8795; font-size: .58rem; }
.s58-wd-filter-row { display: flex; align-items: center; gap: 6px; }
.s58-wd-filter-row .form-control { width: min(280px, 38vw); }
.s58-wd-filter-row .form-select { width: 160px; }
.s58-wd-month-filter { width: 150px; }
.s58-wd-panel .table { margin: 0; color: #334155; }
.s58-wd-panel .table thead th { padding: 9px 10px; color: #64748b; background: #f8fafc; border-bottom: 1px solid #dce4eb; font-size: .62rem; text-transform: uppercase; white-space: nowrap; }
.s58-wd-panel .table tbody td { padding: 9px 10px; border-bottom-color: #edf1f5; font-size: .70rem; vertical-align: middle; }
.s58-wd-config-form { min-width: 0; }
.s58-wd-config-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.s58-wd-config-card {
    min-width: 0;
    padding: 12px;
    background: #ffffff;
    color: #263247;
    border: 1px solid #dce4eb;
    border-radius: 12px;
}
.s58-wd-config-card.is-disabled { opacity: .52; background: #f1f4f7; }
.s58-wd-config-card .form-label { margin-bottom: 5px; color: #344256 !important; font-size: .70rem; font-weight: 700; }
.s58-wd-config-card small { margin-top: 5px; display: block; color: #6b7b8c; font-size: .61rem; line-height: 1.35; }
.s58-wd-config-wide { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.s58-wd-config-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.s58-wd-config-title > span { width: 38px; min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: #087f86; background: #edf9fa; border: 1px solid #cbe9eb; border-radius: 11px; font-size: 1.2rem; }
.s58-wd-config-title div { min-width: 0; }
.s58-wd-config-title strong { display: block; color: #172033; font-size: .78rem; }
.s58-wd-config-title small { margin: 2px 0 0; }
.s58-inline-switch { min-width: 136px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; cursor: pointer; user-select: none; }
.s58-inline-switch input { position: absolute; opacity: 0; pointer-events: none; }
.s58-inline-switch-track { position: relative; width: 48px; height: 26px; flex: 0 0 48px; display: block; background: #cbd5e1; border: 1px solid #aeb8c5; border-radius: 999px; transition: background .16s ease, border-color .16s ease; }
.s58-inline-switch-track > span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; display: block; background: #ffffff; border: 1px solid rgba(15,23,42,.14); border-radius: 50%; transition: transform .16s ease; }
.s58-inline-switch input:checked + .s58-inline-switch-track { background: #087f86; border-color: #075f65; }
.s58-inline-switch input:checked + .s58-inline-switch-track > span { transform: translateX(22px); }
.s58-inline-switch input:focus-visible + .s58-inline-switch-track { outline: 2px solid #d6aa4d; outline-offset: 2px; }
.s58-inline-switch b { min-width: 62px; color: #334155; font-size: .64rem; letter-spacing: .04em; }
.s58-wd-config-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
.s58-wd-ops-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 10px; }
.s58-wd-op-card {
    min-width: 0;
    padding: 14px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 11px;
    align-items: start;
    background: #ffffff;
    color: #263247;
    border: 1px solid #dce4eb;
    border-radius: 14px;
}
.s58-wd-op-card.is-primary { border-top: 3px solid #d6aa4d; }
.s58-wd-op-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #087f86; background: #effafa; border: 1px solid #cde9eb; border-radius: 12px; font-size: 1.35rem; }
.s58-wd-op-card div { min-width: 0; }
.s58-wd-op-card small { color: #8a6b29; font-size: .58rem; font-weight: 700; letter-spacing: .09em; }
.s58-wd-op-card h6 { margin: 3px 0 6px; color: #172033; font-size: .90rem; }
.s58-wd-op-card p, .s58-wd-op-card li { color: #5f6f80; font-size: .68rem; line-height: 1.45; }
.s58-wd-op-card ul { margin: 7px 0 0; padding-left: 16px; }
.s58-wd-op-card > .btn { grid-column: 1 / -1; justify-self: end; }
.s58-wd-ledger-contract { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; background: #ffffff; border: 1px solid #dce4eb; border-radius: 12px; }
.s58-wd-ledger-contract > div { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.s58-wd-ledger-contract > div + div { border-left: 1px solid #e6ebf0; }
.s58-wd-ledger-contract b { color: #087f86; font-family: var(--ui-font-number); font-size: 1rem; }
.s58-wd-ledger-contract span { color: #172033; font-size: .66rem; font-weight: 700; }
.s58-wd-ledger-contract small { color: #6b7b8c; font-size: .58rem; line-height: 1.35; }
.s58-wd-admin-modal-foot { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #64748b; background: #ffffff; border-top: 1px solid #dce4eb; font-size: .64rem; }
.s58-wd-admin-modal-foot > span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 1279px) {
    .s58-wd-board-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
    .s58-wd-board-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .s58-wd-board-strip > div + div { border-left: 0; border-top: 1px solid #e5eaf0; }
    .s58-wd-admin-modal .modal-content { border-radius: 0; border: 0; }
    .s58-wd-admin-modal-head { min-height: 74px; padding: 10px 12px; }
    .s58-wd-admin-tabs-wrap { padding: 7px 7px 0; }
    .s58-wd-admin-tabs { gap: 4px; }
    .s58-wd-admin-tabs .nav-link { min-height: 42px; padding: 7px 10px; }
    .s58-wd-admin-modal-body { padding: 9px; }
    .s58-wd-accounting-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .s58-wd-config-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .s58-wd-ops-grid { grid-template-columns: 1fr; }
    .s58-wd-ledger-contract { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 575px) {
    .s58-wd-board-grid,
    .s58-wd-board-strip,
    .s58-wd-accounting-grid,
    .s58-wd-config-grid,
    .s58-wd-ledger-contract { grid-template-columns: 1fr; }
    .s58-wd-admin-modal-mark { width: 42px; min-width: 42px; height: 42px; font-size: 1.25rem; }
    .s58-wd-admin-modal-head p { display: none; }
    .s58-wd-admin-tabs .nav-link span { display: none; }
    .s58-wd-admin-tabs .nav-link { min-width: 44px; padding: 8px 12px; }
    .s58-wd-filter-row { width: 100%; display: grid; grid-template-columns: 1fr; }
    .s58-wd-filter-row .form-control,
    .s58-wd-filter-row .form-select,
    .s58-wd-month-filter { width: 100%; }
    .s58-wd-config-wide { flex-direction: column; align-items: stretch; }
    .s58-inline-switch { justify-content: flex-start; }
    .s58-wd-op-card { grid-template-columns: 1fr; }
    .s58-wd-op-icon { margin: 0 auto; }
    .s58-wd-op-card > .btn { justify-self: stretch; width: 100%; }
    .s58-wd-admin-modal-foot { align-items: stretch; flex-direction: column; }
    .s58-wd-admin-modal-foot .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .s58-inline-switch-track,
    .s58-inline-switch-track > span { transition: none !important; }
}

/* ==========================================================================
   99. S88_UI — FRONT NAVIGATION + FULL HOME LAUNCHER v64.17102026
   Satu bahasa visual Android/fintech: Logout | HOME | Back + full-page launcher.
   Tanpa animation, shadow, filter, blur. Warna netral silver + warm gold.
   ========================================================================== */
:root {
    --s88-ui-nav-reserve: clamp(86px, 10vh, 98px);
    --s88-ui-shell-max: 1480px;
    --s88-ui-ink: #253142;
    --s88-ui-muted: #667386;
    --s88-ui-line: #d8dfe7;
    --s88-ui-line-strong: #b9c3cf;
    --s88-ui-gold: #c49a45;
    --s88-ui-gold-soft: #ead9ad;
    --s88-ui-gold-deep: #81631f;
    --s88-ui-silver-0: #fcfdfe;
    --s88-ui-silver-1: #f5f7f9;
    --s88-ui-silver-2: #e8edf2;
}
.content-page {
    padding-bottom: calc(var(--s88-ui-nav-reserve) + env(safe-area-inset-bottom)) !important;
}
.footer { min-height: var(--s88-ui-nav-reserve); }
html[data-sidenav-size="offcanvas"] #s58-sidenav,
html[data-sidenav-size="offcanvas"] .sidenav-menu {
    background: linear-gradient(180deg, #f9fafb 0%, #f1f4f7 52%, #e9edf1 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
    transform: none !important;
}
html[data-sidenav-size="offcanvas"].sidebar-enable #s58-sidenav,
html[data-sidenav-size="offcanvas"].sidebar-enable .sidenav-menu {
    transform: none !important;
}
.s88-ui-launcher,
.s58-mega-launcher {
    width: min(100%, var(--s88-ui-shell-max));
    min-height: 100dvh;
    margin: 0 auto;
    padding: clamp(12px, 1.1vw, 18px) clamp(10px, 1.4vw, 20px) calc(var(--s88-ui-nav-reserve) + 18px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--s88-ui-ink);
}
.s58-mega-header {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 72px;
    padding: 10px 12px;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    gap: 12px;
    background: linear-gradient(135deg, var(--s88-ui-silver-0) 0%, var(--s88-ui-silver-2) 100%);
    border: 1px solid var(--s88-ui-line-strong);
    border-radius: 20px;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
}
.s58-mega-brand-logo {
    height: clamp(42px, 3.2vw, 54px);
    max-width: min(30vw, 280px);
    filter: none !important;
}
.s58-mega-search {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--s88-ui-line);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%);
    color: #344154;
    font-size: clamp(.7rem, .8vw, .82rem);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.s58-mega-search i { color: var(--s88-ui-gold-deep); }
.s58-mega-account-copy strong { color: #243041; font-weight: 700; }
.s58-mega-account-copy small {
    color: var(--s88-ui-muted);
    font-size: .52rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.s58-mega-avatar {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border: 1px solid var(--s88-ui-gold);
    background: #f7f8f9;
    box-shadow: none !important;
}
.s58-mega-close {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border: 1px solid var(--s88-ui-line-strong);
    border-radius: 12px;
    background: #f8fafb;
    color: #415063;
    box-shadow: none !important;
    transition: none !important;
}
.s58-mega-close:is(:hover,:focus-visible) {
    background: #f6f0df;
    border-color: var(--s88-ui-gold);
    color: #53401a;
}
.s58-mega-content { gap: 10px; }
.s58-mega-category {
    min-height: 86px;
    padding: 8px;
    gap: 8px;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
    background: linear-gradient(135deg, #ffffff 0%, #f7f9fb 48%, #eff3f6 100%);
    border: 1px solid var(--s88-ui-line);
    border-radius: 20px;
    box-shadow: none !important;
    filter: none !important;
}
.s58-mega-category.active {
    border-color: var(--s88-ui-gold);
    background: linear-gradient(135deg, #fffdf8 0%, #faf6e9 15%, #f6f8fa 60%, #edf1f5 100%);
}
.s58-mega-category-head {
    min-height: 100%;
    padding: 8px 10px 8px 12px;
    gap: 10px;
    align-items: center;
    border-right: 1px solid #e0e6ec;
    overflow: hidden;
}
.s58-mega-category-head::after {
    left: 52px;
    right: 10px;
    bottom: 8px;
    height: 1px;
    background: linear-gradient(90deg, rgba(196,154,69,.55), rgba(214,221,230,0));
}
.s58-mega-category-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    color: rgba(129,99,31,.82);
    background: linear-gradient(180deg, #fff9ea 0%, #f6edd3 100%);
    border: 1px solid rgba(196,154,69,.42);
    border-radius: 14px;
    font-size: 1.55rem;
    opacity: 1;
}
.s58-mega-category-copy strong {
    color: #202c3c;
    font-size: clamp(.76rem, .96vw, .92rem);
    font-weight: 700;
}
.s58-mega-category-badge {
    color: var(--s88-ui-muted);
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.s58-mega-category-list { gap: 7px; }
.s58-mega-carousel-btn {
    width: 28px;
    min-width: 28px;
    height: 42px;
    border: 1px solid var(--s88-ui-line);
    border-radius: 12px;
    background: #fff;
    color: #556277;
    box-shadow: none !important;
    transition: none !important;
}
.s58-mega-app {
    flex: 0 0 84px;
    max-width: 108px;
    min-width: 70px;
    min-height: 68px;
    padding: 7px 6px 6px;
    gap: 4px;
    background: linear-gradient(180deg, #ffffff 0%, #f5f7f9 100%) !important;
    border: 1px solid var(--s88-ui-line) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
}
.s58-mega-app::before {
    background: radial-gradient(circle at 50% 24%, rgba(196,154,69,.12), transparent 38%);
}
.s58-mega-app-icon {
    min-height: 28px;
    color: rgba(129,99,31,.86);
    font-size: clamp(1.45rem, 1.7vw, 1.7rem);
}
.s58-mega-app-name {
    color: #2a3546;
    font-size: clamp(.58rem, .68vw, .68rem);
    font-weight: 700;
    line-height: 1.15;
}
.s58-mega-app.active,
.s58-mega-app[aria-current="page"] {
    background: linear-gradient(180deg, #fffef8 0%, #fcf6e4 28%, #f4f7fa 100%) !important;
    border-color: var(--s88-ui-gold) !important;
}
.s58-mega-footer {
    min-height: 50px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%);
    border: 1px solid var(--s88-ui-line);
    border-radius: 18px;
    box-shadow: none !important;
}
.s58-mega-docs a,
.s58-mega-logout {
    min-height: 30px;
    border: 1px solid var(--s88-ui-line);
    background: #f8fafb;
    color: #455264;
    box-shadow: none !important;
}

.s88-ui-frontnav,
.s58-bottom-nav {
    left: 50%;
    bottom: max(6px, env(safe-area-inset-bottom));
    width: min(70vw, 540px);
    min-height: 0;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    transform: translateX(-50%);
    background: transparent !important;
}
.s58-bottom-nav-item,
.s88-ui-frontnav-item {
    height: clamp(68px, 9vh, 84px);
    aspect-ratio: auto;
    min-height: 0;
    padding: 8px 8px 10px;
    gap: 4px;
    border: 1px solid rgba(196,154,69,.42);
    border-radius: 20px;
    background: rgba(251,252,253,.96);
    color: #283444;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
}
.s58-bottom-nav-item > i {
    color: #4f5d70;
    font-size: clamp(1.2rem, 1.5vw, 1.45rem);
}
.s58-bottom-nav-logout > i { color: #8c4a43; }
.s58-bottom-nav-back > i { color: #4f5d70; }
.s88-ui-frontnav-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
    justify-items: center;
    text-align: center;
}
.s88-ui-frontnav-copy strong {
    color: #283444;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}
.s88-ui-frontnav-copy small {
    color: var(--s88-ui-muted);
    font-size: .5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.s58-bottom-nav-launcher {
    height: clamp(76px, 10vh, 92px);
    margin-top: -8px;
    border-color: rgba(196,154,69,.72);
    background: linear-gradient(180deg, #fffdf8 0%, #f5ecd3 44%, #f3f6f9 100%);
}
.s58-bottom-nav-logo {
    width: 100%;
    height: 32px;
}
.s58-bottom-nav-logo img {
    width: auto;
    height: 100%;
    max-width: 100%;
    filter: none !important;
}
.s88-ui-frontnav-copy-home strong { font-size: .68rem; letter-spacing: .11em; }
html.sidebar-enable .s58-bottom-nav-launcher {
    background: linear-gradient(180deg, #fff8e8 0%, #f0dfb5 45%, #eef2f6 100%);
}
body.modal-open .s58-bottom-nav { opacity: 0; pointer-events: none; }

/* ==========================================================================
   100. S88_UI PAGE SURFACE — v64.17102026
   Menyatukan visual seluruh pages/* tanpa duplikasi stylesheet per halaman.
   ========================================================================== */
#pages.s88-ui-pages {
    width: 100%;
    min-width: 0;
    color: #263244;
}
#pages.s88-ui-pages > .container-fluid,
#pages.s88-ui-pages > [class*="container-"] {
    width: min(100%, 1680px);
    margin-inline: auto;
    padding-inline: clamp(6px, 1vw, 14px) !important;
}
#pages.s88-ui-pages .pod,
#pages.s88-ui-pages .card,
#pages.s88-ui-pages .widget,
#pages.s88-ui-pages [class*="tiles-"] {
    box-shadow: none !important;
    filter: none !important;
}
#pages.s88-ui-pages .pod {
    border: 1px solid #d9e0e7;
    border-radius: 18px;
    overflow: clip;
}
#pages.s88-ui-pages .pod-header {
    min-height: 64px;
    padding: 9px 12px;
    border-bottom: 1px solid #d9e0e7;
}
#pages.s88-ui-pages .pod-title {
    color: #202d3f;
    font-size: clamp(.82rem, 1vw, 1rem);
    font-weight: 700;
    line-height: 1.12;
}
#pages.s88-ui-pages .pod-subtitle {
    color: #667386;
    font-size: clamp(.56rem, .68vw, .68rem);
    line-height: 1.25;
}
#pages.s88-ui-pages .pod-body { padding: clamp(9px, 1vw, 14px); }
#pages.s88-ui-pages .card,
#pages.s88-ui-pages .widget {
    border-color: #dde3ea;
    border-radius: 16px;
}
#pages.s88-ui-pages .table-responsive,
#pages.s88-ui-pages .dataTables_wrapper { border-radius: 14px; }
#pages.s88-ui-pages table.dataTable,
#pages.s88-ui-pages .table {
    color: #2b3748;
    font-size: clamp(.62rem, .72vw, .72rem);
}
#pages.s88-ui-pages .table > :not(caption) > * > *,
#pages.s88-ui-pages table.dataTable > thead > tr > th,
#pages.s88-ui-pages table.dataTable > tbody > tr > td {
    padding: .56rem .62rem;
    vertical-align: middle;
}
#pages.s88-ui-pages .form-control,
#pages.s88-ui-pages .form-select,
#pages.s88-ui-pages .select2-container .select2-selection--single,
#pages.s88-ui-pages .select2-container .select2-selection--multiple {
    min-height: 38px;
    border-color: #ccd5df;
    box-shadow: none !important;
    color: #263244;
    background-color: #fff;
}
#pages.s88-ui-pages .form-control:focus,
#pages.s88-ui-pages .form-select:focus,
#pages.s88-ui-pages .select2-container--focus .select2-selection {
    border-color: #b9974e !important;
    box-shadow: none !important;
}
#pages.s88-ui-pages .nav-tabs,
#pages.s88-ui-pages .nav-pills { gap: 4px; }
#pages.s88-ui-pages .nav-tabs .nav-link,
#pages.s88-ui-pages .nav-pills .nav-link {
    min-height: 34px;
    border-radius: 9px;
    color: #566477;
    font-size: .64rem;
    font-weight: 700;
}
#pages.s88-ui-pages .nav-tabs .nav-link.active,
#pages.s88-ui-pages .nav-pills .nav-link.active {
    color: #2e3746;
    background: #f5ecd5;
    border-color: #c9a65b;
}
#pages.s88-ui-pages .btn,
#pages.s88-ui-pages .modal-content { box-shadow: none !important; }
#pages.s88-ui-pages .toast-container { max-width: min(100%, 520px); }

/* Modal jaringan diperkecil dan scroll-safe. */
#S58-global-member-modal .S58-global-member-dialog {
    width: min(760px, calc(100vw - 18px));
    max-width: 760px;
    max-height: calc(100dvh - 16px);
    margin: 8px auto;
}
#S58-global-member-modal .S58-global-modal-content {
    max-height: calc(100dvh - 16px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: none !important;
}
#S58-global-member-modal .S58-global-modal-hero {
    flex: 0 0 auto;
    min-height: 72px;
    padding: 10px 12px;
}
#S58-global-member-modal .S58-global-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
#S58-global-member-modal .S58-global-member-card {
    padding: 10px 12px;
    grid-template-columns: minmax(0,1fr) 140px;
    gap: 12px;
}
#S58-global-member-modal .S58-global-avatar-wrap { max-width: 132px; box-shadow: none !important; }
#S58-global-member-modal .S58-global-detail-row {
    min-height: 28px;
    grid-template-columns: 18px 104px 7px minmax(0,1fr);
    gap: 5px;
}
#S58-global-member-modal .S58-global-detail-row > .ti { font-size: 13px; }
#S58-global-member-modal .S58-global-detail-row > span,
#S58-global-member-modal .S58-global-detail-row > b,
#S58-global-member-modal .S58-global-detail-row > strong { font-size: 10px; }
#S58-global-member-modal .S58-global-network-card { padding: 8px 10px 10px; }
#S58-global-member-modal .S58-global-branch-counts { margin-top: 8px; gap: 7px; }
#S58-global-member-modal .S58-global-branch-card {
    min-height: 58px;
    padding: 7px 8px;
    grid-template-columns: 28px minmax(0,1fr) 42px;
    gap: 5px;
    box-shadow: none !important;
}
#S58-global-member-modal .S58-global-branch-icon { width: 28px; height: 28px; }
#S58-global-member-modal .S58-global-branch-icon .ti { font-size: 16px; }
#S58-global-member-modal .S58-global-branch-copy > strong { font-size: 10px; }
#S58-global-member-modal .S58-global-branch-copy > small { font-size: 7px; }
#S58-global-member-modal .S58-global-branch-value > strong { font-size: 18px; }
#S58-global-member-modal .S58-global-branch-value > small { font-size: 7px; }
#S58-global-member-modal .S58-global-modal-note { min-height: 0; padding: 7px 8px; font-size: 8px; }

@media (max-width: 1279px) {
    :root { --s88-ui-nav-reserve: clamp(82px, 10vh, 92px); }
    .s88-ui-launcher,
    .s58-mega-launcher { padding-inline: 8px; gap: 8px; }
    .s58-mega-header { min-height: 66px; padding: 8px 10px; gap: 8px; border-radius: 17px; }
    .s58-mega-brand-logo { height: clamp(38px, 5vw, 48px); max-width: min(28vw, 210px); }
    .s58-mega-search { min-height: 36px; font-size: .6rem; padding-inline: 10px; }
    .s58-mega-avatar { width: 36px; min-width: 36px; height: 36px; }
    .s58-mega-category { min-height: 76px; grid-template-columns: 146px minmax(0,1fr); border-radius: 16px; }
    .s58-mega-category-icon { width: 34px; min-width: 34px; height: 34px; font-size: 1.35rem; }
    .s58-mega-app { flex-basis: 72px; max-width: 94px; min-width: 60px; min-height: 62px; border-radius: 14px !important; }
    .s58-mega-footer { flex-direction: column; align-items: stretch; }
    .s58-mega-docs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
    .s88-ui-frontnav,
    .s58-bottom-nav {
        width: calc(100% - 12px);
        bottom: max(4px, env(safe-area-inset-bottom));
        gap: 8px;
    }
    .s58-bottom-nav-item,
    .s88-ui-frontnav-item { height: clamp(64px, 9.5vh, 80px); border-radius: 18px; }
    .s58-bottom-nav-launcher { height: clamp(72px, 10vh, 88px); margin-top: -6px; }
    .s88-ui-frontnav-copy small[data-s58-launcher-label] { display: none; }
    #pages.s88-ui-pages .pod-header { min-height: 58px; padding: 8px 10px; }
    #pages.s88-ui-pages .pod-body { padding: 8px; }
}
@media (max-width: 767px) {
    .s58-mega-login-id,
    .s58-mega-account-divider { display: none; }
    .s58-mega-search { font-size: .54rem; letter-spacing: .05em; }
    .s58-mega-category { grid-template-columns: 108px minmax(0,1fr); min-height: 68px; }
    .s58-mega-category-icon { width: 30px; min-width: 30px; height: 30px; font-size: 1.22rem; }
    .s58-mega-category-copy strong { font-size: .68rem; }
    .s58-mega-category-badge { font-size: .46rem; }
    .s58-mega-category.is-carousel-active .s58-mega-category-apps { grid-template-columns: 20px minmax(0,1fr) 20px; gap: 3px; }
    .s58-mega-carousel-btn { width: 20px; min-width: 20px; height: 28px; border-radius: 8px; }
    .s58-mega-app {
        flex: 0 0 calc((100% - (var(--mega-gap) * (var(--mega-visible) - 1))) / var(--mega-visible));
        max-width: none;
        min-width: 0;
        min-height: 54px;
        padding: 4px 2px;
    }
    .s58-mega-app-icon { min-height: 22px; font-size: 1.25rem; }
    .s58-mega-app-name { font-size: .5rem; }
    #S58-global-member-modal .S58-global-member-dialog { width: min(350px, calc(100vw - 10px)); max-width: 350px; max-height: calc(100dvh - 10px); margin: 5px auto; }
    #S58-global-member-modal .S58-global-modal-content { max-height: calc(100dvh - 10px); }
    #S58-global-member-modal .S58-global-member-card { grid-template-columns: 1fr; gap: 8px; }
    #S58-global-member-modal .S58-global-member-visual { grid-row: 1; }
    #S58-global-member-modal .S58-global-member-detail { grid-row: 2; }
    #S58-global-member-modal .S58-global-avatar-wrap { width: 104px; max-width: 104px; }
    #S58-global-member-modal .S58-global-branch-counts { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    :root { --s88-ui-nav-reserve: clamp(78px, 10vh, 88px); }
    .s58-mega-brand-logo { max-width: 26vw; }
    .s58-mega-access .s58-mega-account-copy { display: none; }
    .s58-mega-category { grid-template-columns: 96px minmax(0,1fr); }
    .s58-mega-docs { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .s88-ui-frontnav,
    .s58-bottom-nav { width: calc(100% - 8px); gap: 6px; }
    .s58-bottom-nav-item,
    .s88-ui-frontnav-item { height: clamp(60px, 9vh, 74px); border-radius: 16px; padding: 6px 4px 8px; }
    .s58-bottom-nav-item > i { font-size: 1.15rem; }
    .s88-ui-frontnav-copy strong { font-size: .54rem; }
    .s58-bottom-nav-launcher { height: clamp(68px, 10vh, 82px); }
    .s58-bottom-nav-logo { height: 28px; }
    #pages.s88-ui-pages > .container-fluid,
    #pages.s88-ui-pages > [class*="container-"] { padding-inline: 4px !important; }
    #pages.s88-ui-pages .pod,
    #pages.s88-ui-pages .card,
    #pages.s88-ui-pages .widget { border-radius: 13px; }
    #pages.s88-ui-pages .pod-header { min-height: 52px; padding: 7px 8px; }
    #pages.s88-ui-pages .pod-title { font-size: .76rem; }
    #pages.s88-ui-pages .pod-subtitle { font-size: .54rem; }
}


/* ==========================================================================
   100. POD / NAV CONTROL — ICON + TITLE CONTRACT

   Kontrak final:
       ICON
       TITLE

   Berlaku untuk btn-icon-mobile, nav-link, s58-portal-tabs, nav-tabs/nav-pills.
   Icon normal, bukan watermark, pada Full / Tablet / Mobile.
   ========================================================================== */
:root,
.pod {
    --pod-control-size: 64px;
    --pod-control-radius: 14px;
    --pod-control-icon-size: 1.45rem;
    --pod-control-label-size: .62rem;
}

#pages.s88-ui-pages .pod .pod-title,
#pages.s88-ui-pages .pod .pod-subtitle,
#pages.s88-ui-pages .pod > .pod-header > .pod-header-left > .pod-icon,
.pod .pod-title,
.pod .pod-subtitle,
.pod > .pod-header > .pod-header-left > .pod-icon {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
}

.pod :is(.s58-portal-tabs, .nav-tabs, .nav-pills),
.pod :is(.pod-header-right, .pod-actions) :is(.nav, .nav-tabs, .nav-pills, .btn-group),
#pages.s88-ui-pages :is(.s58-portal-tabs, .nav-tabs, .nav-pills) {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: 0;
}

:is(
    .btn.btn-icon-mobile,
    .nav-link.btn-icon-mobile,
    .pod :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link),
    .pod .s58-portal-tabs .nav-link,
    .pod :is(.nav-tabs, .nav-pills) .nav-link,
    #pages.s88-ui-pages :is(.s58-portal-tabs, .nav-tabs, .nav-pills) .nav-link
) {
    position: relative;
    width: var(--pod-control-size) !important;
    min-width: var(--pod-control-size) !important;
    max-width: var(--pod-control-size) !important;
    height: var(--pod-control-size) !important;
    min-height: var(--pod-control-size) !important;
    max-height: var(--pod-control-size) !important;
    margin: 0 !important;
    padding: 6px 4px !important;
    display: inline-flex !important;
    flex: 0 0 var(--pod-control-size) !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    overflow: hidden;
    box-sizing: border-box;
    border: 2px solid var(--ui-theme-border, var(--ui-palette-solid, #1677c8)) !important;
    border-radius: var(--pod-control-radius) !important;
    background: var(--ui-bg-gradient, var(--ui-palette-solid, #1677c8)) !important;
    color: var(--ui-theme-text, var(--ui-palette-contrast, #fff)) !important;
    font-family: var(--ui-font-title);
    font-size: var(--pod-control-label-size) !important;
    font-weight: 700;
    line-height: 1.05 !important;
    text-align: center;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-decoration: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
}

/* ICON — elemen normal di atas title, bukan watermark. */
:is(
    .btn.btn-icon-mobile,
    .nav-link.btn-icon-mobile,
    .pod :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link),
    .pod .s58-portal-tabs .nav-link,
    .pod :is(.nav-tabs, .nav-pills) .nav-link,
    #pages.s88-ui-pages :is(.s58-portal-tabs, .nav-tabs, .nav-pills) .nav-link
) > :is(i, svg, .btn-icon) {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: inherit !important;
    font-size: var(--pod-control-icon-size) !important;
    line-height: 1 !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none;
    z-index: auto !important;
}

/* TITLE — selalu berada di bawah icon dan tetap tampil. */
:is(
    .btn.btn-icon-mobile,
    .nav-link.btn-icon-mobile,
    .pod :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link),
    .pod .s58-portal-tabs .nav-link,
    .pod :is(.nav-tabs, .nav-pills) .nav-link,
    #pages.s88-ui-pages :is(.s58-portal-tabs, .nav-tabs, .nav-pills) .nav-link
) > :not(i):not(svg):not(.btn-icon) {
    position: static !important;
    z-index: auto !important;
    display: -webkit-box !important;
    width: 100%;
    max-width: 100%;
    max-height: 2.15em;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit;
    line-height: 1.05 !important;
    text-align: center !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

:is(
    .pod .nav-link,
    .pod .s58-portal-tabs .nav-link,
    #pages.s88-ui-pages :is(.s58-portal-tabs, .nav-tabs, .nav-pills) .nav-link
):not([class*="bg-"]) {
    --ui-palette-solid: #1677c8;
    --ui-palette-contrast: #ffffff;
}

:is(
    .btn.btn-icon-mobile,
    .pod .nav-link,
    #pages.s88-ui-pages :is(.s58-portal-tabs, .nav-tabs, .nav-pills) .nav-link
):is(
    .bg-outline-golds, .bg-outline-oceans, .bg-outline-sages, .bg-outline-roses,
    .bg-outline-futures, .bg-outline-mints, .bg-outline-neons, .bg-outline-snows,
    .bg-outline-grays, .bg-outline-deeps, .bg-outline-metals, .bg-outline-whites,
    .bg-outline-luxury, .bg-outline-luxurys, .bg-outline-luxuri,
    .bg-outline-gold, .bg-outline-ocean, .bg-outline-sage, .bg-outline-rose,
    .bg-outline-future, .bg-outline-mint, .bg-outline-neon, .bg-outline-snow,
    .bg-outline-gray, .bg-outline-deep, .bg-outline-metal, .bg-outline-white
) {
    background: transparent !important;
    color: var(--ui-palette-solid, #1677c8) !important;
    border-color: var(--ui-palette-solid, #1677c8) !important;
}

:is(
    .btn.btn-icon-mobile,
    .nav-link.btn-icon-mobile,
    .pod :is(.pod-header-right, .pod-actions) :is(.btn, .pod-btn, .nav-link),
    .pod .s58-portal-tabs .nav-link,
    .pod :is(.nav-tabs, .nav-pills) .nav-link,
    #pages.s88-ui-pages :is(.s58-portal-tabs, .nav-tabs, .nav-pills) .nav-link
):is(:hover, :focus-visible) {
    border-color: var(--ui-palette-contrast, #fff) !important;
    outline: 1px solid rgba(255,255,255,.42) !important;
    outline-offset: -4px;
}

:is(
    .pod .nav-link,
    .pod .s58-portal-tabs .nav-link,
    .pod :is(.nav-tabs, .nav-pills) .nav-link,
    #pages.s88-ui-pages :is(.s58-portal-tabs, .nav-tabs, .nav-pills) .nav-link
):is(.active, [aria-current="page"], [aria-selected="true"]) {
    background: var(--ui-palette-contrast, #ffffff) !important;
    color: var(--ui-palette-solid, #1677c8) !important;
    border-color: var(--ui-palette-solid, #1677c8) !important;
    outline: 2px solid var(--ui-palette-solid, #1677c8) !important;
    outline-offset: -5px !important;
}

@media (max-width: 1279px) {
    :root,
    .pod {
        --pod-control-size: 52px;
        --pod-control-radius: 12px;
        --pod-control-icon-size: 1.25rem;
        --pod-control-label-size: .54rem;
    }
}
@media (max-width: 575px) {
    :root,
    .pod {
        --pod-control-size: 46px;
        --pod-control-radius: 10px;
        --pod-control-icon-size: 1.10rem;
        --pod-control-label-size: .46rem;
    }
}

/* --------------------------------------------------------------------------
   101B. S88_UI ALPINE FINTECH MEGA LAUNCHER
   Mengikuti background web existing. Panel tanpa border/shadow/blur/filter.
   -------------------------------------------------------------------------- */
html[data-sidenav-size="offcanvas"] #s58-sidenav,
html[data-sidenav-size="offcanvas"] .sidenav-menu {
    background:
        linear-gradient(180deg, rgba(3,28,47,.28) 0%, rgba(7,52,66,.18) 48%, rgba(12,35,49,.34) 100%),
        url("img/member_home_bg.webp") center center / cover no-repeat fixed !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
}
.s58-mega-launcher,
.s88-ui-launcher {
    width: min(100%, 1680px);
    min-height: 100dvh;
    padding: clamp(10px,1vw,16px) clamp(8px,1.2vw,18px) calc(var(--s88-ui-nav-reserve) + 16px);
    gap: 10px;
}
.s58-mega-header {
    position: sticky;
    top: 0;
    min-height: 72px;
    padding: 8px 12px;
    background: linear-gradient(100deg, rgba(16,56,76,.84), rgba(37,79,94,.76) 52%, rgba(92,75,38,.70));
    border: 0 !important;
    border-radius: 20px;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.s58-mega-search {
    border: 0 !important;
    background: rgba(244,248,250,.90);
    color: #233347;
    box-shadow: none !important;
}
.s58-mega-account-copy strong { color: #ffffff; }
.s58-mega-account-copy small { color: rgba(242,247,250,.78); }
.s58-mega-account-divider { background: rgba(238,215,154,.58); }
.s58-mega-avatar,
.s58-mega-close {
    border: 0 !important;
    box-shadow: none !important;
}
.s58-mega-close { background: rgba(244,248,250,.88); color: #304256; }
.s58-mega-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    align-items: start;
    gap: 10px;
}
.s58-mega-category {
    min-height: 0;
    padding: 10px;
    display: block;
    background: linear-gradient(145deg, rgba(23,65,82,.76), rgba(44,78,87,.64) 68%, rgba(112,87,38,.58));
    border: 0 !important;
    border-radius: 22px;
    box-shadow: none !important;
}
.s58-mega-category.active {
    background: linear-gradient(145deg, rgba(30,78,96,.82), rgba(62,92,96,.72) 66%, rgba(132,100,37,.66));
    border: 0 !important;
}
.s58-mega-category-head {
    min-height: 58px;
    padding: 4px 5px 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0 !important;
}
.s58-mega-category-head::after {
    left: 58px;
    right: 8px;
    bottom: 4px;
    height: 2px;
    background: linear-gradient(90deg, #f0cf75, rgba(240,207,117,0));
}
.s58-mega-category-icon {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border: 0 !important;
    border-radius: 50%;
    background: rgba(250,238,198,.16);
    color: #f4d77f;
    font-size: 2rem;
    opacity: .88;
    box-shadow: none !important;
}
.s58-mega-category-copy strong {
    color: #ffffff;
    font-size: clamp(.92rem,1.1vw,1.14rem);
    font-weight: 800;
    letter-spacing: .03em;
}
.s58-mega-category-badge {
    color: rgba(244,247,249,.78);
    font-size: .58rem;
}
.s58-mega-category-apps {
    margin-top: 5px;
    display: block;
}
.s58-mega-category-viewport {
    width: 100%;
    overflow: visible;
}
.s58-mega-category-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 7px;
}
.s58-mega-carousel-btn { display: none !important; }
.s58-mega-app {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 82px;
    padding: 8px 5px 7px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,244,247,.92)) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
}
.s58-mega-app::before { display: none !important; }
.s58-mega-app-icon {
    min-height: 38px;
    color: #1778bd;
    font-size: clamp(1.85rem,2.2vw,2.4rem);
    opacity: .92;
}
.s58-mega-app-name {
    color: #12285d;
    font-size: clamp(.62rem,.78vw,.76rem);
    font-weight: 800;
    line-height: 1.08;
}
.s58-mega-app.active,
.s58-mega-app[aria-current="page"] {
    background: linear-gradient(180deg, #fff7d9 0%, #f2d880 100%) !important;
    border: 0 !important;
}
.s58-mega-app.active .s58-mega-app-name,
.s58-mega-app[aria-current="page"] .s58-mega-app-name { color: #4a3510; }
.s58-mega-app-cursor {
    height: 2px;
    background: #8d6518;
}
.s58-mega-footer {
    border: 0 !important;
    background: rgba(240,245,248,.90);
    box-shadow: none !important;
}
.s58-mega-docs a,
.s58-mega-logout {
    border: 0 !important;
    background: #fff;
    box-shadow: none !important;
}
@media (max-width: 1279px) {
    .s58-mega-content { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .s58-mega-category-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 767px) {
    .s58-mega-content { grid-template-columns: 1fr; }
    .s58-mega-category { padding: 8px; border-radius: 17px; }
    .s58-mega-category-head { min-height: 50px; }
    .s58-mega-category-list {
        display: flex;
        gap: 5px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .s58-mega-category-list::-webkit-scrollbar { display: none; }
    .s58-mega-app {
        flex: 0 0 calc((100% - 20px) / 5) !important;
        width: calc((100% - 20px) / 5) !important;
        min-height: 60px;
        padding: 4px 2px;
        border-radius: 12px !important;
        scroll-snap-align: start;
    }
    .s58-mega-app-icon { min-height: 26px; font-size: 1.45rem; }
    .s58-mega-app-name { font-size: .48rem; }
    .s58-mega-category.has-carousel .s58-mega-category-apps {
        display: grid;
        grid-template-columns: 20px minmax(0,1fr) 20px;
        align-items: center;
        gap: 3px;
    }
    .s58-mega-category.has-carousel .s58-mega-carousel-btn {
        display: inline-flex !important;
        width: 20px;
        min-width: 20px;
        height: 30px;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 9px;
        background: rgba(247,249,250,.88);
        color: #334a5f;
    }
}

/* --------------------------------------------------------------------------
   101C. GET PROFIL — MEMBER CENTER
   -------------------------------------------------------------------------- */
.s88-profile-center {
    --profile-line: #dbe2e9;
    --profile-ink: #1d2734;
    --profile-muted: #667486;
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 10px;
}
.s88-profile-hero {
    min-height: 112px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    background: linear-gradient(100deg, rgba(255,255,255,.96), rgba(239,244,247,.94) 70%, rgba(245,234,201,.92));
    border: 0;
    border-radius: 20px;
}
.s88-profile-hero-avatar,
.s88-profile-avatar-preview {
    width: 82px;
    height: 82px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #23364c;
    font-family: var(--ui-font-title);
    font-size: 1.8rem;
    font-weight: 800;
}
.s88-profile-hero-avatar img,
.s88-profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.s88-profile-hero-copy { min-width: 0; }
.s88-profile-hero-copy > small,
.s88-profile-section > header > div > small {
    color: #8b681c;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .12em;
}
.s88-profile-hero-copy h2 { margin: 3px 0 7px; color: var(--profile-ink); font-size: clamp(1.25rem,2vw,1.7rem); }
.s88-profile-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--profile-muted); font-size: .68rem; }
.s88-profile-hero-meta span { display: inline-flex; align-items: center; gap: 4px; }
.s88-profile-hero-status { min-width: 150px; display: grid; justify-items: end; gap: 8px; text-align: right; }
.s88-profile-hero-status small { color: var(--profile-muted); font-size: .58rem; line-height: 1.35; }
.s88-profile-nav-wrap {
    width: 100%;
    padding: 7px;
    overflow-x: auto;
    background: rgba(250,252,253,.90);
    border-radius: 18px;
    scrollbar-width: thin;
}
.s88-profile-tabs { min-width: max-content; flex-wrap: nowrap !important; }
.s88-profile-tab-content { min-width: 0; }
.s88-profile-tab-content > .tab-pane { min-width: 0; }
.s88-profile-section {
    min-width: 0;
    padding: 16px;
    background: rgba(255,255,255,.97);
    border-radius: 18px;
}
.s88-profile-section > header {
    min-height: 64px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--profile-line);
}
.s88-profile-section > header h3 { margin: 2px 0 0; color: var(--profile-ink); font-size: 1.05rem; }
.s88-profile-section > header p { margin: 3px 0 0; color: var(--profile-muted); font-size: .66rem; }
.s88-profile-section > header > i { color: #a47b24; font-size: 2rem; opacity: .62; }
.s88-profile-form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.s88-profile-form-actions { display: flex; align-items: end; justify-content: flex-end; }
.s88-profile-activity-list { display: grid; gap: 7px; }
.s88-profile-activity-item {
    min-height: 64px;
    padding: 9px 11px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    background: #f8fafc;
    border-radius: 12px;
}
.s88-profile-activity-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #e6f0f7; color: #176d9b; }
.s88-profile-activity-item strong { color: var(--profile-ink); font-size: .7rem; }
.s88-profile-activity-item p { margin: 2px 0 0; color: var(--profile-muted); font-size: .64rem; }
.s88-profile-activity-item > small { color: var(--profile-muted); font-size: .54rem; text-align: right; }
.s88-profile-empty { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--profile-muted); text-align: center; }
.s88-profile-empty i { font-size: 2.2rem; color: #9b7a31; }
.s88-profile-empty strong { color: var(--profile-ink); font-size: .8rem; }
.s88-profile-empty span { font-size: .65rem; }
.s88-profile-credit-card {
    width: min(100%, 520px);
    min-height: 210px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    color: #fff;
    background: linear-gradient(135deg, #17243a, #275a70 62%, #9f7a2d);
    border-radius: 22px;
}
.s88-profile-credit-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.s88-profile-credit-card > strong { font-family: var(--ui-font-number); font-size: clamp(1rem,2.4vw,1.55rem); letter-spacing: .08em; }
.s88-profile-avatar-editor { display: grid; grid-template-columns: 180px minmax(0,520px); align-items: center; gap: 20px; }
.s88-profile-avatar-preview { width: 160px; height: 160px; border-radius: 24px; }
.s88-profile-switch { min-height: 88px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f7f9fb; border-radius: 14px; }
.s88-profile-switch strong { display: block; color: var(--profile-ink); font-size: .72rem; }
.s88-profile-switch small { display: block; margin-top: 4px; color: var(--profile-muted); font-size: .62rem; }
.s88-idcard-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.s88-idcard-item { min-width: 0; padding: 9px; background: #f6f8fa; border-radius: 14px; }
.s88-idcard-item > img { width: 100%; aspect-ratio: 1.573 / 1; object-fit: contain; display: block; border-radius: 10px; background: #fff; }
.s88-idcard-item-meta { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s88-idcard-item-meta > div:first-child { min-width: 0; display: grid; gap: 2px; }
.s88-idcard-item-meta strong { color: var(--profile-ink); font-size: .7rem; }
.s88-idcard-item-meta small { color: var(--profile-muted); font-size: .54rem; }
.s88-idcard-item-actions { display: flex; gap: 5px; }
.s88-idcard-item-actions .btn { width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; flex-basis: 46px !important; }
@media (max-width: 1279px) {
    .s88-profile-hero { min-height: 92px; padding: 10px 12px; }
    .s88-profile-hero-avatar { width: 64px; height: 64px; }
    .s88-profile-section { padding: 12px; }
    .s88-profile-form-grid { grid-template-columns: 1fr; }
    .s88-profile-avatar-editor { grid-template-columns: 130px minmax(0,1fr); }
    .s88-profile-avatar-preview { width: 120px; height: 120px; }
    .s88-idcard-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
    .s88-profile-hero { grid-template-columns: auto minmax(0,1fr); border-radius: 16px; }
    .s88-profile-hero-status { grid-column: 1 / -1; width: 100%; grid-template-columns: auto 1fr; align-items: center; justify-items: start; text-align: left; }
    .s88-profile-section { border-radius: 14px; }
    .s88-profile-activity-item { grid-template-columns: 30px minmax(0,1fr); }
    .s88-profile-activity-item > small { grid-column: 2; text-align: left; }
    .s88-profile-avatar-editor { grid-template-columns: 1fr; justify-items: center; }
    .s88-profile-avatar-editor form { width: 100%; }
    .s88-idcard-gallery { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   101D. ID MEMBER CARD — GENERATOR + LIBRARY
   Generator berada di kiri, semua kartu yang sudah tersimpan berada di kanan.
   -------------------------------------------------------------------------- */
.s88-idcard-workspace {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(230px, .72fr) minmax(0, 1.7fr);
    align-items: start;
    gap: 12px;
}
.s88-idcard-generator,
.s88-idcard-library {
    min-width: 0;
    padding: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f8 100%);
    border-radius: 16px;
}
.s88-idcard-template-preview {
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
}
.s88-idcard-template-preview img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}
.s88-idcard-generator-copy {
    margin: 10px 0;
    display: grid;
    gap: 3px;
}
.s88-idcard-generator-copy strong,
.s88-idcard-library-head strong {
    color: var(--profile-ink, #1d2734);
    font-size: .72rem;
}
.s88-idcard-generator-copy small,
.s88-idcard-library-head small {
    color: var(--profile-muted, #667486);
    font-size: .6rem;
    line-height: 1.35;
}
.s88-idcard-current-state {
    min-height: 38px;
    padding: 7px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #24533c;
    background: #e8f3ed;
    border-radius: 10px;
    font-size: .64rem;
    font-weight: 700;
}
.s88-idcard-current-state i { color: #2e8b57; font-size: 1rem; }
.s88-idcard-library-head {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.s88-idcard-library-head > div { min-width: 0; display: grid; gap: 2px; }
.s88-idcard-library .s88-idcard-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 991px) {
    .s88-idcard-workspace { grid-template-columns: 1fr; }
    .s88-idcard-generator { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(0, 1fr); column-gap: 12px; }
    .s88-idcard-template-preview { grid-row: 1 / span 2; }
}
@media (max-width: 575px) {
    .s88-idcard-generator { display: block; }
    .s88-idcard-library .s88-idcard-gallery { grid-template-columns: 1fr; }
}

/* ==========================================================================
   102. S88_UI v65 — REFERENCE ALPINE LAUNCHER + MASTER CONFIG
   Visual mengikuti referensi launcher Alpine: 3 kolom kategori, tile putih,
   gold accent, high-contrast icons, tanpa shadow/filter/blur/animasi.
   ========================================================================== */
html[data-sidenav-size="offcanvas"] #s58-sidenav,
html[data-sidenav-size="offcanvas"] .sidenav-menu {
    background:
        linear-gradient(180deg, rgba(5,49,87,.18) 0%, rgba(5,67,92,.10) 45%, rgba(1,35,52,.20) 100%),
        url("img/s88_ui_launcher_bg.webp") center center / cover no-repeat fixed !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    transition: none !important;
}
.s58-mega-launcher.s88-ui-launcher,
.s88-ui-launcher {
    width: min(100%, 1780px);
    min-height: 100dvh;
    padding: clamp(10px,1vw,18px) clamp(10px,1.4vw,24px) calc(var(--s88-ui-nav-reserve) + 18px);
    gap: 12px;
}
.s88-ui-launcher .s58-mega-header {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 86px;
    padding: 8px 12px;
    display: grid;
    grid-template-columns: minmax(230px,.95fr) minmax(300px,1.1fr) minmax(360px,1fr);
    align-items: center;
    gap: 16px;
    background: rgba(12,72,112,.48);
    border: 0 !important;
    border-radius: 24px;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.s88-ui-launcher .s58-mega-brand-logo {
    width: auto;
    height: clamp(54px,4.5vw,76px);
    max-width: min(30vw,390px);
    filter: none !important;
}
.s88-ui-launcher .s58-mega-search {
    min-height: 50px;
    padding: 0 14px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    background: rgba(246,249,252,.88);
    border: 0 !important;
    border-radius: 18px;
    box-shadow: none !important;
    color: #24405d;
}
.s88-ui-launcher .s58-mega-search > i {
    color: #246899;
    font-size: 1.2rem;
}
.s88-ui-launcher .s58-mega-search input {
    display: block !important;
    width: 100%;
    min-width: 0;
    padding: 0;
    color: #18344f;
    background: transparent;
    border: 0;
    outline: 0;
    font-family: var(--ui-font-body);
    font-size: clamp(.78rem,.95vw,.94rem);
    font-weight: 650;
}
.s88-ui-launcher .s58-mega-search input::placeholder { color: #506b84; opacity: 1; }
.s88-ui-launcher .s58-mega-search kbd {
    padding: 3px 7px;
    color: #5f7190;
    background: rgba(255,255,255,.78);
    border: 0;
    border-radius: 9px;
    font-size: .62rem;
    font-weight: 700;
}
.s88-ui-launcher .s58-mega-account {
    min-width: 0;
    display: grid;
    grid-template-columns: 48px minmax(96px,auto) 1px minmax(110px,auto) 50px 34px;
    align-items: center;
    justify-content: end;
    gap: 10px;
}
.s88-mega-owner-crown {
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    color: #fff1ae;
    background: linear-gradient(180deg,#b98209,#6d4a00);
    border: 0;
    border-radius: 16px;
    font-size: 1.65rem;
}
.s88-ui-launcher .s58-mega-account-copy strong { color: #fff; font-size: clamp(.72rem,.9vw,.92rem); }
.s88-ui-launcher .s58-mega-account-copy small { color: rgba(245,249,252,.82); font-size: .54rem; }
.s88-ui-launcher .s58-mega-account-divider { width: 1px; height: 42px; background: rgba(255,255,255,.55); }
.s88-ui-launcher .s58-mega-avatar {
    width: 50px;
    min-width: 50px;
    height: 50px;
    border: 0 !important;
    background: rgba(255,255,255,.9);
}
.s88-ui-launcher .s58-mega-close {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border: 0 !important;
    border-radius: 12px;
    background: rgba(245,249,252,.9);
    color: #24405d;
}
.s88-ui-launcher .s58-mega-content {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: start;
    gap: 12px;
}
.s88-ui-launcher .s58-mega-category {
    min-height: 0;
    padding: 11px;
    display: block;
    background: linear-gradient(145deg, rgba(7,67,101,.72), rgba(25,86,103,.58) 58%, rgba(109,86,38,.56));
    border: 0 !important;
    border-radius: 24px;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.s88-ui-launcher .s58-mega-category.active {
    background: linear-gradient(145deg, rgba(8,78,116,.80), rgba(32,99,111,.66) 56%, rgba(126,95,34,.64));
}
.s88-ui-launcher .s58-mega-category-head {
    min-height: 60px;
    padding: 3px 4px 10px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 0 !important;
}
.s88-ui-launcher .s58-mega-category-head::after {
    left: 64px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    background: linear-gradient(90deg,#efbf36,rgba(239,191,54,0));
}
.s88-ui-launcher .s58-mega-category-icon {
    width: 52px;
    min-width: 52px;
    height: 52px;
    border: 0 !important;
    border-radius: 50%;
    background: linear-gradient(180deg,rgba(255,238,169,.30),rgba(83,65,17,.34));
    color: #ffd45b;
    font-size: 2rem;
    opacity: 1;
}
.s88-ui-launcher .s58-mega-category-copy strong {
    color: #fff;
    font-size: clamp(.94rem,1.2vw,1.18rem);
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
}
.s88-ui-launcher .s58-mega-category-badge {
    color: rgba(255,255,255,.84);
    font-size: .6rem;
    font-weight: 650;
    letter-spacing: .08em;
}
.s88-ui-launcher .s58-mega-category-apps { margin-top: 5px; display: block; }
.s88-ui-launcher .s58-mega-category-viewport { width: 100%; overflow: visible; }
.s88-ui-launcher .s58-mega-category-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
}
.s88-ui-launcher .s58-mega-carousel-btn { display: none !important; }
.s88-ui-launcher .s58-mega-app {
    position: relative;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 88px;
    padding: 8px 5px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(180deg,rgba(255,255,255,.97),rgba(239,244,248,.95)) !important;
    border: 0 !important;
    border-radius: 17px !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
}
.s88-ui-launcher .s58-mega-app::before { display: none !important; }
.s88-ui-launcher .s58-mega-app-icon {
    min-height: 40px;
    display: grid;
    place-items: center;
    font-size: clamp(1.95rem,2.4vw,2.55rem);
    color: #167ac1;
    opacity: 1;
}
.s88-ui-launcher .s58-mega-app:nth-child(5n+1) .s58-mega-app-icon { color: #d79c13; }
.s88-ui-launcher .s58-mega-app:nth-child(5n+2) .s58-mega-app-icon { color: #287bd9; }
.s88-ui-launcher .s58-mega-app:nth-child(5n+3) .s58-mega-app-icon { color: #13a779; }
.s88-ui-launcher .s58-mega-app:nth-child(5n+4) .s58-mega-app-icon { color: #714ed0; }
.s88-ui-launcher .s58-mega-app:nth-child(5n) .s58-mega-app-icon { color: #e47921; }
.s88-ui-launcher .s58-mega-app-name {
    color: #142a5a;
    font-size: clamp(.62rem,.82vw,.78rem);
    font-weight: 800;
    line-height: 1.08;
    text-align: center;
}
.s88-ui-launcher .s58-mega-app.active,
.s88-ui-launcher .s58-mega-app[aria-current="page"] {
    background: linear-gradient(180deg,#fff4bf,#f2cb5b) !important;
}
.s88-ui-launcher .s58-mega-app.active .s58-mega-app-name,
.s88-ui-launcher .s58-mega-app[aria-current="page"] .s58-mega-app-name { color: #49350b; }
.s88-ui-launcher .s58-mega-app-cursor { display: none !important; }
.s88-ui-launcher .s58-mega-empty {
    grid-column: 1 / -1;
    min-height: 220px;
    border-radius: 24px;
    background: rgba(248,251,253,.90);
    color: #29405a;
}
.s88-ui-launcher .s58-mega-footer { display: none !important; }

/* Bottom S88_UI mengikuti komposisi referensi: center HOME menonjol. */
.s88-ui-frontnav,
.s58-bottom-nav {
    width: min(70vw,720px);
    gap: 8px;
}
.s88-ui-frontnav-item,
.s58-bottom-nav-item {
    height: clamp(64px,8.5vh,82px);
    border: 0 !important;
    border-radius: 20px;
    background: linear-gradient(180deg,rgba(247,250,252,.94),rgba(213,231,242,.94));
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
}
.s58-bottom-nav-launcher {
    height: clamp(72px,9.5vh,90px);
    margin-top: -7px;
    background: linear-gradient(180deg,#ffe990,#efbd3f);
}
.s58-bottom-nav-logo { height: 31px; }
.s88-ui-frontnav-copy strong { color: #183753; }
.s58-bottom-nav-launcher .s88-ui-frontnav-copy strong { color: #352706; }

/* Master Config — full config editor memakai POD + Tiles + Widget */
.s88-master-config {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
}
.s88-master-tabs-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.s88-master-tabs-wrap .s58-portal-tabs {
    flex-wrap: nowrap;
    min-width: max-content;
}
.s88-master-mode-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
}
.s88-master-config .pod-tiles {
    gap: 9px;
    padding: 8px;
}
.s88-master-mode {
    cursor: pointer;
    min-height: 140px;
    --tiles-surface: rgba(255,255,255,.96);
    --tiles-color: #1f2937;
    --tiles-border: rgba(100,116,139,.30);
}
.s88-master-mode .tiles-icon {
    color: #1677c8;
    opacity: 1;
}
.s88-master-mode .s88-master-mode-state {
    font-family: var(--ui-font-number);
    font-size: .68rem;
    letter-spacing: .08em;
}
.s88-master-mode.is-active {
    --tiles-surface: var(--s58-pod-gold-solid);
    --tiles-color: var(--s58-pod-gold-solid-text);
    --tiles-border: rgba(250,210,40,.95);
}
.s88-master-mode.is-active .tiles-icon {
    color: #6f4b08;
    background: rgba(255,255,255,.34);
}
.s88-master-mode:focus-within {
    outline: 2px solid rgba(255,229,154,.95);
    outline-offset: 2px;
}
.s88-master-config .widget {
    min-width: 0;
}
.s88-master-config .form-label {
    color: #334155;
    font-family: var(--ui-font-title);
    font-size: .68rem;
    font-weight: 650;
}
.s88-master-config .form-control,
.s88-master-config .form-select,
.s88-master-config .input-group-text {
    min-height: 40px;
    color: #172033;
    background-color: rgba(255,255,255,.96);
    border-color: rgba(100,116,139,.28);
}
.s88-master-config textarea.form-control {
    min-height: 88px;
    resize: vertical;
}
.s88-master-mime-widget textarea.form-control {
    min-height: 360px;
    color: #dbeafe;
    background: #0b1728;
    border-color: rgba(148,163,184,.35);
}
.s88-master-config .form-check-label {
    color: #334155;
    font-weight: 600;
}
.s88-master-config-actionbar {
    align-items: center;
}
.s88-master-config-actionbar > :first-child {
    min-width: 0;
    flex: 1 1 auto;
}
.s88-master-config-actionbar .widget-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
}
[data-redirect-panel][hidden] {
    display: none !important;
}
@media (max-width: 1279px) {
    .s88-master-mode-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 767px) {
    .s88-master-config .pod-body { padding-inline: 6px; }
    .s88-master-mode-grid { grid-template-columns: 1fr; }
    .s88-master-mode { min-height: 112px; }
    .s88-master-config .pod-tiles { grid-template-columns: 1fr; padding: 6px; gap: 6px; }
    .s88-master-config-actionbar { align-items: stretch; flex-direction: column; }
    .s88-master-config-actionbar .widget-actions { width: 100%; justify-content: stretch; }
    .s88-master-config-actionbar .widget-actions .btn { flex: 1 1 0; }
    .s88-master-mime-widget textarea.form-control { min-height: 280px; }
}

/* === BEGIN S88_UI FLAT A-Z LAUNCHER v64.18102026.patch === */
/* ==========================================================================
   103. S88_UI FLAT A-Z FINTECH LAUNCHER
   Visual: navy fintech + white/silver tile + gold border.
   Tidak memakai blur/filter/animation. Menu utama flat dan diurutkan A-Z.
   ========================================================================== */

html[data-sidenav-size="offcanvas"] #s58-sidenav,
html[data-sidenav-size="offcanvas"] .sidenav-menu {
    background:
        linear-gradient(180deg, rgba(2,18,38,.18), rgba(2,18,38,.30)),
        url("img/s88_ui_launcher_fintech.webp") center center / cover no-repeat fixed !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
}

html[data-sidenav-size="offcanvas"].sidebar-enable #s58-sidenav,
html[data-sidenav-size="offcanvas"].sidebar-enable .sidenav-menu {
    transform: none !important;
}

.s88-ui-launcher-flat {
    --s88-launcher-gold: #e3b54b;
    --s88-launcher-gold-light: #ffe49b;
    --s88-launcher-navy: #041b35;
    --s88-launcher-navy-2: #062a4d;
    --s88-launcher-cyan: #14b8d4;
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh;
    margin: 0;
    padding:
        clamp(10px, 1vw, 18px)
        clamp(14px, 3.4vw, 64px)
        10px !important;
    display: flex;
    flex-direction: column;
    gap: 10px !important;
    color: #fff;
}

.s88-ui-launcher-flat .s58-mega-header {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 102px;
    padding: 8px 10px 12px;
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(360px, .95fr) minmax(420px, 1fr);
    align-items: center;
    gap: 18px;
    background: linear-gradient(90deg, rgba(3,25,51,.96), rgba(5,42,77,.92), rgba(3,25,51,.96));
    border: 0 !important;
    border-bottom: 1px solid rgba(227,181,75,.72) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.s88-ui-launcher-flat .s58-mega-brand {
    min-width: 0;
    display: flex;
    align-items: center;
}

.s88-ui-launcher-flat .s58-mega-brand-logo {
    display: block;
    width: auto;
    height: clamp(62px, 5vw, 82px);
    max-width: min(34vw, 430px);
    object-fit: contain;
    object-position: left center;
    filter: none !important;
}

.s88-ui-launcher-flat .s58-mega-search {
    min-width: 0;
    min-height: 54px;
    padding: 0 13px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, rgba(130,157,188,.78), rgba(81,112,148,.72));
    border: 1px solid rgba(230,239,248,.42) !important;
    border-radius: 18px;
    color: #fff;
    box-shadow: none !important;
    filter: none !important;
}

.s88-ui-launcher-flat .s58-mega-search > i {
    color: #f8fbff;
    font-size: 1.35rem;
}

.s88-ui-launcher-flat .s58-mega-search input {
    display: block !important;
    width: 100%;
    min-width: 0;
    padding: 0;
    color: #fff;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    font-family: var(--ui-font-body);
    font-size: clamp(.80rem, .95vw, .98rem);
    font-weight: 600;
}

.s88-ui-launcher-flat .s58-mega-search input::placeholder {
    color: rgba(255,255,255,.90);
    opacity: 1;
}

.s88-ui-launcher-flat .s58-mega-search kbd {
    padding: 4px 8px;
    color: #172a4a;
    background: rgba(245,248,252,.92);
    border: 0;
    border-radius: 10px;
    font-size: .66rem;
    font-weight: 800;
}

.s88-ui-launcher-flat .s58-mega-account {
    min-width: 0;
    display: grid;
    grid-template-columns: 52px minmax(104px,auto) 1px minmax(116px,auto) 58px 34px;
    align-items: center;
    justify-content: end;
    gap: 10px;
}

.s88-ui-launcher-flat .s88-mega-owner-crown {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: #fff5bd;
    background: linear-gradient(180deg, #be870b, #674500);
    border: 1px solid rgba(255,227,135,.70);
    border-radius: 17px;
    font-size: 1.72rem;
}

.s88-ui-launcher-flat .s58-mega-account-copy strong {
    color: #fff;
    font-family: var(--ui-font-title);
    font-size: clamp(.76rem,.92vw,.96rem);
    font-weight: 800;
}

.s88-ui-launcher-flat .s58-mega-account-copy small {
    color: rgba(245,249,255,.82);
    font-size: .56rem;
    font-weight: 600;
}

.s88-ui-launcher-flat .s58-mega-account-divider {
    width: 1px;
    height: 44px;
    background: rgba(255,255,255,.58);
}

.s88-ui-launcher-flat .s58-mega-avatar {
    width: 58px;
    min-width: 58px;
    height: 58px;
    display: block;
    overflow: hidden;
    border: 2px solid rgba(239,205,120,.92) !important;
    border-radius: 50%;
    background: #fff;
}

.s88-ui-launcher-flat .s58-mega-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.s88-ui-launcher-flat .s58-mega-close {
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,224,145,.72) !important;
    border-radius: 11px;
    background: rgba(5,34,63,.88);
    color: #fff4bb;
}

.s88-ui-launcher-flat .s58-mega-content {
    flex: 1 1 auto;
    min-height: 0;
    display: block !important;
    padding: 2px 0;
    overflow: auto;
}

.s88-ui-launcher-flat .s58-mega-flat-shell {
    width: fit-content;
    max-width: 100%;
    min-height: 0;
    margin-inline: auto;
    padding: 14px 18px 18px;
    background: rgba(3,27,51,.40);
    border: 1px solid rgba(220,231,240,.46);
    border-radius: 24px;
}

.s88-ui-launcher-flat .s58-mega-flat-grid {
    --s58-launcher-tile-width: 190px;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(
        var(--s58-grid-cols, 4),
        minmax(0, var(--s58-launcher-tile-width))
    );
    grid-auto-flow: row;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
}

.s88-ui-launcher-flat .s58-mega-app {
    --s88-app-accent: #1d7cd4;
    position: relative;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 114px;
    padding: 10px 5px 9px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(221,229,235,.94)) !important;
    border: 1.5px solid var(--s88-launcher-gold) !important;
    border-radius: 18px !important;
    color: #102450 !important;
    text-align: center;
    text-decoration: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
}

.s88-ui-launcher-flat .s58-mega-app[hidden] {
    display: none !important;
}

.s88-ui-launcher-flat .s58-mega-app-icon {
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    margin: 0;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--s88-app-accent) 58%, white);
    border-radius: 17px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--s88-app-accent) 40%, white),
        var(--s88-app-accent)
    );
    color: #fff !important;
    font-size: 2rem;
    opacity: 1 !important;
}

.s88-ui-launcher-flat .s58-mega-app-icon > :is(i,svg) {
    margin: 0;
    color: inherit !important;
    font-size: inherit;
    line-height: 1;
}

.s88-ui-launcher-flat .s58-mega-app-name {
    width: 100%;
    color: #102450 !important;
    font-family: var(--ui-font-title);
    font-size: clamp(.65rem,.78vw,.80rem);
    font-weight: 800;
    line-height: 1.08;
    text-align: center;
    overflow-wrap: anywhere;
}

.s88-ui-launcher-flat .s58-mega-app:nth-child(8n+1) { --s88-app-accent: #7550d7; }
.s88-ui-launcher-flat .s58-mega-app:nth-child(8n+2) { --s88-app-accent: #12a979; }
.s88-ui-launcher-flat .s58-mega-app:nth-child(8n+3) { --s88-app-accent: #13a7c2; }
.s88-ui-launcher-flat .s58-mega-app:nth-child(8n+4) { --s88-app-accent: #11aa75; }
.s88-ui-launcher-flat .s58-mega-app:nth-child(8n+5) { --s88-app-accent: #eb8d0f; }
.s88-ui-launcher-flat .s58-mega-app:nth-child(8n+6) { --s88-app-accent: #6038cb; }
.s88-ui-launcher-flat .s58-mega-app:nth-child(8n+7) { --s88-app-accent: #1682e0; }
.s88-ui-launcher-flat .s58-mega-app:nth-child(8n)   { --s88-app-accent: #e94267; }

.s88-ui-launcher-flat .s58-mega-app:is(:hover,:focus-visible),
.s88-ui-launcher-flat .s58-mega-app.active,
.s88-ui-launcher-flat .s58-mega-app[aria-current="page"] {
    background: linear-gradient(180deg, #fff8dc, #edca68) !important;
    border-color: #ffe69d !important;
    outline: 2px solid rgba(239,194,79,.72);
    outline-offset: -4px;
}

.s88-ui-launcher-flat .s58-mega-app:is(:hover,:focus-visible) .s58-mega-app-name,
.s88-ui-launcher-flat .s58-mega-app.active .s58-mega-app-name,
.s88-ui-launcher-flat .s58-mega-app[aria-current="page"] .s58-mega-app-name {
    color: #3d2d09 !important;
}

.s88-ui-launcher-flat .s58-mega-empty {
    min-height: 220px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: rgba(245,249,252,.94);
    border: 1px solid rgba(226,181,75,.80);
    border-radius: 20px;
    color: #203952;
    text-align: center;
}

.s88-ui-launcher-flat .s58-mega-empty[hidden] {
    display: none !important;
}

.s88-ui-launcher-flat .s58-mega-footer {
    min-height: 58px;
    padding: 8px 4px 0;
    display: grid !important;
    grid-template-columns: minmax(250px,.8fr) minmax(0,1.8fr);
    align-items: center;
    gap: 16px;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(226,181,75,.70) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.s88-ui-launcher-flat .s58-mega-footer-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.s88-ui-launcher-flat .s58-mega-footer-copy span {
    color: rgba(255,255,255,.88);
    font-family: var(--ui-font-body);
    font-size: .70rem;
}

.s88-ui-launcher-flat .s58-mega-footer-copy small {
    color: rgba(255,255,255,.58);
    font-size: .54rem;
}

.s88-ui-launcher-flat .s58-mega-special {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    flex-wrap: wrap;
}

.s88-ui-launcher-flat .s58-mega-special strong {
    margin-right: 10px;
    color: var(--s88-launcher-gold-light);
    font-family: var(--ui-font-title);
    font-size: .66rem;
    letter-spacing: .05em;
}

.s88-ui-launcher-flat .s58-mega-special a {
    position: relative;
    padding: 3px 10px;
    color: rgba(255,255,255,.80);
    font-family: var(--ui-font-body);
    font-size: .64rem;
    text-decoration: none;
}

.s88-ui-launcher-flat .s58-mega-special a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: rgba(255,255,255,.48);
}

.s88-ui-launcher-flat .s58-mega-special a:is(:hover,:focus-visible) {
    color: #fff3b1;
    text-decoration: none;
}

/* 1600–1919 */
@media (max-width: 1919px) {
    .s88-ui-launcher-flat .s58-mega-flat-grid {
        grid-template-columns: repeat(var(--s58-grid-cols, 4), minmax(0, var(--s58-launcher-tile-width)));
    }
}

/* Full desktop / tablet landscape */
@media (max-width: 1599px) {
    .s88-ui-launcher-flat .s58-mega-flat-grid {
        --s58-launcher-tile-width: 178px;
    }

    .s88-ui-launcher-flat {
        padding-inline: clamp(10px,2vw,30px) !important;
    }

    .s88-ui-launcher-flat .s58-mega-header {
        min-height: 88px;
        grid-template-columns: minmax(230px,.90fr) minmax(300px,1fr) minmax(350px,1fr);
        gap: 12px;
    }

    .s88-ui-launcher-flat .s58-mega-brand-logo {
        height: clamp(54px,4.5vw,70px);
    }

    .s88-ui-launcher-flat .s58-mega-account {
        grid-template-columns: 46px minmax(92px,auto) 1px minmax(102px,auto) 50px 32px;
        gap: 8px;
    }

    .s88-ui-launcher-flat .s88-mega-owner-crown {
        width: 46px;
        height: 46px;
        font-size: 1.48rem;
    }

    .s88-ui-launcher-flat .s58-mega-avatar {
        width: 50px;
        min-width: 50px;
        height: 50px;
    }

    .s88-ui-launcher-flat .s58-mega-flat-grid {
        grid-template-columns: repeat(var(--s58-grid-cols, 4), minmax(0, var(--s58-launcher-tile-width)));
    }

    .s88-ui-launcher-flat .s58-mega-app {
        min-height: 104px;
    }
}

@media (max-width: 1279px) {
    .s88-ui-launcher-flat .s58-mega-flat-grid {
        --s58-launcher-tile-width: 164px;
    }

    .s88-ui-launcher-flat .s58-mega-header {
        grid-template-columns: minmax(175px,.8fr) minmax(230px,1fr) auto;
        min-height: 78px;
        padding: 7px 8px 9px;
    }

    .s88-ui-launcher-flat .s58-mega-account {
        grid-template-columns: 42px minmax(78px,auto) 44px 30px;
        gap: 6px;
    }

    .s88-ui-launcher-flat .s58-mega-account-divider,
    .s88-ui-launcher-flat .s88-mega-noid-copy {
        display: none;
    }

    .s88-ui-launcher-flat .s88-mega-owner-crown {
        width: 42px;
        height: 42px;
        font-size: 1.30rem;
    }

    .s88-ui-launcher-flat .s58-mega-avatar {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .s88-ui-launcher-flat .s58-mega-flat-grid {
        grid-template-columns: repeat(var(--s58-grid-cols, 4), minmax(0, var(--s58-launcher-tile-width)));
    }

    .s88-ui-launcher-flat .s58-mega-footer {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .s88-ui-launcher-flat .s58-mega-special {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .s88-ui-launcher-flat .s58-mega-flat-grid {
        --s58-launcher-tile-width: 138px;
    }

    .s88-ui-launcher-flat {
        padding: 6px !important;
        gap: 7px !important;
    }

    .s88-ui-launcher-flat .s58-mega-header {
        position: sticky;
        grid-template-columns: minmax(90px,.65fr) minmax(0,1fr) auto;
        min-height: 66px;
        padding: 6px;
        gap: 6px;
    }

    .s88-ui-launcher-flat .s58-mega-brand-logo {
        height: 40px;
        max-width: 28vw;
    }

    .s88-ui-launcher-flat .s58-mega-search {
        min-height: 40px;
        padding-inline: 8px;
        gap: 6px;
        border-radius: 13px;
    }

    .s88-ui-launcher-flat .s58-mega-search kbd {
        display: none;
    }

    .s88-ui-launcher-flat .s58-mega-account {
        grid-template-columns: 34px 34px 28px;
        gap: 4px;
    }

    .s88-ui-launcher-flat .s88-mega-access-copy {
        display: none;
    }

    .s88-ui-launcher-flat .s88-mega-owner-crown {
        width: 34px;
        height: 34px;
        font-size: 1.06rem;
        border-radius: 11px;
    }

    .s88-ui-launcher-flat .s58-mega-avatar {
        width: 34px;
        min-width: 34px;
        height: 34px;
    }

    .s88-ui-launcher-flat .s58-mega-close {
        width: 28px;
        min-width: 28px;
        height: 28px;
        border-radius: 9px;
    }

    .s88-ui-launcher-flat .s58-mega-flat-shell {
        padding: 8px;
        border-radius: 16px;
    }

    .s88-ui-launcher-flat .s58-mega-flat-grid {
        grid-template-columns: repeat(var(--s58-grid-cols, 4), minmax(0, var(--s58-launcher-tile-width)));
        gap: 6px;
    }

    .s88-ui-launcher-flat .s58-mega-app {
        min-height: 86px;
        padding: 6px 3px;
        gap: 4px;
        border-radius: 13px !important;
    }

    .s88-ui-launcher-flat .s58-mega-app-icon {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        border-radius: 13px;
        font-size: 1.55rem;
    }

    .s88-ui-launcher-flat .s58-mega-app-name {
        font-size: .55rem;
    }

    .s88-ui-launcher-flat .s58-mega-footer {
        min-height: 0;
        padding-top: 6px;
    }

    .s88-ui-launcher-flat .s58-mega-footer-copy small {
        display: none;
    }

    .s88-ui-launcher-flat .s58-mega-special {
        gap: 2px;
    }

    .s88-ui-launcher-flat .s58-mega-special strong {
        width: 100%;
        margin: 0 0 2px;
    }

    .s88-ui-launcher-flat .s58-mega-special a {
        padding: 3px 7px;
        font-size: .58rem;
    }
}

@media (max-width: 480px) {
    .s88-ui-launcher-flat .s58-mega-flat-grid {
        --s58-launcher-tile-width: 132px;
        grid-template-columns: repeat(var(--s58-grid-cols, 4), minmax(0, var(--s58-launcher-tile-width)));
    }

    .s88-ui-launcher-flat .s58-mega-search input {
        font-size: .66rem;
    }

    .s88-ui-launcher-flat .s58-mega-special a + a::before {
        display: none;
    }
}
/* ==========================================================================
   103A. BOOTSTRAP-LIKE MODAL LAUNCHER — patch09
   Outer #s58-sidenav = transparent backdrop.
   Inner .s58-mega-launcher = centered dialog.
   Halaman aktif tetap terlihat di belakang launcher.
   ========================================================================== */

/* Backdrop modal: jangan lagi menaruh background fintech pada seluruh viewport. */
html[data-sidenav-size="offcanvas"] #s58-sidenav,
html[data-sidenav-size="offcanvas"] .sidenav-menu.s58-mega-menu {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(12px, 2.4vw, 28px) !important;

    align-items: center !important;
    justify-content: center !important;

    background: rgba(3, 13, 29, .46) !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: auto !important;
}

/* Hanya saat launcher dibuka, wrapper menjadi flex seperti .modal.show. */
html[data-sidenav-size="offcanvas"].sidebar-enable #s58-sidenav,
html[data-sidenav-size="offcanvas"].sidebar-enable .sidenav-menu.s58-mega-menu {
    display: flex !important;
}

/* Dialog launcher: compact, center, background fintech ada DI PANEL. */
html[data-sidenav-size="offcanvas"] #s58-sidenav .s58-mega-launcher.s88-ui-launcher-flat,
html[data-sidenav-size="offcanvas"] .sidenav-menu.s58-mega-menu .s58-mega-launcher.s88-ui-launcher-flat {
    --s58-launcher-tile-width: 190px;
    --s58-launcher-gap: 10px;

    position: relative !important;
    inset: auto !important;

    width: min(
        94vw,
        calc(
            (var(--s58-launcher-cols, 4) * var(--s58-launcher-tile-width))
            + ((var(--s58-launcher-cols, 4) - 1) * var(--s58-launcher-gap))
            + 48px
        )
    ) !important;
    min-width: min(94vw, 680px);
    max-width: 920px !important;
    min-height: 0 !important;
    max-height: min(92dvh, 900px) !important;

    margin: auto !important;
    padding: 12px !important;
    overflow: auto !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;

    background:
        linear-gradient(180deg, rgba(3, 25, 51, .78), rgba(4, 43, 74, .72)),
        url("img/s88_ui_launcher_fintech.webp") center center / cover no-repeat !important;
    border: 1px solid rgba(227, 181, 75, .82) !important;
    border-radius: 24px !important;
    box-shadow: none !important;
    color: #fff !important;
}

/* Header menjadi bagian dari dialog, bukan sticky full-page. */
.s88-ui-launcher-flat .s58-mega-header {
    position: relative !important;
    top: auto !important;
    min-height: 82px !important;
    padding: 8px 10px !important;
    grid-template-columns: minmax(150px, .72fr) minmax(210px, 1fr) auto !important;
    gap: 10px !important;
    border-radius: 18px !important;
}

/* Home icon upper-right is a real link. */
.s88-ui-launcher-flat a.s88-mega-owner-crown {
    text-decoration: none !important;
    cursor: pointer;
}

/* Content/shell compact; tidak membuat halaman putih penuh. */
.s88-ui-launcher-flat .s58-mega-content {
    min-height: 0 !important;
    overflow: visible !important;
}

.s88-ui-launcher-flat .s58-mega-flat-shell {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-inline: auto !important;
    padding: 12px !important;
    overflow: visible !important;

    border: 1px solid rgba(214, 172, 72, .58) !important;
    border-radius: 20px !important;
    background: rgba(247, 250, 255, .91) !important;
}

.s88-ui-launcher-flat .s58-mega-flat-grid {
    --s58-launcher-tile-width: 190px;
    width: max-content !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    grid-template-columns: repeat(
        var(--s58-grid-cols, 4),
        minmax(0, var(--s58-launcher-tile-width))
    ) !important;
    grid-auto-flow: row !important;
    justify-content: center !important;
    gap: var(--s58-launcher-gap, 10px) !important;
}

/* Footer tetap berada di dalam dialog. */
.s88-ui-launcher-flat .s58-mega-footer {
    border-radius: 16px;
    background: rgba(3, 25, 51, .74);
}

/* Responsive dialog — bottom/front nav tidak disentuh. */
@media (max-width: 1100px) {
    html[data-sidenav-size="offcanvas"] #s58-sidenav .s58-mega-launcher.s88-ui-launcher-flat,
    html[data-sidenav-size="offcanvas"] .sidenav-menu.s58-mega-menu .s58-mega-launcher.s88-ui-launcher-flat {
        --s58-launcher-tile-width: 165px;
        min-width: min(94vw, 560px);
    }

    .s88-ui-launcher-flat .s58-mega-header {
        grid-template-columns: minmax(130px, .65fr) minmax(190px, 1fr) auto !important;
    }

    .s88-ui-launcher-flat .s58-mega-account-copy,
    .s88-ui-launcher-flat .s58-mega-account-divider {
        display: none !important;
    }

    .s88-ui-launcher-flat .s58-mega-account {
        grid-template-columns: 48px 52px 34px !important;
    }
}

@media (max-width: 767px) {
    html[data-sidenav-size="offcanvas"] #s58-sidenav,
    html[data-sidenav-size="offcanvas"] .sidenav-menu.s58-mega-menu {
        padding: 10px !important;
        align-items: center !important;
    }

    html[data-sidenav-size="offcanvas"] #s58-sidenav .s58-mega-launcher.s88-ui-launcher-flat,
    html[data-sidenav-size="offcanvas"] .sidenav-menu.s58-mega-menu .s58-mega-launcher.s88-ui-launcher-flat {
        --s58-launcher-tile-width: 138px;
        width: min(96vw, 640px) !important;
        min-width: 0 !important;
        max-height: 94dvh !important;
        padding: 9px !important;
        border-radius: 18px !important;
    }

    .s88-ui-launcher-flat .s58-mega-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        min-height: 0 !important;
    }

    .s88-ui-launcher-flat .s58-mega-search {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .s88-ui-launcher-flat .s58-mega-account {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 420px) {
    html[data-sidenav-size="offcanvas"] #s58-sidenav .s58-mega-launcher.s88-ui-launcher-flat,
    html[data-sidenav-size="offcanvas"] .sidenav-menu.s58-mega-menu .s58-mega-launcher.s88-ui-launcher-flat {
        --s58-launcher-tile-width: min(78vw, 250px);
        width: 96vw !important;
    }

    .s88-ui-launcher-flat .s58-mega-brand-logo {
        max-width: 48vw !important;
    }
}
/* === END BOOTSTRAP-LIKE MODAL LAUNCHER patch09 === */
/* === END S88_UI FLAT A-Z LAUNCHER v64.18102026.patch === */

/* ==========================================================================
   104. BTN-WIDE — RESPONSIVE FULL-BLOCK CONTROL GROUP
   BETA v64.18102026.patch04

   Kontrak:
   - .btn-wide pada .btn / .nav-link = control panjang/full block.
   - 1 control = memenuhi 1 baris penuh.
   - 2+ control = dibagi menjadi kolom responsif dan otomatis wrap VERTIKAL.
   - Tidak memakai horizontal-scroll.
   - Group selalu center dan tiap control tetap terpisah oleh gap.
   - .btn-wide + .btn-icon-mobile = wide control ICON-ONLY.
   - Dapat dipakai pada container:
       .s58-portal-tabs.btn-wide
       .nav-tabs.btn-wide
       .nav-pills.btn-wide
       .tabs.btn-wide
       .btn-group.btn-wide
   ========================================================================== */

:root {
    --s58-btn-wide-gap: 8px;
    --s58-btn-wide-min: 220px;
    --s58-btn-wide-height: 64px;
}

/* --------------------------------------------------------------------------
   A. GROUP ENGINE
   Satu item akan membesar 100%.
   Dua atau lebih membagi ruang berdasarkan min track dan wrap ke bawah.
   -------------------------------------------------------------------------- */
:is(#pages, #s58-sidenav, body) :is(
    .s58-portal-tabs,
    .nav-tabs,
    .nav-pills,
    .tabs,
    .btn-group,
    .pod-actions,
    .pod-header-right,
    .widget-actions,
    .d-flex,
    .d-grid
):is(
    .btn-wide,
    :has(> .btn-wide),
    :has(> .nav-item > .btn-wide)
) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, var(--s58-btn-wide-min)), 1fr)
    ) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    justify-content: center !important;
    gap: var(--s58-btn-wide-gap) !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Bootstrap nav umumnya memakai LI sebagai child langsung. */
:is(#pages, #s58-sidenav, body) :is(
    .s58-portal-tabs,
    .nav-tabs,
    .nav-pills,
    .tabs
):is(
    .btn-wide,
    :has(> .nav-item > .btn-wide)
) > .nav-item {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

/* --------------------------------------------------------------------------
   B. WIDE CONTROL
   Selector sengaja memiliki specificity tinggi agar mengalahkan kontrak
   64x64 btn/nav existing saat class .btn-wide dipakai.
   -------------------------------------------------------------------------- */
:is(#pages, #s58-sidenav, body) :is(.btn, .nav-link).btn-wide.btn-wide {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: var(--s58-btn-wide-height) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 9px 14px !important;

    display: flex !important;
    flex: 1 1 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
}

/* Child control pada wide tabs/group ikut memenuhi grid cell. */
:is(#pages, #s58-sidenav, body) :is(
    .s58-portal-tabs,
    .nav-tabs,
    .nav-pills,
    .tabs,
    .btn-group
).btn-wide.btn-wide > :is(.btn, .nav-link),
:is(#pages, #s58-sidenav, body) :is(
    .s58-portal-tabs,
    .nav-tabs,
    .nav-pills,
    .tabs
).btn-wide.btn-wide > .nav-item > .nav-link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: var(--s58-btn-wide-height) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 9px 14px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;
    text-align: center !important;
    white-space: normal !important;
}

/* Bila .btn-wide ditempatkan langsung pada nav-link di dalam LI. */
:is(#pages, #s58-sidenav, body) :is(
    .s58-portal-tabs,
    .nav-tabs,
    .nav-pills,
    .tabs
) > .nav-item > .nav-link.btn-wide.btn-wide {
    width: 100% !important;
}

/* --------------------------------------------------------------------------
   C. ICON + TITLE NORMAL PADA BTN-WIDE
   Tanpa btn-icon-mobile, icon dan title tetap vertikal.
   -------------------------------------------------------------------------- */
:is(#pages, #s58-sidenav, body) :is(.btn, .nav-link).btn-wide.btn-wide
> :is(i, svg, .btn-icon),
:is(#pages, #s58-sidenav, body) :is(
    .s58-portal-tabs,
    .nav-tabs,
    .nav-pills,
    .tabs,
    .btn-group
).btn-wide.btn-wide > :is(.btn, .nav-link) > :is(i, svg, .btn-icon),
:is(#pages, #s58-sidenav, body) :is(
    .s58-portal-tabs,
    .nav-tabs,
    .nav-pills,
    .tabs
).btn-wide.btn-wide > .nav-item > .nav-link > :is(i, svg, .btn-icon) {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
}

/* --------------------------------------------------------------------------
   D. BTN-WIDE + BTN-ICON-MOBILE = ICON ONLY
   Fitur icon-only hanya aktif pada kombinasi ini.
   btn-icon-mobile tanpa btn-wide tetap mengikuti kontrak existing.
   -------------------------------------------------------------------------- */
:is(#pages, #s58-sidenav, body)
:is(.btn, .nav-link).btn-wide.btn-wide.btn-icon-mobile
> :not(i):not(svg):not(.btn-icon),
:is(#pages, #s58-sidenav, body)
:is(
    .s58-portal-tabs,
    .nav-tabs,
    .nav-pills,
    .tabs,
    .btn-group
).btn-wide.btn-wide
:is(.btn, .nav-link).btn-icon-mobile
> :not(i):not(svg):not(.btn-icon) {
    display: none !important;
}

:is(#pages, #s58-sidenav, body)
:is(.btn, .nav-link).btn-wide.btn-wide.btn-icon-mobile,
:is(#pages, #s58-sidenav, body)
:is(
    .s58-portal-tabs,
    .nav-tabs,
    .nav-pills,
    .tabs,
    .btn-group
).btn-wide.btn-wide
:is(.btn, .nav-link).btn-icon-mobile {
    font-size: 0 !important;
    gap: 0 !important;
}

:is(#pages, #s58-sidenav, body)
:is(.btn, .nav-link).btn-wide.btn-wide.btn-icon-mobile
> :is(i, svg, .btn-icon),
:is(#pages, #s58-sidenav, body)
:is(
    .s58-portal-tabs,
    .nav-tabs,
    .nav-pills,
    .tabs,
    .btn-group
).btn-wide.btn-wide
:is(.btn, .nav-link).btn-icon-mobile
> :is(i, svg, .btn-icon) {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    font-size: 1.55rem !important;
    line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   E. RESPONSIVE — wrap vertikal, tidak pernah horizontal-scroll.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
    :root {
        --s58-btn-wide-min: 180px;
        --s58-btn-wide-height: 58px;
        --s58-btn-wide-gap: 7px;
    }
}

@media (max-width: 767px) {
    :root {
        --s58-btn-wide-min: 140px;
        --s58-btn-wide-height: 56px;
        --s58-btn-wide-gap: 6px;
    }
}

/* HP kecil: benar-benar stack vertikal 1 kolom. */
@media (max-width: 480px) {
    :is(#pages, #s58-sidenav, body) :is(
        .s58-portal-tabs,
        .nav-tabs,
        .nav-pills,
        .tabs,
        .btn-group,
        .pod-actions,
        .pod-header-right,
        .widget-actions,
        .d-flex,
        .d-grid
    ):is(
        .btn-wide,
        :has(> .btn-wide),
        :has(> .nav-item > .btn-wide)
    ) {
        grid-template-columns: 1fr !important;
    }
}
/* === END BTN-WIDE v64.18102026.patch04 === */

/* ==========================================================================
   105. S58 BOTTOM / FRONT NAV — BLUE AQUA GOLD CAPSULE
   BETA v64.18102026.patch11
   Struktur tetap:
   [ POWER / LOGOUT ] [ LOGO / BERANDA ] [ BACK / KEMBALI ]
   Palet: navy-blue + aqua/tosca + gold.
   ========================================================================== */

:root {
    --s58-bottom-nav-reserve: 126px;
}

/* Outer capsule */
.s58-bottom-nav.s88-ui-frontnav,
.s88-ui-frontnav.s58-bottom-nav {
    --s58-frontnav-gold: #e9bd55;
    --s58-frontnav-gold-soft: #ffe39a;

    --s58-frontnav-blue-900: #082a45;
    --s58-frontnav-blue-800: #0c3b5e;
    --s58-frontnav-blue-700: #115279;
    --s58-frontnav-blue-600: #16698d;

    --s58-frontnav-aqua: #34c9c3;
    --s58-frontnav-aqua-soft: #8ce4df;
    --s58-frontnav-ice: #d8f2ff;
    --s58-frontnav-silver: #a9cadc;

    --s58-frontnav-red: #ff736f;
    --s58-frontnav-red-soft: #ffd2cf;
    --s58-frontnav-back: #71c8ff;
    --s58-frontnav-back-soft: #ccecff;

    position: fixed !important;
    left: 50% !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 1090 !important;

    width: min(94vw, 860px) !important;
    min-height: 96px !important;
    padding: 6px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;

    transform: translateX(-50%) !important;
    overflow: visible !important;

    border: 2px solid var(--s58-frontnav-silver) !important;
    border-radius: 34px !important;
    background:
        linear-gradient(
            180deg,
            #1c6380 0%,
            #124c6c 24%,
            #0b3c5c 58%,
            #082f4c 100%
        ) !important;

    box-shadow: none !important;
    filter: none !important;
    pointer-events: none !important;
}

/* Shared control */
.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-item,
.s58-bottom-nav.s88-ui-frontnav .s88-ui-frontnav-item {
    position: relative !important;
    width: 100% !important;
    height: 88px !important;
    min-width: 0 !important;
    min-height: 88px !important;
    margin: 0 !important;
    padding: 9px 8px 8px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    border: 0 !important;
    border-radius: 26px !important;
    color: #f7fcff !important;

    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
}

/* Left/right gain their own soft tone while still reading as one capsule. */
.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-logout {
    border-radius: 28px 12px 12px 28px !important;
    background:
        linear-gradient(
            180deg,
            rgba(30, 102, 132, .86) 0%,
            rgba(18, 78, 110, .74) 100%
        ) !important;
}

.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-back {
    border-radius: 12px 28px 28px 12px !important;
    background:
        linear-gradient(
            180deg,
            rgba(30, 112, 148, .86) 0%,
            rgba(17, 72, 112, .76) 100%
        ) !important;
}

/* Soft separator toward center control. */
.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-logout::after,
.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-back::before {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: rgba(216, 242, 255, .28);
    pointer-events: none;
}

.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-logout::after {
    right: 0;
}

.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-back::before {
    left: 0;
}

/* Icon badge */
.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-item > i {
    position: static !important;
    inset: auto !important;

    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;
    opacity: 1 !important;
    transform: none !important;

    font-size: clamp(1.7rem, 3vw, 2.15rem) !important;
    line-height: 1 !important;
}

.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-logout > i {
    color: var(--s58-frontnav-red) !important;
    border: 1px solid rgba(255, 210, 207, .55) !important;
    background: rgba(123, 35, 43, .22) !important;
}

.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-back > i {
    color: var(--s58-frontnav-back) !important;
    border: 1px solid rgba(204, 236, 255, .55) !important;
    background: rgba(31, 111, 167, .22) !important;
}

/* Labels */
.s58-bottom-nav.s88-ui-frontnav .s88-ui-frontnav-copy {
    display: block !important;
    min-width: 0 !important;
    text-align: center !important;
}

.s58-bottom-nav.s88-ui-frontnav .s88-ui-frontnav-copy strong {
    display: block !important;
    color: #f8fdff !important;
    font-family: var(--ui-font-title) !important;
    font-size: clamp(.78rem, 1.65vw, 1.12rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.s58-bottom-nav.s88-ui-frontnav .s88-ui-frontnav-copy small {
    display: none !important;
}

/* Center BERANDA — blue/tosca body + gold frame */
.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-launcher {
    z-index: 2 !important;

    height: 114px !important;
    min-height: 114px !important;
    margin: -16px 0 -5px !important;
    padding: 9px 14px 10px !important;

    border: 3px solid var(--s58-frontnav-gold) !important;
    border-radius: 38px !important;
    background:
        linear-gradient(
            180deg,
            #1d718a 0%,
            #145c78 24%,
            #0e4b67 58%,
            #0a3c58 100%
        ) !important;
    color: #fff !important;

    box-shadow: none !important;
}

/* Inner gold edge + aqua line */
.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-launcher::before {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    top: 6px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(140, 228, 223, .82),
        rgba(255, 227, 154, .9),
        rgba(140, 228, 223, .82),
        transparent
    );
    pointer-events: none;
}

.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-launcher::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(255, 227, 154, .42);
    border-radius: 32px;
    pointer-events: none;
}

.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-logo {
    position: static !important;
    width: min(100%, 176px) !important;
    height: 52px !important;
    min-height: 0 !important;
    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-logo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 176px !important;

    object-fit: contain !important;
    object-position: center !important;

    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-launcher .s88-ui-frontnav-copy strong {
    color: var(--s58-frontnav-gold-soft) !important;
    font-size: clamp(.9rem, 1.9vw, 1.26rem) !important;
    font-weight: 700 !important;
    letter-spacing: .065em !important;
}

/* Open state: slightly brighter, not darker. */
html.sidebar-enable .s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-launcher {
    border-color: var(--s58-frontnav-gold-soft) !important;
    background:
        linear-gradient(
            180deg,
            #23849a 0%,
            #176c83 25%,
            #10566f 60%,
            #0c4560 100%
        ) !important;
}

/* Clear interaction without heavy effects. */
.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-item:is(:hover, :focus-visible) {
    outline: 0 !important;
    filter: brightness(1.08) !important;
}

.s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-item:focus-visible {
    outline: 2px solid rgba(255, 227, 154, .92) !important;
    outline-offset: 2px !important;
}

/* Existing modal behavior */
body.modal-open .s58-bottom-nav.s88-ui-frontnav {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Tablet */
@media (max-width: 1279px) {
    :root {
        --s58-bottom-nav-reserve: 116px;
    }

    .s58-bottom-nav.s88-ui-frontnav {
        width: min(96vw, 720px) !important;
        min-height: 88px !important;
        border-radius: 30px !important;
    }

    .s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-item {
        height: 80px !important;
        min-height: 80px !important;
    }

    .s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-item > i {
        width: 44px !important;
        height: 44px !important;
    }

    .s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-launcher {
        height: 104px !important;
        min-height: 104px !important;
        margin-top: -14px !important;
        border-radius: 34px !important;
    }

    .s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-logo {
        width: min(100%, 150px) !important;
        height: 45px !important;
    }
}

/* Mobile */
@media (max-width: 575px) {
    :root {
        --s58-bottom-nav-reserve: 102px;
    }

    .s58-bottom-nav.s88-ui-frontnav {
        width: calc(100% - 12px) !important;
        min-height: 76px !important;
        padding: 4px !important;
        border-width: 1px !important;
        border-radius: 24px !important;
    }

    .s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-item {
        height: 70px !important;
        min-height: 70px !important;
        padding: 6px 3px !important;
        gap: 3px !important;
    }

    .s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-item > i {
        width: 36px !important;
        height: 36px !important;
        font-size: clamp(1.25rem, 6vw, 1.62rem) !important;
    }

    .s58-bottom-nav.s88-ui-frontnav .s88-ui-frontnav-copy strong {
        font-size: clamp(.54rem, 2.9vw, .7rem) !important;
        letter-spacing: .035em !important;
    }

    .s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-launcher {
        height: 90px !important;
        min-height: 90px !important;
        margin: -12px 0 -4px !important;
        padding: 6px 6px 7px !important;
        border-width: 2px !important;
        border-radius: 28px !important;
    }

    .s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-launcher::after {
        inset: 3px;
        border-radius: 23px;
    }

    .s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-logo {
        width: min(100%, 104px) !important;
        height: 34px !important;
    }

    .s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-launcher .s88-ui-frontnav-copy strong {
        font-size: clamp(.62rem, 3.4vw, .82rem) !important;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .s58-bottom-nav.s88-ui-frontnav {
        width: calc(100% - 8px) !important;
    }

    .s58-bottom-nav.s88-ui-frontnav .s88-ui-frontnav-copy strong {
        font-size: .52rem !important;
    }

    .s58-bottom-nav.s88-ui-frontnav .s58-bottom-nav-logo {
        width: 86px !important;
        height: 30px !important;
    }
}
/* === END S58 FRONTNAV CAPSULE patch11 === */

/* ==========================================================================
   103B. LAUNCHER HEADER COMPACT + TRANSPARENT MENU SHELL — patch12
   [LOGO] [SEARCH + NOID] [AVATAR] [HOME] [CLOSE]
   ========================================================================== */

/* Header: compact and no overlap. */
.s88-ui-launcher-flat .s58-mega-header {
    position: relative !important;
    top: auto !important;

    width: 100% !important;
    min-height: 72px !important;
    padding: 8px 10px !important;

    display: grid !important;
    grid-template-columns:
        minmax(160px, 250px)
        minmax(180px, 320px)
        auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    column-gap: 12px !important;
    row-gap: 8px !important;

    background: linear-gradient(
        90deg,
        rgba(3, 27, 53, .94),
        rgba(7, 54, 87, .90),
        rgba(3, 27, 53, .94)
    ) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(227, 181, 75, .62) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: hidden !important;
}

/* Logo reduced so it no longer competes with search/actions. */
.s88-ui-launcher-flat .s58-mega-brand {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 250px !important;
}

.s88-ui-launcher-flat .s58-mega-brand-logo {
    width: 100% !important;
    height: 54px !important;
    max-width: 240px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

/* Search intentionally smaller. */
.s88-ui-launcher-flat .s58-mega-search {
    width: min(100%, 320px) !important;
    min-width: 0 !important;
    min-height: 42px !important;
    justify-self: center !important;

    padding: 0 9px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;

    background: linear-gradient(
        180deg,
        rgba(113, 151, 187, .84),
        rgba(70, 112, 151, .76)
    ) !important;
    border: 1px solid rgba(231, 241, 250, .42) !important;
    border-radius: 14px !important;
}

.s88-ui-launcher-flat .s58-mega-search > i {
    font-size: 1.12rem !important;
}

.s88-ui-launcher-flat .s58-mega-search input {
    min-width: 0 !important;
    font-size: .78rem !important;
    font-weight: 650 !important;
}

.s88-ui-launcher-flat .s58-mega-search input::placeholder {
    color: rgba(255, 255, 255, .88) !important;
}

/* CTRL+K visual replaced by current login NOID. */
.s88-ui-launcher-flat .s58-mega-search-noid {
    max-width: 108px !important;
    padding: 4px 7px !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    color: #19304a !important;
    background: rgba(247, 251, 255, .92) !important;
    border: 1px solid rgba(255, 255, 255, .44) !important;
    border-radius: 9px !important;

    font-family: var(--ui-font-number) !important;
    font-size: .66rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .025em !important;
}

/* Right-side actions only: Profile -> Home -> Close. */
.s88-ui-launcher-flat .s58-mega-account {
    min-width: 0 !important;
    width: max-content !important;
    justify-self: end !important;

    display: grid !important;
    grid-template-columns: 46px 38px 38px !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 7px !important;
}

.s88-ui-launcher-flat .s58-mega-avatar {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;

    display: block !important;
    overflow: hidden !important;

    border: 2px solid rgba(239, 205, 120, .92) !important;
    border-radius: 50% !important;
    background: #fff !important;
}

.s88-ui-launcher-flat .s58-mega-avatar img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Home and close use the same visual geometry. */
.s88-ui-launcher-flat .s58-mega-home,
.s88-ui-launcher-flat .s58-mega-close {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(255, 224, 145, .72) !important;
    border-radius: 11px !important;
    background: rgba(5, 48, 80, .88) !important;
    color: #fff4bb !important;

    text-decoration: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.s88-ui-launcher-flat .s58-mega-home > i,
.s88-ui-launcher-flat .s58-mega-close > i {
    position: static !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    font-size: 1.18rem !important;
    line-height: 1 !important;
}

.s88-ui-launcher-flat .s58-mega-home:is(:hover, :focus-visible),
.s88-ui-launcher-flat .s58-mega-close:is(:hover, :focus-visible),
.s88-ui-launcher-flat .s58-mega-avatar:is(:hover, :focus-visible) {
    outline: 2px solid rgba(255, 226, 147, .74) !important;
    outline-offset: 2px !important;
}

/* Remove obsolete header copies if a stale fragment exists in custom markup. */
.s88-ui-launcher-flat .s58-mega-account-copy,
.s88-ui-launcher-flat .s58-mega-account-divider,
.s88-ui-launcher-flat .s88-mega-owner-crown {
    display: none !important;
}

/* Menu container: transparent and borderless as requested. */
.s88-ui-launcher-flat .s58-mega-content {
    background: transparent !important;
}

.s88-ui-launcher-flat .s58-mega-flat-shell {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin-inline: auto !important;
    padding: 4px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: visible !important;
}

/* Keep individual menu tiles readable; only their parent shell becomes transparent. */
.s88-ui-launcher-flat .s58-mega-flat-grid {
    background: transparent !important;
    border: 0 !important;
}

/* Tablet */
@media (max-width: 900px) {
    .s88-ui-launcher-flat .s58-mega-header {
        grid-template-columns:
            minmax(130px, 210px)
            minmax(160px, 1fr)
            auto !important;
        column-gap: 8px !important;
    }

    .s88-ui-launcher-flat .s58-mega-brand-logo {
        height: 46px !important;
        max-width: 200px !important;
    }

    .s88-ui-launcher-flat .s58-mega-search {
        width: min(100%, 280px) !important;
    }

    .s88-ui-launcher-flat .s58-mega-account {
        grid-template-columns: 40px 34px 34px !important;
        gap: 5px !important;
    }

    .s88-ui-launcher-flat .s58-mega-avatar {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
    }

    .s88-ui-launcher-flat .s58-mega-home,
    .s88-ui-launcher-flat .s58-mega-close {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }
}

/* Mobile: brand/actions row, search beneath. */
@media (max-width: 640px) {
    .s88-ui-launcher-flat .s58-mega-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        min-height: 0 !important;
        padding: 7px 8px !important;
    }

    .s88-ui-launcher-flat .s58-mega-brand {
        grid-column: 1 !important;
        grid-row: 1 !important;
        max-width: 180px !important;
    }

    .s88-ui-launcher-flat .s58-mega-brand-logo {
        height: 40px !important;
        max-width: 170px !important;
    }

    .s88-ui-launcher-flat .s58-mega-account {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .s88-ui-launcher-flat .s58-mega-search {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: min(100%, 360px) !important;
        justify-self: center !important;
        min-height: 38px !important;
    }
}

/* Very small screen */
@media (max-width: 390px) {
    .s88-ui-launcher-flat .s58-mega-brand {
        max-width: 135px !important;
    }

    .s88-ui-launcher-flat .s58-mega-brand-logo {
        max-width: 130px !important;
    }

    .s88-ui-launcher-flat .s58-mega-account {
        grid-template-columns: 34px 30px 30px !important;
        gap: 4px !important;
    }

    .s88-ui-launcher-flat .s58-mega-avatar {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    .s88-ui-launcher-flat .s58-mega-home,
    .s88-ui-launcher-flat .s58-mega-close {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
    }

    .s88-ui-launcher-flat .s58-mega-search-noid {
        max-width: 86px !important;
        font-size: .60rem !important;
    }
}
/* === END LAUNCHER HEADER COMPACT patch12 === */

/* ==========================================================================
   103C. LAUNCHER FOOTER SAFE AREA — patch13
   Mencegah footer MENU KHUSUS tertutup s58-bottom-nav/s88-ui-frontnav.
   Bottom/front nav tetap tampil dan desainnya tidak diubah.
   ========================================================================== */

/*
 * Backdrop menyediakan safe-area bawah sebesar tinggi frontnav.
 * Karena launcher adalah flex modal di tengah, tambahan padding-bottom
 * otomatis menggeser dialog sedikit ke atas tanpa memindahkannya ke pojok.
 */
html[data-sidenav-size="offcanvas"] #s58-sidenav,
html[data-sidenav-size="offcanvas"] .sidenav-menu.s58-mega-menu {
    padding-top: clamp(10px, 2vw, 24px) !important;
    padding-right: clamp(10px, 2vw, 24px) !important;
    padding-left: clamp(10px, 2vw, 24px) !important;
    padding-bottom: calc(
        var(--s58-bottom-nav-reserve, 126px)
        + max(14px, env(safe-area-inset-bottom))
    ) !important;
}

/*
 * Dialog tidak boleh lebih tinggi dari ruang yang tersisa di atas bottom nav.
 * Jika isi menu banyak, hanya isi launcher yang scroll; footer tidak pernah
 * berada di belakang bottom/front navigation.
 */
html[data-sidenav-size="offcanvas"] #s58-sidenav .s58-mega-launcher.s88-ui-launcher-flat,
html[data-sidenav-size="offcanvas"] .sidenav-menu.s58-mega-menu .s58-mega-launcher.s88-ui-launcher-flat {
    max-height: min(
        900px,
        calc(
            100dvh
            - var(--s58-bottom-nav-reserve, 126px)
            - max(36px, env(safe-area-inset-bottom))
        )
    ) !important;
    overscroll-behavior: contain;
}

/* Footer berada di layer internal paling atas bila dialog perlu scroll. */
.s88-ui-launcher-flat .s58-mega-footer {
    position: relative !important;
    z-index: 4 !important;
    flex: 0 0 auto !important;
    margin-top: auto !important;
}

/* Grid/menu boleh menjadi area yang menyusut/scroll sebelum footer. */
.s88-ui-launcher-flat .s58-mega-content {
    min-height: 0 !important;
    flex: 1 1 auto !important;
}

/* Tablet */
@media (max-width: 1279px) {
    html[data-sidenav-size="offcanvas"] #s58-sidenav,
    html[data-sidenav-size="offcanvas"] .sidenav-menu.s58-mega-menu {
        padding-bottom: calc(
            var(--s58-bottom-nav-reserve, 116px)
            + max(12px, env(safe-area-inset-bottom))
        ) !important;
    }

    html[data-sidenav-size="offcanvas"] #s58-sidenav .s58-mega-launcher.s88-ui-launcher-flat,
    html[data-sidenav-size="offcanvas"] .sidenav-menu.s58-mega-menu .s58-mega-launcher.s88-ui-launcher-flat {
        max-height: calc(
            100dvh
            - var(--s58-bottom-nav-reserve, 116px)
            - max(30px, env(safe-area-inset-bottom))
        ) !important;
    }
}

/* Mobile */
@media (max-width: 575px) {
    html[data-sidenav-size="offcanvas"] #s58-sidenav,
    html[data-sidenav-size="offcanvas"] .sidenav-menu.s58-mega-menu {
        padding-top: 8px !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
        padding-bottom: calc(
            var(--s58-bottom-nav-reserve, 102px)
            + max(10px, env(safe-area-inset-bottom))
        ) !important;
    }

    html[data-sidenav-size="offcanvas"] #s58-sidenav .s58-mega-launcher.s88-ui-launcher-flat,
    html[data-sidenav-size="offcanvas"] .sidenav-menu.s58-mega-menu .s58-mega-launcher.s88-ui-launcher-flat {
        max-height: calc(
            100dvh
            - var(--s58-bottom-nav-reserve, 102px)
            - max(24px, env(safe-area-inset-bottom))
        ) !important;
    }
}
/* === END LAUNCHER FOOTER SAFE AREA patch13 === */

/* ==========================================================================
   103D. HIDE FRONTNAV WHILE MEGA LAUNCHER OPEN — patch14
   Saat mega launcher terbuka:
   - Logout / Beranda / Kembali disembunyikan.
   - Reserve ruang bottom-nav dinonaktifkan.
   - Footer MENU KHUSUS kembali menjadi footer normal setelah grid.
   ========================================================================== */

/* Mega launcher open state menggunakan html.sidebar-enable. */
html.sidebar-enable .s58-bottom-nav.s88-ui-frontnav,
html.sidebar-enable .s88-ui-frontnav.s58-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/*
 * Karena frontnav tidak tampil selama mega launcher terbuka,
 * tidak perlu lagi safe-area sebesar bottom nav dari patch13.
 */
html[data-sidenav-size="offcanvas"].sidebar-enable #s58-sidenav,
html[data-sidenav-size="offcanvas"].sidebar-enable .sidenav-menu.s58-mega-menu {
    padding-top: clamp(10px, 2vw, 24px) !important;
    padding-right: clamp(10px, 2vw, 24px) !important;
    padding-bottom: clamp(10px, 2vw, 24px) !important;
    padding-left: clamp(10px, 2vw, 24px) !important;
}

/* Dialog kembali memakai tinggi modal normal karena bottom nav sudah hidden. */
html[data-sidenav-size="offcanvas"].sidebar-enable #s58-sidenav .s58-mega-launcher.s88-ui-launcher-flat,
html[data-sidenav-size="offcanvas"].sidebar-enable .sidenav-menu.s58-mega-menu .s58-mega-launcher.s88-ui-launcher-flat {
    max-height: min(92dvh, 900px) !important;
}

/*
 * Struktur internal dipastikan:
 * HEADER -> CONTENT/GRID -> FOOTER.
 * Footer bukan overlay/sticky/fixed.
 */
.s88-ui-launcher-flat .s58-mega-launcher {
    display: flex !important;
    flex-direction: column !important;
}

.s88-ui-launcher-flat .s58-mega-header {
    flex: 0 0 auto !important;
}

.s88-ui-launcher-flat .s58-mega-content {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.s88-ui-launcher-flat .s58-mega-flat-shell,
.s88-ui-launcher-flat .s58-mega-flat-grid {
    position: relative !important;
}

.s88-ui-launcher-flat .s58-mega-footer {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 8px 0 0 !important;

    z-index: auto !important;
    transform: none !important;
}

/* Mobile tetap sama: frontnav hidden hanya selama mega launcher open. */
@media (max-width: 575px) {
    html[data-sidenav-size="offcanvas"].sidebar-enable #s58-sidenav,
    html[data-sidenav-size="offcanvas"].sidebar-enable .sidenav-menu.s58-mega-menu {
        padding: 8px !important;
    }

    html[data-sidenav-size="offcanvas"].sidebar-enable #s58-sidenav .s58-mega-launcher.s88-ui-launcher-flat,
    html[data-sidenav-size="offcanvas"].sidebar-enable .sidenav-menu.s58-mega-menu .s58-mega-launcher.s88-ui-launcher-flat {
        max-height: 96dvh !important;
    }
}
/* === END HIDE FRONTNAV WHILE LAUNCHER OPEN patch14 === */

/* ==========================================================================
   106. STOPIN E-COMMERCE + MASTER PRODUK
   BETA v65.18102026
   ========================================================================== */

/* --------------------------------------------------------------------------
   STO PIN / TOKO PRODUK
   -------------------------------------------------------------------------- */
#stoPINPage.s58-shop-page {
    --sto-shop-border: rgba(224, 177, 63, .72);
    --sto-shop-navy: #0a3556;
    --sto-shop-blue: #126b90;
    --sto-shop-aqua: #33bdb8;
    --sto-shop-surface: rgba(248, 252, 255, .96);
    max-width: 1600px;
    margin-inline: auto;
}

#stoPINPage .sto-shop-shell {
    overflow: visible;
}

#stoPINPage .sto-shop-hero {
    min-height: 84px;
}

#stoPINPage .sto-shop-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

#stoPINPage .sto-shop-step {
    min-width: 0;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(16, 96, 132, .18);
    border-radius: 14px;
    background: rgba(245, 250, 253, .92);
}

#stoPINPage .sto-shop-step > span {
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dcebf3;
    color: #0c4365;
    font-weight: 800;
}

#stoPINPage .sto-shop-step.is-active > span {
    background: linear-gradient(180deg, #22a9c3, #0d698e);
    color: #fff;
}

#stoPINPage .sto-shop-step strong,
#stoPINPage .sto-shop-step small {
    display: block;
}

#stoPINPage .sto-shop-step small {
    margin-top: 1px;
    color: #647789;
    font-size: .72rem;
}

#stoPINPage .sto-shop-buyer {
    margin-bottom: 8px;
}

#stoPINPage .sto-shop-buyer-empty,
#stoPINPage .sto-shop-empty {
    margin-top: 10px;
    min-height: 110px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    border: 1px dashed rgba(26, 98, 132, .28);
    border-radius: 14px;
    background: rgba(244, 249, 252, .72);
    color: #607689;
}

#stoPINPage .sto-shop-buyer-empty > i,
#stoPINPage .sto-shop-empty > i {
    font-size: 1.8rem;
    color: #1e7599;
}

#stoPINPage .sto-shop-buyer-card {
    margin-top: 10px;
    display: grid;
    grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr);
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(23, 105, 142, .18);
    border-radius: 15px;
    background: rgba(246, 251, 254, .92);
}

#stoPINPage .sto-shop-buyer-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

#stoPINPage .sto-shop-buyer-avatar {
    width: 54px;
    min-width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(180deg, #4ed0bc, #17a47f);
    color: #fff;
    font-size: 1.65rem;
}

#stoPINPage .sto-shop-buyer-main small,
#stoPINPage .sto-shop-buyer-main strong,
#stoPINPage .sto-shop-buyer-main span {
    display: block;
}

#stoPINPage .sto-shop-buyer-main strong {
    color: #102f4b;
    font-size: 1rem;
}

#stoPINPage .sto-shop-buyer-main small,
#stoPINPage .sto-shop-buyer-main span {
    color: #667b8c;
    font-size: .75rem;
}

#stoPINPage .sto-shop-buyer-data {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

#stoPINPage .sto-shop-buyer-data > div {
    min-width: 0;
    padding: 7px 8px;
    border-radius: 10px;
    background: rgba(226, 239, 247, .68);
}

#stoPINPage .sto-shop-buyer-data .is-wide {
    grid-column: 1 / -1;
}

#stoPINPage .sto-shop-buyer-data small,
#stoPINPage .sto-shop-buyer-data strong {
    display: block;
    min-width: 0;
}

#stoPINPage .sto-shop-buyer-data small {
    color: #728394;
    font-size: .68rem;
}

#stoPINPage .sto-shop-buyer-data strong {
    margin-top: 2px;
    color: #153852;
    font-size: .78rem;
    overflow-wrap: anywhere;
}

#stoPINPage .sto-shop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
    gap: 10px;
}

#stoPINPage .sto-shop-cart {
    position: sticky;
    top: 10px;
}

#stoPINPage .sto-shop-product {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--sto-shop-border);
    border-radius: 17px;
    background: var(--sto-shop-surface);
}

#stoPINPage .sto-product-media {
    position: relative;
    aspect-ratio: 4 / 3;
    min-height: 150px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(220, 239, 247, .9), rgba(247, 252, 255, .96));
    border-bottom: 1px solid rgba(221, 177, 65, .48);
}

#stoPINPage .sto-product-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    padding: 8px;
}

#stoPINPage .sto-product-stock {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(8, 58, 88, .88);
    color: #fff;
    font-size: .68rem;
    font-weight: 750;
}

#stoPINPage .sto-product-body {
    flex: 1 1 auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#stoPINPage .sto-product-code {
    color: #188392;
    font-family: var(--ui-font-number);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .055em;
}

#stoPINPage .sto-product-body h5 {
    margin: 0;
    color: #0b3151;
    font-size: .96rem;
    line-height: 1.2;
}

#stoPINPage .sto-product-body p {
    margin: 0;
    color: #6b7c8d;
    font-size: .73rem;
    line-height: 1.35;
}

#stoPINPage .sto-product-info {
    margin-top: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

#stoPINPage .sto-product-info > div {
    padding: 7px 8px;
    border-radius: 10px;
    background: rgba(225, 239, 247, .68);
}

#stoPINPage .sto-product-info small,
#stoPINPage .sto-product-info strong {
    display: block;
}

#stoPINPage .sto-product-info small {
    color: #748697;
    font-size: .64rem;
}

#stoPINPage .sto-product-info strong {
    margin-top: 1px;
    color: #0d3c5c;
    font-size: .82rem;
}

#stoPINPage .sto-product-buy {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: stretch;
    gap: 6px;
}

#stoPINPage .sto-product-buy .btn {
    min-width: 44px;
    min-height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#stoPINPage .sto-product-buy .sto-qty {
    min-height: 42px;
    font-weight: 800;
    color: #0c3f61;
}

#stoPINPage .sto-shop-cart-empty {
    padding: 22px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    color: rgba(255, 255, 255, .72);
}

#stoPINPage .sto-shop-cart-empty > i {
    font-size: 1.8rem;
}

#stoPINPage .sto-shop-cart-row {
    padding: 8px 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

#stoPINPage .sto-shop-cart-thumb {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 9px;
    background: #fff;
}

#stoPINPage .sto-shop-cart-row-info {
    min-width: 0;
}

#stoPINPage .sto-shop-cart-row-info strong,
#stoPINPage .sto-shop-cart-row-info small {
    display: block;
}

#stoPINPage .sto-shop-cart-row-info strong {
    color: #fff;
    font-size: .76rem;
}

#stoPINPage .sto-shop-cart-row-info small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .68);
    font-size: .64rem;
}

#stoPINPage .sto-shop-cart-row-total {
    color: #ffe19a;
    font-size: .72rem;
    white-space: nowrap;
}

#stoPINPage .sto-shop-cart-summary {
    margin: 8px 0;
    padding: 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
}

#stoPINPage .sto-shop-cart-summary > div {
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: rgba(255, 255, 255, .76);
    font-size: .76rem;
}

#stoPINPage .sto-shop-cart-summary .is-total {
    margin-top: 5px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
}

#stoPINPage .sto-shop-cart-summary .is-total strong {
    color: #ffe09a;
    font-size: .96rem;
}

/* --------------------------------------------------------------------------
   MASTER PRODUK ACCESS 99
   -------------------------------------------------------------------------- */
#masterProdukPage.s58-master-product-page {
    max-width: 1600px;
    margin-inline: auto;
}

#masterProdukPage .master-product-layout {
    display: grid;
    grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: 10px;
}

#masterProdukPage .master-product-editor {
    position: sticky;
    top: 10px;
}

#masterProdukPage .master-product-photo-editor {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

#masterProdukPage .master-product-photo-preview {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border: 1px solid rgba(221, 177, 65, .7);
    border-radius: 16px;
    background: rgba(229, 241, 248, .78);
}

#masterProdukPage .master-product-photo-preview img {
    width: 100%;
    height: 100%;
    display: block;
    padding: 6px;
    object-fit: contain;
}

#masterProdukPage .master-product-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

#masterProdukPage .master-product-search > i {
    color: #1e7398;
    font-size: 1.25rem;
}

#masterProdukPage .master-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

#masterProdukPage .master-product-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(219, 174, 60, .72);
    border-radius: 15px;
    background: rgba(248, 252, 255, .96);
}

#masterProdukPage .master-product-card.is-inactive {
    opacity: .62;
}

#masterProdukPage .master-product-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(180deg, #e8f3f8, #f8fbfd);
    border-bottom: 1px solid rgba(219, 174, 60, .42);
}

#masterProdukPage .master-product-card-media img {
    width: 100%;
    height: 100%;
    padding: 7px;
    display: block;
    object-fit: contain;
}

#masterProdukPage .master-product-card-media .badge {
    position: absolute;
    top: 7px;
    right: 7px;
}

#masterProdukPage .master-product-card-body {
    padding: 9px;
}

#masterProdukPage .master-product-card-code {
    color: #188292;
    font-family: var(--ui-font-number);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .05em;
}

#masterProdukPage .master-product-card h5 {
    margin: 2px 0 6px;
    color: #0c3150;
    font-size: .9rem;
}

#masterProdukPage .master-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

#masterProdukPage .master-product-meta > span {
    padding: 3px 6px;
    border-radius: 999px;
    background: #e7f1f6;
    color: #506a7d;
    font-size: .62rem;
}

#masterProdukPage .master-product-price {
    display: block;
    margin-top: 7px;
    color: #0e6284;
    font-size: .88rem;
}

#masterProdukPage .master-product-card p {
    margin: 5px 0 0;
    color: #6d7e8d;
    font-size: .68rem;
    line-height: 1.35;
}

#masterProdukPage .master-product-card-actions {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

#masterProdukPage .master-product-card-actions .btn {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    #stoPINPage .sto-shop-layout {
        grid-template-columns: 1fr;
    }

    #stoPINPage .sto-shop-cart {
        position: static;
    }

    #masterProdukPage .master-product-layout {
        grid-template-columns: 1fr;
    }

    #masterProdukPage .master-product-editor {
        position: static;
    }

    #masterProdukPage .master-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    #stoPINPage .sto-shop-steps {
        grid-template-columns: 1fr;
    }

    #stoPINPage .sto-shop-buyer-card {
        grid-template-columns: 1fr;
    }

    #stoPINPage .sto-shop-buyer-data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #masterProdukPage .master-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    #stoPINPage .sto-shop-buyer-data {
        grid-template-columns: 1fr;
    }

    #masterProdukPage .master-product-photo-editor {
        grid-template-columns: 1fr;
    }

    #masterProdukPage .master-product-photo-preview {
        width: 100%;
        height: 180px;
    }

    #masterProdukPage .master-product-grid {
        grid-template-columns: 1fr;
    }
}
/* === END STOPIN E-COMMERCE + MASTER PRODUK v65 === */



/* ========================================================================== 
   107. LIVE CHAT — WHATSAPP INSPIRED
   BETA v66.18102026
   ========================================================================== */
:root {
    --s58-chat-green-dark:#075e54;
    --s58-chat-green:#128c7e;
    --s58-chat-green-bright:#25d366;
    --s58-chat-mint:#dcf8c6;
    --s58-chat-wall:#efeae2;
    --s58-chat-ink:#17252f;
}
.s58-livechat-widget{position:fixed;right:18px;bottom:calc(var(--s58-bottom-nav-reserve,110px) + 18px);z-index:1088;font-family:var(--ui-font-body,Arial,sans-serif)}
body.s58-portal-page .s58-livechat-widget{bottom:22px}
.s58-livechat-fab{width:58px;height:58px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--s58-chat-green-bright);color:#fff;font-size:2rem;position:relative;box-shadow:0 6px 18px rgba(4,66,52,.22)}
.s58-livechat-fab-dot{position:absolute;right:2px;top:2px;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:#9aa5ad}.s58-livechat-fab-dot.is-online{background:#25d366}
.s58-livechat-panel{position:absolute;right:0;bottom:70px;width:min(390px,calc(100vw - 24px));max-height:min(680px,calc(100dvh - 120px));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(7,94,84,.25);border-radius:18px;background:#fff;box-shadow:0 14px 36px rgba(4,42,37,.2)}
.s58-livechat-head{min-height:68px;padding:9px 10px;display:grid;grid-template-columns:44px minmax(0,1fr) 36px 36px;align-items:center;gap:7px;background:linear-gradient(135deg,#075e54,#128c7e);color:#fff}
.s58-livechat-head-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);font-size:1.35rem}.s58-livechat-head-copy{min-width:0}.s58-livechat-head-copy strong,.s58-livechat-head-copy small{display:block}.s58-livechat-head-copy strong{font-size:.92rem}.s58-livechat-head-copy small{margin-top:2px;font-size:.68rem;color:rgba(255,255,255,.78)}
.s58-livechat-head-btn{width:34px;height:34px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);color:#fff;font-size:1.05rem}
.s58-livechat-body{flex:1 1 auto;min-height:0;overflow:auto;background:linear-gradient(rgba(239,234,226,.94),rgba(239,234,226,.94)),radial-gradient(circle at 15% 15%,rgba(18,140,126,.12),transparent 28%)}
.s58-livechat-start{padding:12px;display:grid;gap:9px}.s58-livechat-intro{display:flex;align-items:center;gap:9px;padding:9px;border-radius:12px;background:#e9f7f2;color:#164f48}.s58-livechat-intro>i{font-size:1.5rem}.s58-livechat-intro strong,.s58-livechat-intro span{display:block}.s58-livechat-intro span{font-size:.7rem;color:#5b746f}
.s58-livechat-start label>span{display:block;margin-bottom:3px;color:#405a55;font-size:.7rem;font-weight:750}.s58-livechat-start input,.s58-livechat-start select{width:100%;min-height:40px;border:1px solid #d2ddd9;border-radius:9px;padding:8px 10px;background:#fff;color:#223833;font-size:.8rem}.s58-livechat-start input[readonly]{background:#edf3f1;color:#586a66}
.s58-livechat-primary{min-height:42px;border:0;border-radius:10px;background:var(--s58-chat-green);color:#fff;font-weight:800}.s58-livechat-primary:disabled{opacity:.48}
.s58-livechat-offline{margin:12px;padding:13px;border:1px solid #f1d8a3;border-radius:13px;background:#fff8e7;color:#5f4b25;text-align:center}.s58-livechat-offline>i{font-size:1.7rem;color:#c28b20}.s58-livechat-offline>strong{display:block;margin-top:4px;font-size:.92rem}.s58-livechat-offline p{margin:5px 0 9px;font-size:.72rem;line-height:1.45}.s58-livechat-hours{display:grid;grid-template-columns:1fr 1fr;gap:6px;text-align:left}.s58-livechat-hours>div{padding:7px;border-radius:8px;background:rgba(255,255,255,.72)}.s58-livechat-hours b,.s58-livechat-hours span,.s58-livechat-hours em{display:block;font-size:.65rem}.s58-livechat-hours em{margin:3px 0;color:#b07611;font-style:normal;font-weight:800}
.s58-livechat-chat{min-height:300px;display:flex;flex-direction:column}.s58-livechat-agent-card{margin:8px 9px 0;padding:7px 8px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:7px;border-radius:11px;background:rgba(255,255,255,.78)}.s58-livechat-agent-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#d8f4e9;color:#087568}.s58-livechat-agent-card small,.s58-livechat-agent-card strong,.s58-livechat-agent-card span{display:block}.s58-livechat-agent-card small{font-size:.58rem;color:#71817d}.s58-livechat-agent-card strong{font-size:.78rem;color:#203e38}.s58-livechat-agent-card div>span{font-size:.61rem;color:#687d78}.s58-livechat-online-pill{display:flex!important;align-items:center;gap:4px;color:#347163!important;font-size:.58rem!important}.s58-livechat-online-pill i{width:7px;height:7px;border-radius:50%;background:#25d366}
.s58-livechat-messages{flex:1 1 auto;min-height:250px;max-height:410px;padding:10px;overflow:auto;display:flex;flex-direction:column;gap:6px}.s58-livechat-bubble{display:flex}.s58-livechat-bubble>div{max-width:84%;padding:7px 9px;border-radius:9px;background:#fff;color:#1e2d29;box-shadow:0 1px 2px rgba(0,0,0,.08)}.s58-livechat-bubble strong,.s58-livechat-bubble span,.s58-livechat-bubble small{display:block}.s58-livechat-bubble strong{margin-bottom:2px;font-size:.61rem;color:#3d756b}.s58-livechat-bubble span{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.77rem;line-height:1.38}.s58-livechat-bubble small{text-align:right;margin-top:2px;font-size:.55rem;color:#7d8986}.s58-livechat-bubble.is-member{justify-content:flex-end}.s58-livechat-bubble.is-member>div{background:var(--s58-chat-mint)}.s58-livechat-bubble.is-system{justify-content:center}.s58-livechat-bubble.is-system>div{max-width:94%;padding:5px 8px;background:#fff4c7;text-align:center}.s58-livechat-bubble.is-system strong{display:none}
.s58-livechat-composer{padding:8px;display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:end;gap:7px;background:#f4f6f5;border-top:1px solid #dbe3df}.s58-livechat-composer textarea{min-height:40px;max-height:110px;resize:none;border:1px solid #d7e0dc;border-radius:20px;padding:10px 12px;background:#fff;font-size:.78rem}.s58-livechat-composer button{width:42px;height:42px;border:0;border-radius:50%;background:var(--s58-chat-green);color:#fff;font-size:1.15rem}

/* ADMIN LIVE CHAT */
.s58-adm-livechat-page{max-width:1600px;margin-inline:auto}.s58-adm-livechat{height:min(720px,calc(100dvh - 230px));min-height:520px;display:grid;grid-template-columns:340px minmax(0,1fr);overflow:hidden;background:#f6f7f7;border-radius:0 0 15px 15px}.s58-adm-livechat-sidebar{min-width:0;display:flex;flex-direction:column;background:#fff;border-right:1px solid #d7ddda}.s58-adm-livechat-sidebar-head{padding:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#f0f2f5}.s58-adm-livechat-sidebar-head strong,.s58-adm-livechat-sidebar-head small{display:block}.s58-adm-livechat-sidebar-head strong{color:#263b36}.s58-adm-livechat-sidebar-head small{font-size:.66rem;color:#768581}.s58-adm-livechat-search{margin:7px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px;padding:0 8px;border-radius:9px;background:#f0f2f5}.s58-adm-livechat-search input{border:0!important;background:transparent!important;box-shadow:none!important;font-size:.75rem}.s58-adm-livechat-list{flex:1 1 auto;min-height:0;overflow:auto}.s58-adm-livechat-item{width:100%;padding:9px;border:0;border-bottom:1px solid #edf0ee;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:8px;text-align:left;background:#fff;color:#1d302b}.s58-adm-livechat-item:hover,.s58-adm-livechat-item.active{background:#f0f2f5}.s58-adm-livechat-item-avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#d8f4e9;color:#087568;font-size:1.25rem}.s58-adm-livechat-item-copy{min-width:0}.s58-adm-livechat-item-copy strong,.s58-adm-livechat-item-copy small,.s58-adm-livechat-item-copy em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.s58-adm-livechat-item-copy strong{font-size:.77rem}.s58-adm-livechat-item-copy small{margin-top:2px;color:#73817d;font-size:.67rem}.s58-adm-livechat-item-copy em{margin-top:2px;color:#8d9995;font-size:.56rem;font-style:normal}.s58-adm-livechat-item-meta{text-align:right}.s58-adm-livechat-item-meta time{display:block;font-size:.55rem;color:#86918e}.s58-adm-livechat-item-meta b{display:inline-flex;min-width:18px;height:18px;margin-top:5px;align-items:center;justify-content:center;border-radius:50%;background:#25d366;color:#fff;font-size:.55rem}.s58-adm-livechat-item-meta i{display:block;width:7px;height:7px;margin:5px 0 0 auto;border-radius:50%;background:#b7c0bd}.s58-adm-livechat-item-meta i.is-open{background:#25d366}.s58-adm-livechat-loading{padding:24px;text-align:center;color:#7b8985;font-size:.75rem}
.s58-adm-livechat-room{min-width:0;position:relative;background:linear-gradient(rgba(239,234,226,.95),rgba(239,234,226,.95)),radial-gradient(circle at 20% 10%,rgba(18,140,126,.12),transparent 30%)}.s58-adm-livechat-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#6d7f7a}.s58-adm-livechat-empty>i{font-size:3rem;color:#91aaa4}.s58-adm-livechat-empty strong{font-size:1rem}.s58-adm-livechat-empty span{font-size:.72rem}.s58-adm-livechat-room-inner{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto}.s58-adm-livechat-room-head{min-height:62px;padding:7px 10px;display:grid;grid-template-columns:auto 42px minmax(0,1fr) auto;align-items:center;gap:7px;background:#f0f2f5;border-bottom:1px solid #d8dedb}.s58-adm-livechat-back{display:none;width:34px;height:34px;border:0;border-radius:50%;background:#e2e6e4;color:#42544f}.s58-adm-livechat-room-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#d4f2e7;color:#087568}.s58-adm-livechat-room-copy{min-width:0}.s58-adm-livechat-room-copy strong,.s58-adm-livechat-room-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.s58-adm-livechat-room-copy strong{font-size:.84rem;color:#243833}.s58-adm-livechat-room-copy small{font-size:.62rem;color:#778681}.s58-adm-livechat-messages{min-height:0;padding:13px;overflow:auto;display:flex;flex-direction:column;gap:6px}.s58-adm-chat-bubble{max-width:76%;padding:7px 9px;border-radius:8px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08);align-self:flex-start}.s58-adm-chat-bubble.is-admin{align-self:flex-end;background:#d9fdd3}.s58-adm-chat-bubble.is-system{align-self:center;max-width:90%;background:#fff4c7;text-align:center}.s58-adm-chat-bubble strong,.s58-adm-chat-bubble span,.s58-adm-chat-bubble small{display:block}.s58-adm-chat-bubble strong{font-size:.6rem;color:#387066}.s58-adm-chat-bubble span{font-size:.76rem;white-space:pre-wrap;overflow-wrap:anywhere}.s58-adm-chat-bubble small{margin-top:2px;text-align:right;color:#84918d;font-size:.54rem}.s58-adm-chat-bubble.is-system strong{display:none}.s58-adm-livechat-composer{padding:8px;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:end;gap:7px;background:#f0f2f5}.s58-adm-livechat-composer textarea{min-height:42px;max-height:120px;resize:none;padding:10px 12px;border:1px solid #d5ddda;border-radius:20px;background:#fff;font-size:.78rem}.s58-adm-livechat-composer button{width:44px;height:44px;border:0;border-radius:50%;background:#128c7e;color:#fff;font-size:1.2rem}.s58-adm-livechat-presence{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:#d8f4e9;color:#087568;font-size:.65rem;font-weight:800}.s58-adm-livechat-presence i{width:8px;height:8px;border-radius:50%;background:#25d366}
@media(max-width:767px){.s58-livechat-widget{right:10px;bottom:calc(var(--s58-bottom-nav-reserve,96px) + 10px)}body.s58-portal-page .s58-livechat-widget{bottom:12px}.s58-livechat-panel{right:-2px;width:min(380px,calc(100vw - 16px));max-height:calc(100dvh - 96px)}.s58-livechat-hours{grid-template-columns:1fr}.s58-adm-livechat{height:calc(100dvh - 190px);min-height:500px;grid-template-columns:1fr}.s58-adm-livechat-room{display:none}.s58-adm-livechat.is-room-open .s58-adm-livechat-sidebar{display:none}.s58-adm-livechat.is-room-open .s58-adm-livechat-room{display:block}.s58-adm-livechat-back{display:flex;align-items:center;justify-content:center}}
/* === END LIVE CHAT v66 === */


/* Live Chat tidak menutupi mega launcher atau Bootstrap modal aktif. */
html.sidebar-enable .s58-livechat-widget,
body.modal-open .s58-livechat-widget {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}