/* KlikWJP stylesheet bundle. Original style blocks preserved in source order. */

/* ===== original-style-1 (source block 1) ===== */

/* Base styles for the entire app container to prevent WordPress theme interference */
#klikwjp-app-container {
    all: initial; /* Reset all CSS properties */
    display: block; /* Ensure it's a block element */
    font-family: 'Inter', sans-serif;
    color: #333; /* Default text color */
    background-color: #f9fafb; /* Default background color */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    min-width: 320px; /* Ensure a minimum width for responsive baseline */
}
#klikwjp-app-container * {
    box-sizing: border-box; /* Apply box-sizing to all children */
    font-family: 'Inter', sans-serif; /* Ensure Inter font for all children */
}

/* General Body and Transition styles (applied to the container for better scope) */
#klikwjp-app-container {
    transition: background-color 0.3s ease, color 0.3s ease;
}
#klikwjp-app-container .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
#klikwjp-app-container .card-shadow { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
#klikwjp-app-container .animate-fade-in { animation: fadeIn 0.6s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
#klikwjp-app-container .progress-bar { transition: width 0.3s ease-in-out; }

/* Styles for the dark theme — manual toggle only */
#klikwjp-app-container.dark {
    background-color: #1a1a1a;
    color: #e5e5e5;
}
#klikwjp-app-container.dark .bg-white { background-color: #2d2d2d; }
#klikwjp-app-container.dark .bg-gray-50 { background-color: #1f1f1f; }
#klikwjp-app-container.dark .bg-gray-100 { background-color: #333333; }
#klikwjp-app-container.dark .text-gray-800{ color: #e5e5e5 !important; }
#klikwjp-app-container.dark .text-gray-700{ color: #d1d1d1 !important; }
#klikwjp-app-container.dark .text-gray-600{ color: #b3b3b3 !important; }
#klikwjp-app-container.dark .text-gray-500{ color: #999999 !important; }
#klikwjp-app-container.dark .border{ border-color: #404040; }
#klikwjp-app-container.dark .border-b{ border-color: #404040; }
#klikwjp-app-container.dark .border-t{ border-color: #404040; }
#klikwjp-app-container.dark .border-gray-300{ border-color: #404040; }
#klikwjp-app-container.dark input,
#klikwjp-app-container.dark select,
#klikwjp-app-container.dark textarea{
    background-color: #333333;
    border-color: #555555;
    color: #e5e5e5 !important;
}
#klikwjp-app-container.dark input:focus,
#klikwjp-app-container.dark select:focus,
#klikwjp-app-container.dark textarea:focus{
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
#klikwjp-app-container.dark .card-shadow{
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
#klikwjp-app-container.dark .hover\:bg-gray-50:hover{ background-color: #404040; }
#klikwjp-app-container.dark .progress-bar{ background-color: #d8b4fe; }
#klikwjp-app-container.dark .bg-green-100{ background-color: #10B981; }
#klikwjp-app-container.dark .text-green-600{ color: #d1d5db; }
#klikwjp-app-container.dark .text-green-800{ color: #f9fafb; }
#klikwjp-app-container.dark .bg-blue-100{ background-color: #3B82F6; }
#klikwjp-app-container.dark .text-blue-600{ color: #d1d5db; }
#klikwjp-app-container.dark .text-blue-800{ color: #f9fafb; }
#klikwjp-app-container.dark .bg-yellow-100{ background-color: #FBBF24; }
#klikwjp-app-container.dark .text-yellow-600{ color: #d1d5db; }
#klikwjp-app-container.dark .text-yellow-800{ color: #f9fafb; }
#klikwjp-app-container.dark .bg-purple-100{ background-color: #A78BFA; }
#klikwjp-app-container.dark .text-purple-600{ color: #d1d5db; }
#klikwjp-app-container.dark .text-purple-800{ color: #f9fafb; }
#klikwjp-app-container.dark .bg-red-100{ background-color: #EF4444; }
#klikwjp-app-container.dark .text-red-600{ color: #d1d5db; }
#klikwjp-app-container.dark .text-red-800{ color: #f9fafb; }
#klikwjp-app-container.dark .bg-orange-100{ background-color: #F97316; }
#klikwjp-app-container.dark .text-orange-600{ color: #d1d5db; }
#klikwjp-app-container.dark .text-orange-800{ color: #f9fafb; }
#klikwjp-app-container.dark .camera-preview{
    background: #333333;
    border-color: #555555;
}
#klikwjp-app-container.dark label{ color: #d1d5db; }
#klikwjp-app-container.dark input,
#klikwjp-app-container.dark select,
#klikwjp-app-container.dark textarea{ color: #f9fafb !important; }
#klikwjp-app-container.dark footer .text-gray-300,
#klikwjp-app-container.dark footer .text-gray-400{ color: #e5e5e5 !important; }
#klikwjp-app-container.dark footer .text-gray-500{ color: #d1d5db !important; }
#klikwjp-app-container.dark footer .text-purple-400{ color: #d8b4fe !important; }


/* Custom Dynamic Themes */
#klikwjp-app-container.pagi {
    background-color: #f0f4f8; /* A light, airy background for morning */
    color: #2c3e50; /* Darker text for readability */
}
#klikwjp-app-container.pagi .bg-white { background-color: #fff; }
#klikwjp-app-container.pagi .bg-gray-50 { background-color: #f9fafb; }
#klikwjp-app-container.pagi .bg-gray-100 { background-color: #f3f4f6; }
#klikwjp-app-container.pagi .text-gray-800 { color: #1f2937 !important; }
#klikwjp-app-container.pagi .text-gray-700 { color: #374151 !important; }
#klikwjp-app-container.pagi .text-gray-600 { color: #4b5563 !important; }
#klikwjp-app-container.pagi .text-gray-500 { color: #6b7280 !important; }
#klikwjp-app-container.pagi .border { border-color: #e5e7eb; }
#klikwjp-app-container.pagi .border-b { border-color: #e5e7eb; }
#klikwjp-app-container.pagi .border-t { border-color: #e5e7eb; }
#klikwjp-app-container.pagi .border-gray-300 { border-color: #e5e7eb; }
#klikwjp-app-container.pagi input,
#klikwjp-app-container.pagi select,
#klikwjp-app-container.pagi textarea {
    background-color: #fff;
    border-color: #d1d5db;
    color: #1f2937 !important;
}
#klikwjp-app-container.pagi .card-shadow { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
#klikwjp-app-container.pagi .hover\:bg-gray-50:hover { background-color: #f9fafb; }
#klikwjp-app-container.pagi label { color: #374151; }
#klikwjp-app-container.pagi input,
#klikwjp-app-container.pagi select,
#klikwjp-app-container.pagi textarea { color: #1f2937 !important; }

#klikwjp-app-container.siang {
    background-color: #fff; /* White background for daytime */
    color: #1a1a1a; /* Very dark text for high contrast */
}
#klikwjp-app-container.siang .bg-white { background-color: #f9fafb; }
#klikwjp-app-container.siang .bg-gray-50 { background-color: #f3f4f6; }
#klikwjp-app-container.siang .bg-gray-100 { background-color: #e5e7eb; }
#klikwjp-app-container.siang .text-gray-800 { color: #1f2937 !important; }
#klikwjp-app-container.siang .text-gray-700 { color: #374151 !important; }
#klikwjp-app-container.siang .text-gray-600 { color: #4b5563 !important; }
#klikwjp-app-container.siang .text-gray-500 { color: #6b7280 !important; }
#klikwjp-app-container.siang .border { border-color: #d1d5db; }
#klikwjp-app-container.siang .border-b { border-color: #d1d5db; }
#klikwjp-app-container.siang .border-t { border-color: #d1d5db; }
#klikwjp-app-container.siang .border-gray-300 { border-color: #d1d5db; }
#klikwjp-app-container.siang input,
#klikwjp-app-container.siang select,
#klikwjp-app-container.siang textarea {
    background-color: #fff;
    border-color: #d1d5db;
    color: #1f2937 !important;
}
#klikwjp-app-container.siang .card-shadow { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
#klikwjp-app-container.siang .hover\:bg-gray-50:hover { background-color: #f3f4f6; }
#klikwjp-app-container.siang label { color: #374151; }
#klikwjp-app-container.siang input,
#klikwjp-app-container.siang select,
#klikwjp-app-container.siang textarea { color: #1f2937 !important; }

/* Mobile menu styles */
#klikwjp-app-container .mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}
#klikwjp-app-container .mobile-menu.open {
    transform: translateX(0);
}

/* Camera Preview for Penagihan Form */
#klikwjp-app-container .camera-preview {
    width: 100%;
    max-width: 400px;
    height: 300px;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    margin: 16px auto;
}
#klikwjp-app-container .photo-taken {
    border: 2px solid #10b981;
    background: #ecfdf5;
}


/* Theme toggle button */
#klikwjp-app-container .theme-toggle {
    position: relative;
    width: 60px;
    height: 30px;
    background-color: #ccc;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#klikwjp-app-container .theme-toggle.dark {
    background-color: #667eea;
}
#klikwjp-app-container .theme-toggle::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}
#klikwjp-app-container .theme-toggle.dark::before {
    transform: translateX(30px);
}

/* Specific Header Text Color */
#klikwjp-app-container header h1 {
    color: white !important;
}
#klikwjp-app-container header a, #klikwjp-app-container header button {
    color: white !important;
}

/* Specific Footer Text Color for contrast */
#klikwjp-app-container footer h3,
#klikwjp-app-container footer h4,
#klikwjp-app-container footer ul li,
#klikwjp-app-container footer p {
    color: white !important;
}
#klikwjp-app-container footer .text-purple-400 {
    color: #d8b4fe !important;
}

/* Adjustments for the deposit schedule table to ensure single line */
#depositScheduleBody td {
    white-space: nowrap;
    padding-right: 1.5rem;
    min-width: 120px;
}
#depositScheduleBody td:nth-child(1),
#depositScheduleBody td:nth-child(2) {
    text-align: left;
}
#depositScheduleBody td:nth-child(3),
#depositScheduleBody td:nth-child(4),
#depositScheduleBody td:nth-child(5) {
    text-align: right;
}

/* Ensure table headers also don't wrap and align */
#depositSimulator table th {
    white-space: nowrap;
    padding-right: 1.5rem;
    min-width: 120px;
}
#depositSimulator table th:nth-child(1),
#depositSimulator table th:nth-child(2) {
    text-align: left;
}
#depositSimulator table th:nth-child(3),
#depositSimulator table th:nth-child(4),
#depositSimulator table th:nth-child(5) {
    text-align: right;
}

/* =========================================================
   KLIKWJP MODERN UI LAYER
   Visual-only enhancement: functionality and existing JS IDs
   are intentionally preserved.
   ========================================================= */
#klikwjp-app-container{
    --kwjp-primary:#5b4bdb;
    --kwjp-primary-2:#7c3aed;
    --kwjp-accent:#06b6d4;
    --kwjp-ink:#172033;
    --kwjp-muted:#667085;
    --kwjp-line:#e7eaf0;
    --kwjp-surface:#ffffff;
    --kwjp-soft:#f6f7fb;
    --kwjp-radius:22px;
    background:
      radial-gradient(circle at 10% 0%, rgba(124,58,237,.08), transparent 28%),
      radial-gradient(circle at 90% 12%, rgba(6,182,212,.06), transparent 25%),
      #f7f8fc;
}
#klikwjp-app-container .container{max-width:1180px}
#klikwjp-app-container button,
#klikwjp-app-container a,
#klikwjp-app-container input,
#klikwjp-app-container select,
#klikwjp-app-container textarea{transition:all .22s ease}

#klikwjp-app-container header{
    position:sticky;
    top:0;
    z-index:100;
    background:linear-gradient(115deg,#17152d 0%,#30256f 52%,#4c2a88 100%) !important;
    box-shadow:0 8px 30px rgba(21,16,52,.18);
    backdrop-filter:blur(16px);
}
#klikwjp-app-container header > div:first-child{padding-top:14px!important;padding-bottom:14px!important}
#klikwjp-app-container header .w-10.h-10{
    width:42px!important;height:42px!important;border-radius:13px!important;
    box-shadow:0 8px 22px rgba(0,0,0,.18)
}
#klikwjp-app-container header h1{letter-spacing:-.03em!important}
#klikwjp-app-container header nav > a,
#klikwjp-app-container header nav > div > button{
    padding:9px 11px;
    border-radius:10px;
    font-size:.92rem;
}
#klikwjp-app-container header nav > a:hover,
#klikwjp-app-container header nav > div > button:hover{background:rgba(255,255,255,.10)}
#klikwjp-app-container header .group > div{
    background:#211a4d!important;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 40px rgba(0,0,0,.22);
    padding:7px!important;
    border-radius:14px!important;
}
#klikwjp-app-container header .group > div a{border-radius:9px}
#klikwjp-app-container .theme-toggle{box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 5px 14px rgba(0,0,0,.15)}

#klikwjp-app-container #home{padding-top:34px!important}
#klikwjp-app-container .kwjp-hero{
    position:relative;
    min-height:430px;
    overflow:hidden;
    border-radius:30px;
    padding:58px 62px;
    display:flex;
    align-items:center;
    isolation:isolate;
    color:#fff;
    background:
      radial-gradient(circle at 78% 42%,rgba(139,92,246,.42),transparent 28%),
      radial-gradient(circle at 100% 0%,rgba(34,211,238,.20),transparent 30%),
      linear-gradient(120deg,#17152f 0%,#30256d 55%,#452579 100%);
    box-shadow:0 28px 70px rgba(42,30,100,.24);
}
#klikwjp-app-container .kwjp-hero::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(15,12,35,.14),transparent 60%);
    z-index:-1;
}
#klikwjp-app-container .kwjp-hero-content{position:relative;z-index:4;max-width:690px}
#klikwjp-app-container .kwjp-hero-badge{
    display:inline-flex;align-items:center;gap:9px;
    padding:8px 13px;border-radius:999px;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.14);
    color:rgba(255,255,255,.82);
    font-size:11px;font-weight:800;letter-spacing:.13em;
    margin-bottom:22px;backdrop-filter:blur(12px)
}
#klikwjp-app-container .kwjp-live-dot{
    width:7px;height:7px;border-radius:50%;background:#4ade80;
    box-shadow:0 0 0 5px rgba(74,222,128,.10),0 0 14px rgba(74,222,128,.8)
}
#klikwjp-app-container .kwjp-hero h2{
    margin:0 0 17px!important;
    color:#fff!important;
    font-size:clamp(2.55rem,5vw,4.55rem)!important;
    line-height:.98!important;
    letter-spacing:-.055em!important;
    font-weight:850!important
}
#klikwjp-app-container .kwjp-hero h2 span{
    background:linear-gradient(90deg,#c4b5fd,#67e8f9);
    -webkit-background-clip:text;background-clip:text;color:transparent
}
#klikwjp-app-container .kwjp-hero p{
    max-width:640px;margin:0!important;
    color:rgba(255,255,255,.72)!important;
    font-size:1.05rem!important;line-height:1.75!important
}
#klikwjp-app-container .kwjp-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
#klikwjp-app-container .kwjp-hero-btn{
    min-height:47px;padding:0 18px;border-radius:13px!important;
    font-size:.92rem;font-weight:800!important;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    border:1px solid transparent!important
}
#klikwjp-app-container .kwjp-hero-btn-primary{
    color:#20173f!important;background:#fff!important;
    box-shadow:0 12px 28px rgba(0,0,0,.18)
}
#klikwjp-app-container .kwjp-hero-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.25)}
#klikwjp-app-container .kwjp-hero-btn-secondary{
    color:#fff!important;background:rgba(255,255,255,.08)!important;
    border-color:rgba(255,255,255,.18)!important
}
#klikwjp-app-container .kwjp-hero-btn-secondary:hover{background:rgba(255,255,255,.15)!important}
#klikwjp-app-container .kwjp-btn-arrow{font-size:1.25rem;line-height:1}
#klikwjp-app-container .kwjp-hero-meta{
    display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:25px;
    color:rgba(255,255,255,.54);font-size:.76rem;font-weight:650
}
#klikwjp-app-container .kwjp-hero-orbit{
    position:absolute;width:390px;height:390px;right:-28px;top:20px;
    display:flex;align-items:center;justify-content:center;z-index:1
}
#klikwjp-app-container .kwjp-orbit-ring{
    position:absolute;border:1px solid rgba(255,255,255,.10);border-radius:50%;
    transform:rotate(-18deg)
}
#klikwjp-app-container .kwjp-orbit-ring-1{width:300px;height:300px}
#klikwjp-app-container .kwjp-orbit-ring-2{width:390px;height:390px;border-color:rgba(103,232,249,.10)}
#klikwjp-app-container .kwjp-hero-mark{
    width:145px;height:145px;border-radius:42px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.17);
    box-shadow:0 25px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter:blur(18px);transform:rotate(7deg)
}
#klikwjp-app-container .kwjp-hero-mark strong{font-size:2.35rem;letter-spacing:-.06em}
#klikwjp-app-container .kwjp-hero-mark small{font-size:8px;letter-spacing:.16em;color:rgba(255,255,255,.55);margin-top:3px}

#klikwjp-app-container #home .grid{
    gap:18px!important;
    margin-top:22px;
}
#klikwjp-app-container #home .grid > div{
    position:relative;
    padding:25px!important;
    min-height:220px;
    display:flex;flex-direction:column;align-items:center;
    border:1px solid rgba(20,24,40,.06);
    border-radius:20px!important;
    background:rgba(255,255,255,.90)!important;
    box-shadow:0 12px 35px rgba(20,24,40,.07)!important;
    overflow:hidden;
}
#klikwjp-app-container #home .grid > div::before{
    content:"";position:absolute;left:0;right:0;top:0;height:3px;
    background:linear-gradient(90deg,#5b4bdb,#06b6d4);opacity:.0;transition:.25s
}
#klikwjp-app-container #home .grid > div:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 42px rgba(20,24,40,.11)!important;
    border-color:rgba(91,75,219,.16)
}
#klikwjp-app-container #home .grid > div:hover::before{opacity:1}
#klikwjp-app-container #home .grid > div > div{
    width:52px!important;height:52px!important;margin-bottom:17px!important;
    border-radius:16px!important;font-size:1.45rem!important
}
#klikwjp-app-container #home .grid > div h3{font-size:1.05rem!important;letter-spacing:-.015em;margin-bottom:8px!important}
#klikwjp-app-container #home .grid > div p{
    font-size:.84rem!important;line-height:1.6;color:#667085!important;margin-bottom:auto
}
#klikwjp-app-container #home .grid > div button,
#klikwjp-app-container #home .grid > div a{
    margin-top:17px!important;
    min-height:38px;padding:9px 14px;
    border-radius:10px;background:#f3f1ff;
    text-decoration:none;
    font-size:.78rem!important;font-weight:800!important
}

#klikwjp-app-container section:not(#home){
    background:transparent!important;
}
#klikwjp-app-container section:not(#home) > .container > .max-w-6xl,
#klikwjp-app-container section:not(#home) > .container > .max-w-4xl{
    position:relative;
}
#klikwjp-app-container section:not(#home) h2{
    font-size:clamp(1.8rem,3vw,2.45rem)!important;
    letter-spacing:-.035em;
    color:var(--kwjp-ink);
    margin-bottom:28px!important
}
#klikwjp-app-container section:not(#home) h2::after{
    content:"";display:block;width:42px;height:4px;border-radius:99px;
    background:linear-gradient(90deg,#5b4bdb,#06b6d4);margin:11px auto 0
}

#klikwjp-app-container section:not(#home) .bg-gray-50,
#klikwjp-app-container section:not(#home) .bg-white{
    border:1px solid rgba(20,24,40,.06)!important;
    border-radius:22px!important;
    box-shadow:0 15px 45px rgba(20,24,40,.06)!important
}
#klikwjp-app-container section:not(#home) .bg-gray-50{background:#f9faff!important}
#klikwjp-app-container section:not(#home) .bg-white{background:rgba(255,255,255,.96)!important}
#klikwjp-app-container section:not(#home) .bg-gray-50,
#klikwjp-app-container section:not(#home) .bg-white{padding:28px!important}

#klikwjp-app-container label{
    color:#344054!important;font-weight:750!important;
    font-size:.78rem!important;letter-spacing:.01em
}
#klikwjp-app-container input,
#klikwjp-app-container select,
#klikwjp-app-container textarea{
    min-height:46px!important;
    border:1px solid #dfe3eb!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#172033!important;
    box-shadow:0 2px 4px rgba(16,24,40,.02)!important;
    padding:11px 13px!important;
    outline:none
}
#klikwjp-app-container input:hover,
#klikwjp-app-container select:hover,
#klikwjp-app-container textarea:hover{border-color:#c8cde0!important}
#klikwjp-app-container input:focus,
#klikwjp-app-container select:focus,
#klikwjp-app-container textarea:focus{
    border-color:#7668e8!important;
    box-shadow:0 0 0 4px rgba(91,75,219,.10),0 5px 15px rgba(16,24,40,.04)!important;
    transform:translateY(-1px)
}
#klikwjp-app-container input::placeholder,
#klikwjp-app-container textarea::placeholder{color:#a1a9b8!important}
#klikwjp-app-container form .border-b{
    border-color:#eceef3!important;
}
#klikwjp-app-container form h3,
#klikwjp-app-container .bg-white > h3,
#klikwjp-app-container .bg-gray-50 > h3{
    color:#20283a!important;
    letter-spacing:-.02em
}

#klikwjp-app-container button:not(.theme-toggle):not(#mobileMenuBtn){
    border-radius:12px;
}
#klikwjp-app-container .bg-blue-600,
#klikwjp-app-container .bg-green-600,
#klikwjp-app-container .bg-purple-600{
    box-shadow:0 8px 20px rgba(91,75,219,.18);
}
#klikwjp-app-container button.bg-blue-600:hover,
#klikwjp-app-container button.bg-green-600:hover,
#klikwjp-app-container button.bg-purple-600:hover{transform:translateY(-2px)}

#klikwjp-app-container table{
    border-collapse:separate!important;border-spacing:0!important;
    overflow:hidden;border:1px solid #e9ebf0;border-radius:15px
}
#klikwjp-app-container table thead{background:#f5f6fa!important}
#klikwjp-app-container table th{
    color:#475467!important;font-size:.73rem!important;
    text-transform:uppercase;letter-spacing:.05em
}
#klikwjp-app-container table td{color:#344054;border-bottom:1px solid #eef0f4}
#klikwjp-app-container table tbody tr:last-child td{border-bottom:0}
#klikwjp-app-container table tbody tr:hover{background:#fafaff}

#klikwjp-app-container .progress-bar{
    background:linear-gradient(90deg,#5b4bdb,#06b6d4)!important;
    box-shadow:0 0 12px rgba(91,75,219,.28)
}
#klikwjp-app-container .camera-preview{
    border:1px dashed #c9cde0!important;
    border-radius:18px!important;
    background:linear-gradient(145deg,#fafaff,#f3f5fa)!important
}

#klikwjp-app-container footer{
    margin-top:40px;
    border-top:1px solid rgba(255,255,255,.08);
}

/* Dark mode remains functional; only visual values are refined. */
#klikwjp-app-container.dark{
    background:
      radial-gradient(circle at 10% 0%,rgba(124,58,237,.14),transparent 28%),
      #0d0f15!important;
}
#klikwjp-app-container.dark section:not(#home) h2{color:#f4f5f7!important}
#klikwjp-app-container.dark section:not(#home) .bg-white{background:#171a22!important;border-color:#272c38!important}
#klikwjp-app-container.dark section:not(#home) .bg-gray-50{background:#14171f!important;border-color:#272c38!important}
#klikwjp-app-container.dark input,
#klikwjp-app-container.dark select,
#klikwjp-app-container.dark textarea{
    background:#20242e!important;border-color:#343a49!important;color:#f8fafc!important
}
#klikwjp-app-container.dark label{color:#d0d5dd!important}
#klikwjp-app-container.dark #home .grid > div{
    background:#171a22!important;border-color:#272c38!important
}
#klikwjp-app-container.dark #home .grid > div p{color:#98a2b3!important}

@media (max-width: 767px){
    #klikwjp-app-container #home{padding-top:18px!important}
    #klikwjp-app-container .kwjp-hero{
        min-height:520px;padding:34px 24px 30px;border-radius:24px;
        align-items:flex-start
    }
    #klikwjp-app-container .kwjp-hero h2{font-size:2.65rem!important}
    #klikwjp-app-container .kwjp-hero p{font-size:.92rem!important;line-height:1.65!important}
    #klikwjp-app-container .kwjp-hero-actions{display:grid;grid-template-columns:1fr;gap:9px}
    #klikwjp-app-container .kwjp-hero-btn{width:100%;min-height:45px}
    #klikwjp-app-container .kwjp-hero-meta{gap:7px 12px;font-size:.68rem;max-width:340px}
    #klikwjp-app-container .kwjp-hero-orbit{
        width:230px;height:230px;right:-65px;bottom:-70px;top:auto;opacity:.65
    }
    #klikwjp-app-container .kwjp-orbit-ring-1{width:190px;height:190px}
    #klikwjp-app-container .kwjp-orbit-ring-2{width:235px;height:235px}
    #klikwjp-app-container .kwjp-hero-mark{width:86px;height:86px;border-radius:25px}
    #klikwjp-app-container .kwjp-hero-mark strong{font-size:1.45rem}
    #klikwjp-app-container .kwjp-hero-mark small{font-size:5px}
    #klikwjp-app-container #home .grid{grid-template-columns:1fr 1fr!important}
    #klikwjp-app-container #home .grid > div{min-height:205px;padding:19px 13px!important}
    #klikwjp-app-container #home .grid > div h3{font-size:.9rem!important}
    #klikwjp-app-container #home .grid > div p{font-size:.72rem!important}
    #klikwjp-app-container #home .grid > div > div{width:46px!important;height:46px!important}
    #klikwjp-app-container section:not(#home) .bg-gray-50,
    #klikwjp-app-container section:not(#home) .bg-white{padding:19px!important;border-radius:18px!important}
    #klikwjp-app-container section:not(#home) h2{font-size:1.75rem!important}
    #klikwjp-app-container #simulator .grid,
    #klikwjp-app-container #depositSimulator .grid,
    #klikwjp-app-container #savingsSimulator .grid{gap:13px!important}
}
@media (max-width:380px){
    #klikwjp-app-container #home .grid{grid-template-columns:1fr!important}
    #klikwjp-app-container .kwjp-hero{min-height:535px}
}



/* =========================================================
   KLIKWJP — PREMIUM CREDIT + COLLECTION HERO
   Visual-only layer. Existing handlers/IDs are preserved.
   ========================================================= */
#klikwjp-app-container .kwjp-credit-hero{
    position:relative;min-height:330px;margin-bottom:30px;padding:38px 42px;
    border-radius:28px;overflow:hidden;color:#fff;
    background:
      radial-gradient(circle at 78% 18%,rgba(99,102,241,.30),transparent 28%),
      radial-gradient(circle at 95% 85%,rgba(56,189,248,.18),transparent 25%),
      linear-gradient(125deg,#081b46 0%,#102b67 48%,#31206b 100%);
    box-shadow:0 24px 60px rgba(15,32,86,.22);
    display:flex;align-items:center;justify-content:space-between;gap:25px;
}
#klikwjp-app-container .kwjp-credit-hero::before,
#klikwjp-app-container .kwjp-collection-hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
    background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:32px 32px;mask-image:linear-gradient(90deg,#000,transparent 78%);
}
#klikwjp-app-container .kwjp-credit-hero .kwjp-sim-hero-copy,
#klikwjp-app-container .kwjp-collection-copy{position:relative;z-index:3;max-width:650px}
#klikwjp-app-container .kwjp-credit-hero .kwjp-sim-eyebrow,
#klikwjp-app-container .kwjp-collection-hero .kwjp-sim-eyebrow{color:#c7d2fe}
#klikwjp-app-container .kwjp-credit-hero h1,
#klikwjp-app-container .kwjp-collection-hero h1{font-size:clamp(2rem,4vw,3.35rem);line-height:1.05;font-weight:800;letter-spacing:-.035em;margin:13px 0 15px;color:#fff}
#klikwjp-app-container .kwjp-credit-hero h1 span,
#klikwjp-app-container .kwjp-collection-hero h1 span{color:#a5b4fc}
#klikwjp-app-container .kwjp-credit-hero p,
#klikwjp-app-container .kwjp-collection-hero p{max-width:610px;color:#dbeafe;line-height:1.7;font-size:.98rem;margin:0 0 20px}
#klikwjp-app-container .kwjp-credit-hero .kwjp-hero-pills,
#klikwjp-app-container .kwjp-collection-hero .kwjp-hero-pills{display:flex;flex-wrap:wrap;gap:8px}
#klikwjp-app-container .kwjp-credit-hero .kwjp-hero-pills span,
#klikwjp-app-container .kwjp-collection-hero .kwjp-hero-pills span{
    padding:8px 12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);
    border-radius:999px;font-size:.72rem;color:#eef2ff;backdrop-filter:blur(8px)
}
#klikwjp-app-container .kwjp-credit-hero .kwjp-sim-hero-art{position:relative;width:360px;height:270px;flex:0 0 360px;z-index:2}
#klikwjp-app-container .kwjp-credit-hero .kwjp-orbit{position:absolute;border:1px solid rgba(147,197,253,.22);border-radius:50%;transform:rotate(-18deg)}
#klikwjp-app-container .kwjp-credit-hero .kwjp-orbit.o1{width:250px;height:155px;right:18px;top:48px}
#klikwjp-app-container .kwjp-credit-hero .kwjp-orbit.o2{width:315px;height:195px;right:-8px;top:25px}
#klikwjp-app-container .kwjp-art-building{position:absolute;right:58px;bottom:30px;width:180px;height:128px;filter:drop-shadow(0 20px 20px rgba(0,0,0,.22))}
#klikwjp-app-container .building-roof{position:absolute;left:0;top:0;width:180px;height:62px;background:linear-gradient(135deg,#c7d2fe,#818cf8);clip-path:polygon(50% 0,100% 55%,100% 100%,0 100%,0 55%);opacity:.95}
#klikwjp-app-container .building-body{position:absolute;left:22px;right:22px;top:46px;bottom:0;background:linear-gradient(180deg,#eef2ff,#c7d2fe);border-radius:5px 5px 8px 8px;padding:19px 12px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
#klikwjp-app-container .building-body i{display:block;border-radius:3px;background:linear-gradient(180deg,#2563eb,#60a5fa);box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
#klikwjp-app-container .kwjp-art-car{position:absolute;right:5px;bottom:17px;width:88px;height:31px;border-radius:18px 25px 8px 8px;background:linear-gradient(180deg,#e0e7ff,#6366f1);box-shadow:0 10px 15px rgba(0,0,0,.22)}
#klikwjp-app-container .kwjp-art-car::before{content:"";position:absolute;left:18px;top:-13px;width:45px;height:17px;border-radius:20px 20px 2px 2px;background:#a5b4fc;transform:skew(-18deg)}
#klikwjp-app-container .kwjp-art-car::after{content:"●   ●";position:absolute;left:17px;bottom:-7px;color:#111827;font-size:11px;letter-spacing:15px}
#klikwjp-app-container .kwjp-credit-hero .kwjp-art-card{position:absolute;z-index:4;padding:10px 13px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(10,25,65,.72);box-shadow:0 12px 30px rgba(0,0,0,.2);font-size:8px;line-height:1.25;color:#bfdbfe;backdrop-filter:blur(10px)}
#klikwjp-app-container .kwjp-credit-hero .kwjp-art-card strong{font-size:13px;color:#fff}
#klikwjp-app-container .kwjp-credit-hero .kwjp-art-card.one{right:245px;top:35px}
#klikwjp-app-container .kwjp-credit-hero .kwjp-art-card.two{right:8px;top:105px}
#klikwjp-app-container .kwjp-credit-hero .kwjp-coin{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b 70%);box-shadow:0 7px 12px rgba(0,0,0,.22);border:2px solid rgba(255,255,255,.22)}
#klikwjp-app-container .kwjp-credit-hero .kwjp-coin.c1{width:22px;height:22px;right:35px;bottom:85px}.kwjp-credit-hero .kwjp-coin.c2{width:16px;height:16px;right:105px;bottom:12px}.kwjp-credit-hero .kwjp-coin.c3{width:12px;height:12px;right:165px;bottom:58px}

#klikwjp-app-container .kwjp-collection-hero{
    position:relative;min-height:300px;margin-bottom:30px;padding:38px 42px;border-radius:28px;overflow:hidden;color:#fff;
    background:radial-gradient(circle at 82% 25%,rgba(59,130,246,.24),transparent 29%),radial-gradient(circle at 100% 100%,rgba(99,102,241,.24),transparent 35%),linear-gradient(125deg,#071a3d,#102b61 52%,#1f2760);
    box-shadow:0 24px 60px rgba(15,31,75,.22);display:flex;align-items:center;justify-content:space-between;gap:20px
}
#klikwjp-app-container .kwjp-collection-art{position:relative;width:300px;height:230px;flex:0 0 300px;z-index:2}
#klikwjp-app-container .collection-glow{position:absolute;width:190px;height:190px;right:25px;top:15px;border-radius:50%;background:rgba(96,165,250,.12);filter:blur(12px)}
#klikwjp-app-container .collection-ring{position:absolute;border:1px solid rgba(147,197,253,.2);border-radius:50%;transform:rotate(-18deg)}
#klikwjp-app-container .ring-a{width:245px;height:150px;right:12px;top:35px}.ring-b{width:290px;height:185px;right:-12px;top:16px}
#klikwjp-app-container .collection-board{position:absolute;right:65px;bottom:23px;width:155px;height:180px;border-radius:15px;background:linear-gradient(145deg,#f8fafc,#dbeafe);box-shadow:0 22px 35px rgba(0,0,0,.25);transform:rotate(5deg);padding:25px 16px;color:#172554}
#klikwjp-app-container .board-top{display:flex;gap:4px;margin-bottom:18px}.board-top span{width:5px;height:5px;border-radius:50%;background:#60a5fa}.board-line{height:8px;border-radius:8px;background:#bfdbfe;margin:11px 0;width:72%}.board-line.wide{width:92%;height:12px;background:#3b82f6}.board-check{position:absolute;right:13px;bottom:17px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#10b981;color:white;font-weight:800;box-shadow:0 7px 15px rgba(16,185,129,.3)}
#klikwjp-app-container .collection-shield{position:absolute;right:24px;bottom:10px;width:62px;height:72px;clip-path:polygon(50% 0,92% 17%,84% 72%,50% 100%,16% 72%,8% 17%);background:linear-gradient(145deg,#60a5fa,#2563eb);display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 12px 15px rgba(0,0,0,.25))}.collection-shield span{width:28px;height:28px;border-radius:50%;background:white;color:#2563eb;display:flex;align-items:center;justify-content:center;font-weight:900}

@media(max-width:767px){
 #klikwjp-app-container .kwjp-credit-hero,#klikwjp-app-container .kwjp-collection-hero{min-height:520px;padding:30px 23px 24px;display:block;border-radius:22px}
 #klikwjp-app-container .kwjp-credit-hero h1,#klikwjp-app-container .kwjp-collection-hero h1{font-size:2.15rem}
 #klikwjp-app-container .kwjp-credit-hero p,#klikwjp-app-container .kwjp-collection-hero p{font-size:.86rem;line-height:1.6}
 #klikwjp-app-container .kwjp-credit-hero .kwjp-sim-hero-art{width:100%;height:205px;margin-top:14px;transform:scale(.9);transform-origin:center top}
 #klikwjp-app-container .kwjp-collection-art{width:100%;height:205px;margin-top:14px;transform:scale(.9);transform-origin:center top}
 #klikwjp-app-container .kwjp-credit-hero .kwjp-hero-pills,#klikwjp-app-container .kwjp-collection-hero .kwjp-hero-pills{gap:6px}
 #klikwjp-app-container .kwjp-credit-hero .kwjp-hero-pills span,#klikwjp-app-container .kwjp-collection-hero .kwjp-hero-pills span{font-size:.65rem;padding:7px 9px}
}

/* =========================================================
   KLIKWJP — PENAGIHAN PRO / PREMIUM UI
   Visual-only layer. Existing IDs, labels, values, handlers,
   dynamic forms and submission logic are untouched.
   ========================================================= */

#klikwjp-app-container #penagihan{
    position:relative;
    padding-top:42px!important;
    padding-bottom:70px!important;
    background:
      radial-gradient(circle at 5% 4%,rgba(91,75,219,.09),transparent 23%),
      radial-gradient(circle at 95% 15%,rgba(6,182,212,.07),transparent 24%),
      #f7f8fc!important;
}
#klikwjp-app-container #penagihan > .max-w-4xl{
    max-width:1000px!important;
}

