/* csp-utilities.css — GENERATED (ZAP #5 CSP hardening)
 * Kelas utility hasil konversi atribut style="" inline agar 'unsafe-inline'
 * bisa dibuang dari style-src. Nama kelas = csp-u-<sha1(deklarasi)[0:6]>.
 * Jangan edit manual nilai yang sudah ada; tambah kelas baru boleh.
 */
.csp-u-009ac9 { font-size: 0.8rem; color: #64748b; }
.csp-u-01b425 { padding: .375rem .75rem; line-height: 1.5; height: auto; }
.csp-u-0246e7 { font-size: 1.5rem; font-weight: 900; letter-spacing: 0.04em; border: 2px solid #e2e8f0; }
.csp-u-043e24 { margin-right: 4px; }
.csp-u-045e24 { border-left: 4px solid #fbbf24; background-color: #fffbeb; }
.csp-u-046af1 { gap: 0.5rem; flex-shrink: 0; }
.csp-u-05aab0 { font-size: 0.8rem; font-weight: normal; }
.csp-u-064894 { gap: 0.5rem; }
.csp-u-06bd09 { background-color: #fbbf24; color: #78350f; }
.csp-u-0751fb { color: #212529; }
.csp-u-07f002 { padding: 1.5rem; }
.csp-u-089298 { border: 1px solid #e9ecef; border-radius: 8px; }
.csp-u-0909c3 { display: flex !important; }
.csp-u-091c56 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
.csp-u-09cf2c { display: none; margin-top: 10px; }
.csp-u-09e7db { font-size: 0.68rem; font-weight: 500; }
.csp-u-0a04c9 { width: 15px; height: 15px; cursor: pointer; }
.csp-u-0b3ac7 { display: none; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.csp-u-0b82c5 { margin: 0 !important; padding: 0; display: flex; align-items: center; justify-content: center; height: 24px; width: 24px; }
.csp-u-0ca7df { gap: .75rem; flex-wrap: wrap; }
.csp-u-0dc8cc { margin-top: 0.5rem; }
.csp-u-0df491 { display: block; width: 100%; height: 100%; border: 0; }
.csp-u-0efbbe { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.csp-u-0f2f01 { font-size: .7rem; }
.csp-u-0ff0f3 { width: 140px; }
.csp-u-115179 { width: 50%; }
.csp-u-129aac { font-size: .72rem; }
.csp-u-1313f7 { gap: .35rem; }
.csp-u-1392c8 { min-height: 70vh; }
.csp-u-15304d { width: 34%; }
.csp-u-164a69 { flex: 1; min-width: 160px; }
.csp-u-166e41 { z-index: 1070; }
.csp-u-16c9ff { width: 35%; white-space: nowrap; }
.csp-u-18ca52 { font-size: 0.9em; color: #78350f; }
.csp-u-196a6e { max-width: 680px; }
.csp-u-19a3dc { gap: .5rem; border-color: #cbd5e1 !important; }
.csp-u-19b4bb { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.csp-u-1accd2 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; text-align: right !important; padding-top: calc(0.375rem + 1px) !important; }
.csp-u-1b3b30 { width: 80px; }
.csp-u-1c25da { gap: 0.5rem; border-color: #cbd5e1 !important; }
.csp-u-1c2618 { align-items: stretch; }
.csp-u-1c46f2 { width: 32px; height: 32px; border-radius: 8px; background: rgba(6,182,212,0.2); display: flex; align-items: center; justify-content: center; }
.csp-u-1caeb2 { border-radius: 12px; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,.15); }
.csp-u-1d382e { flex: 1; min-width: 280px; display: flex; gap: .5rem; align-items: flex-end; justify-content: flex-end; }
.csp-u-1d90e6 { color: #64748b; font-size: 0.92rem; }
.csp-u-2106f7 { flex: 1; min-width: 130px; }
.csp-u-21d84a { font-size: 0.85em; color: #64748b; }
.csp-u-22b62c { font-size: 0.8rem; }
.csp-u-232304 { display: block; font-size: 80%; }
.csp-u-241b5a { display: flex; align-items: center; width: 100%; min-height: calc(1.85rem + 2px); border: 1px solid #cbd5e1; border-radius: 0.25rem; background: #fff; overflow: hidden; }
.csp-u-248fb2 { color: #ef4444; font-size: 14px; position: absolute; }
.csp-u-24f899 { max-height: 200px; filter: grayscale(100%); transition: all 0.3s; }
.csp-u-264482 { font-size: 0.83rem; }
.csp-u-26aa4f { flex: 1; min-width: 280px; display: flex; gap: 0.5rem; align-items: flex-end; justify-content: flex-end; }
.csp-u-26cea8 { font-weight: 600; font-size: 0.85em; color: #991b1b; }
.csp-u-26cef2 { text-align: left; }
.csp-u-27895a { font-size: 0.9rem; }
.csp-u-27e945 { gap: .75rem; flex-wrap: wrap; padding: .5rem .75rem; }
.csp-u-2a8bc2 { width: 28px; height: 28px; font-size: 0.72rem; font-weight: 700; }
.csp-u-2cd242 { height: 6px; }
.csp-u-2e8896 { width: 95px; }
.csp-u-2ee30c { padding: 1rem 1.25rem; }
.csp-u-2f44ff { gap: .6rem; }
.csp-u-310a2b { white-space: pre-wrap; word-break: break-word; }
.csp-u-3287f1 { background: #f8fafc; }
.csp-u-328c93 { min-width: 45px; text-align: center; font-size: 0.8rem; user-select: none; }
.csp-u-350f32 { overflow: visible; }
.csp-u-35677e { display: none; font-size: 0.8rem; }
.csp-u-3585bb { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; padding-left: 0.75rem !important; margin-top: -4px !important; }
.csp-u-35cd11 { position: absolute; bottom: -2px; right: -2px; background: #fff; width: 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.csp-u-36c4b3 { padding: .9rem 1.1rem; }
.csp-u-37220b { flex: 1 1 0; min-width: 0; }
.csp-u-382cb9 { font-size: 0.72rem; color: rgba(255,255,255,0.55); }
.csp-u-38382c { width: 25%; }
.csp-u-388c46 { font-size: .75rem; text-transform: uppercase; color: #64748b; }
.csp-u-38f7a6 { border-radius: 10px; font-size: 0.8rem; border-color: #06b6d4; color: #0891b2; }
.csp-u-39153e { text-align: center; padding: 1.5rem; }
.csp-u-3a4ab9 { font-size: .8rem; }
.csp-u-3b317f { cursor: pointer; gap: 8px; font-weight: 600; font-size: .9rem; color: #374151; }
.csp-u-3b3384 { width: 120px; }
.csp-u-3b4c81 { color: #334155; font-size: 12px; position: absolute; }
.csp-u-3b9c47 { width: 100%; height: 100%; border-radius: 50%; background-color: #f8fafc; color: #94a3b8; border: 2px dashed #cbd5e1; transition: all 0.3s ease; }
.csp-u-3f71fd { font-size: 0.875rem; }
.csp-u-4003bd { color: #1e293b; font-size: 1rem; }
.csp-u-4045c7 { font-size: 0.68rem; padding: 0.15em 0.45em; border-radius: 4px; font-weight: 600; }
.csp-u-41a087 { margin-top: 1.25rem; }
.csp-u-426687 { gap: 4px; font-size: 0.78rem; }
.csp-u-42952e { width: 13%; }
.csp-u-43638e { gap: 2px; }
.csp-u-441bd1 { opacity: 0.6; color: #fff; }
.csp-u-445df4 { position: absolute; bottom: -2px; right: -2px; background: #fbbf24; color: #fff; width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; border: 1px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.csp-u-45121f { width: 70px; min-width: 70px; text-align: center; white-space: nowrap; }
.csp-u-461bd2 { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); margin: 0; }
.csp-u-463dc8 { opacity: .7; }
.csp-u-471f0e { gap: 1rem; width: 100%; }
.csp-u-473540 { max-height: 450px; overflow-y: auto; }
.csp-u-48d5aa { display: none; width: 100%; height: 100%; border: 0; }
.csp-u-494652 { width: 9%; }
.csp-u-49dd42 { display: none; padding: 1.5rem; }
.csp-u-4b7721 { min-width: 45px; text-align: center; font-size: .8rem; user-select: none; }
.csp-u-4ba85d { color: #166534; }
.csp-u-4de17b { max-height: 65vh; object-fit: contain; }
.csp-u-4ed746 { border: 0; background: transparent; box-shadow: none; padding-left: 0.6rem; padding-right: 0.2rem; }
.csp-u-4f14de { height: calc(100vh - 11rem); background: #1f2937; }
.csp-u-4f1e1f { gap: .5rem; display: flex; align-items: center; }
.csp-u-4f7931 { margin-top: .75rem; text-align: center; }
.csp-u-50666a { position: relative; }
.csp-u-52bad6 { border-radius: 16px; border: none; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.22); }
.csp-u-532549 { z-index: 1065; }
.csp-u-534d84 { border: 0; background: transparent; color: #fff; font-size: 18px; line-height: 1; padding: 0 0 0 4px; opacity: .85; cursor: pointer; }
.csp-u-538764 { margin-left: auto; }
.csp-u-53d2dd { display: flex !important; flex-wrap: wrap !important; align-items: center !important; }
.csp-u-5476e3 { font-size: 0.74rem; line-height: 1.35; padding: 6px 10px; background: #ffffff; border-left: 3px solid #cbd5e1; font-style: italic; color: #475569; border-radius: 0 4px 4px 0; white-space: pre-line; }
.csp-u-54d32d { margin-top: 10px; }
.csp-u-557339 { background: #2563eb; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; cursor: pointer; }
.csp-u-559371 { width: 100%; height: 100%; }
.csp-u-56c57b { gap: .15rem .75rem; font-size: 12px; }
.csp-u-57d052 { height: calc(100vh - 11rem); background: #111827; }
.csp-u-580b3c { width: 22%; }
.csp-u-5849f9 { margin: 8px 0 0; font-size: 0.85rem; }
.csp-u-59a318 { font-size: 10px; font-weight: normal; }
.csp-u-5a97a8 { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); margin: 0; }
.csp-u-5c3da6 { color: #ef4444; font-size: 22px; position: absolute; }
.csp-u-5c49bf { flex: 0 0 140px; min-width: 120px; }
.csp-u-5c6489 { position: relative; display: inline-block; }
.csp-u-5cb571 { width: 150px; }
.csp-u-5e11b4 { height: 100%; }
.csp-u-5e85e6 { max-height: 260px; width: 100%; }
.csp-u-5f3eb3 { width: 50px; }
.csp-u-5fe89a { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 1.5rem !important; }
.csp-u-611bf9 { width: 160px; }
.csp-u-63af93 { gap: 6px; }
.csp-u-648149 { margin-bottom: 0; }
.csp-u-689c29 { margin: 0 0 8px 0; font-size: 0.85rem; font-weight: 600; color: #1d4ed8; }
.csp-u-695ba0 { gap: .35rem; font-weight: normal; cursor: pointer; }
.csp-u-69af75 { opacity: 0.3; }
.csp-u-6a8dd4 { padding: 0.25rem 0.5rem; }
.csp-u-6b9c27 { line-height: 1; }
.csp-u-6c0466 { mix-blend-mode: hard-light; }
.csp-u-6c96de { text-align: center; font-size: 0.85rem; color: #6b7280; }
.csp-u-6ca9c7 { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; }
.csp-u-6cbf10 { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: grayscale(100%); }
.csp-u-6cc50d { font-size: 0.74rem; line-height: 1.5; padding: 6px 10px; background: #ffffff; border-left: 3px solid #0ea5e9; color: #475569; border-radius: 0 4px 4px 0; }
.csp-u-6d2eca { font-size: .95rem; }
.csp-u-6da8b9 { letter-spacing: .04em; }
.csp-u-6e4138 { font-size: .85em; }
.csp-u-6f72e2 { position: absolute; bottom: 0px; right: 0px; background: #fff; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.csp-u-6faa37 { font-size: 0.85rem; color: #1e293b; }
.csp-u-7006b2 { width: 220px; }
.csp-u-709975 { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; }
.csp-u-71a917 { display: flex; gap: .5rem; flex-wrap: wrap; }
.csp-u-723222 { width: 50px; height: 50px; }
.csp-u-72a68a { text-align: center; }
.csp-u-73b7d7 { vertical-align: middle; display: inline-block; margin-top: -3.5px; }
.csp-u-747d48 { position: absolute; opacity: 0; z-index: -1; pointer-events: none; }
.csp-u-7537af { bottom: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%; background-color: #94a3b8; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 0.5rem; color: #fff; z-index: 2; }
.csp-u-77e302 { min-height: 70vh; position: relative; }
.csp-u-78f1b3 { width: 4%; }
.csp-u-79d4ae { background: #0d9488; color: #fff; border: none; border-radius: .5rem; padding: .75rem 1rem; }
.csp-u-79f4be { font-size: .85em; white-space: nowrap; }
.csp-u-7a4594 { font-size: 12px; }
.csp-u-7ccaf2 { width: 14%; }
.csp-u-7cdb5d { max-height: 440px; overflow-y: auto; padding: 4px 0; }
.csp-u-7dedf9 { flex: 0 0 48%; max-width: 48%; padding: 1rem 1.1rem; border-right: 1px solid #e2e8f0; }
.csp-u-7e1580 { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.csp-u-7e3015 { flex: 1; min-height: 0; overflow: auto; background: #1f2937; position: relative; }
.csp-u-7f0901 { font-size: 24px; }
.csp-u-7f382d { min-width: 140px; }
.csp-u-81beda { width: 90px; min-width: 90px; text-align: center; white-space: nowrap; }
.csp-u-8410c9 { cursor: pointer; }
.csp-u-84265e { border: 0; padding: 0; margin-bottom: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.csp-u-843631 { width: 70px; font-size: .75rem; text-transform: uppercase; color: #64748b; }
.csp-u-850668 { width: 180px; }
.csp-u-8580f0 { max-height: 320px; overflow-y: auto; }
.csp-u-85b7a6 { width: 20%; }
.csp-u-86478c { width: 420px; }
.csp-u-86851e { background-color: #1e293b !important; color: #fff; }
.csp-u-86af70 { font-size: 0.65rem; font-family: monospace; letter-spacing: 0.05em; color: #64748b !important; }
.csp-u-86b222 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
.csp-u-873f29 { width: 10%; }
.csp-u-87df6e { display: none; max-height: 70vh; overflow-y: auto; }
.csp-u-88d63e { background: #eef2f7; height: 70vh; overflow: hidden; }
.csp-u-88f252 { display: none; padding: .5rem 1rem; }
.csp-u-895670 { font-size: 1.2rem; line-height: 2.2rem; font-weight: 700; }
.csp-u-8a2fa0 { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start !important; }
.csp-u-8bcc26 { gap: 8px; }
.csp-u-8c252a { flex: 1; min-width: 200px; max-width: 400px; }
.csp-u-8d0dd4 { max-width: 92vw; }
.csp-u-8e6096 { width: 1.2rem; text-align: center; flex-shrink: 0; }
.csp-u-8e8292 { width: 60px; font-size: .75rem; text-transform: uppercase; color: #64748b; }
.csp-u-8ebfe8 { flex: 1 1 0; min-width: 0; padding: 1rem; background: #f8fafc; overflow-y: auto; display: flex; flex-direction: column; gap: 0.85rem; }
.csp-u-8ee74b { opacity: .85; }
.csp-u-8efd70 { min-width: 220px; flex: 1; }
.csp-u-900fb8 { font-size: 9px; }
.csp-u-90a76e { flex: 1 1 0%; min-width: 0; }
.csp-u-90b83b { width: 1px; white-space: nowrap; }
.csp-u-90e9d2 { grid-column: 1/-1; }
.csp-u-91018b { margin: 0 0 1rem; padding: .75rem 0; border-bottom: 1px solid #e5e7eb; }
.csp-u-911b39 { font-size: .82rem; }
.csp-u-91261f { max-height: 420px; overflow-y: auto; }
.csp-u-91e1c1 { margin: 8px 0 0 0; font-size: 0.75rem; color: #6b7280; }
.csp-u-92893b { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; text-align: right !important; }
.csp-u-92c123 { padding-right: 0.6rem; color: #64748b; font-size: 0.81rem; font-weight: 600; flex: 0 0 auto; }
.csp-u-933a8e { font-size: 0.85rem; }
.csp-u-93c6e1 { white-space: nowrap; }
.csp-u-945c58 { width: 70px; height: 70px; }
.csp-u-955a7a { background-color: #f8fafc; }
.csp-u-9656c9 { display: none !important; }
.csp-u-97f70e { width: 55px; }
.csp-u-9808a2 { display: flex; flex-direction: column; gap: 6px; }
.csp-u-981703 { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 4px 24px rgba(0,0,0,.5); }
.csp-u-9a2d4c { display: flex; gap: .5rem; }
.csp-u-9b1e8b { font-size: .6em; }
.csp-u-9f19b3 { cursor: pointer; gap: 6px; font-weight: 400; }
.csp-u-9f1aac { display: flex !important; flex-wrap: nowrap !important; margin-left: 0 !important; margin-right: 0 !important; }
.csp-u-9f2887 { font-size: 1.5rem; color: #1b3bca; }
.csp-u-9f567e { bottom: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%; background-color: #94a3b8; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: #fff; z-index: 2; }
.csp-u-a0dbcc { border: 0; background: transparent; box-shadow: none; flex: 1 1 auto; min-width: 0; padding-right: 0.2rem; }
.csp-u-a11a6c { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; padding-right: 0.75rem !important; }
.csp-u-a134e6 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.csp-u-a17f07 { height: 28px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: bold; }
.csp-u-a247e4 { font-size: 0.74rem; padding: 6px 10px; background: #ffffff; border-left: 3px solid #cbd5e1; color: #475569; border-radius: 0 4px 4px 0; }
.csp-u-a2859d { color: #6c757d; font-size: 0.75rem; }
.csp-u-a2b44b { font-size: 0.75rem; }
.csp-u-a36b17 { margin-right: 6px; }
.csp-u-a4c0d7 { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.csp-u-a52f52 { grid-column: 2; }
.csp-u-a54304 { margin-top: .75rem; }
.csp-u-a5efe9 { height: calc(100vh - 3.5rem); display: flex; flex-direction: column; }
.csp-u-a60257 { display: flex; gap: 6px; }
.csp-u-a62788 { white-space: pre-wrap; line-height: 1.45; }
.csp-u-a65937 { width: 15%; }
.csp-u-a6685b { color: #6c757d; margin-top: 15px; font-size: 0.9rem; }
.csp-u-a768c1 { font-size: 0.78rem; }
.csp-u-a7d3e3 { gap: 0.6rem; }
.csp-u-a8c641 { background: #fff; cursor: pointer; height: auto; padding: .375rem .75rem; }
.csp-u-aabd1a { opacity: 0.8; outline: none; color: #fff; }
.csp-u-ab8185 { height: 3px; }
.csp-u-aba882 { color: #f59e0b; }
.csp-u-ac138f { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; }
.csp-u-ac7cf5 { all: unset; position: absolute !important; top: 50% !important; right: 0.85rem !important; transform: translateY(-50%) !important; width: 1.5rem !important; height: 1.5rem !important; color: #6b7280 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 3 !important; line-height: 1 !important; }
.csp-u-ad6aa3 { gap: 5px; font-size: 0.82rem; color: #2563eb; text-decoration: none; padding: 2px 0; }
.csp-u-ae599b { border-top: 1px dashed #dee2e6; }
.csp-u-af2775 { border-left: 4px solid #dc2626; background-color: #fef2f2; }
.csp-u-af2bfe { flex: 1; min-width: 140px; }
.csp-u-af364b { width: 100%; height: 100%; overflow: auto; }
.csp-u-af54d2 { gap: .5rem; flex-shrink: 0; }
.csp-u-afb009 { opacity: .3; }
.csp-u-b01fb3 { border-radius: 12px; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
.csp-u-b167a8 { color: #991b1b; background-color: #fee2e2; }
.csp-u-b1b104 { font-size: 0.9em; color: #7f1d1d; }
.csp-u-b1c630 { display: inline !important; }
.csp-u-b22dbc { padding-left: 1rem; color: #94a3b8; font-style: italic; }
.csp-u-b26aec { margin-top: 14px; }
.csp-u-b26e4c { width: 8%; }
.csp-u-b423ec { font-size: .9em; }
.csp-u-b4edaa { display: flex; align-items: center; }
.csp-u-b51279 { border-radius: 10px; font-size: 0.8rem; }
.csp-u-b5a168 { font-size: .75rem; }
.csp-u-b5fd39 { color: #6c757d; font-size: 0.9rem; margin-bottom: 12px; font-style: italic; }
.csp-u-b65551 { margin-top: .5rem; }
.csp-u-b727e0 { width: 6%; }
.csp-u-b746ef { max-width: 220px; }
.csp-u-b7a5a7 { display: block; font-size: 12px; opacity: .85; margin-bottom: 1px; }
.csp-u-b7bf7a { gap: 1rem; }
.csp-u-b942b3 { font-size: 10px; text-transform: none; }
.csp-u-ba5f69 { font-size: 1.15rem; line-height: 2.2rem; font-weight: 700; }
.csp-u-bdecab { font-size: 14px; color: #1e293b; }
.csp-u-be8da0 { width: 70px; }
.csp-u-befe0a { border-radius: 16px; border: none; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.csp-u-bf50c3 { background: rgba(255,255,255,.2); padding: 1px 8px; border-radius: 4px; font-size: 12px; font-family: monospace; }
.csp-u-bfc96a { color: #e11d48; font-size: .8rem; }
.csp-u-c0b106 { min-width: 150px; }
.csp-u-c10c02 { width: 56px; }
.csp-u-c20dd7 { color: #334155; font-size: 8px; position: absolute; }
.csp-u-c2bafe { flex-shrink: 0; }
.csp-u-c2d4a1 { max-height: 160px; max-width: 160px; border-radius: 8px; border: 2px solid #e2e8f0; filter: grayscale(100%); }
.csp-u-c56bce { font-size: .6rem; }
.csp-u-c58248 { font-size: .85rem; }
.csp-u-c59d7b { cursor: pointer; user-select: none; }
.csp-u-c6ddf9 { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.csp-u-c6e2d4 { display: none; width: 100%; height: 70vh; border: 0; }
.csp-u-c6e7c6 { font-size: 0.8rem; font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; }
.csp-u-c79cf7 { background: #f8f9fa; cursor: not-allowed; }
.csp-u-c79ecd { font-size: 0.76rem; }
.csp-u-c81bd3 { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; flex: none !important; margin: 0 !important; padding-right: 3rem !important; box-sizing: border-box !important; }
.csp-u-ca8a4e { gap: 0.75rem; background: #f8fafc; border-top: 1px solid #e2e8f0; }
.csp-u-cb895d { gap: 1.25rem; }
.csp-u-cc8a22 { width: 210px; }
.csp-u-cca7ba { grid-template-columns: 150px 1fr; }
.csp-u-cd3f24 { mix-blend-mode: plus-darker; }
.csp-u-cd6d9d { position: absolute; bottom: 0px; right: 0px; background: #fbbf24; color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.csp-u-cdabf8 { font-size: 1.5rem; }
.csp-u-cdb339 { background: #f8fafc; justify-content: space-between; }
.csp-u-cdc34a { font-size: 10px; }
.csp-u-ce69d8 { display: flex; align-items: center; gap: .5rem; }
.csp-u-ce9976 { min-width: 180px; max-width: 220px; }
.csp-u-cf02ea { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: #fff; }
.csp-u-d005b6 { font-size: 0.78rem; gap: 4px; }
.csp-u-d0943f { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); margin: 0 !important; }
.csp-u-d0e252 { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; height: 24px; width: 24px; }
.csp-u-d102e3 { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.csp-u-d4260d { width: 60px; }
.csp-u-d47ac7 { color: #cbd5e1; }
.csp-u-d4f753 { margin-top: 1.5rem; }
.csp-u-d581cd { font-size: .875rem; }
.csp-u-d59cad { height: 28px; display: flex; align-items: center; font-size: .75rem; font-weight: bold; }
.csp-u-d766c7 { background-color: var(--measure-color); }
.csp-u-d89e3a { transition: transform 0.2s; }
.csp-u-d94e0a { font-size: .8em; font-weight: 400; color: #64748b; }
.csp-u-da86dd { gap: .75rem; }
.csp-u-db3a52 { width: 18%; }
.csp-u-db5fb8 { width: 50px; height: 24px; padding: 0 4px; font-size: 0.75rem; border-radius: 4px; display: inline-block; }
.csp-u-db62bd { gap: .5rem; flex-shrink: 0; margin-left: auto; }
.csp-u-dbc8d1 { font-size: 0.72rem; }
.csp-u-de94d2 { background: #fff; border: 1px solid #dbeafe; padding: 6px 12px; border-radius: 6px; font-size: 1rem; color: #1e40af; font-family: 'Courier New', monospace; }
.csp-u-df5768 { width: 12%; }
.csp-u-e1fb4b { font-size: 0.95rem; }
.csp-u-e20388 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 10; }
.csp-u-e2573c { display: none; margin-top: .75rem; }
.csp-u-e3c216 { flex: 1; max-width: 400px; }
.csp-u-e4f301 { grid-template-columns: 200px 1fr; }
.csp-u-e60a90 { width: 90px; }
.csp-u-e61dcc { height: 100%; padding: 1.5rem; }
.csp-u-e6518e { flex: 1; min-width: 100px; max-width: 130px; }
.csp-u-e7cd94 { margin: 0; line-height: 1; padding: .25rem .5rem; }
.csp-u-e7e146 { min-height: 220px; border: 1px solid #e2e8f0; }
.csp-u-e86ee1 { max-height: 150px; overflow-y: auto; }
.csp-u-e87d7b { font-size: 0.9em; }
.csp-u-e88304 { color: #2563eb; font-weight: 700; }
.csp-u-e8bb01 { max-height: 260px; }
.csp-u-e95090 { position: relative; min-height: 40px; display: flex; align-items: center; }
.csp-u-e9e0e4 { font-size: 11px; }
.csp-u-eb1967 { max-width: 560px; }
.csp-u-eb96db { display: flex !important; align-items: center !important; gap: 1.5rem !important; }
.csp-u-ee3d55 { flex: 1; }
.csp-u-ee9247 { width: 3rem; height: 3rem; }
.csp-u-ef300f { flex: 1; min-width: 150px; }
.csp-u-ef7a9d { margin-top: 24px; }
.csp-u-f07ddd { background: #eff6ff; border: 1px solid #bfdbfe; padding: 1rem; border-radius: 10px; text-align: center; margin: 1.5rem 0; }
.csp-u-f0b24e { margin-bottom: 1.5rem; }
.csp-u-f1195c { color: #22d3ee; font-size: 0.85rem; }
.csp-u-f19220 { gap: 16px; }
.csp-u-f267e3 { margin-bottom: 1rem; }
.csp-u-f28868 { margin-bottom: 0.25rem; }
.csp-u-f2892a { display: none; }
.csp-u-f3214d { z-index: 1060; }
.csp-u-f3b5f4 { gap: .5rem; }
.csp-u-f3d4ac { font-size: 0.75rem; min-height: 18px; line-height: 1.2; }
.csp-u-f4d77d { font-size: 0.7rem; line-height: 1.1; }
.csp-u-f5f119 { color: #92400e; background-color: #fef3c7; }
.csp-u-f7b558 { width: 17%; }
.csp-u-f8119b { font-weight: 600; font-size: 0.85em; color: #92400e; }
.csp-u-f949b4 { color: #fff; }
.csp-u-fa011c { width: 16%; }
.csp-u-faf5dc { display: none; padding: .375rem .6rem; line-height: 1.5; height: auto; }
.csp-u-fb2622 { position: relative !important; display: block !important; flex: 1 1 0% !important; min-width: 0 !important; width: 100% !important; max-width: none !important; }
.csp-u-fb3bd8 { margin-top: 18px; }
.csp-u-fb491c { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
.csp-u-fb5f80 { width: 24%; }
.csp-u-fb9057 { display: flex; align-items: center; gap: 10px; }
.csp-u-fd4172 { gap: 24px; height: 38px; }
.csp-u-fe640b { border-color: #e2e8f0; background-color: #ffffff; }
.csp-u-fea24f { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.csp-u-fee18f { width: 5%; }
.csp-u-ff227d { margin: 0; }
.csp-u-ff646d { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; padding-right: .5rem; }
.csp-u-af5bb0 { font-weight: 500; }
.csp-u-a6798b { gap: 10px; }
.csp-u-5edaf8 { align-items: stretch; flex-wrap: nowrap; }
.csp-u-b99638 { font-style: italic; }
.csp-u-3eaa7b { margin-bottom: 4px; }

/* ── Kelas semantik pengganti $lStyle / $rStyle / $rowStyle (form label-value) ── */
.csp-form-lbl { flex: 0 0 165px !important; width: 165px !important; max-width: 165px !important; display: block !important; text-align: right !important; padding-right: 10px !important; white-space: nowrap !important; }
.csp-form-val { flex: 1 1 auto !important; min-width: 0 !important; }
.csp-form-row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; min-width: 0 !important; max-width: 100% !important; }
.csp-form-row--start { align-items: flex-start !important; }
.csp-form-val--inline-gap { display: flex !important; align-items: center !important; gap: 1.5rem !important; }
.csp-form-val--inline-pt2 { display: flex !important; align-items: center !important; padding-top: 2px; }

/* ── Anti-flash guard untuk data-csp-style ──────────────────────────────────
 * Elemen yang deklarasi awalnya display:none disembunyikan CSS ini SEBELUM
 * csp-handlers.js sempat meng-apply via CSSOM (script dimuat di akhir body).
 * csp-handlers.js menghapus atribut data-csp-style setelah apply, sehingga
 * rule ini berhenti berlaku dan kontrol penuh pindah ke el.style. */
[data-csp-style*="display:none"],
[data-csp-style*="display: none"] { display: none; }
.csp-u-brand-dim { opacity: .8; }