/* 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=Cinzel+Decorative:wght@400;700;900&family=Eagle+Lake&family=Inconsolata:wght@200..900&family=Josefin+Slab:ital,wght@0,100..700;1,100..700&family=MedievalSharp&family=Syne+Tactile&display=swap');
/* ==========================================================================
   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 {
    --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(50, 50, 100, 1);
    --ui-text-muted: rgba(80, 80, 80, .90);
    --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;
    --ui-gradient-light: linear-gradient(
        50deg,
        rgba(240, 240, 250, .40) 0%,
        rgba(180, 180, 200, .70) 30%,
        rgba(250, 250, 250, .40) 40%,
        rgba(180, 180, 200, .60) 70%,
        rgba(240, 240, 250, .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%
    );
    --ui-font-caption: "MedievalSharp", cursive;
    --ui-font-label: "Eagle Lake", serif;
    --ui-font-title: "Cinzel Decorative", serif;
    --ui-font-subtitle: "Courier New", Courier, monospace;
    --ui-font-body: "Josefin Slab", serif;
    --ui-font-help: "Syne Tactile", system-ui;
    --ui-font-number: "Inconsolata", monospace;
    --ui-font-desc: var(--ui-font-body);
    --ui-root-font-size: 12px;
}
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: linear-gradient(
        50deg,
        rgba(30, 20, 5, .40) 0%,
        rgba(180, 140, 10, .70) 30%,
        rgba(250, 210, 0, .60) 50%,
        rgba(150, 100, 20, .40) 70%,
        rgba(50, 30, 10, .50) 100%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(190, 150, 40, .70);
}
.bg-oceans {
    --ui-bg-gradient: linear-gradient(
        50deg,
        rgba(10, 10, 200, 0.4) 0%,
        rgba(10, 20, 140, 0.7) 30%,
        rgba(20, 30, 90, 0.6) 50%,
        rgba(110, 170, 250, 0.4) 70%,
        rgba(20, 20, 70, 0.5) 100%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(60, 70, 170, .70);
}
.bg-sages {
    --ui-bg-gradient: 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%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(10, 110, 50, .70);
}
.bg-roses {
    --ui-bg-gradient: 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%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(180, 40, 40, .70);
}
.bg-luxury {
    --ui-bg-gradient: var(--ui-gradient-luxury);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(190, 150, 60, .75);
}
.bg-futures {
    --ui-bg-gradient: linear-gradient(
        50deg,
        rgba(20, 170, 200, .40) 0%,
        rgba(20, 90, 90, .70) 30%,
        rgba(120, 170, 220, .60) 50%,
        rgba(20, 50, 60, .40) 70%,
        rgba(50, 120, 250, .50) 100%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(50, 150, 200, .70);
}
.bg-mints {
    --ui-bg-gradient: linear-gradient(
        50deg,
        rgba(240, 250, 240, .4) 0%,
        rgba(100, 220, 40, .7) 30%,
        rgba(230, 250, 0, .6) 50%,
        rgba(130, 250, 70, .4) 70%,
        rgba(220, 240, 200, .5) 100%
    );
    --ui-theme-text: var(--ui-text-dark);
    --ui-theme-border: rgba(100, 160, 30, .70);
}
.bg-neons {
    --ui-bg-gradient: 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%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(150, 50, 170, .70);
}
.bg-snows {
    --ui-bg-gradient: linear-gradient(
        50deg,
        rgba(250, 250, 250, .40) 0%,
        rgba(220, 230, 230, .40) 20%,
        rgba(250, 220, 160, .70) 30%,
        rgba(220, 220, 230, .60) 40%,
        rgba(240, 210, 150, .70) 60%,
        rgba(240, 240, 250, .50) 100%
    );
    --ui-theme-text: rgba(50, 50, 50, .95);
    --ui-theme-border: rgba(120, 120, 120, .50);
}
.bg-grays {
    --ui-bg-gradient: var(--ui-gradient-light);
    --ui-theme-text: rgb(0, 0, 0);
    --ui-theme-border: rgba(100, 100, 120, .60);
}
.bg-deeps {
    --ui-bg-gradient: linear-gradient(
        50deg,
        rgba(40, 40, 80, .50) 0%,
        rgba(20, 20, 20, .80) 20%,
        rgba(10, 10, 120, .70) 40%,
        rgba(20, 20, 80, .50) 70%,
        rgba(10, 10, 10, .60) 100%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(70, 70, 100, .70);
}
.bg-whites {
    --ui-bg-gradient: 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%
    );
    --ui-theme-text: var(--ui-text-dark);
    --ui-theme-border: rgba(120, 120, 140, .50);
}
.bg-metals {
    --ui-bg-gradient: var(--ui-gradient-dark);
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(120, 120, 120, .60);
}
.bg-gold {
    --ui-bg-gradient: linear-gradient(
        150deg,
        rgba(30, 20, 5, .8) 0%,
        rgba(180, 140, 10, .7) 30%,
        rgba(250, 210, 0, .9) 50%,
        rgba(150, 100, 20, .8) 70%,
        rgba(50, 30, 10, .7) 100%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(190, 150, 40, .70);
}
.bg-ocean {
    --ui-bg-gradient: linear-gradient(
        150deg,
        rgba(10, 10, 200, 0.8) 0%,
        rgba(20, 50, 150, 0.7) 30%,
        rgba(10, 60, 170, 0.9) 50%,
        rgba(20, 80, 220, 0.8) 70%,
        rgba(30, 30, 160, 0.7) 100%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(60, 70, 170, .70);
}
.bg-sage {
    --ui-bg-gradient: 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%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(10, 110, 50, .70);
}
.bg-rose {
    --ui-bg-gradient: 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%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(180, 40, 40, .70);
}
.bg-future {
    --ui-bg-gradient: 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%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(50, 150, 200, .70);
}
.bg-mint {
    --ui-bg-gradient: 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%
    );
    --ui-theme-text: var(--ui-text-dark);
    --ui-theme-border: rgba(100, 160, 30, .70);
}
.bg-neon {
    --ui-bg-gradient: 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%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(150, 50, 170, .70);
}
.bg-snow {
    --ui-bg-gradient: 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(240, 230, 140, .95) 60%,
        rgba(210, 210, 220, .95) 80%,
        rgba(240, 240, 250, .95) 100%
    );
    --ui-theme-text: rgba(50, 50, 50, .95);
    --ui-theme-border: rgba(120, 120, 120, .50);
}
.bg-gray {
    --ui-bg-gradient: 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%
    );
    --ui-theme-text: rgb(0, 0, 0);
    --ui-theme-border: rgba(100, 100, 120, .60);
}
.bg-deep {
    --ui-bg-gradient: 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%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(70, 70, 100, .70);
}
.bg-metal {
    --ui-bg-gradient: 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%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(120, 120, 120, .60);
}
.bg-luxuri {
    --ui-bg-gradient: 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%
    );
    --ui-theme-text: var(--ui-text-light);
    --ui-theme-border: rgba(190, 150, 60, .75);
}
.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);
    color: var(--ui-theme-text);
}
/* 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. GRADIENT TEXT - Gradient khusus teks dengan stop warna terurut.
   Penggunaan: class="txt-golds", class="txt-oceans", class="txt-luxury", dst. */