/* Premium page header */
#klikwjp-app-container #penagihan > .max-w-4xl > .text-center{
    position:relative;
    padding:32px 24px 30px;
    margin-bottom:28px!important;
    border-radius:26px;
    overflow:hidden;
    color:#fff;
    background:
      radial-gradient(circle at 85% 30%,rgba(103,232,249,.20),transparent 28%),
      linear-gradient(125deg,#17152f,#30256d 58%,#452579);
    box-shadow:0 22px 55px rgba(42,30,100,.20);
}
#klikwjp-app-container #penagihan > .max-w-4xl > .text-center::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.045) 45%,transparent 70%);
    pointer-events:none;
}
#klikwjp-app-container #penagihan > .max-w-4xl > .text-center > div:first-child{
    width:62px!important;height:62px!important;
    margin:0 auto 15px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.11)!important;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 30px rgba(0,0,0,.18)!important;
}
#klikwjp-app-container #penagihan > .max-w-4xl > .text-center > div:first-child svg{
    width:29px!important;height:29px!important
}
#klikwjp-app-container #penagihan > .max-w-4xl > .text-center h1{
    position:relative;
    margin-bottom:7px!important;
    color:#fff!important;
    background:none!important;
    -webkit-text-fill-color:#fff!important;
    font-size:clamp(2rem,4vw,2.8rem)!important;
    letter-spacing:-.045em!important;
}
#klikwjp-app-container #penagihan > .max-w-4xl > .text-center h1::after{display:none!important}
#klikwjp-app-container #penagihan > .max-w-4xl > .text-center p{
    position:relative;
    margin:0!important;
    color:rgba(255,255,255,.67)!important;
    font-size:.9rem!important;
    font-weight:550!important;
}

/* Section cards become professional workflow panels */
#klikwjp-app-container #penagihan .section-card{
    position:relative;
    margin-bottom:18px!important;
    padding:0!important;
    border:1px solid #e7e9f0!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 12px 36px rgba(20,24,40,.055)!important;
    overflow:hidden;
}
#klikwjp-app-container #penagihan .section-card::before{
    content:"";
    position:absolute;left:0;top:0;bottom:0;width:4px;
    background:linear-gradient(180deg,#5b4bdb,#06b6d4);
}
#klikwjp-app-container #penagihan .section-content{
    padding:25px 28px!important;
}
#klikwjp-app-container #penagihan .section-content > h2{
    display:flex;align-items:center;
    gap:12px;
    margin-bottom:22px!important;
    padding-bottom:15px;
    border-bottom:1px solid #eef0f4;
    color:#1d2535!important;
    font-size:1rem!important;
    letter-spacing:-.015em!important;
}
#klikwjp-app-container #penagihan .section-content > h2::after{display:none!important}
#klikwjp-app-container #penagihan .section-content > h2 > div{
    flex:0 0 auto;
    width:34px!important;height:34px!important;
    margin:0!important;
    border-radius:11px!important;
    background:linear-gradient(135deg,#5b4bdb,#06b6d4)!important;
    box-shadow:0 7px 16px rgba(91,75,219,.20);
}

/* Field layout */
#klikwjp-app-container #penagihan .section-content .grid{
    gap:17px!important
}
#klikwjp-app-container #penagihan .section-content label{
    display:block;
    margin-bottom:7px!important;
    font-size:.72rem!important;
    text-transform:uppercase;
    letter-spacing:.055em;
    color:#667085!important;
}
#klikwjp-app-container #penagihan .section-content label .text-red-500{
    color:#ef4444!important
}
#klikwjp-app-container #penagihan .section-content input,
#klikwjp-app-container #penagihan .section-content select,
#klikwjp-app-container #penagihan .section-content textarea{
    min-height:47px!important;
    border:1px solid #e0e4eb!important;
    border-radius:12px!important;
    background:#fbfcfe!important;
    box-shadow:inset 0 1px 2px rgba(16,24,40,.025)!important;
}
#klikwjp-app-container #penagihan .section-content textarea{
    min-height:92px!important;
    resize:vertical
}
#klikwjp-app-container #penagihan .section-content input:focus,
#klikwjp-app-container #penagihan .section-content select:focus,
#klikwjp-app-container #penagihan .section-content textarea:focus{
    background:#fff!important;
    border-color:#7668e8!important;
    box-shadow:0 0 0 4px rgba(91,75,219,.09),0 8px 18px rgba(20,24,40,.045)!important
}

/* Read-only date/time are information tiles, not boring inputs */
#klikwjp-app-container #penagihan #tanggal,
#klikwjp-app-container #penagihan #waktu{
    background:#f5f6fa!important;
    border-color:#eaecf1!important;
    color:#475467!important;
    font-weight:750!important;
    letter-spacing:.01em
}

/* Customer address gets a calmer visual hierarchy */
#klikwjp-app-container #penagihan #alamat{
    line-height:1.6
}

/* Status selector — make the decision point prominent */
#klikwjp-app-container #penagihan #statusKunjungan{
    min-height:54px!important;
    background:
      linear-gradient(180deg,#fff,#fafaff)!important;
    border:1px solid #d9d6f5!important;
    box-shadow:0 8px 20px rgba(91,75,219,.06)!important;
    font-weight:700!important;
    color:#29254c!important;
    cursor:pointer;
}
#klikwjp-app-container #penagihan #statusKunjungan:focus{
    border-color:#5b4bdb!important;
    box-shadow:0 0 0 4px rgba(91,75,219,.10),0 12px 24px rgba(91,75,219,.08)!important
}

/* Visit photo area */
#klikwjp-app-container #penagihan #cameraPreview{
    position:relative;
    max-width:none!important;
    height:250px!important;
    margin:10px 0 14px!important;
    border:1px dashed #cfd5e2!important;
    border-radius:18px!important;
    background:
      radial-gradient(circle at center,rgba(91,75,219,.055),transparent 46%),
      linear-gradient(145deg,#fbfcff,#f3f5f9)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
#klikwjp-app-container #penagihan #cameraPreview svg{
    width:47px!important;height:47px!important;
    color:#a0a8b8!important
}
#klikwjp-app-container #penagihan #cameraPreview p{
    font-size:.78rem!important;
    color:#667085!important
}
#klikwjp-app-container #penagihan #takePhotoBtn{
    min-height:46px!important;
    padding:0 20px!important;
    border-radius:12px!important;
    background:linear-gradient(135deg,#5b4bdb,#4f46c9)!important;
    box-shadow:0 9px 20px rgba(91,75,219,.20)!important;
    font-size:.8rem!important
}
#klikwjp-app-container #penagihan #takePhotoBtn:hover{
    transform:translateY(-2px);
    box-shadow:0 13px 26px rgba(91,75,219,.26)!important
}
#klikwjp-app-container #penagihan #cameraPreview.photo-taken{
    border:1px solid #86efac!important;
    background:#f0fdf4!important;
}
#klikwjp-app-container #penagihan #cameraPreview.photo-taken img{
    max-height:220px!important;
    border-radius:14px!important;
    box-shadow:0 12px 30px rgba(20,24,40,.14)!important
}

/* Dynamic status panels */
#klikwjp-app-container #penagihan #dynamicForms{
    margin-top:14px;
}
#klikwjp-app-container #penagihan #dynamicForms > div{
    position:relative;
    padding:21px!important;
    border-radius:17px!important;
    border:1px solid #e5e7eb!important;
    box-shadow:0 8px 25px rgba(20,24,40,.04);
}
/* Successful payment */
#klikwjp-app-container #penagihan #dynamicForms > div.bg-green-50{
    background:linear-gradient(145deg,#f5fff9,#effcf6)!important;
    border-color:#ccefdc!important;
}
#klikwjp-app-container #penagihan #dynamicForms > div.bg-green-50::before{
    content:"";
    position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:17px 0 0 17px;
    background:#10b981;
}
/* Promise to pay */
#klikwjp-app-container #penagihan #dynamicForms > div.bg-yellow-50{
    background:linear-gradient(145deg,#fffdf5,#fffbeb)!important;
    border-color:#f3e5b2!important;
}
#klikwjp-app-container #penagihan #dynamicForms > div.bg-yellow-50::before{
    content:"";
    position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:17px 0 0 17px;
    background:#f59e0b;
}
/* Other */
#klikwjp-app-container #penagihan #dynamicForms > div.bg-gray-50{
    background:linear-gradient(145deg,#fbfcfe,#f7f8fb)!important;
    border-color:#e4e7ec!important;
}

/* Payment amount */
#klikwjp-app-container #penagihan #nominal{
    font-size:1.05rem!important;
    font-weight:750!important;
}

/* Payment proof buttons */
#klikwjp-app-container #penagihan #dynamicForms button{
    min-height:44px;
    border-radius:11px!important;
    box-shadow:0 7px 16px rgba(20,24,40,.07);
    font-size:.76rem!important;
}
#klikwjp-app-container #penagihan #takeBuktiPhotoBtn{
    background:linear-gradient(135deg,#5b4bdb,#4f46c9)!important
}
#klikwjp-app-container #penagihan #selectBuktiFileBtn{
    background:linear-gradient(135deg,#0f766e,#059669)!important
}
#klikwjp-app-container #penagihan #buktiPreview{
    border:1px solid #b7e8cd!important;
    border-radius:12px!important;
    background:#f0fdf4!important
}

/* Submit area */
#klikwjp-app-container #penagihan form > .text-center:last-child{
    position:sticky;
    bottom:12px;
    z-index:10;
    margin-top:3px;
    padding:12px;
    border:1px solid rgba(226,228,236,.90);
    border-radius:18px;
    background:rgba(255,255,255,.86);
    box-shadow:0 15px 35px rgba(20,24,40,.10);
    backdrop-filter:blur(14px);
}
#klikwjp-app-container #penagihan form > .text-center:last-child button{
    width:min(100%,430px);
    min-height:52px!important;
    border-radius:14px!important;
    background:linear-gradient(115deg,#5b4bdb,#4f46c9 55%,#06b6d4)!important;
    box-shadow:0 13px 28px rgba(79,70,201,.25)!important;
    font-size:.88rem!important;
    letter-spacing:.005em
}
#klikwjp-app-container #penagihan form > .text-center:last-child button:hover{
    transform:translateY(-2px);
    box-shadow:0 17px 34px rgba(79,70,201,.30)!important
}

/* Success state */
#klikwjp-app-container #penagihan #successMessage{
    border:1px solid #b7e8cd!important;
    border-left:4px solid #10b981!important;
    border-radius:16px!important;
    background:linear-gradient(145deg,#f0fdf4,#ecfdf5)!important;
    box-shadow:0 14px 35px rgba(16,185,129,.09)!important
}

/* Camera modals */
#klikwjp-app-container #penagihan #cameraModal,
#klikwjp-app-container #penagihan #buktiCameraModal{
    background:rgba(12,10,24,.72)!important;
    backdrop-filter:blur(8px)
}
#klikwjp-app-container #penagihan #cameraModal > div,
#klikwjp-app-container #penagihan #buktiCameraModal > div{
    border:1px solid rgba(255,255,255,.15)!important;
    border-radius:22px!important;
    box-shadow:0 30px 80px rgba(0,0,0,.35)!important;
}
#klikwjp-app-container #penagihan video{
    border-radius:16px!important;
    background:#08090d;
}

/* Dark theme for penagihan */
#klikwjp-app-container.dark #penagihan{
    background:
      radial-gradient(circle at 5% 4%,rgba(91,75,219,.15),transparent 25%),
      #0d0f15!important
}
#klikwjp-app-container.dark #penagihan .section-card{
    background:#171a22!important;
    border-color:#292e39!important
}
#klikwjp-app-container.dark #penagihan .section-content > h2{color:#f2f4f7!important;border-color:#292e39}
#klikwjp-app-container.dark #penagihan .section-content input,
#klikwjp-app-container.dark #penagihan .section-content select,
#klikwjp-app-container.dark #penagihan .section-content textarea{
    background:#20242e!important;
    border-color:#343a49!important;
    color:#f8fafc!important
}
#klikwjp-app-container.dark #penagihan #tanggal,
#klikwjp-app-container.dark #penagihan #waktu{
    background:#1b1f28!important;color:#cbd5e1!important
}
#klikwjp-app-container.dark #penagihan #cameraPreview{
    background:#171a22!important;border-color:#3a4150!important
}
#klikwjp-app-container.dark #penagihan form > .text-center:last-child{
    background:rgba(23,26,34,.88);border-color:#303644
}

@media(max-width:767px){
    #klikwjp-app-container #penagihan{
        padding-top:18px!important;
        padding-bottom:45px!important
    }
    #klikwjp-app-container #penagihan > .max-w-4xl{
        padding-left:13px!important;
        padding-right:13px!important
    }
    #klikwjp-app-container #penagihan > .max-w-4xl > .text-center{
        padding:27px 18px 25px;
        border-radius:21px
    }
    #klikwjp-app-container #penagihan > .max-w-4xl > .text-center h1{
        font-size:2rem!important
    }
    #klikwjp-app-container #penagihan .section-card{
        border-radius:18px!important
    }
    #klikwjp-app-container #penagihan .section-content{
        padding:20px 17px!important
    }
    #klikwjp-app-container #penagihan .section-content > h2{
        margin-bottom:18px!important;
        font-size:.95rem!important
    }
    #klikwjp-app-container #penagihan .section-content .grid{
        gap:13px!important
    }
    #klikwjp-app-container #penagihan #cameraPreview{
        height:220px!important
    }
    #klikwjp-app-container #penagihan #dynamicForms > div{
        padding:17px!important
    }
    #klikwjp-app-container #penagihan #dynamicForms .flex.space-x-3{
        gap:8px!important
    }
    #klikwjp-app-container #penagihan #dynamicForms .flex.space-x-3 > *{
        min-width:0
    }
    #klikwjp-app-container #penagihan form > .text-center:last-child{
        bottom:7px;
        padding:9px
    }
}


/* =========================================================
   KLIKWJP PENAGIHAN — VISIT PHOTO GUIDE FINAL POLISH
   Visual-only enhancement. Existing photo workflow/IDs stay.
   ========================================================= */

/* Make the photo section feel like a guided field-work module */
#klikwjp-app-container #penagihan .section-content:has(#cameraPreview){
    position:relative;
}

/* Guide heading / helper text */
#klikwjp-app-container #penagihan .section-content:has(#cameraPreview) > p{
    max-width:760px;
    margin:-10px auto 18px!important;
    padding:0 12px;
    text-align:center;
    color:#7b8494!important;
    font-size:.78rem!important;
    line-height:1.65!important;
}

/* Camera area: less empty, more intentional */
#klikwjp-app-container #penagihan #cameraPreview{
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    height:285px!important;
    min-height:285px!important;
    margin:4px 0 16px!important;
    padding:30px 24px!important;
    border:1px solid #dfe3ec!important;
    border-radius:20px!important;
    background:
      radial-gradient(circle at 50% 45%,rgba(91,75,219,.075),transparent 30%),
      radial-gradient(circle at 20% 0%,rgba(6,182,212,.06),transparent 25%),
      linear-gradient(145deg,#fbfcff 0%,#f5f7fb 100%)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 8px 25px rgba(20,24,40,.045)!important;
}

/* Subtle scan-frame corners */
#klikwjp-app-container #penagihan #cameraPreview::before{
    content:"";
    position:absolute;
    width:120px;height:86px;
    left:50%;top:50%;
    transform:translate(-50%,-59%);
    border:1px solid rgba(91,75,219,.18);
    border-radius:14px;
    box-shadow:
      -38px -24px 0 -37px #6d5ce7,
       38px -24px 0 -37px #6d5ce7,
      -38px  24px 0 -37px #6d5ce7,
       38px  24px 0 -37px #6d5ce7;
    pointer-events:none;
}

/* Hide decorative icon slightly into the visual hierarchy */
#klikwjp-app-container #penagihan #cameraPreview > svg{
    position:relative;
    z-index:2;
    width:44px!important;height:44px!important;
    margin-bottom:10px!important;
    color:#7668d9!important;
    filter:drop-shadow(0 7px 13px rgba(91,75,219,.12));
}
#klikwjp-app-container #penagihan #cameraPreview > p{
    position:relative;
    z-index:2;
    margin:0!important;
    color:#475467!important;
    font-size:.82rem!important;
    line-height:1.55!important;
    font-weight:700!important;
}

/* Replace the overly generic guide sentence visually without changing HTML */
#klikwjp-app-container #penagihan #cameraPreview > p::after{
    content:"Pastikan wajah / lokasi nasabah terlihat jelas";
    display:block;
    margin-top:5px;
    color:#98a2b3;
    font-size:.69rem;
    font-weight:550;
}

/* Camera action */
#klikwjp-app-container #penagihan #takePhotoBtn{
    position:relative;
    z-index:3;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-width:190px;
    min-height:48px!important;
    padding:0 21px!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:13px!important;
    background:linear-gradient(135deg,#5b4bdb 0%,#5144c9 55%,#4338a8 100%)!important;
    box-shadow:
      0 10px 22px rgba(79,70,201,.22),
      inset 0 1px 0 rgba(255,255,255,.16)!important;
    font-size:.78rem!important;
    font-weight:800!important;
    letter-spacing:.005em;
}
#klikwjp-app-container #penagihan #takePhotoBtn:hover{
    transform:translateY(-2px);
    box-shadow:
      0 14px 28px rgba(79,70,201,.28),
      inset 0 1px 0 rgba(255,255,255,.18)!important
}
#klikwjp-app-container #penagihan #takePhotoBtn:active{
    transform:translateY(0) scale(.98)
}

/* The actual preview image should look like a captured evidence card */
#klikwjp-app-container #penagihan #cameraPreview.photo-taken{
    display:flex!important;
    padding:14px!important;
    background:#f5fff9!important;
    border-color:#a7dfc1!important;
}
#klikwjp-app-container #penagihan #cameraPreview.photo-taken::before{
    display:none!important
}
#klikwjp-app-container #penagihan #cameraPreview.photo-taken img{
    width:auto!important;
    max-width:100%!important;
    max-height:235px!important;
    object-fit:contain!important;
    border-radius:14px!important;
    border:1px solid rgba(16,185,129,.18)!important;
    box-shadow:0 12px 30px rgba(20,24,40,.13)!important
}

/* Compact evidence helper strip below camera */
#klikwjp-app-container #penagihan #cameraPreview + *{
    /* intentionally conservative: preserve existing elements */
}

/* Status / dynamic form: visually tie it to the visit photo */
#klikwjp-app-container #penagihan #dynamicForms{
    position:relative;
}
#klikwjp-app-container #penagihan #dynamicForms::before{
    content:"DETAIL HASIL KUNJUNGAN";
    display:block;
    margin:0 0 9px 2px;
    color:#98a2b3;
    font-size:.63rem;
    font-weight:850;
    letter-spacing:.10em;
}

/* Improve dynamic form field headings */
#klikwjp-app-container #penagihan #dynamicForms label{
    color:#667085!important;
    font-size:.69rem!important;
    letter-spacing:.045em;
}

/* Mobile: keep guide compact and avoid excessive whitespace */
@media(max-width:767px){
    #klikwjp-app-container #penagihan .section-content:has(#cameraPreview) > p{
        margin:-8px 0 14px!important;
        padding:0 5px;
        font-size:.72rem!important
    }
    #klikwjp-app-container #penagihan #cameraPreview{
        height:235px!important;
        min-height:235px!important;
        padding:22px 16px!important;
        border-radius:17px!important;
    }
    #klikwjp-app-container #penagihan #cameraPreview::before{
        width:100px;height:72px;
        transform:translate(-50%,-58%);
    }
    #klikwjp-app-container #penagihan #cameraPreview > svg{
        width:37px!important;height:37px!important;
        margin-bottom:8px!important
    }
    #klikwjp-app-container #penagihan #cameraPreview > p{
        font-size:.75rem!important
    }
    #klikwjp-app-container #penagihan #cameraPreview > p::after{
        font-size:.64rem
    }
    #klikwjp-app-container #penagihan #takePhotoBtn{
        min-width:170px;
        min-height:45px!important
    }
    #klikwjp-app-container #penagihan #cameraPreview.photo-taken{
        height:auto!important;
        min-height:210px!important
    }
    #klikwjp-app-container #penagihan #cameraPreview.photo-taken img{
        max-height:190px!important
    }
}

/* Dark mode */
#klikwjp-app-container.dark #penagihan #cameraPreview{
    border-color:#343a49!important;
    background:
      radial-gradient(circle at 50% 45%,rgba(124,58,237,.12),transparent 30%),
      linear-gradient(145deg,#191c24,#151820)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.18)!important
}
#klikwjp-app-container.dark #penagihan #cameraPreview > p{color:#d0d5dd!important}
#klikwjp-app-container.dark #penagihan #cameraPreview > p::after{color:#98a2b3}


/* =========================================================
   KLIKWJP SIMULATORS — MODERN FINANCE UI v4
   Visual-only layer. Existing IDs, calculations and actions preserved.
   No external images or libraries added.
   ========================================================= */
.kwjp-sim-section{background:linear-gradient(180deg,#f7f9fc 0%,#fff 42%,#f8fafc 100%)!important;min-height:100vh;}
.kwjp-sim-section>.container{max-width:1320px!important;}
.kwjp-sim-section .max-w-6xl,.kwjp-sim-section .max-w-4xl{max-width:1180px!important;}
.kwjp-sim-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;min-height:300px;margin:0 auto 28px;padding:48px 54px;border-radius:28px;color:#fff;box-shadow:0 18px 50px rgba(15,23,42,.12);isolation:isolate;}
.kwjp-sim-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 35%,rgba(255,255,255,.22),transparent 28%),radial-gradient(circle at 10% 100%,rgba(255,255,255,.1),transparent 35%);z-index:-1;}
.kwjp-credit-hero{background:linear-gradient(125deg,#172554 0%,#3157d9 55%,#6d5df5 100%);}
.kwjp-deposit-hero{background:linear-gradient(125deg,#064e3b 0%,#059669 55%,#14b8a6 100%);}
.kwjp-savings-hero{background:linear-gradient(125deg,#0c4a6e 0%,#1677d9 52%,#4f46e5 100%);}
.kwjp-sim-hero-copy{position:relative;z-index:3;max-width:650px;}
.kwjp-sim-eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;opacity:.9;display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.kwjp-dot{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.12);}
.kwjp-sim-hero h1{font-size:clamp(28px,3.2vw,46px)!important;line-height:1.08!important;letter-spacing:-.035em;margin:0 0 14px!important;font-weight:800!important;color:#fff!important;}
.kwjp-sim-hero h1 span{color:#dbeafe;}
.kwjp-deposit-hero h1 span{color:#d1fae5;}.kwjp-savings-hero h1 span{color:#dbeafe;}
.kwjp-sim-hero p{max-width:600px;margin:0!important;color:rgba(255,255,255,.86)!important;font-size:14px!important;line-height:1.75!important;}
.kwjp-hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.kwjp-hero-pills span{padding:8px 11px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border-radius:999px;font-size:11px;font-weight:700;color:#fff;}
.kwjp-sim-hero-art{position:relative;width:370px;height:250px;flex:0 0 370px;}
.kwjp-orbit{position:absolute;border:1px solid rgba(255,255,255,.18);border-radius:50%;transform:rotate(-15deg);}
.kwjp-orbit.o1{width:320px;height:145px;right:0;top:50px;}.kwjp-orbit.o2{width:250px;height:105px;right:30px;top:70px;}
.kwjp-art-card{position:absolute;background:rgba(255,255,255,.94);color:#172554;border-radius:16px;box-shadow:0 18px 35px rgba(2,6,23,.18);border:1px solid rgba(255,255,255,.55);}
.kwjp-art-card.main{width:190px;height:125px;right:75px;top:58px;padding:18px 20px;transform:rotate(4deg);display:flex;flex-direction:column;}
.kwjp-art-card.main .kwjp-art-icon{font-size:22px;font-weight:900;color:#3157d9;}.kwjp-art-card.main small{font-size:9px;font-weight:800;color:#64748b;margin-top:5px;}.kwjp-art-card.main strong{font-size:24px;margin-top:4px;}.kwjp-art-card.main em{font-size:10px;color:#64748b;font-style:normal;}
.kwjp-art-card.mini{padding:12px 14px;font-size:9px;font-weight:800;line-height:1.4;letter-spacing:.04em;min-width:92px;}.kwjp-art-card.mini strong{font-size:15px;letter-spacing:0;}.kwjp-art-card.mini.one{right:10px;top:32px;transform:rotate(-7deg);}.kwjp-art-card.mini.two{left:12px;bottom:30px;transform:rotate(6deg);}
.kwjp-deposit-hero .kwjp-art-card.mini,.kwjp-savings-hero .kwjp-art-card.mini{color:#065f46;}.kwjp-savings-hero .kwjp-art-card.mini{color:#1e40af;}
.kwjp-art-vault{position:absolute;width:150px;height:150px;border-radius:28px;right:105px;top:48px;background:linear-gradient(145deg,#f8fafc,#d1fae5);box-shadow:0 20px 45px rgba(2,6,23,.2);transform:rotate(-5deg);border:7px solid rgba(255,255,255,.35);}
.vault-ring{position:absolute;width:65px;height:65px;border:9px solid #10b981;border-radius:50%;left:35px;top:35px;box-shadow:inset 0 0 0 5px #a7f3d0;}.vault-handle{position:absolute;width:20px;height:8px;background:#059669;border-radius:6px;left:65px;top:64px;transform:rotate(90deg);}
.kwjp-art-pig{position:absolute;width:155px;height:120px;right:95px;top:65px;background:#dbeafe;border-radius:52% 48% 45% 45%;box-shadow:0 20px 40px rgba(2,6,23,.18);transform:rotate(-4deg);}
.kwjp-art-pig:before{content:"";position:absolute;width:35px;height:45px;background:#bfdbfe;border-radius:80% 20% 50% 30%;left:10px;top:-22px;transform:rotate(-25deg);}.pig-ear{position:absolute;width:35px;height:30px;background:#bfdbfe;border-radius:70% 30% 60% 40%;right:10px;top:-18px;transform:rotate(25deg);}.pig-eye{position:absolute;width:7px;height:7px;background:#1e3a8a;border-radius:50%;right:45px;top:38px;}.pig-nose{position:absolute;width:27px;height:19px;background:#60a5fa;border-radius:50%;right:8px;top:55px;}.pig-coin{position:absolute;right:0;top:-38px;width:45px;height:45px;border-radius:50%;background:#fbbf24;color:#92400e;display:grid;place-items:center;font-weight:900;border:4px solid #fde68a;}
.kwjp-coin{position:absolute;border-radius:50%;background:linear-gradient(145deg,#fbbf24,#d97706);box-shadow:0 8px 16px rgba(2,6,23,.18);}.kwjp-coin.c1{width:22px;height:22px;right:38px;bottom:28px;}.kwjp-coin.c2{width:16px;height:16px;right:72px;bottom:16px;}.kwjp-coin.c3{width:12px;height:12px;right:20px;bottom:65px;}
/* Inputs / cards */
.kwjp-sim-section .bg-gray-50{background:rgba(248,250,252,.88)!important;border:1px solid #e7ebf2;box-shadow:0 12px 35px rgba(15,23,42,.06);}
.kwjp-sim-section .bg-white{border:1px solid #e9edf3;box-shadow:0 12px 35px rgba(15,23,42,.055);}
.kwjp-sim-section input,.kwjp-sim-section select{border-color:#dce3ec!important;background:#fff!important;border-radius:11px!important;min-height:46px;transition:border-color .18s,box-shadow .18s,transform .18s;}
.kwjp-sim-section input:focus,.kwjp-sim-section select:focus{border-color:#4f6df5!important;box-shadow:0 0 0 4px rgba(79,109,245,.1)!important;outline:none!important;}
.kwjp-sim-section label{color:#334155;font-weight:700!important;font-size:12px!important;}
.kwjp-sim-section h2,.kwjp-sim-section h3{color:#0f1f3d;letter-spacing:-.02em;}
.kwjp-sim-section button{border-radius:11px!important;box-shadow:0 7px 18px rgba(37,99,235,.16);}
.kwjp-sim-section .overflow-x-auto{border-radius:14px;overflow:auto;border:1px solid #e7ebf2;}
.kwjp-sim-section table thead{background:#f4f7fb!important;color:#334155;}
.kwjp-sim-section table tbody tr{border-bottom:1px solid #edf1f5;}
.kwjp-sim-section table tbody tr:last-child{border-bottom:0;}
/* Result emphasis */
.kwjp-credit-section #loanResults,.kwjp-deposit-section #depositResults,.kwjp-savings-section #savingsResults{position:relative;overflow:hidden;}
.kwjp-credit-section #loanResults:before,.kwjp-deposit-section #depositResults:before,.kwjp-savings-section #savingsResults:before{content:"";position:absolute;left:0;top:0;width:5px;height:100%;background:linear-gradient(#3157d9,#6d5df5);}
.kwjp-deposit-section #depositResults:before{background:linear-gradient(#059669,#14b8a6);}.kwjp-savings-section #savingsResults:before{background:linear-gradient(#1677d9,#4f46e5);}
/* Dark mode */
#klikwjp-app-container.dark .kwjp-sim-section{background:linear-gradient(180deg,#0f172a,#111827)!important;}
#klikwjp-app-container.dark .kwjp-sim-section .bg-gray-50{background:#172033!important;border-color:#26334a!important;}
#klikwjp-app-container.dark .kwjp-sim-section .bg-white{background:#111827!important;border-color:#26334a!important;}
#klikwjp-app-container.dark .kwjp-sim-section input,#klikwjp-app-container.dark .kwjp-sim-section select{background:#172033!important;color:#e5e7eb!important;border-color:#334155!important;}
#klikwjp-app-container.dark .kwjp-sim-section label,#klikwjp-app-container.dark .kwjp-sim-section h2,#klikwjp-app-container.dark .kwjp-sim-section h3{color:#e5e7eb!important;}
@media(max-width:900px){.kwjp-sim-hero{padding:34px 30px;min-height:290px}.kwjp-sim-hero-art{width:290px;flex-basis:290px;transform:scale(.82);transform-origin:center right}.kwjp-sim-hero-copy{max-width:58%;}.kwjp-hero-pills span{font-size:10px;padding:7px 9px;}}
@media(max-width:767px){.kwjp-sim-section{padding-top:28px!important;padding-bottom:42px!important}.kwjp-sim-section>.container{padding-left:14px!important;padding-right:14px!important}.kwjp-sim-hero{display:block;min-height:auto;margin-bottom:18px;padding:28px 22px 20px;border-radius:22px}.kwjp-sim-hero-copy{max-width:none}.kwjp-sim-hero h1{font-size:29px!important}.kwjp-sim-hero p{font-size:12px!important;line-height:1.65!important}.kwjp-sim-hero-art{width:100%;height:150px;transform:none;margin-top:8px}.kwjp-orbit.o1{width:260px;height:105px;right:10px;top:25px}.kwjp-orbit.o2{width:205px;height:80px;right:35px;top:38px}.kwjp-art-card.main{width:155px;height:98px;right:58px;top:28px;padding:12px 14px}.kwjp-art-card.main strong{font-size:20px}.kwjp-art-vault{width:108px;height:108px;right:86px;top:22px}.vault-ring{width:48px;height:48px;left:24px;top:24px;border-width:7px}.vault-handle{left:45px;top:45px}.kwjp-art-pig{width:115px;height:85px;right:78px;top:36px}.pig-eye{right:34px;top:28px}.pig-nose{right:4px;top:40px}.pig-coin{width:34px;height:34px;top:-28px}.kwjp-art-card.mini{min-width:75px;padding:9px 10px;font-size:8px}.kwjp-art-card.mini strong{font-size:12px}.kwjp-art-card.mini.one{right:0;top:8px}.kwjp-art-card.mini.two{left:0;bottom:12px}.kwjp-coin.c1{right:26px;bottom:10px}.kwjp-coin.c2{right:58px;bottom:2px}.kwjp-coin.c3{right:12px;bottom:38px}.kwjp-sim-section .bg-gray-50,.kwjp-sim-section .bg-white{padding:20px!important;border-radius:18px!important}.kwjp-sim-section .grid{gap:12px!important}.kwjp-sim-section .text-center.mt-8{margin-top:20px!important}.kwjp-sim-section button{width:100%;}}

#klikwjp-app-container #penagihan .pc-date-help{display:block;margin-top:7px;color:#8b98a8;font-size:.62rem;line-height:1.45}
#klikwjp-app-container #penagihan .pc-date-help.is-error{color:#b42332;font-weight:700}
#klikwjp-app-container #penagihan input.pc-date-invalid{border-color:#d84d5c!important}


/* ===== original-style-2 (source block 2) ===== */

/* KlikWJP — Photo Visit Guide */
.kwjp-photo-guide{
    border:1px solid #dbe5f1;
    border-radius:16px;
    background:linear-gradient(135deg,#f8fbff 0%,#ffffff 100%);
    overflow:hidden;
    box-shadow:0 4px 16px rgba(15,23,42,.05);
}
.kwjp-photo-guide-head{
    display:flex;align-items:center;gap:12px;padding:16px 18px;
    background:linear-gradient(135deg,#eef6ff 0%,#f7f9ff 100%);
    border-bottom:1px solid #e3ebf5;
}
.kwjp-photo-guide-icon{
    flex:0 0 42px;width:42px;height:42px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    color:#2563eb;background:#fff;border:1px solid #dbeafe;
    box-shadow:0 3px 10px rgba(37,99,235,.10);
}
.kwjp-photo-guide-icon svg{width:22px;height:22px}
.kwjp-photo-guide-title{margin:0;color:#172554;font-size:14px;font-weight:700;line-height:1.3}
.kwjp-photo-guide-subtitle{margin:3px 0 0;color:#64748b;font-size:12px;line-height:1.5}
.kwjp-photo-guide-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.kwjp-photo-guide-item{display:flex;gap:10px;padding:15px 16px;min-width:0}
.kwjp-photo-guide-item+ .kwjp-photo-guide-item{border-left:1px solid #e8eef5}
.kwjp-photo-guide-number{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:#eff6ff;color:#2563eb;font-size:10px;font-weight:800;letter-spacing:.04em}
.kwjp-photo-guide-item div{min-width:0}
.kwjp-photo-guide-item strong{display:block;color:#334155;font-size:12px;line-height:1.4;margin-bottom:4px}
.kwjp-photo-guide-item span:not(.kwjp-photo-guide-number){display:block;color:#64748b;font-size:11px;line-height:1.55}
@media (max-width:767px){
    .kwjp-photo-guide-head{padding:14px}
    .kwjp-photo-guide-list{grid-template-columns:1fr}
    .kwjp-photo-guide-item{padding:12px 14px}
    .kwjp-photo-guide-item+ .kwjp-photo-guide-item{border-left:0;border-top:1px solid #e8eef5}
    .kwjp-photo-guide-subtitle{font-size:11px}
}


/* ===== kwjp-premium-responsive-audit (source block 3) ===== */

/* =========================================================
   KLIKWJP — PREMIUM RESPONSIVE AUDIT / FINAL OVERRIDE
   Visual + responsive hardening only.
   Existing IDs, calculations, API endpoint, forms and handlers
   are intentionally preserved.
   ========================================================= */

#klikwjp-app-container{
  width:100%;
  max-width:100%;
  min-width:0 !important;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

#klikwjp-app-container *,
#klikwjp-app-container *::before,
#klikwjp-app-container *::after{
  min-width:0;
}

#klikwjp-app-container img,
#klikwjp-app-container svg,
#klikwjp-app-container video,
#klikwjp-app-container canvas{
  max-width:100%;
}

#klikwjp-app-container button,
#klikwjp-app-container a,
#klikwjp-app-container input,
#klikwjp-app-container select,
#klikwjp-app-container textarea{
  -webkit-tap-highlight-color:transparent;
}

#klikwjp-app-container a:focus-visible,
#klikwjp-app-container button:focus-visible,
#klikwjp-app-container input:focus-visible,
#klikwjp-app-container select:focus-visible,
#klikwjp-app-container textarea:focus-visible{
  outline:3px solid rgba(99,102,241,.28) !important;
  outline-offset:2px;
}

/* Prevent iOS/Android input zoom and improve touch targets */
#klikwjp-app-container input,
#klikwjp-app-container select,
#klikwjp-app-container textarea{
  font-size:16px !important;
}

#klikwjp-app-container button,
#klikwjp-app-container a{
  touch-action:manipulation;
}

/* Header / navigation */
#klikwjp-app-container header{
  width:100%;
  max-width:100%;
}

#klikwjp-app-container header .container{
  width:100%;
  max-width:1280px;
}

#klikwjp-app-container .mobile-menu{
  width:min(88vw,360px) !important;
  max-width:360px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:max(24px,env(safe-area-inset-bottom));
}

#klikwjp-app-container .mobile-menu nav a{
  min-height:46px;
  display:flex;
  align-items:center;
}

#klikwjp-app-container #mobileMenuOverlay{
  backdrop-filter:blur(5px);
}

/* Home */
#klikwjp-app-container #home > .container{
  width:100%;
  max-width:1280px;
}

#klikwjp-app-container .kwjp-hero-content{
  min-width:0;
}

#klikwjp-app-container .kwjp-hero h2,
#klikwjp-app-container .kwjp-sim-hero h1,
#klikwjp-app-container .kwjp-credit-hero h1,
#klikwjp-app-container .kwjp-collection-hero h1{
  overflow-wrap:anywhere;
}

#klikwjp-app-container .kwjp-hero-actions > *,
#klikwjp-app-container .kwjp-hero-pills > span{
  max-width:100%;
}

/* Home cards: stable equal-height layout */
#klikwjp-app-container #home .grid{
  align-items:stretch;
}

#klikwjp-app-container #home .grid > div{
  height:100%;
}

/* Generic content width hardening */
#klikwjp-app-container section > .container{
  width:100%;
  max-width:1320px;
}

#klikwjp-app-container .overflow-x-auto{
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

/* Tables remain readable without breaking the page */
#klikwjp-app-container table{
  max-width:none;
}

#klikwjp-app-container .overflow-x-auto table{
  min-width:680px;
}

/* Charts */
#klikwjp-app-container canvas{
  display:block;
  max-width:100% !important;
}

/* Form rows should never force horizontal scrolling */
#klikwjp-app-container form .flex,
#klikwjp-app-container form .grid{
  min-width:0;
}

#klikwjp-app-container .flex.space-x-3 > *{
  min-width:0;
}

#klikwjp-app-container input,
#klikwjp-app-container select,
#klikwjp-app-container textarea{
  max-width:100%;
}

#klikwjp-app-container textarea{
  overflow-wrap:anywhere;
}

/* Premium section rhythm */
#klikwjp-app-container section:not(#home){
  scroll-margin-top:88px;
}

#klikwjp-app-container .kwjp-sim-section,
#klikwjp-app-container #eligibility,
#klikwjp-app-container #results,
#klikwjp-app-container #penagihan{
  min-height:calc(100svh - 72px);
}

/* Tablet: eliminate hero crowding caused by fixed art widths */
@media (max-width:900px){
  #klikwjp-app-container .kwjp-hero{
    padding:44px 42px;
  }

  #klikwjp-app-container .kwjp-hero-orbit{
    opacity:.55;
    transform:scale(.82);
    transform-origin:center;
    right:-65px;
  }

  #klikwjp-app-container .kwjp-credit-hero,
  #klikwjp-app-container .kwjp-collection-hero,
  #klikwjp-app-container .kwjp-sim-hero{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(230px,300px);
    align-items:center;
    gap:18px;
    padding:34px 30px;
    min-height:330px;
  }

  #klikwjp-app-container .kwjp-credit-hero .kwjp-sim-hero-art,
  #klikwjp-app-container .kwjp-collection-art,
  #klikwjp-app-container .kwjp-sim-hero-art{
    width:100%;
    max-width:300px;
    height:230px;
    flex:none;
    margin-inline:auto;
    transform:none;
  }

  #klikwjp-app-container .kwjp-sim-hero-copy,
  #klikwjp-app-container .kwjp-credit-hero .kwjp-sim-hero-copy,
  #klikwjp-app-container .kwjp-collection-copy{
    max-width:none;
  }

  #klikwjp-app-container .kwjp-art-building{right:40px;}
  #klikwjp-app-container .kwjp-art-vault{right:75px;}
  #klikwjp-app-container .kwjp-art-pig{right:65px;}
}

/* Mobile */
@media (max-width:767px){
  #klikwjp-app-container{
    overflow-x:clip;
  }

  #klikwjp-app-container header > div:first-child{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  #klikwjp-app-container header h1{
    font-size:1.25rem !important;
  }

  #klikwjp-app-container header .w-10.h-10{
    width:38px !important;
    height:38px !important;
  }

  #klikwjp-app-container .theme-toggle{
    width:50px !important;
    height:26px !important;
    border-radius:14px !important;
  }

  #klikwjp-app-container .theme-toggle::before{
    width:20px !important;
    height:20px !important;
    top:3px !important;
  }

  #klikwjp-app-container .theme-toggle.dark::before{
    transform:translateX(24px);
  }

  #klikwjp-app-container #home{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  #klikwjp-app-container #home > .container{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  #klikwjp-app-container .kwjp-hero{
    min-height:500px;
    padding:30px 20px 25px;
    border-radius:22px;
  }

  #klikwjp-app-container .kwjp-hero h2{
    font-size:clamp(2.25rem,11vw,2.8rem) !important;
  }

  #klikwjp-app-container .kwjp-hero p{
    max-width:100%;
    font-size:.9rem !important;
  }

  #klikwjp-app-container .kwjp-hero-meta{
    max-width:100%;
  }

  #klikwjp-app-container .kwjp-hero-orbit{
    width:205px;
    height:205px;
    right:-62px;
    bottom:-60px;
    opacity:.45;
    transform:none;
  }

  #klikwjp-app-container .kwjp-hero-actions{
    width:100%;
  }

  #klikwjp-app-container .kwjp-hero-actions > *{
    width:100%;
  }

  /* Cards: two columns on normal phones, one on very narrow phones */
  #klikwjp-app-container #home .grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  #klikwjp-app-container #home .grid > div{
    min-height:190px;
    padding:17px 11px !important;
    border-radius:17px !important;
  }

  #klikwjp-app-container #home .grid > div p{
    line-height:1.5 !important;
  }

  #klikwjp-app-container #home .grid > div button,
  #klikwjp-app-container #home .grid > div a{
    width:100%;
    white-space:normal;
  }

  /* Simulator heroes */
  #klikwjp-app-container .kwjp-credit-hero,
  #klikwjp-app-container .kwjp-collection-hero,
  #klikwjp-app-container .kwjp-sim-hero{
    display:block !important;
    min-height:auto !important;
    padding:26px 19px 18px !important;
    border-radius:21px !important;
  }

  #klikwjp-app-container .kwjp-credit-hero h1,
  #klikwjp-app-container .kwjp-collection-hero h1,
  #klikwjp-app-container .kwjp-sim-hero h1{
    font-size:clamp(1.85rem,8vw,2.3rem) !important;
    line-height:1.08 !important;
  }

  #klikwjp-app-container .kwjp-credit-hero p,
  #klikwjp-app-container .kwjp-collection-hero p,
  #klikwjp-app-container .kwjp-sim-hero p{
    font-size:.84rem !important;
    line-height:1.62 !important;
  }

  #klikwjp-app-container .kwjp-credit-hero .kwjp-sim-hero-art,
  #klikwjp-app-container .kwjp-collection-art,
  #klikwjp-app-container .kwjp-sim-hero-art{
    width:100% !important;
    max-width:340px !important;
    height:175px !important;
    margin:12px auto 0 !important;
    transform:none !important;
  }

  #klikwjp-app-container .kwjp-hero-pills{
    gap:6px !important;
  }

  #klikwjp-app-container .kwjp-hero-pills span{
    font-size:.62rem !important;
    padding:7px 9px !important;
  }

  /* Scale finance illustrations safely */
  #klikwjp-app-container .kwjp-art-building{
    width:145px;
    height:104px;
    right:calc(50% - 72px);
    bottom:20px;
  }

  #klikwjp-app-container .building-roof{
    width:145px;
    height:50px;
  }

  #klikwjp-app-container .building-body{
    left:18px;
    right:18px;
    top:39px;
    padding:14px 10px;
    gap:7px;
  }

  #klikwjp-app-container .kwjp-art-car{
    right:calc(50% - 72px + 82px);
    bottom:12px;
    transform:scale(.8);
    transform-origin:right bottom;
  }

  #klikwjp-app-container .kwjp-art-vault{
    width:110px;
    height:110px;
    right:calc(50% - 55px);
    top:34px;
  }

  #klikwjp-app-container .kwjp-art-pig{
    width:118px;
    height:90px;
    right:calc(50% - 59px);
    top:46px;
  }

  /* Content cards */
  #klikwjp-app-container section:not(#home) .bg-gray-50,
  #klikwjp-app-container section:not(#home) .bg-white{
    padding:18px !important;
    border-radius:17px !important;
  }

  #klikwjp-app-container section:not(#home) h2{
    font-size:1.55rem !important;
  }

  /* Three-column mini controls become vertical when needed */
  #klikwjp-app-container .kwjp-sim-section .grid-cols-3{
    grid-template-columns:1fr !important;
  }

  #klikwjp-app-container .kwjp-sim-section .grid-cols-3 > *{
    width:100%;
  }

  /* Result rows wrap cleanly */
  #klikwjp-app-container .kwjp-sim-section .flex.justify-between{
    gap:10px;
    flex-wrap:wrap;
  }

  #klikwjp-app-container .kwjp-sim-section .flex.justify-between > *{
    max-width:100%;
    overflow-wrap:anywhere;
  }

  /* Eligibility / result cards */
  #klikwjp-app-container #eligibility .grid,
  #klikwjp-app-container #results .grid{
    gap:12px !important;
  }

  /* Penagihan */
  #klikwjp-app-container #penagihan > .max-w-4xl{
    padding-left:11px !important;
    padding-right:11px !important;
  }

  #klikwjp-app-container #penagihan .section-content{
    padding:18px 15px !important;
  }

  #klikwjp-app-container #penagihan .section-content .grid{
    grid-template-columns:1fr !important;
  }

  #klikwjp-app-container #penagihan #cameraPreview{
    min-height:225px !important;
    height:225px !important;
  }

  #klikwjp-app-container #penagihan #dynamicForms .flex.space-x-3{
    display:grid !important;
    grid-template-columns:1fr 1fr;
  }

  #klikwjp-app-container #penagihan form > .text-center:last-child{
    position:sticky;
    bottom:max(7px,env(safe-area-inset-bottom));
  }

  /* Modal safety */
  #klikwjp-app-container #cameraModal > div,
  #klikwjp-app-container #buktiCameraModal > div,
  #klikwjp-app-container #messageModal > div{
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100svh - 24px);
    overflow:auto;
  }

  #klikwjp-app-container video{
    width:100%;
    max-height:58svh;
    object-fit:contain;
  }

  /* Footer */
  #klikwjp-app-container .kwjp-footer .container{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}

