/* ── RESET & ROOT ──────────────────────────────────────────────────────── */
    .sipp2-wrap *,
    .sipp2-wrap *::before,
    .sipp2-wrap *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .sipp2-wrap {
        --ink: #12213d;
        --gold: #c8972a;
        --gold-lt: #e4b84b;
        --cream: #f8f3eb;
        --cream-dk: #ede5d6;
        --white: #ffffff;
        --slate: #4a5568;
        --slate-lt: #718096;
        --border: #ddd3bf;
        --red: #be3a2a;
        --green: #1a7a4a;
        --blue: #1a4a7a;
        --shadow: 0 4px 24px rgba(18, 33, 61, .10);
        --shadow-lg: 0 10px 48px rgba(18, 33, 61, .16);
        --radius: 10px;

        font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
        background: var(--cream);
        color: var(--ink);
        padding: 0;
        min-height: 100vh;
    }

    /* ── HEADER ─────────────────────────────────────────────────────────────── */
    .sipp2-header {
        background: var(--ink);
        padding: 28px 36px 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        border-bottom: 3px solid var(--gold);
    }

    .sipp2-branding {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .sipp2-logo {
        width: 52px;
        height: 52px;
        background: linear-gradient(135deg, var(--gold) 60%, var(--gold-lt));
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        box-shadow: 0 4px 12px rgba(200, 151, 42, .35);
    }

    .sipp2-title-wrap h1 {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 22px;
        font-weight: 700;
        color: var(--white);
        line-height: 1.2;
        letter-spacing: -.3px;
    }

    .sipp2-title-wrap p {
        font-size: 12px;
        color: rgba(255, 255, 255, .55);
        text-transform: uppercase;
        letter-spacing: .8px;
        margin-top: 3px;
    }

    /* ── YEAR FILTER ─────────────────────────────────────────────────────────── */
    .sipp2-year-filter {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .sipp2-year-filter label {
        color: rgba(255, 255, 255, .6);
        font-size: 13px;
    }

    .sipp2-year-filter a {
        display: inline-block;
        padding: 6px 16px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        color: rgba(255, 255, 255, .65);
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .12);
        text-decoration: none;
        transition: all .2s;
    }

    .sipp2-year-filter a:hover {
        background: rgba(200, 151, 42, .2);
        color: var(--gold-lt);
        border-color: var(--gold);
    }

    .sipp2-year-filter a.active {
        background: var(--gold);
        color: var(--ink);
        border-color: var(--gold);
    }

    /* ── CONTENT ─────────────────────────────────────────────────────────────── */
    .sipp2-body {
        padding: 28px 32px;
        max-width: 1320px;
        margin: 0 auto;
    }

    /* ── STAT CARDS ──────────────────────────────────────────────────────────── */
    .sipp2-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
        margin-bottom: 28px;
    }

    .sipp2-stat {
        background: var(--white);
        border-radius: var(--radius);
        padding: 20px 22px;
        box-shadow: var(--shadow);
        border-top: 3px solid var(--border);
        transition: transform .2s, box-shadow .2s;
    }

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

    .sipp2-stat.gold {
        border-color: var(--gold);
    }

    .sipp2-stat.blue {
        border-color: var(--blue);
    }

    .sipp2-stat.green {
        border-color: var(--green);
    }

    .sipp2-stat.red {
        border-color: var(--red);
    }

    .sipp2-stat.navy {
        border-color: var(--ink);
    }

    .sipp2-stat-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .8px;
        color: var(--slate-lt);
        font-weight: 600;
    }

    .sipp2-stat-value {
        font-size: 32px;
        font-weight: 700;
        color: var(--ink);
        line-height: 1.1;
        margin: 6px 0 4px;
        font-family: 'Playfair Display', serif;
    }

    .sipp2-stat-sub {
        font-size: 12px;
        color: var(--slate-lt);
    }

    /* ── PANELS ──────────────────────────────────────────────────────────────── */
    .sipp2-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }

    .sipp2-grid-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }

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

        .sipp2-grid-3 {
            grid-template-columns: 1fr;
        }
    }

    .sipp2-panel {
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
    }

    .sipp2-panel-full {
        grid-column: 1 / -1;
    }

    .sipp2-panel-head {
        background: var(--ink);
        padding: 14px 20px;
        border-bottom: 1px solid var(--cream-dk);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .sipp2-panel-head h3 {
        font-size: 14px;
        font-weight: 700;
        color: var(--white);
        font-family: 'Playfair Display', serif;
        letter-spacing: -.2px;
    }

    .sipp2-panel-icon {
        font-size: 16px;
    }

    .sipp2-panel-body {
        padding: 20px;
    }

    .sipp2-chart-wrap {
        position: relative;
        height: 300px;
    }

    .sipp2-chart-wrap.tall {
        height: 360px;
    }

    /* ── TABLE ───────────────────────────────────────────────────────────────── */
    .sipp2-table-wrap {
        overflow-x: auto;
    }

    .sipp2-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13.5px;
    }

    .sipp2-table thead tr {
        background: var(--ink);
        color: var(--white);
    }

    .sipp2-table thead th {
        padding: 11px 14px;
        text-align: left;
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .6px;
        white-space: nowrap;
    }

    .sipp2-table thead th.num {
        text-align: right;
    }

    .sipp2-table tbody tr {
        border-bottom: 1px solid var(--cream-dk);
        transition: background .15s;
    }

    .sipp2-table tbody tr:hover {
        background: var(--cream);
    }

    .sipp2-table tbody td {
        padding: 10px 14px;
    }

    .sipp2-table tbody td.num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .sipp2-table tfoot tr {
        background: var(--cream-dk);
        font-weight: 700;
    }

    .sipp2-table tfoot td {
        padding: 10px 14px;
    }

    .sipp2-table tfoot td.num {
        text-align: right;
    }

    .klas-badge {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        background: var(--cream-dk);
        color: var(--ink);
    }

    /* ── BADGES TRIWULAN ─────────────────────────────────────────────────────── */
    .tw-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .4px;
    }

    .tw-badge.tw1 {
        background: #dbeafe;
        color: #1e40af;
    }

    .tw-badge.tw2 {
        background: #dcfce7;
        color: #166534;
    }

    .tw-badge.tw3 {
        background: #fef3c7;
        color: #92400e;
    }

    .tw-badge.tw4 {
        background: #fee2e2;
        color: #991b1b;
    }

    /* ── YEARLY AGGREGATION TABLE ────────────────────────────────────────────── */
    .sipp2-table tbody tr.yr-active {
        background: rgba(200, 151, 42, .10);
        font-weight: 700;
    }

    .sipp2-table tbody tr.yr-active td {
        font-weight: 700;
    }

    .yr-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        background: #fef3c7;
        color: #92400e;
        letter-spacing: .4px;
    }

    /* ── NO DATA ─────────────────────────────────────────────────────────────── */
    .sipp2-empty {
        text-align: center;
        padding: 48px 20px;
        color: var(--slate-lt);
    }

    .sipp2-empty-icon {
        font-size: 48px;
        margin-bottom: 12px;
    }

    .sipp2-empty p {
        font-size: 15px;
    }

    /* ── FOOTER ──────────────────────────────────────────────────────────────── */
    .sipp2-footer {
        margin-top: 32px;
        padding: 16px 32px;
        border-top: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: var(--slate-lt);
        background: var(--cream-dk);
    }

    .sipp2-footer strong {
        color: var(--ink);
    }

    /* ── TABS ────────────────────────────────────────────────────────────────── */
    .sipp2-tab-nav {
        display: flex;
        gap: 4px;
        margin-bottom: 20px;
        border-bottom: 2px solid var(--border);
        padding-bottom: 0;
    }

    .sipp2-tab-btn {
        background: none;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        color: var(--slate-lt);
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        transition: all .2s;
        border-radius: 0;
    }

    .sipp2-tab-btn:hover {
        color: var(--ink);
    }

    .sipp2-tab-btn.active {
        color: var(--gold);
        border-bottom-color: var(--gold);
    }

    .sipp2-tab-pane {
        display: none;
    }

    .sipp2-tab-pane.active {
        display: block;
    }

    /* ── SECTION TITLE ───────────────────────────────────────────────────────── */
    .sipp2-section-title {
        font-family: 'Playfair Display', serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 4px;
    }

    .sipp2-section-sub {
        font-size: 13px;
        color: var(--slate-lt);
        margin-bottom: 20px;
    }

    /* ── DIVIDER ─────────────────────────────────────────────────────────────── */
    .sipp2-divider {
        border: none;
        border-top: 1px solid var(--border);
        margin: 28px 0;
    }