.txt-golds {
    --ui-text-gradient: linear-gradient(50deg, #a66b0a 0%, #e5b72a 25%, #ffe070 50%, #d99c17 75%, #8c5008 100%);
}
.txt-oceans {
    --ui-text-gradient: linear-gradient(50deg, #283278 0%, #285ab4 25%, #2882dc 50%, #465ac8 75%, #282864 100%);
}
.txt-sages {
    --ui-text-gradient: linear-gradient(50deg, #0a5032 0%, #288c46 25%, #3cb464 50%, #1e8246 75%, #055a28 100%);
}
.txt-roses {
    --ui-text-gradient: linear-gradient(50deg, #aa1e1e 0%, #dc3232 25%, #fa5032 50%, #dc283c 75%, #96141e 100%);
}
.txt-luxury {
    --ui-text-gradient: linear-gradient(50deg, #aa6e0a 0%, #e6be32 25%, #ffe16e 50%, #dca01e 75%, #8c500a 100%);
}
.txt-futures {
    --ui-text-gradient: linear-gradient(50deg, #146496 0%, #14a0be 25%, #64bedc 50%, #3c78dc 75%, #2846a0 100%);
}
.txt-mints {
    --ui-text-gradient: linear-gradient(50deg, #5a8c14 0%, #8cbe1e 25%, #aadc3c 50%, #78b41e 75%, #46780a 100%);
}
.txt-neons {
    --ui-text-gradient: linear-gradient(50deg, #5a28b4 0%, #9632d2 25%, #dc50be 50%, #b42896 75%, #5a1e78 100%);
}
.txt-snows {
    --ui-text-gradient: linear-gradient(50deg, #82828c 0%, #bebec8 25%, #f5ebd2 50%, #b4b4be 75%, #6e6e78 100%);
}
.txt-grays {
    --ui-text-gradient: linear-gradient(50deg, #323246 0%, #646e82 25%, #b4bec8 50%, #646478 75%, #28283c 100%);
}
.txt-deeps {
    --ui-text-gradient: linear-gradient(50deg, #141428 0%, #282864 25%, #464682 50%, #1e1e46 75%, #0a0a14 100%);
}
.txt-golds,
.txt-oceans,
.txt-sages,
.txt-roses,
.txt-luxury,
.txt-futures,
.txt-mints,
.txt-neons,
.txt-snows,
.txt-grays,
.txt-deeps {
    font-weight: 700;
    background: var(--ui-text-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.txt-whites { color: rgba(var(--ui-white-rgb), 1); }
.txt-metals { color: rgba(var(--ui-dark-rgb), 1); }
.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 { 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 SCALE — incremental 1px dari root font-size.
   Root canonical: --ui-root-font-size: 14px.
   cfs-0 = root + 1px, lalu setiap level berikutnya +1px.
   !important dipakai karena cfs-* adalah explicit size utility. */
.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 tambahan memakai prefix ui-* agar tidak mengambil utility Bootstrap.
   Penggunaan: class="ui-bg-white ui-opacity-50" atau class="ui-txt-dark ui-opacity-70" */
.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 - Modifier tambahan untuk .btn Bootstrap tanpa menulis ulang selector .btn.
   Penggunaan: class="btn btn-primary ui-btn-icon" atau class="btn ui-btn-shadow" */
.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. SHORTCUT UI SUKSES58 - Floating quick navigation dengan identitas visual SUKSES58:
   Penggunaan: class="shortcut-wrapper" */
.shortcut-wrapper {
    --s88-shortcut-navy-950: #06141f;
    --s88-shortcut-navy-900: #081c2a;
    --s88-shortcut-navy-800: #10283b;
    --s88-shortcut-teal: #087f86;
    --s88-shortcut-teal-dark: #075f65;
    --s88-shortcut-cyan: #70e4ff;
    --s88-shortcut-cyan-soft: #b8eff8;
    --s88-shortcut-gold: #d6aa4d;
    --s88-shortcut-gold-light: #f3cf74;
    --s88-shortcut-gold-dark: #a87922;
    --s88-shortcut-white: #ffffff;
    --s88-shortcut-silver: #edf4f7;
    --s88-shortcut-muted: #aebfc8;
    --s88-shortcut-line:
        rgba(
            112,
            228,
            255,
            .24
        );
    --s88-shortcut-line-strong:
        rgba(
            112,
            228,
            255,
            .50
        );
}
.shortcut-wrapper {
    position: fixed;
    right: 20px;
    bottom:
        calc(
            20px
            + env(safe-area-inset-bottom)
        );
    z-index: 9999;
    width: auto;
    max-width:
        calc(
            100vw
            - 36px
        );
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 6px;
    padding: 7px;
    box-sizing: border-box;
    overflow: visible;
    background: transparent;
    color:
        var(--s88-shortcut-silver);
}
.shortcut-nav {
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 6px;
    overflow: visible;
}
.shortcut-nav.hidden {
    display: none !important;
}
.shortcut-item {
    position: relative;
    width: auto;
    min-width: 82px;
    height: 60px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex:
        0 0 auto;
    box-sizing: border-box;
    overflow: visible;
    background: 
            linear-gradient(
            150deg,
            #05adb9 0%,
            #075f65 50%,
            #087f86 100%
        );
    border:
        1px solid
        rgb(250, 250, 250);
    border-radius:
        15px;
    color:
        var(--s88-shortcut-silver);
}
.shortcut-item > a {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding:
        7px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: inherit;
    text-align: center;
    text-decoration: none;
}
.shortcut-item i {
    margin: 0;
    flex-shrink: 0;
    font-size:
        1.2rem;
    line-height: 1;
    color:
        var(--s88-shortcut-white);
}
.shortcut-item span {
    width: 100%;
    margin-top:
        5px;
    display: block;
    overflow: visible;
    color:
        var(--s88-shortcut-silver);
    font-family:
        var(--ui-font-body);
    font-size:
        .72rem;
    font-weight:
        700;
    line-height:
        1.05;
    letter-spacing:
        .01em;
    text-align:
        center;
    text-transform:
        capitalize;
    white-space:
        nowrap;
}
.shortcut-item:hover,
.shortcut-item.active,
.shortcut-item.open {
    background:
        linear-gradient(
            150deg,
            rgba(20, 30, 100, 0.9) 0%,
            rgba(10, 50, 150, 0.9) 50%,
            rgba(20, 100, 150, 0.9) 100%
        );
    border-color:
        rgba(
            112,
            228,
            255,
            .70
        );
    color:
        #ffffff;
}
.shortcut-item.active::before,
.shortcut-item.open::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 10px;
    right: 10px;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            #a87922,
            #f3cf74,
            #d6aa4d
        );
    border-radius:
        2px;
}
.shortcut-item:hover i,
.shortcut-item.active i,
.shortcut-item.open i {
    color:
        #ffffff;
}
.shortcut-item:hover span,
.shortcut-item.active span,
.shortcut-item.open span {
    color:
        #ffffff;
}
.shortcut-item > a:focus-visible {
    outline:
        2px solid
        var(--s88-shortcut-gold-light);
    outline-offset:
        2px;
}
#toggle-shortcut {
    order: 99;
    width: 58px;
    min-width: 58px;
    height: 60px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex:
        0 0 58px;
    box-sizing: border-box;
    border:
        1px solid
        #a87922;
    border-radius:
        11px;
    background:
        linear-gradient(
            145deg,
            #f3cf74 0%,
            #d6aa4d 45%,
            #a87922 100%
        );
    color:
        #071827;
    cursor:
        pointer;
}
#toggle-shortcut i {
    margin: 0;
    font-size:
        1.4rem;
    line-height: 1;
    color:
        inherit;
}
#toggle-shortcut:hover {
    background:
        linear-gradient(
            145deg,
            #ffe19a,
            #d6aa4d
        );
    color:
        #06141f;
}
#toggle-shortcut.active-toggle {
    background:
        linear-gradient(
            145deg,
            #087f86,
            #075f65
        );
    border-color:
        var(--s88-shortcut-cyan);
    color:
        #ffffff;
}
#toggle-shortcut.active-toggle i {
    color:
        #ffffff;
}
#toggle-shortcut:focus-visible {
    outline:
        2px solid
        var(--s88-shortcut-gold-light);
    outline-offset:
        2px;
}
.shortcut-popup {
    position: absolute;
    right: 0;
    bottom:
        calc(
            100%
            + 8px
        );
    z-index: 10001;
    width:
        max-content;
    max-width:
        calc(
            100vw
            - 24px
        );
    display: none;
    flex-direction:
        column-reverse;
    gap:
        5px;
}
.shortcut-item.open
.shortcut-popup {
    display:
        flex;
}
.shortcut-popup a {
    width:
        auto;
    min-width:
        190px;
    max-width:
        calc(
            100vw
            - 24px
        );
    min-height:
        46px;
    padding:
        7px 12px;
    display:
        flex;
    flex-direction:
        row;
    align-items:
        center;
    justify-content:
        flex-start;
    box-sizing:
        border-box;
    background:
        linear-gradient(
            145deg,
            #081c2a,
            #10283b
        );
    color:
        var(--s88-shortcut-silver);
    border:
        1px solid
        var(--s88-shortcut-line-strong);
    border-radius:
        10px;
    text-decoration:
        none;
}
.shortcut-popup a i {
    width:
        30px;
    min-width:
        30px;
    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        center;
    flex-shrink:
        0;
    margin:
        0;
    color:
        var(--s88-shortcut-cyan);
    font-size:
        1.05rem;
    line-height:
        1;
}
.shortcut-popup a span {
    min-width:
        0;
    min-height:
        26px;
    margin:
        0 0 0 8px;
    padding-left:
        11px;
    display:
        flex;
    align-items:
        center;
    border-left:
        1px solid
        rgba(
            112,
            228,
            255,
            .30
        );
    color:
        var(--s88-shortcut-silver);
    font-family:
        var(--ui-font-body);
    font-size:
        .78rem;
    font-weight:
        600;
    line-height:
        1.2;
    text-align:
        left;
    text-transform:
        capitalize;
    white-space:
        normal;
    overflow-wrap:
        anywhere;
}
.shortcut-popup a:hover {
    background:
        linear-gradient(
            145deg,
            #075f65,
            #087f86
        );
    border-color:
        var(--s88-shortcut-cyan);
    color:
        #ffffff;
}
.shortcut-popup a:hover i {
    color:
        var(--s88-shortcut-gold-light);
}
.shortcut-popup a:hover span {
    color:
        #ffffff;
    border-left-color:
        var(--s88-shortcut-gold);
}
.shortcut-popup a:focus-visible {
    outline:
        2px solid
        var(--s88-shortcut-gold-light);
    outline-offset:
        2px;
}
@media (max-width: 1279px) {
    .shortcut-wrapper {
        right:
            8px;
        left:
            8px;
        bottom:
            calc(
                8px
                + env(safe-area-inset-bottom)
            );
        width:
            auto;
        max-width:
            none;
        padding:
            5px;
        gap:
            4px;
        align-items:
            stretch;
        border-radius:
            14px;
    }
    .shortcut-nav {
        min-width:
            0;
        flex:
            1 1 auto;
        display:
            flex;
        align-items:
            stretch;
        gap:
            4px;
    }
    .shortcut-item {
        width:
            auto;
        min-width:
            0;
        height:
            54px;
        flex:
            1 1 0;
        border-radius:
            9px;
    }
    .shortcut-item > a {
        min-width:
            0;
        padding:
            5px 2px;
    }
    .shortcut-item i {
        font-size:
            1.05rem;
    }
    .shortcut-item span {
        margin-top:
            4px;
        font-size:
            clamp(
                .58rem,
                1.15vw,
                .72rem
            );
        line-height:
            1.02;
        letter-spacing:
            0;
        white-space:
            normal;
        overflow-wrap:
            normal;
        word-break:
            normal;
    }
    #toggle-shortcut {
        width:
            50px;
        min-width:
            50px;
        height:
            54px;
        flex:
            0 0 50px;
        border-radius:
            9px;
    }
    #toggle-shortcut i {
        font-size:
            1.25rem;
    }
    .shortcut-popup {
        right:
            0;
        bottom:
            calc(
                100%
                + 7px
            );
        max-width:
            calc(
                100vw
                - 16px
            );
    }
    .shortcut-popup a {
        min-width:
            170px;
        max-width:
            calc(
                100vw
                - 16px
            );
        min-height:
            44px;
    }
    .shortcut-popup a span {
        font-size:
            .74rem;
    }
}
/* 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: 42px;
    height: 42px;
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(100, 116, 139, .24);
    border-radius: var(--ui-radius-md);
    background: #f8fafc;
    color: #3156d9;
    font-size: 1.2rem;
}
.widget-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}
/* Widget model universal. */
.widget-banner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.widget-banner .widget-body { flex: 1; }
.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-desc);
    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-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-content {
        --widget-counter-size: clamp(118px, 29vw, 176px);
        --widget-counter-overlap: clamp(-10px, -1vw, -4px);
        padding: 52px 0;
    }
    .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: 0.5;
}
.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(20, 20, 20, 0.8);
    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: 200;
    font-size: 0.8rem;
    line-height: 0.8;
    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: .2em;
    overflow-wrap: anywhere;
    text-decoration: none !important; 
    border-bottom: none !important;
    box-shadow: none !important;
}
/* USER ACTIONS */
.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 */
.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 */
.user-actions > .btn:hover,
.user-actions > .btn:focus,
.user-actions > .btn:active {
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}
/* USER ACTION ICON */
.user-actions > .btn i {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.2;
}
/* USER ACTION TEXT */
.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: 0.5;
    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,
    .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 > *,
    .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 */
    .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;
    }
    .user-actions > .btn i {
        font-size: 1.2rem;
        flex-shrink: 0;
    }
    .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,
    .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;
    }
    .user-actions > .btn {
        min-height: 44px;
        gap: 4px;
        padding: 4px 5px;
        border-radius: 10px;
    }
    .user-actions > .btn i {
        font-size: 1.15rem;
    }
    .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. */