@media (max-width:390px){
  #klikwjp-app-container #home .grid{
    grid-template-columns:1fr !important;
  }

  #klikwjp-app-container #home .grid > div{
    min-height:170px;
  }

  #klikwjp-app-container .kwjp-hero{
    min-height:485px;
    padding-left:17px;
    padding-right:17px;
  }

  #klikwjp-app-container .kwjp-hero h2{
    font-size:2.15rem !important;
  }

  #klikwjp-app-container .kwjp-sim-hero .kwjp-sim-hero-art,
  #klikwjp-app-container .kwjp-credit-hero .kwjp-sim-hero-art,
  #klikwjp-app-container .kwjp-collection-art{
    height:155px !important;
  }

  #klikwjp-app-container #penagihan #dynamicForms .flex.space-x-3{
    grid-template-columns:1fr;
  }
}

@media (max-width:340px){
  #klikwjp-app-container header h1{
    font-size:1.05rem !important;
  }

  #klikwjp-app-container .kwjp-hero{
    min-height:470px;
  }

  #klikwjp-app-container .kwjp-hero h2{
    font-size:1.95rem !important;
  }

  #klikwjp-app-container .kwjp-hero-meta{
    font-size:.62rem !important;
  }

  #klikwjp-app-container .kwjp-sim-hero h1{
    font-size:1.72rem !important;
  }
}

/* Large desktop: keep content elegant instead of excessively wide */
@media (min-width:1281px){
  #klikwjp-app-container #home > .container,
  #klikwjp-app-container section > .container{
    padding-left:28px;
    padding-right:28px;
  }
}

/* Landscape phones: reduce hero height and decorative art */
@media (max-height:600px) and (max-width:767px){
  #klikwjp-app-container .kwjp-hero{
    min-height:430px;
  }

  #klikwjp-app-container .kwjp-hero-orbit{
    opacity:.28;
  }

  #klikwjp-app-container .kwjp-credit-hero .kwjp-sim-hero-art,
  #klikwjp-app-container .kwjp-collection-art,
  #klikwjp-app-container .kwjp-sim-hero-art{
    height:125px !important;
  }
}

/* Reduced motion / accessibility */
@media (prefers-reduced-motion:reduce){
  #klikwjp-app-container *,
  #klikwjp-app-container *::before,
  #klikwjp-app-container *::after{
    scroll-behavior:auto !important;
    animation:none !important;
    transition:none !important;
  }
}

/* Dark mode compatibility for the final responsive layer */
#klikwjp-app-container.dark .kwjp-photo-guide{
  background:#171a22 !important;
  border-color:#2c3442 !important;
}

#klikwjp-app-container.dark .kwjp-photo-guide-head{
  background:#1b2130 !important;
  border-color:#2c3442 !important;
}

#klikwjp-app-container.dark .kwjp-photo-guide-title{
  color:#f1f5f9 !important;
}

#klikwjp-app-container.dark .kwjp-photo-guide-subtitle,
#klikwjp-app-container.dark .kwjp-photo-guide-item span:not(.kwjp-photo-guide-number){
  color:#94a3b8 !important;
}

#klikwjp-app-container.dark .kwjp-photo-guide-item + .kwjp-photo-guide-item{
  border-color:#2c3442 !important;
}


/* ===== kwjp-premium-v2-qa (source block 4) ===== */

/* =========================================================
   KLIKWJP PREMIUM V2 — VISUAL QA / POLISH
   No business logic or existing component IDs are removed.
   ========================================================= */
#klikwjp-app-container{
  --kwjp-primary:#5b4bdb;
  --kwjp-primary-dark:#4537b8;
  --kwjp-cyan:#06b6d4;
  --kwjp-ink:#182033;
  --kwjp-muted:#667085;
  --kwjp-line:#e8eaf0;
  --kwjp-surface:#fff;
  --kwjp-radius:22px;
  overflow-x:clip;
}
#klikwjp-app-container main,
#klikwjp-app-container section{scroll-margin-top:92px}

#klikwjp-app-container header{
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
}

#klikwjp-app-container #home .kwjp-kpi-card{
  position:relative;
  overflow:hidden;
  border-color:rgba(6,182,212,.14)!important;
}
#klikwjp-app-container #home .kwjp-kpi-card::after{
  content:"KPI";
  position:absolute;
  top:13px;
  right:13px;
  padding:4px 8px;
  border-radius:999px;
  font-size:.58rem;
  font-weight:850;
  letter-spacing:.08em;
  color:#0e7490;
  background:#ecfeff;
  border:1px solid #cffafe;
}
#klikwjp-app-container #home .kwjp-kpi-card:hover{
  border-color:rgba(6,182,212,.28)!important;
  box-shadow:0 22px 46px rgba(6,182,212,.12)!important;
}

#klikwjp-app-container .kwjp-hero,
#klikwjp-app-container .kwjp-credit-hero,
#klikwjp-app-container .kwjp-collection-hero{
  isolation:isolate;
}
#klikwjp-app-container .kwjp-hero-content,
#klikwjp-app-container .kwjp-credit-hero .kwjp-sim-hero-copy,
#klikwjp-app-container .kwjp-collection-copy{
  max-width:720px;
}

#klikwjp-app-container .kwjp-hero-btn{
  min-height:50px;
  padding-inline:20px;
}
#klikwjp-app-container .kwjp-hero-btn-primary{
  box-shadow:0 14px 30px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.55);
}
#klikwjp-app-container .kwjp-hero-btn-secondary{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(255,255,255,.22)!important;
  backdrop-filter:blur(10px);
}

#klikwjp-app-container #home .grid > div{
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
#klikwjp-app-container #home .grid > div button,
#klikwjp-app-container #home .grid > div a{
  color:var(--kwjp-primary)!important;
}
#klikwjp-app-container #home .grid > div button:hover,
#klikwjp-app-container #home .grid > div a:hover{
  background:#eae7ff!important;
}

#klikwjp-app-container section:not(#home) > .container{
  padding-top:10px;
}
#klikwjp-app-container section:not(#home) .bg-white,
#klikwjp-app-container section:not(#home) .bg-gray-50{
  box-shadow:0 18px 50px rgba(16,24,40,.065)!important;
}

#klikwjp-app-container form button{
  min-height:46px;
}
#klikwjp-app-container .mobile-menu{
  box-shadow:18px 0 55px rgba(0,0,0,.25);
}
#klikwjp-app-container .mobile-menu nav a{
  min-height:48px;
  padding-block:12px!important;
  border:1px solid transparent;
}
#klikwjp-app-container .mobile-menu nav a:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.10);
}

#klikwjp-app-container .kwjp-collection-hero{
  box-shadow:0 28px 70px rgba(31,39,96,.24);
}
#klikwjp-app-container #penagihan .section-card{
  box-shadow:0 14px 42px rgba(20,24,40,.065)!important;
}
#klikwjp-app-container #penagihan .section-content{
  position:relative;
}
#klikwjp-app-container #penagihan .section-content > h2{
  min-height:48px;
}

#klikwjp-app-container .overflow-x-auto{
  border-radius:16px;
  scrollbar-width:thin;
}

@media(max-width:767px){
  #klikwjp-app-container header{
    position:sticky;
    top:0;
  }
  #klikwjp-app-container #home{
    padding-top:16px!important;
  }
  #klikwjp-app-container .kwjp-hero{
    min-height:540px;
    padding:31px 20px 26px;
  }
  #klikwjp-app-container .kwjp-hero h2{
    font-size:clamp(2.25rem,11vw,2.85rem)!important;
  }
  #klikwjp-app-container .kwjp-hero-actions{
    margin-top:23px;
  }
  #klikwjp-app-container .kwjp-hero-btn{
    min-height:48px;
  }

  #klikwjp-app-container #home .grid{
    gap:11px!important;
  }
  #klikwjp-app-container #home .grid > div{
    min-height:198px;
  }

  #klikwjp-app-container section:not(#home){
    padding-top:28px!important;
    padding-bottom:42px!important;
  }

  #klikwjp-app-container .kwjp-credit-hero,
  #klikwjp-app-container .kwjp-collection-hero{
    min-height:500px!important;
    margin-bottom:20px;
  }

  #klikwjp-app-container #penagihan{
    padding-top:22px!important;
  }
  #klikwjp-app-container #penagihan > .max-w-4xl > .text-center{
    padding:27px 19px 25px;
    border-radius:22px;
  }
  #klikwjp-app-container #penagihan .section-content{
    padding:21px 18px!important;
  }

  #klikwjp-app-container #penagihan #dynamicForms .flex.space-x-3{
    gap:9px!important;
  }

  /* Make primary actions full-width and thumb-friendly */
  #klikwjp-app-container #penagihan button,
  #klikwjp-app-container #penagihan input[type="submit"]{
    min-height:48px;
  }

  #klikwjp-app-container #cameraModal > div,
  #klikwjp-app-container #buktiCameraModal > div,
  #klikwjp-app-container #messageModal > div{
    border-radius:20px!important;
  }
}

@media(max-width:380px){
  #klikwjp-app-container .kwjp-hero{
    min-height:555px;
    padding-inline:17px;
  }
  #klikwjp-app-container #home .grid > div{
    min-height:175px;
  }
}

@media(prefers-reduced-motion:reduce){
  #klikwjp-app-container *,
  #klikwjp-app-container *::before,
  #klikwjp-app-container *::after{
    transition:none!important;
    animation:none!important;
  }
}


/* ===== premium-collection-banking-v2 (source block 5) ===== */

#klikwjp-app-container #penagihan{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172033}
#klikwjp-app-container #penagihan .pc-hero{position:relative;min-height:350px;overflow:hidden;border-radius:28px;padding:44px 48px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(118deg,#0b1730 0%,#112b52 56%,#173f69 100%);box-shadow:0 24px 65px rgba(9,24,48,.18);isolation:isolate}
#klikwjp-app-container #penagihan .pc-hero:before{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:110px;top:-130px;box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018)}
#klikwjp-app-container #penagihan .pc-hero-grid{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 75%)}
#klikwjp-app-container #penagihan .pc-hero-copy{position:relative;z-index:2;max-width:650px}.pc-eyebrow{display:flex;align-items:center;gap:9px;color:#b9c8dc;font-size:10px;font-weight:800;letter-spacing:.16em;margin-bottom:17px}.pc-live{width:7px;height:7px;border-radius:50%;background:#55d6a1;box-shadow:0 0 0 5px rgba(85,214,161,.12)}
#klikwjp-app-container #penagihan .pc-hero h2{margin:0!important;color:#fff!important;font-size:clamp(2rem,4vw,3.45rem)!important;line-height:1.04!important;letter-spacing:-.045em!important;font-weight:800!important}.pc-hero h2 span{color:#9ed0ff;background:none!important;-webkit-text-fill-color:initial!important}.pc-hero p{max-width:610px;margin:18px 0 0!important;color:#b9c8dc!important;font-size:.92rem!important;line-height:1.7!important}.pc-hero-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:23px}.pc-hero-meta span{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.045);color:#d6e0ed;font-size:.68rem;font-weight:700}.pc-hero-meta i{color:#8dc8ff}
#klikwjp-app-container #penagihan .pc-hero-panel{position:relative;z-index:2;width:300px;padding:18px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.065);backdrop-filter:blur(16px);box-shadow:0 20px 45px rgba(0,0,0,.15)}.pc-panel-top{display:flex;justify-content:space-between;color:#9fb1c8;font-size:8px;letter-spacing:.12em;font-weight:800}.pc-panel-top b{color:#69e0aa}.pc-panel-score{display:flex;align-items:end;gap:12px;margin:22px 0 19px}.pc-panel-score strong{font-size:3rem;line-height:.8;color:#fff;letter-spacing:-.07em}.pc-panel-score span{font-size:8px;line-height:1.45;letter-spacing:.13em;color:#91a5bf;font-weight:800}.pc-panel-row{display:grid;grid-template-columns:1fr 35px auto;gap:9px;align-items:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.08);font-size:9px;color:#afbed0}.pc-panel-row i{height:4px;border-radius:20px;background:#4bbf92}.pc-panel-row b{font-size:7px;letter-spacing:.08em;color:#d8e3ef}
#klikwjp-app-container #penagihan .pc-workflow{display:flex;align-items:center;gap:10px;margin:18px 0 22px;padding:12px 15px;border:1px solid #e4e8ef;border-radius:15px;background:#fff;box-shadow:0 8px 25px rgba(15,30,55,.045)}.pc-step{display:flex;align-items:center;gap:9px;min-width:0}.pc-step span{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:#f0f3f7;color:#65758b;font-size:9px;font-weight:800}.pc-step.active span{background:#102d53;color:#fff}.pc-step b{display:block;color:#24344a;font-size:.72rem}.pc-step small{display:block;color:#98a4b4;font-size:.61rem;margin-top:1px}.pc-line{height:1px;flex:1;background:#e4e8ef}
#klikwjp-app-container #penagihan .pc-form{display:grid;gap:16px}.pc-card,.pc-submit-card{border:1px solid #e3e7ee;border-radius:20px;background:#fff;box-shadow:0 12px 35px rgba(16,34,58,.055);overflow:hidden}.pc-card{padding:25px}.pc-card-head{display:flex;align-items:flex-start;gap:13px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #edf0f4}.pc-index{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:#eef4fa;color:#17416e;display:grid;place-items:center;font-size:.7rem;font-weight:850;letter-spacing:.04em}.pc-kicker{display:block;color:#7b8da4;font-size:8px;letter-spacing:.14em;font-weight:850;margin-bottom:4px}.pc-card-head h3,.pc-submit-copy h3{margin:0;color:#1d2b3d;font-size:1.02rem;font-weight:800;letter-spacing:-.02em}.pc-card-head p,.pc-submit-copy p{margin:4px 0 0;color:#8793a3;font-size:.72rem;line-height:1.55}.pc-secure{margin-left:auto;display:inline-flex;gap:6px;align-items:center;padding:7px 9px;border-radius:8px;background:#f6f8fa;color:#748196;font-size:.62rem;font-weight:700}.pc-fields{display:grid;gap:17px}.pc-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.pc-span-2{grid-column:1/-1}.pc-field label,.pc-status-box>label{display:block;margin:0 0 7px;color:#3d4d61!important;font-size:.7rem!important;font-weight:800!important}.pc-field label em,.pc-status-box label em{color:#d84d5c;font-style:normal}.pc-input{min-height:45px;display:flex;align-items:center;border:1px solid #dfe4eb;border-radius:11px;background:#fff;overflow:hidden;transition:.2s}.pc-input:focus-within{border-color:#6e91b5;box-shadow:0 0 0 3px rgba(70,112,154,.09)}.pc-input>i{flex:0 0 41px;text-align:center;color:#92a0b0;font-size:.78rem}.pc-input input,.pc-input select,.pc-input textarea{width:100%;min-height:44px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;padding:10px 12px 10px 0!important;color:#253449!important;font-size:.78rem!important;outline:0!important}.pc-input textarea{padding-top:11px!important;resize:vertical}.pc-input.is-readonly{background:#f7f8fa}.pc-input.is-readonly input{color:#718096!important}.pc-status-box{padding:17px;border-radius:14px;background:#f7f9fb;border:1px solid #e8edf2}.pc-status-hint{display:flex;gap:7px;align-items:center;margin-top:8px;color:#8b98a8;font-size:.62rem}.pc-status-hint i{color:#7894af}.pc-dynamic{margin-top:14px;padding:17px;border-radius:15px;border:1px solid}.pc-success-state{background:#f3fbf7;border-color:#cfeee0}.pc-promise-state{background:#fffaf0;border-color:#f1dfb5}.pc-note-state{background:#f7f8fa;border-color:#e2e6eb}.pc-dynamic-title{display:flex;align-items:center;gap:10px;margin-bottom:15px}.pc-dynamic-title>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#fff;font-size:.75rem}.pc-success-state .pc-dynamic-title>span{color:#159466}.pc-promise-state .pc-dynamic-title>span{color:#b77918}.pc-note-state .pc-dynamic-title>span{color:#607084}.pc-dynamic-title b{display:block;color:#27374a;font-size:.76rem}.pc-dynamic-title small{display:block;color:#8794a3;font-size:.62rem;margin-top:2px}.pc-dynamic-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.pc-prefix{padding-left:12px;color:#7a899a;font-size:.7rem;font-weight:800}.pc-proof-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pc-proof-actions button{min-height:45px;border:1px solid #d9e0e7;border-radius:10px;background:#fff;color:#3d5269;font-size:.67rem;font-weight:800}.pc-proof-actions button:first-child{background:#173c63;color:#fff;border-color:#173c63}.pc-proof-actions button:hover{transform:translateY(-1px)}.pc-proof-ready{margin-top:8px;display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;background:#e8f8f1;color:#177b58;font-size:.64rem;font-weight:750}.pc-camera-wrap{border:1px solid #e4e9ef;border-radius:15px;background:#f9fafb;padding:12px}.pc-camera-top{display:flex;justify-content:space-between;align-items:center;padding:2px 3px 10px}.pc-camera-top span{font-size:.61rem;letter-spacing:.1em;font-weight:850;color:#61748a}.pc-camera-top i{color:#527da5}.pc-camera-top small{font-size:.6rem;color:#9aa5b3}.pc-camera-action{text-align:center;padding-top:11px}.pc-camera-action button{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-height:43px!important;padding:0 17px!important;border:0!important;border-radius:10px!important;background:#173c63!important;color:#fff!important;box-shadow:0 8px 18px rgba(23,60,99,.16)!important;font-size:.68rem!important;font-weight:800!important}.pc-camera-action button:hover{transform:translateY(-1px)}.pc-camera-empty{min-height:245px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed #cbd3dd;border-radius:11px;background:linear-gradient(145deg,#fff,#f4f7fa)}.pc-camera-empty strong{color:#657386;font-size:.72rem;margin-top:10px}.pc-camera-empty span{max-width:250px;color:#a0aab7;font-size:.61rem;line-height:1.55;margin-top:4px}.pc-camera-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:#edf3f8;color:#587894;font-size:1rem}.pc-submit-card{padding:21px 23px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#102a4b;border-color:#102a4b}.pc-submit-copy{max-width:520px}.pc-submit-copy .pc-kicker{color:#91a8c2}.pc-submit-copy h3{color:#fff}.pc-submit-copy p{color:#a9b9cc}.pc-submit-side{display:flex;align-items:center;gap:14px}.pc-submit-secure{display:flex;gap:8px;align-items:center;color:#89a2bd}.pc-submit-secure i{font-size:1rem}.pc-submit-secure b,.pc-submit-secure small{display:block}.pc-submit-secure b{font-size:.64rem;color:#d3deea}.pc-submit-secure small{font-size:.57rem;margin-top:2px}.pc-submit-card button{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 15px 0 8px;border:0;border-radius:12px;background:#fff;color:#15375b;box-shadow:0 10px 25px rgba(0,0,0,.14)}.pc-submit-card button:hover{transform:translateY(-1px)}.pc-submit-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#eaf2f8;color:#1a4d78}.pc-submit-card button b,.pc-submit-card button small{display:block;text-align:left}.pc-submit-card button b{font-size:.69rem}.pc-submit-card button small{font-size:.56rem;color:#8a98a8;margin-top:2px}.pc-submit-card button>i{font-size:.72rem;color:#7b8da2;margin-left:4px}.pc-success{margin-top:16px;align-items:center;gap:12px;padding:15px 18px;border:1px solid #cdebdc;border-radius:14px;background:#f3fbf7;box-shadow:0 8px 24px rgba(15,90,60,.05)}.pc-success:not(.hidden){display:flex}.pc-success-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#d9f3e7;color:#17835d}.pc-success b{display:block;color:#176c50;font-size:.76rem}.pc-success span{display:block;color:#62917f;font-size:.63rem;margin-top:2px}
#klikwjp-app-container #penagihan .pc-camera-modal{background:rgba(5,15,28,.78);backdrop-filter:blur(7px)}.pc-modal-card{width:min(560px,100%);padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#f8fafc;box-shadow:0 30px 80px rgba(0,0,0,.35)}.pc-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.pc-modal-head span{font-size:8px;letter-spacing:.14em;font-weight:850;color:#7890a8}.pc-modal-head h3{margin:3px 0 0;font-size:.95rem;color:#1f3044}.pc-modal-head>button{width:32px;height:32px;border:1px solid #dce2e8;border-radius:9px;background:#fff;color:#68788a}.pc-modal-card video{max-height:62vh;object-fit:cover;border-radius:13px;background:#07111d}.pc-modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:12px}.pc-modal-actions button{min-height:42px;padding:0 14px;border-radius:10px;border:0;font-size:.68rem;font-weight:800}.pc-modal-primary{background:#173c63;color:#fff}.pc-modal-secondary{background:#e9edf2;color:#536276}
#klikwjp-app-container #penagihan.dark .pc-card,#klikwjp-app-container.dark #penagihan .pc-card{background:#171d26;border-color:#2b3543}.dark #penagihan .pc-card-head h3,.dark #penagihan .pc-submit-copy h3{color:#f2f5f8}.dark #penagihan .pc-card-head p,.dark #penagihan .pc-submit-copy p{color:#94a1b1}.dark #penagihan .pc-input{background:#1d2530;border-color:#35404f}.dark #penagihan .pc-input input,.dark #penagihan .pc-input select,.dark #penagihan .pc-input textarea{color:#f0f4f8!important}.dark #penagihan .pc-status-box,.dark #penagihan .pc-camera-wrap{background:#141a22;border-color:#303a48}.dark #penagihan .pc-workflow{background:#171d26;border-color:#2b3543}.dark #penagihan .pc-step b{color:#e4eaf1}.dark #penagihan .pc-line{background:#34404e}
@media(max-width:900px){#klikwjp-app-container #penagihan .pc-hero{padding:34px;min-height:330px}.pc-hero-panel{display:none!important}.pc-submit-card{align-items:flex-start;flex-direction:column}.pc-submit-side{width:100%;justify-content:space-between}}
@media(max-width:640px){#klikwjp-app-container #penagihan{padding-top:16px!important}.pc-hero{border-radius:20px!important;padding:28px 22px!important}.pc-hero h2{font-size:2rem!important}.pc-hero p{font-size:.78rem!important}.pc-hero-meta span{font-size:.59rem}.pc-workflow{overflow:auto;margin:12px 0 16px!important}.pc-step{flex:0 0 auto}.pc-step div{display:none}.pc-line{min-width:18px}.pc-card{padding:18px!important;border-radius:16px}.pc-card-head{gap:10px;padding-bottom:15px;margin-bottom:15px}.pc-index{width:35px;height:35px;flex-basis:35px}.pc-card-head h3{font-size:.92rem}.pc-card-head p{font-size:.64rem}.pc-secure{display:none}.pc-grid-2,.pc-dynamic-grid{grid-template-columns:1fr}.pc-span-2{grid-column:auto}.pc-camera-empty{min-height:205px}.pc-submit-card{padding:18px}.pc-submit-side{align-items:stretch;flex-direction:column}.pc-submit-secure{display:none}.pc-submit-card button{width:100%;justify-content:center}.pc-submit-card button b,.pc-submit-card button small{text-align:center}.pc-proof-actions{grid-template-columns:1fr}.pc-modal-card{padding:13px}.pc-modal-actions{flex-direction:column}.pc-modal-actions button{width:100%}}


/* ===== kwjp-premium-v3-final (source block 6) ===== */

/* =========================================================
   KLIKWJP PREMIUM V3 — FINAL DESIGN SYSTEM
   VISUAL/UX ONLY — NO HTML IDs, API, calculations or JS handlers changed.
   ========================================================= */
#klikwjp-app-container{
  --p:#4f46e5;--p2:#6366f1;--cyan:#0891b2;--ink:#172033;--muted:#667085;
  --line:#e7eaf0;--surface:#fff;--soft:#f6f8fc;--radius:22px;
  background:#f6f8fc!important;color:var(--ink)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;
  overflow-x:clip!important;
}
#klikwjp-app-container body{font-family:inherit}
#klikwjp-app-container ::selection{background:rgba(99,102,241,.18)}
#klikwjp-app-container a,#klikwjp-app-container button{outline-offset:3px}
#klikwjp-app-container a:focus-visible,#klikwjp-app-container button:focus-visible,
#klikwjp-app-container input:focus-visible,#klikwjp-app-container select:focus-visible,
#klikwjp-app-container textarea:focus-visible{outline:3px solid rgba(79,70,229,.22)!important}

/* HEADER — calmer luxury fintech */
#klikwjp-app-container header{
  background:rgba(16,20,40,.94)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 10px 35px rgba(15,23,42,.18)!important;
  backdrop-filter:blur(20px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(145%)!important;
}
#klikwjp-app-container header>div:first-child{padding-top:12px!important;padding-bottom:12px!important}
#klikwjp-app-container header .w-10.h-10{
  width:44px!important;height:44px!important;border-radius:14px!important;
  background:linear-gradient(145deg,#fff,#eef2ff)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.2)!important;
}
#klikwjp-app-container header .w-10.h-10 span{color:#4f46e5!important;font-size:1.02rem!important;letter-spacing:-.04em}
#klikwjp-app-container header h1{font-size:1.22rem!important;font-weight:850!important;letter-spacing:-.035em!important}
#klikwjp-app-container header nav{gap:4px!important}
#klikwjp-app-container header nav>a,#klikwjp-app-container header nav>div>button{
  min-height:40px;padding:9px 12px!important;border-radius:11px!important;
  color:rgba(255,255,255,.78)!important;font-size:.78rem!important;font-weight:700!important;
}
#klikwjp-app-container header nav>a:hover,#klikwjp-app-container header nav>div>button:hover{background:rgba(255,255,255,.09)!important;color:#fff!important}
#klikwjp-app-container header .group>div{margin-top:7px;background:#15192e!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:14px!important;padding:6px!important}
#klikwjp-app-container header .group>div a{font-size:.76rem!important;border-radius:9px!important}

/* GLOBAL RHYTHM */
#klikwjp-app-container section{position:relative}
#klikwjp-app-container section:not(#home){padding-top:54px!important;padding-bottom:64px!important}
#klikwjp-app-container section:not(#home)> .container{max-width:1180px!important}
#klikwjp-app-container section:not(#home) h2{font-weight:850!important;letter-spacing:-.045em!important}
#klikwjp-app-container section:not(#home)> .container>h2,
#klikwjp-app-container section:not(#home)>.container>.max-w-6xl>h2,
#klikwjp-app-container section:not(#home)>.container>.max-w-4xl>h2{text-wrap:balance}

/* HOME HERO */
#klikwjp-app-container #home{padding-top:38px!important;padding-bottom:46px!important;background:transparent!important}
#klikwjp-app-container .kwjp-hero{
  min-height:470px!important;border-radius:32px!important;padding:62px 68px!important;
  background:
    radial-gradient(circle at 82% 18%,rgba(99,102,241,.35),transparent 28%),
    radial-gradient(circle at 96% 92%,rgba(34,211,238,.17),transparent 28%),
    linear-gradient(125deg,#101426 0%,#211b4d 48%,#31246d 100%)!important;
  box-shadow:0 32px 80px rgba(35,29,91,.25)!important;
}
#klikwjp-app-container .kwjp-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.045) 50%,transparent 72%);z-index:0}
#klikwjp-app-container .kwjp-hero-content{max-width:710px!important}
#klikwjp-app-container .kwjp-hero-badge{margin-bottom:20px!important;background:rgba(255,255,255,.075)!important;border-color:rgba(255,255,255,.13)!important}
#klikwjp-app-container .kwjp-hero h2{font-size:clamp(2.8rem,5.3vw,4.8rem)!important;line-height:.97!important;font-weight:900!important;letter-spacing:-.065em!important;text-wrap:balance}
#klikwjp-app-container .kwjp-hero h2 span{background:linear-gradient(90deg,#c4b5fd,#67e8f9)!important;-webkit-background-clip:text!important;background-clip:text!important}
#klikwjp-app-container .kwjp-hero p{max-width:650px!important;color:rgba(255,255,255,.72)!important;font-size:1rem!important;line-height:1.8!important}
#klikwjp-app-container .kwjp-hero-actions{margin-top:30px!important;gap:10px!important}
#klikwjp-app-container .kwjp-hero-btn{min-height:50px!important;border-radius:13px!important;padding-inline:20px!important;font-weight:800!important}
#klikwjp-app-container .kwjp-hero-btn-primary{background:#fff!important;color:#241c4d!important}
#klikwjp-app-container .kwjp-hero-btn-secondary{background:rgba(255,255,255,.075)!important;border-color:rgba(255,255,255,.17)!important}
#klikwjp-app-container .kwjp-hero-meta{margin-top:24px!important;color:rgba(255,255,255,.55)!important}

