.tools-card{max-width:780px}.tools-card h1{font-size:24px}.tools-card input[type=file]{background:#f9fafb;border-style:dashed}
.engine-summary{padding:14px 16px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;margin:16px 0;font-weight:700;color:#0f172a}
.inventory-file{border:1px solid #e5e7eb;border-radius:14px;background:#fff;margin:14px 0;padding:14px 16px}
.inventory-file summary{font-weight:800;cursor:pointer;color:#0b1e4b}
.function-chip-wrap{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.function-chip{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:#f3f4f6;border:1px solid #e5e7eb;font-size:12px;font-weight:700;color:#374151}
.class-inventory{padding:10px 0;border-top:1px solid #f1f5f9}
.photo-bg-php-form .panel-card label{display:grid;grid-template-columns:230px 1fr;gap:14px;align-items:center;margin:10px 0;font-weight:700}
.photo-bg-php-form input,.photo-bg-php-form select{min-height:42px;border:1px solid #d1d5db;padding:0 12px;background:#fff;font-size:14px}
.photo-bg-php-form .photo-grid{display:grid;grid-template-columns:minmax(520px,1fr) 360px;gap:26px;align-items:start}
@media(max-width:980px){.photo-bg-php-form .photo-grid{grid-template-columns:1fr}.photo-bg-php-form .panel-card label{grid-template-columns:1fr}}

/* V16: scroll bar untuk semua halaman Menu Tambahan */
.tools-card{max-width:960px;max-height:calc(100vh - 130px);overflow-y:auto;overscroll-behavior:contain;padding-right:28px}
.tools-card::-webkit-scrollbar,.tool-list::-webkit-scrollbar,.photo-bg-php-form .panel-card::-webkit-scrollbar{width:14px}
.tools-card::-webkit-scrollbar-thumb,.tool-list::-webkit-scrollbar-thumb,.photo-bg-php-form .panel-card::-webkit-scrollbar-thumb{background:#cbd5e1;border:3px solid #fff;border-radius:999px}
.tools-card::-webkit-scrollbar-track,.tool-list::-webkit-scrollbar-track,.photo-bg-php-form .panel-card::-webkit-scrollbar-track{background:#f8fafc}
.modal-window.tools{max-height:82vh;overflow:hidden;display:flex;flex-direction:column}
.modal-window.tools .tool-list{max-height:64vh;overflow-y:auto;padding-right:12px}
.photo-bg-php-form .panel-card{max-height:68vh;overflow-y:auto}
@media(max-width:980px){.tools-card{max-height:calc(100vh - 120px)}}


/* Pure PHP tools */
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.setup-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px;box-shadow:0 10px 28px rgba(15,23,42,.06)}
.setup-card h2{margin:0 0 10px;font-size:20px;color:#0f172a}
.stack-form{display:grid;gap:10px}.stack-form input[type="text"]{width:100%;border:1px solid #cbd5e1;border-radius:12px;padding:12px 14px;font-size:14px}.small-note{font-size:12px}.setup-steps{margin:8px 0 0;padding-left:22px;line-height:1.9}.responsive-table-wrap{overflow:auto}.clean-table{width:100%;border-collapse:collapse;font-size:13px}.clean-table th,.clean-table td{border-bottom:1px solid #e5e7eb;padding:10px;text-align:left;vertical-align:top}.clean-table th{background:#f8fafc;color:#334155}.btn.danger{background:#dc2626;color:#fff}
@media(max-width:900px){.setup-grid{grid-template-columns:1fr}}
.photo-preview-panel{min-width:360px}.photo-preview-block{margin-bottom:18px}.photo-preview-title{font-weight:800;margin-bottom:8px;color:#111827}.photo-preview-box{min-height:170px;border:1px dashed #cbd5e1;border-radius:14px;background:#f8fafc;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;color:#64748b}.photo-preview-img{display:block;max-width:100%;max-height:320px;object-fit:contain;border:1px solid #e5e7eb;border-radius:14px;background:#fff;margin-bottom:10px}.photo-preview-img.result-img{max-height:360px}.photo-preview-img.is-hidden{display:none}.photo-preview-meta{font-size:12px;color:#475569;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px 10px;margin:8px 0 12px}


/* v18.9 Photo background live preview + ajax */
.photo-bg-tool-page{max-width:1180px}
.photo-bg-php-form .panel-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px;box-shadow:0 10px 28px rgba(15,23,42,.06)}
.photo-bg-php-form .panel-card h2{margin:0 0 14px;font-size:18px;color:#0f172a}
.photo-bg-php-form .tool-row{display:grid;grid-template-columns:230px 1fr;gap:14px;align-items:center;margin:10px 0}
.photo-bg-php-form .tool-label{font-weight:700;color:#111827}
.photo-bg-php-form .tool-field input,.photo-bg-php-form .tool-field select{width:100%;min-height:42px;border:1px solid #d1d5db;border-radius:10px;padding:0 12px;background:#fff;font-size:14px}
.photo-bg-php-form .compact-field{display:grid;grid-template-columns:minmax(140px,1fr) 54px auto;gap:8px;align-items:center}
.photo-bg-php-form .color-picker-input{padding:0;border-radius:10px;border:1px solid #d1d5db;min-height:42px;background:#fff}
.photo-bg-php-form .is-hidden-input{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.photo-bg-php-form .file-picker-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.photo-bg-php-form .file-picked-name{font-size:13px;color:#64748b;font-weight:600}
.photo-bg-php-form .tool-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.photo-bg-php-form .sticky-actions{position:sticky;bottom:-1px;background:linear-gradient(180deg,rgba(255,255,255,.85),#fff 35%);padding-top:12px}
.tool-inline-alert{border-radius:12px;padding:12px 14px;margin:12px 0;font-weight:700}
.tool-inline-alert.success{background:#ecfdf5;color:#166534;border:1px solid #86efac}
.tool-inline-alert.error{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5}
.tool-inline-alert.is-hidden{display:none}
.live-preview-canvas{min-height:240px;border:1px solid #dbeafe;border-radius:16px;padding:12px;display:flex;align-items:center;justify-content:center;overflow:auto;background:#fff}
.live-preview-stage{width:320px;height:320px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all .2s ease}
.live-preview-frame{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;transition:all .2s ease}
.live-preview-img{max-width:100%;max-height:100%;object-fit:cover;transform-origin:center center;transition:transform .2s ease, filter .2s ease}
.live-preview-placeholder{color:#64748b;text-align:center;padding:16px;font-size:13px;line-height:1.6}
.photo-preview-panel .photo-preview-box{min-height:180px}
@media(max-width:980px){.photo-bg-php-form .tool-row{grid-template-columns:1fr}.photo-bg-php-form .compact-field{grid-template-columns:1fr 54px auto}}

/* v18.11 Photo preview: only original + final result */
.photo-preview-panel{min-width:430px}
.photo-preview-panel .photo-preview-block{margin-bottom:22px}
.photo-preview-panel .live-preview-canvas{min-height:360px}
.photo-preview-panel .photo-preview-img{max-height:300px;margin-left:auto;margin-right:auto}
.photo-preview-panel .live-preview-stage{transform:scale(.72);transform-origin:center center}
.photo-preview-panel .live-preview-img{width:100%;height:100%;object-fit:cover}
#serverResultDownload.is-hidden{display:none}
@media(max-width:980px){.photo-preview-panel{min-width:0}.photo-preview-panel .live-preview-stage{transform:scale(.62)}}

/* v18.12 Preview kanan hanya upload asli + live preview canvas */
.photo-preview-two{display:grid;gap:18px}
.canvas-preview-shell{min-height:360px;border:1px solid #dbeafe;border-radius:18px;padding:14px;display:flex;align-items:center;justify-content:center;position:relative;overflow:auto;background:#fff}
.photo-result-canvas{display:block;max-width:100%;max-height:520px;border-radius:10px;box-shadow:0 8px 22px rgba(15,23,42,.10);background:#fff}
.canvas-preview-shell .live-preview-placeholder{position:absolute;inset:auto;text-align:center;color:#64748b;line-height:1.7;background:rgba(255,255,255,.82);padding:14px;border-radius:12px}


.photo-result-canvas{width:auto;height:auto;max-width:380px;max-height:380px;display:block;margin:0 auto;object-fit:contain}
.photo-preview-box{display:flex;align-items:center;justify-content:center;min-height:260px}
.photo-preview-img{max-width:380px;max-height:380px;width:auto;height:auto;object-fit:contain;display:block;margin:0 auto}


.field-help{display:block;margin-top:6px;font-size:12px;line-height:1.4;color:#64748b}

.user-friendly-note{font-size:12px;color:#64748b;line-height:1.45}


/* v18.23 Professional responsive tools layout: no nested left-right scrollbar */
html, body{
    max-width:100%;
    overflow-x:hidden;
}
.tools-card.photo-bg-tool-page,
.photo-bg-tool-page{
    width:min(1180px, calc(100vw - 48px));
    max-width:min(1180px, calc(100vw - 48px));
    max-height:none !important;
    overflow:visible !important;
    padding:28px !important;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
}
.photo-bg-tool-page *,
.photo-bg-php-form *,
.photo-preview-panel *{
    box-sizing:border-box;
}
.photo-bg-php-form{
    width:100%;
    overflow:visible;
}
.photo-bg-php-form .photo-grid{
    display:grid !important;
    grid-template-columns:minmax(0, 1.18fr) minmax(320px, .82fr) !important;
    gap:28px !important;
    align-items:start;
    width:100%;
    max-width:100%;
    overflow:visible;
}
.photo-bg-php-form .panel-card{
    width:100%;
    min-width:0 !important;
    max-height:none !important;
    overflow:visible !important;
    padding:22px !important;
}
.photo-bg-php-form .tool-row{
    grid-template-columns:minmax(170px, 250px) minmax(0, 1fr) !important;
    gap:18px !important;
    align-items:center;
}
.photo-bg-php-form .tool-field,
.photo-bg-php-form .tool-field input,
.photo-bg-php-form .tool-field select{
    min-width:0 !important;
    max-width:100%;
}
.photo-bg-php-form .compact-field{
    grid-template-columns:minmax(0, 1fr) 56px auto !important;
}
.photo-preview-panel{
    min-width:0 !important;
    width:100%;
    position:sticky;
    top:86px;
}
.canvas-preview-shell{
    overflow:hidden !important;
    min-height:280px !important;
}
.photo-result-canvas,
.photo-preview-img{
    max-width:100% !important;
    height:auto !important;
}
.photo-preview-box{
    min-height:190px !important;
}
.photo-bg-php-form .sticky-actions{
    position:static !important;
    background:transparent !important;
    border-top:1px solid #eef2f7;
    padding-top:16px;
}
.photo-bg-php-form .file-picker-wrap{
    min-width:0;
}
.photo-bg-php-form .file-picked-name{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
@media(max-width:1100px){
    .tools-card.photo-bg-tool-page,
    .photo-bg-tool-page{
        width:calc(100vw - 32px);
        max-width:calc(100vw - 32px);
        padding:22px !important;
    }
    .photo-bg-php-form .photo-grid{
        grid-template-columns:1fr !important;
    }
    .photo-preview-panel{
        position:static;
    }
}
@media(max-width:760px){
    .tools-card.photo-bg-tool-page,
    .photo-bg-tool-page{
        width:100%;
        max-width:100%;
        border-radius:0;
        padding:16px !important;
    }
    .photo-bg-tool-page h1{
        font-size:22px;
        line-height:1.2;
    }
    .photo-bg-tool-page > .muted{
        font-size:14px;
        line-height:1.55;
    }
    .photo-bg-php-form .panel-card{
        padding:16px !important;
        border-radius:16px;
    }
    .photo-bg-php-form .tool-row{
        grid-template-columns:1fr !important;
        gap:8px !important;
        margin:14px 0 !important;
    }
    .photo-bg-php-form .tool-label{
        font-size:14px;
    }
    .photo-bg-php-form .tool-field input,
    .photo-bg-php-form .tool-field select{
        min-height:46px;
        font-size:15px;
    }
    .photo-bg-php-form .compact-field{
        grid-template-columns:1fr 52px 70px !important;
        gap:8px;
    }
    .photo-bg-php-form .file-picker-wrap{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }
    .photo-bg-php-form .file-pick-btn{
        width:100%;
        justify-content:center;
    }
    .photo-bg-php-form .tool-actions{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }
    .photo-bg-php-form .tool-actions .btn{
        width:100%;
        justify-content:center;
    }
    .canvas-preview-shell{
        min-height:230px !important;
        padding:10px !important;
    }
    .photo-preview-box{
        min-height:160px !important;
    }
}
@media(max-width:420px){
    .photo-bg-php-form .compact-field{
        grid-template-columns:1fr 48px !important;
    }
    .photo-bg-php-form .compact-field .btn{
        grid-column:1 / -1;
        width:100%;
    }
}


/* v18.24 Remove bottom horizontal scrollbar completely */
html,
body{
    overflow-x:hidden !important;
    max-width:100vw !important;
}
.app-shell,
.app-main,
.main-content,
.page-wrap,
.page-card,
.tools-card,
.photo-bg-tool-page,
.photo-bg-php-form,
.photo-bg-php-form .photo-grid,
.photo-bg-php-form .panel-card,
.photo-preview-panel,
.photo-preview-two,
.canvas-preview-shell{
    max-width:100% !important;
    overflow-x:hidden !important;
}
.tools-card.photo-bg-tool-page,
.photo-bg-tool-page{
    width:min(1180px, calc(100vw - 48px)) !important;
    max-width:min(1180px, calc(100vw - 48px)) !important;
}
.photo-bg-php-form .tool-field,
.photo-bg-php-form .tool-field input,
.photo-bg-php-form .tool-field select,
.photo-bg-php-form .compact-field{
    min-width:0 !important;
}
.photo-bg-php-form .compact-field{
    width:100%;
}
.photo-result-canvas,
.photo-preview-img{
    max-width:100% !important;
}
@media(max-width:760px){
    .tools-card.photo-bg-tool-page,
    .photo-bg-tool-page{
        width:100% !important;
        max-width:100vw !important;
        margin-left:0 !important;
        margin-right:0 !important;
        border-radius:0 !important;
    }
}

/* v18.37 Combine PDF clean layout - tanpa header gelap Menu Tambahan */
.combine-pdf-module{
    min-height:calc(100vh - 120px);
    padding:18px 0 24px;
    background:#f3f4f6;
}
.combine-pdf-window{
    width:min(1180px, calc(100vw - 48px));
    margin:0 auto;
    background:#f3f4f6;
    border:1px solid #d1d5db;
    box-shadow:0 8px 24px rgba(15,23,42,.08);
}
.combine-pdf-form{
    padding:18px;
}
.combine-pdf-info-card{
    background:#ffffff;
    border:1px solid #d1d5db;
    padding:18px 22px;
    margin-bottom:14px;
}
.combine-pdf-info-card h2{
    margin:0 0 10px;
    color:#111827;
    font-size:24px;
    line-height:1.15;
    font-weight:800;
}
.combine-pdf-info-card p{
    margin:0;
    color:#6b7280;
    font-size:14px;
    line-height:1.65;
}
.combine-pdf-table-shell{
    background:#ffffff;
    border:1px solid #d1d5db;
    overflow:hidden;
}
.combine-pdf-grid{
    display:grid;
    grid-template-columns:72px minmax(210px, 320px) minmax(260px, 1fr) 250px;
    align-items:center;
}
.combine-pdf-head{
    min-height:48px;
    background:#e5e7eb;
    color:#111827;
    font-size:15px;
    font-weight:800;
}
.combine-pdf-head > div{
    padding:0 18px;
}
.combine-pdf-action-title{
    text-align:center;
}
.combine-pdf-body{
    max-height:372px;
    overflow-y:auto;
    overflow-x:hidden;
    background:#ffffff;
}
.combine-pdf-row{
    min-height:62px;
    border-bottom:1px solid #d1d5db;
    background:#ffffff;
}
.combine-pdf-row:last-child{
    border-bottom:none;
}
.combine-pdf-number{
    padding-left:20px;
    color:#111827;
    font-size:15px;
    font-weight:800;
}
.combine-pdf-note-cell,
.combine-pdf-file-cell,
.combine-pdf-actions{
    padding:8px 10px;
}
.combine-pdf-note{
    width:100%;
    min-height:34px;
    padding:0 10px;
    border:2px solid #e5e7eb;
    background:#ffffff;
    color:#111827;
    font-size:14px;
    font-weight:700;
    outline:none;
}
.combine-pdf-note:focus{
    border-color:#9ca3af;
}
.combine-pdf-file-name{
    display:block;
    color:#6b7280;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.combine-pdf-file-name.has-file{
    color:#111827;
}
.combine-pdf-hidden-file{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
}
.combine-pdf-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.combine-pdf-btn{
    min-width:118px;
    min-height:40px;
    border:2px solid #b8b6b0;
    background:#ddd9d3;
    color:#111827;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    border-radius:2px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.combine-pdf-btn:hover{
    background:#d2cec8;
}
.combine-pdf-footer-actions{
    display:flex;
    align-items:center;
    gap:18px;
    padding-top:16px;
}
.combine-pdf-footer-actions .combine-pdf-btn--primary{
    margin-left:auto;
}
.combine-pdf-btn--footer{
    min-width:140px;
}
.combine-pdf-btn--primary{
    min-width:190px;
    background:#d4aa2a;
    border-color:#bc931c;
    color:#ffffff;
    font-weight:900;
}
.combine-pdf-btn--primary:hover{
    background:#bf9822;
}
.combine-pdf-status{
    margin-top:14px;
    min-height:34px;
    display:flex;
    align-items:center;
    padding:0 12px;
    background:#e5e7eb;
    color:#111827;
    font-size:13px;
    font-weight:700;
    border:1px solid #d1d5db;
}
@media(max-width:1020px){
    .combine-pdf-window{
        width:calc(100vw - 28px);
    }
    .combine-pdf-grid{
        grid-template-columns:56px minmax(170px, 250px) minmax(210px, 1fr) 210px;
    }
    .combine-pdf-btn{
        min-width:96px;
        font-size:14px;
    }
}
@media(max-width:760px){
    .combine-pdf-window{
        width:100%;
        border-left:none;
        border-right:none;
    }
    .combine-pdf-form{
        padding:12px;
    }
    .combine-pdf-table-shell{
        overflow-x:auto;
    }
    .combine-pdf-grid{
        min-width:760px;
        grid-template-columns:56px 220px 280px 190px;
    }
    .combine-pdf-body{
        max-height:none;
        overflow-y:visible;
    }
    .combine-pdf-footer-actions{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }
    .combine-pdf-footer-actions .combine-pdf-btn,
    .combine-pdf-footer-actions .combine-pdf-btn--primary{
        width:100%;
        margin-left:0;
    }
}

/* v18.39 Compress / Enlarge PDF identik gaya compresspdf.py */
.compress-pdf-module{
    min-height:calc(100vh - 120px);
    padding:18px 0 24px;
    background:#eef0f3;
    overflow-x:hidden;
}
.compress-pdf-window{
    width:min(876px, calc(100vw - 32px));
    margin:0 auto;
    background:#f4f5f7;
    border:1px solid #c9cdd4;
    border-radius:12px;
    box-shadow:0 16px 36px rgba(15,23,42,.20);
    overflow:hidden;
}
.compress-pdf-form{
    margin:0;
}
.compress-pdf-titlebar{
    height:33px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 14px;
    color:#8a8f98;
    font-size:14px;
    background:#f8f9fb;
    border-bottom:1px solid #e1e5ea;
}
.compress-pdf-feather{
    width:14px;
    height:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#2f66d8;
    font-size:13px;
    transform:rotate(-28deg);
}
.compress-pdf-title-close{
    margin-left:auto;
    color:#8b8f96;
    text-decoration:none;
    font-size:26px;
    line-height:1;
    font-weight:300;
}
.compress-pdf-title-close:hover{
    color:#111827;
}
.compress-pdf-content{
    padding:34px 22px 12px;
}
.compress-pdf-content h1{
    margin:0 0 10px 4px;
    color:#06122d;
    font-size:25px;
    line-height:1.15;
    font-weight:900;
    letter-spacing:-.02em;
}
.compress-pdf-subtitle{
    margin:0 0 26px 4px;
    color:#788aa8;
    font-size:14px;
    font-weight:700;
}
.compress-pdf-panel{
    border:1px solid #cfd5df;
    background:#ffffff;
    padding:18px 18px 38px;
}
.compress-pdf-row{
    display:grid;
    grid-template-columns:150px minmax(0, 1fr);
    align-items:center;
    gap:14px;
    min-height:56px;
}
.compress-pdf-row-file{
    grid-template-columns:150px minmax(0, 1fr) 116px;
}
.compress-pdf-label{
    color:#0a132c;
    font-size:16px;
    font-weight:900;
}
.compress-pdf-file-name{
    color:#8793ad;
    font-size:14px;
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.compress-pdf-file-name.has-file{
    color:#111827;
}
.compress-pdf-upload-btn,
.compress-pdf-process-btn{
    border:none;
    background:#2f67e8;
    color:#ffffff;
    min-height:42px;
    padding:0 17px;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
    border-radius:0;
    box-shadow:none;
}
.compress-pdf-upload-btn:hover,
.compress-pdf-process-btn:hover{
    background:#2458d3;
}
.compress-pdf-hidden-file{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}
.compress-pdf-select{
    width:100%;
    min-height:44px;
    padding:0 38px 0 12px;
    border:2px solid #b9b7b0;
    background:#deddd8;
    color:#111827;
    font-size:15px;
    font-weight:800;
    border-radius:2px;
    outline:none;
}
.compress-pdf-row-target{
    min-height:54px;
}
.compress-pdf-target-wrap{
    display:flex;
    align-items:center;
    gap:16px;
    min-width:0;
}
.compress-pdf-target{
    width:109px;
    min-height:24px;
    padding:0 2px;
    border:none;
    border-top:1px solid #c2c7d0;
    border-left:1px solid #c2c7d0;
    background:#ffffff;
    color:#1f2937;
    font-size:14px;
    outline:none;
}
.compress-pdf-target-note{
    color:#8390ac;
    font-size:14px;
    font-weight:800;
}
.compress-pdf-note{
    margin:22px 2px 20px;
    color:#77859e;
    font-size:14px;
    line-height:1.35;
    font-weight:700;
}
.compress-pdf-status{
    min-height:49px;
    display:flex;
    align-items:center;
    padding:0 16px;
    border:1px solid #d5dae2;
    background:#fbfcfe;
    color:#0d1734;
    font-size:14px;
    font-weight:800;
}
.compress-pdf-status.is-error{
    border-color:#fecaca;
    background:#fef2f2;
    color:#991b1b;
}
.compress-pdf-status.is-busy{
    border-color:#bfdbfe;
    background:#eff6ff;
    color:#1d4ed8;
}
.compress-pdf-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:15px;
}
.compress-pdf-process-btn{
    min-width:179px;
}
.compress-pdf-close-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 18px;
    color:#09122b;
    text-decoration:none;
    font-size:16px;
    font-weight:900;
}
.compress-pdf-close-btn:hover{
    color:#2f67e8;
}
@media(max-width:720px){
    .compress-pdf-module{
        padding:10px 0 18px;
    }
    .compress-pdf-window{
        width:calc(100vw - 18px);
        border-radius:10px;
    }
    .compress-pdf-content{
        padding:24px 12px 10px;
    }
    .compress-pdf-content h1{
        font-size:22px;
        margin-left:0;
    }
    .compress-pdf-subtitle{
        margin-left:0;
        line-height:1.45;
    }
    .compress-pdf-panel{
        padding:14px 12px 26px;
    }
    .compress-pdf-row,
    .compress-pdf-row-file{
        grid-template-columns:1fr;
        gap:8px;
        min-height:auto;
        margin-bottom:16px;
    }
    .compress-pdf-upload-btn,
    .compress-pdf-process-btn,
    .compress-pdf-close-btn{
        width:100%;
    }
    .compress-pdf-target-wrap{
        display:grid;
        grid-template-columns:116px 1fr;
        gap:12px;
    }
    .compress-pdf-actions{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }
}

/* v18.40 Convert Office / JPG / PNG ke PDF identik gaya convertpdf.py */
.convert-pdf-module{
    min-height:calc(100vh - 120px);
    padding:0 0 24px;
    background:#eef0f3;
    overflow-x:hidden;
}
.convert-pdf-window{
    width:min(955px, calc(100vw - 16px));
    min-height:704px;
    margin:0 auto;
    background:#f7f8fb;
    border:1px solid #c8c9cb;
    border-radius:0 0 10px 10px;
    box-shadow:0 15px 34px rgba(0,0,0,.24);
    overflow:hidden;
    color:#081128;
    font-family:"Segoe UI", Arial, sans-serif;
}
.convert-pdf-form{
    margin:0;
}
.convert-pdf-titlebar{
    height:34px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 14px;
    background:#f4f4f5;
    color:#7c7f86;
    font-size:15px;
    font-weight:500;
    border-bottom:1px solid #e4e5e8;
}
.convert-pdf-feather{
    width:15px;
    height:15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#1a4d9b;
    font-size:12px;
    transform:rotate(-25deg);
}
.convert-pdf-title-close{
    margin-left:auto;
    color:#8b8d94;
    font-size:28px;
    line-height:1;
    font-weight:300;
    text-decoration:none;
}
.convert-pdf-title-close:hover{
    color:#101828;
}
.convert-pdf-content{
    padding:28px 26px 0;
}
.convert-pdf-content h1{
    margin:0 0 12px 1px;
    font-size:27px;
    line-height:1.18;
    color:#07112b;
    font-weight:900;
    letter-spacing:-.4px;
}
.convert-pdf-subtitle{
    margin:0 0 26px 2px;
    color:#788198;
    font-size:14px;
    font-weight:700;
}
.convert-pdf-panel{
    border:1px solid #d6dbe5;
    background:#ffffff;
    padding:14px 14px 14px;
    min-height:545px;
}
.convert-pdf-toolbar{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 0 15px;
}
.convert-pdf-upload-btn,
.convert-pdf-delete-btn,
.convert-pdf-clear-btn,
.convert-pdf-process-btn{
    appearance:none;
    border:none;
    border-radius:0;
    cursor:pointer;
    font-family:"Segoe UI", Arial, sans-serif;
    font-size:16px;
    font-weight:900;
    min-height:43px;
    padding:0 18px;
    transition:filter .15s ease, transform .15s ease;
}
.convert-pdf-upload-btn,
.convert-pdf-process-btn{
    background:#2f67e8;
    color:#ffffff;
}
.convert-pdf-delete-btn{
    background:#e51f2f;
    color:#ffffff;
}
.convert-pdf-clear-btn{
    background:transparent;
    color:#07112b;
    min-width:118px;
}
.convert-pdf-upload-btn:hover,
.convert-pdf-delete-btn:hover,
.convert-pdf-clear-btn:hover,
.convert-pdf-process-btn:hover{
    filter:brightness(.95);
    transform:translateY(-1px);
}
.convert-pdf-hidden-file{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}
.convert-pdf-table-shell{
    height:285px;
    border:1px solid #a9a9a9;
    background:#ffffff;
    overflow:auto;
    box-shadow:inset 0 0 0 1px #e5e1dc;
}
.convert-pdf-table{
    width:100%;
    min-width:720px;
    border-collapse:collapse;
    table-layout:fixed;
    font-size:15px;
    color:#07112b;
}
.convert-pdf-table th{
    height:30px;
    background:#e1dfda;
    color:#07112b;
    text-align:center;
    font-weight:700;
    border:1px solid #aaa7a0;
    padding:0 8px;
}
.convert-pdf-table td{
    height:31px;
    border-bottom:1px solid #eeeeee;
    border-right:1px solid #eeeeee;
    padding:5px 8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    background:#ffffff;
    font-weight:500;
}
.convert-pdf-table tr.is-selected td{
    background:#dce8ff;
    outline:1px solid #2f67e8;
    outline-offset:-1px;
}
.convert-pdf-table tr:hover td{
    background:#eef4ff;
}
.convert-pdf-col-no{
    width:56px;
}
.convert-pdf-col-type{
    width:100px;
}
.convert-pdf-output-row{
    display:grid;
    grid-template-columns:104px minmax(0, 1fr);
    align-items:center;
    gap:0;
    margin-top:14px;
}
.convert-pdf-label{
    color:#07112b;
    font-size:16px;
    font-weight:900;
}
.convert-pdf-select{
    width:100%;
    height:44px;
    border:1px solid #b7b7b7;
    background:#dfddd8;
    color:#07112b;
    padding:0 12px;
    font-size:15px;
    font-weight:700;
    outline:none;
    box-shadow:inset 0 0 0 1px #c8c5bf;
}
.convert-pdf-status{
    min-height:50px;
    border:1px solid #d8dde6;
    background:#fbfcfe;
    color:#07112b;
    display:flex;
    align-items:center;
    padding:0 16px;
    margin-top:13px;
    font-size:14px;
    font-weight:600;
}
.convert-pdf-status.is-error{
    border-color:#ef9ca3;
    background:#fff4f5;
    color:#b4232f;
}
.convert-pdf-status.is-busy{
    border-color:#a6c1ff;
    background:#f3f7ff;
    color:#1949a6;
}
.convert-pdf-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:14px;
}
.convert-pdf-process-btn{
    min-width:190px;
}
.convert-pdf-close-btn{
    color:#09122b;
    text-decoration:none;
    font-size:16px;
    font-weight:900;
    padding:12px 16px;
}
.convert-pdf-close-btn:hover{
    color:#2f67e8;
}
@media(max-width:720px){
    .convert-pdf-module{
        padding:10px 0 18px;
    }
    .convert-pdf-window{
        width:calc(100vw - 18px);
        min-height:auto;
        border-radius:10px;
    }
    .convert-pdf-content{
        padding:24px 12px 10px;
    }
    .convert-pdf-content h1{
        font-size:22px;
    }
    .convert-pdf-subtitle{
        line-height:1.45;
        margin-bottom:18px;
    }
    .convert-pdf-panel{
        padding:12px;
        min-height:auto;
    }
    .convert-pdf-toolbar{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }
    .convert-pdf-upload-btn,
    .convert-pdf-delete-btn,
    .convert-pdf-clear-btn,
    .convert-pdf-process-btn,
    .convert-pdf-close-btn{
        width:100%;
        text-align:center;
    }
    .convert-pdf-output-row{
        grid-template-columns:1fr;
        gap:8px;
    }
    .convert-pdf-actions{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }
}

/* v18.41 Resize Foto / KTP / Dokumen Upload identik gaya resizefile.py */
.resize-file-module{
    min-height:calc(100vh - 120px);
    padding:0 0 24px;
    background:#eef0f3;
    overflow-x:hidden;
}
.resize-file-window{
    width:min(927px, calc(100vw - 16px));
    min-height:692px;
    margin:0 auto;
    background:#f7f8fb;
    border:1px solid #c8c9cb;
    border-radius:0 0 10px 10px;
    box-shadow:0 15px 34px rgba(0,0,0,.24);
    overflow:hidden;
    color:#081128;
    font-family:"Segoe UI", Arial, sans-serif;
}
.resize-file-form{
    margin:0;
}
.resize-file-titlebar{
    height:33px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 14px;
    background:#f4f4f5;
    color:#7c7f86;
    font-size:15px;
    font-weight:500;
    border-bottom:1px solid #e4e5e8;
}
.resize-file-feather{
    width:15px;
    height:15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#1a4d9b;
    font-size:12px;
    transform:rotate(-25deg);
}
.resize-file-title-close{
    margin-left:auto;
    color:#8b8d94;
    font-size:28px;
    line-height:1;
    font-weight:300;
    text-decoration:none;
}
.resize-file-title-close:hover{
    color:#101828;
}
.resize-file-content{
    padding:36px 24px 0;
}
.resize-file-content h1{
    margin:0 0 12px 3px;
    font-size:26px;
    line-height:1.18;
    color:#07112b;
    font-weight:900;
    letter-spacing:-.35px;
}
.resize-file-subtitle{
    margin:0 0 26px 3px;
    color:#788198;
    font-size:14px;
    font-weight:700;
}
.resize-file-panel{
    border:1px solid #d6dbe5;
    background:#ffffff;
    padding:18px 17px 63px;
    min-height:471px;
}
.resize-file-row{
    display:grid;
    grid-template-columns:184px minmax(0, 1fr);
    align-items:center;
    gap:0;
    min-height:61px;
}
.resize-file-row-file{
    grid-template-columns:184px minmax(0, 1fr) 86px;
}
.resize-file-label{
    color:#07112b;
    font-size:16px;
    font-weight:900;
}
.resize-file-name{
    color:#71809a;
    font-size:14px;
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding-right:12px;
}
.resize-file-name.has-file{
    color:#65718a;
}
.resize-file-upload-btn,
.resize-file-process-btn{
    appearance:none;
    border:none;
    border-radius:0;
    cursor:pointer;
    background:#2f67e8;
    color:#ffffff;
    font-family:"Segoe UI", Arial, sans-serif;
    font-size:16px;
    font-weight:900;
    min-height:43px;
    padding:0 17px;
    transition:filter .15s ease, transform .15s ease;
}
.resize-file-upload-btn:hover,
.resize-file-process-btn:hover{
    filter:brightness(.95);
    transform:translateY(-1px);
}
.resize-file-hidden-file{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}
.resize-file-select{
    width:100%;
    height:44px;
    border:1px solid #b7b7b7;
    background:#dfddd8;
    color:#07112b;
    padding:0 12px;
    font-size:15px;
    font-weight:700;
    outline:none;
    box-shadow:inset 0 0 0 1px #c8c5bf;
}
.resize-file-row-target{
    min-height:49px;
}
.resize-file-inline{
    display:flex;
    align-items:center;
    gap:16px;
    min-width:0;
}
.resize-file-target,
.resize-file-pixel{
    width:93px;
    height:24px;
    padding:0 3px;
    border:none;
    border-top:1px solid #c2c7d0;
    border-left:1px solid #c2c7d0;
    background:#ffffff;
    color:#111827;
    font-size:14px;
    outline:none;
    box-shadow:none;
}
.resize-file-help{
    color:#7d889f;
    font-size:14px;
    font-weight:700;
}
.resize-file-row-size{
    min-height:45px;
    align-items:start;
    padding-top:6px;
}
.resize-file-size-grid{
    display:grid;
    grid-template-columns:79px 48px 79px minmax(0, 1fr);
    align-items:center;
    gap:18px 10px;
    min-width:0;
}
.resize-file-size-label{
    color:#7d889f;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
}
.resize-file-size-label-wide{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}
.resize-file-note{
    margin:20px 3px 21px;
    color:#77859e;
    font-size:14px;
    line-height:1.35;
    font-weight:700;
}
.resize-file-status{
    min-height:48px;
    border:1px solid #d8dde6;
    background:#fbfcfe;
    color:#07112b;
    display:flex;
    align-items:center;
    padding:0 15px;
    font-size:16px;
    font-weight:500;
}
.resize-file-status.is-error{
    border-color:#ef9ca3;
    background:#fff4f5;
    color:#b4232f;
}
.resize-file-status.is-busy{
    border-color:#a6c1ff;
    background:#f3f7ff;
    color:#1949a6;
}
.resize-file-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:15px;
}
.resize-file-process-btn{
    min-width:148px;
}
.resize-file-close-btn{
    color:#09122b;
    text-decoration:none;
    font-size:16px;
    font-weight:900;
    padding:12px 16px;
}
.resize-file-close-btn:hover{
    color:#2f67e8;
}
@media(max-width:720px){
    .resize-file-module{
        padding:10px 0 18px;
    }
    .resize-file-window{
        width:calc(100vw - 18px);
        min-height:auto;
        border-radius:10px;
    }
    .resize-file-content{
        padding:24px 12px 10px;
    }
    .resize-file-content h1{
        font-size:22px;
        margin-left:0;
    }
    .resize-file-subtitle{
        margin-left:0;
        line-height:1.45;
        margin-bottom:18px;
    }
    .resize-file-panel{
        padding:14px 12px 26px;
        min-height:auto;
    }
    .resize-file-row,
    .resize-file-row-file{
        grid-template-columns:1fr;
        gap:8px;
        min-height:auto;
        margin-bottom:16px;
    }
    .resize-file-upload-btn,
    .resize-file-process-btn,
    .resize-file-close-btn{
        width:100%;
        text-align:center;
    }
    .resize-file-inline{
        display:grid;
        grid-template-columns:96px 1fr;
        gap:12px;
    }
    .resize-file-size-grid{
        grid-template-columns:96px 1fr;
        gap:9px 12px;
    }
    .resize-file-size-label-wide{
        white-space:normal;
    }
    .resize-file-actions{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }
}

/* v18.42 - Backup Project admin tool */
.backup-tool-page .tool-dialog--backup {
    width: min(920px, 100%);
    margin: 0 auto;
}

.backup-panel {
    border: 1px solid #d8dee8;
    background: #ffffff;
    padding: 18px;
    margin-top: 16px;
}

.backup-row,
.backup-check-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    margin-bottom: 12px;
}

.backup-row p,
.backup-check-row p,
.backup-check-row small {
    margin: 4px 0 0;
    color: #64748b;
    line-height: 1.45;
}

.backup-check-row {
    cursor: pointer;
    justify-content: flex-start;
    background: #ffffff;
}

.backup-check-row input {
    margin-top: 5px;
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    flex: 0 0 auto;
}

.backup-check-row span {
    display: block;
}

.backup-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 800;
    font-size: 12px;
}

.backup-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.backup-info-grid > div {
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    padding: 12px;
}

.backup-info-grid span {
    display: block;
    color: #64748b;
    font-size: 12px;
    margin-bottom: 5px;
}

.backup-info-grid strong {
    color: #0f172a;
}

@media (max-width: 720px) {
    .backup-row,
    .backup-check-row {
        flex-direction: column;
    }

    .backup-info-grid {
        grid-template-columns: 1fr;
    }
}

/* v19.24 Admin technical documentation menu */
.technical-doc-page{
    max-width:1280px;
    width:min(1280px, calc(100vw - 42px));
    margin-left:auto;
    margin-right:auto;
    overflow:visible !important;
}
.technical-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    gap:18px;
    align-items:stretch;
    margin-bottom:18px;
}
.technical-kicker{
    margin:0 0 6px;
    color:#2563eb;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.technical-hero h1{
    margin:0 0 8px;
    font-size:30px;
    line-height:1.15;
    color:#0f172a;
}
.technical-subtitle{
    margin:0;
    max-width:860px;
    line-height:1.65;
}
.technical-status-card{
    border:1px solid #dbeafe;
    background:linear-gradient(135deg,#eff6ff,#fff);
    border-radius:20px;
    padding:18px;
    box-shadow:0 12px 30px rgba(37,99,235,.08);
    display:grid;
    gap:8px;
}
.technical-status-card strong{font-size:13px;color:#1d4ed8;text-transform:uppercase;letter-spacing:.06em}
.technical-status-card span{font-size:22px;font-weight:900;color:#111827}
.technical-status-card small{color:#475569;line-height:1.5}
.technical-menu-grid{
    position:sticky;
    top:78px;
    z-index:8;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px;
    margin:16px 0 24px;
    padding:12px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(12px);
    box-shadow:0 12px 30px rgba(15,23,42,.08);
}
.technical-menu-grid a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    border:1px solid #dbeafe;
    border-radius:12px;
    background:#f8fafc;
    color:#0f172a;
    text-decoration:none;
    font-weight:800;
    font-size:13px;
    transition:all .15s ease;
}
.technical-menu-grid a:hover{
    transform:translateY(-1px);
    background:#2563eb;
    color:#fff;
    border-color:#2563eb;
}
.technical-section{
    scroll-margin-top:160px;
    margin:22px 0;
    padding:22px;
    border:1px solid #e5e7eb;
    border-radius:22px;
    background:#fff;
    box-shadow:0 14px 36px rgba(15,23,42,.05);
}
.technical-section h2{
    margin:0 0 14px;
    color:#0f172a;
    font-size:22px;
}
.technical-section h3{
    margin:20px 0 12px;
    color:#111827;
    font-size:17px;
}
.technical-summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:12px;
}
.technical-summary-card{
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:16px;
    background:#f8fafc;
    display:grid;
    gap:8px;
    min-height:128px;
}
.technical-summary-card span{font-size:12px;font-weight:900;color:#475569;text-transform:uppercase;letter-spacing:.05em}
.technical-summary-card strong{font-size:26px;color:#111827;line-height:1.1}
.technical-summary-card small{font-size:12px;color:#64748b;line-height:1.45}
.technical-note-list{
    display:grid;
    gap:10px;
    margin-bottom:16px;
}
.technical-note-list p{
    margin:0;
    padding:14px 16px;
    border-left:4px solid #2563eb;
    border-radius:12px;
    background:#f8fafc;
    color:#334155;
    line-height:1.7;
}
.technical-flow-grid,.technical-feature-grid,.technical-two-col{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:14px;
}
.technical-flow-card{
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:14px;
    background:#fff;
}
.technical-flow-card strong{display:block;color:#111827;margin-bottom:6px}
.technical-flow-card p{margin:0;color:#475569;line-height:1.55}
.technical-alert{
    border:1px solid #bfdbfe;
    background:#eff6ff;
    color:#1e3a8a;
    border-radius:14px;
    padding:14px 16px;
    margin:12px 0 16px;
    line-height:1.6;
}
.technical-alert.important{
    border-color:#fde68a;
    background:#fffbeb;
    color:#78350f;
}
.technical-table th,.technical-table td{
    vertical-align:top;
    line-height:1.5;
}
.technical-table code,.technical-section code{
    background:#f1f5f9;
    border:1px solid #e2e8f0;
    border-radius:8px;
    padding:2px 6px;
    color:#0f172a;
    font-size:12px;
}
.technical-table.compact th,.technical-table.compact td{font-size:12px;padding:8px 10px}
.technical-details{
    border:1px solid #e2e8f0;
    border-radius:16px;
    background:#fff;
    margin:10px 0;
    overflow:hidden;
}
.technical-details summary{
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    padding:13px 15px;
    background:#f8fafc;
    color:#111827;
}
.technical-details summary span{
    color:#2563eb;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}
.technical-details .responsive-table-wrap,.technical-details p,.technical-chip-list{margin:12px 14px 14px}
.technical-chip-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.technical-chip-list code{
    display:inline-flex;
    align-items:center;
    min-height:28px;
}
.technical-bullet-list{
    margin:0;
    padding-left:18px;
    color:#334155;
    line-height:1.75;
}
.success-panel{border-color:#bbf7d0;background:#f0fdf4}
.warning-panel{border-color:#fed7aa;background:#fff7ed}
.checklist-summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
    margin:16px 0;
}
.checklist-summary-grid span{
    font-size:28px;
    font-weight:900;
    color:#111827;
}
.technical-checklist-wrap{
    overflow:auto;
    max-height:62vh;
    border:1px solid #e5e7eb;
    border-radius:12px;
}
.technical-checklist-wrap table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}
.technical-checklist-wrap thead{
    position:sticky;
    top:0;
    background:#f8fafc;
    z-index:1;
}
.technical-checklist-wrap th,.technical-checklist-wrap td{
    text-align:left;
    padding:10px;
    border-bottom:1px solid #eef2f7;
    vertical-align:top;
}
.technical-checklist-wrap td strong{color:#15803d}
.technical-route-table-wrap{max-height:460px;overflow:auto;border:1px solid #e5e7eb;border-radius:14px}
@media(max-width:900px){
    .technical-doc-page{width:100%;max-width:100%;border-radius:0;padding:16px !important}
    .technical-hero{grid-template-columns:1fr}
    .technical-menu-grid{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
    .technical-section{padding:16px;border-radius:18px;scroll-margin-top:40px}
}
@media(max-width:560px){
    .technical-menu-grid{grid-template-columns:1fr}
    .technical-hero h1{font-size:24px}
    .technical-summary-card strong{font-size:22px}
}

/* v19.25 Bootstrap bridge for Admin Technical Documentation
   Bootstrap dipasang sebagai lapisan UI; aturan ini menjaga desain custom agar tetap stabil. */
.technical-doc-page .card{
    color:inherit;
}
.technical-doc-page .technical-status-card.card,
.technical-doc-page .technical-summary-card.card,
.technical-doc-page .technical-flow-card.card,
.technical-doc-page .panel-card.card{
    padding:16px;
}
.technical-doc-page .technical-section.card{
    display:block;
}
.technical-doc-page .table{
    margin-bottom:0;
}
.technical-doc-page .btn.btn-outline-primary{
    border-color:#bfdbfe;
    color:#0f172a;
    background:#f8fafc;
    font-weight:800;
}
.technical-doc-page .btn.btn-outline-primary:hover,
.technical-doc-page .btn.btn-outline-primary:focus{
    background:#2563eb;
    border-color:#2563eb;
    color:#fff;
}
.technical-doc-page .accordion{
    display:grid;
    gap:10px;
}
.technical-doc-page .accordion-item{
    border-radius:16px !important;
}
.technical-doc-page .list-group-item{
    border-color:#eef2f7;
    background:transparent;
    line-height:1.65;
}
.technical-doc-page .badge.text-bg-primary{
    background:#2563eb !important;
}
@media(max-width:560px){
    .technical-doc-page .btn.btn-outline-primary{
        width:100%;
    }
}

/* v19.28 Server Tools status page */
.server-tools-page{
    width:min(1280px, calc(100% - 48px));
    margin:26px auto 70px;
}
.server-tools-hero .technical-status-card strong{
    font-size:34px;
}
.server-tools-status-grid,
.server-install-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:14px;
}
.server-status-box{
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:16px;
    background:#f8fafc;
    display:grid;
    gap:7px;
}
.server-status-box span,
.server-extension-pill span{
    color:#64748b;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.server-status-box strong{
    color:#0f172a;
    font-size:24px;
    line-height:1.1;
}
.server-status-box p{
    margin:0;
    color:#475569;
    line-height:1.55;
}
.server-status-box.is-ok{
    border-color:#bbf7d0;
    background:#f0fdf4;
}
.server-status-box.is-warning{
    border-color:#fed7aa;
    background:#fff7ed;
}
.tool-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}
.tool-badge.ok{
    color:#166534;
    background:#dcfce7;
    border:1px solid #bbf7d0;
}
.tool-badge.missing{
    color:#9a3412;
    background:#ffedd5;
    border:1px solid #fed7aa;
}
.server-tools-table td small{
    display:block;
    margin-top:6px;
    color:#64748b;
    line-height:1.45;
}
.server-extension-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:10px;
}
.server-extension-pill{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:11px 13px;
    background:#fff;
}
.server-extension-pill strong{
    border-radius:999px;
    padding:3px 8px;
    font-size:12px;
    font-weight:900;
}
.server-extension-pill.is-ok strong{
    color:#166534;
    background:#dcfce7;
}
.server-extension-pill.is-missing strong{
    color:#991b1b;
    background:#fee2e2;
}
.server-install-grid .panel-card{
    padding:16px;
}
.server-install-grid ol{
    margin:0;
    padding-left:18px;
    color:#334155;
    line-height:1.75;
}
@media(max-width:700px){
    .server-tools-page{
        width:100%;
        margin:0 auto 40px;
        padding:14px;
    }
}


/* Database Storage Admin */
.database-storage-page .tool-hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}
.database-storage-page .tool-hero h1{margin:4px 0 8px;font-size:30px;font-weight:900;color:#061947}
.database-storage-page .tool-hero p{max-width:820px;color:#475569;line-height:1.65;margin:0}
.server-status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:10px 16px;font-weight:900;box-shadow:0 10px 26px rgba(15,23,42,.08);white-space:nowrap}
.server-status-pill.ok{background:#dcfce7;color:#166534;border:1px solid #86efac}
.server-status-pill.bad{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}
.database-storage-summary{display:flex;flex-wrap:wrap;gap:10px}
.database-storage-summary span{display:inline-flex;align-items:center;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0;padding:10px 14px;color:#334155}
.database-storage-list{margin:0;padding-left:20px;color:#334155;line-height:1.75}
.database-storage-page code{font-size:12px;color:#0f172a;background:#f1f5f9;border-radius:8px;padding:2px 6px}
@media (max-width: 768px){.database-storage-page .tool-hero{flex-direction:column}.server-status-pill{width:100%;justify-content:center}}

/* v21.61 Tooltip kecil untuk pengaturan latar foto */
.photo-bg-php-form .tooltip-hint{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:6px;
    font-size:12px;
    line-height:1;
    color:#2563eb;
    cursor:help;
}
/* v21.62 Text bantuan pengaturan ekspresi foto */
.photo-bg-php-form .readonly-helper-text{
    display:flex;
    align-items:center;
    min-height:42px;
    border:1px solid #d7e1ee;
    border-radius:12px;
    background:#f8fafc;
    padding:0 14px;
    color:#334155;
    font-weight:800;
}