.shortcut-item > a:focus-visible,
.shortcut-popup a:focus-visible,
.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 - Responsive dibagi 2 mode: Mobile + Tablet <=1279px dan Full default >=1280px.
   Penggunaan: otomatis. */
@media (max-width: 1279px) {
    .s58-login-page {
        background:
            linear-gradient(
                90deg,
                rgba(2, 14, 23, .72) 0%,
                rgba(2, 14, 23, .42) 48%,
                rgba(2, 14, 23, .22) 100%
            ),
            url('../layouts/img/authlogin_bg_tablet.webp')
            center center / cover no-repeat;
    }
    .s58-auth-navbar {
        min-height: 50px;
        padding: 8px 18px;
    }
    .s58-auth-navbar-container {
        width: 100%;
    }
    .s58-auth-brand {
        width: 158px;
    }
    .s58-auth-navbar .navbar-nav {
        gap: 5px;
    }
    .s58-auth-navbar .nav-link {
        padding: 10px 7px !important;
        font-size: .8rem;
    }
    .s58-auth-main {
        min-height: calc(50vh - 80px);
        padding: 34px 32px 30px;
        grid-template-columns: minmax(0, 1fr) 315px;
        gap: 42px;
    }
    .s58-auth-title {
        font-size: clamp(4.6rem, 8vw, 6.7rem);
    }
    .s58-auth-tagline {
        font-size: 1rem;
    }
    .s58-auth-features {
        gap: 12px;
    }
    .s58-auth-card {
        max-width: 315px;
        padding: 38px 18px 16px;
    }
    .s58-auth-footer-inner {
        grid-template-columns: 1fr auto;
    }
    .s58-auth-footer-help {
        display: none;
    }
}
@media (max-width: 1279px) {
    .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;
    }
    .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;
    }
}
@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-brand {
        width: 132px;
        margin-right: 10px;
    }
    .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: 'Courier New', Courier, monospace;
    font-size: 14px;
}
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: transparent !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: rgba(10, 10, 10, 0.2) !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;
}
.pod: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
) > .pod-header {
    background: transparent !important;
    color: inherit;
    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 {
    background: transparent !important;
    color: inherit !important;
    border-color: var(--ui-theme-border) !important;
}
.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 {
    background: transparent !important;
    color: inherit !important;
    border-color: var(--ui-theme-border) !important;
}
.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-columns: 3;
}
.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);
}
.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 {
    display: none;
}
/* --------------------------------------------------------------------------
   PROGRESSIVE BRANCH CONNECTOR
   Cabang dibuat hanya ketika Kiri/Tengah/Kanan diklik. Tiga slot tetap
   mempertahankan geometri Matrix 3, tetapi garis hanya muncul pada branch aktif.
   -------------------------------------------------------------------------- */