/* HOME SERVICE CARDS */
#klikwjp-app-container #home .grid{gap:16px!important;margin-top:24px!important}
#klikwjp-app-container #home .grid>div{
  min-height:228px!important;padding:27px!important;border-radius:21px!important;
  background:rgba(255,255,255,.96)!important;border:1px solid #e9ebf2!important;
  box-shadow:0 12px 35px rgba(16,24,40,.055)!important;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important;
}
#klikwjp-app-container #home .grid>div:hover{transform:translateY(-6px)!important;box-shadow:0 24px 50px rgba(16,24,40,.10)!important;border-color:rgba(79,70,229,.20)!important}
#klikwjp-app-container #home .grid>div>div{width:54px!important;height:54px!important;border-radius:16px!important;margin-bottom:18px!important;box-shadow:0 9px 22px rgba(79,70,229,.10)}
#klikwjp-app-container #home .grid>div h3{font-size:1.03rem!important;font-weight:850!important;letter-spacing:-.02em!important}
#klikwjp-app-container #home .grid>div p{font-size:.81rem!important;line-height:1.65!important;color:#667085!important}
#klikwjp-app-container #home .grid>div button,#klikwjp-app-container #home .grid>div a{min-height:39px!important;border-radius:10px!important;background:#f2f0ff!important;color:#4f46e5!important;font-weight:800!important}


/* PREMIUM CARD ACTIONS */
#klikwjp-app-container #home .grid>div>a,
#klikwjp-app-container #home .grid>div>button{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-height:42px!important;
  padding:0 14px 0 16px!important;
  margin-top:20px!important;
  border:1px solid rgba(79,70,229,.13)!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f7f6ff 100%)!important;
  color:#3730a3!important;
  box-shadow:0 7px 18px rgba(79,70,229,.10), inset 0 1px 0 rgba(255,255,255,.9)!important;
  font-size:.72rem!important;
  font-weight:850!important;
  letter-spacing:.01em!important;
  text-decoration:none!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
#klikwjp-app-container #home .grid>div>a::before,
#klikwjp-app-container #home .grid>div>button::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.75) 50%,transparent 75%)!important;
  transform:translateX(-120%)!important;
  transition:transform .55s ease!important;
  z-index:-1!important;
}
#klikwjp-app-container #home .grid>div>a:hover,
#klikwjp-app-container #home .grid>div>button:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(79,70,229,.28)!important;
  background:linear-gradient(180deg,#fff 0%,#f0efff 100%)!important;
  box-shadow:0 11px 25px rgba(79,70,229,.16),inset 0 1px 0 #fff!important;
}
#klikwjp-app-container #home .grid>div>a:hover::before,
#klikwjp-app-container #home .grid>div>button:hover::before{transform:translateX(120%)!important}
#klikwjp-app-container #home .grid>div>a:active,
#klikwjp-app-container #home .grid>div>button:active{transform:translateY(0)!important;box-shadow:0 5px 12px rgba(79,70,229,.12)!important}
#klikwjp-app-container #home .grid>div>a:focus-visible,
#klikwjp-app-container #home .grid>div>button:focus-visible{outline:3px solid rgba(99,102,241,.22)!important;outline-offset:3px!important}
#klikwjp-app-container #home .grid>div>a:not(:has(svg))::after,
#klikwjp-app-container #home .grid>div>button:not(:has(svg))::after{
  content:"\2192"!important;
  font-size:1rem!important;
  line-height:1!important;
  opacity:.72!important;
  transition:transform .2s ease,opacity .2s ease!important;
}
#klikwjp-app-container #home .grid>div>a:hover::after,
#klikwjp-app-container #home .grid>div>button:hover::after{transform:translateX(3px)!important;opacity:1!important}
#klikwjp-app-container #home .grid>div>a svg,
#klikwjp-app-container #home .grid>div>button svg{width:15px!important;height:15px!important;flex:0 0 15px!important;transition:transform .2s ease!important}
#klikwjp-app-container #home .grid>div>a:hover svg,
#klikwjp-app-container #home .grid>div>button:hover svg{transform:translateX(3px)!important}
#klikwjp-app-container.dark #home .grid>div>a,
#klikwjp-app-container.dark #home .grid>div>button{
  background:linear-gradient(180deg,#20243a 0%,#191d31 100%)!important;
  border-color:rgba(165,180,252,.18)!important;
  color:#c7d2fe!important;
  box-shadow:0 8px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
#klikwjp-app-container.dark #home .grid>div>a:hover,
#klikwjp-app-container.dark #home .grid>div>button:hover{
  background:linear-gradient(180deg,#282d48 0%,#20243b 100%)!important;
  border-color:rgba(165,180,252,.34)!important;
}
@media(max-width:767px){
  #klikwjp-app-container #home .grid>div>a,
  #klikwjp-app-container #home .grid>div>button{min-height:40px!important;padding:0 11px 0 13px!important;margin-top:16px!important;border-radius:11px!important;font-size:.67rem!important}
}

/* SIMULATOR / FORM SURFACES */
#klikwjp-app-container .kwjp-sim-section{background:linear-gradient(180deg,#f7f9fc 0%,#fff 45%,#f7f9fc 100%)!important}
#klikwjp-app-container .kwjp-sim-hero,#klikwjp-app-container .kwjp-credit-hero,#klikwjp-app-container .kwjp-collection-hero{
  border-radius:28px!important;box-shadow:0 26px 65px rgba(15,23,42,.14)!important
}
#klikwjp-app-container .kwjp-sim-hero h1,#klikwjp-app-container .kwjp-credit-hero h1,#klikwjp-app-container .kwjp-collection-hero h1{font-weight:900!important;letter-spacing:-.05em!important}
#klikwjp-app-container .kwjp-sim-section .bg-gray-50,#klikwjp-app-container .kwjp-sim-section .bg-white,
#klikwjp-app-container #eligibility .bg-white,#klikwjp-app-container #results .bg-white{
  border:1px solid #e7eaf0!important;border-radius:22px!important;box-shadow:0 16px 45px rgba(16,24,40,.055)!important
}
#klikwjp-app-container .kwjp-sim-section input,#klikwjp-app-container .kwjp-sim-section select,
#klikwjp-app-container #eligibility input,#klikwjp-app-container #eligibility select,
#klikwjp-app-container #eligibility textarea{
  min-height:48px!important;border-radius:12px!important;border-color:#dfe4ec!important;background:#fff!important;
  box-shadow:inset 0 1px 2px rgba(16,24,40,.02)!important
}
#klikwjp-app-container .kwjp-sim-section input:focus,#klikwjp-app-container .kwjp-sim-section select:focus,
#klikwjp-app-container #eligibility input:focus,#klikwjp-app-container #eligibility select:focus,#klikwjp-app-container #eligibility textarea:focus{
  border-color:#6366f1!important;box-shadow:0 0 0 4px rgba(99,102,241,.10)!important;transform:none!important
}
#klikwjp-app-container .kwjp-sim-section label,#klikwjp-app-container #eligibility label{font-weight:750!important;color:#344054!important}
#klikwjp-app-container .kwjp-sim-section button,#klikwjp-app-container #eligibility button{min-height:46px!important;border-radius:12px!important;font-weight:800!important}

/* RESULTS: make the outcome visually obvious */
#klikwjp-app-container #loanResults,#klikwjp-app-container #depositResults,#klikwjp-app-container #savingsResults,#klikwjp-app-container #results{border-radius:22px!important;overflow:hidden}
#klikwjp-app-container #loanResults:before,#klikwjp-app-container #depositResults:before,#klikwjp-app-container #savingsResults:before{width:6px!important}
#klikwjp-app-container .progress-bar{height:8px!important;border-radius:99px!important}

/* ELIGIBILITY */
#klikwjp-app-container #eligibility{background:linear-gradient(180deg,#f7f9fc,#fff)!important}
#klikwjp-app-container #eligibility .progress-bar{background:linear-gradient(90deg,#4f46e5,#06b6d4)!important}
#klikwjp-app-container #eligibility .card-shadow{box-shadow:0 20px 55px rgba(16,24,40,.07)!important}
#klikwjp-app-container #eligibility h2{font-size:clamp(1.9rem,3vw,2.6rem)!important}

/* PENAGIHAN — preserve its dedicated PC design, refine hierarchy only */
#klikwjp-app-container #penagihan{background:#f6f8fc!important}
#klikwjp-app-container #penagihan .pc-hero{border-radius:30px!important;box-shadow:0 30px 75px rgba(9,24,48,.18)!important}
#klikwjp-app-container #penagihan .pc-card,#klikwjp-app-container #penagihan .pc-submit-card{border-radius:21px!important}
#klikwjp-app-container #penagihan .pc-card{box-shadow:0 16px 42px rgba(16,34,58,.06)!important}
#klikwjp-app-container #penagihan .pc-card-head h3{font-weight:850!important}
#klikwjp-app-container #penagihan .pc-input{min-height:48px!important;border-radius:12px!important}
#klikwjp-app-container #penagihan .pc-input input,#klikwjp-app-container #penagihan .pc-input select,#klikwjp-app-container #penagihan .pc-input textarea{font-size:.82rem!important}
#klikwjp-app-container #penagihan .pc-submit-card{box-shadow:0 22px 55px rgba(16,42,75,.20)!important}

/* TABLES */
#klikwjp-app-container .overflow-x-auto{border:1px solid #e7eaf0!important;border-radius:16px!important;background:#fff!important}
#klikwjp-app-container table thead th{font-weight:850!important}
#klikwjp-app-container table tbody tr{transition:background .18s ease}
#klikwjp-app-container table tbody tr:hover{background:#fafaff!important}

/* FOOTER */
#klikwjp-app-container .kwjp-footer{margin-top:0!important;border-top:0!important}

/* MODALS */
#klikwjp-app-container #messageModal,#klikwjp-app-container #cameraModal,#klikwjp-app-container #buktiCameraModal{backdrop-filter:blur(10px)!important}
#klikwjp-app-container #messageModal>div,#klikwjp-app-container #cameraModal>div,#klikwjp-app-container #buktiCameraModal>div{border-radius:22px!important;box-shadow:0 30px 90px rgba(0,0,0,.30)!important}

/* MOBILE PREMIUM */
@media(max-width:767px){
  #klikwjp-app-container header>div:first-child{padding-left:14px!important;padding-right:14px!important}
  #klikwjp-app-container header h1{font-size:1.08rem!important}
  #klikwjp-app-container #home{padding-top:16px!important;padding-bottom:28px!important}
  #klikwjp-app-container #home>.container{padding-left:11px!important;padding-right:11px!important}
  #klikwjp-app-container .kwjp-hero{min-height:505px!important;padding:30px 20px 24px!important;border-radius:23px!important}
  #klikwjp-app-container .kwjp-hero h2{font-size:clamp(2.18rem,11vw,2.75rem)!important;line-height:.99!important}
  #klikwjp-app-container .kwjp-hero p{font-size:.86rem!important;line-height:1.68!important}
  #klikwjp-app-container .kwjp-hero-actions{gap:8px!important;margin-top:22px!important}
  #klikwjp-app-container .kwjp-hero-btn{width:100%!important;min-height:49px!important}
  #klikwjp-app-container .kwjp-hero-orbit{opacity:.34!important}
  #klikwjp-app-container #home .grid{gap:10px!important}
  #klikwjp-app-container #home .grid>div{min-height:190px!important;padding:18px 12px!important;border-radius:17px!important}
  #klikwjp-app-container #home .grid>div>div{width:46px!important;height:46px!important;margin-bottom:13px!important}
  #klikwjp-app-container #home .grid>div h3{font-size:.88rem!important}
  #klikwjp-app-container #home .grid>div p{font-size:.70rem!important;line-height:1.55!important}
  #klikwjp-app-container section:not(#home){padding-top:30px!important;padding-bottom:42px!important}
  #klikwjp-app-container section:not(#home) h2{font-size:1.6rem!important}
  #klikwjp-app-container .kwjp-sim-hero,#klikwjp-app-container .kwjp-credit-hero,#klikwjp-app-container .kwjp-collection-hero{border-radius:21px!important}
  #klikwjp-app-container .kwjp-sim-section .bg-gray-50,#klikwjp-app-container .kwjp-sim-section .bg-white,
  #klikwjp-app-container #eligibility .bg-white,#klikwjp-app-container #results .bg-white{padding:18px!important;border-radius:18px!important}
  #klikwjp-app-container #penagihan .pc-hero{border-radius:22px!important}
  #klikwjp-app-container #penagihan .pc-card{border-radius:18px!important}
}
@media(max-width:390px){
  #klikwjp-app-container #home .grid{grid-template-columns:1fr!important}
  #klikwjp-app-container .kwjp-hero{min-height:485px!important}
}

/* DARK MODE — premium, not inverted */
#klikwjp-app-container.dark{
  background:#0b0f17!important;color:#e8edf5!important
}
#klikwjp-app-container.dark section:not(#home){background:transparent!important}
#klikwjp-app-container.dark #home .grid>div,
#klikwjp-app-container.dark .kwjp-sim-section .bg-white,
#klikwjp-app-container.dark #eligibility .bg-white,
#klikwjp-app-container.dark #results .bg-white{
  background:#151b26!important;border-color:#273142!important;box-shadow:0 18px 45px rgba(0,0,0,.22)!important
}
#klikwjp-app-container.dark .kwjp-sim-section .bg-gray-50{background:#111824!important;border-color:#273142!important}
#klikwjp-app-container.dark input,#klikwjp-app-container.dark select,#klikwjp-app-container.dark textarea{background:#17202d!important;border-color:#344154!important;color:#f3f6fa!important}
#klikwjp-app-container.dark label{color:#d6dce5!important}
#klikwjp-app-container.dark table thead{background:#17202d!important}
#klikwjp-app-container.dark table td{color:#d7dee8!important;border-color:#283344!important}
#klikwjp-app-container.dark .overflow-x-auto{background:#111824!important;border-color:#293547!important}

/* MOTION SAFETY */
@media(prefers-reduced-motion:reduce){
  #klikwjp-app-container *,#klikwjp-app-container *::before,#klikwjp-app-container *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ===== kwjp-premium-v4-final (source block 7) ===== */

/* =========================================================
   KLIKWJP PREMIUM V4 — EXECUTIVE BANKING UI
   VISUAL / UX LAYER ONLY
   Does not change IDs, APIs, calculations or JavaScript.
   ========================================================= */
#klikwjp-app-container{
  --v4-ink:#0b1730;--v4-ink-2:#16233f;--v4-muted:#64748b;--v4-line:#dfe7f1;
  --v4-surface:#fff;--v4-soft:#f5f8fc;--v4-soft-2:#eef4fa;--v4-blue:#2563eb;--v4-blue-2:#1d4ed8;
  --v4-cyan:#0ea5e9;--v4-green:#059669;--v4-shadow:0 20px 55px rgba(15,23,42,.09);
  --v4-radius:22px;--v4-radius-sm:14px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
#klikwjp-app-container *,#klikwjp-app-container *::before,#klikwjp-app-container *::after{box-sizing:border-box}
#klikwjp-app-container button,#klikwjp-app-container input,#klikwjp-app-container select,#klikwjp-app-container textarea{font:inherit}
#klikwjp-app-container :where(h1,h2,h3,h4,p){text-wrap:pretty}

/* Header / navigation */
#klikwjp-app-container header,
#klikwjp-app-container .navbar,
#klikwjp-app-container nav{
  backdrop-filter:saturate(145%) blur(18px);-webkit-backdrop-filter:saturate(145%) blur(18px);
}
#klikwjp-app-container header{border-bottom:1px solid rgba(148,163,184,.18);box-shadow:0 5px 24px rgba(15,23,42,.045)}
#klikwjp-app-container nav a,#klikwjp-app-container nav button{transition:color .2s ease,background .2s ease,transform .2s ease}
#klikwjp-app-container nav a:hover,#klikwjp-app-container nav button:hover{transform:translateY(-1px)}

/* Universal section rhythm */
#klikwjp-app-container section{scroll-margin-top:92px}
#klikwjp-app-container .container{max-width:1240px}
#klikwjp-app-container .section-title,
#klikwjp-app-container [class*="section-title"]{letter-spacing:-.025em}

/* Main landing hero */
#klikwjp-app-container .kwjp-hero{
  position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(255,255,255,.14)!important;
  border-radius:30px!important;min-height:500px;padding:clamp(34px,5vw,68px)!important;
  background:
    radial-gradient(circle at 82% 18%,rgba(56,189,248,.22),transparent 27%),
    radial-gradient(circle at 16% 110%,rgba(37,99,235,.28),transparent 35%),
    linear-gradient(135deg,#07162f 0%,#0d2b57 52%,#12477b 100%)!important;
  box-shadow:0 30px 80px rgba(15,23,42,.22)!important;
}
#klikwjp-app-container .kwjp-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(255,255,255,.05),transparent 42%,rgba(255,255,255,.04));pointer-events:none}
#klikwjp-app-container .kwjp-hero::after{content:"";position:absolute;right:-120px;bottom:-160px;width:430px;height:430px;border:1px solid rgba(255,255,255,.09);border-radius:50%;box-shadow:0 0 0 38px rgba(255,255,255,.025),0 0 0 78px rgba(255,255,255,.018);pointer-events:none}
#klikwjp-app-container .kwjp-hero-content{position:relative;z-index:3;max-width:720px}
#klikwjp-app-container .kwjp-hero-badge{display:inline-flex!important;align-items:center;gap:8px;padding:8px 13px!important;border:1px solid rgba(255,255,255,.17)!important;border-radius:999px!important;background:rgba(255,255,255,.075)!important;color:#dff4ff!important;box-shadow:inset 0 1px rgba(255,255,255,.12),0 8px 25px rgba(0,0,0,.08);font-weight:800!important;letter-spacing:.08em!important;text-transform:uppercase;font-size:10px!important}
#klikwjp-app-container .kwjp-hero h1{max-width:780px;margin:18px 0 16px!important;color:#fff!important;font-size:clamp(38px,5.2vw,68px)!important;line-height:.99!important;letter-spacing:-.055em!important;font-weight:850!important}
#klikwjp-app-container .kwjp-hero p{max-width:640px;color:rgba(231,241,252,.82)!important;font-size:clamp(15px,1.6vw,18px)!important;line-height:1.7!important}
#klikwjp-app-container .kwjp-hero-actions{gap:12px!important;margin-top:28px!important}
#klikwjp-app-container .kwjp-hero-btn{min-height:48px!important;padding:12px 19px!important;border-radius:14px!important;font-weight:800!important;transition:transform .22s ease,box-shadow .22s ease,background .22s ease!important}
#klikwjp-app-container .kwjp-hero-btn:hover{transform:translateY(-2px)!important;box-shadow:0 12px 28px rgba(0,0,0,.18)!important}
#klikwjp-app-container .kwjp-hero-btn-primary{background:#fff!important;color:#0b2a52!important;border-color:#fff!important}
#klikwjp-app-container .kwjp-hero-btn-secondary{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.2)!important}
#klikwjp-app-container .kwjp-hero-meta{margin-top:26px!important;gap:10px!important}
#klikwjp-app-container .kwjp-hero-meta>*{border-color:rgba(255,255,255,.12)!important;background:rgba(255,255,255,.055)!important;color:#d9e8f7!important;border-radius:12px!important}
#klikwjp-app-container .kwjp-hero-orbit{opacity:.95;transform:scale(1.03)}

/* Premium simulator heroes */
#klikwjp-app-container .kwjp-sim-hero{
  position:relative;overflow:hidden;border-radius:26px!important;padding:32px clamp(24px,4vw,48px)!important;
  border:1px solid rgba(255,255,255,.32)!important;box-shadow:0 24px 60px rgba(15,23,42,.13)!important;
}
#klikwjp-app-container .kwjp-credit-hero{background:linear-gradient(135deg,#0b1d3a,#123b70 62%,#0b749b)!important}
#klikwjp-app-container .kwjp-deposit-hero{background:linear-gradient(135deg,#10233b,#155e75 62%,#0e8a79)!important}
#klikwjp-app-container .kwjp-savings-hero{background:linear-gradient(135deg,#111d3a,#263e80 58%,#126f8f)!important}
#klikwjp-app-container .kwjp-sim-hero-copy{position:relative;z-index:3}
#klikwjp-app-container .kwjp-sim-hero h1,#klikwjp-app-container .kwjp-sim-hero h2{color:#fff!important;letter-spacing:-.035em!important;font-weight:850!important}
#klikwjp-app-container .kwjp-sim-hero p{color:rgba(239,246,255,.82)!important;line-height:1.65!important}
#klikwjp-app-container .kwjp-hero-pills{gap:8px!important}
#klikwjp-app-container .kwjp-hero-pills span{padding:7px 10px!important;border-radius:999px!important;background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.13)!important;color:#eaf5ff!important;font-size:10px!important;font-weight:750!important}
#klikwjp-app-container .kwjp-sim-hero-art{filter:drop-shadow(0 20px 35px rgba(0,0,0,.2));opacity:.98}

/* Forms become executive-grade surfaces */
#klikwjp-app-container form,
#klikwjp-app-container .card,
#klikwjp-app-container .bg-white,
#klikwjp-app-container .bg-gray-50{
  transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease;
}
#klikwjp-app-container input,#klikwjp-app-container select,#klikwjp-app-container textarea{
  min-height:46px;border-radius:13px!important;border:1px solid #d8e1ec!important;background:#fff!important;color:#172033!important;
  box-shadow:0 1px 0 rgba(15,23,42,.02),inset 0 1px 2px rgba(15,23,42,.025)!important;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
#klikwjp-app-container input::placeholder,#klikwjp-app-container textarea::placeholder{color:#94a3b8!important}
#klikwjp-app-container input:hover,#klikwjp-app-container select:hover,#klikwjp-app-container textarea:hover{border-color:#b9c8da!important}
#klikwjp-app-container input:focus,#klikwjp-app-container select:focus,#klikwjp-app-container textarea:focus{
  outline:none!important;border-color:#60a5fa!important;box-shadow:0 0 0 4px rgba(37,99,235,.10),0 4px 12px rgba(15,23,42,.045)!important;background:#fff!important;
}
#klikwjp-app-container label{color:#334155;font-weight:700;letter-spacing:-.005em}
#klikwjp-app-container button:not(.kwjp-hero-btn){border-radius:12px;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
#klikwjp-app-container button:not(.kwjp-hero-btn):hover{transform:translateY(-1px)}
#klikwjp-app-container button:active{transform:translateY(0) scale(.985)}
#klikwjp-app-container button:focus-visible,#klikwjp-app-container a:focus-visible,#klikwjp-app-container input:focus-visible,#klikwjp-app-container select:focus-visible,#klikwjp-app-container textarea:focus-visible{outline:3px solid rgba(37,99,235,.25)!important;outline-offset:2px}

/* Content cards */
#klikwjp-app-container .rounded-xl,#klikwjp-app-container .rounded-2xl,#klikwjp-app-container .rounded-3xl{border-color:#e1e8f0}
#klikwjp-app-container .shadow,#klikwjp-app-container .shadow-md,#klikwjp-app-container .shadow-lg{box-shadow:0 12px 34px rgba(15,23,42,.065)!important}
#klikwjp-app-container .kwjp-sim-section{position:relative}
#klikwjp-app-container .kwjp-sim-section::before{content:"";display:block;position:absolute;left:50%;top:0;width:min(82%,980px);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#dbe5f0,transparent);opacity:.8}

/* Results / KPI emphasis */
#klikwjp-app-container #results .card,
#klikwjp-app-container #depositResults .card,
#klikwjp-app-container #savingsResults .card{
  border:1px solid #dfe7f1!important;border-radius:18px!important;background:linear-gradient(180deg,#fff,#f9fbfd)!important;
  box-shadow:0 12px 30px rgba(15,23,42,.055)!important;
}
#klikwjp-app-container #results [class*="text-3xl"],#klikwjp-app-container #results [class*="text-4xl"]{letter-spacing:-.045em;font-weight:850}
#klikwjp-app-container .progress-bar{height:8px!important;border-radius:999px!important;overflow:hidden;background:#e8eef5!important;box-shadow:inset 0 1px 2px rgba(15,23,42,.05)}
#klikwjp-app-container .progress-bar>div{border-radius:999px!important;box-shadow:0 0 12px rgba(37,99,235,.22)}

/* Tables */
#klikwjp-app-container table{border-collapse:separate!important;border-spacing:0!important;width:100%}
#klikwjp-app-container thead th{background:#f5f8fc!important;color:#334155!important;font-size:11px!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.055em;border-bottom:1px solid #dbe4ee!important}
#klikwjp-app-container tbody td{border-bottom:1px solid #edf1f5!important;color:#475569}
#klikwjp-app-container tbody tr{transition:background .16s ease}
#klikwjp-app-container tbody tr:hover{background:#f8fbff!important}

/* Collection / Penagihan V4 */
#klikwjp-app-container #penagihan .pc-hero{border-radius:30px!important;box-shadow:0 28px 70px rgba(15,23,42,.20)!important;background:linear-gradient(135deg,#07162f 0%,#0e315d 58%,#075a78 100%)!important}
#klikwjp-app-container #penagihan .pc-hero-copy h1{letter-spacing:-.045em!important;font-weight:850!important}
#klikwjp-app-container #penagihan .pc-hero-copy p{line-height:1.7!important}
#klikwjp-app-container #penagihan .pc-hero-panel{border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.075)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 22px 50px rgba(0,0,0,.15)!important}
#klikwjp-app-container #penagihan .pc-evidence-guide{box-shadow:0 14px 38px rgba(15,23,42,.065)!important}
#klikwjp-app-container #penagihan .pc-guide-item{transition:background .2s ease}
#klikwjp-app-container #penagihan .pc-guide-item:hover{background:#fff}

/* Modals / overlays */
#klikwjp-app-container [role="dialog"],#klikwjp-app-container .modal-content,#klikwjp-app-container .modal > div{
  border-radius:22px!important;box-shadow:0 30px 90px rgba(2,8,23,.24)!important;border:1px solid rgba(148,163,184,.22)!important;
}
#klikwjp-app-container [role="dialog"] input,#klikwjp-app-container [role="dialog"] select,#klikwjp-app-container [role="dialog"] textarea{background:#fff!important}

/* Empty / status / alert surfaces */
#klikwjp-app-container .alert,#klikwjp-app-container [class*="alert"],#klikwjp-app-container [class*="message"]{border-radius:14px}
#klikwjp-app-container .text-red-600,#klikwjp-app-container .text-red-500{font-weight:650}

/* Mobile: premium without oversized cards */
@media(max-width:767px){
  #klikwjp-app-container section{scroll-margin-top:76px}
  #klikwjp-app-container .kwjp-hero{min-height:auto!important;border-radius:22px!important;padding:30px 21px!important}
  #klikwjp-app-container .kwjp-hero h1{font-size:clamp(35px,10vw,48px)!important;line-height:1.02!important}
  #klikwjp-app-container .kwjp-hero p{font-size:14px!important;line-height:1.62!important}
  #klikwjp-app-container .kwjp-hero-actions{display:grid!important;grid-template-columns:1fr!important}
  #klikwjp-app-container .kwjp-hero-btn{width:100%!important;justify-content:center}
  #klikwjp-app-container .kwjp-hero-orbit{transform:scale(.8);opacity:.55}
  #klikwjp-app-container .kwjp-sim-hero{border-radius:20px!important;padding:25px 19px!important}
  #klikwjp-app-container .kwjp-sim-hero-art{display:none}
  #klikwjp-app-container input,#klikwjp-app-container select,#klikwjp-app-container textarea{font-size:16px!important;min-height:48px}
  #klikwjp-app-container label{font-size:13px}
  #klikwjp-app-container .pc-hero{border-radius:22px!important}
  #klikwjp-app-container #penagihan .pc-hero-panel{display:none}
  #klikwjp-app-container table{min-width:620px}
  #klikwjp-app-container .overflow-x-auto{border-radius:14px;border:1px solid #e3eaf2;background:#fff}
}
@media(max-width:390px){
  #klikwjp-app-container .kwjp-hero{padding:26px 17px!important}
  #klikwjp-app-container .kwjp-hero h1{font-size:34px!important}
  #klikwjp-app-container .kwjp-hero-badge{font-size:9px!important}
  #klikwjp-app-container .kwjp-sim-hero{padding:22px 16px!important}
}

/* Dark mode — retain contrast and premium depth */
.dark #klikwjp-app-container,
#klikwjp-app-container.dark{
  --v4-ink:#f1f5f9;--v4-muted:#94a3b8;--v4-line:#26354b;--v4-surface:#0f172a;--v4-soft:#111c2e;--v4-soft-2:#17243a
}
.dark #klikwjp-app-container input,.dark #klikwjp-app-container select,.dark #klikwjp-app-container textarea,
#klikwjp-app-container.dark input,#klikwjp-app-container.dark select,#klikwjp-app-container.dark textarea{background:#0f172a!important;color:#e5edf7!important;border-color:#334155!important}
.dark #klikwjp-app-container input:focus,.dark #klikwjp-app-container select:focus,.dark #klikwjp-app-container textarea:focus,
#klikwjp-app-container.dark input:focus,#klikwjp-app-container.dark select:focus,#klikwjp-app-container.dark textarea:focus{background:#101b2e!important;border-color:#60a5fa!important}
.dark #klikwjp-app-container thead th,#klikwjp-app-container.dark thead th{background:#152238!important;color:#cbd5e1!important;border-color:#2b3a50!important}
.dark #klikwjp-app-container tbody td,#klikwjp-app-container.dark tbody td{border-color:#223047!important;color:#cbd5e1}
.dark #klikwjp-app-container tbody tr:hover,#klikwjp-app-container.dark tbody tr:hover{background:#132136!important}
.dark #klikwjp-app-container #results .card,.dark #klikwjp-app-container #depositResults .card,.dark #klikwjp-app-container #savingsResults .card,
#klikwjp-app-container.dark #results .card,#klikwjp-app-container.dark #depositResults .card,#klikwjp-app-container.dark #savingsResults .card{background:linear-gradient(180deg,#111c2e,#0e1828)!important;border-color:#29384d!important}
.dark #klikwjp-app-container .pc-evidence-guide{background:#101a2b!important;border-color:#29384d!important}
.dark #klikwjp-app-container .pc-guide-head{background:linear-gradient(180deg,#152238,#111c2e)!important;border-color:#29384d!important}
.dark #klikwjp-app-container .pc-guide-title-row strong,.dark #klikwjp-app-container .pc-guide-copy strong{color:#e2e8f0!important}
.dark #klikwjp-app-container .pc-guide-heading p,.dark #klikwjp-app-container .pc-guide-copy p{color:#94a3b8!important}

/* Motion discipline */
@media(prefers-reduced-motion:reduce){
  #klikwjp-app-container *,#klikwjp-app-container *::before,#klikwjp-app-container *::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}


/* ===== kwjp-penagihan-mobile-v7 (source block 8) ===== */

/* KLIKWJP PENAGIHAN V7 — MOBILE SINGLE-COLUMN PREMIUM
   Mobile: one field per row for maximum breathing room and readability.
   Functionality/IDs/JS/API are untouched. */
@media (max-width: 767px){
  #klikwjp-app-container #penagihan .pc-form{
    width:100%!important;
    max-width:100%!important;
    gap:14px!important;
  }

  #klikwjp-app-container #penagihan .pc-card{
    width:100%!important;
    padding:18px!important;
    border-radius:18px!important;
  }

  /* EVERY FIELD = ONE FULL ROW */
  #klikwjp-app-container #penagihan .pc-fields.pc-grid-2,
  #klikwjp-app-container #penagihan .pc-dynamic-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
  }

  #klikwjp-app-container #penagihan .pc-grid-2 > .pc-field,
  #klikwjp-app-container #penagihan .pc-dynamic-grid > *{
    grid-column:1/-1!important;
    width:100%!important;
    min-width:0!important;
  }

  #klikwjp-app-container #penagihan .pc-span-2{
    grid-column:1/-1!important;
  }

  /* More breathing room between label and input */
  #klikwjp-app-container #penagihan .pc-field label,
  #klikwjp-app-container #penagihan .pc-status-box>label{
    margin-bottom:6px!important;
    font-size:.68rem!important;
  }

  #klikwjp-app-container #penagihan .pc-input{
    min-height:50px!important;
    border-radius:13px!important;
  }

  #klikwjp-app-container #penagihan .pc-input input,
  #klikwjp-app-container #penagihan .pc-input select,
  #klikwjp-app-container #penagihan .pc-input textarea{
    min-height:48px!important;
    font-size:16px!important;
  }

  #klikwjp-app-container #penagihan .pc-input textarea{
    min-height:112px!important;
  }

  /* GPS/address stays elegant while occupying the full row */
  #klikwjp-app-container #penagihan .kwjp-address-wrap{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:stretch!important;
  }

  #klikwjp-app-container #penagihan .kwjp-address-field{
    min-width:0!important;
  }

  #klikwjp-app-container #penagihan .kwjp-gps-btn{
    min-width:58px!important;
    min-height:50px!important;
    border-radius:13px!important;
  }

  /* Keep section headers premium but compact */
  #klikwjp-app-container #penagihan .pc-card-head{
    gap:10px!important;
    padding-bottom:14px!important;
    margin-bottom:16px!important;
  }

  #klikwjp-app-container #penagihan .pc-index{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
    border-radius:11px!important;
    font-size:.66rem!important;
  }

  #klikwjp-app-container #penagihan .pc-card-head h3{
    font-size:.95rem!important;
  }

  #klikwjp-app-container #penagihan .pc-card-head p{
    font-size:.63rem!important;
    line-height:1.45!important;
  }

  /* Status panel and dynamic result remain single-column */
  #klikwjp-app-container #penagihan .pc-status-box{
    padding:15px!important;
    border-radius:14px!important;
  }

  #klikwjp-app-container #penagihan #dynamicForms{
    margin-top:12px!important;
  }

  #klikwjp-app-container #penagihan .pc-dynamic{
    padding:15px!important;
    border-radius:15px!important;
  }

  /* Submit area: clean vertical hierarchy */
  #klikwjp-app-container #penagihan .pc-submit-card{
    width:100%!important;
    padding:18px!important;
    border-radius:18px!important;
    gap:14px!important;
  }

  #klikwjp-app-container #penagihan .pc-submit-side{
    width:100%!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }

  #klikwjp-app-container #penagihan .pc-submit-card button{
    width:100%!important;
    min-height:54px!important;
    justify-content:center!important;
  }
}

@media (max-width:390px){
  #klikwjp-app-container #penagihan .pc-card{
    padding:15px!important;
    border-radius:16px!important;
  }

  #klikwjp-app-container #penagihan .pc-fields.pc-grid-2,
  #klikwjp-app-container #penagihan .pc-dynamic-grid{
    gap:12px!important;
  }

  #klikwjp-app-container #penagihan .pc-card-head p{
    max-width:235px!important;
  }

  #klikwjp-app-container #penagihan .kwjp-gps-btn{
    min-width:54px!important;
  }
}


/* ===== kwjp-penagihan-v5-max (source block 9) ===== */

/* KLIKWJP PENAGIHAN V5 — MAXIMUM PREMIUM RESPONSIVE FORM LAYER
   Visual/UX only. Existing IDs, API, JavaScript and handlers are preserved. */
