/* ==========================================================================
   HiPE — Hi People  |  Sistem visual berdasarkan Hegemoni Branding Guideline
   Palet: Red #E50008 · Yellow #FADB19 · Blue #004CC2 · Pink #F799BF
          Green #00801C · Sky #87CCFF · Ink #19191A · Cream #FDFFF1
   Typeface: Geist (teks) · Archivo Expanded (display / wordmark)
   Prinsip: sederhana — latar terang, sidebar hitam ink, warna brand hanya
   untuk aksen & status.
   ========================================================================== */

    @import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Geist:wght@300;400;500;600;700;800&display=swap');

    :root {
        /* Brand */
        --red: #E50008;
        --yellow: #FADB19;
        --blue: #004CC2;
        --pink: #F799BF;
        --green: #00801C;
        --sky: #87CCFF;
        --ink: #19191A;
        --cream: #FDFFF1;
        --font-display: 'Archivo', 'Geist', sans-serif;

        /* Turunan lembut untuk chip & latar */
        --red-50: #FDECEC;
        --yellow-50: #FEF9E0;
        --blue-50: #E8F0FC;
        --pink-50: #FEF1F6;
        --green-50: #E6F3E9;
        --sky-50: #EAF6FF;

        /* Netral */
        --bg: #F6F6EF;
        --surface: #FFFFFF;
        --line: #E9E9E2;
        --line-strong: #DCDCD2;
        --text: #19191A;
        --muted: #6E6E68;
        --faint: #9A9A93;

        --radius: 14px;
        --radius-sm: 10px;
        --radius-lg: 18px;
        --shadow: 0 1px 2px rgba(25, 25, 26, .04), 0 6px 20px rgba(25, 25, 26, .05);
        --shadow-sm: 0 1px 2px rgba(25, 25, 26, .05);
        --sidebar-w: 236px;
        --ease: cubic-bezier(.4, 0, .2, 1);
    }

    /* --- Mode gelap (opsional, tombol di kaki sidebar) ---------------------- */
    body.dark {
        --bg: #121213;
        --surface: #1E1E20;
        --line: #2E2E31;
        --line-strong: #3A3A3E;
        --text: #FDFFF1;
        --muted: #A3A39C;
        --faint: #77776F;
        --red-50: #2A1618;
        --yellow-50: #2A2614;
        --blue-50: #141F30;
        --pink-50: #2A1B22;
        --green-50: #132218;
        --sky-50: #152430;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box
    }

    html,
    body {
        height: 100%
    }

    body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 14px;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-variant-numeric: tabular-nums;
        transition: background .25s var(--ease), color .25s var(--ease);
    }

    ::-webkit-scrollbar {
        width: 9px;
        height: 9px
    }

    ::-webkit-scrollbar-thumb {
        background: var(--line-strong);
        border-radius: 9px
    }

    ::-webkit-scrollbar-track {
        background: transparent
    }

    /* ==========================================================================
   SHELL
   ========================================================================== */
    .app {
        display: flex;
        min-height: 100vh
    }

    /* ---------- Sidebar ---------- */
    .sidebar {
        width: var(--sidebar-w);
        flex: 0 0 var(--sidebar-w);
        background: var(--surface);
        border-right: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        padding: 18px 14px;
        position: sticky;
        top: 0;
        height: 100vh;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 4px 6px 20px
    }

    .brand-mark {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 11px;
        background: var(--ink);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .brand-name {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.15
    }

    .brand-sub {
        font-size: 11px;
        color: var(--muted);
        letter-spacing: .01em
    }

    .nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        overflow-y: auto;
        margin: 0 -4px;
        padding: 0 4px
    }

    .nav-label {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--faint);
        padding: 14px 10px 6px;
    }

    .nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 11px;
        border-radius: var(--radius-sm);
        color: var(--muted);
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.3;
        cursor: pointer;
        border: none;
        background: transparent;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        text-decoration: none;
        transition: background .15s var(--ease), color .15s var(--ease);
    }

    a.nav-item:link,
    a.nav-item:visited,
    a.nav-item:hover,
    a.nav-item:active,
    a.nav-item:focus {
        text-decoration: none;
        color: inherit
    }

    .nav-item:hover {
        background: var(--bg);
        color: var(--text);
        text-decoration: none
    }

    .nav-item.active {
        background: var(--blue-50);
        color: var(--blue);
        font-weight: 600;
        text-decoration: none
    }

    body.dark .nav-item.active {
        color: var(--sky)
    }

    .nav-item svg {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        stroke-width: 1.8
    }

    .nav-count {
        margin-left: auto;
        flex: 0 0 auto;
        font-family: inherit;
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--faint);
        background: var(--bg);
        padding: 1px 7px;
        border-radius: 20px;
        white-space: nowrap;
        text-decoration: none
    }

    .nav-item.active .nav-count {
        background: var(--surface);
        color: var(--blue)
    }

    .side-cta {
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--green);
        color: #fff;
        border: none;
        border-radius: var(--radius-sm);
        padding: 11px 14px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: filter .15s var(--ease), transform .1s var(--ease);
    }

    .side-cta:hover {
        filter: brightness(1.12)
    }

    .side-cta:active {
        transform: translateY(1px)
    }

    .side-cta svg {
        width: 16px;
        height: 16px;
        stroke-width: 2
    }

    .side-foot {
        border-top: 1px solid var(--line);
        margin-top: 14px;
        padding-top: 12px
    }

    .mode-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: transparent;
        border: none;
        padding: 8px 10px;
        border-radius: var(--radius-sm);
        color: var(--muted);
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 500;
        cursor: pointer;
    }

    .mode-toggle:hover {
        background: var(--bg);
        color: var(--text)
    }

    .mode-toggle svg {
        width: 16px;
        height: 16px;
        stroke-width: 1.8
    }

    .side-tag {
        font-size: 10px;
        color: var(--faint);
        padding: 8px 10px 0;
        letter-spacing: .01em;
        line-height: 1.45
    }

    /* ---------- Main ---------- */
    .main {
        flex: 1;
        min-width: 0;
        padding: 22px 26px 40px;
        display: flex;
        flex-direction: column;
        gap: 18px
    }

    .topbar {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        flex-wrap: wrap
    }

    .title-block {
        flex: 1;
        min-width: 240px
    }

    .page-title {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -.03em;
        margin: 0 0 5px
    }

    .status-line {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--muted);
        flex-wrap: wrap
    }

    .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--green);
        flex: 0 0 7px
    }

    .dot.live {
        animation: pulse 2s infinite
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
            transform: scale(1)
        }

        50% {
            opacity: .45;
            transform: scale(.82)
        }
    }

    .sep {
        color: var(--line-strong)
    }

    .controls {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap
    }

    .ctl {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 34px;
        padding: 0 12px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        color: var(--text);
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 500;
        cursor: pointer;
        transition: border-color .15s var(--ease), background .15s var(--ease);
    }

    .ctl:hover {
        border-color: var(--line-strong)
    }

    .ctl svg {
        width: 15px;
        height: 15px;
        stroke-width: 1.9
    }

    .ctl.icon {
        padding: 0;
        width: 34px;
        justify-content: center
    }

    .ctl.png {
        color: var(--green)
    }

    .ctl.png svg {
        color: var(--green)
    }

    .ctl.pdf {
        color: var(--red)
    }

    .ctl.pdf svg {
        color: var(--red)
    }

    .ctl.solid {
        background: var(--ink);
        color: var(--cream);
        border-color: var(--ink)
    }

    .ctl.solid:hover {
        filter: brightness(1.3)
    }

    .ctl select {
        border: none;
        background: transparent;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--text);
        outline: none;
        cursor: pointer;
        padding: 0 2px;
    }

    .spin {
        animation: spin .8s linear infinite
    }

    @keyframes spin {
        to {
            transform: rotate(360deg)
        }
    }

    /* ==========================================================================
   KPI CARDS
   ========================================================================== */
    .kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
        gap: 14px
    }

    .kpi {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 16px 17px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        box-shadow: var(--shadow-sm);
        transition: transform .18s var(--ease), box-shadow .18s var(--ease);
    }

    .kpi:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow)
    }

    .kpi-label {
        font-size: 11.5px;
        color: var(--muted);
        font-weight: 500;
        margin-bottom: 7px;
        letter-spacing: .005em
    }

    .kpi-value {
        font-size: 29px;
        font-weight: 700;
        letter-spacing: -.035em;
        line-height: 1.05
    }

    .kpi-unit {
        font-size: 14px;
        font-weight: 500;
        color: var(--muted);
        margin-left: 4px;
        letter-spacing: 0
    }

    .kpi-delta {
        font-size: 11px;
        font-weight: 500;
        margin-top: 6px;
        color: var(--muted);
        display: flex;
        align-items: center;
        gap: 4px
    }

    .kpi-delta.up {
        color: var(--green)
    }

    .kpi-delta.down {
        color: var(--red)
    }

    .kpi-icon {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .kpi-icon svg {
        width: 18px;
        height: 18px;
        stroke-width: 1.9
    }

    .i-blue {
        background: var(--blue-50);
        color: var(--blue)
    }

    .i-pink {
        background: var(--pink-50);
        color: var(--red)
    }

    .i-green {
        background: var(--green-50);
        color: var(--green)
    }

    .i-yellow {
        background: var(--yellow-50);
        color: #9A7B00
    }

    .i-sky {
        background: var(--sky-50);
        color: var(--blue)
    }

    .i-red {
        background: var(--red-50);
        color: var(--red)
    }

    /* ==========================================================================
   FILTER CERDAS
   ========================================================================== */
    .filterbar {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 11px 15px;
        display: flex;
        align-items: center;
        gap: 11px;
        flex-wrap: wrap;
        box-shadow: var(--shadow-sm);
    }

    .filter-title {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
        padding-right: 3px;
    }

    .filter-title svg {
        width: 14px;
        height: 14px;
        stroke-width: 2;
        color: var(--blue)
    }

    .select {
        height: 34px;
        min-width: 158px;
        padding: 0 30px 0 11px;
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--text);
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 500;
        cursor: pointer;
        outline: none;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E68' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        transition: border-color .15s var(--ease);
    }

    .select:hover {
        border-color: var(--line-strong)
    }

    .select:focus {
        border-color: var(--blue)
    }

    .filter-reset {
        margin-left: auto;
        background: transparent;
        border: none;
        color: var(--muted);
        font-family: inherit;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        padding: 6px 9px;
        border-radius: 8px;
    }

    .filter-reset:hover {
        background: var(--bg);
        color: var(--red)
    }

    /* ==========================================================================
   CHARTS & CARDS
   ========================================================================== */
    .grid {
        display: grid;
        gap: 14px
    }

    .g-2 {
        grid-template-columns: 1.35fr 1fr
    }

    .g-2e {
        grid-template-columns: 1fr 1fr
    }

    .g-3 {
        grid-template-columns: repeat(3, 1fr)
    }

    .g-1 {
        grid-template-columns: 1fr
    }

    .card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 17px 18px 18px;
        box-shadow: var(--shadow-sm);
        min-width: 0;
    }

    .card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px
    }

    .card-title {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.015em;
        margin: 0
    }

    .card-sub {
        font-size: 11.5px;
        color: var(--muted);
        margin-top: 2px
    }

    .card-badge {
        font-size: 10.5px;
        font-weight: 600;
        padding: 3px 9px;
        border-radius: 20px;
        background: var(--bg);
        color: var(--muted);
        letter-spacing: .01em;
        white-space: nowrap;
    }

    .chart-wrap {
        position: relative;
        width: 100%
    }

    .h-260 {
        height: 260px
    }

    .h-300 {
        height: 300px
    }

    .h-320 {
        height: 320px
    }

    .h-360 {
        height: 360px
    }

    .empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: 8px;
        color: var(--faint);
        font-size: 12.5px;
        text-align: center;
        padding: 20px;
    }

    .empty svg {
        width: 26px;
        height: 26px;
        stroke-width: 1.5;
        opacity: .55
    }

    /* ---------- Funnel ---------- */
    .funnel {
        display: flex;
        flex-direction: column;
        gap: 9px
    }

    .funnel-row {
        display: grid;
        grid-template-columns: 112px 1fr 74px;
        align-items: center;
        gap: 12px
    }

    .funnel-name {
        font-size: 12.5px;
        font-weight: 500;
        color: var(--muted);
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .funnel-track {
        height: 26px;
        background: var(--bg);
        border-radius: 7px;
        overflow: hidden;
        position: relative
    }

    .funnel-fill {
        height: 100%;
        border-radius: 7px;
        transition: width .7s var(--ease);
        min-width: 3px
    }

    .funnel-meta {
        font-size: 12px;
        font-weight: 600;
        text-align: left;
        white-space: nowrap
    }

    .funnel-meta span {
        font-size: 10.5px;
        font-weight: 500;
        color: var(--faint);
        margin-left: 5px
    }

    /* ---------- Progress bars ---------- */
    .bars {
        display: flex;
        flex-direction: column;
        gap: 12px
    }

    .bar-item {
        display: flex;
        flex-direction: column;
        gap: 6px
    }

    .bar-top {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        font-size: 12.5px
    }

    .bar-name {
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .bar-val {
        font-weight: 600;
        font-size: 12px;
        white-space: nowrap
    }

    .bar-val em {
        font-style: normal;
        color: var(--faint);
        font-weight: 500;
        font-size: 11px;
        margin-left: 4px
    }

    .bar-track {
        height: 7px;
        background: var(--bg);
        border-radius: 6px;
        overflow: hidden
    }

    .bar-fill {
        height: 100%;
        border-radius: 6px;
        transition: width .6s var(--ease)
    }

    /* ---------- Stat strip ---------- */
    .strip {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1px;
        background: var(--line);
        border-radius: var(--radius-sm);
        overflow: hidden;
        margin-top: 2px
    }

    .strip-cell {
        background: var(--surface);
        padding: 13px 14px
    }

    .strip-label {
        font-size: 10.5px;
        color: var(--muted);
        font-weight: 500;
        margin-bottom: 4px
    }

    .strip-value {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -.03em
    }

    /* ---------- Command Center ---------- */
    .hc-overall {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 6px 2px 18px
    }

    .hc-gauge {
        width: 104px;
        height: 104px;
        flex: 0 0 104px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        position: relative;
    }

    .hc-gauge .hc-inner {
        width: 82px;
        height: 82px;
        border-radius: 50%;
        background: var(--surface);
        display: grid;
        place-items: center;
        line-height: 1.05;
    }

    .hc-gauge b {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -.04em
    }

    .hc-gauge span {
        font-size: 10px;
        color: var(--muted);
        font-weight: 600
    }

    .hc-sum {
        flex: 1;
        min-width: 0
    }

    .hc-sum h4 {
        margin: 0 0 5px;
        font-size: 15px;
        font-weight: 700
    }

    .hc-sum p {
        margin: 0;
        font-size: 12.5px;
        color: var(--muted);
        line-height: 1.55
    }

    .hc-find {
        display: flex;
        gap: 11px;
        padding: 11px 0;
        border-bottom: 1px solid var(--line);
        font-size: 12.5px
    }

    .hc-find:last-child {
        border-bottom: none
    }

    .hc-find .hc-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-top: 5px;
        flex: 0 0 7px
    }

    .hc-find b {
        display: block;
        font-size: 11px;
        color: var(--muted);
        font-weight: 600;
        margin-bottom: 2px
    }

    .hc-strat {
        padding: 11px 0;
        border-bottom: 1px solid var(--line);
        font-size: 12.5px
    }

    .hc-strat:last-child {
        border-bottom: none
    }

    .hc-strat .hc-top {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center
    }

    .hc-strat .hc-meta {
        font-size: 11px;
        color: var(--muted);
        margin-top: 3px
    }

    .hc-dept {
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        padding: 14px;
        margin-bottom: 12px
    }

    .hc-dept h4 {
        margin: 0 0 5px;
        font-size: 14px;
        font-weight: 700
    }

    .hc-dept .hc-diag {
        font-size: 12.5px;
        color: var(--muted);
        line-height: 1.6;
        margin-bottom: 11px
    }

    .hc-act {
        display: flex;
        gap: 10px;
        padding: 9px 0;
        border-top: 1px solid var(--line);
        font-size: 12.5px
    }

    .hc-act .hc-num {
        flex: 0 0 20px;
        height: 20px;
        border-radius: 6px;
        background: var(--bg);
        display: grid;
        place-items: center;
        font-size: 10.5px;
        font-weight: 700;
        color: var(--muted);
        margin-top: 1px;
    }

    .hc-act .hc-meta {
        font-size: 11px;
        color: var(--faint);
        margin-top: 3px
    }

    .hc-note {
        font-size: 11.5px;
        color: var(--faint);
        margin-top: 12px;
        line-height: 1.6
    }

    /* ---------- Tabel ---------- */
    .table-scroll {
        overflow: auto;
        max-height: 520px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--line)
    }

    table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12.5px
    }

    thead th {
        position: sticky;
        top: 0;
        background: var(--surface);
        text-align: left;
        font-weight: 600;
        font-size: 11px;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--muted);
        padding: 10px 13px;
        border-bottom: 1px solid var(--line);
        white-space: nowrap;
        z-index: 1;
    }

    tbody td {
        padding: 10px 13px;
        border-bottom: 1px solid var(--line);
        white-space: nowrap;
        max-width: 230px;
        overflow: hidden;
        text-overflow: ellipsis
    }

    tbody tr:last-child td {
        border-bottom: none
    }

    tbody tr:hover td {
        background: var(--bg)
    }

    .num {
        text-align: right;
        font-variant-numeric: tabular-nums
    }

    .pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 600;
        padding: 2.5px 9px;
        border-radius: 20px;
        white-space: nowrap;
    }

    .p-green {
        background: var(--green-50);
        color: var(--green)
    }

    .p-red {
        background: var(--red-50);
        color: var(--red)
    }

    .p-yellow {
        background: var(--yellow-50);
        color: #8A6D00
    }

    .p-blue {
        background: var(--blue-50);
        color: var(--blue)
    }

    .p-pink {
        background: var(--pink-50);
        color: #B8306B
    }

    .p-grey {
        background: var(--bg);
        color: var(--muted)
    }

    /* ---------- Compliance matrix ---------- */
    .matrix td.cell {
        text-align: center;
        padding: 8px 6px
    }

    .chip {
        display: inline-block;
        width: 11px;
        height: 11px;
        border-radius: 3px
    }

    .c-done {
        background: var(--green)
    }

    .c-proc {
        background: var(--yellow)
    }

    .c-none {
        background: var(--line-strong)
    }

    .c-late {
        background: var(--red)
    }

    .legend {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin-top: 12px;
        font-size: 11.5px;
        color: var(--muted)
    }

    .legend span {
        display: inline-flex;
        align-items: center;
        gap: 6px
    }

    /* ---------- Halaman ---------- */
    .page {
        display: none;
        flex-direction: column;
        gap: 18px
    }

    .page.active {
        display: flex
    }

    /* ---------- Overlay ---------- */
    .overlay {
        position: fixed;
        inset: 0;
        background: var(--bg);
        z-index: 80;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        transition: opacity .3s var(--ease);
    }

    .overlay.hide {
        opacity: 0;
        pointer-events: none
    }

    .loader {
        width: 34px;
        height: 34px;
        border: 3px solid var(--line);
        border-top-color: var(--blue);
        border-radius: 50%;
        animation: spin .75s linear infinite
    }

    .overlay p {
        color: var(--muted);
        font-size: 13px;
        margin: 0
    }

    .overlay h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -.02em
    }

    .overlay .box {
        max-width: 430px;
        text-align: center;
        padding: 0 24px
    }

    .toast {
        position: fixed;
        bottom: 22px;
        left: 50%;
        transform: translateX(-50%) translateY(70px);
        background: var(--ink);
        color: var(--cream);
        padding: 11px 19px;
        border-radius: 24px;
        font-size: 12.5px;
        font-weight: 500;
        z-index: 120;
        opacity: 0;
        transition: transform .3s var(--ease), opacity .3s var(--ease);
        box-shadow: 0 8px 26px rgba(25, 25, 26, .22);
    }

    .toast.show {
        transform: translateX(-50%) translateY(0);
        opacity: 1
    }

    /* ---------- Mode presentasi ---------- */
    body.present .sidebar {
        display: none
    }

    body.present .main {
        padding: 30px 40px
    }

    body.present .page-title {
        font-size: 30px
    }

    body.present .kpi-value {
        font-size: 35px
    }

    /* ==========================================================================
   IDENTITAS HEGEMONI — wordmark, lockup "Hi", strip brand
   ========================================================================== */
    .hg-logo,
    .hi-lock {
        font-family: var(--font-display);
        font-weight: 800;
        font-stretch: 125%;
        letter-spacing: .02em;
        line-height: 1;
        white-space: nowrap;
        color: currentColor;
        display: inline-flex;
        align-items: baseline;
    }

    .hg-i {
        height: .93em;
        width: auto;
        margin-left: .06em;
        vertical-align: baseline;
        overflow: visible
    }

    .hg-logo {
        font-size: 17px
    }

    button.hg-logo {
        appearance: none;
        background: none;
        border: 0;
        padding: 0;
        margin: 0;
        cursor: pointer;
        color: inherit;
        opacity: .42;
        transition: opacity .15s var(--ease, ease);
    }

    button.hg-logo:hover,
    button.hg-logo.on {
        opacity: 1
    }

    .hg-logo-img {
        height: 22px;
        width: auto;
        display: block
    }

    .hi-lock {
        font-size: 13px;
        gap: 0
    }

    .hi-lock .hg-i {
        margin: 0 .02em 0 .04em
    }

    .hi-lock .hi-word {
        font-family: 'Geist', sans-serif;
        font-stretch: 100%;
        font-weight: 600;
        letter-spacing: -.01em;
        font-size: .92em;
        margin-left: .42em;
    }

    .hi-lock-lg {
        font-size: 21px
    }

    .hi-lock-lg .hi-word {
        font-family: var(--font-display);
        font-stretch: 125%;
        font-weight: 700;
        font-size: .5em;
        letter-spacing: .06em;
        margin-left: .45em;
        align-self: flex-start;
        margin-top: -.05em
    }

    /* Bar identitas di atas halaman */
    .brandbar {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding: 10px 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }

    .brandbar .bb-left {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-right: 16px;
        border-right: 1px solid var(--line)
    }

    .brandbar .bb-tag {
        font-size: 10.5px;
        color: var(--muted);
        letter-spacing: .08em;
        text-transform: uppercase;
        font-weight: 600
    }

    .brand-strip {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        flex: 1
    }

    .brand-strip .bs-label {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--faint);
        margin-right: 4px
    }

    .brand-chip {
        display: inline-flex;
        align-items: center;
        height: 30px;
        padding: 0 11px;
        border-radius: 30px;
        background: var(--bg);
        border: 1px solid var(--line);
        color: var(--text);
        appearance: none;
        font: inherit;
        cursor: pointer;
        opacity: .38;
        filter: grayscale(.2);
        transition: opacity .15s var(--ease, ease), filter .15s var(--ease, ease), border-color .15s var(--ease, ease), background .15s var(--ease, ease);
    }

    .brand-chip.on {
        opacity: 1;
        filter: none;
        background: var(--surface);
        border-color: var(--line-strong, var(--line));
    }

    .brand-chip:hover {
        opacity: 1;
        filter: none;
    }

    .brand-chip img {
        height: 18px;
        width: auto;
        display: block
    }

    /* Judul halaman memakai huruf display Hegemoni */
    .page-title {
        font-family: var(--font-display);
        font-stretch: 112%;
        font-weight: 800;
        letter-spacing: -.01em
    }

    /* Label pemisah seksi */
    .section-label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 6px;
    }

    .section-label::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--red)
    }

    .section-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--line)
    }

    /* ==========================================================================
   TRAINING
   ========================================================================== */
    .mini-track {
        width: 90px;
        height: 6px;
        border-radius: 6px;
        background: var(--bg);
        overflow: hidden
    }

    .mini-track div {
        height: 100%;
        border-radius: 6px
    }

    .tl {
        display: flex;
        flex-direction: column;
        max-height: 620px;
        overflow: auto;
        margin-right: -6px;
        padding-right: 6px
    }

    .tl-row {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: 12px 0;
        border-bottom: 1px solid var(--line)
    }

    .tl-row:last-child {
        border-bottom: none
    }

    .tl-date {
        flex: 0 0 54px;
        text-align: center;
        border-radius: 10px;
        background: var(--bg);
        padding: 6px 0;
        line-height: 1.1;
    }

    .tl-date b {
        display: block;
        font-family: var(--font-display);
        font-stretch: 112%;
        font-size: 18px;
        font-weight: 800
    }

    .tl-date span {
        font-size: 10px;
        color: var(--muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em
    }

    .tl-row.next .tl-date {
        background: var(--ink);
        color: var(--cream)
    }

    .tl-row.next .tl-date span {
        color: var(--yellow)
    }

    .tl-body {
        flex: 1;
        min-width: 0
    }

    .tl-title {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -.01em
    }

    .tl-meta {
        font-size: 11.5px;
        color: var(--muted);
        margin-top: 2px
    }

    .tl-topics {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 7px
    }

    .tl-topics span {
        font-size: 10.5px;
        padding: 2px 8px;
        border-radius: 20px;
        background: var(--bg);
        color: var(--muted)
    }

    /* ==========================================================================
   SIDEBAR HITAM (ink) — mengikuti slide hitam di guideline Hegemoni
   ========================================================================== */
    .sidebar {
        background: var(--ink);
        border-right: none;
        color: var(--cream)
    }

    .brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 8px 10px 18px
    }

    .brand .hi-lock {
        color: var(--cream)
    }

    .brand-sub {
        color: rgba(253, 255, 241, .5)
    }

    .nav-label {
        color: rgba(253, 255, 241, .36)
    }

    .nav-item,
    a.nav-item:link,
    a.nav-item:visited {
        color: rgba(253, 255, 241, .68);
        text-decoration: none
    }

    .nav-item:hover,
    a.nav-item:hover {
        background: rgba(255, 255, 255, .07);
        color: var(--cream);
        text-decoration: none
    }

    .nav-item.active,
    a.nav-item.active,
    a.nav-item.active:visited,
    body.dark .nav-item.active {
        background: var(--cream);
        color: var(--ink);
        text-decoration: none
    }

    .nav-count {
        background: rgba(255, 255, 255, .08);
        color: rgba(253, 255, 241, .6);
        text-decoration: none
    }

    .nav-item.active .nav-count {
        background: var(--ink);
        color: var(--cream);
        text-decoration: none
    }

    .side-cta {
        background: var(--yellow);
        color: var(--ink)
    }

    .side-foot {
        border-top-color: rgba(255, 255, 255, .1)
    }

    .mode-toggle {
        color: rgba(253, 255, 241, .6)
    }

    .mode-toggle:hover {
        background: rgba(255, 255, 255, .07);
        color: var(--cream)
    }

    .side-tag {
        color: rgba(253, 255, 241, .36)
    }

    body.dark .sidebar {
        background: #0C0C0D;
        border-right: 1px solid var(--line)
    }

    /* ==========================================================================
   NAV GROUP — Recruitment dengan sub menu
   ========================================================================== */
    .nav-parent {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 11px;
        border-radius: var(--radius-sm);
        color: rgba(253, 255, 241, .68);
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 500;
        cursor: pointer;
        border: none;
        background: transparent;
        width: 100%;
        text-align: left;
        transition: background .15s var(--ease), color .15s var(--ease);
    }

    .nav-parent:hover {
        background: rgba(255, 255, 255, .07);
        color: var(--cream)
    }

    .nav-parent svg {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        stroke-width: 1.8
    }

    .nav-parent .chev {
        margin-left: auto;
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        transition: transform .2s var(--ease)
    }

    .nav-group.open .nav-parent .chev {
        transform: rotate(90deg)
    }

    .nav-group.has-active .nav-parent {
        color: var(--cream);
        font-weight: 600
    }

    .nav-sub {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 2px 0 6px 19px;
        padding-left: 9px;
        border-left: 1px solid rgba(255, 255, 255, .12)
    }

    .nav-group:not(.open) .nav-sub {
        display: none
    }

    .nav-sub .nav-item {
        font-size: 13px;
        padding: 7px 10px
    }

    .nav-sub .nav-item svg {
        width: 15px;
        height: 15px;
        flex: 0 0 15px
    }

    .nav-sublabel {
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: rgba(253, 255, 241, .34);
        padding: 8px 10px 3px
    }

    .nav-soon {
        margin-left: auto;
        flex: 0 0 auto;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: .04em;
        background: var(--yellow);
        color: var(--ink);
        padding: 1px 7px;
        border-radius: 20px;
        white-space: nowrap;
        text-decoration: none
    }

    .nav-item.dim:not(.active) {
        color: rgba(253, 255, 241, .5)
    }

    /* ==========================================================================
   COMING SOON
   ========================================================================== */
    .soon {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 56px 24px;
        gap: 12px
    }

    .soon-icon {
        width: 76px;
        height: 76px;
        border-radius: 22px;
        background: var(--yellow);
        color: var(--ink);
        display: grid;
        place-items: center;
        margin-bottom: 4px
    }

    .soon-icon svg {
        width: 40px;
        height: 40px
    }

    .soon h2 {
        font-family: var(--font-display);
        font-stretch: 112%;
        font-weight: 800;
        font-size: 24px;
        margin: 4px 0 0;
        letter-spacing: -.01em
    }

    .soon p {
        max-width: 540px;
        color: var(--muted);
        margin: 0;
        font-size: 13px;
        line-height: 1.6
    }

    .soon-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 10px;
        width: 100%;
        max-width: 740px;
        margin-top: 16px
    }

    .soon-list div {
        border: 1px dashed var(--line-strong);
        border-radius: 12px;
        padding: 13px 14px;
        font-size: 12px;
        color: var(--muted);
        text-align: left;
        line-height: 1.5
    }

    .soon-list b {
        display: block;
        color: var(--text);
        font-size: 12.5px;
        margin-bottom: 3px
    }

    /* ==========================================================================
   ONBOARDING
   ========================================================================== */
    .ob-steps {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        margin-top: 7px
    }

    .ob-step {
        font-size: 10.5px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap
    }

    .ob-step::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor
    }

    .ob-step.sent {
        background: var(--green-50);
        color: var(--green)
    }

    .ob-step.late {
        background: var(--red-50);
        color: var(--red)
    }

    .ob-step.pending {
        background: var(--bg);
        color: var(--muted)
    }

    td .ob-steps {
        margin-top: 0;
        flex-wrap: nowrap
    }

    /* ==========================================================================
   ORGANIZATION HEALTH (beranda)
   ========================================================================== */
    .oh-hero {
        display: flex;
        align-items: center;
        gap: 26px;
        flex-wrap: wrap;
        padding: 22px 24px
    }

    .oh-gauge-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px
    }

    .oh-gauge {
        width: 132px;
        height: 132px;
        flex: 0 0 132px
    }

    .oh-gauge .hc-inner {
        width: 104px;
        height: 104px
    }

    .oh-gauge b {
        font-family: var(--font-display);
        font-stretch: 112%;
        font-size: 38px
    }

    .oh-narr {
        flex: 1;
        min-width: 280px
    }

    .oh-eyebrow {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--red);
        margin-bottom: 6px
    }

    .oh-narr h2 {
        font-family: var(--font-display);
        font-stretch: 112%;
        font-weight: 800;
        font-size: 22px;
        letter-spacing: -.01em;
        margin: 0 0 8px;
        line-height: 1.2
    }

    .oh-narr p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.65;
        max-width: 760px
    }

    .oh-scale {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 12px;
        font-size: 11px;
        color: var(--muted)
    }

    .oh-scale span {
        display: inline-flex;
        align-items: center;
        gap: 6px
    }

    .oh-scale i {
        width: 9px;
        height: 9px;
        border-radius: 50%
    }

    .oh-period {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-self: flex-start
    }

    .oh-period label {
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted)
    }

    .oh-period span {
        font-size: 11px;
        color: var(--faint)
    }

    .oh-pillars {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px
    }

    .oh-pillar {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 16px 17px;
        box-shadow: var(--shadow-sm);
        min-width: 0
    }

    .op-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px
    }

    .op-name {
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: -.01em
    }

    .op-score {
        font-family: var(--font-display);
        font-stretch: 112%;
        font-weight: 800;
        font-size: 28px;
        line-height: 1
    }

    .op-desc {
        font-size: 11.5px;
        color: var(--muted);
        margin: 3px 0 10px;
        min-height: 32px
    }

    .op-bar {
        height: 6px;
        border-radius: 6px;
        background: var(--bg);
        overflow: hidden;
        margin-bottom: 10px
    }

    .op-bar i {
        display: block;
        height: 100%;
        border-radius: 6px
    }

    .op-inds {
        display: flex;
        flex-direction: column
    }

    .op-ind {
        display: grid;
        grid-template-columns: 8px 1fr auto;
        column-gap: 9px;
        align-items: center;
        padding: 6px 0;
        border-top: 1px solid var(--line);
        font-size: 12px
    }

    .op-ind .d {
        width: 7px;
        height: 7px;
        border-radius: 50%
    }

    .op-ind .l {
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .op-ind b {
        font-weight: 700;
        text-align: right;
        white-space: nowrap
    }

    .op-ind em {
        grid-column: 2 / 4;
        font-style: normal;
        font-size: 10.5px;
        color: var(--faint)
    }

    .op-empty {
        font-size: 12px;
        color: var(--faint);
        padding: 10px 0
    }

    .vs-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px
    }

    .vs {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 16px 18px;
        min-width: 0
    }

    .vs-val {
        font-family: var(--font-display);
        font-stretch: 112%;
        font-weight: 800;
        font-size: 28px;
        letter-spacing: -.01em;
        line-height: 1.05;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .vs-lbl {
        font-size: 12.5px;
        font-weight: 600;
        margin-top: 8px
    }

    .vs-prev {
        font-size: 11px;
        color: var(--muted);
        margin-top: 4px;
        min-height: 16px
    }

    .vs-delta {
        font-size: 11px;
        font-weight: 700;
        margin-top: 4px
    }

    .vs-delta.good {
        color: var(--green)
    }

    .vs-delta.bad {
        color: var(--red)
    }

    .vs-delta.neutral {
        color: var(--blue)
    }

    .vs-delta.flat {
        color: var(--muted)
    }

    body.dark .vs-delta.neutral {
        color: var(--sky)
    }

    .oh-banner {
        background: var(--red-50);
        border-radius: var(--radius);
        padding: 15px 20px;
        font-size: 13px;
        line-height: 1.6
    }

    .oh-act {
        font-size: 11.5px;
        color: var(--muted);
        margin-top: 4px
    }

    .oh-method summary {
        cursor: pointer;
        font-size: 13px;
        font-weight: 600
    }

    .oh-method p {
        font-size: 12px;
        color: var(--muted);
        line-height: 1.6
    }

    .oh-method-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        font-size: 12px
    }

    .oh-method-grid ul {
        margin: 6px 0 0;
        padding-left: 16px;
        color: var(--muted);
        line-height: 1.6
    }

    /* Status kontrak */
    .ct-row {
        grid-template-columns: 190px 1fr 74px
    }

    .ct-exits {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
        font-size: 12px;
        color: var(--muted)
    }

    .ct-exits span {
        display: inline-flex;
        align-items: center;
        gap: 6px
    }

    .ct-exits i {
        width: 9px;
        height: 9px;
        border-radius: 3px
    }

    .ct-exits b {
        color: var(--text)
    }

    /* ==========================================================================
   CARI KANDIDAT
   ========================================================================== */
    .cs-box {
        padding: 16px
    }

    .cs-input {
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1.5px solid var(--line-strong);
        border-radius: 12px;
        padding: 6px 6px 6px 14px;
        background: var(--surface)
    }

    .cs-input:focus-within {
        border-color: var(--ink)
    }

    .cs-input svg {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        color: var(--muted);
        stroke-width: 2
    }

    .cs-input input {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        font-family: inherit;
        font-size: 16px;
        color: var(--text);
        padding: 8px 0
    }

    .cs-tools {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 12px;
        font-size: 12.5px;
        color: var(--muted)
    }

    .cs-tools label {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        cursor: pointer
    }

    .cs-empty {
        text-align: center;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.6;
        padding: 28px 20px
    }

    .cs-stats {
        margin-top: 10px;
        font-size: 12px;
        color: var(--faint)
    }

    .cs-count {
        font-size: 12.5px;
        color: var(--muted);
        margin: 0 2px 10px
    }

    .cs-card {
        margin-bottom: 12px
    }

    .cs-head {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
        flex-wrap: wrap
    }

    .cs-name {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.01em
    }

    .cs-meta {
        font-size: 12px;
        color: var(--muted);
        margin-top: 3px
    }

    .cs-status {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        font-size: 11.5px;
        color: var(--muted)
    }

    .cs-track {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
        gap: 8px;
        margin-top: 14px
    }

    .cs-step {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        padding: 9px 10px;
        border-radius: 10px;
        background: var(--bg);
        font-size: 11.5px;
        min-width: 0
    }

    .cs-step i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex: 0 0 10px;
        margin-top: 3px;
        background: var(--line-strong)
    }

    .cs-step b {
        display: block;
        font-size: 11.5px;
        font-weight: 700
    }

    .cs-step span {
        display: block;
        color: var(--muted)
    }

    .cs-step em {
        display: block;
        font-style: normal;
        color: var(--text);
        margin-top: 2px;
        word-break: break-word
    }

    .cs-step.done i {
        background: var(--green)
    }

    .cs-step.current {
        background: var(--yellow-50);
        box-shadow: inset 0 0 0 1.5px var(--yellow)
    }

    .cs-step.current i {
        background: var(--yellow)
    }

    .cs-step.fail {
        background: var(--red-50)
    }

    .cs-step.fail i {
        background: var(--red)
    }

    .cs-step.skip {
        opacity: .55
    }

    .cs-step.skip i {
        background: transparent;
        border: 1.5px dashed var(--faint)
    }

    .cs-step.todo {
        opacity: .45
    }

    .cs-extra {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
        font-size: 12px
    }

    .cs-note {
        margin-top: 10px;
        font-size: 12px;
        color: var(--muted);
        background: var(--bg);
        border-radius: 8px;
        padding: 8px 10px
    }

    /* ==========================================================================
   MODAL EKSPOR
   ========================================================================== */
    .modal {
        position: fixed;
        inset: 0;
        background: rgba(25, 25, 26, .45);
        z-index: 130;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px
    }

    .modal.show {
        display: flex
    }

    .modal-box {
        background: var(--surface);
        border-radius: 18px;
        padding: 24px 22px 18px;
        max-width: 360px;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .25)
    }

    .modal-box h3 {
        margin: 0;
        font-size: 17px
    }

    .modal-box p {
        margin: 0;
        font-size: 12.5px;
        color: var(--muted);
        line-height: 1.6;
        word-break: break-word
    }

    .modal-icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--green-50);
        color: var(--green);
        display: grid;
        place-items: center;
        margin: 0 auto
    }

    .modal-icon svg {
        width: 22px;
        height: 22px
    }

    .modal-btn {
        justify-content: center;
        height: 42px;
        font-size: 13.5px;
        text-decoration: none;
        width: 100%
    }

    /* Tata letak desktop sementara saat ekspor dari HP */
    body.export-wide {
        overflow-x: auto
    }

    body.export-wide .app {
        display: block
    }

    body.export-wide .sidebar {
        display: none !important
    }

    body.export-wide .main {
        width: 1360px !important;
        min-width: 1360px;
        padding: 22px 26px 40px
    }

    body.export-wide .g-2 {
        grid-template-columns: 1.35fr 1fr !important
    }

    body.export-wide .g-2e {
        grid-template-columns: 1fr 1fr !important
    }

    body.export-wide .g-3 {
        grid-template-columns: repeat(3, 1fr) !important
    }

    body.export-wide .oh-pillars,
    body.export-wide .oh-method-grid {
        grid-template-columns: repeat(3, 1fr) !important
    }

    body.export-wide .vs-grid {
        grid-template-columns: repeat(4, 1fr) !important
    }

    body.export-wide .vs-val {
        font-size: 28px
    }

    body.export-wide .controls {
        display: none
    }

    /* ==========================================================================
   HiPE 2.0 — benchmark, cakupan data, workforce economics
   ========================================================================== */
    .op-ind {
        cursor: pointer;
        border-radius: 6px
    }

    .op-ind:hover {
        background: var(--bg)
    }

    .op-ind.na .d {
        background: transparent;
        border: 1.5px dashed var(--faint)
    }

    .op-ind.na .l {
        color: var(--muted)
    }

    .op-ind.na b {
        font-weight: 600;
        color: var(--faint);
        font-size: 11px
    }

    .op-cov {
        font-size: 10.5px;
        color: var(--faint);
        margin: -4px 0 8px
    }

    .op-cov.ind {
        color: #8A6D00
    }

    .bt {
        display: inline-block;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .04em;
        padding: 1px 5px;
        border-radius: 4px;
        margin-left: 5px;
        vertical-align: 1px
    }

    .bt-mgmt {
        background: var(--blue-50);
        color: var(--blue)
    }

    .bt-reg {
        background: var(--red-50);
        color: var(--red)
    }

    .bt-ext {
        background: var(--yellow-50);
        color: #8A6D00
    }

    .bt-int {
        background: var(--green-50);
        color: var(--green)
    }

    .bt-prop {
        background: var(--pink-50);
        color: #B8306B
    }

    .bt-acu {
        background: #E2F3F0;
        color: #0F7A6E
    }

    body.dark .bt-acu {
        background: #12302C;
        color: #5FD3C2
    }

    .bm-box {
        max-width: 560px;
        text-align: left;
        max-height: 88vh;
        overflow: auto
    }

    .bm-pillar {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--red)
    }

    .bm-box h3 {
        margin: 2px 0 8px
    }

    .bm-big {
        font-family: var(--font-display);
        font-stretch: 112%;
        font-weight: 800;
        font-size: 30px;
        margin: 12px 0 4px;
        line-height: 1.1
    }

    .bm-big span {
        display: block;
        font-family: 'Geist', sans-serif;
        font-stretch: 100%;
        font-size: 12px;
        font-weight: 500;
        color: var(--muted)
    }

    .bm-why {
        font-size: 12.5px;
        color: var(--muted);
        margin: 6px 0 12px
    }

    .bm-tbl {
        width: 100%;
        font-size: 12px;
        border-collapse: collapse
    }

    .bm-tbl th {
        text-align: left;
        vertical-align: top;
        color: var(--muted);
        font-weight: 600;
        width: 34%;
        padding: 7px 8px 7px 0;
        border-top: 1px solid var(--line);
        text-transform: none;
        letter-spacing: 0;
        font-size: 11.5px;
        position: static;
        background: none
    }

    .bm-tbl td {
        padding: 7px 0;
        border-top: 1px solid var(--line);
        white-space: normal;
        max-width: none
    }

    .bm-note {
        font-size: 10.5px;
        color: var(--faint);
        margin-top: 3px;
        white-space: normal
    }

    .bm-matrix td {
        white-space: normal;
        max-width: 260px;
        vertical-align: top;
        font-size: 11.5px
    }

    .bm-matrix {
        max-height: 560px;
        margin-top: 12px
    }

    .bm-legend {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        font-size: 11px;
        color: var(--muted);
        margin: 10px 0 0
    }

    .we-body {
        display: flex;
        flex-direction: column;
        gap: 14px
    }

    .we-empty {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.65
    }

    .we-diag {
        margin-top: 10px;
        font-size: 11.5px;
        background: var(--bg);
        border-radius: 8px;
        padding: 10px 12px;
        color: var(--text)
    }

    .we-na {
        color: var(--faint);
        font-size: 17px;
        font-weight: 700
    }

    .we-banner {
        background: var(--sky-50)
    }

    body.dark .bt-mgmt {
        color: var(--sky)
    }

    body.dark .bt-ext {
        color: var(--yellow)
    }

    body.dark .bt-prop {
        color: var(--pink)
    }

    /* ---------- Responsif ---------- */
    @media (max-width:1180px) {

        .oh-pillars,
        .oh-method-grid {
            grid-template-columns: 1fr 1fr
        }

        .vs-grid {
            grid-template-columns: repeat(2, 1fr)
        }

        .g-2,
        .g-2e {
            grid-template-columns: 1fr
        }

        .g-3 {
            grid-template-columns: 1fr 1fr
        }
    }

    @media (max-width:860px) {
        .app {
            flex-direction: column
        }

        .sidebar {
            width: 100%;
            flex: none;
            height: auto;
            position: relative;
            border-right: none;
            border-bottom: 1px solid var(--line)
        }

        .nav {
            flex-direction: row;
            overflow-x: auto;
            gap: 6px
        }

        .nav-label,
        .side-tag {
            display: none
        }

        .main {
            padding: 16px 14px 32px
        }

        .g-3 {
            grid-template-columns: 1fr
        }

        .funnel-row {
            grid-template-columns: 88px 1fr 62px
        }

        .brandbar .bb-left {
            border-right: none;
            padding-right: 0
        }

        .nav-group,
        .nav-group .nav-sub,
        .nav-group:not(.open) .nav-sub {
            display: contents !important
        }

        .nav-parent,
        .nav-sublabel {
            display: none
        }

        .oh-pillars,
        .oh-method-grid {
            grid-template-columns: 1fr
        }

        .vs-grid {
            grid-template-columns: 1fr 1fr
        }

        .vs-val {
            font-size: 22px
        }

        .side-cta,
        .side-foot {
            display: none
        }

        .cs-track {
            grid-template-columns: 1fr 1fr
        }

        .cs-status {
            align-items: flex-start
        }

        .controls .ctl.png,
        .controls .ctl.pdf {
            padding: 0 10px
        }

        .ct-row {
            grid-template-columns: 110px 1fr 62px
        }

        .brand {
            flex-direction: row;
            align-items: center;
            gap: 10px;
            padding-bottom: 10px
        }
    }

    @media print {

        .sidebar,
        .controls,
        .filterbar,
        .filter-reset {
            display: none !important
        }

        .brandbar {
            box-shadow: none
        }

        body {
            background: #fff
        }

        .card,
        .kpi {
            break-inside: avoid;
            box-shadow: none
        }
    }

    /* ---------- v7: Manpower Cost per brand & Leadership Health ---------- */
    .mom {
        font-size: 10.5px;
        font-weight: 600;
        margin-left: 5px;
        white-space: nowrap;
        color: var(--muted)
    }

    .mom.up {
        color: var(--red)
    }

    .mom.dn {
        color: var(--green)
    }

    .muted {
        color: var(--faint);
        font-size: 11.5px
    }

    .brand-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 7px;
        vertical-align: middle
    }

    .we-src {
        color: var(--muted);
        font-size: 11.5px
    }

    .we-link {
        margin-left: 6px;
        border: 0;
        background: none;
        color: var(--blue);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
        padding: 0
    }

    .we-link:hover {
        text-decoration: underline
    }

    .oh-pillar.wide {
        grid-column: 1/-1
    }

    .oh-pillar.wide .op-inds {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 22px
    }

    .nb-wrap {
        display: grid;
        grid-template-columns: 18px 1fr;
        grid-template-rows: 1fr auto;
        gap: 6px
    }

    .nb-y {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 11px;
        color: var(--muted);
        text-align: center
    }

    .nb-x {
        grid-column: 2;
        font-size: 11px;
        color: var(--muted);
        text-align: center
    }

    .nb-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px
    }

    .nb-cell {
        border-radius: 10px;
        padding: 10px 11px;
        min-height: 84px;
        border: 1px solid var(--line)
    }

    .nb-n {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.1
    }

    .nb-k {
        font-size: 11px;
        line-height: 1.3;
        margin-top: 3px
    }

    .nb-p {
        font-size: 10.5px;
        color: var(--muted);
        margin-top: 2px
    }

    .nb-g {
        background: var(--green-50)
    }

    .nb-g .nb-n {
        color: var(--green)
    }

    .nb-w {
        background: var(--yellow-50)
    }

    .nb-w .nb-n {
        color: #9A7B00
    }

    .nb-o {
        background: var(--blue-50)
    }

    .nb-o .nb-n {
        color: var(--blue)
    }

    .nb-r {
        background: var(--red-50)
    }

    .nb-r .nb-n {
        color: var(--red)
    }

    .nb-cell.nb-0 {
        opacity: .55
    }

    body.dark .nb-w .nb-n {
        color: var(--yellow)
    }

    @media (max-width:760px) {
        .oh-pillar.wide .op-inds {
            grid-template-columns: 1fr
        }

        .nb-cell {
            min-height: 70px;
            padding: 8px
        }

        .nb-n {
            font-size: 20px
        }
    }

    /* ---------- v8: HCGA Project Planning ---------- */
    .hcp-q {
        min-width: 200px
    }

    .select.hcp-q {
        background-image: none;
        padding-right: 12px;
        cursor: text
    }

    #tblHcp td {
        white-space: normal;
        vertical-align: top
    }

    #tblHcp td:nth-child(4),
    #tblHcp td:nth-child(6),
    #tblHcp td:nth-child(7) {
        white-space: nowrap
    }

    .hcp-add {
        margin-left: auto
    }

    .hcp-name {
        font-weight: 600;
        line-height: 1.35;
        min-width: 220px
    }

    .hcp-note {
        font-size: 11.5px;
        color: var(--muted);
        margin-top: 3px;
        line-height: 1.4;
        max-width: 420px
    }

    .hcp-meta {
        font-size: 11px;
        color: var(--faint);
        margin-top: 3px
    }

    .hcp-hi {
        color: var(--red);
        font-weight: 600
    }

    .hcp-late {
        font-size: 11px;
        color: var(--red);
        font-weight: 600;
        margin-top: 2px
    }

    .hcp-soon {
        font-size: 11px;
        color: #9A7B00;
        font-weight: 600;
        margin-top: 2px
    }

    .hcp-stt {
        height: 32px;
        font-size: 12px;
        padding: 0 26px 0 9px;
        min-width: 124px;
        border-width: 1.5px
    }

    .hcp-bar {
        display: inline-block;
        width: 70px;
        height: 6px;
        border-radius: 4px;
        background: var(--line);
        overflow: hidden;
        vertical-align: middle
    }

    .hcp-bar i {
        display: block;
        height: 100%
    }

    .hcp-pct {
        font-size: 11.5px;
        margin-left: 6px;
        color: var(--muted)
    }

    .hcp-link {
        color: var(--blue);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap
    }

    .hcp-link:hover {
        text-decoration: underline
    }

    .hcp-box {
        max-width: 620px;
        text-align: left;
        max-height: 92vh;
        overflow: auto
    }

    .hcp-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 14px;
        margin-top: 6px
    }

    .hcp-form label {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted)
    }

    .hcp-form .full {
        grid-column: 1/-1
    }

    .hcp-form input,
    .hcp-form select,
    .hcp-form textarea {
        font: inherit;
        font-size: 13px;
        font-weight: 400;
        color: var(--text);
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 9px 11px;
        outline: none;
        width: 100%;
        box-sizing: border-box
    }

    .hcp-form input:focus,
    .hcp-form select:focus,
    .hcp-form textarea:focus {
        border-color: var(--blue)
    }

    .hcp-form input:disabled {
        opacity: .6
    }

    .hcp-hint {
        font-size: 11px;
        font-weight: 400;
        color: var(--faint)
    }

    .hcp-hint.warn {
        color: var(--red);
        font-weight: 600
    }

    .hcp-err {
        color: var(--red);
        font-size: 12.5px;
        min-height: 16px
    }

    .hcp-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        align-items: center
    }

    .hcp-actions .ctl {
        height: 40px;
        padding: 0 20px
    }

    @media (max-width:640px) {
        .hcp-form {
            grid-template-columns: 1fr
        }

        .hcp-add {
            margin-left: 0
        }

        .hcp-q {
            min-width: 0;
            width: 100%
        }
    }

    /* ---------- v9: status baru & bulk update ---------- */
    .hcp-auto {
        font-size: 10.5px;
        color: var(--red);
        margin-top: 3px
    }

    .hcp-tool {
        height: 38px;
        padding: 0 13px;
        font-size: 12.5px
    }

    .hcp-tool svg {
        width: 15px;
        height: 15px
    }

    .bk-box {
        max-width: 860px;
        text-align: left;
        max-height: 90vh;
        display: flex;
        flex-direction: column
    }

    .bk-box .pill {
        margin-right: 4px
    }

    .bk-table {
        flex: 1;
        overflow: auto;
        max-height: 52vh;
        border: 1px solid var(--line);
        border-radius: 12px;
        margin-top: 4px
    }

    .bk-table td {
        white-space: normal;
        vertical-align: top;
        font-size: 12.5px
    }

    .bk-note {
        font-size: 12px;
        color: var(--muted);
        margin-top: 8px
    }

    .bk-err {
        color: var(--red);
        font-size: 12px
    }

    .bk-warn {
        color: #9A7B00;
        font-size: 11.5px;
        margin-top: 2px
    }

    .bk-done {
        font-size: 13.5px;
        margin-bottom: 4px
    }

    @media (max-width:640px) {
        .hcp-tool {
            flex: 1;
            justify-content: center
        }
    }

    /* ---------- v10: hapus project, Board Bulanan, Kalender ---------- */
    .hcp-acts {
        display: flex;
        gap: 2px
    }

    .hcp-del {
        color: var(--muted)
    }

    .hcp-del:hover {
        color: var(--red)
    }

    .hcp-del-btn {
        color: var(--red);
        margin-right: auto
    }

    .hd-icon {
        background: var(--red-50);
        color: var(--red)
    }

    .hd-ok {
        background: var(--red) !important;
        color: #fff !important;
        border-color: var(--red) !important
    }

    .hcp-views {
        display: flex;
        gap: 2px;
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 3px;
        margin-left: auto;
        margin-right: 10px
    }

    .hcp-view {
        border: 0;
        background: none;
        font: inherit;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--muted);
        padding: 6px 12px;
        border-radius: 8px;
        cursor: pointer
    }

    .hcp-view.on {
        background: var(--surface);
        color: var(--text);
        box-shadow: var(--shadow-sm)
    }

    /* warna status */
    .st-starting {
        --st: #A3A39C
    }

    .st-on-track {
        --st: #004CC2
    }

    .st-overdue {
        --st: #E50008
    }

    .st-complete {
        --st: #00801C
    }

    .st-hold {
        --st: #E0B800
    }

    .st-cancelled {
        --st: #F799BF
    }

    /* Board */
    .hb-wrap {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding: 4px 2px 10px;
        scroll-snap-type: x proximity
    }

    .hb-col {
        flex: 0 0 272px;
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        max-height: 640px;
        scroll-snap-align: start
    }

    .hb-col.cur {
        border-color: var(--blue);
        box-shadow: 0 0 0 1px var(--blue) inset
    }

    .hb-col.past .hb-title {
        color: var(--muted)
    }

    .hb-head {
        padding: 12px 13px 10px;
        border-bottom: 1px solid var(--line)
    }

    .hb-title {
        font-weight: 700;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 7px
    }

    .hb-now {
        font-size: 10px;
        font-weight: 700;
        background: var(--blue);
        color: #fff;
        border-radius: 20px;
        padding: 2px 7px
    }

    .hb-sub {
        font-size: 11.5px;
        color: var(--muted);
        margin: 3px 0 8px
    }

    .hb-sub b {
        color: var(--red)
    }

    .hb-bar {
        display: flex;
        height: 5px;
        border-radius: 4px;
        overflow: hidden;
        background: var(--line)
    }

    .hb-bar i {
        display: block;
        height: 100%;
        background: var(--st)
    }

    .hb-list {
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto
    }

    .hb-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-left: 4px solid var(--st);
        border-radius: 10px;
        padding: 9px 10px;
        cursor: pointer;
        transition: box-shadow .15s, transform .15s
    }

    .hb-card:hover,
    .hb-card:focus {
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
        outline: none
    }

    .hb-card.late {
        background: linear-gradient(0deg, var(--red-50), var(--red-50)), var(--surface)
    }

    .hb-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px
    }

    .hb-date {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--muted)
    }

    .hb-stt {
        font-size: 10px;
        font-weight: 700;
        color: var(--st);
        text-transform: uppercase;
        letter-spacing: .03em
    }

    .hb-name {
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.35
    }

    .hb-meta {
        font-size: 11px;
        color: var(--faint);
        margin-top: 3px
    }

    .hb-foot {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 7px;
        font-size: 10.5px;
        color: var(--muted)
    }

    .hb-foot .hcp-bar {
        flex: 1;
        width: auto;
        height: 4px
    }

    .hb-foot .hcp-bar i {
        background: var(--st)
    }

    .hb-link {
        color: var(--blue);
        text-decoration: none;
        font-weight: 700
    }

    .hb-empty {
        font-size: 12px;
        color: var(--faint);
        text-align: center;
        padding: 14px 0
    }

    .hb-add {
        border: 1px dashed var(--line-strong);
        background: none;
        border-radius: 10px;
        padding: 7px;
        font: inherit;
        font-size: 12px;
        color: var(--muted);
        cursor: pointer
    }

    .hb-add:hover {
        color: var(--blue);
        border-color: var(--blue)
    }

    /* Kalender */
    .hc-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 10px
    }

    .hc-nav {
        display: flex;
        align-items: center;
        gap: 6px
    }

    .hc-nav h3 {
        margin: 0 6px;
        font-size: 18px;
        min-width: 170px;
        text-align: center
    }

    .hc-go {
        font-size: 16px;
        font-weight: 700;
        min-width: 34px
    }

    .hc-sum {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        font-size: 12px;
        color: var(--muted)
    }

    .hc-sum span {
        display: flex;
        align-items: center;
        gap: 5px
    }

    .hc-sum i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--st)
    }

    .hc-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        background: var(--line);
        gap: 1px
    }

    .hc-dow {
        background: var(--bg);
        font-size: 11px;
        font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: 8px 10px
    }

    .hc-day {
        background: var(--surface);
        min-height: 112px;
        padding: 6px 6px 8px;
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0
    }

    .hc-day.out {
        background: var(--bg)
    }

    .hc-day.wkend,
    .hc-dow.wkend {
        background: color-mix(in srgb, var(--bg) 60%, var(--surface))
    }

    .hc-dn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        padding: 0 2px 2px
    }

    .hc-dn em {
        font-style: normal;
        font-size: 10px;
        background: var(--bg);
        border-radius: 10px;
        padding: 0 6px
    }

    .hc-day.gone .hc-dn span {
        color: var(--faint)
    }

    .hc-day.today .hc-dn span {
        background: var(--red);
        color: #fff;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center
    }

    .hc-chip {
        font-size: 11px;
        line-height: 1.3;
        padding: 3px 6px;
        border-radius: 6px;
        background: color-mix(in srgb, var(--st) 14%, transparent);
        border-left: 3px solid var(--st);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        color: var(--text)
    }

    .hc-chip:hover {
        background: color-mix(in srgb, var(--st) 26%, transparent)
    }

    .hc-more {
        font-size: 10.5px;
        color: var(--blue);
        font-weight: 600;
        cursor: pointer;
        padding-left: 4px
    }

    .ha-head {
        font-weight: 700;
        font-size: 13.5px;
        margin: 18px 0 8px
    }

    .ha-head span {
        font-weight: 400;
        color: var(--faint);
        font-size: 12px
    }

    .ha-wrap {
        display: flex;
        flex-direction: column;
        gap: 8px
    }

    .ha-day {
        display: grid;
        grid-template-columns: 54px 1fr;
        gap: 10px;
        align-items: start
    }

    .ha-date {
        text-align: center;
        background: var(--bg);
        border-radius: 10px;
        padding: 6px 0
    }

    .ha-date b {
        display: block;
        font-size: 18px
    }

    .ha-date span {
        font-size: 10.5px;
        color: var(--muted)
    }

    .ha-day.today .ha-date {
        background: var(--red);
        color: #fff
    }

    .ha-day.today .ha-date span {
        color: #fff
    }

    .ha-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 8px
    }

    @media (max-width:760px) {
        .hcp-views {
            margin: 8px 0 0;
            width: 100%
        }

        .hcp-view {
            flex: 1;
            padding: 7px 4px
        }

        .hc-grid {
            display: none
        }

        .hc-nav h3 {
            min-width: 0;
            font-size: 16px
        }

        .hb-col {
            flex-basis: 240px
        }
    }

    body.export-wide .hc-grid {
        display: grid !important
    }

    /* ---------- v12: Kondisi Kepemimpinan di Organization Health ---------- */
    #ohLead {
        margin-top: 6px
    }

    .ol-meta {
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0
    }

    .ol-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1.25fr;
        gap: 14px;
        margin-bottom: 14px
    }

    .ol-grid .card {
        margin: 0;
        min-width: 0
    }

    .nb-sm .nb-cell {
        min-height: 58px;
        padding: 7px 9px
    }

    .nb-sm .nb-n {
        font-size: 20px
    }

    .ol-msg {
        font-size: 12px;
        color: var(--muted);
        margin-top: 10px;
        line-height: 1.5
    }

    .ol-row {
        display: grid;
        grid-template-columns: 10px 1fr auto;
        gap: 9px;
        align-items: start;
        padding: 8px 0;
        border-bottom: 1px solid var(--line)
    }

    .ol-row:last-of-type {
        border-bottom: 0
    }

    .ol-row .d {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-top: 5px
    }

    .ol-row .l {
        font-size: 12.5px;
        line-height: 1.35
    }

    .ol-row .l em {
        display: block;
        font-style: normal;
        font-size: 11px;
        color: var(--faint);
        margin-top: 2px
    }

    .ol-row b {
        font-size: 14px;
        white-space: nowrap
    }

    .ol-h {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--muted);
        margin: 14px 0 6px;
        display: flex;
        justify-content: space-between
    }

    .ol-h a {
        color: var(--blue);
        text-decoration: none;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 600
    }

    .ol-sess {
        display: grid;
        grid-template-columns: 86px 1fr auto;
        gap: 2px 10px;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px dashed var(--line);
        font-size: 12px
    }

    .ol-sess span:first-child {
        color: var(--muted);
        font-size: 11px;
        grid-row: span 2
    }

    .ol-sess b {
        font-weight: 600;
        line-height: 1.3
    }

    .ol-sess em {
        font-style: normal;
        font-size: 11px;
        color: var(--faint);
        grid-column: 2
    }

    .ol-sess .pill,
    .ol-sess .ol-st {
        grid-column: 3;
        grid-row: 1 / span 2
    }

    .ol-st {
        font-size: 10px;
        font-weight: 700;
        color: var(--st);
        text-transform: uppercase
    }

    @media (max-width:1100px) {
        .ol-grid {
            grid-template-columns: 1fr 1fr
        }

        .ol-grid .card:last-child {
            grid-column: 1/-1
        }
    }

    @media (max-width:760px) {
        .ol-grid {
            grid-template-columns: 1fr
        }
    }

    body.export-wide .ol-grid {
        grid-template-columns: 1fr 1fr 1.25fr !important
    }

    /* ---------- v14: People Development ---------- */
    .tr-note {
        margin-top: -4px
    }

    .tr-note a,
    .ldv-hint a {
        color: var(--blue);
        font-weight: 600;
        text-decoration: none
    }

    .ldv-act {
        font-size: 12px;
        color: var(--muted);
        white-space: normal;
        display: inline-block;
        min-width: 150px;
        max-width: 260px
    }

    #tblLdvBox td,
    #tblLdvComp td {
        white-space: normal
    }

    .nb-dot {
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 6px
    }

    .nb-dot.nb-g {
        background: var(--green-50);
        color: var(--green)
    }

    .nb-dot.nb-w {
        background: var(--yellow-50);
        color: #9A7B00
    }

    .nb-dot.nb-o {
        background: var(--blue-50);
        color: var(--blue)
    }

    .nb-dot.nb-r {
        background: var(--red-50);
        color: var(--red)
    }

    .ldv-prio {
        font-size: 12.5px;
        background: var(--bg);
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 8px;
        line-height: 1.5
    }

    .ldv-hint {
        font-size: 11.5px;
        color: var(--faint);
        margin-top: 10px
    }

    /* ---------- v15: Talent Management & Leader Coaching ---------- */
    .co-tools {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
        margin-left: auto
    }

    .co-tools .ctl {
        height: 38px;
        padding: 0 14px
    }

    .co-note {
        font-size: 12.5px;
        color: var(--muted);
        margin-top: 10px;
        line-height: 1.5
    }

    .co-st {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--st);
        background: color-mix(in srgb, var(--st) 12%, transparent);
        padding: 2px 8px;
        border-radius: 20px
    }

    #tblCo td {
        white-space: normal;
        vertical-align: top
    }

    .ld-link {
        color: var(--blue);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap
    }

    @media (max-width:760px) {
        .co-tools {
            width: 100%;
            margin-left: 0
        }

        .co-tools .select {
            flex: 1
        }
    }

    /* v17 — Leadership Development: tab Assessment · Rencana · Coaching */
    .ldv-tabs {
        display: flex;
        gap: 4px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 4px;
        position: sticky;
        top: 8px;
        z-index: 5;
        box-shadow: var(--shadow-sm)
    }

    .ldv-tab {
        flex: 1;
        border: 0;
        background: none;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        color: var(--muted);
        padding: 9px 12px;
        border-radius: 9px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px
    }

    .ldv-tab b {
        display: inline-grid;
        place-items: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-size: 11px;
        background: var(--bg);
        color: var(--muted)
    }

    .ldv-tab.on {
        background: var(--text);
        color: var(--surface)
    }

    .ldv-tab.on b {
        background: var(--surface);
        color: var(--text)
    }

    .ldv-cnt {
        font-size: 11px;
        opacity: .75
    }

    .ldv-pane {
        display: none;
        flex-direction: column;
        gap: inherit
    }

    .ldv-pane.on {
        display: contents
    }

    .co-sup {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-height: 420px;
        overflow: auto
    }

    .co-sup-item {
        border: 1px solid var(--line);
        border-left: 3px solid #E0B800;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 12.5px;
        line-height: 1.5
    }

    .co-sup-item .m {
        font-size: 11px;
        color: var(--muted);
        margin-bottom: 3px
    }

    .co-txt {
        font-size: 12px;
        line-height: 1.45;
        max-width: 300px;
        min-width: 180px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        cursor: pointer
    }

    .co-txt.open {
        -webkit-line-clamp: unset;
        display: block
    }

    .co-fu {
        font-size: 10.5px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 20px;
        white-space: nowrap
    }

    .co-fu.y {
        background: color-mix(in srgb, #E0B800 18%, transparent);
        color: #8a6d00
    }

    .co-fu.n {
        background: color-mix(in srgb, #00801C 12%, transparent);
        color: #00801C
    }

    @media (max-width:760px) {
        .ldv-tab {
            font-size: 11.5px;
            padding: 8px 4px;
            gap: 4px
        }

        .ldv-tab b {
            display: none
        }
    }

    /* v18 — link bukti, revisi deadline, drag & drop project */
    .hl-chips {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 4px;
        vertical-align: middle
    }

    .hl-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 600;
        color: var(--blue);
        background: color-mix(in srgb, var(--blue) 9%, transparent);
        border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
        border-radius: 20px;
        padding: 2px 8px 2px 6px;
        text-decoration: none;
        white-space: nowrap;
        line-height: 1.4
    }

    .hl-chip:hover {
        background: var(--blue);
        color: #fff;
        border-color: var(--blue)
    }

    .hl-chip svg {
        width: 11px;
        height: 11px;
        flex: none
    }

    .hl-chip.mini {
        padding: 1px 3px;
        border-radius: 5px;
        gap: 0
    }

    .hl-chip.mini svg {
        width: 10px;
        height: 10px
    }

    .hb-links {
        margin-top: 6px
    }

    .hr-tag {
        display: inline-block;
        font-size: 9.5px;
        font-weight: 800;
        letter-spacing: .02em;
        color: #8a6d00;
        background: color-mix(in srgb, #E0B800 22%, transparent);
        border-radius: 4px;
        padding: 0 4px;
        margin-left: 5px;
        vertical-align: 1px;
        cursor: help
    }

    .hr-tag.max {
        color: #fff;
        background: var(--red)
    }

    .hcp-revline {
        font-size: 10.5px;
        color: var(--muted);
        margin-top: 3px;
        white-space: nowrap
    }

    .hcp-revline .hr-tag {
        margin: 0 3px 0 0
    }

    .hc-chip {
        display: flex;
        align-items: center;
        gap: 3px
    }

    .hc-chip .hr-tag {
        margin: 0;
        flex: none
    }

    .hc-chip .hl-chips {
        flex: none
    }

    .hc-nm {
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0
    }

    .hb-card[draggable="true"] {
        cursor: grab
    }

    .hb-card.dragging,
    .hc-chip.dragging {
        opacity: .45;
        transform: scale(.98)
    }

    .dnd-on .hb-col:not([data-m="none"]),
    .dnd-on .hc-day:not(.out) {
        transition: background .12s, box-shadow .12s
    }

    .dnd-on .hb-col:not([data-m="none"]) {
        border-style: dashed
    }

    .hb-col.drop-ok {
        background: color-mix(in srgb, var(--blue) 10%, var(--bg));
        box-shadow: 0 0 0 2px var(--blue) inset
    }

    .hc-day.drop-ok {
        background: color-mix(in srgb, var(--blue) 14%, var(--surface));
        box-shadow: 0 0 0 2px var(--blue) inset
    }

    .hcp-revbox {
        background: color-mix(in srgb, #E0B800 10%, transparent);
        border: 1px solid color-mix(in srgb, #E0B800 35%, transparent);
        border-radius: 10px;
        padding: 10px 12px
    }

    .hr-hist {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 12px;
        margin-top: 4px
    }

    .hr-h {
        font-weight: 700;
        font-size: 12px;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between
    }

    .hr-h span {
        font-weight: 600;
        color: var(--muted)
    }

    .hr-row {
        display: flex;
        gap: 10px;
        padding: 6px 0;
        border-top: 1px dashed var(--line)
    }

    .hr-row.first {
        border-top: 0;
        padding-top: 0
    }

    .hr-row>b {
        flex: 0 0 40px;
        font-size: 11px;
        color: var(--muted)
    }

    .hr-why {
        color: var(--text);
        margin-top: 2px
    }

    .hr-by {
        font-size: 10.5px;
        color: var(--faint);
        margin-top: 1px
    }

    .hr-none {
        font-size: 11.5px;
        color: var(--faint);
        padding-top: 4px
    }

    .hr-od {
        color: var(--red);
        font-style: normal;
        font-weight: 700;
        font-size: 10.5px
    }

    .hm-box {
        max-width: 480px
    }

    .hm-name {
        font-weight: 600;
        margin: 2px 0 14px;
        color: var(--muted);
        font-size: 13px
    }

    .hm-dates {
        display: flex;
        align-items: flex-end;
        gap: 12px;
        margin-bottom: 12px
    }

    .hm-dates>div,
    .hm-dates>label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 12px;
        flex: 1
    }

    .hm-dates span {
        color: var(--muted);
        font-size: 11.5px
    }

    .hm-dates b {
        font-size: 15px;
        padding: 8px 0
    }

    .hm-dates input {
        height: 38px;
        border: 1px solid var(--line-strong);
        border-radius: 9px;
        padding: 0 10px;
        font: inherit;
        background: var(--surface);
        color: var(--text)
    }

    .hm-arrow {
        flex: 0 0 auto !important;
        font-size: 18px;
        color: var(--muted);
        padding-bottom: 8px
    }

    .hm-lbl {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 6px
    }

    .hm-lbl textarea {
        border: 1px solid var(--line-strong);
        border-radius: 9px;
        padding: 8px 10px;
        font: inherit;
        background: var(--surface);
        color: var(--text);
        resize: vertical
    }

    #hmHist {
        margin-top: 10px
    }

    /* v19 — Manpower Cost format report */
    .mpr-box {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px 28px;
        background: color-mix(in srgb, var(--blue) 7%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
        border-radius: 14px;
        padding: 18px 22px
    }

    .mpr-col {
        font-size: 13px;
        line-height: 1.55;
        min-width: 0
    }

    .mpr-col p {
        margin: 0
    }

    .mpr-col ul {
        margin: 0;
        padding-left: 17px
    }

    .mpr-col li {
        margin-bottom: 5px
    }

    .mpr-h {
        font-weight: 700;
        font-size: 13.5px;
        margin-bottom: 8px
    }

    .mpr-h.nx {
        color: #C2410C
    }

    .mpr-src {
        grid-column: 1/-1;
        font-size: 11.5px;
        color: var(--muted);
        font-style: italic;
        border-top: 1px solid color-mix(in srgb, var(--blue) 15%, transparent);
        padding-top: 10px
    }

    .mpr-good {
        color: var(--green)
    }

    .mpr-bad {
        color: var(--red)
    }

    .mpr-pend {
        color: var(--muted);
        font-style: italic
    }

    .mpr-cap {
        font-size: 12.5px;
        line-height: 1.55;
        color: var(--muted);
        margin-top: 10px;
        padding: 10px 12px;
        background: var(--bg);
        border-radius: 10px
    }

    .mpr-cap b {
        color: var(--text)
    }

    @media (max-width:900px) {
        .mpr-box {
            grid-template-columns: 1fr
        }
    }

    /* v20 — Organization chart */
    .oc-bar {
        flex-wrap: wrap
    }

    .oc-search {
        display: flex;
        gap: 6px;
        flex: 1;
        min-width: 220px
    }

    .oc-search input {
        flex: 1
    }

    .oc-zoom {
        display: flex;
        gap: 4px
    }

    .oc-zoom .filter-reset {
        min-width: 36px;
        font-weight: 700
    }

    .oc-crumb a {
        color: var(--blue);
        text-decoration: none
    }

    .oc-crumb a:hover {
        text-decoration: underline
    }

    .oc-crumb span {
        color: var(--faint);
        margin: 0 3px
    }

    .oc-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 14px;
        font-size: 11.5px;
        color: var(--muted);
        margin-bottom: 10px
    }

    .oc-legend i {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 2px;
        margin-right: 5px;
        vertical-align: -1px
    }

    .oc-canvas {
        overflow: auto;
        max-height: calc(100vh - 220px);
        min-height: 420px;
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: 12px;
        cursor: grab;
        padding: 4px
    }

    .oc-canvas.panning {
        cursor: grabbing;
        user-select: none
    }

    .oc-svg {
        display: block;
        margin: 0 auto
    }

    .oc-lines path {
        stroke: var(--line-strong, #C9C9C2);
        stroke-width: 1.4;
        fill: none
    }

    .oc-box {
        fill: var(--surface);
        stroke: var(--line-strong, #D9D9D2);
        stroke-width: 1
    }

    .oc-node.has-team {
        cursor: pointer
    }

    .oc-node.has-team:hover .oc-box {
        stroke: var(--blue);
        stroke-width: 1.6
    }

    .oc-node.hit .oc-box {
        stroke: var(--red);
        stroke-width: 2.4
    }

    .oc-node text {
        font-family: Geist, system-ui, sans-serif
    }

    .oc-n {
        font-size: 12.5px;
        font-weight: 700;
        fill: var(--text)
    }

    .oc-p {
        font-size: 11px;
        fill: var(--muted)
    }

    .oc-o {
        font-size: 10px;
        fill: var(--faint)
    }

    .oc-node.k-root .oc-box {
        fill: var(--text);
        stroke: var(--text)
    }

    .oc-node.k-root .oc-n {
        fill: var(--surface)
    }

    .oc-node.k-root .oc-p,
    .oc-node.k-root .oc-o {
        fill: var(--faint)
    }

    .oc-node.k-out .oc-box,
    .oc-node.k-gap .oc-box {
        fill: color-mix(in srgb, #E0B800 10%, var(--surface));
        stroke: #E0B800;
        stroke-dasharray: 4 3
    }

    .oc-more rect {
        fill: var(--text)
    }

    .oc-more text {
        fill: var(--surface);
        font-size: 10px;
        font-weight: 700
    }

    .oc-hint {
        font-size: 11.5px;
        color: var(--muted);
        margin-top: 10px
    }

    .oc-notes {
        font-size: 13px;
        line-height: 1.55
    }

    .oc-notes ul {
        margin: 0;
        padding-left: 18px
    }

    .oc-notes li {
        margin-bottom: 5px
    }

    @media (max-width:760px) {
        .oc-canvas {
            max-height: 70vh
        }

        .oc-size {
            width: 100%
        }
    }

    /* v21 — org chart: buka/tutup tim, blok tim besar */
    .oc-head-r {
        display: flex;
        align-items: center;
        gap: 8px
    }

    .oc-head-r .ctl {
        height: 32px;
        padding: 0 12px;
        font-size: 12.5px
    }

    .oc-chk {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        color: var(--text);
        white-space: nowrap;
        cursor: pointer
    }

    .oc-panel {
        position: relative
    }

    .oc-panel-btn {
        text-align: left;
        min-width: 150px;
        cursor: pointer
    }

    .oc-panel-btn b {
        font-size: 10.5px;
        color: var(--red);
        margin-left: 4px
    }

    .oc-panel-box {
        display: none;
        position: absolute;
        z-index: 30;
        top: calc(100% + 6px);
        left: 0;
        width: 340px;
        max-height: 420px;
        background: var(--surface);
        border: 1px solid var(--line-strong);
        border-radius: 12px;
        box-shadow: var(--shadow);
        padding: 10px;
        flex-direction: column;
        gap: 8px
    }

    .oc-panel.open .oc-panel-box {
        display: flex
    }

    .oc-panel-acts {
        display: flex;
        gap: 4px;
        flex-wrap: wrap
    }

    .oc-panel-acts .filter-reset {
        font-size: 11.5px;
        padding: 5px 8px
    }

    .oc-panel-h {
        font-size: 10.5px;
        color: var(--faint)
    }

    .oc-panel-list {
        overflow: auto;
        flex: 1;
        min-height: 0;
        border-top: 1px solid var(--line);
        padding-top: 4px
    }

    .oc-pl {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12.5px;
        padding: 4px 6px;
        border-radius: 6px;
        cursor: pointer
    }

    .oc-pl:hover {
        background: var(--bg)
    }

    .oc-pl span {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .oc-pl em {
        font-style: normal;
        font-size: 10.5px;
        color: var(--faint)
    }

    .oc-tog rect {
        fill: var(--surface);
        stroke: var(--line-strong);
        stroke-width: 1
    }

    .oc-tog text {
        font-size: 11px;
        font-weight: 700;
        fill: var(--muted)
    }

    .oc-tog.closed rect {
        fill: var(--text);
        stroke: var(--text)
    }

    .oc-tog.closed text {
        fill: var(--surface)
    }

    .oc-node.has-team:hover .oc-tog rect {
        stroke: var(--blue)
    }

    .oc-focus rect {
        fill: transparent
    }

    .oc-focus path {
        stroke: var(--faint);
        stroke-width: 1.4;
        fill: none;
        stroke-linecap: round
    }

    .oc-focus {
        cursor: zoom-in
    }

    .oc-focus:hover rect {
        fill: var(--bg)
    }

    .oc-focus:hover path {
        stroke: var(--blue)
    }

    .oc-blk-bg {
        fill: var(--surface);
        stroke: var(--line-strong);
        stroke-width: 1
    }

    .oc-blk-hd {
        fill: color-mix(in srgb, var(--text) 6%, var(--surface))
    }

    .oc-blk-t {
        font-size: 11.5px;
        font-weight: 700;
        fill: var(--text)
    }

    .oc-cnt rect {
        fill: var(--text)
    }

    .oc-cnt text {
        fill: var(--surface);
        font-size: 10px;
        font-weight: 700
    }

    .oc-row-n {
        font-size: 11px;
        fill: var(--text)
    }

    .oc-row-p {
        font-size: 9.5px;
        fill: var(--faint)
    }

    .oc-row-hit {
        fill: color-mix(in srgb, var(--red) 14%, transparent)
    }

    .oc-blk text {
        font-family: Geist, system-ui, sans-serif
    }

    @media (max-width:760px) {
        .oc-panel-box {
            width: calc(100vw - 48px)
        }
    }

    /* v22 — OHI per bulan & tracker, department cost */
    .oh-mode {
        display: inline-block;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding: 2px 7px;
        border-radius: 20px;
        margin-right: 4px
    }

    .oh-mode.live {
        background: color-mix(in srgb, var(--green) 15%, transparent);
        color: var(--green)
    }

    .oh-mode.snap {
        background: color-mix(in srgb, var(--blue) 14%, transparent);
        color: var(--blue)
    }

    .oh-mode.recon {
        background: color-mix(in srgb, #E0B800 22%, transparent);
        color: #8a6d00
    }

    .oht-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 18px;
        align-items: start
    }

    .oht {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px
    }

    .oht th {
        font-size: 10.5px;
        color: var(--muted);
        font-weight: 700;
        padding: 4px 4px 8px;
        text-align: center;
        white-space: nowrap
    }

    .oht th.sel {
        color: var(--text)
    }

    .oht-src {
        font-weight: 500;
        font-size: 9px;
        color: var(--faint);
        text-transform: none
    }

    .oht td {
        padding: 3px 4px;
        border-top: 1px solid var(--line);
        white-space: nowrap
    }

    .oht td:first-child {
        font-weight: 600;
        color: var(--text)
    }

    .oht-main td {
        font-weight: 800
    }

    .oht-c {
        text-align: center
    }

    .oht-c span {
        display: inline-block;
        min-width: 30px;
        padding: 2px 6px;
        border-radius: 6px;
        font-weight: 700
    }

    .oht-c.sel span {
        outline: 2px solid currentColor
    }

    .oht-c.na {
        color: var(--faint)
    }

    .oht-d {
        text-align: right;
        font-weight: 700;
        color: var(--muted)
    }

    .oht-d.up {
        color: var(--green)
    }

    .oht-d.dn {
        color: var(--red)
    }

    .oht-note {
        font-size: 12.5px;
        line-height: 1.55;
        color: var(--muted);
        margin-top: 12px
    }

    .oht-note b {
        color: var(--text)
    }

    .oht-legend {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 6px;
        font-size: 11px
    }

    .oht-legend i {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        margin-right: 5px;
        vertical-align: -1px;
        border: 2px solid var(--muted)
    }

    .oht-legend i.s {
        background: var(--muted)
    }

    .oht-legend i.r {
        background: transparent
    }

    .oht-legend i.l {
        border-radius: 2px;
        transform: rotate(45deg);
        background: var(--muted)
    }

    .dc-peak {
        font-weight: 800;
        color: var(--text)
    }

    @media (max-width:900px) {
        .oht-grid {
            grid-template-columns: 1fr
        }
    }

    /* v23 — kualitas data */
    .dq-t {
        width: 100%;
        border-collapse: collapse;
        font-size: 12.5px
    }

    .dq-t th {
        text-align: left;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--muted);
        padding: 8px 10px;
        border-bottom: 1px solid var(--line)
    }

    .dq-t td {
        padding: 9px 10px;
        border-bottom: 1px solid var(--line);
        vertical-align: top
    }

    .dq-t tr.warn td:first-child {
        box-shadow: inset 3px 0 0 #E0B800
    }

    .dq-v {
        white-space: nowrap;
        font-weight: 600
    }

    .dq-d {
        color: var(--muted);
        line-height: 1.45;
        min-width: 260px
    }

    .dq-st {
        font-size: 10.5px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 20px;
        white-space: nowrap
    }

    .dq-st.ok {
        background: color-mix(in srgb, var(--green) 13%, transparent);
        color: var(--green)
    }

    .dq-st.warn {
        background: color-mix(in srgb, #E0B800 22%, transparent);
        color: #8a6d00
    }

    .dq-st.info {
        background: color-mix(in srgb, var(--blue) 12%, transparent);
        color: var(--blue)
    }

    /* v24 — kartu "dalam pengembangan" */
    .mpc-soon {
        display: grid;
        grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
        gap: 28px;
        align-items: center;
        border-style: dashed
    }

    .mpc-soon-art svg {
        width: 100%;
        height: auto;
        display: block
    }

    .ms-ground {
        stroke: var(--line-strong);
        stroke-width: 2
    }

    .ms-bar {
        fill: var(--blue)
    }

    .ms-bar.b2 {
        fill: #E50008
    }

    .ms-bar.b3 {
        fill: #00801C
    }

    .ms-bar.b4 {
        fill: #E0B800
    }

    .ms-ghost {
        fill: none;
        stroke: var(--line-strong);
        stroke-width: 2;
        stroke-dasharray: 5 4
    }

    .ms-crane line {
        stroke: var(--muted);
        stroke-width: 3;
        stroke-linecap: round
    }

    .ms-crane .ms-cable {
        stroke-width: 1.5
    }

    .ms-weight {
        fill: var(--muted)
    }

    .ms-cone path {
        fill: #E07A00
    }

    .ms-stripe {
        fill: #fff
    }

    .ms-tape {
        fill: #E0B800;
        opacity: .85
    }

    .ms-lift {
        animation: msLift 2.6s ease-in-out infinite
    }

    @keyframes msLift {

        0%,
        100% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(8px)
        }
    }

    @media (prefers-reduced-motion:reduce) {
        .ms-lift {
            animation: none
        }
    }

    .mpc-soon-tag {
        display: inline-block;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #8a6d00;
        background: color-mix(in srgb, #E0B800 22%, transparent);
        padding: 3px 9px;
        border-radius: 20px
    }

    .mpc-soon-txt h3 {
        margin: 10px 0 6px;
        font-size: 18px
    }

    .mpc-soon-txt p {
        margin: 0 0 10px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.6
    }

    .mpc-soon-txt ul {
        margin: 0;
        padding-left: 18px;
        font-size: 12.5px;
        color: var(--muted);
        line-height: 1.7
    }

    @media (max-width:820px) {
        .mpc-soon {
            grid-template-columns: 1fr
        }
    }

    /* ---------- v27: HCGA Calendar (Project & Event) ---------- */
    .ctl.solid.hcp-add-evt {
        margin-left: 0;
        background: #C2327A;
        border-color: #C2327A;
        color: #fff
    }

    .hcp-add-evt:hover {
        filter: brightness(1.08)
    }

    .hcp-ty {
        display: inline-block;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding: 1px 6px;
        border-radius: 999px;
        margin-right: 6px;
        vertical-align: 1px
    }

    .hcp-ty.prj {
        background: var(--blue-50, #E8F0FB);
        color: var(--blue, #004CC2)
    }

    .hcp-ty.evt {
        background: var(--pink-50);
        color: #C2327A
    }

    .hb-card.evt,
    .hc-chip.evt,
    .hc-sum .hc-evt {
        --st: #C2327A
    }

    .hb-card.evt.st-complete,
    .hc-chip.evt.st-complete {
        --st: #00801C
    }

    .hb-card.evt.st-hold,
    .hc-chip.evt.st-hold {
        --st: #E0B800
    }

    .hc-chip.evt {
        font-weight: 600
    }

    .hc-chip .hc-tm {
        flex: none;
        font-size: 10px;
        font-weight: 700;
        opacity: .8
    }

    .hb-adds {
        display: flex;
        gap: 6px
    }

    .hb-adds .hb-add {
        flex: 1
    }

    .hb-adds .hb-add[data-evt]:hover {
        color: #C2327A;
        border-color: #C2327A
    }

    .pf-typehint {
        align-self: end;
        padding-bottom: 8px
    }

    @media (max-width:640px) {
        .hcp-add-evt {
            flex: 1;
            justify-content: center
        }

        .pf-typehint {
            padding-bottom: 0
        }
    }

    /* ---------- v28: blok rentang di kalender HCGA ---------- */
    .hc-week {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1px;
        background: var(--line);
        position: relative
    }

    .hc-lanegap {
        flex: none
    }

    .hc-spans {
        position: absolute;
        inset: 0;
        pointer-events: none
    }

    .hc-span {
        position: absolute;
        height: 19px;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0 7px;
        border-radius: 6px;
        overflow: hidden;
        pointer-events: auto;
        cursor: pointer;
        font-size: 11px;
        font-weight: 600;
        color: var(--text);
        background: color-mix(in srgb, var(--st) 18%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--st) 55%, transparent);
        border-left: 3px solid var(--st);
        box-sizing: border-box
    }

    .hc-span:hover {
        background: color-mix(in srgb, var(--st) 30%, var(--surface));
        z-index: 2
    }

    .hc-span .hc-nm {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative
    }

    .hc-span .hc-tm {
        flex: none;
        font-size: 10px;
        opacity: .75;
        position: relative
    }

    .hc-span .hc-flag {
        flex: none;
        font-size: 10px;
        color: var(--st);
        position: relative
    }

    .hc-span .hc-prog {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background: color-mix(in srgb, var(--st) 16%, transparent);
        pointer-events: none
    }

    .hc-span.cut-l {
        border-left-width: 1px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .hc-span.cut-r {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .hc-span.late {
        box-shadow: 0 0 0 1px var(--red) inset
    }

    .hc-span.evt {
        --st: #C2327A
    }

    .hc-span.evt.st-complete {
        --st: #00801C
    }

    .hc-span.evt.st-hold {
        --st: #E0B800
    }

    .hc-span[draggable="true"] {
        cursor: grab
    }

    .hc-span.dragging {
        opacity: .45
    }

    .dnd-on .hc-span {
        pointer-events: none
    }

    .hc-spansel {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--muted);
        margin-left: auto
    }

    .hc-spansel .select {
        height: 32px;
        padding: 0 28px 0 10px;
        font-size: 12px
    }

    .hc-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        font-size: 11.5px;
        color: var(--muted);
        margin: 0 0 10px
    }

    .hc-legend span {
        display: flex;
        align-items: center;
        gap: 5px
    }

    .hc-legend .lg-span {
        width: 26px;
        height: 10px;
        border-radius: 3px;
        background: color-mix(in srgb, #004CC2 18%, var(--surface));
        border: 1px solid color-mix(in srgb, #004CC2 55%, transparent);
        border-left: 3px solid #004CC2
    }

    .hc-legend .lg-prog {
        width: 26px;
        height: 10px;
        border-radius: 3px;
        background: linear-gradient(90deg, color-mix(in srgb, #004CC2 34%, var(--surface)) 55%, color-mix(in srgb, #004CC2 12%, var(--surface)) 55%)
    }

    @media (max-width:760px) {

        .hc-legend,
        .hc-spansel {
            display: none
        }
    }