.tree-children.is-progressive::before {
    display: none;
}
.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;
}
/* --------------------------------------------------------------------------
   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;
}
/* ==========================================================================
   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 - Shell modern, scroller universal, split-body 4/8 setinggi sama, dan header icon + title/subtitle.
   Penggunaan: class="pod"; class="pod bg-oceans"; class="pod-body pod-scroller"; class="pod-bodys" + class="pod-body-right" / class="pod-body-left" */
.s58-page-modern {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}
.pod {
    --pod-scroll-height: clamp(960px, 64dvh, 1280px);
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    box-sizing: border-box;
    background: var(--ui-bg-gradient, #eef1f4);
    color: var(--ui-theme-text, #1f2937);
    border: 1px solid var(--ui-theme-border, rgba(71, 85, 105, .26));
    border-radius: 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}
.pod > .pod-header {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
    background: rgba(255, 255, 255, .35);
    color: inherit;
    border-bottom: 1px solid var(--ui-theme-border, rgba(71, 85, 105, .18));
}
.pod-header-left {
    min-width: 0;
    margin: 2px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
}
.pod-header-left > :last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}
.pod .pod-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    font-size: 2.4rem;
    line-height: 1;
}
.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: 2px;
    color: inherit;
    font-family: var(--ui-font-title);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.pod-subtitle {
    margin: 0;
    color: inherit;
    font-family: var(--ui-font-body);
    font-size: .6rem;
    font-weight: 400;
    line-height: 1.2;
}
.pod-header-right,
.pod-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.pod-btn {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-md);
    background: #fff;
    color: var(--ui-text-dark);
    font-family: var(--ui-font-body);
    font-size: .7rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}