#klikwjp-app-container #penagihan{--pc-navy:#0b2442;--pc-blue:#1769aa;--pc-cyan:#16a7c7;--pc-ink:#17283d;--pc-muted:#718096;--pc-line:#e4e9f0;--pc-soft:#f6f9fc;--pc-green:#16835e;max-width:100%!important;overflow-x:clip!important}
#klikwjp-app-container #penagihan .pc-form{width:100%;max-width:920px;margin-inline:auto;gap:20px!important}
#klikwjp-app-container #penagihan .pc-card{position:relative;border:1px solid var(--pc-line)!important;background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%)!important;box-shadow:0 18px 50px rgba(15,35,60,.075)!important;border-radius:24px!important}
#klikwjp-app-container #penagihan .pc-card:after{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
#klikwjp-app-container #penagihan .pc-card-head{align-items:center!important;margin-bottom:22px!important;padding-bottom:18px!important}
#klikwjp-app-container #penagihan .pc-index{width:44px!important;height:44px!important;flex-basis:44px!important;border-radius:13px!important;background:linear-gradient(135deg,#edf5fc,#e2eff9)!important;box-shadow:inset 0 1px 0 #fff,0 7px 18px rgba(23,105,170,.08)}
#klikwjp-app-container #penagihan .pc-card-head h3{font-size:1.05rem!important;color:var(--pc-ink)!important}
#klikwjp-app-container #penagihan .pc-card-head p{max-width:650px!important}
#klikwjp-app-container #penagihan .pc-fields{gap:18px!important}
#klikwjp-app-container #penagihan .pc-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#klikwjp-app-container #penagihan .pc-field{min-width:0!important}
#klikwjp-app-container #penagihan .pc-field label,#klikwjp-app-container #penagihan .pc-status-box>label{font-size:.68rem!important;letter-spacing:.045em!important;color:#536579!important}
#klikwjp-app-container #penagihan .pc-input{width:100%!important;min-height:52px!important;border:1px solid #d9e1e9!important;border-radius:14px!important;background:#fff!important;box-shadow:0 2px 0 rgba(15,35,60,.015);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important}
#klikwjp-app-container #penagihan .pc-input:hover{border-color:#b9c9d8!important}
#klikwjp-app-container #penagihan .pc-input:focus-within{border-color:#4d8bb9!important;box-shadow:0 0 0 4px rgba(48,122,176,.10),0 8px 22px rgba(25,70,105,.06)!important;transform:translateY(-1px)}
#klikwjp-app-container #penagihan .pc-input>i{flex-basis:45px!important;color:#8093a6!important}
#klikwjp-app-container #penagihan .pc-input input,#klikwjp-app-container #penagihan .pc-input select,#klikwjp-app-container #penagihan .pc-input textarea{min-height:50px!important;font-size:15px!important;line-height:1.35!important;padding:13px 14px 13px 0!important;color:#203247!important}
#klikwjp-app-container #penagihan .pc-input textarea{min-height:108px!important;padding-top:14px!important}
#klikwjp-app-container #penagihan .pc-input input::placeholder,#klikwjp-app-container #penagihan .pc-input textarea::placeholder{color:#a2adba!important}
#klikwjp-app-container #penagihan .pc-status-box{padding:19px!important;border-radius:16px!important;background:linear-gradient(180deg,#f8fafc,#f3f7fa)!important;border:1px solid #e2e9ef!important}
#klikwjp-app-container #penagihan .pc-status-hint{font-size:.66rem!important;line-height:1.5!important}
#klikwjp-app-container #penagihan .pc-dynamic{border-radius:17px!important;padding:18px!important;box-shadow:0 8px 24px rgba(15,35,60,.035)}
#klikwjp-app-container #penagihan .pc-proof-actions{gap:10px!important}
#klikwjp-app-container #penagihan .pc-proof-actions button,#klikwjp-app-container #penagihan .pc-camera-action button{min-height:50px!important;border-radius:12px!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
#klikwjp-app-container #penagihan .pc-proof-actions button:hover,#klikwjp-app-container #penagihan .pc-camera-action button:hover{transform:translateY(-2px)!important;box-shadow:0 10px 22px rgba(20,55,85,.12)!important}
#klikwjp-app-container #penagihan .pc-camera-wrap{padding:14px!important;border-radius:17px!important;background:linear-gradient(180deg,#fafcfd,#f4f7fa)!important}
#klikwjp-app-container #penagihan .pc-camera-empty{min-height:270px!important;border-radius:13px!important;background:radial-gradient(circle at 50% 30%,#fff,#f2f6f9)!important}
#klikwjp-app-container #penagihan .pc-submit-card{margin-top:2px!important;border-radius:22px!important;padding:24px!important;background:linear-gradient(125deg,#071b35,#0d3158 62%,#0b5870)!important;box-shadow:0 22px 55px rgba(8,35,65,.18)!important}
#klikwjp-app-container #penagihan .pc-submit-card button{min-height:58px!important;border-radius:14px!important;padding-right:17px!important;transition:transform .18s ease,box-shadow .18s ease!important}
#klikwjp-app-container #penagihan .pc-submit-card button:hover{transform:translateY(-2px)!important;box-shadow:0 14px 30px rgba(0,0,0,.20)!important}
#klikwjp-app-container #penagihan .pc-success{border-radius:15px!important}
#klikwjp-app-container #penagihan button:focus-visible,#klikwjp-app-container #penagihan input:focus-visible,#klikwjp-app-container #penagihan select:focus-visible,#klikwjp-app-container #penagihan textarea:focus-visible{outline:3px solid rgba(22,126,184,.22)!important;outline-offset:2px}
/* tablet */
@media(max-width:900px){#klikwjp-app-container #penagihan .pc-form{max-width:100%!important}.pc-card{border-radius:20px!important}.pc-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.pc-submit-card{gap:18px!important}}
/* phone */
@media(max-width:640px){#klikwjp-app-container #penagihan{padding-left:10px!important;padding-right:10px!important}#klikwjp-app-container #penagihan .pc-form{gap:14px!important}.pc-card{padding:17px!important;border-radius:18px!important}.pc-card-head{align-items:flex-start!important;margin-bottom:17px!important}.pc-index{width:38px!important;height:38px!important;flex-basis:38px!important}.pc-card-head h3{font-size:.94rem!important}.pc-card-head p{font-size:.65rem!important}.pc-grid-2,.pc-dynamic-grid{grid-template-columns:1fr!important}.pc-secure{display:none!important}.pc-input{min-height:51px!important}.pc-input input,.pc-input select,.pc-input textarea{font-size:16px!important}.pc-input textarea{min-height:120px!important}.pc-status-box{padding:15px!important}.pc-submit-card{padding:18px!important;border-radius:18px!important}.pc-submit-side{width:100%!important;flex-direction:column!important;align-items:stretch!important}.pc-submit-card button{width:100%!important;justify-content:center!important}.pc-camera-empty{min-height:220px!important}.pc-proof-actions{grid-template-columns:1fr!important}}
@media(max-width:390px){#klikwjp-app-container #penagihan{padding-left:7px!important;padding-right:7px!important}.pc-card{padding:14px!important}.pc-card-head{gap:9px!important}.pc-card-head h3{font-size:.88rem!important}.pc-card-head p{font-size:.61rem!important}.pc-fields{gap:14px!important}.pc-input>i{flex-basis:40px!important}.pc-submit-card{padding:15px!important}.pc-submit-copy h3{font-size:.9rem!important}}
/* dark mode */
#klikwjp-app-container.dark #penagihan .pc-card{background:linear-gradient(180deg,#17202b,#141b24)!important;border-color:#2c3948!important;box-shadow:0 18px 50px rgba(0,0,0,.22)!important}
#klikwjp-app-container.dark #penagihan .pc-card-head h3{color:#f1f5f9!important}
#klikwjp-app-container.dark #penagihan .pc-input{background:#1b2530!important;border-color:#354352!important}
#klikwjp-app-container.dark #penagihan .pc-input input,#klikwjp-app-container.dark #penagihan .pc-input select,#klikwjp-app-container.dark #penagihan .pc-input textarea{color:#f1f5f9!important}
#klikwjp-app-container.dark #penagihan .pc-status-box{background:#141d27!important;border-color:#303c4a!important}
@media(prefers-reduced-motion:reduce){#klikwjp-app-container #penagihan *{scroll-behavior:auto!important;transition:none!important}}


/* ===== kwjp-penagihan-v6-submit-fix (source block 10) ===== */

/* V6 — compact visit guide + stable success workflow */
#klikwjp-app-container #penagihan .pc-evidence-guide{padding:12px 14px!important;border-radius:14px!important;margin-top:12px!important}
#klikwjp-app-container #penagihan .pc-guide-head{gap:9px!important}
#klikwjp-app-container #penagihan .pc-guide-icon{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:9px!important}
#klikwjp-app-container #penagihan .pc-guide-title-row{gap:7px!important}
#klikwjp-app-container #penagihan .pc-guide-title-row strong{font-size:.72rem!important}
#klikwjp-app-container #penagihan .pc-guide-badge{font-size:.48rem!important;padding:3px 6px!important}
#klikwjp-app-container #penagihan .pc-guide-heading>p{font-size:.6rem!important;line-height:1.35!important;margin-top:2px!important}
#klikwjp-app-container #penagihan .pc-guide-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px!important;margin-top:9px!important}
#klikwjp-app-container #penagihan .pc-guide-item{padding:7px 8px!important;border-radius:9px!important;gap:7px!important}
#klikwjp-app-container #penagihan .pc-guide-number{width:21px!important;height:21px!important;flex:0 0 21px!important;font-size:.5rem!important}
#klikwjp-app-container #penagihan .pc-guide-copy strong{font-size:.59rem!important}
#klikwjp-app-container #penagihan .pc-guide-copy p{font-size:.52rem!important;line-height:1.35!important;margin-top:1px!important}
.kwjp-success-popup{display:none}
.kwjp-success-popup.is-open{display:flex}
.kwjp-success-popup{position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center;padding:18px}
.kwjp-success-popup .kwjp-success-backdrop{position:absolute;inset:0;background:rgba(7,18,32,.72);backdrop-filter:blur(8px)}
.kwjp-success-popup .kwjp-success-dialog{position:relative;width:min(430px,100%);padding:30px 26px 24px;text-align:center;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:linear-gradient(145deg,#ffffff,#f5f8fb);box-shadow:0 30px 90px rgba(0,0,0,.32);animation:kwjpSuccessIn .24s ease-out}
.kwjp-success-popup .kwjp-success-mark{width:62px;height:62px;margin:0 auto 14px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(135deg,#dff8ec,#bdebd6);color:#13835c;font-size:1.35rem;box-shadow:0 12px 28px rgba(19,131,92,.15)}
.kwjp-success-popup .kwjp-success-eyebrow{display:block;color:#6f849a;font-size:.56rem;font-weight:850;letter-spacing:.16em;margin-bottom:7px}
.kwjp-success-popup h3{margin:0;color:#172b42;font-size:1.22rem;line-height:1.25;letter-spacing:-.025em}
.kwjp-success-popup p{margin:9px auto 20px;max-width:330px;color:#718094;font-size:.72rem;line-height:1.55}
.kwjp-success-popup .kwjp-success-ok{width:100%;min-height:48px;border:0;border-radius:12px;background:#173c63;color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-size:.7rem;font-weight:800;box-shadow:0 10px 24px rgba(23,60,99,.2);cursor:pointer}
.kwjp-success-popup .kwjp-success-ok i{font-size:.65rem}
.kwjp-success-popup .kwjp-success-ok:hover{transform:translateY(-1px)}
body.kwppjp-popup-open{overflow:hidden}
@keyframes kwjpSuccessIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
#klikwjp-app-container #penagihan .pc-submit-card button[aria-busy="true"]{cursor:wait;opacity:.92}
#klikwjp-app-container #penagihan .pc-submit-loading{background:#e9eef4!important;color:#315577!important}
#klikwjp-app-container #penagihan .pc-submit-success-icon{background:#dff5e9!important;color:#14825c!important}
@media(max-width:700px){#klikwjp-app-container #penagihan .pc-guide-list{grid-template-columns:1fr!important}.kwjp-success-popup{padding:14px}.kwjp-success-popup .kwjp-success-dialog{padding:25px 18px 18px;border-radius:20px}.kwjp-success-popup .kwjp-success-mark{width:54px;height:54px;border-radius:16px;font-size:1.15rem;margin-bottom:12px}.kwjp-success-popup h3{font-size:1.05rem}.kwjp-success-popup p{font-size:.68rem;margin-bottom:16px}}
@media(max-width:390px){#klikwjp-app-container #penagihan .pc-evidence-guide{padding:10px!important}.kwjp-success-popup .kwjp-success-dialog{padding:22px 15px 15px}.kwjp-success-popup h3{font-size:1rem}.kwjp-success-popup p{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.kwjp-success-popup .kwjp-success-dialog{animation:none!important}.kwjp-success-popup .kwjp-success-ok:hover{transform:none!important}}
.dark .kwjp-success-popup .kwjp-success-dialog,#klikwjp-app-container.dark .kwjp-success-popup .kwjp-success-dialog{background:linear-gradient(145deg,#1b2430,#121a24);border-color:#303b49}.dark .kwjp-success-popup h3,#klikwjp-app-container.dark .kwjp-success-popup h3{color:#f2f5f8}.dark .kwjp-success-popup p,#klikwjp-app-container.dark .kwjp-success-popup p{color:#9aa8b8}


/* ===== kwjp-penagihan-v6-gps (source block 11) ===== */

/* V6 GPS — responsive, touch friendly, no GAS changes */
#klikwjp-app-container #penagihan .kwjp-address-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch;width:100%}
#klikwjp-app-container #penagihan .kwjp-address-field{min-width:0;width:100%}
#klikwjp-app-container #penagihan .kwjp-gps-btn{position:relative;z-index:5;min-width:92px;min-height:52px;border:1px solid rgba(16,185,129,.35);border-radius:14px;background:linear-gradient(180deg,#ecfdf5,#dff8ed);color:#047857;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 15px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap;font-family:inherit}
#klikwjp-app-container #penagihan .kwjp-gps-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(16,185,129,.16)}
#klikwjp-app-container #penagihan .kwjp-gps-btn:active{transform:translateY(0) scale(.98)}
#klikwjp-app-container #penagihan .kwjp-gps-btn:focus-visible{outline:3px solid rgba(16,185,129,.28);outline-offset:2px}
#klikwjp-app-container #penagihan .kwjp-gps-btn:disabled{opacity:.7;cursor:wait;transform:none}
#klikwjp-app-container #penagihan .kwjp-gps-icon{font-size:19px;line-height:1}
#klikwjp-app-container #penagihan .kwjp-gps-label{font-size:12px;line-height:1}
#klikwjp-app-container #penagihan .kwjp-gps-status{min-height:18px;margin:6px 2px 0;font-size:11px;font-weight:700;line-height:1.45;color:#64748b}
#klikwjp-app-container #penagihan .kwjp-gps-status.success{color:#059669}
#klikwjp-app-container #penagihan .kwjp-gps-status.error{color:#dc2626}
#klikwjp-app-container #penagihan .kwjp-gps-status.loading{color:#2563eb}
#klikwjp-app-container #penagihan .kwjp-gps-btn.is-loading .kwjp-gps-icon{animation:kwjpGpsSpin 1s linear infinite}
@keyframes kwjpGpsSpin{to{transform:rotate(360deg)}}
.dark-mode #klikwjp-app-container #penagihan .kwjp-gps-btn,#klikwjp-app-container.dark #penagihan .kwjp-gps-btn{color:#6ee7b7;background:linear-gradient(180deg,rgba(16,185,129,.14),rgba(16,185,129,.07));border-color:rgba(110,231,183,.25)}
.dark-mode #klikwjp-app-container #penagihan .kwjp-gps-status,#klikwjp-app-container.dark #penagihan .kwjp-gps-status{color:#94a3b8}
@media(max-width:900px){#klikwjp-app-container #penagihan .pc-form{width:100%;max-width:none}#klikwjp-app-container #penagihan .pc-grid-2{grid-template-columns:1fr}#klikwjp-app-container #penagihan .pc-span-2{grid-column:auto}}
@media(max-width:700px){#klikwjp-app-container #penagihan .kwjp-address-wrap{gap:7px}#klikwjp-app-container #penagihan .kwjp-gps-btn{min-width:70px;min-height:50px;padding:0 12px;border-radius:12px}#klikwjp-app-container #penagihan .kwjp-gps-label{font-size:11px}#klikwjp-app-container #penagihan .kwjp-gps-status{font-size:10px;margin-top:4px}#klikwjp-app-container #penagihan .pc-card{border-radius:18px}}
@media(max-width:430px){#klikwjp-app-container #penagihan .kwjp-address-wrap{grid-template-columns:minmax(0,1fr) 58px;gap:6px}#klikwjp-app-container #penagihan .kwjp-gps-btn{min-width:58px;width:58px;padding:0;border-radius:11px}#klikwjp-app-container #penagihan .kwjp-gps-label{display:none}#klikwjp-app-container #penagihan .kwjp-gps-icon{font-size:20px}#klikwjp-app-container #penagihan .kwjp-gps-status{font-size:9.5px;line-height:1.35}}
@media(max-width:360px){#klikwjp-app-container #penagihan .kwjp-address-wrap{grid-template-columns:minmax(0,1fr) 52px}#klikwjp-app-container #penagihan .kwjp-gps-btn{width:52px;min-width:52px}#klikwjp-app-container #penagihan .kwjp-gps-icon{font-size:18px}}
@media(prefers-reduced-motion:reduce){#klikwjp-app-container #penagihan .kwjp-gps-btn{transition:none}#klikwjp-app-container #penagihan .kwjp-gps-btn.is-loading .kwjp-gps-icon{animation:none}}


/* ===== kwjp-penagihan-v6-gps-final (source block 12) ===== */

#klikwjp-app-container #penagihan .kwjp-address-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;width:100%;align-items:stretch}
#klikwjp-app-container #penagihan .kwjp-address-field{min-width:0;width:100%}
#klikwjp-app-container #penagihan .kwjp-address-field textarea{width:100%;min-width:0;resize:vertical}
#klikwjp-app-container #penagihan .kwjp-gps-btn{position:relative;z-index:20;pointer-events:auto;touch-action:manipulation;user-select:none;-webkit-user-select:none;min-width:82px;min-height:48px;border:1px solid rgba(16,185,129,.32);border-radius:14px;background:linear-gradient(180deg,#ecfdf5,#dff8ec);color:#047857;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 15px;cursor:pointer;box-shadow:0 5px 14px rgba(16,185,129,.08);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
#klikwjp-app-container #penagihan .kwjp-gps-btn:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(16,185,129,.14)}
#klikwjp-app-container #penagihan .kwjp-gps-btn:active{transform:translateY(0) scale(.98)}
#klikwjp-app-container #penagihan .kwjp-gps-btn:disabled{opacity:.72;cursor:wait;transform:none}
#klikwjp-app-container #penagihan .kwjp-gps-btn:focus-visible{outline:3px solid rgba(16,185,129,.25);outline-offset:2px}
#klikwjp-app-container #penagihan .kwjp-gps-icon{font-size:20px;line-height:1}
#klikwjp-app-container #penagihan .kwjp-gps-status{min-height:18px;margin:6px 2px 0;font-size:11px;line-height:1.4;font-weight:700}
#klikwjp-app-container #penagihan .kwjp-gps-status.loading{color:#2563eb}
#klikwjp-app-container #penagihan .kwjp-gps-status.success{color:#059669}
#klikwjp-app-container #penagihan .kwjp-gps-status.error{color:#dc2626}
#klikwjp-app-container #penagihan .pc-form{width:100%;max-width:960px;margin-left:auto;margin-right:auto}
#klikwjp-app-container #penagihan .pc-card{width:100%;box-sizing:border-box}
#klikwjp-app-container #penagihan input,#klikwjp-app-container #penagihan select,#klikwjp-app-container #penagihan textarea,#klikwjp-app-container #penagihan button{box-sizing:border-box}
@media(max-width:900px){#klikwjp-app-container #penagihan .pc-form{max-width:100%}}
@media(max-width:640px){#klikwjp-app-container #penagihan .kwjp-address-wrap{grid-template-columns:minmax(0,1fr) 64px;gap:7px}#klikwjp-app-container #penagihan .kwjp-gps-btn{min-width:64px;min-height:46px;padding:0 8px;border-radius:12px}#klikwjp-app-container #penagihan .kwjp-gps-label{font-size:10px}#klikwjp-app-container #penagihan .kwjp-gps-icon{font-size:18px}#klikwjp-app-container #penagihan .kwjp-gps-status{font-size:10px}}
@media(max-width:390px){#klikwjp-app-container #penagihan .kwjp-address-wrap{grid-template-columns:minmax(0,1fr) 52px;gap:6px}#klikwjp-app-container #penagihan .kwjp-gps-btn{min-width:52px;padding:0 7px}#klikwjp-app-container #penagihan .kwjp-gps-label{display:none}#klikwjp-app-container #penagihan .kwjp-gps-icon{font-size:20px}}
@media(pointer:coarse){#klikwjp-app-container #penagihan .kwjp-gps-btn{min-height:50px}}
#klikwjp-app-container.dark .kwjp-gps-btn,.dark #klikwjp-app-container .kwjp-gps-btn{background:rgba(16,185,129,.12);color:#6ee7b7;border-color:rgba(110,231,183,.24)}


/* ===== kwjp-visit-camera-v2 (source block 13) ===== */

/* =========================================================
   KLIKWJP — VISIT CAMERA V2
   Rear camera default + front/selfie switch
   Only affects #cameraModal / Foto Kunjungan.
   ========================================================= */
#klikwjp-app-container #cameraModal.pc-camera-modal{
    background:rgba(3,10,20,.82)!important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
#klikwjp-app-container #cameraModal .pc-visit-camera-card{
    width:min(620px,100%);
    padding:16px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    background:#f8fafc;
    box-shadow:0 30px 90px rgba(0,0,0,.42);
}
#klikwjp-app-container #cameraModal .pc-modal-head{margin-bottom:12px}
#klikwjp-app-container #cameraModal .pc-modal-head h3{font-weight:850;letter-spacing:-.025em}
#klikwjp-app-container #cameraModal .pc-camera-status{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:9px 11px;margin-bottom:10px;border:1px solid #e1e7ee;border-radius:11px;background:#fff;
}
#klikwjp-app-container #cameraModal .pc-camera-status-left{display:flex;align-items:center;gap:8px}
#klikwjp-app-container #cameraModal .pc-camera-status-left>span:last-child{font-size:.63rem;font-weight:850;letter-spacing:.08em;color:#30445b}
#klikwjp-app-container #cameraModal .pc-camera-status-dot{width:7px;height:7px;border-radius:50%;background:#35c98a;box-shadow:0 0 0 4px rgba(53,201,138,.12),0 0 12px rgba(53,201,138,.55)}
#klikwjp-app-container #cameraModal .pc-camera-status-info{font-size:.58rem;font-weight:650;color:#94a0af}
#klikwjp-app-container #cameraModal .pc-camera-viewport{position:relative;overflow:hidden;width:100%;height:min(62vh,520px);min-height:320px;border-radius:16px;background:#07111d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 15px 35px rgba(0,0,0,.16)}
#klikwjp-app-container #cameraModal .pc-camera-viewport video{display:block;width:100%;height:100%;object-fit:cover;background:#07111d;border-radius:16px}
#klikwjp-app-container #cameraModal .pc-camera-viewport video.pc-camera-selfie{transform:scaleX(-1)}
#klikwjp-app-container #cameraModal .pc-camera-guide{position:absolute;inset:18px;pointer-events:none}
#klikwjp-app-container #cameraModal .pc-guide-corner{position:absolute;width:34px;height:34px;border:0 solid rgba(255,255,255,.78)}
#klikwjp-app-container #cameraModal .pc-guide-corner.top-left{top:0;left:0;border-top-width:2px;border-left-width:2px;border-radius:6px 0 0 0}
#klikwjp-app-container #cameraModal .pc-guide-corner.top-right{top:0;right:0;border-top-width:2px;border-right-width:2px;border-radius:0 6px 0 0}
#klikwjp-app-container #cameraModal .pc-guide-corner.bottom-left{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px;border-radius:0 0 0 6px}
#klikwjp-app-container #cameraModal .pc-guide-corner.bottom-right{right:0;bottom:0;border-bottom-width:2px;border-right-width:2px;border-radius:0 0 6px 0}
#klikwjp-app-container #cameraModal .pc-camera-live{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:rgba(7,17,29,.62);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);color:#fff;font-size:.55rem;font-weight:850;letter-spacing:.08em}
#klikwjp-app-container #cameraModal .pc-camera-live span{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px rgba(74,222,128,.9)}
#klikwjp-app-container #cameraModal .pc-camera-controls{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;margin-top:12px}
#klikwjp-app-container #cameraModal .pc-camera-switch{display:flex;align-items:center;gap:10px;min-height:54px;padding:7px 11px;border:1px solid #dce3ea;border-radius:13px;background:#fff;color:#31465e;text-align:left;transition:all .2s ease}
#klikwjp-app-container #cameraModal .pc-camera-switch:hover{transform:translateY(-1px);border-color:#b9c8d7;box-shadow:0 8px 20px rgba(20,50,80,.08)}
#klikwjp-app-container #cameraModal .pc-camera-switch:disabled{opacity:.6;cursor:wait}
#klikwjp-app-container #cameraModal .pc-camera-switch.is-switching .pc-camera-switch-icon i{animation:kwjpCameraRotate .7s linear infinite}
@keyframes kwjpCameraRotate{to{transform:rotate(360deg)}}
#klikwjp-app-container #cameraModal .pc-camera-switch-icon{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:10px;background:#edf3f8;color:#234f76;font-size:.85rem}
#klikwjp-app-container #cameraModal .pc-camera-switch b,#klikwjp-app-container #cameraModal .pc-camera-switch small{display:block}
#klikwjp-app-container #cameraModal .pc-camera-switch b{font-size:.66rem;font-weight:850}
#klikwjp-app-container #cameraModal .pc-camera-switch small{margin-top:2px;color:#8b98a8;font-size:.55rem}
#klikwjp-app-container #cameraModal .pc-camera-capture{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:108px;min-height:65px;padding:5px 13px;border:0;border-radius:14px;background:#173c63;color:#fff;box-shadow:0 9px 22px rgba(23,60,99,.2);font-size:.61rem;font-weight:850;transition:all .2s ease}
#klikwjp-app-container #cameraModal .pc-camera-capture:hover{transform:translateY(-2px);box-shadow:0 13px 27px rgba(23,60,99,.28)}
#klikwjp-app-container #cameraModal .pc-capture-ring{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25)}
#klikwjp-app-container #cameraModal .pc-camera-hint{display:flex;align-items:flex-start;gap:7px;margin-top:9px;padding:9px 11px;border-radius:10px;background:#f1f5f9;color:#8290a0;font-size:.58rem;line-height:1.5}
#klikwjp-app-container #cameraModal .pc-camera-hint i{margin-top:2px;color:#7895ae}
#klikwjp-app-container #cameraModal .pc-camera-hint b{color:#536a82}
#klikwjp-app-container #cameraModal .pc-camera-close-row{display:flex;justify-content:flex-end;margin-top:9px}
#klikwjp-app-container.dark #cameraModal .pc-visit-camera-card{background:#171d26}
#klikwjp-app-container.dark #cameraModal .pc-camera-status{background:#1d2530;border-color:#35404f}
#klikwjp-app-container.dark #cameraModal .pc-camera-status-left>span:last-child{color:#e5ebf2}
#klikwjp-app-container.dark #cameraModal .pc-camera-switch{background:#1d2530;border-color:#35404f;color:#e4ebf2}
#klikwjp-app-container.dark #cameraModal .pc-camera-switch-icon{background:#273444;color:#9dc2e3}
#klikwjp-app-container.dark #cameraModal .pc-camera-hint{background:#202833;color:#9ca9b8}
@media(max-width:640px){
    #klikwjp-app-container #cameraModal{padding:8px!important}
    #klikwjp-app-container #cameraModal .pc-visit-camera-card{padding:10px;border-radius:18px;width:100%;max-height:calc(100vh - 16px);overflow:auto}
    #klikwjp-app-container #cameraModal .pc-camera-status-info{display:none}
    #klikwjp-app-container #cameraModal .pc-camera-viewport{height:min(63vh,520px);min-height:270px;border-radius:14px}
    #klikwjp-app-container #cameraModal .pc-camera-viewport video{border-radius:14px}
    #klikwjp-app-container #cameraModal .pc-camera-guide{inset:12px}
    #klikwjp-app-container #cameraModal .pc-guide-corner{width:27px;height:27px}
    #klikwjp-app-container #cameraModal .pc-camera-controls{grid-template-columns:1fr 1fr;gap:8px}
    #klikwjp-app-container #cameraModal .pc-camera-switch{min-height:54px;padding:7px 9px}
    #klikwjp-app-container #cameraModal .pc-camera-switch-icon{width:32px;height:32px;flex-basis:32px}
    #klikwjp-app-container #cameraModal .pc-camera-switch b{font-size:.61rem}
    #klikwjp-app-container #cameraModal .pc-camera-switch small{font-size:.51rem}
    #klikwjp-app-container #cameraModal .pc-camera-capture{min-width:0;min-height:54px}
    #klikwjp-app-container #cameraModal .pc-camera-close-row{justify-content:stretch}
    #klikwjp-app-container #cameraModal .pc-camera-close-row button{width:100%}
}


/* ===== kwjp-premium-v2 (source block 14) ===== */

/* =========================================================
   KLIKWJP PREMIUM V2
   UI/UX-only layer: preserves existing IDs, handlers & logic.
   ========================================================= */
#klikwjp-app-container{
    --p2-ink:#111827;
    --p2-muted:#667085;
    --p2-line:rgba(15,23,42,.09);
    --p2-purple:#635bff;
    --p2-purple-deep:#4f46e5;
    --p2-cyan:#22d3ee;
    --p2-shadow:0 18px 50px rgba(15,23,42,.075);
}

/* Global interaction polish */
#klikwjp-app-container button,
#klikwjp-app-container a{
    -webkit-tap-highlight-color:transparent;
}
#klikwjp-app-container button:not(:disabled),
#klikwjp-app-container a{
    cursor:pointer;
}
#klikwjp-app-container button:not(.theme-toggle):not(#mobileMenuBtn),
#klikwjp-app-container a{
    transition:
        transform .20s cubic-bezier(.2,.8,.2,1),
        box-shadow .20s ease,
        border-color .20s ease,
        background .20s ease,
        color .20s ease,
        filter .20s ease;
}
#klikwjp-app-container button:focus-visible,
#klikwjp-app-container a:focus-visible,
#klikwjp-app-container input:focus-visible,
#klikwjp-app-container select:focus-visible,
#klikwjp-app-container textarea:focus-visible{
    outline:3px solid rgba(99,91,255,.22);
    outline-offset:3px;
}

/* Header: cleaner premium glass */
#klikwjp-app-container header{
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 34px rgba(15,12,35,.20);
}
#klikwjp-app-container header nav > a,
#klikwjp-app-container header nav > div > button{
    position:relative;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    gap:7px;
}
#klikwjp-app-container header nav > a::after,
#klikwjp-app-container header nav > div > button::after{
    content:"";
    position:absolute;
    left:11px;
    right:11px;
    bottom:4px;
    height:2px;
    border-radius:99px;
    background:linear-gradient(90deg,#a78bfa,#67e8f9);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .2s ease;
}
#klikwjp-app-container header nav > a:hover::after,
#klikwjp-app-container header nav > div > button:hover::after{
    transform:scaleX(1);
}

/* Main hero */
#klikwjp-app-container .kwjp-hero{
    border:1px solid rgba(255,255,255,.10);
    box-shadow:
        0 30px 80px rgba(42,30,100,.25),
        inset 0 1px 0 rgba(255,255,255,.10);
}
#klikwjp-app-container .kwjp-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(115deg,transparent 0%,rgba(255,255,255,.045) 42%,transparent 62%);
    z-index:0;
}
#klikwjp-app-container .kwjp-hero-badge{
    position:relative;
    border-color:rgba(255,255,255,.18);
    background:rgba(255,255,255,.105);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.10);
}

/* Homepage hero CTA = premium navigation chips */
#klikwjp-app-container .kwjp-hero-actions{
    align-items:stretch;
}
#klikwjp-app-container .kwjp-hero-link{
    position:relative;
    min-width:190px;
    min-height:52px;
    padding:0 17px!important;
    overflow:hidden;
    text-decoration:none!important;
    letter-spacing:-.01em;
    isolation:isolate;
}
#klikwjp-app-container .kwjp-hero-link::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.24) 50%,transparent 80%);
    transform:translateX(-130%);
    transition:transform .55s ease;
    z-index:-1;
}
#klikwjp-app-container .kwjp-hero-link:hover::before{
    transform:translateX(130%);
}
#klikwjp-app-container .kwjp-hero-link:hover{
    transform:translateY(-3px);
}
#klikwjp-app-container .kwjp-hero-link:active{
    transform:translateY(-1px) scale(.985);
}
#klikwjp-app-container .kwjp-hero-btn-primary{
    background:linear-gradient(180deg,#fff 0%,#f4f2ff 100%)!important;
    border-color:rgba(255,255,255,.78)!important;
    box-shadow:0 14px 30px rgba(0,0,0,.20),inset 0 1px 0 #fff;
}
#klikwjp-app-container .kwjp-hero-btn-secondary{
    background:rgba(255,255,255,.10)!important;
    border-color:rgba(255,255,255,.24)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter:blur(14px);
}
#klikwjp-app-container .kwjp-hero-btn-secondary:hover{
    background:rgba(255,255,255,.17)!important;
    border-color:rgba(255,255,255,.36)!important;
}
#klikwjp-app-container .kwjp-action-icon{
    width:25px;
    height:25px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    font-size:.85rem;
    font-weight:900;
    background:rgba(99,91,255,.11);
}
#klikwjp-app-container .kwjp-hero-btn-secondary .kwjp-action-icon{
    background:rgba(255,255,255,.11);
}
#klikwjp-app-container .kwjp-btn-arrow{
    margin-left:auto;
    transition:transform .2s ease;
}
#klikwjp-app-container .kwjp-hero-link:hover .kwjp-btn-arrow{
    transform:translateX(4px);
}

/* Homepage service cards */
#klikwjp-app-container #home .grid > div{
    border-color:rgba(15,23,42,.075)!important;
    box-shadow:0 10px 30px rgba(15,23,42,.055),inset 0 1px 0 #fff!important;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
#klikwjp-app-container #home .grid > div:hover{
    transform:translateY(-7px);
    box-shadow:0 22px 48px rgba(15,23,42,.105),inset 0 1px 0 #fff!important;
}
#klikwjp-app-container #home .grid > div > div{
    box-shadow:0 10px 22px rgba(15,23,42,.07);
}

/* All content cards */
#klikwjp-app-container section:not(#home) .bg-white,
#klikwjp-app-container section:not(#home) .bg-gray-50{
    box-shadow:var(--p2-shadow)!important;
    border-color:var(--p2-line)!important;
}
#klikwjp-app-container section:not(#home) .bg-white:hover,
#klikwjp-app-container section:not(#home) .bg-gray-50:hover{
    border-color:rgba(99,91,255,.15)!important;
}

/* Buttons across the app: consistent premium language */
#klikwjp-app-container button:not(.theme-toggle):not(#mobileMenuBtn){
    min-height:42px;
    font-weight:750;
    border:1px solid transparent;
}
#klikwjp-app-container button.bg-blue-600,
#klikwjp-app-container button.bg-green-600,
#klikwjp-app-container button.bg-purple-600{
    background-image:linear-gradient(135deg,#635bff,#4f46e5)!important;
    box-shadow:0 10px 22px rgba(79,70,229,.19)!important;
}
#klikwjp-app-container button.bg-blue-600:hover,
#klikwjp-app-container button.bg-green-600:hover,
#klikwjp-app-container button.bg-purple-600:hover{
    filter:brightness(1.04);
    transform:translateY(-2px);
    box-shadow:0 15px 28px rgba(79,70,229,.25)!important;
}
#klikwjp-app-container button.bg-blue-600:active,
#klikwjp-app-container button.bg-green-600:active,
#klikwjp-app-container button.bg-purple-600:active{
    transform:translateY(0) scale(.985);
}

/* Tables and result panels */
#klikwjp-app-container table{
    box-shadow:0 10px 28px rgba(15,23,42,.045);
}
#klikwjp-app-container table thead{
    background:linear-gradient(180deg,#fafaff,#f5f6fa)!important;
}
#klikwjp-app-container table tbody tr{
    transition:background .16s ease,transform .16s ease;
}

/* Form controls */
#klikwjp-app-container input,
#klikwjp-app-container select,
#klikwjp-app-container textarea{
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease!important;
}
#klikwjp-app-container input:hover,
#klikwjp-app-container select:hover,
#klikwjp-app-container textarea:hover{
    border-color:#c9c5ef!important;
    background:#fff!important;
}

/* Dark mode */
#klikwjp-app-container.dark .kwjp-hero-btn-primary{
    color:#21183f!important;
}
#klikwjp-app-container.dark section:not(#home) .bg-white:hover,
#klikwjp-app-container.dark section:not(#home) .bg-gray-50:hover{
    border-color:rgba(139,92,246,.30)!important;
}
#klikwjp-app-container.dark #home .grid > div{
    box-shadow:0 16px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03)!important;
}

/* Mobile: preserve touch targets and avoid cramped hero */
@media(max-width:767px){
    #klikwjp-app-container .kwjp-hero-actions{
        gap:10px;
    }
    #klikwjp-app-container .kwjp-hero-link{
        min-width:0;
        min-height:50px;
    }
}
@media(max-width:380px){
    #klikwjp-app-container .kwjp-hero-link{
        padding-left:13px!important;
        padding-right:13px!important;
        font-size:.84rem;
    }
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
    #klikwjp-app-container *,
    #klikwjp-app-container *::before,
    #klikwjp-app-container *::after{
        scroll-behavior:auto!important;
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        transition-duration:.001ms!important;
    }
}


/* ===== kwjp-total-premium-redesign (source block 15) ===== */

/* =========================================================
   KLIKWJP TOTAL PREMIUM REDESIGN
   Visual layer only: IDs, business logic and event handlers preserved.
   ========================================================= */
#klikwjp-app-container{
  --kwjp-ink:#0b1730;
  --kwjp-ink-2:#142744;
  --kwjp-muted:#64748b;
  --kwjp-line:#e5eaf2;
  --kwjp-surface:#ffffff;
  --kwjp-soft:#f5f7fb;
  --kwjp-blue:#2563eb;
  --kwjp-cyan:#06b6d4;
  --kwjp-violet:#6d5dfc;
  --kwjp-green:#0ea875;
  background:
    radial-gradient(circle at 15% -10%,rgba(37,99,235,.06),transparent 30%),
    linear-gradient(180deg,#f8fafc 0%,#f3f6fb 100%) !important;
  color:var(--kwjp-ink);
}
#klikwjp-app-container *{box-sizing:border-box}
#klikwjp-app-container a,#klikwjp-app-container button{ -webkit-tap-highlight-color:transparent }
#klikwjp-app-container a:focus-visible,
#klikwjp-app-container button:focus-visible,
#klikwjp-app-container input:focus-visible,
#klikwjp-app-container select:focus-visible,
#klikwjp-app-container textarea:focus-visible{
  outline:3px solid rgba(37,99,235,.20)!important;
  outline-offset:3px!important;
}

