:root {
            --bg-dark: #0b0f19;
            --bg-surface: #111827;
            --bg-surface-hover: #172033;
            --border: rgba(255,255,255,0.06);
            --text-1: #f1f5f9;
            --text-2: #94a3b8;
            --text-3: #64748b;
            --accent-orange: #f97316;
            --accent-orange-hover: #ea580c;
            --accent-blue: #3b82f6;
            --accent-cyan: #06b6d4;
            --accent-purple: #a855f7;
            --accent-green: #22c55e;
            --accent-amber: #f59e0b;
            --accent-red: #ef4444;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-dark);
            color: var(--text-1);
            min-height: 100vh;
        }

        /* Glow */
        .bg-glow {
            position: fixed; top: -250px; left: -150px;
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(59,130,246,0.06) 0%, transparent 70%);
            pointer-events: none; z-index: 0;
        }

        /* ── Navbar ── */
        .navbar-jdih {
            background: rgba(11,15,25,0.88);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
            padding: .65rem 0;
            z-index: 1050;
            transition: all .3s;
        }
        .navbar-jdih.scrolled {
            background: rgba(11,15,25,0.96);
            box-shadow: 0 4px 30px rgba(0,0,0,.35);
        }
        .brand-wrap { display:flex; align-items:center; gap:10px; text-decoration:none; }
        .brand-icon {
            width:38px; height:38px;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
            border-radius:9px; display:flex; align-items:center; justify-content:center;
            font-weight:800; font-size:12px; color:#fff; letter-spacing:-.5px;
        }
        .brand-name { font-weight:700; font-size:1rem; color:var(--text-1); line-height:1.15; }
        .brand-sub { font-size:.62rem; color:var(--text-3); letter-spacing:1.8px; text-transform:uppercase; }

        .nav-link-j {
            color: var(--text-2) !important; font-weight:500; font-size:.84rem;
            padding: .45rem .85rem !important; border-radius:7px; transition:all .2s;
        }
        .nav-link-j:hover, .nav-link-j.active {
            color: var(--text-1) !important; background:rgba(59,130,246,.1);
        }
        .nav-link-j.active::after {
            content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
            width:18px; height:2px; background:var(--accent-blue); border-radius:2px;
        }

        .btn-login-orange {
            background: var(--accent-orange); border:none; color:#fff;
            font-weight:600; font-size:.8rem; padding:.42rem 1.2rem;
            border-radius:8px; transition:all .2s;
        }
        .btn-login-orange:hover {
            background: var(--accent-orange-hover); color:#fff;
            transform:translateY(-1px); box-shadow:0 4px 15px rgba(249,115,22,.35);
        }

        /* ── Page Header ── */
        .page-header {
            padding: 2.5rem 0 1.25rem;
        }
        .page-header h1 {
            font-size:1.75rem; font-weight:800; letter-spacing:-.8px;
        }
        .page-header h1 span {
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
            -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
        }
        .page-header p { color:var(--text-2); font-size:.92rem; }

        /* ── Search Bar ── */
        .search-bar {
            background: var(--bg-surface);
            border:1px solid var(--border);
            border-radius:12px; padding:1rem 1.25rem;
        }
        .s-input {
            background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
            border-radius:8px; color:var(--text-1); padding:.6rem .9rem .6rem 2.5rem;
            font-size:.85rem; transition:all .2s; width:100%;
        }
        .s-input:focus {
            background:rgba(255,255,255,.06); border-color:rgba(59,130,246,.4);
            box-shadow:0 0 0 3px rgba(59,130,246,.1); outline:none; color:var(--text-1);
        }
        .s-input::placeholder { color:var(--text-3); }
        .s-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-3); }
        .s-select {
            background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
            border-radius:8px; color:var(--text-1); padding:.6rem .9rem;
            font-size:.84rem; cursor:pointer; transition:all .2s; width:100%;
        }
        .s-select:focus { border-color:rgba(59,130,246,.4); box-shadow:0 0 0 3px rgba(59,130,246,.1); outline:none; color:var(--text-1); }
        .s-select option { background:#1e293b; }
        .btn-cari {
            background:var(--accent-blue); border:none; color:#fff;
            font-weight:600; font-size:.84rem; padding:.6rem 1.5rem;
            border-radius:8px; transition:all .2s; white-space:nowrap;
        }
        .btn-cari:hover { background:#2563eb; color:#fff; transform:translateY(-1px); box-shadow:0 4px 15px rgba(59,130,246,.3); }

        /* ── Info Row ── */
        .info-row {
            display:flex; align-items:center; justify-content:space-between;
            padding:.75rem 0; border-bottom:1px solid var(--border); margin-bottom:0;
        }
        .info-row .total { font-size:.82rem; color:var(--text-3); }
        .info-row .total strong { color:var(--text-1); }
        .per-page-wrap { display:flex; align-items:center; gap:6px; }
        .per-page-wrap label { font-size:.78rem; color:var(--text-3); margin:0; }
        .per-page-select {
            background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
            border-radius:6px; color:var(--text-1); padding:.25rem .5rem;
            font-size:.78rem; cursor:pointer;
        }
        .per-page-select:focus { outline:none; border-color:rgba(59,130,246,.4); }
        .per-page-select option { background:#1e293b; }

        /* ── Data Table ── */
        .table-wrap {
            background: var(--bg-surface);
            border:1px solid var(--border);
            border-radius:14px;
            overflow: hidden;
        }
        .table-jdih {
            width:100%; border-collapse:separate; border-spacing:0;
            margin-bottom:0;
        }
        .table-jdih thead th {
            background: rgba(255,255,255,.03);
            border-bottom:1px solid var(--border);
            padding: .85rem 1rem;
            font-size:.72rem;
            font-weight:700;
            letter-spacing:.8px;
            text-transform:uppercase;
            color:var(--text-3);
            white-space:nowrap;
            vertical-align:middle;
        }
        .table-jdih tbody tr {
            transition: background .2s;
            cursor:pointer;
        }
        .table-jdih tbody tr:hover {
            background: var(--bg-surface-hover);
        }
        .table-jdih tbody td {
            padding: .9rem 1rem;
            border-bottom:1px solid var(--border);
            font-size:.85rem;
            vertical-align:middle;
            color:var(--text-2);
        }
        .table-jdih tbody tr:last-child td { border-bottom:none; }

        /* Row number */
        .row-num {
            font-size:.75rem; font-weight:600; color:var(--text-3);
            width:40px; text-align:center;
        }

        /* Badge */
        .doc-badge {
            font-size:.6rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
            padding:.28rem .6rem; border-radius:5px; display:inline-flex; align-items:center; gap:4px;
            white-space:nowrap;
        }
        .b-sk     { background:rgba(59,130,246,.12); color:#60a5fa; }
        .b-perwal { background:rgba(168,85,247,.12); color:#c084fc; }
        .b-kep    { background:rgba(34,197,94,.12);  color:#4ade80; }
        .b-uu     { background:rgba(245,158,11,.12); color:#fbbf24; }
        .b-perda  { background:rgba(239,68,68,.12);  color:#f87171; }
        .b-ins    { background:rgba(6,182,212,.12);   color:#22d3ee; }
        .b-pp     { background:rgba(236,72,153,.12);  color:#f472b6; }
        .b-perbup { background:rgba(132,204,22,.12);  color:#a3e635; }

        /* Title cell */
        .doc-title-cell {
            color:var(--text-1) !important; font-weight:600; font-size:.87rem;
            letter-spacing:-.15px; line-height:1.35;
        }
        .doc-desc-cell {
            font-size:.78rem; color:var(--text-3); line-height:1.45;
            display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
            margin-top:2px;
        }

        /* Date */
        .doc-date { font-size:.78rem; color:var(--text-3); white-space:nowrap; display:flex; align-items:center; gap:4px; }

        /* Action btns */
        .act-btn {
            width:30px; height:30px; border-radius:7px;
            background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
            display:inline-flex; align-items:center; justify-content:center;
            color:var(--text-3); font-size:.78rem; transition:all .2s;
            text-decoration:none;
        }
        .act-btn:hover { background:rgba(59,130,246,.12); color:var(--accent-blue); border-color:rgba(59,130,246,.25); }
        .act-btn.dl:hover { background:rgba(34,197,94,.12); color:var(--accent-green); border-color:rgba(34,197,94,.25); }

        /* ── Pagination ── */
        .pag-wrap {
            display:flex; align-items:center; justify-content:space-between;
            padding:1rem 1.25rem;
            border-top:1px solid var(--border);
        }
        .pag-info { font-size:.78rem; color:var(--text-3); }
        .pagination-j .page-link {
            background:transparent; border:1px solid var(--border);
            color:var(--text-2); font-size:.78rem; font-weight:600;
            padding:.35rem .7rem; margin:0 2px; border-radius:7px !important;
            transition:all .2s;
        }
        .pagination-j .page-link:hover {
            background:rgba(59,130,246,.12); color:var(--accent-blue);
            border-color:rgba(59,130,246,.25);
        }
        .pagination-j .page-item.active .page-link {
            background:var(--accent-blue); border-color:var(--accent-blue); color:#fff;
        }
        .pagination-j .page-item.disabled .page-link {
            background:transparent; color:var(--text-3); opacity:.4;
        }

        /* ── Footer ── */
        .footer-j {
            background:var(--bg-surface); border-top:1px solid var(--border);
            padding:1.5rem 0; margin-top:2.5rem;
        }
        .footer-j p { font-size:.78rem; color:var(--text-3); margin:0; }

        /* ── Toast ── */
        .toast-j {
            position:fixed; top:80px; right:20px;
            background:var(--bg-surface); border:1px solid rgba(59,130,246,.25);
            border-radius:10px; padding:.8rem 1.1rem;
            display:flex; align-items:center; gap:8px; z-index:9999;
            transform:translateX(120%); transition:transform .4s cubic-bezier(.22,1,.36,1);
            box-shadow:0 10px 40px rgba(0,0,0,.35);
        }
        .toast-j.show { transform:translateX(0); }
        .toast-j .t-ic { width:28px;height:28px;border-radius:6px;background:rgba(59,130,246,.12);display:flex;align-items:center;justify-content:center;color:var(--accent-blue);font-size:.9rem; }
        .toast-j .t-msg { font-size:.8rem; color:var(--text-2); font-weight:500; }

        /* ── Modal ── */
        .modal-content-j {
            background:var(--bg-surface) !important;
            border:1px solid var(--border) !important;
            border-radius:16px !important;
        }

        /* ── Fade-up ── */
        .fade-up { opacity:0; transform:translateY(15px); transition:all .45s cubic-bezier(.22,1,.36,1); }
        .fade-up.vis { opacity:1; transform:translateY(0); }

        /* Scrollbar */
        ::-webkit-scrollbar { width:5px; }
        ::-webkit-scrollbar-track { background:var(--bg-dark); }
        ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:10px; }

        @media(max-width:768px){
            .page-header h1 { font-size:1.3rem; }
            .table-jdih thead th { padding:.65rem .6rem; font-size:.65rem; }
            .table-jdih tbody td { padding:.7rem .6rem; font-size:.8rem; }
            .doc-desc-cell { display:none; }
            .pag-wrap { flex-direction:column; gap:.75rem; }
        }