.pod-btn:hover {
    background: #f1f5f9;
    color: var(--ui-text-dark);
    border-color: rgba(20, 20, 50, .70);
}
.pod-btn:active {
    background: #e2e8f0;
    border-color: rgba(20, 20, 50, .80);
}
.pod-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.pod-btn i {
    margin: 0;
    color: inherit;
    font-size: 1.2rem;
    line-height: 1;
}
.pod > .pod-body,
.pod-bodys > .pod-body {
    position: relative;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    padding: 12px;
    color: #1f2937;
}
.pod > .pod-body:is(.pod-lights, .pod-light),
.pod-bodys > .pod-body:is(.pod-lights, .pod-light) {
    background: rgba(220, 220, 220, .5);
    color: var(--ui-text-dark);
}
.pod > .pod-body:is(.pod-deeps, .pod-dark, .pod-op),
.pod-bodys > .pod-body:is(.pod-deeps, .pod-dark, .pod-op) {
    background: rgba(10, 10, 10, .5);
    color: var(--ui-text-light);
}
.pod :is(.pod-body, .pod-body-right, .pod-body-left) {
    min-height: 0;
}
.pod :is(.pod-body, .pod-body-right, .pod-body-left):is(.pod-scroller, .pod-scroll) {
    height: var(--pod-scroll-height);
    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, .35) 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;
}
.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, .35);
    border-radius: 4px;
}
.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: rgba(250, 250, 250, 0.9);
    color: #1f2937;
}
.pod-body-right,
.pod-body-left {
    position: relative;
    min-width: 0;
    height: var(--pod-scroll-height);
    min-height: var(--pod-scroll-height);
    max-height: var(--pod-scroll-height);
    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: rgb(255, 255, 255);
    color: #1f2937;
    border: none;
}
.pod-body-right {
    grid-column: 1;
    width: 100%;
}
.pod-body-left {
    grid-column: 2;
    width: 100%;
}
.pod > .pod-footer {
    padding: 10px 14px;
    background: rgb(240, 240, 250);
    color: #6b7280;
    border-top: 1px solid rgba(100, 100, 180, .7);
    font-family: var(--ui-font-body);
    font-size: .7rem;
    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 .form-text,
.pod .pod-subtitle,
.pod .tree-label,
.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 .form-label,
.pod .form-control,
.pod .form-select,
.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: 200;
}
.pod .form-label {
    display: inline-block;
    margin-bottom: 4px;
    padding: 1px 4px;
    border-radius: 4px;
    color: rgb(100, 100, 100) !important;
    background: rgb(250, 250, 250) !important;
    font-weight: 400;
}
.pod .form-control,
.pod .form-select,
.pod .input-group-text,
.pod .select2-container--default .select2-selection--single,
.pod .select2-container--default .select2-selection--multiple {
    min-height: 32px;
    border-color: #b8c0ca !important;
    color: #111827 !important;
    background: #fff !important;
    font-weight: 200;
    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 {
    color: #111827;
    background: #fff;
    font-weight: 200;
}
.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 {
    color: #111827 !important;
    background: #fff !important;
    font-weight: 400;
}
.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: #fff;
    font-weight: 400;
}
.pod .table-responsive,
.pod .dataTables_wrapper,
.pod .dt-container {
    color: #1f2937;
    background: #fff;
    font-weight: 400;
}
.pod .table thead th,
.pod table.dataTable thead th,
.pod table.dataTable thead td {
    white-space: nowrap;
    color: #111827;
    background: #fff;
    border-color: #aeb7c2;
    font-weight: 200;
}
.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 .pod-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}
.pod .s58-portal-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: 0;
}
.pod .pod-header-right :is(.btn, .nav-link),
.pod .s58-portal-tabs .nav-link {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 4px 8px 4px 4px;
    border: 2px solid rgb(240, 240, 220) !important;
    border-radius: 12px !important;
    color: #1f2937 !important;
    background: linear-gradient(180deg, #f7f8fa 0%, #d9dee4 100%) !important;
    font-family: var(--ui-font-help);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    box-shadow: none !important;
    white-space: nowrap;
    text-transform: uppercase;
}
.pod .pod-header-right :is(.btn, .nav-link) i,
.pod .s58-portal-tabs .nav-link i {
    color: inherit !important;
    font-size: 1.2rem;
    margin: 1px;
    line-height: 1;
}
.pod .pod-header-right .nav-link.active,
.pod .pod-header-right .btn.active,
.pod .pod-header-right .btn[aria-pressed="true"],
.pod .s58-portal-tabs .nav-link.active {
    border-color: #6c757d !important;
    color: #fff !important;
    background: #6c757d !important;
}
.pod .pod-header-right .nav-link.active i,
.pod .pod-header-right .btn.active i,
.pod .pod-header-right .btn[aria-pressed="true"] i,
.pod .s58-portal-tabs .nav-link.active i {
    color: inherit !important;
}
.pod: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(.pod-header-right :is(.btn, .nav-link), .s58-portal-tabs .nav-link) {
    border-color: var(--ui-theme-border) !important;
    color: var(--ui-theme-text) !important;
    background: var(--ui-bg-gradient) !important;
}
.pod: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(.pod-header-right :is(.nav-link.active, .btn.active, .btn[aria-pressed="true"]), .s58-portal-tabs .nav-link.active) {
    border-color: var(--ui-theme-border) !important;
    color: var(--ui-theme-text) !important;
    background: var(--ui-bg-gradient) !important;
    filter: brightness(.9);
}
.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 {
    min-height: 68px;
}
@media (max-width: 1279px) {
    .pod {
        --pod-scroll-height: clamp(480px, 48dvh, 720px);
        border-radius: var(--ui-radius-md);
        font-size: 0.8rem;
        margin-bottom: 14px;
    }
    .pod > .pod-header {
        min-height: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 9px;
        text-align: center;
    }
    .pod > .pod-header > .pod-header-left {
        width: 100%;
        flex: 0 0 auto;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .pod > .pod-header > .pod-header-left > :last-child {
        align-items: flex-start;
        text-align: left;
    }
    .pod > .pod-header > .pod-header-right,
    .pod > .pod-header > .pod-actions {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }
    .pod > .pod-header > .pod-header-right > .s58-portal-tabs,
    .pod > .pod-header > .pod-actions > .s58-portal-tabs {
        width: auto;
        min-width: 0;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .pod > .pod-header > .pod-header-right :is(.btn, .nav-link):has(i),
    .pod > .pod-header > .pod-actions :is(.btn, .nav-link):has(i) {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0 !important;
        gap: 0;
        font-size: 0 !important;
        line-height: 1;
    }
    .pod > .pod-header > .pod-header-right :is(.btn, .nav-link):has(i) i,
    .pod > .pod-header > .pod-actions :is(.btn, .nav-link):has(i) i {
        margin: 0 !important;
        font-size: 1.1rem !important;
        line-height: 1;
    }
    .pod > .pod-header > .pod-header-right > .badge,
    .pod > .pod-header > .pod-actions > .badge {
        display: none;
    }
    .pod > .pod-body,
    .pod-bodys > .pod-body,
    .pod-body-right,
    .pod-body-left {
        padding: 9px;
    }
    .pod-bodys {
        grid-template-columns: 1fr;
        gap: 1px;
        padding: 1px;
    }
    .pod-body-right {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
    }
    .pod-body-left {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
    }
    .pod > .pod-footer {
        padding: 10px 14px;
    }
    .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 - Full default >=1280px; Mobile + Tablet <=1279px.
   Penggunaan: showToast(...) */
.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;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none;
    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;
}
@media (max-width: 1279px) {
    .toast-container {
        padding: 10px !important;
    }
    .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: 0.8;
}
.s58-auth-activity-title {
    margin: 0;
    font-family: var(--ui-font-title);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 0.8;
    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: .8;
}
.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;
    }
}
/* 38. SHORTCUT MODAL LIFECYCLE - Shortcut disembunyikan hanya selama ada modal Bootstrap aktif. Setelah modal
   Penggunaan: otomatis. */
.shortcut-wrapper.s58-shortcut-modal-hidden {
    display: none !important;
}
.shortcut-wrapper.s58-shortcut-sidenav-hidden {
    display: none !important;
}
/* 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: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        width: 68%;
        max-width: 620px;
    }
}
@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. UBOLD OFFCANVAS — BASELINE SUKSES58
   Menyamakan shell privat dengan demo UBold layouts-sidebar-offcanvas:
   sidebar tersembunyi secara default, membuka sebagai overlay dari kiri,
   backdrop meredupkan halaman, dan konten/topbar tidak bergeser.
   Penggunaan: <html data-sidenav-size="offcanvas"> + layouts/s88_jquery.js.
   ========================================================================== */
/* UBold offcanvas berlaku pada Full dan Mobile + Tablet. */
html[data-sidenav-size="offcanvas"] .app-topbar,
html[data-sidenav-size="offcanvas"] .content-page {
    margin-inline-start: 0 !important;
}
/*
 * Fallback mandiri: tidak bergantung pada vendor theme app.js.
 * Variabel --s88-sidenav-width dimiliki langsung oleh SUKSES88.
 */
html[data-sidenav-size="offcanvas"] #s58-sidenav,
html[data-sidenav-size="offcanvas"] .sidenav-menu {
    position: fixed !important;
    inset-block: 0 !important;
    inset-inline-start: 0 !important;
    width: var(--s88-sidenav-width, 240px) !important;
    margin-inline-start: calc(var(--s88-sidenav-width, 240px) * -1) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1055 !important;
    transition: margin-inline-start .25s ease-in-out, opacity .25s ease-in-out !important;
    -webkit-transition: margin-inline-start .25s ease-in-out, opacity .25s ease-in-out !important;
    animation: none !important;
}
html[data-sidenav-size="offcanvas"].sidebar-enable #s58-sidenav,
html[data-sidenav-size="offcanvas"].sidebar-enable .sidenav-menu {
    margin-inline-start: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
/* Backdrop seperti UBold: gelap transparan, tanpa blur. */
#custom-backdrop.offcanvas-backdrop {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: .5 !important;
    background: #000 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1050 !important;
    transition: opacity .15s linear !important;
    -webkit-transition: opacity .15s linear !important;
    animation: none !important;
}
/* Tombol close selalu tersedia pada drawer. */
html[data-sidenav-size="offcanvas"] .button-close-offcanvas {
    display: block !important;
    z-index: 1060 !important;
}
/* Shortcut tidak menumpuk di atas drawer/backdrop. */
html.sidebar-enable .shortcut-wrapper,
body.modal-open .shortcut-wrapper {
    display: none !important;
}
/* State legacy tidak lagi mengubah geometri layout. */
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;
}
/* ==========================================================================
   45. UBOLD OFFCANVAS — CLICK / STACKING HOTFIX
   Backdrop dan sidenav berada pada stacking-context yang sama agar backdrop
   hanya meredupkan halaman dan tidak menangkap klik menu di atas sidenav.
   Penggunaan: otomatis saat html.sidebar-enable aktif.
   ========================================================================== */