/* HEADER */
#klikwjp-app-container .kwjp-header-premium{
  position:sticky!important;top:0!important;z-index:1000!important;
  background:rgba(255,255,255,.90)!important;
  color:var(--kwjp-ink)!important;
  border-bottom:1px solid rgba(15,23,42,.08)!important;
  box-shadow:0 8px 30px rgba(15,23,42,.07)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}
#klikwjp-app-container .kwjp-header-premium > div:first-child{
  max-width:1440px!important;margin:auto!important;padding:14px 28px!important;
}
#klikwjp-app-container .kwjp-header-premium .flex.items-center.space-x-3{gap:12px!important}
#klikwjp-app-container .kwjp-header-premium .w-10.h-10{
  width:44px!important;height:44px!important;border-radius:14px!important;
  background:linear-gradient(145deg,#0b1730,#1e3a68)!important;
  box-shadow:0 10px 24px rgba(11,23,48,.22)!important;
  position:relative;overflow:hidden;
}
#klikwjp-app-container .kwjp-header-premium .w-10.h-10:after{
  content:"";position:absolute;inset:1px;border-radius:13px;
  border:1px solid rgba(255,255,255,.18);
}
#klikwjp-app-container .kwjp-header-premium .w-10.h-10 span{
  color:#fff!important;font-size:13px!important;letter-spacing:.08em!important;
}
#klikwjp-app-container .kwjp-header-premium h1{
  color:var(--kwjp-ink)!important;font-size:18px!important;font-weight:850!important;
  letter-spacing:-.03em!important;
}
#klikwjp-app-container .kwjp-header-premium nav.hidden.md\:flex{
  gap:4px!important;
}
#klikwjp-app-container .kwjp-header-premium nav.hidden.md\:flex > a,
#klikwjp-app-container .kwjp-header-premium nav.hidden.md\:flex > .group > button{
  color:#52627a!important;
  font-size:12px!important;font-weight:750!important;
  padding:10px 13px!important;border-radius:11px!important;
  transition:all .2s ease!important;
}
#klikwjp-app-container .kwjp-header-premium nav.hidden.md\:flex > a:hover,
#klikwjp-app-container .kwjp-header-premium nav.hidden.md\:flex > .group > button:hover{
  color:#0b1730!important;background:#f1f5f9!important;
}
#klikwjp-app-container .kwjp-header-premium .group > div{
  margin-top:8px!important;padding:7px!important;border-radius:16px!important;
  background:rgba(11,23,48,.97)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 20px 45px rgba(15,23,42,.24)!important;
}
#klikwjp-app-container .kwjp-header-premium .group > div a{
  border-radius:10px!important;font-size:12px!important;font-weight:700!important;
}
#klikwjp-app-container .kwjp-header-premium .theme-toggle{
  width:54px!important;height:28px!important;border-radius:999px!important;
  background:#e7edf5!important;border:1px solid #d8e0ea!important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.08)!important;
}
#klikwjp-app-container .kwjp-header-premium .theme-toggle:before{
  width:22px!important;height:22px!important;top:2px!important;left:2px!important;
  box-shadow:0 2px 7px rgba(15,23,42,.18)!important;
}
#klikwjp-app-container .kwjp-header-premium .theme-toggle.dark{
  background:#172b4d!important;
}
#klikwjp-app-container .kwjp-header-premium .mobile-menu{
  background:linear-gradient(180deg,#09172d,#0d2341)!important;
  width:min(340px,88vw)!important;
  box-shadow:30px 0 80px rgba(0,0,0,.30)!important;
}
#klikwjp-app-container .kwjp-header-premium .mobile-menu nav a{
  padding:13px 14px!important;border-radius:13px!important;
  font-size:13px!important;font-weight:700!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.06)!important;
}
#klikwjp-app-container .kwjp-header-premium .mobile-menu nav a:hover{
  background:rgba(255,255,255,.09)!important;
}
#klikwjp-app-container .kwjp-header-premium #mobileMenuBtn{
  color:#0b1730!important;background:#f1f5f9!important;
  width:42px;height:42px;border-radius:12px;
}

/* HERO — complete visual reset */
#klikwjp-app-container #home{padding-top:34px!important;padding-bottom:52px!important}
#klikwjp-app-container #home > .container{
  max-width:1440px!important;
}
#klikwjp-app-container .kwjp-hero{
  min-height:430px!important;padding:56px 62px!important;
  border-radius:32px!important;overflow:hidden!important;
  background:
    radial-gradient(circle at 78% 20%,rgba(59,130,246,.25),transparent 25%),
    radial-gradient(circle at 94% 95%,rgba(109,93,252,.28),transparent 28%),
    linear-gradient(120deg,#071326 0%,#0c2343 52%,#123a61 100%)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 35px 90px rgba(9,28,57,.24)!important;
  position:relative!important;
}
#klikwjp-app-container .kwjp-hero:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
             linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(to right,#000,transparent 80%);
  pointer-events:none;
}
#klikwjp-app-container .kwjp-hero-content{position:relative;z-index:5;max-width:700px!important}
#klikwjp-app-container .kwjp-hero-badge{
  display:inline-flex!important;align-items:center!important;gap:9px!important;
  padding:8px 12px!important;border-radius:999px!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  color:#b9d7ff!important;font-size:10px!important;font-weight:850!important;
  letter-spacing:.12em!important;backdrop-filter:blur(12px)!important;
}
#klikwjp-app-container .kwjp-live-dot{
  width:7px!important;height:7px!important;background:#38d39f!important;
  box-shadow:0 0 0 5px rgba(56,211,159,.11),0 0 16px rgba(56,211,159,.7)!important;
}
#klikwjp-app-container .kwjp-hero h2{
  margin-top:20px!important;font-size:clamp(42px,5vw,72px)!important;
  line-height:.98!important;letter-spacing:-.055em!important;
  font-weight:900!important;color:#fff!important;
}
#klikwjp-app-container .kwjp-hero h2 span{
  color:transparent!important;
  background:linear-gradient(90deg,#8bd8ff,#a9a1ff 70%,#fff)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
}
#klikwjp-app-container .kwjp-hero p{
  max-width:610px!important;margin-top:22px!important;
  color:#b6c6da!important;font-size:15px!important;line-height:1.75!important;
}
#klikwjp-app-container .kwjp-hero-actions{
  display:flex!important;gap:12px!important;margin-top:30px!important;
}
#klikwjp-app-container .kwjp-hero-link{
  min-height:56px!important;padding:0 20px!important;border-radius:15px!important;
  text-decoration:none!important;font-size:12px!important;font-weight:850!important;
  letter-spacing:.01em!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease!important;
}
#klikwjp-app-container .kwjp-hero-btn-primary{
  color:#08162b!important;
  background:linear-gradient(135deg,#fff,#dcecff)!important;
  box-shadow:0 16px 30px rgba(0,0,0,.20)!important;
}
#klikwjp-app-container .kwjp-hero-btn-secondary{
  color:#fff!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.17)!important;
  box-shadow:none!important;
}
#klikwjp-app-container .kwjp-hero-link:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 18px 34px rgba(0,0,0,.23)!important;
}
#klikwjp-app-container .kwjp-action-icon{
  width:25px;height:25px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(37,99,235,.10);font-size:15px;
}
#klikwjp-app-container .kwjp-hero-btn-secondary .kwjp-action-icon{
  background:rgba(255,255,255,.10);
}
#klikwjp-app-container .kwjp-btn-arrow{font-size:18px!important;transition:transform .2s ease!important}
#klikwjp-app-container .kwjp-hero-link:hover .kwjp-btn-arrow{transform:translateX(4px)!important}
#klikwjp-app-container .kwjp-hero-meta{
  display:flex!important;flex-wrap:wrap!important;gap:9px!important;margin-top:22px!important;
}
#klikwjp-app-container .kwjp-hero-meta span{
  padding:7px 10px!important;border-radius:999px!important;
  background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.09)!important;
  color:#9fb2ca!important;font-size:10px!important;font-weight:700!important;
}
#klikwjp-app-container .kwjp-hero-orbit{
  width:410px!important;height:410px!important;right:35px!important;bottom:-100px!important;
  opacity:.92!important;
}
#klikwjp-app-container .kwjp-hero-mark{
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 25px 65px rgba(0,0,0,.25)!important;
  backdrop-filter:blur(18px)!important;
}
#klikwjp-app-container .kwjp-hero-mark strong{
  font-size:52px!important;letter-spacing:-.07em!important;
}
#klikwjp-app-container .kwjp-hero-mark small{letter-spacing:.22em!important}

/* HOME SERVICE CARDS — dashboard style */
#klikwjp-app-container #home .grid{
  max-width:1440px!important;margin-left:auto!important;margin-right:auto!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;
}
#klikwjp-app-container #home .grid > div{
  position:relative!important;min-height:235px!important;padding:25px!important;
  border:1px solid #e6ebf2!important;border-radius:22px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 8px 30px rgba(15,23,42,.055)!important;
  text-align:left!important;
  overflow:hidden!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}
#klikwjp-app-container #home .grid > div:before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,#2563eb,#06b6d4,#6d5dfc);opacity:0;
  transition:opacity .2s ease;
}
#klikwjp-app-container #home .grid > div:hover{
  transform:translateY(-6px)!important;
  box-shadow:0 22px 48px rgba(15,23,42,.11)!important;
  border-color:#d9e2ef!important;
}
#klikwjp-app-container #home .grid > div:hover:before{opacity:1}
#klikwjp-app-container #home .grid > div > div.w-16{
  width:50px!important;height:50px!important;margin:0 0 20px!important;
  border-radius:15px!important;
  background:#f2f6fb!important;
  border:1px solid #e4ebf3!important;
  box-shadow:none!important;
}
#klikwjp-app-container #home .grid > div h3{
  margin:0 0 8px!important;font-size:15px!important;font-weight:850!important;
  color:#17243b!important;letter-spacing:-.025em!important;
}
#klikwjp-app-container #home .grid > div p{
  margin:0!important;color:#718096!important;font-size:11.5px!important;
  line-height:1.65!important;min-height:56px;
}
#klikwjp-app-container #home .grid > div > a,
#klikwjp-app-container #home .grid > div > button{
  margin-top:18px!important;
  display:inline-flex!important;align-items:center!important;gap:7px!important;
  min-height:36px!important;padding:0 12px!important;
  border-radius:10px!important;background:#f6f8fc!important;
  border:1px solid #e5eaf1!important;
  color:#3157a8!important;font-size:10.5px!important;font-weight:850!important;
  text-decoration:none!important;transition:all .18s ease!important;
}
#klikwjp-app-container #home .grid > div > a:hover,
#klikwjp-app-container #home .grid > div > button:hover{
  background:#0b1730!important;color:#fff!important;border-color:#0b1730!important;
  transform:translateY(-1px)!important;
}

/* CONTENT SECTIONS */
#klikwjp-app-container section:not(#home){
  position:relative;
}
#klikwjp-app-container section:not(#home) > .container{
  max-width:1320px!important;
}
#klikwjp-app-container section:not(#home) .bg-white,
#klikwjp-app-container section:not(#home) .bg-gray-50{
  border:1px solid #e5eaf2!important;
  border-radius:20px!important;
  box-shadow:0 12px 35px rgba(15,23,42,.055)!important;
}
#klikwjp-app-container section:not(#home) h2,
#klikwjp-app-container section:not(#home) h3{
  letter-spacing:-.03em!important;
}
#klikwjp-app-container input,
#klikwjp-app-container select,
#klikwjp-app-container textarea{
  min-height:46px;
  border:1px solid #dbe2ec!important;border-radius:12px!important;
  background:#fff!important;color:#17243b!important;
  box-shadow:0 2px 8px rgba(15,23,42,.025)!important;
}
#klikwjp-app-container textarea{min-height:110px}
#klikwjp-app-container input:hover,
#klikwjp-app-container select:hover,
#klikwjp-app-container textarea:hover{border-color:#b9c7db!important}
#klikwjp-app-container input:focus,
#klikwjp-app-container select:focus,
#klikwjp-app-container textarea:focus{
  border-color:#5d8df5!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.08)!important;
}
#klikwjp-app-container button:not(.theme-toggle):not(#mobileMenuBtn){
  min-height:44px;border-radius:12px!important;font-weight:800!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
#klikwjp-app-container button.bg-blue-600,
#klikwjp-app-container button.bg-green-600,
#klikwjp-app-container button.bg-purple-600,
#klikwjp-app-container button.bg-indigo-600{
  background:linear-gradient(135deg,#2459d9,#4f46e5)!important;
  border:0!important;box-shadow:0 10px 24px rgba(37,89,217,.18)!important;
}
#klikwjp-app-container button.bg-blue-600:hover,
#klikwjp-app-container button.bg-green-600:hover,
#klikwjp-app-container button.bg-purple-600:hover,
#klikwjp-app-container button.bg-indigo-600:hover{
  transform:translateY(-2px)!important;filter:brightness(1.04);
  box-shadow:0 15px 30px rgba(37,89,217,.25)!important;
}
#klikwjp-app-container table{
  border:1px solid #e4e9f1!important;border-radius:16px!important;
  box-shadow:0 8px 28px rgba(15,23,42,.045)!important;
}
#klikwjp-app-container table thead{background:#f5f7fb!important}
#klikwjp-app-container table th{
  color:#52627a!important;font-size:10px!important;letter-spacing:.09em!important;
}
#klikwjp-app-container table tbody tr:hover{background:#f8faff!important}

/* FOOTER */
#klikwjp-app-container .kwjp-footer-premium{
  position:relative!important;overflow:hidden!important;margin-top:40px!important;
  color:#c6d1e2!important;background:
    radial-gradient(circle at 75% 0%,rgba(37,99,235,.22),transparent 27%),
    radial-gradient(circle at 10% 100%,rgba(109,93,252,.14),transparent 30%),
    linear-gradient(145deg,#061326,#0a1b33 55%,#0d2947)!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
}
#klikwjp-app-container .kwjp-footer-premium-inner{
  max-width:1440px;margin:auto;padding:58px 28px 22px;position:relative;z-index:2;
}
#klikwjp-app-container .kwjp-footer-brand{display:flex;align-items:center;gap:13px}
#klikwjp-app-container .kwjp-footer-brandmark{
  width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;font-weight:900;
  background:linear-gradient(145deg,#2e65dd,#6d5dfc);
  box-shadow:0 12px 30px rgba(37,99,235,.28);
}
#klikwjp-app-container .kwjp-footer-brandname{color:#fff;font-size:20px;font-weight:900;letter-spacing:-.035em}
#klikwjp-app-container .kwjp-footer-kicker{margin-top:3px;color:#7f95b2;font-size:9px;font-weight:850;letter-spacing:.14em}
#klikwjp-app-container .kwjp-footer-description{
  max-width:660px;margin:18px 0 18px;color:#8fa2bc!important;font-size:12px!important;line-height:1.8!important;
}
#klikwjp-app-container .kwjp-footer-columns{
  display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:45px;
  padding:30px 0;border-top:1px solid rgba(255,255,255,.08);
}
#klikwjp-app-container .kwjp-footer-heading{
  color:#fff;font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;margin-bottom:15px;
}
#klikwjp-app-container .kwjp-footer-columns > div > a{
  display:block;width:max-content;max-width:100%;padding:5px 0;
  color:#879ab4!important;font-size:11px!important;text-decoration:none!important;
  transition:color .18s ease,transform .18s ease!important;
}
#klikwjp-app-container .kwjp-footer-columns > div > a:hover{color:#fff!important;transform:translateX(3px)}
#klikwjp-app-container .kwjp-footer-contact{
  display:flex;gap:10px;align-items:flex-start;color:#879ab4;font-size:11px;padding:5px 0;
}
#klikwjp-app-container .kwjp-footer-contact i{width:16px;margin-top:2px;color:#5ea2ff}
#klikwjp-app-container .kwjp-footer-bottom-premium{
  display:flex;justify-content:space-between;gap:20px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#647a96;font-size:9px;font-weight:650;
}

/* DARK MODE */
#klikwjp-app-container.dark{
  background:linear-gradient(180deg,#09101d,#0b1220 100%)!important;color:#e5edf7!important;
}
#klikwjp-app-container.dark .kwjp-header-premium{
  background:rgba(8,17,31,.88)!important;border-bottom-color:rgba(255,255,255,.08)!important;
}
#klikwjp-app-container.dark .kwjp-header-premium h1{color:#fff!important}
#klikwjp-app-container.dark .kwjp-header-premium nav.hidden.md\:flex > a,
#klikwjp-app-container.dark .kwjp-header-premium nav.hidden.md\:flex > .group > button{color:#aebdd0!important}
#klikwjp-app-container.dark #home .grid > div{
  background:#111b2b!important;border-color:#223149!important;
}
#klikwjp-app-container.dark #home .grid > div h3{color:#f2f6fb!important}
#klikwjp-app-container.dark #home .grid > div p{color:#9eafc4!important}
#klikwjp-app-container.dark #home .grid > div > div.w-16{background:#18253a!important;border-color:#293b56!important}
#klikwjp-app-container.dark input,
#klikwjp-app-container.dark select,
#klikwjp-app-container.dark textarea{
  background:#111b2b!important;color:#f4f7fb!important;border-color:#30425c!important;
}
#klikwjp-app-container.dark section:not(#home) .bg-white,
#klikwjp-app-container.dark section:not(#home) .bg-gray-50{
  background:#101a29!important;border-color:#24344d!important;
}

/* RESPONSIVE */
@media(max-width:1100px){
  #klikwjp-app-container #home .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #klikwjp-app-container .kwjp-hero{padding:48px 42px!important}
  #klikwjp-app-container .kwjp-hero-orbit{right:-55px!important;opacity:.72!important}
}
@media(max-width:767px){
  #klikwjp-app-container .kwjp-header-premium > div:first-child{padding:11px 14px!important}
  #klikwjp-app-container .kwjp-header-premium h1{font-size:16px!important}
  #klikwjp-app-container #home{padding-top:18px!important}
  #klikwjp-app-container #home > .container{padding-left:12px!important;padding-right:12px!important}
  #klikwjp-app-container .kwjp-hero{
    min-height:610px!important;padding:30px 22px 25px!important;border-radius:24px!important;
  }
  #klikwjp-app-container .kwjp-hero h2{font-size:clamp(36px,11vw,50px)!important}
  #klikwjp-app-container .kwjp-hero p{font-size:13px!important;line-height:1.7!important}
  #klikwjp-app-container .kwjp-hero-actions{flex-direction:column!important}
  #klikwjp-app-container .kwjp-hero-link{width:100%!important}
  #klikwjp-app-container .kwjp-hero-orbit{
    width:270px!important;height:270px!important;right:-78px!important;bottom:-70px!important;opacity:.55!important;
  }
  #klikwjp-app-container #home .grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important;
  }
  #klikwjp-app-container #home .grid > div{
    min-height:205px!important;padding:17px!important;border-radius:18px!important;
  }
  #klikwjp-app-container #home .grid > div h3{font-size:13px!important}
  #klikwjp-app-container #home .grid > div p{font-size:10.5px!important;min-height:68px}
  #klikwjp-app-container #home .grid > div > a,
  #klikwjp-app-container #home .grid > div > button{font-size:9.5px!important;padding:0 9px!important}
  #klikwjp-app-container .kwjp-footer-premium-inner{padding:42px 20px 18px}
  #klikwjp-app-container .kwjp-footer-columns{grid-template-columns:1fr 1fr;gap:28px}
  #klikwjp-app-container .kwjp-footer-columns > div:last-child{grid-column:1/-1}
  #klikwjp-app-container .kwjp-footer-bottom-premium{flex-direction:column;align-items:flex-start}
}
@media(max-width:420px){
  #klikwjp-app-container #home .grid{grid-template-columns:1fr!important}
  #klikwjp-app-container #home .grid > div{min-height:auto!important}
}
@media(prefers-reduced-motion:reduce){
  #klikwjp-app-container *{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}
}


/* ===== kwjp-home-cards-v2 (source block 16) ===== */

/* KLIKWJP — HOME MODULE CARDS / PREMIUM REDESIGN */
#klikwjp-app-container #home .grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  margin-top:28px!important;
}
#klikwjp-app-container #home .grid > div{
  position:relative!important;
  min-height:236px!important;
  height:100%!important;
  padding:22px 21px 18px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  text-align:left!important;
  border:1px solid rgba(15,23,42,.075)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(99,102,241,.075),transparent 34%),
    linear-gradient(145deg,#fff 0%,#fbfbfd 100%)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.055)!important;
  overflow:hidden!important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease!important;
}
#klikwjp-app-container #home .grid > div::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:3px!important;
  height:auto!important;
  background:linear-gradient(180deg,#6366f1,#06b6d4)!important;
  opacity:.0!important;
  transition:opacity .25s ease!important;
}
#klikwjp-app-container #home .grid > div::after{
  content:attr(data-module)!important;
  position:absolute!important;
  top:20px!important;
  right:20px!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.14em!important;
  font-weight:850!important;
  color:#98a2b3!important;
}
#klikwjp-app-container #home .grid > div:hover{
  transform:translateY(-7px)!important;
  border-color:rgba(99,102,241,.18)!important;
  box-shadow:0 22px 48px rgba(15,23,42,.105)!important;
}
#klikwjp-app-container #home .grid > div:hover::before{opacity:1!important}
#klikwjp-app-container #home .grid > div > div{
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
  margin:0 0 24px!important;
  border-radius:15px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#f3f4f8!important;
  color:#30384d!important;
  border:1px solid rgba(15,23,42,.06)!important;
  box-shadow:none!important;
}
#klikwjp-app-container #home .grid > div > div .kwjp-card-icon{
  width:22px!important;height:22px!important;display:flex!important;
  color:inherit!important;
}
#klikwjp-app-container #home .grid > div > div .kwjp-card-icon svg{
  width:22px!important;height:22px!important;
}
#klikwjp-app-container #home .grid > div h3{
  margin:0 34px 9px 0!important;
  font-size:1.02rem!important;
  line-height:1.25!important;
  letter-spacing:-.025em!important;
  font-weight:820!important;
  color:#111827!important;
}
#klikwjp-app-container #home .grid > div p{
  margin:0!important;
  max-width:30ch!important;
  font-size:.79rem!important;
  line-height:1.6!important;
  color:#737b8c!important;
}
#klikwjp-app-container #home .grid > div button,
#klikwjp-app-container #home .grid > div a{
  margin:auto 0 0!important;
  padding:0!important;
  min-height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  color:#475569!important;
  font-size:.73rem!important;
  font-weight:850!important;
  text-decoration:none!important;
  box-shadow:none!important;
}
#klikwjp-app-container #home .grid > div button::after,
#klikwjp-app-container #home .grid > div a::after{
  content:"→"!important;
  font-size:1rem!important;
  line-height:1!important;
  transition:transform .2s ease!important;
}
#klikwjp-app-container #home .grid > div button:hover,
#klikwjp-app-container #home .grid > div a:hover{
  background:transparent!important;
  color:#4f46e5!important;
}
#klikwjp-app-container #home .grid > div button:hover::after,
#klikwjp-app-container #home .grid > div a:hover::after{transform:translateX(4px)!important}
#klikwjp-app-container #home .grid > div:nth-child(4n+1) > div{color:#c2410c!important;background:#fff7ed!important}
#klikwjp-app-container #home .grid > div:nth-child(4n+2) > div{color:#7c3aed!important;background:#f5f3ff!important}
#klikwjp-app-container #home .grid > div:nth-child(4n+3) > div{color:#0891b2!important;background:#ecfeff!important}
#klikwjp-app-container #home .grid > div:nth-child(4n+4) > div{color:#2563eb!important;background:#eff6ff!important}
#klikwjp-app-container.dark #home .grid > div{
  background:linear-gradient(145deg,#151923,#11151e)!important;
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.22)!important;
}
#klikwjp-app-container.dark #home .grid > div h3{color:#f8fafc!important}
#klikwjp-app-container.dark #home .grid > div p{color:#98a2b3!important}
#klikwjp-app-container.dark #home .grid > div > div{background:#1d2430!important;border-color:rgba(255,255,255,.06)!important}
@media(max-width:1023px){
  #klikwjp-app-container #home .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:767px){
  #klikwjp-app-container #home .grid{grid-template-columns:1fr 1fr!important;gap:12px!important;margin-top:20px!important}
  #klikwjp-app-container #home .grid > div{min-height:214px!important;padding:18px 16px 15px!important;border-radius:18px!important}
  #klikwjp-app-container #home .grid > div::after{top:16px!important;right:15px!important;font-size:9px!important}
  #klikwjp-app-container #home .grid > div > div{width:44px!important;height:44px!important;min-width:44px!important;margin-bottom:19px!important;border-radius:13px!important}
  #klikwjp-app-container #home .grid > div > div .kwjp-card-icon,
  #klikwjp-app-container #home .grid > div > div .kwjp-card-icon svg{width:19px!important;height:19px!important}
  #klikwjp-app-container #home .grid > div h3{font-size:.91rem!important;margin-right:22px!important}
  #klikwjp-app-container #home .grid > div p{font-size:.72rem!important;line-height:1.52!important}
  #klikwjp-app-container #home .grid > div button,
  #klikwjp-app-container #home .grid > div a{font-size:.68rem!important;min-height:30px!important}
}
@media(max-width:430px){
  #klikwjp-app-container #home .grid{grid-template-columns:1fr!important}
  #klikwjp-app-container #home .grid > div{min-height:190px!important}
}


/* ===== original-style-17 (source block 17) ===== */

/* Full-card interaction */
#klikwjp-app-container #home .grid > .kwjp-clickable-card{cursor:pointer!important;}
#klikwjp-app-container #home .grid > .kwjp-clickable-card:focus-visible{outline:2px solid #6366f1!important;outline-offset:3px!important;}
#klikwjp-app-container #home .grid > .kwjp-clickable-card:hover h3{color:#4f46e5!important;}
#klikwjp-app-container.dark #home .grid > .kwjp-clickable-card:hover h3{color:#a5b4fc!important;}


/* ===== kwjp-final-responsive-audit (source block 18) ===== */

/* KLIKWJP — FINAL RESPONSIVE / DEVICE HARDENING */
#klikwjp-app-container,
#klikwjp-app-container *{box-sizing:border-box}
html{overflow-x:clip!important}
body{overflow-x:clip!important}
#klikwjp-app-container{width:100%;max-width:100%;min-width:0;overflow-x:clip!important}
#klikwjp-app-container img,
#klikwjp-app-container svg,
#klikwjp-app-container video,
#klikwjp-app-container canvas{max-width:100%}
#klikwjp-app-container input,
#klikwjp-app-container select,
#klikwjp-app-container textarea,
#klikwjp-app-container button{max-width:100%;min-width:0}
#klikwjp-app-container .container,
#klikwjp-app-container section,
#klikwjp-app-container main,
#klikwjp-app-container footer{min-width:0}
#klikwjp-app-container td,
#klikwjp-app-container th,
#klikwjp-app-container p,
#klikwjp-app-container h1,
#klikwjp-app-container h2,
#klikwjp-app-container h3,
#klikwjp-app-container h4,
#klikwjp-app-container a,
#klikwjp-app-container span{overflow-wrap:anywhere}

/* Tablet: switch to the proven touch drawer before the desktop nav becomes crowded. */
@media (max-width:1023px){
  #klikwjp-app-container .kwjp-header-premium nav.hidden.md\\:flex{display:none!important}
  #klikwjp-app-container .kwjp-header-premium #mobileMenuBtn{display:inline-flex!important}
  #klikwjp-app-container .kwjp-header-premium > div:first-child{padding:12px 20px!important}
  #klikwjp-app-container .kwjp-header-premium .flex.items-center.justify-between{min-width:0}
  #klikwjp-app-container .kwjp-header-premium .flex.items-center.space-x-3{min-width:0}
  #klikwjp-app-container .kwjp-header-premium h1{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  #klikwjp-app-container #mobileMenu{display:block!important}
  #klikwjp-app-container #mobileMenuOverlay{display:block!important}
  #klikwjp-app-container #home > .container{padding-left:20px!important;padding-right:20px!important}
}

/* Phone: keep content breathing room while footer remains compact. */
@media (max-width:767px){
  #klikwjp-app-container #home > .container{padding-left:12px!important;padding-right:12px!important}
  #klikwjp-app-container .kwjp-footer-premium{margin-top:0!important}
  #klikwjp-app-container .kwjp-footer-bottom-premium{gap:14px!important}
  #klikwjp-app-container .kwjp-footer-copyright-badge{
    display:flex!important;width:100%!important;max-width:100%!important;
    white-space:normal!important;text-align:left!important;border-radius:14px!important;
  }
  #klikwjp-app-container .kwjp-footer-columns > div > a{width:auto!important}
}

@media (max-width:430px){
  #klikwjp-app-container .kwjp-footer-premium-inner{padding-left:16px!important;padding-right:16px!important}
  #klikwjp-app-container .kwjp-footer-columns{grid-template-columns:1fr!important;gap:22px!important}
  #klikwjp-app-container .kwjp-footer-columns > div:last-child{grid-column:auto!important}
}

@media (max-width:380px){
  #klikwjp-app-container .kwjp-header-premium > div:first-child{padding-left:11px!important;padding-right:11px!important}
  #klikwjp-app-container .kwjp-header-premium .w-10.h-10{width:40px!important;height:40px!important}
  #klikwjp-app-container .kwjp-header-premium #mobileMenuBtn{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important}
}

/* Accessibility / motion / safe-area hardening. */
@media (prefers-reduced-motion:reduce){
  #klikwjp-app-container *{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
}
@supports (padding:max(0px)){
  #klikwjp-app-container .kwjp-header-premium > div:first-child{
    padding-left:max(14px,env(safe-area-inset-left))!important;
    padding-right:max(14px,env(safe-area-inset-right))!important;
  }
  #klikwjp-app-container .kwjp-footer-premium-inner{
    padding-bottom:max(20px,env(safe-area-inset-bottom))!important;
  }
}


/* ===== kwjp-penagihan-final-premium (source block 19) ===== */

/* KLIKWJP — PENAGIHAN FINAL PREMIUM UI/UX
   Visual layer only. Existing IDs, handlers, camera/GPS logic and submission flow remain unchanged. */
#klikwjp-app-container #penagihan{
  --pc-ink:#17202a;
  --pc-navy:#17324d;
  --pc-muted:#687582;
  --pc-line:#dddcd6;
  --pc-soft:#f5f3ee;
  --pc-green:#16835e;
  background:#f5f3ee!important;
  color:var(--pc-ink);
  padding:34px 18px 72px!important;
  overflow-x:clip!important;
}
#klikwjp-app-container #penagihan>.max-w-6xl{max-width:1080px!important}

/* Quiet, editorial collection header */
#klikwjp-app-container #penagihan .pc-hero{
  min-height:300px!important;
  padding:48px 52px!important;
  border:1px solid #d9d7d0!important;
  border-radius:2px!important;
  background:#f5f3ee!important;
  box-shadow:none!important;
  color:var(--pc-ink)!important;
}
#klikwjp-app-container #penagihan .pc-hero:before{display:none!important}
#klikwjp-app-container #penagihan .pc-hero-grid{display:none!important}
#klikwjp-app-container #penagihan .pc-hero-panel{display:none!important}
#klikwjp-app-container #penagihan .pc-hero-copy{max-width:760px!important}
#klikwjp-app-container #penagihan .pc-eyebrow{
  color:#77736b!important;font-size:10px!important;letter-spacing:.22em!important;margin-bottom:25px!important
}
#klikwjp-app-container #penagihan .pc-live{background:#16835e!important;box-shadow:0 0 0 4px rgba(22,131,94,.10)!important}
#klikwjp-app-container #penagihan .pc-hero h2{
  color:#171717!important;font-size:clamp(2.5rem,6vw,5rem)!important;line-height:.9!important;
  letter-spacing:-.07em!important;font-weight:650!important
}
#klikwjp-app-container #penagihan .pc-hero h2 span{color:#77736b!important}
#klikwjp-app-container #penagihan .pc-hero p{
  max-width:590px!important;margin-top:25px!important;color:#68645d!important;
  font-size:.88rem!important;line-height:1.7!important
}
#klikwjp-app-container #penagihan .pc-hero-meta{margin-top:28px!important;gap:7px!important}
#klikwjp-app-container #penagihan .pc-hero-meta span{
  padding:7px 10px!important;border:1px solid #d8d5ce!important;border-radius:999px!important;
  background:transparent!important;color:#5f5b55!important;font-size:.62rem!important
}
#klikwjp-app-container #penagihan .pc-hero-meta i{color:#16835e!important}

/* Workflow becomes a restrained progress rail */
#klikwjp-app-container #penagihan .pc-workflow{
  margin:18px 0 20px!important;padding:12px 18px!important;border:1px solid #dddcd6!important;
  border-radius:2px!important;background:rgba(255,255,255,.52)!important;box-shadow:none!important
}
#klikwjp-app-container #penagihan .pc-step span{
  background:#fff!important;border:1px solid #d8d6cf!important;color:#77736b!important;
  box-shadow:none!important
}
#klikwjp-app-container #penagihan .pc-step.active span{background:#171717!important;border-color:#171717!important;color:#fff!important}
#klikwjp-app-container #penagihan .pc-step b{color:#34312d!important;font-size:.66rem!important}
#klikwjp-app-container #penagihan .pc-step small{color:#89857d!important}
#klikwjp-app-container #penagihan .pc-line{background:#d5d2ca!important}

/* Form cards */
#klikwjp-app-container #penagihan .pc-form{max-width:900px!important;gap:14px!important}
#klikwjp-app-container #penagihan .pc-card{
  padding:28px!important;border:1px solid #dddcd6!important;border-radius:2px!important;
  background:#fff!important;box-shadow:0 8px 26px rgba(23,32,42,.045)!important
}
#klikwjp-app-container #penagihan .pc-card:after{display:none!important}
#klikwjp-app-container #penagihan .pc-card-head{
  margin-bottom:24px!important;padding-bottom:18px!important;border-bottom:1px solid #ebe9e4!important
}
#klikwjp-app-container #penagihan .pc-index{
  width:38px!important;height:38px!important;flex-basis:38px!important;border-radius:50%!important;
  background:#f3f1eb!important;border:1px solid #ddd9d0!important;color:#5f5b55!important;box-shadow:none!important
}
#klikwjp-app-container #penagihan .pc-kicker{color:#89857d!important;letter-spacing:.18em!important}
#klikwjp-app-container #penagihan .pc-card-head h3{color:#171717!important;font-size:1.08rem!important;font-weight:700!important}
#klikwjp-app-container #penagihan .pc-card-head p{color:#7b7770!important;font-size:.7rem!important}
#klikwjp-app-container #penagihan .pc-secure{border:1px solid #e4e1da!important;background:#faf9f6!important;color:#77736b!important}

/* Inputs */
#klikwjp-app-container #penagihan .pc-fields{gap:18px!important}
#klikwjp-app-container #penagihan .pc-field label,
#klikwjp-app-container #penagihan .pc-status-box>label{
  margin-bottom:8px!important;color:#5f5b55!important;font-size:.68rem!important;letter-spacing:.06em!important
}
#klikwjp-app-container #penagihan .pc-input{
  min-height:52px!important;border:1px solid #d9d7d0!important;border-radius:2px!important;
  background:#fff!important;box-shadow:none!important;transition:border-color .18s,box-shadow .18s,background .18s!important
}
#klikwjp-app-container #penagihan .pc-input>i{flex-basis:44px!important;color:#8c887f!important}
#klikwjp-app-container #penagihan .pc-input input,
#klikwjp-app-container #penagihan .pc-input select,
#klikwjp-app-container #penagihan .pc-input textarea{
  color:#24211e!important;font-size:.8rem!important
}
#klikwjp-app-container #penagihan .pc-input:focus-within{
  border-color:#17324d!important;background:#fff!important;box-shadow:0 0 0 3px rgba(23,50,77,.07)!important
}
#klikwjp-app-container #penagihan .pc-input textarea{min-height:112px!important;line-height:1.55!important}

/* GPS action */
#klikwjp-app-container #penagihan .kwjp-gps-btn{
  border:1px solid #b8d9ca!important;border-radius:2px!important;background:#f1f8f4!important;color:#126b4d!important;
  box-shadow:none!important;min-height:52px!important
}
#klikwjp-app-container #penagihan .kwjp-gps-btn:hover{box-shadow:0 6px 16px rgba(22,131,94,.10)!important}

/* Collection outcome — strongest decision point */
#klikwjp-app-container #penagihan .pc-status-box{
  padding:18px!important;border:1px solid #d9d7d0!important;border-radius:2px!important;background:#faf9f6!important
}
#klikwjp-app-container #penagihan .pc-status-input{
  min-height:58px!important;border-color:#c9c5bc!important;background:#fff!important
}
#klikwjp-app-container #penagihan #statusKunjungan{font-weight:700!important;color:#17324d!important}
#klikwjp-app-container #penagihan .pc-status-hint{color:#817d75!important}

/* Evidence guide */
#klikwjp-app-container #penagihan .pc-evidence-guide{
  margin-bottom:20px!important;border:1px solid #dddcd6!important;border-radius:2px!important;
  background:#faf9f6!important;box-shadow:none!important
}
#klikwjp-app-container #penagihan .pc-guide-head{background:transparent!important;border-bottom:1px solid #e7e4dd!important}
#klikwjp-app-container #penagihan .pc-guide-badge{border-radius:999px!important;background:#171717!important;color:#fff!important}
#klikwjp-app-container #penagihan .pc-guide-item{border-color:#e7e4dd!important}
#klikwjp-app-container #penagihan .pc-guide-number{background:#f1efe9!important;color:#5f5b55!important;border:1px solid #ddd9d0!important}

/* Camera */
#klikwjp-app-container #penagihan .pc-camera-wrap{
  border:1px solid #dddcd6!important;border-radius:2px!important;background:#f8f7f3!important;padding:14px!important
}
#klikwjp-app-container #penagihan .pc-camera-empty{
  min-height:235px!important;border:1px dashed #c9c5bc!important;border-radius:2px!important;background:#fff!important
}
#klikwjp-app-container #penagihan .pc-camera-icon{border-radius:50%!important;background:#f1efe9!important;color:#17324d!important}
#klikwjp-app-container #penagihan .pc-camera-action button{
  min-height:46px!important;border-radius:2px!important;background:#17324d!important;box-shadow:none!important
}

/* Dynamic result blocks */
#klikwjp-app-container #penagihan .pc-dynamic{border-radius:2px!important;box-shadow:none!important}
#klikwjp-app-container #penagihan .pc-dynamic-title>span{border:1px solid #e1ded6!important;border-radius:50%!important}
#klikwjp-app-container #penagihan .pc-proof-actions button{border-radius:2px!important;min-height:46px!important}
#klikwjp-app-container #penagihan .pc-proof-actions button:first-child{background:#17324d!important;border-color:#17324d!important}

/* Submit — premium command bar */
#klikwjp-app-container #penagihan .pc-submit-card{
  margin-top:2px!important;padding:20px 22px!important;border:1px solid #17324d!important;border-radius:2px!important;
  background:#17324d!important;box-shadow:0 18px 42px rgba(23,50,77,.18)!important
}
#klikwjp-app-container #penagihan .pc-submit-copy h3{font-size:1.05rem!important}
#klikwjp-app-container #penagihan .pc-submit-card button{
  min-height:58px!important;border-radius:2px!important;background:#f5f3ee!important;color:#17324d!important;
  box-shadow:none!important;transition:transform .18s,box-shadow .18s!important
}
#klikwjp-app-container #penagihan .pc-submit-card button:hover{transform:translateY(-2px)!important;box-shadow:0 10px 25px rgba(0,0,0,.18)!important}
#klikwjp-app-container #penagihan .pc-submit-icon{border-radius:50%!important;background:#17324d!important;color:#fff!important}

/* Success */
#klikwjp-app-container #penagihan .pc-success{border-radius:2px!important;box-shadow:none!important}

/* Touch and mobile */
@media(max-width:900px){
  #klikwjp-app-container #penagihan{padding-left:12px!important;padding-right:12px!important}
  #klikwjp-app-container #penagihan .pc-hero{padding:38px 34px!important}
  #klikwjp-app-container #penagihan .pc-grid-2{grid-template-columns:1fr!important}
  #klikwjp-app-container #penagihan .pc-submit-card{align-items:flex-start!important;flex-direction:column!important}
  #klikwjp-app-container #penagihan .pc-submit-side{width:100%!important;justify-content:space-between!important}
}
@media(max-width:640px){
  #klikwjp-app-container #penagihan{padding:16px 8px 52px!important}
  #klikwjp-app-container #penagihan .pc-hero{min-height:270px!important;padding:32px 24px!important}
  #klikwjp-app-container #penagihan .pc-hero h2{font-size:clamp(2.35rem,12vw,3.6rem)!important}
  #klikwjp-app-container #penagihan .pc-hero p{font-size:.78rem!important}
  #klikwjp-app-container #penagihan .pc-hero-meta{gap:6px!important}
  #klikwjp-app-container #penagihan .pc-hero-meta span{font-size:.58rem!important}
  #klikwjp-app-container #penagihan .pc-workflow{overflow-x:auto;justify-content:flex-start!important;padding:10px 12px!important}
  #klikwjp-app-container #penagihan .pc-step{flex:0 0 auto!important}
  #klikwjp-app-container #penagihan .pc-card{padding:18px!important}
  #klikwjp-app-container #penagihan .pc-card-head{align-items:flex-start!important}
  #klikwjp-app-container #penagihan .pc-secure{display:none!important}
  #klikwjp-app-container #penagihan .pc-input input,
  #klikwjp-app-container #penagihan .pc-input select,
  #klikwjp-app-container #penagihan .pc-input textarea{font-size:16px!important}
  #klikwjp-app-container #penagihan .pc-submit-card{padding:18px!important}
  #klikwjp-app-container #penagihan .pc-submit-side{flex-direction:column!important;align-items:stretch!important}
  #klikwjp-app-container #penagihan .pc-submit-secure{display:none!important}
  #klikwjp-app-container #penagihan .pc-submit-card button{width:100%!important;justify-content:center!important}
}
@media(max-width:390px){
  #klikwjp-app-container #penagihan .pc-hero{padding:28px 19px!important}
  #klikwjp-app-container #penagihan .pc-hero h2{font-size:2.25rem!important}
  #klikwjp-app-container #penagihan .pc-card{padding:15px!important}
  #klikwjp-app-container #penagihan .pc-card-head h3{font-size:.92rem!important}
  #klikwjp-app-container #penagihan .pc-card-head p{font-size:.62rem!important}
  #klikwjp-app-container #penagihan .kwjp-address-wrap{grid-template-columns:minmax(0,1fr) 52px!important;gap:6px!important}
  #klikwjp-app-container #penagihan .kwjp-gps-btn{width:52px!important;min-width:52px!important;padding:0!important}
  #klikwjp-app-container #penagihan .kwjp-gps-label{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  #klikwjp-app-container #penagihan *{transition:none!important}
}

/* Dark mode */
#klikwjp-app-container.dark #penagihan{background:#11161d!important;color:#edf2f7}
#klikwjp-app-container.dark #penagihan .pc-hero{background:#151b23!important;border-color:#303944!important}
#klikwjp-app-container.dark #penagihan .pc-hero h2{color:#f4f6f8!important}
#klikwjp-app-container.dark #penagihan .pc-hero h2 span{color:#a8b1bb!important}
#klikwjp-app-container.dark #penagihan .pc-hero p{color:#9ba7b4!important}
#klikwjp-app-container.dark #penagihan .pc-workflow,
#klikwjp-app-container.dark #penagihan .pc-card{background:#171e27!important;border-color:#303944!important}
#klikwjp-app-container.dark #penagihan .pc-card-head{border-color:#303944!important}
#klikwjp-app-container.dark #penagihan .pc-card-head h3{color:#f3f5f7!important}
#klikwjp-app-container.dark #penagihan .pc-card-head p,
#klikwjp-app-container.dark #penagihan .pc-kicker{color:#9aa7b5!important}
#klikwjp-app-container.dark #penagihan .pc-input{background:#111820!important;border-color:#394552!important}
#klikwjp-app-container.dark #penagihan .pc-input input,
#klikwjp-app-container.dark #penagihan .pc-input select,
#klikwjp-app-container.dark #penagihan .pc-input textarea{color:#f1f5f9!important}
#klikwjp-app-container.dark #penagihan .pc-status-box,
#klikwjp-app-container.dark #penagihan .pc-camera-wrap,
#klikwjp-app-container.dark #penagihan .pc-evidence-guide{background:#131a22!important;border-color:#303944!important}


/* ===== kwjp-penagihan-final-premium (source block 20) ===== */

/* FINAL PENAGIHAN — clean banking form */
#klikwjp-app-container #penagihan .pc-hero-clean{
  position:relative!important;min-height:250px!important;padding:42px 48px!important;
  display:flex!important;align-items:flex-end!important;justify-content:space-between!important;
  overflow:hidden!important;border:1px solid #dedbd4!important;border-radius:0!important;
  background:#f5f3ee!important;box-shadow:none!important;color:#171717!important;
}
#klikwjp-app-container #penagihan .pc-hero-clean-copy{position:relative;z-index:2}
#klikwjp-app-container #penagihan .pc-hero-clean-mark{font-size:10px;font-weight:800;letter-spacing:.24em;color:#77736b;margin-bottom:24px}
#klikwjp-app-container #penagihan .pc-hero-clean h2{margin:0!important;font-size:clamp(3.2rem,7vw,6.4rem)!important;line-height:.84!important;letter-spacing:-.07em!important;font-weight:650!important;color:#171717!important}
#klikwjp-app-container #penagihan .pc-hero-clean h2 span{font-weight:320!important;color:#77736b!important}
#klikwjp-app-container #penagihan .pc-hero-clean-rule{position:absolute;left:48%;top:0;bottom:0;width:1px;background:#d8d5cd;transform:rotate(18deg);transform-origin:center}
#klikwjp-app-container #penagihan .pc-hero-clean-index{display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.2em;color:#8b887f;font-weight:800}
#klikwjp-app-container #penagihan .pc-hero-clean-index b{font-size:16px;color:#171717;letter-spacing:0}

#klikwjp-app-container #penagihan .pc-workflow{margin:18px 0 28px!important;padding:0 2px!important;background:transparent!important;border:0!important;box-shadow:none!important}
#klikwjp-app-container #penagihan .pc-step{background:#fff!important;border:1px solid #e1ded7!important;border-radius:14px!important;box-shadow:none!important;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease!important}
#klikwjp-app-container #penagihan .pc-step.active{border-color:#171717!important;box-shadow:0 8px 22px rgba(23,23,23,.06)!important}
#klikwjp-app-container #penagihan .pc-line{background:#d9d6cf!important}

#klikwjp-app-container #penagihan .pc-card{background:#fff!important;border:1px solid #e2dfd8!important;border-radius:18px!important;box-shadow:0 10px 32px rgba(23,23,23,.045)!important;margin-bottom:18px!important;overflow:hidden!important}
#klikwjp-app-container #penagihan .pc-card-head{padding:25px 28px 21px!important;border-bottom:1px solid #ebe8e1!important;background:#fff!important}
#klikwjp-app-container #penagihan .pc-index{background:#171717!important;color:#fff!important;border-radius:9px!important;width:36px!important;height:36px!important;font-size:11px!important;box-shadow:none!important}
#klikwjp-app-container #penagihan .pc-kicker{font-size:9px!important;letter-spacing:.2em!important;color:#8a867d!important;font-weight:800!important}
#klikwjp-app-container #penagihan .pc-card-head h3{font-size:21px!important;letter-spacing:-.025em!important;color:#171717!important}
#klikwjp-app-container #penagihan .pc-card-head p{color:#858178!important}
#klikwjp-app-container #penagihan .pc-fields{padding:25px 28px 28px!important}
#klikwjp-app-container #penagihan .pc-field label,#klikwjp-app-container #penagihan .pc-status-box>label{font-size:11px!important;font-weight:750!important;color:#555149!important;letter-spacing:.01em!important;margin-bottom:8px!important}
#klikwjp-app-container #penagihan .pc-input{border:1px solid #dcd9d2!important;border-radius:11px!important;background:#faf9f6!important;box-shadow:none!important;min-height:50px!important;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease!important}
#klikwjp-app-container #penagihan .pc-input:focus-within{border-color:#171717!important;background:#fff!important;box-shadow:0 0 0 3px rgba(23,23,23,.06)!important}
#klikwjp-app-container #penagihan .pc-input i{color:#89857d!important}
#klikwjp-app-container #penagihan .pc-input input,#klikwjp-app-container #penagihan .pc-input select,#klikwjp-app-container #penagihan .pc-input textarea{font-size:14px!important;color:#24221f!important}
#klikwjp-app-container #penagihan .pc-input input::placeholder,#klikwjp-app-container #penagihan .pc-input textarea::placeholder{color:#aaa69d!important}
#klikwjp-app-container #penagihan .kwjp-address-wrap{gap:9px!important}
#klikwjp-app-container #penagihan .kwjp-gps-btn{border:1px solid #171717!important;background:#171717!important;color:#fff!important;border-radius:11px!important;min-width:68px!important;box-shadow:none!important;font-weight:750!important;transition:transform .18s ease,background .18s ease!important}
#klikwjp-app-container #penagihan .kwjp-gps-btn:hover{transform:translateY(-1px);background:#2b2b2b!important}
#klikwjp-app-container #penagihan .pc-evidence-guide{border:1px solid #e0ddd6!important;background:#f7f5f0!important;border-radius:14px!important;box-shadow:none!important;margin:0 28px 18px!important}
#klikwjp-app-container #penagihan .pc-guide-badge{border-radius:999px!important;background:#171717!important;color:#fff!important;border:0!important}
#klikwjp-app-container #penagihan .pc-camera-wrap{margin:0 28px 28px!important;border:1px solid #dedbd4!important;border-radius:15px!important;background:#faf9f6!important;overflow:hidden!important}
#klikwjp-app-container #penagihan .pc-camera-top{padding:14px 16px!important;border-bottom:1px solid #e5e2db!important}
#klikwjp-app-container #penagihan .camera-preview{border-radius:0!important;background:#eeece7!important}
#klikwjp-app-container #penagihan .pc-camera-action{padding:14px!important;background:#fff!important}
#klikwjp-app-container #penagihan #takePhotoBtn{width:100%!important;min-height:48px!important;border-radius:10px!important;border:1px solid #171717!important;background:#171717!important;color:#fff!important;font-weight:750!important;box-shadow:none!important;transition:transform .18s ease,background .18s ease!important}
#klikwjp-app-container #penagihan #takePhotoBtn:hover{transform:translateY(-1px);background:#2b2b2b!important}
#klikwjp-app-container #penagihan .pc-status-box{margin:0 28px 28px!important;padding:20px!important;border:1px solid #e0ddd6!important;border-radius:14px!important;background:#faf9f6!important}
#klikwjp-app-container #penagihan .pc-submit-premium{margin-top:20px!important;padding:18px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;border:1px solid #d8d5cd!important;border-radius:16px!important;background:#f5f3ee!important;box-shadow:none!important}
#klikwjp-app-container #penagihan .pc-submit-premium-copy{padding-left:6px!important}
#klikwjp-app-container #penagihan .pc-submit-premium-copy h3{margin:5px 0 0!important;font-size:19px!important;letter-spacing:-.025em!important;color:#171717!important}
#klikwjp-app-container #penagihan .pc-submit-premium-btn{min-height:52px!important;padding:0 20px!important;border:0!important;border-radius:11px!important;background:#171717!important;color:#fff!important;display:inline-flex!important;align-items:center!important;gap:18px!important;font-size:13px!important;font-weight:800!important;box-shadow:0 8px 18px rgba(23,23,23,.12)!important;transition:transform .18s ease,background .18s ease!important}
#klikwjp-app-container #penagihan .pc-submit-premium-btn:hover{transform:translateY(-1px);background:#2b2b2b!important}
#klikwjp-app-container #penagihan .pc-submit-premium-btn i{font-size:12px!important;opacity:.8}
#klikwjp-app-container #penagihan .pc-success{border-radius:14px!important;border:1px solid #d7e4d9!important;box-shadow:none!important}
@media(max-width:767px){
 #klikwjp-app-container #penagihan .pc-hero-clean{min-height:205px!important;padding:30px 24px!important;align-items:flex-end!important}
 #klikwjp-app-container #penagihan .pc-hero-clean-mark{margin-bottom:17px}
 #klikwjp-app-container #penagihan .pc-hero-clean h2{font-size:clamp(3rem,16vw,4.6rem)!important}
 #klikwjp-app-container #penagihan .pc-hero-clean-rule{left:auto;right:27%;transform:rotate(18deg)}
 #klikwjp-app-container #penagihan .pc-hero-clean-index{position:absolute;right:20px;top:25px;flex-direction:column;gap:3px;align-items:flex-end}
 #klikwjp-app-container #penagihan .pc-card{border-radius:15px!important}
 #klikwjp-app-container #penagihan .pc-card-head{padding:21px 19px 18px!important}
 #klikwjp-app-container #penagihan .pc-fields{padding:20px 19px 22px!important}
 #klikwjp-app-container #penagihan .pc-evidence-guide,#klikwjp-app-container #penagihan .pc-camera-wrap,#klikwjp-app-container #penagihan .pc-status-box{margin-left:19px!important;margin-right:19px!important}
 #klikwjp-app-container #penagihan .pc-submit-premium{align-items:stretch!important;flex-direction:column!important;padding:16px!important}
 #klikwjp-app-container #penagihan .pc-submit-premium-btn{width:100%!important;justify-content:space-between!important}
}
@media(prefers-reduced-motion:reduce){#klikwjp-app-container #penagihan .pc-input,#klikwjp-app-container #penagihan .kwjp-gps-btn,#klikwjp-app-container #penagihan #takePhotoBtn,#klikwjp-app-container #penagihan .pc-submit-premium-btn{transition:none!important}}


/* ===== pc-evidence-guide-clean (source block 21) ===== */

#klikwjp-app-container #penagihan .pc-evidence-guide{margin:0 0 22px;border:1px solid #dbe4ee;border-radius:18px;background:#f8fafc;overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,.045)}
#klikwjp-app-container #penagihan .pc-guide-head{display:flex;align-items:center;gap:13px;padding:15px 17px;background:linear-gradient(180deg,#f8fbff 0%,#f2f6fb 100%);border-bottom:1px solid #e2e8f0}
#klikwjp-app-container #penagihan .pc-guide-icon{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;border-radius:11px;color:#1d4ed8;background:#fff;border:1px solid #dbeafe;box-shadow:0 3px 10px rgba(30,64,175,.08);font-size:14px}
#klikwjp-app-container #penagihan .pc-guide-heading{min-width:0;flex:1}
#klikwjp-app-container #penagihan .pc-guide-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;line-height:1.25}
#klikwjp-app-container #penagihan .pc-guide-title-row strong{color:#172033;font-size:13px;font-weight:750}
#klikwjp-app-container #penagihan .pc-guide-badge{display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border:1px solid #bfdbfe;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:9px;font-weight:800;letter-spacing:.07em;line-height:1}
#klikwjp-app-container #penagihan .pc-guide-heading p{margin:4px 0 0;color:#64748b;font-size:11px;line-height:1.45}
#klikwjp-app-container #penagihan .pc-guide-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
#klikwjp-app-container #penagihan .pc-guide-item{display:flex;align-items:flex-start;gap:11px;min-width:0;padding:15px 16px 16px}
#klikwjp-app-container #penagihan .pc-guide-item+.pc-guide-item{border-left:1px solid #e2e8f0}
#klikwjp-app-container #penagihan .pc-guide-number{width:27px;height:27px;flex:0 0 27px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#fff;border:1px solid #dbe4ee;color:#2563eb;font-size:9px;font-weight:800;letter-spacing:.04em}
#klikwjp-app-container #penagihan .pc-guide-copy{min-width:0;padding-top:1px}
#klikwjp-app-container #penagihan .pc-guide-copy strong{display:block;margin:0 0 4px;color:#334155;font-size:11.5px;font-weight:750;line-height:1.35}
#klikwjp-app-container #penagihan .pc-guide-copy p{margin:0;color:#64748b;font-size:10.5px;line-height:1.55}
@media(max-width:900px){#klikwjp-app-container #penagihan .pc-guide-list{grid-template-columns:1fr}#klikwjp-app-container #penagihan .pc-guide-item{padding:13px 15px}#klikwjp-app-container #penagihan .pc-guide-item+.pc-guide-item{border-left:0;border-top:1px solid #e2e8f0}}
@media(max-width:480px){#klikwjp-app-container #penagihan .pc-evidence-guide{border-radius:15px}#klikwjp-app-container #penagihan .pc-guide-head{align-items:flex-start;padding:13px 14px}#klikwjp-app-container #penagihan .pc-guide-icon{width:34px;height:34px;flex-basis:34px;border-radius:10px}#klikwjp-app-container #penagihan .pc-guide-title-row strong{font-size:12px}#klikwjp-app-container #penagihan .pc-guide-heading p{font-size:10.5px}}

/* KLIKWJP MOBILE NAVIGATION — TOUCH / STACKING FIX */
@media(max-width:767px){
    #klikwjp-app-container header{
        position:sticky!important;
        top:0!important;
        z-index:11000!important;
    }
    #klikwjp-app-container #mobileMenuBtn{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        width:46px!important;
        height:46px!important;
        min-width:46px!important;
        min-height:46px!important;
        padding:0!important;
        position:relative!important;
        z-index:11003!important;
        cursor:pointer!important;
        touch-action:manipulation!important;
        pointer-events:auto!important;
    }
    #klikwjp-app-container #mobileMenu{
        position:fixed!important;
        top:0!important;
        left:0!important;
        bottom:0!important;
        width:min(340px,88vw)!important;
        max-width:340px!important;
        height:100dvh!important;
        max-height:100dvh!important;
        z-index:11002!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior:contain!important;
        pointer-events:none!important;
        visibility:hidden!important;
        transform:translate3d(-105%,0,0)!important;
        transition:transform .28s ease,visibility 0s linear .28s!important;
    }
    #klikwjp-app-container #mobileMenu.open{
        pointer-events:auto!important;
        visibility:visible!important;
        transform:translate3d(0,0,0)!important;
        transition:transform .28s ease,visibility 0s linear 0s!important;
    }
    #klikwjp-app-container #mobileMenuOverlay{
        position:fixed!important;
        inset:0!important;
        z-index:11001!important;
        pointer-events:none!important;
        opacity:0!important;
        visibility:hidden!important;
        transition:opacity .2s ease,visibility 0s linear .2s!important;
    }
    #klikwjp-app-container #mobileMenuOverlay:not(.hidden){
        pointer-events:auto!important;
        opacity:1!important;
        visibility:visible!important;
        transition:opacity .2s ease,visibility 0s linear 0s!important;
    }
    #klikwjp-app-container #mobileMenu nav a,
    #klikwjp-app-container #mobileMenu nav button,
    #klikwjp-app-container #mobileMenu > div > div > button{
        display:flex!important;
        align-items:center!important;
        width:100%!important;
        min-height:48px!important;
        padding:12px 16px!important;
        touch-action:manipulation!important;
        pointer-events:auto!important;
        cursor:pointer!important;
    }
}

/* KLIKWJP MOBILE NAVIGATION HOTFIX */
#klikwjp-app-container .mobile-menu{
    z-index:10001!important;
    pointer-events:none;
    visibility:hidden;
}
#klikwjp-app-container .mobile-menu.open{
    pointer-events:auto;
    visibility:visible;
}
#klikwjp-app-container #mobileMenuOverlay{z-index:10000!important}
#klikwjp-app-container #mobileMenuBtn{
    position:relative;
    z-index:10002!important;
    touch-action:manipulation;
}
#klikwjp-app-container .mobile-menu nav a,
#klikwjp-app-container .mobile-menu button{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}
@media(max-width:767px){
    #klikwjp-app-container .mobile-menu{
        width:min(340px,88vw)!important;
        max-width:340px;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }
    #klikwjp-app-container .mobile-menu nav{padding-bottom:24px}
}


/* Premium semantic card icons */
#klikwjp-app-container .kwjp-card-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
}
#klikwjp-app-container .kwjp-card-icon svg{
    width:30px!important;
    height:30px!important;
    display:block;
}
@media(max-width:767px){
    #klikwjp-app-container .kwjp-card-icon{width:25px;height:25px}
    #klikwjp-app-container .kwjp-card-icon svg{width:25px!important;height:25px!important}
}



/* ===== kwjp-premium-card-actions (source block 22) ===== */

/* KLIKWJP — PREMIUM CARD ACTIONS */
#klikwjp-app-container #home .grid > div{
  display:flex!important;
  flex-direction:column!important;
}
#klikwjp-app-container #home .grid > div > h3{
  color:#172033!important;
  letter-spacing:-.025em!important;
}
#klikwjp-app-container #home .grid > div > p{
  flex:1 1 auto!important;
}
#klikwjp-app-container #home .grid > div > a,
#klikwjp-app-container #home .grid > div > button{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  width:100%!important;
  min-height:46px!important;
  margin-top:20px!important;
  padding:0 14px 0 16px!important;
  border:1px solid #e4e8f0!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f7f8fb 100%)!important;
  color:#26334a!important;
  box-shadow:0 6px 16px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.9)!important;
  font-size:.70rem!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  text-decoration:none!important;
  cursor:pointer!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease!important;
}
#klikwjp-app-container #home .grid > div > a::after,
#klikwjp-app-container #home .grid > div > button::after{
  content:'→';
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  flex:0 0 27px;
  border-radius:8px;
  background:#182033;
  color:#fff;
  font-size:14px;
  line-height:1;
  transition:transform .2s ease,background .2s ease;
}
#klikwjp-app-container #home .grid > div > a:hover,
#klikwjp-app-container #home .grid > div > button:hover{
  transform:translateY(-2px)!important;
  border-color:#cfd6e2!important;
  background:linear-gradient(180deg,#fff 0%,#f1f3f7 100%)!important;
  color:#111827!important;
  box-shadow:0 12px 25px rgba(15,23,42,.11), inset 0 1px 0 rgba(255,255,255,.95)!important;
}
#klikwjp-app-container #home .grid > div > a:hover::after,
#klikwjp-app-container #home .grid > div > button:hover::after{
  transform:translateX(2px);
  background:#5b4bdb;
}
#klikwjp-app-container #home .grid > div > a:focus-visible,
#klikwjp-app-container #home .grid > div > button:focus-visible{
  outline:3px solid rgba(91,75,219,.22)!important;
  outline-offset:3px!important;
}
#klikwjp-app-container.dark #home .grid > div > h3{color:#f3f5f8!important}
#klikwjp-app-container.dark #home .grid > div > a,
#klikwjp-app-container.dark #home .grid > div > button{
  border-color:#303949!important;
  background:linear-gradient(180deg,#1d2430 0%,#171d27 100%)!important;
  color:#e7ebf2!important;
  box-shadow:0 8px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
#klikwjp-app-container.dark #home .grid > div > a::after,
#klikwjp-app-container.dark #home .grid > div > button::after{background:#f3f5f8;color:#182033}
#klikwjp-app-container.dark #home .grid > div > a:hover,
#klikwjp-app-container.dark #home .grid > div > button:hover{border-color:#465267!important}
@media(max-width:640px){
  #klikwjp-app-container #home .grid > div > a,
  #klikwjp-app-container #home .grid > div > button{
    min-height:44px!important;
    margin-top:16px!important;
    border-radius:12px!important;
    padding-left:14px!important;
    font-size:.67rem!important;
  }
}


/* ===== kwjp-hero-minimal-final (source block 23) ===== */

/* KLIKWJP — MINIMAL PREMIUM HERO / CONSOLIDATED RESPONSIVE RULES */
#klikwjp-app-container #home{padding-top:28px!important}
#klikwjp-app-container .kwjp-hero-minimal{
  position:relative!important;width:100%!important;min-height:500px!important;overflow:hidden!important;
  border-radius:0!important;padding:64px 72px!important;display:flex!important;align-items:center!important;
  background:#f5f3ee!important;color:#171717!important;box-shadow:none!important;
  border:1px solid #dedbd4!important;isolation:isolate!important;
}
#klikwjp-app-container .kwjp-hero-minimal::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:#171717;
}
#klikwjp-app-container .kwjp-minimal-copy{position:relative;z-index:3;max-width:760px;min-width:0}
#klikwjp-app-container .kwjp-minimal-label{
  font-size:11px;font-weight:800;letter-spacing:.22em;color:#77736b;margin:0 0 26px;
}
#klikwjp-app-container .kwjp-minimal-copy h2{
  margin:0!important;color:#171717!important;font-size:clamp(3.3rem,6.8vw,6.5rem)!important;
  line-height:.84!important;letter-spacing:-.075em!important;font-weight:650!important;
  max-width:100%;text-wrap:balance;
}
#klikwjp-app-container .kwjp-minimal-copy h2 em{font-style:normal;font-weight:350;color:#77736b}
#klikwjp-app-container .kwjp-minimal-cta{
  display:inline-flex;align-items:center;gap:18px;min-height:44px;margin-top:34px;padding:0 0 12px;
  border-bottom:1px solid #171717;color:#171717;font-size:13px;font-weight:750;text-decoration:none;
  transition:gap .2s ease;position:relative;z-index:4;
}
#klikwjp-app-container .kwjp-minimal-cta span{font-size:17px;font-weight:400;line-height:1}
#klikwjp-app-container .kwjp-minimal-cta:hover{gap:30px}
#klikwjp-app-container .kwjp-minimal-mark{
  position:absolute;right:8%;top:50%;transform:translateY(-50%);width:min(36vw,430px);height:min(36vw,430px);
  border:1px solid #d3d0c8;border-radius:50%;display:grid;place-items:center;z-index:1;
}
#klikwjp-app-container .kwjp-minimal-mark::before,#klikwjp-app-container .kwjp-minimal-mark::after{
  content:"";position:absolute;background:#d3d0c8;pointer-events:none;
}
#klikwjp-app-container .kwjp-minimal-mark::before{width:100%;height:1px}
#klikwjp-app-container .kwjp-minimal-mark::after{height:100%;width:1px}
#klikwjp-app-container .kwjp-minimal-mark img{
  position:relative;z-index:2;width:58%;height:58%;max-width:100%;object-fit:contain;display:block;
}
#klikwjp-app-container .kwjp-minimal-side{
  position:absolute;right:28px;bottom:28px;display:flex;align-items:center;gap:12px;
  font-size:9px;letter-spacing:.18em;color:#8b887f;font-weight:700;z-index:2;
}
#klikwjp-app-container .kwjp-minimal-side i{display:block;width:46px;height:1px;background:#bdb9b0}

/* Large tablets: preserve the editorial composition without crowding the copy. */
@media (min-width:768px) and (max-width:1023px){
  #klikwjp-app-container .kwjp-hero-minimal{min-height:500px;padding:58px 48px!important}
  #klikwjp-app-container .kwjp-minimal-copy{max-width:58%}
  #klikwjp-app-container .kwjp-minimal-copy h2{font-size:clamp(3rem,6.2vw,5.3rem)!important}
  #klikwjp-app-container .kwjp-minimal-mark{width:330px;height:330px;right:5%}
}

/* Phones: copy first, logo second; no horizontal competition between them. */
@media (max-width:767px){
  #klikwjp-app-container .kwjp-hero-minimal{
    min-height:560px!important;padding:42px 26px 34px!important;align-items:flex-start!important;
  }
  #klikwjp-app-container .kwjp-minimal-copy{max-width:100%;width:100%}
  #klikwjp-app-container .kwjp-minimal-label{font-size:10px;letter-spacing:.18em;margin-bottom:42px}
  #klikwjp-app-container .kwjp-minimal-copy h2{
    max-width:100%;font-size:clamp(2.6rem,12.8vw,4.3rem)!important;line-height:.87!important;
    letter-spacing:-.065em!important;text-wrap:initial;
  }
  #klikwjp-app-container .kwjp-minimal-cta{margin-top:28px;min-height:44px;gap:16px}
  #klikwjp-app-container .kwjp-minimal-mark{
    width:238px;height:238px;right:-42px;bottom:24px;top:auto;transform:none;
  }
  #klikwjp-app-container .kwjp-minimal-mark img{width:60%;height:60%}
  #klikwjp-app-container .kwjp-minimal-side{right:16px;bottom:14px;font-size:8px;gap:9px}
  #klikwjp-app-container .kwjp-minimal-side i{width:30px}
}

/* Narrow phones: keep the logo and signature below the action, not beside the copy. */
@media (max-width:430px){
  #klikwjp-app-container .kwjp-hero-minimal{min-height:540px!important;padding:36px 22px 30px!important}
  #klikwjp-app-container .kwjp-minimal-label{margin-bottom:36px}
  #klikwjp-app-container .kwjp-minimal-copy h2{font-size:clamp(2.45rem,12.2vw,3.8rem)!important;line-height:.88!important}
  #klikwjp-app-container .kwjp-minimal-cta{margin-top:25px}
  #klikwjp-app-container .kwjp-minimal-mark{width:205px;height:205px;right:-42px;bottom:25px}
  #klikwjp-app-container .kwjp-minimal-mark img{width:58%;height:58%}
  #klikwjp-app-container .kwjp-minimal-side{right:12px;bottom:12px;font-size:7.5px}
}

/* Very narrow phones: prioritize readable type and tap targets over decoration. */
@media (max-width:360px){
  #klikwjp-app-container .kwjp-hero-minimal{min-height:520px!important;padding:32px 18px 28px!important}
  #klikwjp-app-container .kwjp-minimal-label{margin-bottom:32px}
  #klikwjp-app-container .kwjp-minimal-copy h2{font-size:clamp(2.25rem,11.8vw,3.25rem)!important}
  #klikwjp-app-container .kwjp-minimal-cta{margin-top:22px}
  #klikwjp-app-container .kwjp-minimal-mark{width:180px;height:180px;right:-38px;bottom:24px}
  #klikwjp-app-container .kwjp-minimal-mark img{width:56%;height:56%}
}

@media(prefers-reduced-motion:reduce){#klikwjp-app-container .kwjp-minimal-cta{transition:none}}


/* ===== kwjp-footer-hero-harmonized (source block 24) ===== */

/* KLIKWJP — FOOTER / HERO HARMONIZATION */
#klikwjp-app-container .kwjp-footer-premium{
  margin-top:0!important;
  color:#55534d!important;
  background:#f5f3ee!important;
  border-top:1px solid #dedbd4!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#klikwjp-app-container .kwjp-footer-premium::before,
#klikwjp-app-container .kwjp-footer-premium::after{display:none!important}
#klikwjp-app-container .kwjp-footer-premium-grid{display:none!important}
#klikwjp-app-container .kwjp-footer-premium-inner{
  max-width:1440px!important;
  padding:52px 28px 24px!important;
}
#klikwjp-app-container .kwjp-footer-brandmark{
  background:#171717!important;
  color:#f5f3ee!important;
  box-shadow:none!important;
  border-radius:50%!important;
}
#klikwjp-app-container .kwjp-footer-brandname{color:#171717!important}
#klikwjp-app-container .kwjp-footer-kicker{color:#77736b!important}
#klikwjp-app-container .kwjp-footer-description{color:#77736b!important}
#klikwjp-app-container .kwjp-footer-columns{
  border-top:1px solid #dedbd4!important;
}
#klikwjp-app-container .kwjp-footer-heading{color:#171717!important}
#klikwjp-app-container .kwjp-footer-columns > div > a{color:#77736b!important}
#klikwjp-app-container .kwjp-footer-columns > div > a:hover{color:#171717!important}
#klikwjp-app-container .kwjp-footer-contact{color:#77736b!important}
#klikwjp-app-container .kwjp-footer-contact i{color:#171717!important}
#klikwjp-app-container .kwjp-footer-bottom-premium{
  border-top:1px solid #dedbd4!important;
  color:#77736b!important;
  padding-top:18px!important;
  align-items:center!important;
}
#klikwjp-app-container .kwjp-footer-copyright-badge{
  display:inline-flex!important;
  align-items:center!important;
  min-height:34px!important;
  padding:8px 14px!important;
  border:1px solid #d4d0c7!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.58)!important;
  color:#5f5c55!important;
  font-size:9px!important;
  line-height:1.35!important;
  font-weight:750!important;
  letter-spacing:.025em!important;
  box-shadow:0 5px 18px rgba(23,23,23,.06)!important;
}
#klikwjp-app-container.dark .kwjp-footer-premium{
  background:#11151a!important;border-top-color:#28303a!important;color:#b5bec9!important;
}
#klikwjp-app-container.dark .kwjp-footer-premium-inner{color:#b5bec9!important}
#klikwjp-app-container.dark .kwjp-footer-brandmark{background:#f1f3f5!important;color:#11151a!important}
#klikwjp-app-container.dark .kwjp-footer-brandname,
#klikwjp-app-container.dark .kwjp-footer-heading{color:#f1f3f5!important}
#klikwjp-app-container.dark .kwjp-footer-kicker,
#klikwjp-app-container.dark .kwjp-footer-description,
#klikwjp-app-container.dark .kwjp-footer-columns > div > a,
#klikwjp-app-container.dark .kwjp-footer-contact{color:#9ca8b6!important}
#klikwjp-app-container.dark .kwjp-footer-columns,
#klikwjp-app-container.dark .kwjp-footer-bottom-premium{border-color:#28303a!important}
#klikwjp-app-container.dark .kwjp-footer-contact i{color:#f1f3f5!important}
#klikwjp-app-container.dark .kwjp-footer-copyright-badge{
  background:rgba(255,255,255,.055)!important;border-color:#34404e!important;color:#b8c2ce!important;
}
@media(max-width:600px){
  #klikwjp-app-container .kwjp-footer-premium-inner{padding:42px 20px 20px!important}
  #klikwjp-app-container .kwjp-footer-copyright-badge{
    max-width:100%;font-size:8.5px!important;padding:8px 11px!important;
  }
}


/* ===== kwjp-requested-hero-and-legacy-notice (source block 25) ===== */