.wrapper {
    isolation: isolate;
}
html[data-sidenav-size="offcanvas"].sidebar-enable #s58-sidenav,
html[data-sidenav-size="offcanvas"].sidebar-enable .sidenav-menu {
    z-index: 1060 !important;
    pointer-events: auto !important;
}
html[data-sidenav-size="offcanvas"].sidebar-enable #s58-sidenav *,
html[data-sidenav-size="offcanvas"].sidebar-enable .sidenav-menu * {
    pointer-events: auto;
}
#custom-backdrop.offcanvas-backdrop {
    z-index: 1050 !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
   -------------------------------------------------------------------------- */
:is(
    .txt-golds, .txt-gold, .txt-outline-golds, .txt-outline-gold,
    .btn.bg-golds, .btn.bg-gold, .btn.bg-outline-golds, .btn.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;
}
:is(
    .txt-oceans, .txt-ocean, .txt-outline-oceans, .txt-outline-ocean,
    .btn.bg-oceans, .btn.bg-ocean, .btn.bg-outline-oceans, .btn.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;
}
:is(
    .txt-sages, .txt-sage, .txt-outline-sages, .txt-outline-sage,
    .btn.bg-sages, .btn.bg-sage, .btn.bg-outline-sages, .btn.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;
}
:is(
    .txt-roses, .txt-rose, .txt-outline-roses, .txt-outline-rose,
    .btn.bg-roses, .btn.bg-rose, .btn.bg-outline-roses, .btn.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;
}
:is(
    .txt-futures, .txt-future, .txt-outline-futures, .txt-outline-future,
    .btn.bg-futures, .btn.bg-future, .btn.bg-outline-futures, .btn.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;
}
:is(
    .txt-mints, .txt-mint, .txt-outline-mints, .txt-outline-mint,
    .btn.bg-mints, .btn.bg-mint, .btn.bg-outline-mints, .btn.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;
}
:is(
    .txt-neons, .txt-neon, .txt-outline-neons, .txt-outline-neon,
    .btn.bg-neons, .btn.bg-neon, .btn.bg-outline-neons, .btn.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;
}
:is(
    .txt-snows, .txt-snow, .txt-outline-snows, .txt-outline-snow,
    .btn.bg-snows, .btn.bg-snow, .btn.bg-outline-snows, .btn.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;
}
:is(
    .txt-grays, .txt-gray, .txt-outline-grays, .txt-outline-gray,
    .btn.bg-grays, .btn.bg-gray, .btn.bg-outline-grays, .btn.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;
}
:is(
    .txt-deeps, .txt-deep, .txt-outline-deeps, .txt-outline-deep,
    .btn.bg-deeps, .btn.bg-deep, .btn.bg-outline-deeps, .btn.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;
}
:is(
    .txt-whites, .txt-white, .txt-outline-whites, .txt-outline-white,
    .btn.bg-whites, .btn.btn.bg-outline-whites, .btn.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;
}
:is(
    .txt-metals, .txt-dark, .txt-outline-darks, .txt-outline-dark,
    .btn.bg-metals, .btn.bg-metal, .btn.bg-outline-metals, .btn.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;
}
:is(
    .txt-luxury, .txt-luxurys, .txt-luxuri,
    .txt-outline-luxury, .txt-outline-luxurys, .txt-outline-luxuri,
    .btn.bg-luxury, .btn.bg-luxurys, .btn.bg-luxuri,
    .btn.bg-outline-luxury, .btn.bg-outline-luxurys, .btn.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.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.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
   Kontrak kombinasi class pada root .tiles dan seluruh keluarga .widget / .widget-*:
   - bg-*s            : surface gradient
   - bg-*             : surface solid
   - bg-outline-*s    : outline gradient, surface transparan
   - bg-outline-*     : outline solid, surface transparan
   - bg-none          : surface transparan tanpa palette
   - fo-*             : font family override pada elemen yang diberi utility
   - cfs-*            : font size override pada elemen yang diberi utility
   - cfw-* / ch-*     : weight / heading override pada elemen yang diberi utility
   Utility typography dapat dipasang pada root component maupun sub-element.
   ========================================================================== */
/* Palette token untuk Tiles/Widget. */
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-golds, .bg-gold, .bg-outline-golds, .bg-outline-gold) {
    --ui-palette-solid: #c9961a;
    --ui-palette-gradient: linear-gradient(50deg, #8c5008 0%, #e5b72a 30%, #ffe070 50%, #d99c17 72%, #a66b0a 100%);
    --ui-palette-contrast: #101827;
}
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-oceans, .bg-ocean, .bg-outline-oceans, .bg-outline-ocean) {
    --ui-palette-solid: #1677c8;
    --ui-palette-gradient: linear-gradient(50deg, #283278 0%, #285ab4 25%, #2882dc 50%, #465ac8 75%, #282864 100%);
    --ui-palette-contrast: #ffffff;
}
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-sages, .bg-sage, .bg-outline-sages, .bg-outline-sage) {
    --ui-palette-solid: #2f8f5b;
    --ui-palette-gradient: linear-gradient(50deg, #0a5032 0%, #288c46 25%, #3cb464 50%, #1e8246 75%, #055a28 100%);
    --ui-palette-contrast: #ffffff;
}
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-roses, .bg-rose, .bg-outline-roses, .bg-outline-rose) {
    --ui-palette-solid: #d94a4a;
    --ui-palette-gradient: linear-gradient(50deg, #aa1e1e 0%, #dc3232 25%, #fa5032 50%, #dc283c 75%, #96141e 100%);
    --ui-palette-contrast: #ffffff;
}
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-futures, .bg-future, .bg-outline-futures, .bg-outline-future) {
    --ui-palette-solid: #0b7e8d;
    --ui-palette-gradient: linear-gradient(50deg, #146496 0%, #14a0be 25%, #64bedc 50%, #3c78dc 75%, #2846a0 100%);
    --ui-palette-contrast: #ffffff;
}
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-mints, .bg-mint, .bg-outline-mints, .bg-outline-mint) {
    --ui-palette-solid: #9acb2d;
    --ui-palette-gradient: linear-gradient(50deg, #5a8c14 0%, #8cbe1e 25%, #d9f05b 50%, #78b41e 75%, #46780a 100%);
    --ui-palette-contrast: #17210b;
}
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-neons, .bg-neon, .bg-outline-neons, .bg-outline-neon) {
    --ui-palette-solid: #7a3ec8;
    --ui-palette-gradient: linear-gradient(50deg, #5a28b4 0%, #9632d2 25%, #dc50be 50%, #b42896 75%, #5a1e78 100%);
    --ui-palette-contrast: #ffffff;
}
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-snows, .bg-snow, .bg-outline-snows, .bg-outline-snow) {
    --ui-palette-solid: #e8eaee;
    --ui-palette-gradient: linear-gradient(50deg, #82828c 0%, #bebec8 25%, #f5ebd2 50%, #b4b4be 75%, #6e6e78 100%);
    --ui-palette-contrast: #222b3a;
}
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-grays, .bg-gray, .bg-outline-grays, .bg-outline-gray) {
    --ui-palette-solid: #6b7280;
    --ui-palette-gradient: linear-gradient(50deg, #323246 0%, #646e82 25%, #b4bec8 50%, #646478 75%, #28283c 100%);
    --ui-palette-contrast: #ffffff;
}
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-deeps, .bg-deep, .bg-outline-deeps, .bg-outline-deep) {
    --ui-palette-solid: #18233c;
    --ui-palette-gradient: linear-gradient(50deg, #141428 0%, #282864 25%, #464682 50%, #1e1e46 75%, #0a0a14 100%);
    --ui-palette-contrast: #ffffff;
}
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-whites, .bg-outline-whites, .bg-outline-white) {
    --ui-palette-solid: #f8fafc;
    --ui-palette-gradient: linear-gradient(50deg, #c4c9d0 0%, #ffffff 32%, #f5f1e7 52%, #d7dce2 78%, #aeb4bd 100%);
    --ui-palette-contrast: #1f2937;
}
:is(.tiles, .widget, [class^="widget-"], [class*=" widget-"]):is(.bg-metals, .bg-metal, .bg-outline-metals, .bg-outline-metal) {
    --ui-palette-solid: #1f2937;
    --ui-palette-gradient: linear-gradient(50deg, #111827 0%, #374151 32%, #4b5563 50%, #1f2937 72%, #0a0a0a 100%);
    --ui-palette-contrast: #ffffff;
}
:is(.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-gradient: linear-gradient(50deg, #7c4c0a 0%, #c9972d 28%, #f2d06c 50%, #c58728 74%, #8b5410 100%);
    --ui-palette-contrast: #16120a;
}
/* 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);
    --widget-border: var(--ui-palette-solid);
    background: transparent;
    color: var(--ui-palette-contrast) !important;
    border-color: var(--ui-palette-solid) !important;
}
/* 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);
    --widget-border: var(--ui-palette-solid);
    background: transparent;
    color: var(--ui-palette-contrast) !important;
    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-"] *).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: 0.8;
    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: 0.8;
    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
   Default seluruh <a href> adalah tanpa garis bawah. Underline hanya opt-in
   melalui class .link. Warna dapat memakai txt-*, txt-outline-* atau utility
   text-* lain tanpa mengubah policy underline.
   ========================================================================== */
:where(a[href]:not(.link)),
:where(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-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-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::before {
    display: none !important;
}
.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;
    }
}
/* ==========================================================================
   30. 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; }
}