/* Primary system shortcuts in the home hero; scoped to avoid changing other modules. */
#klikwjp-app-container .kwjp-hero-links{display:flex;align-items:stretch;flex-wrap:wrap;gap:12px;margin-top:38px;position:relative;z-index:5}
#klikwjp-app-container .kwjp-hero-links .kwjp-minimal-cta{margin:0;min-height:72px;min-width:220px;padding:13px 17px;border:1px solid #171717;border-radius:13px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;gap:4px 18px;text-decoration:none;background:#171717;color:#fff;box-shadow:0 12px 26px rgba(23,23,23,.13);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-pickup{min-width:250px;background:linear-gradient(135deg,#171717,#34312b);border-color:#171717;box-shadow:0 12px 28px rgba(23,23,23,.22)}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-esdm{background:#fff;color:#171717;border-color:#d1cdc4;min-width:190px}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-whistle{background:linear-gradient(135deg,#7f1d1d,#b91c1c);color:#fff;border-color:#991b1b;min-width:210px;box-shadow:0 12px 28px rgba(127,29,29,.19)}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-whistle .kwjp-cta-kicker{color:#fee2e2;opacity:1}
#klikwjp-app-container .kwjp-hero-links .kwjp-minimal-cta:hover{transform:translateY(-3px);gap:4px;box-shadow:0 17px 34px rgba(23,23,23,.18)}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-kicker{grid-column:1/-1;font-size:9px;line-height:1.2;font-weight:850;letter-spacing:.16em;opacity:.68}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-title{font-size:15px;font-weight:850;letter-spacing:-.025em;line-height:1.25}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-arrow{grid-column:2;grid-row:2;font-size:19px;line-height:1}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-pickup .kwjp-cta-kicker{color:#d6d3d1;opacity:1}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-esdm .kwjp-cta-kicker{color:#78716c;opacity:1}
#kwjp-simulation-choices{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,18,30,.64);backdrop-filter:blur(7px)}
#kwjp-simulation-choices.is-open{display:flex}
#kwjp-simulation-choices .kwjp-sim-dialog{width:min(100%,560px);padding:28px;border-radius:22px;background:#fff;color:#172033;box-shadow:0 30px 90px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.65);animation:kwjpNoticeIn .18s ease-out}
#kwjp-simulation-choices .kwjp-sim-eyebrow{font-size:10px;letter-spacing:.15em;font-weight:850;color:#78716c}
#kwjp-simulation-choices h2{font-size:24px;line-height:1.2;font-weight:850;letter-spacing:-.04em;margin:8px 0;color:#171717}
#kwjp-simulation-choices .kwjp-sim-intro{font-size:14px;line-height:1.65;color:#57534e;margin:0 0 20px}
#kwjp-simulation-choices .kwjp-sim-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#kwjp-simulation-choices .kwjp-sim-option{display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;min-height:112px;padding:16px;border:1px solid #e7e5e4;border-radius:15px;background:#fafaf9;color:#171717;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}
#kwjp-simulation-choices .kwjp-sim-option:hover{transform:translateY(-2px);border-color:#a5b4fc;background:#eef2ff}
#kwjp-simulation-choices .kwjp-sim-option strong{font-size:14px;font-weight:850}
#kwjp-simulation-choices .kwjp-sim-option span{font-size:12px;color:#78716c;line-height:1.45}
#kwjp-simulation-choices .kwjp-sim-close{display:block;margin:18px 0 0 auto;min-height:42px;padding:0 16px;border:1px solid #e7e5e4;border-radius:11px;background:#f5f5f4;color:#44403c;font-size:12px;font-weight:800;cursor:pointer}
@media(max-width:520px){#kwjp-simulation-choices .kwjp-sim-dialog{padding:22px;border-radius:18px}#kwjp-simulation-choices .kwjp-sim-options{grid-template-columns:1fr}#kwjp-simulation-choices .kwjp-sim-option{min-height:0;flex-direction:row;align-items:center;justify-content:space-between;padding:14px}}
#kwjp-legacy-notice{position:fixed;inset:0;z-index:1000000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,18,30,.64);backdrop-filter:blur(7px)}
#kwjp-legacy-notice.is-open{display:flex}
#kwjp-legacy-notice .kwjp-notice-dialog{width:min(100%,510px);padding:28px;border-radius:22px;background:#fff;color:#172033;box-shadow:0 30px 90px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.65);animation:kwjpNoticeIn .18s ease-out}
#kwjp-legacy-notice .kwjp-notice-mark{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#fff7ed;color:#c2410c;font-size:21px;margin-bottom:18px}
#kwjp-legacy-notice .kwjp-notice-eyebrow{font-size:10px;letter-spacing:.15em;font-weight:850;color:#78716c}
#kwjp-legacy-notice h2{font-size:23px;line-height:1.2;letter-spacing:-.04em;font-weight:850;margin:8px 0 12px;color:#171717}
#kwjp-legacy-notice p{font-size:14px;line-height:1.7;color:#57534e;margin:0}
#kwjp-legacy-notice .kwjp-notice-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:24px}
#kwjp-legacy-notice button{min-height:44px;border-radius:11px;padding:0 16px;font-size:12px;font-weight:800;cursor:pointer}
#kwjp-legacy-notice .kwjp-notice-cancel{background:#f5f5f4;color:#44403c;border:1px solid #e7e5e4}
#kwjp-legacy-notice .kwjp-notice-legacy{background:#171717;color:#fff;border:1px solid #171717}
@keyframes kwjpNoticeIn{from{opacity:0;transform:translateY(7px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:767px){#klikwjp-app-container .kwjp-hero-links{display:grid;grid-template-columns:1fr;gap:9px;margin-top:30px;max-width:340px}#klikwjp-app-container .kwjp-hero-links .kwjp-minimal-cta{width:100%;min-width:0;min-height:62px;padding:11px 14px}#klikwjp-app-container .kwjp-hero-links .kwjp-cta-title{font-size:14px}#kwjp-legacy-notice .kwjp-notice-dialog{padding:23px;border-radius:18px}#kwjp-legacy-notice .kwjp-notice-actions{flex-direction:column-reverse}#kwjp-legacy-notice .kwjp-notice-actions button{width:100%}}
@media(prefers-reduced-motion:reduce){#klikwjp-app-container .kwjp-hero-links .kwjp-minimal-cta,#kwjp-legacy-notice .kwjp-notice-dialog{animation:none;transition:none}}

/* KLIKWJP refinement: compact hero, four shortcuts, mobile-safe logo, sequential home-card numbering. */
#klikwjp-app-container .kwjp-hero-minimal{
  min-height:0!important;padding:clamp(28px,3.5vw,44px) clamp(24px,4vw,52px)!important;
  border-radius:24px!important;align-items:center!important;
}
#klikwjp-app-container .kwjp-minimal-copy{max-width:850px!important;width:100%;}
#klikwjp-app-container .kwjp-minimal-label{margin-bottom:18px!important;font-size:10px!important;letter-spacing:.2em!important;}
#klikwjp-app-container .kwjp-minimal-copy h2{
  font-size:clamp(2.7rem,5.1vw,4.8rem)!important;line-height:.91!important;
  letter-spacing:-.065em!important;max-width:760px!important;
}
#klikwjp-app-container .kwjp-hero-links{gap:9px!important;margin-top:22px!important;max-width:100%!important;}
#klikwjp-app-container .kwjp-hero-links .kwjp-minimal-cta{
  flex:0 1 auto;min-width:0!important;min-height:60px!important;padding:10px 13px!important;
  border-radius:12px!important;gap:3px 12px!important;
}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-pickup{min-width:200px!important;}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-esdm{min-width:125px!important;}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-whistle{min-width:175px!important;}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-lelang{
  min-width:115px!important;background:linear-gradient(135deg,#075985,#0e7490)!important;
  color:#fff!important;border-color:#0e7490!important;box-shadow:0 10px 24px rgba(14,116,144,.18)!important;
}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-lelang .kwjp-cta-kicker{color:#cffafe!important;opacity:1!important;}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-title{font-size:13px!important;line-height:1.2!important;}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-kicker{font-size:8px!important;letter-spacing:.12em!important;}
#klikwjp-app-container .kwjp-minimal-mark{width:min(25vw,300px)!important;height:min(25vw,300px)!important;right:5%!important;opacity:.88;}
#klikwjp-app-container .kwjp-minimal-side{right:22px!important;bottom:18px!important;}
@media(max-width:767px){
  #klikwjp-app-container .kwjp-hero-minimal{
    min-height:0!important;padding:22px 17px 20px!important;align-items:flex-start!important;
    border-radius:19px!important;
  }
  #klikwjp-app-container .kwjp-minimal-mark{
    width:66px!important;height:66px!important;right:14px!important;top:12px!important;bottom:auto!important;
    transform:none!important;border-radius:50%!important;opacity:1!important;z-index:6!important;
    background:rgba(255,255,255,.94)!important;border-color:#d6d3d1!important;
  }
  #klikwjp-app-container .kwjp-minimal-mark::before,
  #klikwjp-app-container .kwjp-minimal-mark::after{display:none!important;}
  #klikwjp-app-container .kwjp-minimal-mark img{width:76%!important;height:76%!important;}
  #klikwjp-app-container .kwjp-minimal-side{display:none!important;}
  #klikwjp-app-container .kwjp-minimal-copy{padding-top:72px!important;max-width:100%!important;width:100%!important;}
  #klikwjp-app-container .kwjp-minimal-label{margin-bottom:12px!important;font-size:9px!important;}
  #klikwjp-app-container .kwjp-minimal-copy h2{
    font-size:clamp(2.15rem,9.2vw,3.15rem)!important;line-height:.94!important;
    letter-spacing:-.06em!important;max-width:100%!important;
  }
  #klikwjp-app-container .kwjp-hero-links{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;margin-top:17px!important;width:100%!important;
  }
  #klikwjp-app-container .kwjp-hero-links .kwjp-minimal-cta{
    width:100%!important;min-width:0!important;min-height:54px!important;padding:9px 10px!important;
    border-radius:11px!important;gap:3px 7px!important;
  }
  #klikwjp-app-container .kwjp-hero-links .kwjp-cta-pickup{min-width:0!important;}
  #klikwjp-app-container .kwjp-hero-links .kwjp-cta-esdm{min-width:0!important;}
  #klikwjp-app-container .kwjp-hero-links .kwjp-cta-whistle{min-width:0!important;}
  #klikwjp-app-container .kwjp-hero-links .kwjp-cta-lelang{min-width:0!important;}
  #klikwjp-app-container .kwjp-hero-links .kwjp-cta-kicker{font-size:7px!important;letter-spacing:.08em!important;}
  #klikwjp-app-container .kwjp-hero-links .kwjp-cta-title{font-size:12px!important;overflow-wrap:anywhere;}
  #klikwjp-app-container .kwjp-hero-links .kwjp-cta-arrow{font-size:15px!important;}
}
@media(max-width:360px){
  #klikwjp-app-container .kwjp-hero-minimal{padding:18px 13px 16px!important;}
  #klikwjp-app-container .kwjp-minimal-mark{width:58px!important;height:58px!important;right:11px!important;top:10px!important;}
  #klikwjp-app-container .kwjp-minimal-copy{padding-top:63px!important;}
  #klikwjp-app-container .kwjp-minimal-copy h2{font-size:clamp(2rem,9vw,2.5rem)!important;}
  #klikwjp-app-container .kwjp-hero-links .kwjp-cta-title{font-size:11px!important;}
}


/* ===== kwjp-legacy-password-gate-css (source block 26) ===== */

#kwjp-legacy-password-gate{position:fixed;inset:0;z-index:1000002;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(5,18,38,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#kwjp-legacy-password-gate.is-open{display:flex}
#kwjp-legacy-password-gate .kwjp-pass-dialog{width:min(100%,420px);padding:26px;border:1px solid #c9dcf5;border-radius:22px;background:linear-gradient(145deg,#fff,#edf5ff);box-shadow:0 28px 90px rgba(0,0,0,.3);color:#10233f}
#kwjp-legacy-password-gate .kwjp-pass-kicker{font-size:10px;font-weight:850;letter-spacing:.14em;color:#52709a}
#kwjp-legacy-password-gate h2{margin:8px 0;font-size:23px;line-height:1.25;font-weight:850;letter-spacing:-.035em;color:#10233f}
#kwjp-legacy-password-gate p{margin:0 0 18px;font-size:13px;line-height:1.7;color:#5a6e87}
#kwjp-legacy-password-gate label{display:block;margin-bottom:7px;font-size:12px;font-weight:800;color:#263e5c}
#kwjp-legacy-password-gate input{display:block;width:100%;min-height:48px;box-sizing:border-box;padding:12px 14px;border:1px solid #cbd8e8;border-radius:12px;background:#fff;color:#10233f;font-size:16px;outline:none}
#kwjp-legacy-password-gate input:focus{border-color:#3976d7;box-shadow:0 0 0 3px rgba(59,130,246,.14)}
#kwjp-legacy-password-gate .kwjp-pass-error{min-height:18px;margin:8px 0 0;color:#b42318;font-size:12px;font-weight:700}
#kwjp-legacy-password-gate .kwjp-pass-actions{display:flex;gap:10px;margin-top:16px}
#kwjp-legacy-password-gate button{flex:1;min-height:45px;border-radius:11px;padding:10px 14px;font-size:12px;font-weight:800;cursor:pointer}
#kwjp-legacy-password-gate .kwjp-pass-cancel{border:1px solid #d4dfed;background:#fff;color:#344a66}
#kwjp-legacy-password-gate .kwjp-pass-submit{border:1px solid #1d4f91;background:linear-gradient(135deg,#173d75,#2563eb);color:#fff}
@media(max-width:480px){#kwjp-legacy-password-gate .kwjp-pass-dialog{padding:21px;border-radius:18px}#kwjp-legacy-password-gate .kwjp-pass-actions{flex-direction:column-reverse}}


/* ===== kwjp-premium-glass-blue-system (source block 27) ===== */

/* Premium blue-glass visual layer. Presentation-only: preserves markup, URLs and app logic. */
#klikwjp-app-container{
  --kwjp-ink:#10233f;--kwjp-muted:#60728b;--kwjp-blue:#2563eb;--kwjp-blue-deep:#123b78;
  --kwjp-glass:rgba(244,249,255,.72);--kwjp-glass-border:rgba(147,197,253,.48);
}
#klikwjp-app-container #home .grid[data-kwjp-cards],
#klikwjp-app-container #home .grid{isolation:isolate}
#klikwjp-app-container #home [data-module]{
  position:relative!important;overflow:hidden!important;isolation:isolate;
  background:linear-gradient(145deg,rgba(255,255,255,.82) 0%,rgba(235,244,255,.70) 52%,rgba(226,239,255,.62) 100%)!important;
  border:1px solid var(--kwjp-glass-border)!important;border-radius:22px!important;
  box-shadow:0 12px 32px rgba(15,45,85,.075),inset 0 1px 0 rgba(255,255,255,.92)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;-webkit-backdrop-filter:blur(18px) saturate(145%)!important;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background .24s ease!important;
}
#klikwjp-app-container #home [data-module]::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;z-index:-1;
  background:linear-gradient(90deg,rgba(37,99,235,.06),rgba(59,130,246,.78),rgba(125,211,252,.36));
}
#klikwjp-app-container #home [data-module]::after{
  content:"";position:absolute;width:180px;height:180px;right:-105px;top:-115px;border-radius:50%;
  background:radial-gradient(circle,rgba(96,165,250,.13),rgba(96,165,250,0) 70%);pointer-events:none;z-index:-1;
}
#klikwjp-app-container #home [data-module]:hover{
  transform:translateY(-5px)!important;border-color:rgba(96,165,250,.72)!important;
  box-shadow:0 22px 48px rgba(15,45,85,.13),inset 0 1px 0 rgba(255,255,255,.98)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(231,242,255,.82))!important;
}
#klikwjp-app-container #home [data-module] h3{color:var(--kwjp-ink)!important;font-weight:800!important;letter-spacing:-.035em!important;}
#klikwjp-app-container #home [data-module] p{color:var(--kwjp-muted)!important;line-height:1.65!important;}
#klikwjp-app-container #home [data-module] a,
#klikwjp-app-container #home [data-module] button{
  color:#1d4ed8!important;font-weight:800!important;text-decoration:none!important;
  transition:color .2s ease,background .2s ease,transform .2s ease!important;
}
#klikwjp-app-container #home [data-module] a:hover,
#klikwjp-app-container #home [data-module] button:hover{color:#0f2f65!important;transform:translateY(-1px);}
#klikwjp-app-container #home [data-module] > div:first-child{
  background:linear-gradient(145deg,rgba(219,234,254,.92),rgba(191,219,254,.62))!important;
  border:1px solid rgba(147,197,253,.55)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 18px rgba(37,99,235,.08)!important;
}
#klikwjp-app-container #home .kwjp-card-icon{color:#2458a6!important;}
#klikwjp-app-container #home .kwjp-card-icon svg{stroke:currentColor!important;}
/* Hero: one cohesive midnight-blue glass language across all four shortcuts. */
#klikwjp-app-container .kwjp-hero-minimal{
  background:radial-gradient(ellipse at 88% 8%,rgba(59,130,246,.24),transparent 36%),
    linear-gradient(135deg,#07172d 0%,#102b50 55%,#153e6d 100%)!important;
  border:1px solid rgba(147,197,253,.24)!important;
  box-shadow:0 24px 58px rgba(8,31,61,.22),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
#klikwjp-app-container .kwjp-minimal-copy h2{color:#f8fbff!important;text-shadow:0 3px 22px rgba(0,0,0,.14)!important;}
#klikwjp-app-container .kwjp-minimal-label{color:#a8c9f7!important;}
#klikwjp-app-container .kwjp-hero-links .kwjp-minimal-cta{
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(191,219,254,.075))!important;
  color:#f8fbff!important;border:1px solid rgba(191,219,254,.34)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.20)!important;
  backdrop-filter:blur(16px) saturate(145%)!important;-webkit-backdrop-filter:blur(16px) saturate(145%)!important;
}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-pickup,
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-esdm,
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-whistle,
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-lelang{
  background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(147,197,253,.08))!important;
  color:#f8fbff!important;border-color:rgba(191,219,254,.36)!important;box-shadow:0 10px 24px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.2)!important;
}
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-kicker,
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-pickup .kwjp-cta-kicker,
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-esdm .kwjp-cta-kicker,
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-whistle .kwjp-cta-kicker,
#klikwjp-app-container .kwjp-hero-links .kwjp-cta-lelang .kwjp-cta-kicker{color:#bfdbfe!important;opacity:1!important;}
#klikwjp-app-container .kwjp-hero-links .kwjp-minimal-cta:hover{
  background:linear-gradient(145deg,rgba(96,165,250,.28),rgba(191,219,254,.13))!important;
  border-color:rgba(219,234,254,.68)!important;box-shadow:0 17px 34px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
#klikwjp-app-container .kwjp-minimal-mark{filter:drop-shadow(0 12px 22px rgba(0,0,0,.18));}
/* Modal surfaces match the same glass-blue palette. */
#kwjp-simulation-choices,#kwjp-legacy-notice{background:rgba(5,18,38,.68)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;}
#kwjp-simulation-choices .kwjp-sim-dialog,#kwjp-legacy-notice .kwjp-notice-dialog{
  background:linear-gradient(145deg,rgba(250,253,255,.97),rgba(229,240,255,.95))!important;
  border:1px solid rgba(191,219,254,.82)!important;border-radius:24px!important;
  box-shadow:0 32px 90px rgba(3,18,42,.35),inset 0 1px 0 #fff!important;
}
#kwjp-simulation-choices h2,#kwjp-legacy-notice h2{color:#10233f!important;}
#kwjp-simulation-choices .kwjp-sim-option{background:rgba(255,255,255,.64)!important;border-color:rgba(147,197,253,.55)!important;color:#10233f!important;}
#kwjp-simulation-choices .kwjp-sim-option:hover{background:rgba(219,234,254,.82)!important;border-color:#60a5fa!important;}
#kwjp-simulation-choices .kwjp-sim-option span{color:#60728b!important;}
#kwjp-simulation-choices .kwjp-sim-close,#kwjp-legacy-notice .kwjp-notice-cancel{background:rgba(219,234,254,.68)!important;border-color:rgba(147,197,253,.55)!important;color:#1e3a5f!important;}
#kwjp-legacy-notice .kwjp-notice-legacy{background:linear-gradient(135deg,#173d75,#2563eb)!important;border-color:#2563eb!important;color:#fff!important;}
@media(max-width:767px){
  #klikwjp-app-container #home [data-module]{border-radius:18px!important;box-shadow:0 9px 24px rgba(15,45,85,.08),inset 0 1px 0 rgba(255,255,255,.9)!important;}
  #klikwjp-app-container #home [data-module]:hover{transform:translateY(-2px)!important;}
  #klikwjp-app-container .kwjp-hero-minimal{box-shadow:0 18px 38px rgba(8,31,61,.2),inset 0 1px 0 rgba(255,255,255,.12)!important;}
}
@media(prefers-reduced-motion:reduce){#klikwjp-app-container #home [data-module],#klikwjp-app-container .kwjp-hero-links .kwjp-minimal-cta{transition:none!important;}}


/* ===== kwjp-premium-glass-blue-harmonized-final (source block 28) ===== */

/* Unified visual system: cool mist canvas, navy hero/header/footer, blue-glass cards.
   Visual-only overrides; no HTML structure, destinations, or application handlers changed. */
body.bg-gray-50{
  background:#eaf1fa!important;
}
#klikwjp-app-container{
  color:#172b49!important;
  background:
    radial-gradient(ellipse at 8% 0%,rgba(191,219,254,.42),transparent 34%),
    linear-gradient(180deg,#edf4fc 0%,#f5f8fd 48%,#eaf1fa 100%)!important;
}
/* Keep the content canvas continuous between sections. */
#klikwjp-app-container #home,
#klikwjp-app-container main,
#klikwjp-app-container section:not(.kwjp-hero-minimal){
  background-color:transparent;
}
#klikwjp-app-container .kwjp-header-premium{
  color:#f4f8ff!important;
  background:linear-gradient(112deg,rgba(7,23,45,.98),rgba(16,43,80,.97) 58%,rgba(21,62,109,.96))!important;
  border-bottom:1px solid rgba(147,197,253,.22)!important;
  box-shadow:0 10px 30px rgba(8,31,61,.12)!important;
}
#klikwjp-app-container .kwjp-header-premium h1,
#klikwjp-app-container .kwjp-header-premium nav a,
#klikwjp-app-container .kwjp-header-premium nav button{
  color:#edf5ff!important;
}
#klikwjp-app-container .kwjp-header-premium nav a:hover,
#klikwjp-app-container .kwjp-header-premium nav button:hover{
  color:#bfdbfe!important;
}
/* Main home cards: consistent icy-blue glass with readable text. */
#klikwjp-app-container #home [data-module]{
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(232,242,254,.68))!important;
  border-color:rgba(125,166,219,.34)!important;
  box-shadow:0 14px 34px rgba(18,52,91,.075),inset 0 1px 0 rgba(255,255,255,.95)!important;
  backdrop-filter:blur(18px) saturate(138%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(138%)!important;
}
#klikwjp-app-container #home [data-module]:hover{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(222,237,255,.84))!important;
  border-color:rgba(96,165,250,.62)!important;
  box-shadow:0 20px 42px rgba(18,52,91,.12),inset 0 1px 0 #fff!important;
}
#klikwjp-app-container #home [data-module] h3{color:#122947!important}
#klikwjp-app-container #home [data-module] p{color:#536984!important}
#klikwjp-app-container #home [data-module] > div:first-child{
  background:linear-gradient(145deg,rgba(219,234,254,.9),rgba(191,219,254,.68))!important;
  border-color:rgba(125,166,219,.42)!important;
}
/* Footer intentionally uses the same midnight-blue family as the hero for a composed finish. */
#klikwjp-app-container .kwjp-footer-premium{
  position:relative!important;
  overflow:hidden!important;
  color:#dbeafe!important;
  background:
    radial-gradient(ellipse at 85% 0%,rgba(59,130,246,.22),transparent 38%),
    linear-gradient(135deg,#07172d 0%,#102b50 58%,#12365f 100%)!important;
  border-top:1px solid rgba(147,197,253,.22)!important;
  box-shadow:0 -12px 34px rgba(8,31,61,.06)!important;
}
#klikwjp-app-container .kwjp-footer-premium::before{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;
  background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 42%,rgba(96,165,250,.045))!important;
  pointer-events:none!important;
}
#klikwjp-app-container .kwjp-footer-premium-grid{display:block!important;opacity:.16!important}
#klikwjp-app-container .kwjp-footer-premium-inner{position:relative!important;z-index:1!important}
#klikwjp-app-container .kwjp-footer-brandmark{
  color:#eff6ff!important;
  background:linear-gradient(145deg,rgba(147,197,253,.25),rgba(59,130,246,.15))!important;
  border:1px solid rgba(191,219,254,.36)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 22px rgba(0,0,0,.14)!important;
}
#klikwjp-app-container .kwjp-footer-brandname,
#klikwjp-app-container .kwjp-footer-heading{color:#f4f8ff!important}
#klikwjp-app-container .kwjp-footer-kicker{color:#9fc5f5!important}
#klikwjp-app-container .kwjp-footer-description,
#klikwjp-app-container .kwjp-footer-contact,
#klikwjp-app-container .kwjp-footer-columns > div > a{color:#b8cce5!important}
#klikwjp-app-container .kwjp-footer-columns,
#klikwjp-app-container .kwjp-footer-bottom-premium{border-color:rgba(191,219,254,.18)!important}
#klikwjp-app-container .kwjp-footer-columns > div > a:hover,
#klikwjp-app-container .kwjp-footer-contact i{color:#eff6ff!important}
#klikwjp-app-container .kwjp-footer-copyright-badge{
  color:#dbeafe!important;
  background:rgba(191,219,254,.08)!important;
  border-color:rgba(191,219,254,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
/* Retain a coordinated appearance when the app's existing dark-mode toggle is enabled. */
#klikwjp-app-container.dark{
  background:linear-gradient(180deg,#081426 0%,#0b1c33 55%,#081426 100%)!important;
  color:#e5eefb!important;
}
#klikwjp-app-container.dark #home [data-module]{
  background:linear-gradient(145deg,rgba(25,48,77,.9),rgba(13,33,59,.86))!important;
  border-color:rgba(125,166,219,.24)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
#klikwjp-app-container.dark #home [data-module] h3{color:#edf5ff!important}
#klikwjp-app-container.dark #home [data-module] p{color:#b6c9e1!important}
#klikwjp-app-container.dark .kwjp-header-premium,
#klikwjp-app-container.dark .kwjp-footer-premium{
  background:linear-gradient(135deg,#050e1c,#0b1e36 58%,#102b4a)!important;
}
@media(max-width:767px){
  #klikwjp-app-container #home [data-module]{border-radius:18px!important}
  #klikwjp-app-container .kwjp-footer-premium-inner{padding-top:38px!important}
}


/* ===== kwjp-mobile-menu-brand-fix (source block 29) ===== */

/* Mobile drawer refinement: keep WJP monogram and KlikWJP wordmark on one line. */
#klikwjp-app-container #mobileMenu{
  width:min(86vw,380px)!important;
  max-width:380px!important;
  min-width:0!important;
  overflow-x:hidden!important;
  background:linear-gradient(165deg,#071a31 0%,#082746 52%,#0b3157 100%)!important;
  border-right:1px solid rgba(191,219,254,.18)!important;
  box-shadow:22px 0 60px rgba(2,12,27,.32)!important;
}
#klikwjp-app-container #mobileMenu > .p-6{
  padding:20px 18px max(24px,env(safe-area-inset-bottom))!important;
}
#klikwjp-app-container #mobileMenu > .p-6 > .flex.items-center.justify-between{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-width:0!important;
  margin-bottom:28px!important;
}
#klikwjp-app-container #mobileMenu > .p-6 > .flex.items-center.justify-between > .flex.items-center.space-x-3{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex:1 1 auto!important;
  min-width:0!important;
}
#klikwjp-app-container #mobileMenu .w-8.h-8{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 42px!important;
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,#f8fbff,#dbeafe)!important;
  box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(0,0,0,.18)!important;
  overflow:visible!important;
}
#klikwjp-app-container #mobileMenu .w-8.h-8 span{
  display:block!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  color:#12365f!important;
  font-size:11px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  font-weight:800!important;
}
#klikwjp-app-container #mobileMenu h1{
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  font-size:clamp(17px,4.7vw,20px)!important;
  line-height:1.2!important;
  letter-spacing:-.035em!important;
  color:#f5f9ff!important;
}
#klikwjp-app-container #mobileMenu > .p-6 > .flex.items-center.justify-between > button{
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:12px!important;
  background:rgba(219,234,254,.09)!important;
  border:1px solid rgba(219,234,254,.15)!important;
  color:#f5f9ff!important;
}
#klikwjp-app-container #mobileMenu nav{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}
#klikwjp-app-container #mobileMenu nav a{
  width:100%!important;
  min-width:0!important;
  min-height:52px!important;
  padding:13px 14px!important;
  display:flex!important;
  align-items:center!important;
  border-radius:15px!important;
  border:1px solid rgba(147,197,253,.13)!important;
  background:linear-gradient(120deg,rgba(16,52,87,.72),rgba(9,38,68,.58))!important;
  color:#edf5ff!important;
  font-size:15px!important;
  line-height:1.35!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
#klikwjp-app-container #mobileMenu nav a:hover,
#klikwjp-app-container #mobileMenu nav a:focus-visible{
  background:linear-gradient(120deg,rgba(30,76,119,.9),rgba(13,51,86,.82))!important;
  border-color:rgba(147,197,253,.3)!important;
}
@media(max-width:380px){
  #klikwjp-app-container #mobileMenu{width:88vw!important}
  #klikwjp-app-container #mobileMenu > .p-6{padding-inline:14px!important}
  #klikwjp-app-container #mobileMenu .w-8.h-8{flex-basis:38px!important;width:38px!important;min-width:38px!important;height:38px!important}
  #klikwjp-app-container #mobileMenu h1{font-size:17px!important}
  #klikwjp-app-container #mobileMenu nav a{font-size:14px!important;padding-inline:12px!important}
}


/* ===== kwjp-security-logo-final (source block 30) ===== */

/* Header logo: use the same official WJP asset as the hero, never generic text. */
#klikwjp-app-container .kwjp-header-premium .official-wjp-header-logo{
  flex:0 0 44px!important;width:44px!important;height:44px!important;
  display:grid!important;place-items:center!important;padding:5px!important;
  background:#fff!important;border:1px solid rgba(147,197,253,.52)!important;
  border-radius:13px!important;overflow:hidden!important;
  box-shadow:0 7px 18px rgba(4,20,42,.2)!important;
}
#klikwjp-app-container .kwjp-header-premium .official-wjp-header-logo::after{display:none!important}
#klikwjp-app-container .kwjp-header-premium .official-wjp-header-logo img{
  display:block!important;width:100%!important;height:100%!important;
  object-fit:contain!important;max-width:100%!important;max-height:100%!important;
}
#klikwjp-app-container #mobileMenu{
  width:min(340px,88vw)!important;max-width:88vw!important;
  height:100dvh!important;overflow-y:auto!important;
  background:linear-gradient(180deg,#061b33 0%,#082846 100%)!important;
  box-shadow:18px 0 44px rgba(0,12,30,.28)!important;
}
#klikwjp-app-container #mobileMenu > div{padding:22px 18px!important}
#klikwjp-app-container #mobileMenu .flex.items-center.justify-between{gap:12px!important}
#klikwjp-app-container #mobileMenu .flex.items-center.space-x-3{gap:10px!important;min-width:0!important}
#klikwjp-app-container #mobileMenu .official-wjp-header-logo{
  flex:0 0 36px!important;width:36px!important;height:36px!important;
  border-radius:11px!important;padding:4px!important;
}
#klikwjp-app-container #mobileMenu h1{
  min-width:0!important;white-space:nowrap!important;
  font-size:18px!important;letter-spacing:-.035em!important;
}
#klikwjp-app-container #mobileMenu button[onclick*="toggleMobileMenu"]{
  flex:0 0 40px!important;width:40px!important;height:40px!important;
  display:grid!important;place-items:center!important;border-radius:12px!important;
  background:rgba(255,255,255,.09)!important;border:1px solid rgba(191,219,254,.18)!important;
}
#klikwjp-app-container #mobileMenu nav{display:grid!important;gap:10px!important}
#klikwjp-app-container #mobileMenu nav a{
  min-height:54px!important;display:flex!important;align-items:center!important;
  padding:14px 15px!important;border:1px solid rgba(147,197,253,.13)!important;
  border-radius:15px!important;background:rgba(8,48,82,.68)!important;
  line-height:1.35!important;overflow-wrap:anywhere!important;
}
#klikwjp-app-container #mobileMenu nav a:active,
#klikwjp-app-container #mobileMenu nav a:hover{
  background:rgba(30,83,130,.76)!important;border-color:rgba(147,197,253,.32)!important;
}
@media(max-width:380px){
  #klikwjp-app-container .kwjp-header-premium > div:first-child{padding-left:14px!important;padding-right:14px!important}
  #klikwjp-app-container .kwjp-header-premium h1{font-size:19px!important}
  #klikwjp-app-container #mobileMenu > div{padding:18px 14px!important}
}


/* ===== kwjp-notice-readable-final (source block 31) ===== */

/* Final override khusus pengumuman perubahan sistem */
#kwjp-legacy-notice .kwjp-notice-dialog{
  box-sizing:border-box!important;width:min(100%,540px)!important;max-height:min(88vh,820px)!important;
  overflow-y:auto!important;padding:26px!important;border-radius:22px!important;color:#172033!important;
}
#kwjp-legacy-notice .kwjp-notice-eyebrow{margin:14px 0 8px!important;color:#5267b8!important;font-size:10px!important;line-height:1.6!important;letter-spacing:.09em!important}
#kwjp-legacy-notice #kwjp-notice-title{margin:0 0 19px!important;font-size:clamp(21px,4vw,27px)!important;line-height:1.25!important;letter-spacing:-.035em!important;color:#10233f!important}
#kwjp-legacy-notice .kwjp-notice-content{display:flex!important;flex-direction:column!important;gap:12px!important}
#kwjp-legacy-notice .kwjp-notice-date{display:flex!important;flex-direction:column!important;gap:5px!important;padding:13px 15px!important;margin:0!important;border:1px solid #dbe5fb!important;border-radius:12px!important;background:#f3f7ff!important}
#kwjp-legacy-notice .kwjp-notice-date-label{color:#61718b!important;font-size:10px!important;font-weight:800!important;letter-spacing:.08em!important}
#kwjp-legacy-notice .kwjp-notice-date strong{color:#244ca3!important;font-size:14px!important}
#kwjp-legacy-notice .kwjp-notice-intro{margin:0!important;color:#475467!important;font-size:13px!important;line-height:1.8!important}
#kwjp-legacy-notice .kwjp-notice-item{display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;gap:11px!important;align-items:start!important;padding:13px!important;margin:0!important;border:1px solid #e8ebf1!important;border-radius:14px!important;background:#fbfcfe!important}
#kwjp-legacy-notice .kwjp-notice-number{display:flex!important;width:30px!important;height:30px!important;align-items:center!important;justify-content:center!important;border-radius:9px!important;background:#e9efff!important;color:#3156b5!important;font-size:11px!important;font-weight:800!important}
#kwjp-legacy-notice .kwjp-notice-item h3{margin:1px 0 5px!important;color:#202b3c!important;font-size:13px!important;font-weight:800!important;line-height:1.5!important}
#kwjp-legacy-notice .kwjp-notice-item p{margin:0!important;color:#596579!important;font-size:12px!important;line-height:1.75!important}
#kwjp-legacy-notice .kwjp-notice-primary{border-color:#dce6ff!important;background:#f7f9ff!important}
#kwjp-legacy-notice .kwjp-notice-warning{border-color:#f5e5c9!important;background:#fffbf4!important}
#kwjp-legacy-notice .kwjp-notice-warning .kwjp-notice-number{background:#fff0d5!important;color:#9a5a08!important}
#kwjp-legacy-notice .kwjp-notice-success{border-color:#d8eee1!important;background:#f5fcf7!important}
#kwjp-legacy-notice .kwjp-notice-success .kwjp-notice-number{background:#dff5e7!important;color:#167647!important}
#kwjp-legacy-notice .kwjp-notice-closing{margin:2px 0 0!important;padding-top:13px!important;border-top:1px solid #e9edf3!important;color:#667085!important;font-size:12px!important;line-height:1.8!important}
#kwjp-legacy-notice .kwjp-notice-actions{display:flex!important;gap:10px!important;justify-content:flex-end!important;margin-top:20px!important}
#kwjp-legacy-notice .kwjp-notice-actions button{flex:1 1 0!important;min-width:0!important;min-height:44px!important;padding:10px 13px!important;border-radius:11px!important;font-size:12px!important;line-height:1.4!important;white-space:normal!important}
#kwjp-legacy-notice .kwjp-notice-cancel{background:#eaf1ff!important;border-color:#cbdaf7!important;color:#1e3a5f!important}
#kwjp-legacy-notice .kwjp-notice-legacy{background:linear-gradient(135deg,#173d75,#2563eb)!important;border-color:#2563eb!important;color:#fff!important}
@media(max-width:480px){
 #kwjp-legacy-notice{padding:12px!important}
 #kwjp-legacy-notice .kwjp-notice-dialog{width:100%!important;max-height:90dvh!important;padding:20px 16px!important;border-radius:18px!important}
 #kwjp-legacy-notice .kwjp-notice-item{grid-template-columns:29px minmax(0,1fr)!important;gap:9px!important;padding:11px!important}
 #kwjp-legacy-notice .kwjp-notice-number{width:28px!important;height:28px!important}
 #kwjp-legacy-notice .kwjp-notice-actions{flex-direction:column-reverse!important}
 #kwjp-legacy-notice .kwjp-notice-actions button{width:100%!important;flex:auto!important;min-height:46px!important}
}
@media(prefers-reduced-motion:reduce){#kwjp-legacy-notice .kwjp-notice-dialog{animation:none!important}}