:root{
  --primary:#0f4c81;
  --primary2:#0ea5c6;
  --dark:#0a2f55;
  --bg:#eaf6ff;
  --card:rgba(255,255,255,.86);
  --line:#dce8f2;
  --text:#263447;
  --muted:#6b778c;
  --green:#198754;
  --orange:#d97706;
  --red:#d93025;
  --blue:#0b76bd;
  --shadow:0 20px 45px rgba(15,76,129,.12);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;color:var(--text);background:linear-gradient(135deg,#edf9ff,#f8fbff);min-height:100vh;overflow-x:hidden}
.hidden{display:none!important}
.bg-orb{position:fixed;border-radius:50%;filter:blur(18px);opacity:.35;z-index:-1;animation:float 8s ease-in-out infinite alternate}
.orb-a{width:360px;height:360px;background:#60d8ff;top:60px;left:140px}.orb-b{width:420px;height:420px;background:#7dd3fc;right:-80px;top:240px;animation-delay:1s}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-25px)}}
.fade-up{animation:fadeUp .35s ease both}@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:100%;max-width:430px;background:var(--card);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.8);border-radius:28px;padding:34px;box-shadow:var(--shadow)}
.logo-box,.logo-mini{display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2));font-weight:900;box-shadow:0 15px 35px rgba(14,165,198,.28)}.logo-box{width:64px;height:64px;border-radius:18px;margin-bottom:16px}.logo-mini{width:52px;height:52px;border-radius:16px;flex:0 0 auto}
h1{margin:0;color:var(--dark);font-size:40px} .login-card p,.topbar p{font-weight:800;margin:6px 0 2px}.login-card small,.topbar small,.panel-sub{color:var(--muted)}
label{display:block;font-size:13px;font-weight:800;margin:14px 0 7px;color:#344256}input,select,textarea{width:100%;padding:13px 14px;border:1px solid #ccddeb;border-radius:14px;outline:none;background:rgba(255,255,255,.92);font-size:14px;transition:.22s}input:focus,select:focus,textarea:focus{border-color:#29b6d3;box-shadow:0 0 0 4px rgba(41,182,211,.14)}
button{border:0;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:white;font-weight:900;padding:13px 18px;cursor:pointer;transition:.22s;box-shadow:0 14px 28px rgba(15,76,129,.16)}button:hover{transform:translateY(-2px);box-shadow:0 18px 32px rgba(15,76,129,.22)}button:disabled{opacity:.65;cursor:not-allowed;transform:none}.btn-danger{background:linear-gradient(135deg,#df382e,#ff675f)}.btn-soft{background:#eef6fc;color:var(--dark);box-shadow:none}.btn-green{background:linear-gradient(135deg,#17854d,#28b66d)}.btn-orange{background:linear-gradient(135deg,#d97706,#f59e0b)}.btn-red{background:linear-gradient(135deg,#c92d24,#f05c52)}.btn-mini{padding:9px 11px;border-radius:10px;font-size:12px;margin-right:6px;margin-top:5px}
.msg{margin-top:12px;color:#3d4b5f;font-size:14px}.app-page{padding:24px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--card);border:1px solid rgba(255,255,255,.85);backdrop-filter:blur(18px);border-radius:28px;padding:22px 24px;box-shadow:var(--shadow)}.topbar-left{display:flex;align-items:center;gap:15px}.topbar h2{margin:0;color:var(--dark);font-size:30px}
.menu-nav{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.menu-nav button{background:rgba(255,255,255,.75);color:var(--dark);box-shadow:none;border:1px solid #d7e5ef}.menu-nav button.active{background:linear-gradient(135deg,var(--primary),var(--primary2));color:white;box-shadow:0 15px 26px rgba(15,76,129,.18)}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.summary-card{background:var(--card);border:1px solid rgba(255,255,255,.88);border-radius:22px;padding:19px;box-shadow:var(--shadow);position:relative;overflow:hidden}.summary-card:after{content:"";position:absolute;width:95px;height:95px;border-radius:50%;right:-25px;top:-25px;background:rgba(14,165,198,.12)}.summary-card span{display:block;color:var(--muted);font-size:13px;font-weight:800}.summary-card b{display:block;margin-top:8px;color:var(--dark);font-size:22px}
.panel{background:var(--card);border:1px solid rgba(255,255,255,.88);backdrop-filter:blur(18px);border-radius:24px;padding:22px;margin-bottom:20px;box-shadow:var(--shadow)}.panel h3{margin:0 0 6px;color:var(--dark);font-size:21px}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.field{min-width:0}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:white}table{width:100%;border-collapse:collapse;min-width:980px}th,td{padding:13px 12px;border-bottom:1px solid #edf2f6;text-align:left;font-size:14px;vertical-align:middle}th{background:#f3f8fc;color:#334155;text-transform:uppercase;font-size:12px;letter-spacing:.4px}tbody tr:hover{background:#f9fdff}.empty{text-align:center;color:var(--muted);padding:25px!important}.badge{display:inline-block;padding:6px 10px;border-radius:99px;font-size:12px;font-weight:900;white-space:nowrap}.badge-blue{background:#e0f2fe;color:#0369a1}.badge-green{background:#dcfce7;color:#166534}.badge-red{background:#fee2e2;color:#991b1b}.badge-orange{background:#ffedd5;color:#9a3412}.badge-gray{background:#eef2f7;color:#475569}.progress-bar{height:9px;background:#e8f1f8;border-radius:99px;overflow:hidden}.progress-bar div{height:100%;background:linear-gradient(135deg,var(--primary),var(--primary2));border-radius:99px}.admin-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr auto;gap:12px;align-items:center;border:1px solid #e4eef6;border-radius:16px;background:white;padding:14px;margin-top:10px}.muted{color:var(--muted)}
.loading-overlay{position:fixed;inset:0;background:rgba(8,24,40,.38);backdrop-filter:blur(9px) saturate(1.05);z-index:9999;display:grid;place-items:center}.loader-card{width:min(340px,88vw);padding:30px 28px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.92);border-radius:26px;box-shadow:0 28px 75px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.85);text-align:center;position:relative;overflow:hidden}.loader-card:before{content:"";position:absolute;inset:-80px;background:conic-gradient(from 180deg,transparent,rgba(14,165,198,.18),transparent,rgba(15,76,129,.10),transparent);animation:loaderAura 4s linear infinite}.loader-card:after{content:"";position:absolute;inset:1px;border-radius:25px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(245,252,255,.90));z-index:0}.loader-card>*{position:relative;z-index:2}.loader-logo-stage{width:92px;height:92px;margin:0 auto 16px;position:relative;display:grid;place-items:center}.loader-logo-wrap{width:68px;height:68px;border-radius:22px;background:rgba(255,255,255,.96);display:grid;place-items:center;box-shadow:0 18px 36px rgba(15,76,129,.18);animation:loaderLogoBreath 1.25s ease-in-out infinite alternate}.loader-logo-wrap img{width:92%;height:92%;object-fit:contain;display:block;animation:loaderLogoFloat 1.1s ease-in-out infinite alternate}.loader-ring{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(14,165,198,.18);border-top-color:#0ea5c6;border-right-color:#0f4c81;animation:loaderRingSpin 1.15s linear infinite}.loader-ring-2{inset:9px;border-width:2px;border-left-color:#f0b400;border-bottom-color:#0fa958;border-top-color:rgba(14,165,198,.15);animation-duration:1.75s;animation-direction:reverse;opacity:.78}.loader-card b{display:block;color:var(--dark);font-size:18px;letter-spacing:.2px}.loader-card small{display:block;color:var(--muted);margin-top:6px}@keyframes loaderRingSpin{to{transform:rotate(360deg)}}@keyframes loaderLogoBreath{from{transform:scale(.95);box-shadow:0 14px 28px rgba(15,76,129,.16)}to{transform:scale(1.04);box-shadow:0 22px 44px rgba(14,165,198,.24)}}@keyframes loaderLogoFloat{from{transform:translateY(2px)}to{transform:translateY(-3px)}}@keyframes loaderAura{to{transform:rotate(360deg)}}
.modal-backdrop{position:fixed;inset:0;background:rgba(12,31,50,.45);backdrop-filter:blur(8px);z-index:9000;display:grid;place-items:center;padding:20px}.modal-card{width:min(920px,96vw);background:rgba(255,255,255,.96);border-radius:24px;padding:22px;box-shadow:0 25px 70px rgba(0,0,0,.22)}.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}.modal-head h3{margin:0;color:var(--dark)}.modal-head p{margin:5px 0 0;color:var(--muted)}
@media(max-width:1000px){.summary-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}.admin-row{grid-template-columns:1fr}}@media(max-width:650px){.app-page{padding:14px}.topbar{align-items:flex-start;flex-direction:column}.summary-grid,.form-grid{grid-template-columns:1fr}.topbar h2{font-size:25px}table{min-width:900px}}

.readonly-total{background:#eef7ff!important;font-weight:900;color:var(--dark);cursor:not-allowed}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0}
input[type=number]{appearance:textfield;-moz-appearance:textfield}

textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #d7dee8;
  border-radius: 13px;
  font-size: 14px;
  font-family: inherit;
  background: rgba(255,255,255,.92);
  outline: none;
  resize: vertical;
}
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(25,167,206,.14);
}
.field.full {
  grid-column: 1 / -1;
}
.note-cell {
  max-width: 260px;
  white-space: normal;
  line-height: 1.45;
  color: #334155;
}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin:14px 0}.toolbar .field{min-width:180px;flex:1}.toolbar .field.small{max-width:220px}.table-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}.pager{display:flex;gap:8px;align-items:center}.pager button{padding:9px 12px;border-radius:10px}.btn-refresh{background:linear-gradient(135deg,#0f4c81,#0ea5c6)}.topbar-actions{display:flex;gap:10px;align-items:center}.reason-box{margin-top:6px;padding:9px 10px;border-radius:12px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;font-size:12px;line-height:1.45}.history-box{margin-top:6px;padding:9px 10px;border-radius:12px;background:#eef6ff;color:#0a2f55;border:1px solid #bfdbfe;font-size:12px;line-height:1.45}.doc-upload-row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:12px;align-items:end;margin-top:10px;padding:12px;border:1px solid #e4eef6;border-radius:16px;background:rgba(255,255,255,.65)}.admin-note-input{min-width:200px}.nowrap{white-space:nowrap}.filter-card{background:rgba(255,255,255,.68);border:1px solid #e4eef6;border-radius:18px;padding:14px;margin:12px 0}@media(max-width:800px){.doc-upload-row{grid-template-columns:1fr}.topbar-actions{width:100%;justify-content:space-between}.toolbar .field{min-width:100%}}

.revision-box{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.revision-box input[type=file]{max-width:240px}.btn-green{background:#2e9b57!important}.btn-orange{background:#d98218!important}.note-cell{white-space:pre-wrap}
.lock-badge{display:inline-block;padding:7px 10px;border-radius:999px;background:#eef2f7;color:#475569;font-weight:800;font-size:12px;white-space:normal}.locked-panel{border:1px solid rgba(245,158,11,.35);background:rgba(255,251,235,.75)!important}

/* === SIPORBO v10 PREMIUM POLISH === */
body{
  background:
    radial-gradient(circle at 12% 10%, rgba(125,211,252,.45), transparent 24%),
    radial-gradient(circle at 88% 35%, rgba(14,165,198,.30), transparent 22%),
    radial-gradient(circle at 55% 0%, rgba(255,255,255,.85), transparent 32%),
    linear-gradient(135deg,#eefaff,#f7fbff 45%,#eaf7ff);
}
body:before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(15,76,129,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,76,129,.035) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at center,black,transparent 78%);
}
.bg-orb{filter:blur(24px);opacity:.42;animation:float 7s ease-in-out infinite alternate, glowPulse 4.5s ease-in-out infinite alternate}
@keyframes glowPulse{from{opacity:.26;transform:scale(.98)}to{opacity:.48;transform:scale(1.04)}}
.topbar,.panel,.summary-card,.login-card{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 24px 60px rgba(15,76,129,.14), inset 0 1px 0 rgba(255,255,255,.9);
}
.topbar:before,.panel:before,.summary-card:before,.login-card:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.0) 35%,rgba(255,255,255,.72) 48%,rgba(255,255,255,.0) 62%,transparent 100%);
  transform:translateX(-130%);
  animation:shineSweep 7s ease-in-out infinite;
}
@keyframes shineSweep{0%,45%{transform:translateX(-130%)}70%,100%{transform:translateX(130%)}}
.summary-card:hover,.panel:hover{box-shadow:0 28px 70px rgba(15,76,129,.18), inset 0 1px 0 rgba(255,255,255,.95)}
.logo-mini,.logo-box{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a3a67,#0ea5c6 55%,#69d9ff)}
.logo-mini:after,.logo-box:after{content:"";position:absolute;width:60%;height:160%;background:rgba(255,255,255,.35);transform:rotate(25deg);left:-80%;animation:logoShine 3.8s ease-in-out infinite}
@keyframes logoShine{0%,50%{left:-80%}75%,100%{left:120%}}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.panel-head h3{margin:0 0 6px}.btn-toggle{white-space:nowrap;padding:10px 14px;border:1px solid #d7e5ef!important;background:rgba(255,255,255,.78)!important;color:var(--dark)!important}
.collapse-body{animation:fadeUp .25s ease both}.readonly-display{width:100%;padding:13px 14px;border:1px solid #e2edf6;border-radius:14px;background:linear-gradient(135deg,#f8fcff,#edf7ff);font-weight:900;color:var(--dark)}
.admin-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.premium-row{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(245,251,255,.86));position:relative;overflow:hidden}.premium-row:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--primary),var(--primary2))}.premium-row.editing{border-color:#7dd3fc;box-shadow:0 18px 45px rgba(14,165,198,.12)}
.admin-row{grid-template-columns:1.35fr 1fr 1fr .8fr auto}.lock-badge{background:linear-gradient(135deg,#f3f7fb,#e9f1f8);border:1px solid #dbe7f0;color:#42526b}.history-box b{color:#0a2f55}.btn-mini{box-shadow:0 10px 20px rgba(15,76,129,.12)}
@media(max-width:800px){.panel-head{flex-direction:column}.btn-toggle{width:100%}.admin-actions{justify-content:flex-start}.admin-row{grid-template-columns:1fr}}

/* =========================
   SIPORBO v11 Premium polish
   ========================= */
/* Shine dibuat elegan: muncul sekali saat load, tidak muter terus-terusan */
.topbar:before,.panel:before,.summary-card:before,.login-card:before{
  animation:shineOnce 1.45s cubic-bezier(.22,.8,.22,1) .25s 1 both !important;
  opacity:.55;
}
.logo-mini:after,.logo-box:after{
  animation:logoShineOnce 1.25s ease .35s 1 both !important;
}
@keyframes shineOnce{0%{transform:translateX(-135%)}100%{transform:translateX(135%)}}
@keyframes logoShineOnce{0%{left:-85%}100%{left:125%}}

body{
  background:
    radial-gradient(circle at 12% 20%, rgba(50,197,255,.26), transparent 26%),
    radial-gradient(circle at 93% 48%, rgba(125,211,252,.28), transparent 25%),
    linear-gradient(135deg,#edf9ff 0%,#f8fbff 46%,#e9f7ff 100%) !important;
}
body:before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(15,76,129,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(15,76,129,.035) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),rgba(0,0,0,.18));
}

.login-page{position:relative;overflow:hidden}
.login-page:before{
  content:"";position:absolute;width:640px;height:640px;border-radius:50%;
  background:conic-gradient(from 170deg, rgba(14,165,198,.0), rgba(14,165,198,.30), rgba(15,76,129,.14), rgba(255,255,255,.0));
  filter:blur(2px);animation:slowRotate 16s linear infinite;z-index:-1;
}
@keyframes slowRotate{to{transform:rotate(360deg)}}
.login-card{
  transform-style:preserve-3d;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(235,249,255,.84)) !important;
  box-shadow:0 35px 100px rgba(15,76,129,.22), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.login-card:after{
  content:"Secure Access • SIMPROV";display:block;margin-top:18px;padding:10px 12px;border-radius:14px;
  background:linear-gradient(135deg,rgba(15,76,129,.08),rgba(14,165,198,.08));
  color:#486176;font-size:12px;font-weight:800;text-align:center;letter-spacing:.35px;
}
.login-card h1{letter-spacing:1.4px;text-shadow:0 8px 25px rgba(15,76,129,.12)}
.logo-box,.logo-mini{background:linear-gradient(135deg,#07355d,#0f4c81 45%,#15b7dc) !important}

/* Select dan file input dibuat lebih premium */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(240,250,255,.92)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath fill='%230f4c81' d='M5.5 7.5 10 12l4.5-4.5 1.3 1.4L10 14.7 4.2 8.9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:0 0, calc(100% - 14px) 50%;
  padding-right:42px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(15,76,129,.04);
}
input[type="file"]{
  padding:10px 12px;background:linear-gradient(135deg,#ffffff,#f3fbff);border:1px dashed #a8d7ec;
}
input[type="file"]::file-selector-button{
  border:0;border-radius:11px;padding:10px 13px;margin-right:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-weight:900;cursor:pointer;
  box-shadow:0 10px 20px rgba(15,76,129,.14);
}
.doc-upload-row{
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(246,252,255,.88)) !important;
  border:1px solid rgba(184,218,236,.85) !important;
  box-shadow:0 18px 45px rgba(15,76,129,.08), inset 0 1px 0 rgba(255,255,255,.9);
}

/* Rekap dokumen per kegiatan */
.doc-group-card{padding:0!important;background:linear-gradient(145deg,#fff,#f7fcff)}
.doc-group-head{display:grid;grid-template-columns:1.2fr 1.4fr 1fr 1fr;gap:12px;align-items:center;padding:15px;border-bottom:1px solid #e8f1f7;background:linear-gradient(135deg,#f8fcff,#edf8ff)}
.doc-group-title b{display:block;color:var(--dark);font-size:15px}.doc-group-title small{color:var(--muted)}
.doc-list{padding:10px 15px 14px;display:grid;gap:9px}.doc-item{display:grid;grid-template-columns:1fr .8fr .7fr 1.2fr;gap:10px;align-items:center;padding:10px 12px;border:1px solid #e8f1f7;border-radius:13px;background:rgba(255,255,255,.84)}
.doc-item a{font-weight:800;color:#0b76bd}.doc-action-box{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.doc-action-box input[type=file]{min-width:230px;flex:1}.group-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.group-reason{font-size:12px;color:#5b6b7d;background:#f6fbff;border:1px solid #dcecf7;border-radius:12px;padding:9px 10px}
.btn-wide{min-width:104px}.btn-gold{background:linear-gradient(135deg,#c26a05,#f6b73c)!important;color:white!important}
.table-wrap.grouped{border:0;background:transparent}.group-table{min-width:980px;border-collapse:separate;border-spacing:0 12px;background:transparent}.group-table tbody tr:hover{background:transparent}.group-table td{border:0}.group-table th{border-bottom:1px solid #e3eef7}

/* Panel premium lebih mengkilap tapi tidak norak */
.panel,.summary-card,.topbar{background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(240,250,255,.78)) !important}
.panel:hover,.summary-card:hover{transform:translateY(-1px);transition:.22s ease}

/* =========================
   SIPORBO v12 polish: login, row status, collapsible docs
   ========================= */
.login-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 18%, rgba(14,165,198,.30), transparent 26%),
    radial-gradient(circle at 82% 70%, rgba(15,76,129,.18), transparent 30%),
    linear-gradient(135deg,#eefaff,#fbfdff 52%,#e8f8ff);
}
.login-page:after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.38;
  background-image:linear-gradient(rgba(15,76,129,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,76,129,.05) 1px,transparent 1px);
  background-size:38px 38px;
  animation:premiumGridDrift 9s ease-in-out infinite alternate;
}
@keyframes premiumGridDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-18px,12px,0)}}
.login-card{
  animation:premiumLoginIn .72s cubic-bezier(.16,1,.3,1) both !important;
  isolation:isolate;
}
@keyframes premiumLoginIn{
  0%{opacity:0;transform:translateY(28px) scale(.96);filter:blur(9px)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.login-card .logo-box{animation:premiumLogoPop .75s cubic-bezier(.16,1,.3,1) .15s both}
@keyframes premiumLogoPop{0%{opacity:0;transform:scale(.6) rotate(-10deg)}75%{transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.login-card input{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.login-card input:focus{transform:translateY(-1px);box-shadow:0 14px 30px rgba(15,76,129,.10),0 0 0 4px rgba(14,165,198,.14)}
.login-card button{position:relative;overflow:hidden}
.login-card button:after{content:"";position:absolute;top:0;bottom:0;width:55px;left:-70px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);animation:loginButtonShine 2.2s ease 1.05s 1 both}
@keyframes loginButtonShine{to{left:120%}}

/* Baris perencanaan dibuat beda warna sesuai status */
tr.rencana-row td{transition:background .18s ease, box-shadow .18s ease;border-bottom:1px solid rgba(226,238,248,.9)}
tr.rencana-row.row-proses td{background:linear-gradient(90deg,rgba(239,248,255,.82),rgba(255,255,255,.96))}
tr.rencana-row.row-proses td:first-child{box-shadow:inset 5px 0 0 #39a8d7}
tr.rencana-row.row-selesai td{background:linear-gradient(90deg,rgba(228,248,235,.96),rgba(248,255,250,.98))}
tr.rencana-row.row-selesai td:first-child{box-shadow:inset 5px 0 0 #22a05a}
tr.rencana-row.row-ditolak td{background:linear-gradient(90deg,rgba(255,247,223,.98),rgba(255,252,244,.98))}
tr.rencana-row.row-ditolak td:first-child{box-shadow:inset 5px 0 0 #f2a31b}
tr.rencana-row:hover td{filter:brightness(1.012)}
.status-done-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,#22a05a,#3bd07d);color:#fff;font-weight:900;font-size:12px;box-shadow:0 10px 24px rgba(34,160,90,.18)}
.status-done-pill:before{content:"✓";font-weight:1000}

/* Rekap dokumen bisa minimize/maximize per kegiatan */
.doc-group-head-v12{grid-template-columns:1.25fr 1.2fr .9fr .9fr auto !important}
.doc-group-foot-v12{grid-template-columns:1.7fr .8fr .8fr .8fr auto !important}
.doc-toggle-wrap{display:flex;justify-content:flex-end;align-items:center}
.btn-detail{background:linear-gradient(135deg,#ffffff,#edf8ff)!important;color:#0a355d!important;border:1px solid #cfe5f3!important;box-shadow:0 10px 20px rgba(15,76,129,.08)!important;white-space:nowrap}
.btn-detail:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(15,76,129,.12)!important}
.doc-list.hidden{display:none!important}
.doc-group-card{box-shadow:0 18px 42px rgba(15,76,129,.08);border-radius:18px;overflow:hidden}
.doc-group-title b{letter-spacing:.1px}

/* Dropdown/file dibuat lebih premium tanpa kelihatan murah */
select,input[type="file"]{border-color:#cfe2ef!important}
select:hover,input[type="file"]:hover{box-shadow:0 12px 26px rgba(15,76,129,.08), inset 0 1px 0 rgba(255,255,255,.92)}
select:focus,input[type="file"]:focus{border-color:#15a7cf!important;box-shadow:0 0 0 4px rgba(21,167,207,.15),0 14px 30px rgba(15,76,129,.09)!important}
input[type="file"]::file-selector-button:hover{filter:brightness(1.08);transform:translateY(-1px)}

@media(max-width:900px){
  .doc-group-head-v12,.doc-group-foot-v12{grid-template-columns:1fr!important}
  .doc-toggle-wrap{justify-content:flex-start}
}


/* LOGO SIPORBO IMAGE - NO BORDER / CLEAN */
.logo-img-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}
.logo-img-wrap img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 12px 22px rgba(15,76,129,.16));
}
.logo-img-wrap:after{
  display:none !important;
}
.login-card .logo-img-wrap{
  background: transparent !important;
}

/* === SIPORBO v14 animated logo loading === */
#loadingOverlay:not(.hidden) .loader-premium-card{animation:loaderCardIn .28s cubic-bezier(.16,1,.3,1) both}
@keyframes loaderCardIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.login-card .logo-img-wrap img{animation:loginLogoReady 2.8s ease-in-out infinite alternate}
@keyframes loginLogoReady{from{transform:translateY(0) scale(1)}to{transform:translateY(-2px) scale(1.035)}}

/* v16: hilangkan border/logo box dan shine di logo gambar */
.logo-img-wrap.logo-box,.logo-img-wrap.logo-mini{background:transparent!important;border:0!important;box-shadow:none!important;}
.logo-img-wrap.logo-box:after,.logo-img-wrap.logo-mini:after{display:none!important;}
.logo-box.logo-img-wrap{width:92px!important;height:92px!important;margin:0 auto 16px!important;border-radius:0!important;}
.logo-mini.logo-img-wrap{width:58px!important;height:58px!important;border-radius:0!important;}
.loader-logo-wrap{background:transparent!important;border:0!important;box-shadow:none!important;}
.loader-logo-wrap img{filter:drop-shadow(0 14px 24px rgba(15,76,129,.18));}

/* =========================
   SIPORBO v17 - Logo Color Harmony
   Warna diseragamin sama logo: biru, kuning, merah, hijau
   dibuat halus biar nggak terlalu ramai.
   ========================= */
:root{
  --logo-blue:#0b78bd;
  --logo-blue-dark:#073e73;
  --logo-cyan:#16a8d8;
  --logo-yellow:#f5b51b;
  --logo-yellow-soft:#fff4cf;
  --logo-red:#e42020;
  --logo-red-soft:#ffe8e8;
  --logo-green:#12a84f;
  --logo-green-soft:#e7f8ee;
  --primary:var(--logo-blue-dark);
  --primary2:var(--logo-cyan);
  --dark:#06315f;
  --bg:#eef8ff;
  --shadow:0 24px 60px rgba(7,62,115,.13);
}

body{
  background:
    radial-gradient(circle at 12% 18%, rgba(11,120,189,.20), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(245,181,27,.13), transparent 22%),
    radial-gradient(circle at 90% 70%, rgba(18,168,79,.10), transparent 26%),
    linear-gradient(135deg,#edf9ff 0%,#ffffff 45%,#eef9ff 100%) !important;
}

.bg-orb.orb-a{background:rgba(11,120,189,.28)!important;}
.bg-orb.orb-b{background:rgba(245,181,27,.16)!important;}

/* Logo tetap bersih tanpa border/kotak berat */
.logo-img-wrap,
.logo-box.logo-img-wrap,
.logo-mini.logo-img-wrap{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.logo-img-wrap img{
  filter:drop-shadow(0 10px 18px rgba(7,62,115,.18));
}

/* Header dan panel: putih premium dengan garis aksen logo halus */
.topbar,.panel,.summary-card,.login-card{
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(244,252,255,.84))!important;
  border:1px solid rgba(209,231,243,.92)!important;
}
.topbar:after,
.panel:after{
  content:"";
  position:absolute;
  left:18px;right:18px;top:0;height:3px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,var(--logo-blue),var(--logo-yellow),var(--logo-red),var(--logo-green));
  opacity:.62;
  pointer-events:none;
}

/* Menu utama seragam warna logo, tapi active tetap dominan biru */
.menu-nav button{
  background:rgba(255,255,255,.82)!important;
  color:var(--logo-blue-dark)!important;
  border:1px solid rgba(11,120,189,.16)!important;
  box-shadow:0 10px 22px rgba(7,62,115,.06)!important;
  position:relative;
  overflow:hidden;
}
.menu-nav button:before{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--logo-blue),var(--logo-yellow),var(--logo-red),var(--logo-green));
  opacity:.18;
}
.menu-nav button:hover{
  transform:translateY(-2px);
  border-color:rgba(11,120,189,.30)!important;
  box-shadow:0 16px 28px rgba(7,62,115,.12)!important;
}
.menu-nav button.active{
  background:linear-gradient(135deg,var(--logo-blue-dark),var(--logo-blue) 58%,var(--logo-cyan))!important;
  color:white!important;
  box-shadow:0 18px 34px rgba(11,120,189,.24)!important;
}
.menu-nav button.active:before{
  opacity:1;
  height:4px;
  background:linear-gradient(90deg,var(--logo-yellow),#fff0a8,var(--logo-green));
}

/* Summary card diberi aksen beda-beda sesuai warna logo, tanpa terlalu rame */
.summary-card:nth-child(4n+1):after{background:rgba(11,120,189,.14)!important;}
.summary-card:nth-child(4n+2):after{background:rgba(245,181,27,.17)!important;}
.summary-card:nth-child(4n+3):after{background:rgba(18,168,79,.13)!important;}
.summary-card:nth-child(4n+4):after{background:rgba(228,32,32,.10)!important;}
.summary-card:nth-child(4n+1){border-top:3px solid rgba(11,120,189,.55)!important;}
.summary-card:nth-child(4n+2){border-top:3px solid rgba(245,181,27,.60)!important;}
.summary-card:nth-child(4n+3){border-top:3px solid rgba(18,168,79,.48)!important;}
.summary-card:nth-child(4n+4){border-top:3px solid rgba(228,32,32,.38)!important;}
.summary-card b{color:var(--logo-blue-dark)!important;}

/* Button palette */
button{
  background:linear-gradient(135deg,var(--logo-blue-dark),var(--logo-blue) 55%,var(--logo-cyan))!important;
}
.btn-green{
  background:linear-gradient(135deg,#0f7d3f,var(--logo-green))!important;
}
.btn-orange,.btn-gold{
  background:linear-gradient(135deg,#c77a00,var(--logo-yellow))!important;
  color:#fff!important;
}
.btn-red,.btn-danger{
  background:linear-gradient(135deg,#ba1717,var(--logo-red))!important;
}
.btn-soft{
  background:linear-gradient(135deg,#f8fcff,#eef8ff)!important;
  color:var(--logo-blue-dark)!important;
  border:1px solid rgba(11,120,189,.14)!important;
}

/* Badge status lebih seirama */
.badge-blue{background:#e4f4ff!important;color:#07689f!important;}
.badge-green{background:var(--logo-green-soft)!important;color:#087a38!important;}
.badge-orange{background:var(--logo-yellow-soft)!important;color:#9a5d00!important;}
.badge-red{background:var(--logo-red-soft)!important;color:#a31212!important;}
.badge-gray{background:#eef4f9!important;color:#3e5268!important;}

/* Tabel dan row status */
th{
  background:linear-gradient(135deg,#f5fbff,#edf7ff)!important;
  color:#173a5c!important;
}
.table-wrap,
.group-table,
.doc-group-card{
  border-color:rgba(11,120,189,.12)!important;
}
tbody tr.row-finished,
tr.row-finished{
  background:linear-gradient(90deg,rgba(18,168,79,.10),rgba(255,255,255,.96))!important;
}
tbody tr.row-rejected,
tr.row-rejected{
  background:linear-gradient(90deg,rgba(245,181,27,.16),rgba(255,255,255,.96))!important;
}
tbody tr.row-progress,
tr.row-progress{
  background:linear-gradient(90deg,rgba(11,120,189,.08),rgba(255,255,255,.96))!important;
}

/* Form: fokus biru, bukan terlalu neon */
input:focus,select:focus,textarea:focus{
  border-color:var(--logo-blue)!important;
  box-shadow:0 0 0 4px rgba(11,120,189,.12)!important;
}
select{
  border-color:rgba(11,120,189,.18)!important;
}
input[type="file"]{
  border-color:rgba(245,181,27,.45)!important;
  background:linear-gradient(135deg,#fff,#f8fcff)!important;
}
input[type="file"]::file-selector-button{
  background:linear-gradient(135deg,var(--logo-blue-dark),var(--logo-blue))!important;
}

/* Login: nuansa warna logo dengan animasi halus */
.login-page{
  background:
    radial-gradient(circle at 18% 18%, rgba(11,120,189,.27), transparent 27%),
    radial-gradient(circle at 72% 24%, rgba(245,181,27,.16), transparent 22%),
    radial-gradient(circle at 82% 78%, rgba(18,168,79,.12), transparent 28%),
    radial-gradient(circle at 16% 80%, rgba(228,32,32,.09), transparent 24%),
    linear-gradient(135deg,#eefaff,#ffffff 52%,#eaf8ff)!important;
}
.login-card{
  border-top:4px solid transparent!important;
  border-image:linear-gradient(90deg,var(--logo-blue),var(--logo-yellow),var(--logo-red),var(--logo-green)) 1!important;
}
.login-card h1,.topbar h2,.panel h3{
  color:var(--logo-blue-dark)!important;
}

/* Loading logo pakai ring warna logo */
.loader-ring{
  border-top-color:var(--logo-blue)!important;
  border-right-color:var(--logo-yellow)!important;
}
.loader-ring-2{
  border-left-color:var(--logo-red)!important;
  border-bottom-color:var(--logo-green)!important;
}

/* Hindari terlalu rame di layar kecil */
@media(max-width:650px){
  .topbar:after,.panel:after{left:12px;right:12px;height:2px;}
  .summary-card{border-top-width:2px!important;}
}


/* v19 - Dokumen perjanjian otomatis */
.auto-doc-note-wrap { margin-top: 10px; }
.auto-doc-note {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 76, 129, .16);
  background: linear-gradient(135deg, rgba(25, 167, 206, .10), rgba(255, 185, 15, .12), rgba(0, 166, 81, .08));
  color: #0b365f;
  box-shadow: 0 12px 26px rgba(15, 76, 129, .08);
  font-size: 13px;
  line-height: 1.45;
}
.auto-doc-note b { color: #08345f; }
.auto-doc-note span { color: #627086; }
.auto-doc-note::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -80%;
  width: 55%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  transform: skewX(-18deg);
  animation: shineOnce 1.25s ease .25s 1 forwards;
}
@keyframes shineOnce { to { left: 130%; } }


/* =========================================================
   v21 - USER FRIENDLY READABILITY PACK
   Tujuan: font lebih jelas, jarak lebih lega, tabel tidak bikin pusing,
   dashboard admin lebih enak dibaca di HP maupun desktop.
   ========================================================= */

:root{
  --font-main: "Inter", "Segoe UI", Arial, sans-serif;
  --font-size-base: 15.5px;
  --radius-xl: 26px;
  --soft-blue:#eff8ff;
}

body{
  font-family:var(--font-main);
  font-size:var(--font-size-base);
  line-height:1.55;
  color:#20304a;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app-page{
  max-width: 1520px;
  margin: 0 auto;
  padding: 24px clamp(16px, 2.5vw, 34px);
}

.topbar{
  align-items:center;
  padding:24px clamp(18px,2.4vw,34px);
  border-radius:30px;
}
.topbar h2{
  font-size:clamp(28px, 3vw, 42px)!important;
  letter-spacing:-.5px;
}
.topbar small{
  font-size:15px;
  line-height:1.5;
}

.menu-nav{
  gap:14px;
  margin:24px 0 22px;
}
.menu-nav button{
  min-height:48px;
  padding:13px 22px;
  font-size:15px;
  border-radius:16px;
  white-space:nowrap;
}

.summary-grid{
  gap:18px;
}
.summary-card{
  min-height:112px;
  padding:22px;
  border-radius:24px;
}
.summary-card span{
  font-size:14px;
  letter-spacing:.1px;
}
.summary-card b{
  font-size:clamp(22px,2.1vw,28px);
  line-height:1.25;
  word-break:break-word;
}

.panel{
  padding:clamp(20px,2.6vw,34px);
  border-radius:28px;
}
.panel h3{
  font-size:clamp(24px,2.3vw,34px)!important;
  letter-spacing:-.25px;
}
.panel-sub{
  font-size:16px;
  line-height:1.55;
  margin-top:4px;
  max-width:920px;
}

.panel-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.panel-title-row h3{margin:0 0 6px!important}
.panel-title-row .btn-refresh{flex:0 0 auto}

.form-grid{
  gap:18px 20px;
}
label{
  font-size:14px!important;
  color:#25364f!important;
  margin:16px 0 8px!important;
}
input,select,textarea{
  min-height:48px;
  font-size:15.5px!important;
  border-radius:16px!important;
  padding:14px 16px!important;
}
button{
  font-size:15px;
  letter-spacing:.05px;
}
.btn-mini{
  font-size:13px;
  padding:10px 13px;
  margin:4px 5px 4px 0;
}
.btn-refresh{
  min-height:48px;
  border-radius:16px;
}

/* Tabel lebih jelas */
.table-hint{
  display:none;
  margin:14px 0 8px;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(135deg,#eef8ff,#ffffff);
  border:1px solid #d7e9f7;
  color:#31516f;
  font-size:13.5px;
  font-weight:800;
}
.table-wrap{
  border-radius:18px!important;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,76,129,.06);
  scrollbar-color:#8db7d6 #edf6fc;
  scrollbar-width:thin;
}
.table-wrap::-webkit-scrollbar{height:10px}
.table-wrap::-webkit-scrollbar-track{background:#edf6fc;border-radius:99px}
.table-wrap::-webkit-scrollbar-thumb{background:#8db7d6;border-radius:99px}
table{
  min-width:1060px;
  font-size:15px;
}
th{
  position:sticky;
  top:0;
  z-index:2;
  background:#edf7ff!important;
  color:#17365b!important;
  font-size:12.5px!important;
  letter-spacing:.5px;
  padding:15px 14px!important;
}
td{
  font-size:14.5px!important;
  padding:15px 14px!important;
  line-height:1.45;
}
tbody tr:nth-child(even){
  background:rgba(239,248,255,.42);
}
tbody tr:hover{
  background:#f1faff!important;
}
td b{
  color:#172b45;
}

/* angka uang jangan pecah baris */
.dashboard-table td:nth-child(2), .dashboard-table td:nth-child(3), .dashboard-table td:nth-child(4),
.dashboard-table td:nth-child(6), .dashboard-table td:nth-child(7), .dashboard-table td:nth-child(8){
  white-space:nowrap;
}
.text-danger{ color:#c02626!important; }
.fw-bold{ font-weight:900!important; }

/* Card dashboard admin: lebih mudah dibaca daripada tabel panjang */
.monitor-card-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:16px 0 18px;
}
.monitor-card{
  border:1px solid #dcebf6;
  border-radius:22px;
  padding:18px;
  background:linear-gradient(135deg,#ffffff,#f4fbff);
  box-shadow:0 12px 28px rgba(15,76,129,.07);
}
.monitor-card.over-budget{
  border-color:#fecaca;
  background:linear-gradient(135deg,#fff7f7,#fffdf5);
}
.monitor-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.monitor-head b{
  display:block;
  color:#0a3d70;
  font-size:17px;
}
.monitor-head small{
  display:block;
  margin-top:3px;
  color:#6b778c;
  font-size:12.5px;
}
.monitor-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.monitor-grid div{
  border:1px solid #e1edf6;
  border-radius:16px;
  padding:11px 12px;
  background:rgba(255,255,255,.82);
  min-width:0;
}
.monitor-grid span,
.monitor-foot span{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.monitor-grid strong{
  display:block;
  margin-top:4px;
  color:#17365b;
  font-size:15px;
  line-height:1.3;
  word-break:break-word;
}
.progress-line{
  height:9px;
  margin:14px 0 11px;
  border-radius:99px;
  background:#e8f2fa;
  overflow:hidden;
}
.progress-line div{
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--logo-blue),var(--logo-green));
}
.monitor-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

/* Struktur Anggaran admin lebih rapi */
.admin-row{
  grid-template-columns:1.4fr 1fr 1fr auto auto!important;
  gap:14px!important;
  padding:18px!important;
  border-radius:18px!important;
}
.readonly-display{
  min-height:46px;
  display:flex;
  align-items:center;
  padding:12px 14px;
  border:1px solid #dce8f2;
  border-radius:15px;
  background:#f8fcff;
  color:#17365b;
  font-weight:900;
}

/* Kotak alasan/riwayat dibuat lebih kebaca */
.reason-box,.history-box{
  max-width:360px;
  font-size:13px!important;
  border-radius:14px!important;
  padding:10px 12px!important;
}

/* Mobile: jangan memaksa user baca tabel raksasa dulu */
@media(max-width:1000px){
  .monitor-card-list{grid-template-columns:1fr}
  .panel-title-row{flex-direction:column;align-items:stretch}
  .panel-title-row .btn-refresh{width:max-content}
}

@media(max-width:650px){
  .app-page{padding:14px 12px!important}
  .topbar{
    border-radius:24px;
    padding:20px 18px;
  }
  .topbar-left{
    align-items:flex-start;
  }
  .topbar h2{
    font-size:30px!important;
    line-height:1.12;
  }
  .topbar small{font-size:13.5px}
  .topbar-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .menu-nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .menu-nav button{
    width:100%;
    min-height:46px;
    padding:12px 10px;
    font-size:13.5px;
  }
  .summary-grid{
    grid-template-columns:1fr!important;
    gap:12px;
  }
  .summary-card{
    min-height:96px;
    padding:18px;
  }
  .summary-card b{
    font-size:24px;
  }
  .panel{
    padding:18px;
    border-radius:22px;
  }
  .panel h3{
    font-size:25px!important;
  }
  .panel-sub{
    font-size:14.5px;
  }
  .form-grid{
    grid-template-columns:1fr!important;
    gap:8px;
  }
  label{font-size:13.5px!important}
  input,select,textarea{
    font-size:16px!important; /* cegah zoom iPhone */
    min-height:50px;
  }
  .toolbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .toolbar .field,
  .toolbar .field.small{
    max-width:none!important;
    min-width:0!important;
    width:100%;
  }
  .toolbar button,
  .btn-refresh{
    width:100%;
  }
  .table-hint{display:block}
  table{min-width:980px!important}
  .dashboard-table{display:none;} /* dashboard pakai kartu di HP, tabel disembunyikan biar tidak membingungkan */
  .monitor-grid{
    grid-template-columns:1fr;
  }
  .monitor-card{
    padding:15px;
    border-radius:18px;
  }
  .monitor-head,
  .monitor-foot{
    flex-direction:column;
    align-items:flex-start;
  }
  .admin-row{
    grid-template-columns:1fr!important;
  }
  .btn-mini{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
  }
  .pager{
    width:100%;
    justify-content:space-between;
  }
  .pager button{
    min-width:110px;
  }
}


/* =========================================================
   v22 - SEKDA & AUDITOR READ-ONLY REVIEW MODE
   ========================================================= */
.audit-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:#0f4c81;
  background:linear-gradient(135deg,#eaf7ff,#ffffff);
  border:1px solid #cfe6f7;
  white-space:nowrap;
}
.audit-pill::before{content:none}

.review-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:12px 0 18px;
}
.review-kpi-grid div{
  padding:16px;
  border-radius:18px;
  border:1px solid #dcebf6;
  background:linear-gradient(135deg,#ffffff,#f3fbff);
  box-shadow:0 12px 26px rgba(15,76,129,.06);
}
.review-kpi-grid span{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.review-kpi-grid strong{
  display:block;
  margin-top:6px;
  color:#0a3d70;
  font-size:28px;
  line-height:1.1;
}

.review-list{
  display:grid;
  gap:14px;
}
.review-row{
  display:grid;
  grid-template-columns:1.1fr 2.4fr auto;
  gap:14px;
  align-items:center;
  padding:17px;
  border:1px solid #dcebf6;
  border-radius:20px;
  background:linear-gradient(135deg,#ffffff,#f7fcff);
  box-shadow:0 12px 26px rgba(15,76,129,.06);
}
.review-row.over-budget{
  border-color:#fecaca;
  background:linear-gradient(135deg,#fff7f7,#fffdf6);
}
.review-title b{
  display:block;
  color:#0a3d70;
  font-size:17px;
}
.review-title small{
  display:block;
  margin-top:3px;
  color:#64748b;
}
.review-metrics{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
}
.review-metrics div{
  padding:10px 11px;
  border:1px solid #e1edf6;
  border-radius:14px;
  background:rgba(255,255,255,.86);
}
.review-metrics span{
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.review-metrics strong{
  display:block;
  margin-top:4px;
  color:#17365b;
  font-size:13.5px;
  line-height:1.3;
  word-break:break-word;
}
.review-status{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
}

@media(max-width:1000px){
  .review-kpi-grid{grid-template-columns:repeat(2,1fr)}
  .review-row{grid-template-columns:1fr}
  .review-metrics{grid-template-columns:repeat(2,1fr)}
  .review-status{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
}
@media(max-width:650px){
  .review-kpi-grid{grid-template-columns:1fr}
  .review-metrics{grid-template-columns:1fr}
}


/* v23 - Tombol laporan PDF */
.action-group{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
@media(max-width:650px){
  .action-group{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
  }
  .action-group button{width:100%}
}

/* v25 - Laporan PDF hanya di Dashboard */
.btn-report{font-weight:900;background:linear-gradient(135deg,#0a5f9e,#12a3d8)!important;color:#fff!important;border:0!important;box-shadow:0 12px 24px rgba(10,95,158,.20)}


/* v26 - Tanggal upload dokumen di menu pencairan */
.upload-time{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:12px;
  background:#eef8ff;
  border:1px solid #d2e8f8;
  color:#17365b;
  font-weight:800;
  font-size:12.5px;
  white-space:nowrap;
}
.upload-time::before{content:none}


/* v27 - Menu Laporan khusus user bidang */
.report-menu-panel{
  position:relative;
  overflow:hidden;
}
.report-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:18px 0;
}
.report-summary-grid div{
  padding:18px;
  border-radius:20px;
  border:1px solid #dcebf6;
  background:linear-gradient(135deg,#ffffff,#f3fbff);
  box-shadow:0 12px 28px rgba(15,76,129,.06);
}
.report-summary-grid span{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.report-summary-grid strong{
  display:block;
  margin-top:7px;
  color:#0a3d70;
  font-size:22px;
}
.report-card-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:24px;
  border-radius:24px;
  border:1px solid #d5e9f7;
  background:linear-gradient(135deg,#f7fcff,#ffffff);
  box-shadow:0 14px 34px rgba(15,76,129,.08);
}
.report-card-main h4{
  margin:0 0 8px;
  color:#0a3d70;
  font-size:24px;
}
.report-card-main p{
  margin:0;
  color:#5f7188;
  max-width:760px;
  line-height:1.6;
}
.report-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.report-tags span{
  display:inline-flex;
  padding:8px 11px;
  border-radius:999px;
  background:#eaf7ff;
  border:1px solid #cfe6f7;
  color:#0f4c81;
  font-size:12px;
  font-weight:900;
}
.btn-report-pdf{
  min-width:220px;
  min-height:56px;
  border-radius:18px;
  font-weight:900;
  background:linear-gradient(135deg,#0b63a3,#08a8df);
  box-shadow:0 16px 32px rgba(8,120,189,.22);
}
@media(max-width:900px){
  .report-summary-grid{grid-template-columns:1fr 1fr}
  .report-card-main{flex-direction:column;align-items:flex-start}
  .btn-report-pdf{width:100%}
}
@media(max-width:600px){
  .report-summary-grid{grid-template-columns:1fr}
}


/* v32 - Warna status Perlu Perbaikan dibuat merah */
tr.rencana-row.row-perbaikan td,
tr.rencana-row.row-ditolak td{
  background:linear-gradient(90deg,rgba(255,235,235,.98),rgba(255,250,250,.98))!important;
}
tr.rencana-row.row-perbaikan td:first-child,
tr.rencana-row.row-ditolak td:first-child{
  box-shadow:inset 5px 0 0 #dc2626!important;
}
tr.rencana-row.row-perbaikan .badge,
tr.rencana-row.row-ditolak .badge{
  background:#fee2e2!important;
  color:#b91c1c!important;
}


/* v35 - Metode dan ketentuan dokumen otomatis */
.metode-preview{
  margin:4px 0 16px;
}
.metode-box{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:14px 16px;
  border:1px solid #d5e9f7;
  border-left:5px solid #0b74b8;
  border-radius:18px;
  background:linear-gradient(135deg,#f2fbff,#ffffff);
  box-shadow:0 12px 26px rgba(15,76,129,.06);
}
.metode-box div{
  padding:10px 12px;
  border-radius:14px;
  background:#ffffffb8;
  border:1px solid #e0edf6;
}
.metode-box span{
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.metode-box b{
  display:block;
  margin-top:3px;
  color:#0a3d70;
  font-size:15px;
}
.metode-box p{
  grid-column:1 / -1;
  margin:0;
  color:#42526b;
  line-height:1.5;
}
@media(max-width:700px){
  .metode-box{grid-template-columns:1fr}
}

/* v36 - Metode otomatis dan waktu manual */
input[type="date"]{font-family:inherit;font-weight:800;color:#17365b;}
.readonly-total[readonly]{background:linear-gradient(135deg,#eef8ff,#ffffff);font-weight:900;color:#0a3d70;}
.metode-box div:nth-child(2){border-left:4px solid #f2b705;}


/* v37 - Upload ulang per file dokumen */
.per-file-revision{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:210px;
  padding:10px;
  border-radius:14px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  box-shadow:0 10px 22px rgba(234,88,12,.08);
}
.revision-title{
  font-weight:900;
  color:#9a3412;
  font-size:12px;
}
.per-file-revision input[type="file"]{
  width:100%;
  font-size:12px;
  padding:8px;
  border-radius:10px;
  background:#fff;
  border:1px dashed #fb923c;
}
.btn-upload-ulang{
  width:100%;
  background:linear-gradient(135deg,#ea580c,#f59e0b)!important;
  color:white!important;
  border:0!important;
  box-shadow:0 10px 20px rgba(234,88,12,.20)!important;
}
tr:has(.per-file-revision) td{
  background:linear-gradient(90deg,rgba(255,247,237,.98),rgba(255,255,255,.98));
}
@supports not selector(:has(*)){
  .per-file-revision{outline:2px solid rgba(245,158,11,.12);}
}


/* v38 - Dokumen upload awal tidak duplikat dan upload ulang muncul per file */
.doc-item-repair{
  background:linear-gradient(90deg,rgba(255,247,237,.98),rgba(255,255,255,.98))!important;
  border-color:#fed7aa!important;
}
.doc-file-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.doc-action-box.per-file-revision,
.per-file-revision{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:220px;
  padding:10px;
  border-radius:14px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  box-shadow:0 10px 22px rgba(234,88,12,.08);
}
.revision-title{
  font-weight:900;
  color:#9a3412;
  font-size:12px;
}
.doc-action-box.per-file-revision input[type="file"],
.per-file-revision input[type="file"]{
  width:100%;
  font-size:12px;
  padding:8px;
  border-radius:10px;
  background:#fff;
  border:1px dashed #fb923c;
}
.btn-upload-ulang{
  width:100%;
  background:linear-gradient(135deg,#ea580c,#f59e0b)!important;
  color:white!important;
  border:0!important;
  box-shadow:0 10px 20px rgba(234,88,12,.20)!important;
}


/* v39 - Tombol admin valid/perbaikan per file */
.v39-file-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  min-width:190px;
}
.v39-file-actions .btn-mini{
  min-width:86px;
  padding:10px 12px;
  border-radius:12px;
  font-weight:900;
}
.doc-file-note-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.v39-no-group-action .group-actions,
.v39-no-group-action button{
  display:none!important;
}
.doc-group-foot-v12.v39-no-group-action{
  grid-template-columns:1fr!important;
}
.doc-group-foot-v12.v39-no-group-action > div:not(:first-child),
.doc-group-foot-v12.v39-no-group-action > span{
  display:none!important;
}


/* v40 - Upload ulang per file dibuat compact */
.doc-action-box.per-file-revision,
.per-file-revision{
  min-width:0!important;
  width:260px!important;
  max-width:100%!important;
  padding:8px 10px!important;
  border-radius:12px!important;
  gap:6px!important;
  align-items:stretch!important;
}
.revision-title{
  font-size:11px!important;
  text-align:left!important;
  margin:0!important;
  line-height:1.2!important;
}
.doc-action-box.per-file-revision input[type="file"],
.per-file-revision input[type="file"]{
  padding:6px!important;
  font-size:11px!important;
  border-radius:9px!important;
  min-height:34px!important;
}
.btn-upload-ulang{
  min-height:34px!important;
  padding:7px 10px!important;
  border-radius:10px!important;
  font-size:12px!important;
  width:auto!important;
}
.doc-file-note-action{
  gap:8px!important;
  justify-content:flex-end!important;
  align-items:center!important;
}
.doc-item{
  align-items:center!important;
}
.doc-item .group-reason{
  max-width:260px!important;
  padding:8px 10px!important;
  font-size:12px!important;
}
@media(max-width:900px){
  .doc-action-box.per-file-revision,
  .per-file-revision{
    width:100%!important;
  }
  .doc-file-note-action{
    justify-content:flex-start!important;
  }
}


/* v43 - Hilangkan info metode otomatis di menu pencairan */
#saranDokumen,
.auto-doc-note-wrap{
  display:none!important;
  margin:0!important;
  padding:0!important;
  height:0!important;
}


/* v44 - stabilisasi UI saat API lambat */
#loadingText{
  max-width:320px;
  word-break:break-word;
}

/* v45 - mode super cepat dengan cache lokal */
.cache-notice{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:99999;
  max-width:360px;
  padding:12px 16px;
  border-radius:16px;
  background:linear-gradient(135deg,#063b70,#0ea5e9);
  color:#fff;
  font-weight:800;
  box-shadow:0 18px 45px rgba(3,45,90,.25);
  animation:cacheNoticeIn .25s ease both;
}
@keyframes cacheNoticeIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}


/* v46 - Informasi riwayat dokumen yang rapi */
.doc-item-v46{
  grid-template-columns: 1.35fr .7fr .7fr 2.2fr!important;
  gap:14px!important;
  align-items:start!important;
}
.doc-main-info b{
  display:block;
  color:#0a3d70;
  margin-bottom:4px;
}
.doc-main-info small{
  display:block;
  line-height:1.35;
}
.doc-timeline{
  display:grid;
  gap:7px;
  width:100%;
}
.doc-timeline > div{
  padding:8px 10px;
  border:1px solid #dbeaf6;
  border-radius:12px;
  background:rgba(255,255,255,.78);
}
.doc-timeline span{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.35px;
  color:#64748b;
  font-weight:900;
  margin-bottom:2px;
}
.doc-timeline b{
  display:block;
  font-size:12px;
  color:#14395f;
  line-height:1.35;
}
.doc-timeline small{
  display:block;
  margin-top:2px;
  color:#64748b;
  font-size:11px;
}
.doc-admin-note{
  border-color:#fed7aa!important;
  background:#fff7ed!important;
}
.doc-admin-note b{
  color:#9a3412!important;
}
.doc-history{
  border-color:#bfdbfe!important;
  background:#eff6ff!important;
}
.doc-history b{
  color:#0a3d70!important;
}
.compact-revision{
  margin-top:8px;
}
@media(max-width:980px){
  .doc-item-v46{
    grid-template-columns:1fr!important;
  }
  .doc-file-note-action{
    justify-content:flex-start!important;
  }
}


/* v47 - Popup status dokumen ala TND */
.doc-item-v47{
  grid-template-columns: 1.35fr .65fr .65fr 1.6fr!important;
  align-items:center!important;
  gap:12px!important;
}
.compact-status-action{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.doc-alert-text{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  font-weight:900;
  font-size:11px;
}
.status-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:999999;
  background:rgba(15,23,42,.55);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:70px 18px 24px;
}
.status-modal-card{
  width:min(620px,96vw);
  max-height:78vh;
  overflow:auto;
  background:#fff;
  border:2px solid #7f8c8d;
  box-shadow:0 24px 70px rgba(0,0,0,.30);
  border-radius:2px;
  color:#0f172a;
  animation:statusPopIn .16s ease both;
}
@keyframes statusPopIn{
  from{opacity:0; transform:translateY(-10px) scale(.98)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
.status-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid #d7dde3;
  background:#fff;
}
.status-modal-head h3{
  margin:0;
  font-size:16px;
  color:#0a3d70;
}
.status-modal-head button{
  border:1px solid #d7dde3;
  background:#f8fafc;
  color:#0f172a;
  border-radius:2px;
  padding:8px 16px;
  font-weight:700;
  cursor:pointer;
}
.status-modal-body{
  padding:18px;
}
.status-doc-title{
  padding:12px 14px;
  background:#f1f8fc;
  border:1px solid #dbeaf6;
  margin-bottom:12px;
}
.status-doc-title b{
  display:block;
  color:#0a3d70;
  font-size:15px;
  margin-bottom:3px;
}
.status-doc-title span{
  display:block;
  color:#64748b;
  font-size:12px;
}
.status-row{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid #e5e7eb;
}
.status-row:last-child{
  border-bottom:0;
}
.status-no{
  font-weight:900;
  color:#0a3d70;
}
.status-row b{
  font-size:13px;
  color:#0f172a;
}
.status-row p{
  margin:4px 0 0;
  font-size:12px;
  line-height:1.45;
  color:#334155;
}
.status-row a{
  color:#0069a8;
  font-weight:800;
}
@media(max-width:900px){
  .doc-item-v47{
    grid-template-columns:1fr!important;
    align-items:start!important;
  }
  .compact-status-action{
    justify-content:flex-start!important;
  }
  .status-modal-backdrop{
    padding-top:38px;
  }
}


/* v48 - Posisi saat ini dan popup alasan/riwayat perencanaan */
.status-position-row{
  background:#f8fbff;
  margin:-2px 0 4px;
}
.status-position-text{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}
.pos-valid{
  background:#dcfce7;
  color:#15803d;
  border:1px solid #bbf7d0;
}
.pos-repair{
  background:#fee2e2;
  color:#b91c1c;
  border:1px solid #fecaca;
}
.pos-wait{
  background:#e0f2fe;
  color:#0369a1;
  border:1px solid #bae6fd;
}
.note-cell-popup{
  text-align:center;
}
.note-cell-popup .btn-detail{
  min-width:92px;
}


/* v49 - Struktur Anggaran admin dirapikan */
.struktur-admin-panel .panel-title-row{
  align-items:center;
  gap:16px;
}
.admin-budget-list{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.admin-budget-card{
  display:grid;
  grid-template-columns: 1.55fr 1fr .85fr auto auto;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid #d8eaf6;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(241,248,252,.90));
  box-shadow:0 10px 28px rgba(9,64,104,.08);
}
.admin-budget-card.editing{
  border-color:#38bdf8;
  box-shadow:0 14px 34px rgba(14,165,233,.16);
}
.admin-budget-info{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.admin-budget-info b{
  color:#0a3d70;
  font-size:16px;
}
.admin-budget-info small,
.admin-budget-info span{
  color:#64748b;
  font-size:12px;
}
.admin-budget-card .field{
  margin:0!important;
}
.admin-budget-card .readonly-display{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border-radius:14px;
  background:#f2f8fd;
  border:1px solid #cfe4f3;
  font-weight:900;
  color:#0a3d70;
}
.admin-budget-card input,
.admin-budget-card select{
  height:42px;
  border-radius:14px;
  font-weight:800;
}
.admin-budget-status{
  display:flex;
  justify-content:center;
}
.admin-budget-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.tambah-bidang-card{
  width:min(760px,96vw)!important;
}
.tambah-bidang-grid{
  grid-template-columns:1fr 1.25fr 1fr .7fr!important;
  gap:14px!important;
}
.tambah-bidang-grid .full{
  grid-column:1/-1;
}
.modal-actions-v49{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:16px;
}
@media(max-width:1100px){
  .admin-budget-card{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
  .admin-budget-status,
  .admin-budget-actions{
    justify-content:flex-start;
  }
}
@media(max-width:720px){
  .admin-budget-card,
  .tambah-bidang-grid{
    grid-template-columns:1fr!important;
  }
}


/* v50 - Riwayat perencanaan seperti pencairan */
.note-cell-popup{
  text-align:center;
}
.note-cell-popup .btn-detail{
  min-width:104px;
}
.row-perbaikan .btn-orange{
  background:linear-gradient(135deg,#f59e0b,#f97316)!important;
  color:#fff!important;
  box-shadow:0 10px 20px rgba(249,115,22,.20);
}
.status-modal-card .status-row p{
  word-break:break-word;
}


/* v51 - Riwayat perencanaan selalu tampil sebagai timeline */
.rencana-timeline-list{
  display:grid;
  gap:9px;
  margin-top:8px;
}
.rencana-timeline-item{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:9px;
  padding:10px;
  border:1px solid #dbeaf6;
  border-radius:12px;
  background:#f8fbff;
}
.rencana-timeline-item span{
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0b72b9;
  color:#fff;
  font-weight:900;
  font-size:12px;
}
.rencana-timeline-item b{
  display:block;
  color:#0a3d70;
  margin-bottom:3px;
}
.rencana-timeline-item p{
  margin:0!important;
  line-height:1.45;
}


/* v56 - Tombol verifikasi dokumen nonaktif sesuai status */
.v56-disabled-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.doc-action-lock{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid #dbeafe;
  background:#eff6ff;
  color:#075985;
}
.doc-action-lock.valid{
  background:#dcfce7;
  color:#15803d;
  border-color:#bbf7d0;
}
.doc-action-lock.repair{
  background:#fff7ed;
  color:#9a3412;
  border-color:#fed7aa;
}
.btn-disabled,
.btn-disabled:hover{
  opacity:.45!important;
  cursor:not-allowed!important;
  background:#e2e8f0!important;
  color:#64748b!important;
  box-shadow:none!important;
}
@media(max-width:900px){
  .v56-disabled-actions{
    justify-content:flex-start;
  }
}


/* v57 - Aksi perencanaan proses perbaikan */
.row-menunggu-perbaikan{
  background:linear-gradient(90deg,rgba(224,242,254,.78),rgba(255,255,255,.9))!important;
  border-left:4px solid #0ea5e9!important;
}
.delete-locked-info{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid #cbd5e1;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.aksi-perencanaan-v57{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
@media(max-width:900px){
  .aksi-perencanaan-v57{
    justify-content:flex-start;
  }
}


/* v58 - Rapikan aksi perencanaan, hapus label Hapus nonaktif */
.aksi-perencanaan-v58{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
}
.aksi-perencanaan-v58 .btn-mini{
  white-space:nowrap;
}


/* v59 - Bersihkan label tambahan di menu admin pencairan */
.v59-status-action{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.v59-file-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.doc-alert-text,
.doc-action-lock{
  display:none!important;
}
.btn-disabled,
.btn-disabled:hover{
  opacity:.45!important;
  cursor:not-allowed!important;
  background:#e2e8f0!important;
  color:#64748b!important;
  box-shadow:none!important;
}
@media(max-width:900px){
  .v59-status-action,
  .v59-file-actions{
    justify-content:flex-start;
  }
}


/* v60 - Warna status dan baris lebih jelas untuk user */
.status-badge-v60{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  line-height:1.15;
  letter-spacing:.2px;
  white-space:nowrap;
  border:1px solid transparent;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.status-badge-v60.status-green{
  background:#dcfce7;
  color:#137333;
  border-color:#bbf7d0;
}
.status-badge-v60.status-green-soft{
  background:#eafaf1;
  color:#15803d;
  border-color:#ccefd9;
}
.status-badge-v60.status-red{
  background:#fee2e2;
  color:#b91c1c;
  border-color:#fecaca;
}
.status-badge-v60.status-red-soft{
  background:#fff1f2;
  color:#be123c;
  border-color:#ffe4e6;
}
.status-badge-v60.status-blue{
  background:#dbeafe;
  color:#075985;
  border-color:#bfdbfe;
}
.status-badge-v60.status-yellow{
  background:#fef3c7;
  color:#92400e;
  border-color:#fde68a;
}
.status-badge-v60.status-gray{
  background:#f1f5f9;
  color:#475569;
  border-color:#e2e8f0;
}

/* warna lembut per baris supaya gampang dibaca */
.rencana-row.row-status-green{
  background:linear-gradient(90deg,rgba(236,253,245,.90),rgba(255,255,255,.96))!important;
  border-left:5px solid #22c55e!important;
}
.rencana-row.row-status-red{
  background:linear-gradient(90deg,rgba(254,242,242,.92),rgba(255,255,255,.96))!important;
  border-left:5px solid #ef4444!important;
}
.rencana-row.row-status-blue{
  background:linear-gradient(90deg,rgba(239,246,255,.92),rgba(255,255,255,.96))!important;
  border-left:5px solid #0ea5e9!important;
}
.rencana-row.row-status-yellow{
  background:linear-gradient(90deg,rgba(255,251,235,.95),rgba(255,255,255,.96))!important;
  border-left:5px solid #f59e0b!important;
}
.rencana-row.row-status-gray{
  background:linear-gradient(90deg,rgba(248,250,252,.92),rgba(255,255,255,.96))!important;
  border-left:5px solid #94a3b8!important;
}

/* legenda kecil */
.status-legend-v60{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0 14px;
  align-items:center;
}
.status-legend-v60 span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:800;
  color:#334155;
  padding:7px 10px;
  border-radius:999px;
  background:#ffffffb8;
  border:1px solid #e2e8f0;
}
.status-legend-v60 i{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
}
.status-legend-v60 .l-green{background:#22c55e}
.status-legend-v60 .l-red{background:#ef4444}
.status-legend-v60 .l-blue{background:#0ea5e9}
.status-legend-v60 .l-yellow{background:#f59e0b}


/* v61 - Penegasan waktu pemilihan wajib */
#waktuPemilihan:required,
#editWaktuPemilihan:required{
  border-color:#93c5fd;
}
#waktuPemilihan:required:invalid,
#editWaktuPemilihan:required:invalid{
  border-color:#f59e0b!important;
  background:#fffbeb!important;
}


/* v62 - Warna pembeda kartu kegiatan pencairan */
.doc-group-card.doc-group-green{
  border-left:6px solid #22c55e!important;
  background:linear-gradient(90deg,rgba(236,253,245,.96),rgba(255,255,255,.98))!important;
}
.doc-group-card.doc-group-green .doc-group-head{
  background:linear-gradient(90deg,rgba(220,252,231,.75),rgba(240,253,244,.35))!important;
}
.doc-group-card.doc-group-red{
  border-left:6px solid #ef4444!important;
  background:linear-gradient(90deg,rgba(254,242,242,.96),rgba(255,255,255,.98))!important;
}
.doc-group-card.doc-group-red .doc-group-head{
  background:linear-gradient(90deg,rgba(254,226,226,.75),rgba(255,247,237,.35))!important;
}
.doc-group-card.doc-group-blue{
  border-left:6px solid #0ea5e9!important;
  background:linear-gradient(90deg,rgba(239,246,255,.96),rgba(255,255,255,.98))!important;
}
.doc-group-card.doc-group-blue .doc-group-head{
  background:linear-gradient(90deg,rgba(219,234,254,.75),rgba(240,249,255,.35))!important;
}
.doc-group-card.doc-group-gray{
  border-left:6px solid #94a3b8!important;
}
.doc-item-valid{
  background:linear-gradient(90deg,rgba(240,253,244,.72),rgba(255,255,255,.96))!important;
}
.doc-item-wait{
  background:linear-gradient(90deg,rgba(239,246,255,.60),rgba(255,255,255,.96))!important;
}


/* v63 - Kunci ajukan perubahan jika sudah masuk pencairan */
.change-locked-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border-radius:999px;
  background:#eef2f7;
  color:#475569;
  border:1px solid #cbd5e1;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.aksi-perencanaan-v63{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
}

/* SIMPROV v65 - manajemen akun verifikator */
.account-card-v65{grid-template-columns:minmax(190px,1.2fr) minmax(150px,.8fr) minmax(250px,1.8fr) 110px 70px;align-items:center;gap:14px}
.account-scope-text{font-size:13px;line-height:1.45}.account-scope-text small{color:#7790a1}
.account-scope-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;max-height:330px;overflow:auto;padding:10px;border:1px solid #e4edf3;border-radius:14px;background:#f8fbfd}
.account-scope-item{display:flex;align-items:center;gap:10px;padding:10px;background:#fff;border:1px solid #e6eef4;border-radius:12px;cursor:pointer}.account-scope-item input{width:18px;height:18px}.account-scope-item span{display:flex;flex-direction:column}.account-scope-item small{color:#7990a0;margin-top:2px}
@media(max-width:800px){.account-card-v65{grid-template-columns:1fr}.account-scope-grid{grid-template-columns:1fr}}


/* v69 - tampilkan aksi finalisasi PBJ pada footer kartu kegiatan */
.doc-group-foot-v12.v69-final-action{
  grid-template-columns:minmax(280px,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
}
.doc-group-foot-v12.v69-final-action > div:nth-child(2),
.doc-group-foot-v12.v69-final-action > div:nth-child(3),
.doc-group-foot-v12.v69-final-action > div:nth-child(4){display:none!important;}
.doc-group-foot-v12.v69-final-action > button,
.doc-group-foot-v12.v69-final-action > span{display:inline-flex!important;justify-self:end;}
@media(max-width:760px){
  .doc-group-foot-v12.v69-final-action{grid-template-columns:1fr!important;}
  .doc-group-foot-v12.v69-final-action > button,
  .doc-group-foot-v12.v69-final-action > span{justify-self:stretch;width:100%;justify-content:center;}
}

/* SIMPROV v70 */
.v70-kegiatan-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:7px;font-size:11px;color:#526a7d}.v70-kegiatan-meta span{white-space:nowrap}.v70-final-row{display:flex!important;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-top:1px solid #dceaf3;background:rgba(255,255,255,.55)}.v70-final-row>div:first-child{display:flex;flex-direction:column;gap:3px}.v70-final-row small{color:#698093}.v70-final-btn{display:inline-flex!important;visibility:visible!important;opacity:1}.v70-plan-box{margin:0 0 14px;padding:14px 16px;border:1px solid #dceaf3;border-radius:14px;background:#f7fbfe}.v70-plan-box h4{margin:0 0 10px;color:#0b4b7f}.v70-plan-box p{margin:6px 0;line-height:1.45}.v70-status-card{max-width:720px}@media(max-width:760px){.v70-final-row{align-items:stretch;flex-direction:column}.v70-final-btn{width:100%;justify-content:center}.v70-kegiatan-meta{flex-direction:column;gap:3px}}

/* SIMPROV v72 - indikator kelengkapan dokumen wajib */
.v72-doc-progress{display:flex;flex-direction:column;gap:2px;min-width:170px}
.v72-doc-progress b{font-size:12px;color:#0b477c}
.v72-doc-progress span{font-size:11px;font-weight:700;color:#168347}
.v72-doc-progress small{font-size:10px;line-height:1.35;color:#b45309;max-width:260px}
@media(max-width:800px){.v72-doc-progress{min-width:0}.v72-doc-progress small{max-width:none}}

/* SIMPROV v73 - perbandingan perubahan perencanaan */
.status-modal-wide-v73{max-width:1000px!important;width:min(1000px,94vw)!important}
.compare-status-row-v73>div:last-child{width:100%}
.compare-wrap-v73{margin-top:12px;border:1px solid #cfe2f3;border-radius:14px;overflow:hidden;background:#fff}
.compare-head-v73{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;background:#eef7ff;color:#0b4779}
.compare-head-v73 span{font-size:12px;color:#64748b}
.compare-table-scroll-v73{overflow-x:auto}
.compare-table-v73{width:100%;border-collapse:collapse;min-width:680px}
.compare-table-v73 th,.compare-table-v73 td{padding:10px 12px;border-bottom:1px solid #e5edf5;text-align:left;vertical-align:top}
.compare-table-v73 th{background:#f8fafc;font-size:12px;text-transform:uppercase;color:#52657a}
.compare-table-v73 td:first-child{width:25%}
.compare-changed-v73{background:#fff9e8}
.compare-changed-v73 td:nth-child(2){color:#b42318;text-decoration:line-through;text-decoration-thickness:1px}
.compare-changed-v73 td:nth-child(3){color:#087443;font-weight:700}
.compare-badge-v73{display:inline-block;margin-left:7px;padding:2px 6px;border-radius:999px;background:#f59e0b;color:#fff;font-size:9px;vertical-align:middle}
.compare-note-v73{margin:0;padding:9px 14px;background:#f8fafc;color:#64748b;font-size:12px}
@media(max-width:640px){.compare-head-v73{align-items:flex-start;flex-direction:column}}

/* SIMPROV v77 - Identitas Ketua Umum & Verifikator */
.system-identity-v77{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:11px;color:#60738c}
.system-identity-v77 span{background:#eef6fc;border:1px solid #d7e8f5;border-radius:999px;padding:3px 9px}
@media(max-width:700px){.system-identity-v77{display:grid;gap:4px}.system-identity-v77 span{width:max-content;max-width:100%}}


/* SIMPROV v78 - Dashboard Publik */
.public-page{max-width:1320px;margin:0 auto;padding:26px 22px 48px;position:relative;z-index:2}.public-hero,.public-intro,.public-panel{background:rgba(255,255,255,.91);border:1px solid rgba(15,125,186,.16);box-shadow:0 18px 48px rgba(11,74,126,.10);border-radius:24px}.public-hero{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;border-top:3px solid transparent;border-image:linear-gradient(90deg,#159447,#0f7dba,#e49a00,#d93b3b) 1}.public-brand{display:flex;align-items:center;gap:16px}.public-brand .logo-box{width:56px;height:56px}.public-brand h1{margin:0;color:#0b4a7e;font-size:30px}.public-brand p{margin:3px 0;color:#36536f;font-weight:700}.public-identity{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}.public-identity span{font-size:11px;padding:5px 9px;border-radius:999px;background:#eef7fc;color:#31536d;border:1px solid #d5e8f5}.btn-public-login{padding:13px 28px;border-radius:13px;background:linear-gradient(135deg,#0b4a7e,#0f98ca);font-size:15px}.public-intro{margin-top:18px;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}.public-intro h2{font-size:28px;color:#0b4a7e;margin:5px 0}.public-intro p{max-width:760px;color:#667085;margin:0}.eyebrow{font-size:11px;letter-spacing:.15em;font-weight:800;color:#0f7dba}.public-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:18px 0}.public-metric{min-height:115px;border-radius:20px;padding:19px;background:rgba(255,255,255,.93);border:1px solid #dcebf6;box-shadow:0 12px 30px rgba(11,74,126,.08);position:relative;overflow:hidden}.public-metric:after{content:"";position:absolute;width:78px;height:78px;border-radius:50%;right:-22px;top:-28px;background:rgba(15,125,186,.10)}.public-metric small{display:block;color:#667085;font-weight:800}.public-metric strong{display:block;color:#0b4a7e;font-size:21px;margin:13px 0 5px}.public-metric span{font-size:11px;color:#667085}.public-metric.green:after{background:rgba(21,148,71,.12)}.public-metric.yellow:after{background:rgba(228,154,0,.13)}.public-metric.red:after{background:rgba(217,59,59,.11)}.public-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.public-panel{padding:24px;margin-bottom:18px}.public-panel h3{margin:0 0 15px;color:#0b4a7e}.big-percent{font-size:36px;font-weight:900;color:#0b4a7e}.public-progress-track,.composition-bar{height:16px;background:#e7f0f6;border-radius:999px;overflow:hidden;margin:12px 0}.public-progress-track i{display:block;height:100%;background:linear-gradient(90deg,#0f7dba,#159447);border-radius:inherit}.composition-bar i{display:block;height:100%;background:linear-gradient(90deg,#0f7dba,#28a4d6);border-radius:inherit}.public-progress-notes,.composition-legend{display:flex;justify-content:space-between;gap:15px;color:#667085;font-size:12px}.composition-legend span{display:flex;flex-direction:column;gap:4px}.public-loading,.public-error{grid-column:1/-1;padding:28px;text-align:center;background:rgba(255,255,255,.9);border-radius:18px;color:#667085}.public-error{color:#b42318}.btn-back-public{width:100%;margin-top:8px}.system-identity-v77{display:flex;gap:6px;flex-wrap:wrap}.system-identity-v77 span{white-space:normal}@media(max-width:1050px){.public-summary-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.public-page{padding:12px}.public-hero,.public-intro{align-items:flex-start;flex-direction:column}.public-summary-grid{grid-template-columns:1fr 1fr}.public-chart-grid{grid-template-columns:1fr}.public-brand h1{font-size:25px}}@media(max-width:440px){.public-summary-grid{grid-template-columns:1fr}}

/* SIMPROV v79 - Non Pengadaan */
.non-card-v79{border:1px solid #d7e7f4;border-radius:18px;margin:16px 0;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(20,73,115,.07)}
.non-card-head-v79{display:flex;justify-content:space-between;gap:16px;padding:18px 20px;background:linear-gradient(90deg,#edf7ff,#fff9eb)}
.non-card-head-v79 small{display:block;color:#667085;margin-top:4px}
.non-summary-v79{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px 20px}
.non-summary-v79 span{background:#f8fbfe;border:1px solid #e2edf6;border-radius:12px;padding:10px}
.non-summary-v79 small{display:block;color:#667085;margin-bottom:4px}
.non-actions-v79{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 16px;align-items:center}
.non-actions-v79 select,.non-actions-v79 input{max-width:260px}
.btn-link-v79{display:inline-flex;align-items:center;padding:10px 14px;border-radius:10px;background:#0b75b5;color:#fff;text-decoration:none;font-weight:700}
.non-docs-v79{padding:0 20px 18px}
.non-docs-v79>div{display:grid;grid-template-columns:1.2fr 1fr auto auto auto;gap:8px;align-items:center;border-top:1px solid #edf1f5;padding:10px 0}
.honor-row-v79{display:grid;grid-template-columns:1.2fr 1fr 1fr .55fr .8fr .8fr 1fr .7fr auto;gap:7px;margin-bottom:8px}
.honor-row-v79 input,.honor-row-v79 select{min-width:0}
@media(max-width:900px){.non-summary-v79{grid-template-columns:1fr 1fr}.honor-row-v79{grid-template-columns:1fr 1fr}.non-docs-v79>div{grid-template-columns:1fr}.non-actions-v79 select,.non-actions-v79 input{max-width:100%;width:100%}}

/* =========================================================
   SIMPROV v81 - Revisi Layout Perencanaan & Modal Honorarium
   ========================================================= */
.planning-table-wrap-v81{overflow-x:visible}
.planning-table-v81{width:100%;min-width:0;table-layout:fixed}
.planning-table-v81 th,.planning-table-v81 td{white-space:normal;word-break:break-word;vertical-align:top;font-size:12px;padding:10px 8px}
.planning-table-v81 th:nth-child(1),.planning-table-v81 td:nth-child(1){width:10%}
.planning-table-v81 th:nth-child(2),.planning-table-v81 td:nth-child(2){width:10%}
.planning-table-v81 th:nth-child(3),.planning-table-v81 td:nth-child(3){width:15%}
.planning-table-v81 th:nth-child(4),.planning-table-v81 td:nth-child(4){width:4%}
.planning-table-v81 th:nth-child(5),.planning-table-v81 td:nth-child(5){width:6%}
.planning-table-v81 th:nth-child(6),.planning-table-v81 td:nth-child(6){width:8%}
.planning-table-v81 th:nth-child(7),.planning-table-v81 td:nth-child(7){width:8%}
.planning-table-v81 th:nth-child(8),.planning-table-v81 td:nth-child(8){width:7%}
.planning-table-v81 th:nth-child(9),.planning-table-v81 td:nth-child(9){width:8%}
.planning-table-v81 th:nth-child(10),.planning-table-v81 td:nth-child(10){width:8%}
.planning-table-v81 th:nth-child(11),.planning-table-v81 td:nth-child(11){width:10%}
.planning-table-v81 th:nth-child(12),.planning-table-v81 td:nth-child(12){width:10%}
.planning-table-v81 .nowrap{white-space:normal}
.planning-table-v81 .btn-mini{display:block;width:100%;margin:0 0 6px}
.planning-table-v81 .btn-mini:last-child{margin-bottom:0}

.honor-modal-v81{width:min(1180px,96vw)!important;max-width:1180px!important}
.honor-modal-info-v81{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:10px 0 18px}
.honor-modal-info-v81>div{border:1px solid #dce7f3;background:#f8fbfe;border-radius:14px;padding:12px}
.honor-modal-info-v81 span{display:block;font-size:11px;font-weight:800;color:#667085;margin-bottom:4px;text-transform:uppercase;letter-spacing:.03em}
.honor-modal-info-v81 b{color:#0b4a7e;font-size:14px;line-height:1.45}
.honor-modal-body-v81{border:1px solid #dce7f3;border-radius:18px;background:#fff;padding:16px}
.honor-head-row-v81{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.honor-head-row-v81 span{font-size:16px;font-weight:800;color:#0b4a7e}
.honor-rows-v81{display:flex;flex-direction:column;gap:12px;max-height:52vh;overflow:auto;padding-right:4px}
.honor-row-v81{display:grid;grid-template-columns:1.35fr 1fr 1.1fr .55fr .8fr .8fr 1fr .8fr auto;gap:10px;align-items:end;padding:14px;border:1px solid #e1ebf5;border-radius:16px;background:#fbfdff}
.honor-row-v81 .field{margin:0}
.honor-row-v81 .field label{font-size:11px;font-weight:800;color:#667085;margin-bottom:6px;display:block}
.honor-row-v81 .field input,.honor-row-v81 .field select{width:100%;min-width:0}
.honor-remove-wrap{display:flex;align-items:end;height:100%}
.honor-remove-wrap .btn-red{width:100%}
.honor-actions-v81{margin-top:16px}

@media(max-width:1280px){
  .planning-table-v81 th,.planning-table-v81 td{font-size:11px;padding:9px 6px}
}
@media(max-width:980px){
  .planning-table-wrap-v81{overflow-x:auto}
  .planning-table-v81{min-width:980px}
  .honor-modal-info-v81{grid-template-columns:1fr 1fr}
  .honor-row-v81{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .honor-modal-info-v81{grid-template-columns:1fr}
  .honor-head-row-v81{flex-direction:column;align-items:stretch}
}

.summary-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px){.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.summary-grid{grid-template-columns:1fr}}

/* =========================================================
   SIMPROV v82 - Dashboard Publik Ringkas + Layout Melebar
   ========================================================= */
.public-page,.app-page{
  max-width:none !important;
  width:100%;
  margin:0 auto;
  padding:18px 16px 38px !important;
}
.topbar,.public-hero,.public-intro,.panel,.public-panel,.summary-grid,.content-area{width:100%}
.public-intro{padding:20px 24px}
.public-intro h2{font-size:30px}
.public-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
.public-metric{min-height:108px}
.public-metric strong{font-size:24px}
.public-table-v82{min-width:0 !important;width:100%}
.public-table-v82 th,.public-table-v82 td{white-space:normal;word-break:break-word}
.public-simple-stats-v82{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.public-simple-stats-v82>div{border:1px solid #dbe7f2;background:#f8fbfe;border-radius:16px;padding:14px}
.public-simple-stats-v82 span{display:block;font-size:12px;font-weight:800;color:#667085;margin-bottom:6px}
.public-simple-stats-v82 b{display:block;font-size:22px;color:#0b4a7e}
.public-cache-info-v82{margin-top:12px;font-size:12px;color:#667085}
.public-loading-v82{display:flex;align-items:center;justify-content:center;gap:14px;min-height:94px}
.public-loading-v82 b{display:block;color:#0b4a7e}
.public-loading-v82 small{display:block;color:#667085;margin-top:4px}
.public-spinner-v82{width:28px;height:28px;border-radius:50%;border:3px solid #d6e6f2;border-top-color:#0f7dba;animation:spinV82 .8s linear infinite}
@keyframes spinV82{to{transform:rotate(360deg)}}

/* [v186.8] Aturan body{zoom} dihapus: ukuran halaman tidak lagi diatur dengan zoom. */
@media(max-width:1100px){
  .public-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:760px){
  .public-page,.app-page{width:calc(100vw - 12px);padding:12px 6px 28px !important}
  .public-summary-grid{grid-template-columns:1fr !important}
  .public-simple-stats-v82{grid-template-columns:1fr}
}

/* =========================================================
   SIMPROV v83 - Popup Tengah & Pencatatan Non Pengadaan
   ========================================================= */
.honor-backdrop-v83{position:fixed!important;inset:0!important;display:grid!important;place-items:center!important;background:rgba(15,31,49,.48)!important;backdrop-filter:blur(9px)!important;-webkit-backdrop-filter:blur(9px)!important;z-index:12000!important;padding:24px!important}
.honor-backdrop-v83.hidden{display:none!important}
.honor-modal-v83{width:min(1180px,96vw)!important;max-width:1180px!important;max-height:92vh!important;overflow:auto!important;margin:0!important}
.non-list-v83{display:flex;flex-direction:column;gap:14px}
.non-card-v83{border:1px solid #d8e7f3;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 10px 28px rgba(11,74,126,.07)}
.non-card-v83.is-valid{border-left:4px solid #159447}
.non-card-head-v83{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:16px 18px;background:linear-gradient(90deg,#eef7ff,#fffdf8)}
.non-card-head-v83 small{display:block;color:#667085;margin-top:4px}
.non-card-right-v83{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.non-card-actions-v83{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid #edf2f6;background:#fbfdff}
.non-card-actions-v83 span{margin-left:auto;color:#667085;font-size:12px;font-weight:700}
.non-card-body-v83{padding:0 18px 14px}
.doc-item-v83{display:grid;grid-template-columns:1.3fr .7fr auto auto auto auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid #edf2f6}
.doc-item-v83 small{display:block;color:#667085;margin-top:3px}
.empty-box{padding:28px;text-align:center;color:#667085;border:1px dashed #cdddea;border-radius:16px;background:#f9fcfe}
@media(max-width:900px){
  .non-card-head-v83{align-items:flex-start;flex-direction:column}
  .non-card-right-v83{justify-content:flex-start}
  .doc-item-v83{grid-template-columns:1fr}
  .non-card-actions-v83 span{margin-left:0;width:100%}
  .honor-backdrop-v83{padding:10px!important}
  .honor-modal-v83{max-height:96vh!important}
}

/* =========================================================
   SIMPROV v84 - Mobile Perencanaan & Ringkasan Publik
   ========================================================= */
.public-system-note-v84{margin:0 0 12px;color:#526a7d;font-size:12px;line-height:1.5;background:#f4f9fd;border:1px solid #dbe9f4;border-radius:12px;padding:10px 12px}
@media(max-width:980px){
  .planning-table-wrap-v81{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .planning-table-v81{min-width:1180px!important;width:1180px!important;table-layout:auto!important}
  .planning-table-v81 th,.planning-table-v81 td{white-space:nowrap!important;word-break:normal!important;font-size:12px!important;padding:11px 10px!important}
  .planning-table-v81 th:nth-child(1),.planning-table-v81 td:nth-child(1){min-width:110px!important}
  .planning-table-v81 th:nth-child(2),.planning-table-v81 td:nth-child(2){min-width:180px!important;white-space:normal!important}
  .planning-table-v81 th:nth-child(3),.planning-table-v81 td:nth-child(3){min-width:200px!important;white-space:normal!important}
  .planning-table-v81 th:nth-child(4),.planning-table-v81 td:nth-child(4){min-width:55px!important}
  .planning-table-v81 th:nth-child(5),.planning-table-v81 td:nth-child(5){min-width:90px!important}
  .planning-table-v81 th:nth-child(6),.planning-table-v81 td:nth-child(6),
  .planning-table-v81 th:nth-child(7),.planning-table-v81 td:nth-child(7){min-width:120px!important}
  .planning-table-v81 th:nth-child(8),.planning-table-v81 td:nth-child(8){min-width:135px!important}
  .planning-table-v81 th:nth-child(9),.planning-table-v81 td:nth-child(9){min-width:125px!important}
  .planning-table-v81 th:nth-child(10),.planning-table-v81 td:nth-child(10){min-width:140px!important}
  .planning-table-v81 th:nth-child(11),.planning-table-v81 td:nth-child(11){min-width:150px!important;white-space:normal!important}
  .planning-table-v81 th:nth-child(12),.planning-table-v81 td:nth-child(12){min-width:130px!important}
  .status-legend-v60,.status-legend-v74{flex-wrap:nowrap!important;overflow-x:auto!important;padding-bottom:5px}
  .status-legend-v60>* ,.status-legend-v74>*{flex:0 0 auto}
}

/* SIMPROV v87 - Modal Honorarium Lebar dan Final */
.honor-backdrop-v87{position:fixed!important;inset:0!important;z-index:99999!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:20px!important;background:rgba(9,24,38,.56)!important;backdrop-filter:blur(10px)!important}
.honor-backdrop-v87.hidden{display:none!important}
.honor-modal-v87{width:min(1480px,98vw)!important;max-width:1480px!important;max-height:92vh!important;overflow:auto!important;border-radius:22px!important;padding:22px!important}
.honor-rows-v87{display:flex;flex-direction:column;gap:12px;max-height:52vh;overflow:auto;padding-right:4px}
.honor-row-v87{display:grid;grid-template-columns:1.25fr 1fr 1fr .5fr .8fr .8fr 1.2fr .65fr auto;gap:10px;align-items:end;padding:14px;border:1px solid #dce8f3;border-radius:16px;background:#fbfdff}
.honor-row-v87 .field{margin:0;min-width:0}
.honor-row-v87 .field label{display:block;font-size:11px;font-weight:800;color:#596f82;margin-bottom:6px}
.honor-row-v87 input,.honor-row-v87 select{width:100%;min-width:0}
.honor-tax-note-v87{margin:12px 0 16px;padding:12px 14px;border-radius:14px;background:#fff8e7;border:1px solid #f1d48a;color:#6b4d00;line-height:1.5}
.btn-disabled-v87{opacity:.65!important;cursor:not-allowed!important;background:#d9e1e8!important;color:#64748b!important;box-shadow:none!important}
@media(max-width:1100px){.honor-row-v87{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.honor-modal-v87{width:96vw!important;padding:14px!important}.honor-row-v87{grid-template-columns:1fr 1fr}.honor-backdrop-v87{padding:8px!important}}


/* SIMPROV v88 - Perbaikan tombol aksi */
.planning-table-v81 th:last-child,.planning-table-v81 td:last-child{width:150px!important;min-width:150px!important}
.action-cell-v88{white-space:normal!important;min-width:150px!important}
.action-buttons-v88{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;width:100%!important}
.action-buttons-v88 .btn-mini,.action-buttons-v88 button{display:block!important;width:100%!important;min-width:130px!important;white-space:normal!important;word-break:normal!important;line-height:1.25!important;margin:0!important;padding:9px 10px!important}
@media(max-width:980px){.planning-table-v81 th:last-child,.planning-table-v81 td:last-child{width:150px!important;min-width:150px!important}}

/* SIMPROV v90 - Verifikasi massal dan keseragaman dokumen */
.bulk-toolbar-v90{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin:0 0 10px;border:1px solid #d7e7f4;border-radius:12px;background:#f7fbff}
.bulk-toolbar-v90 label{display:flex;align-items:center;gap:7px;font-weight:700;color:#0b4a7e}
.bulk-toolbar-v90 small{color:#667085}
.bulk-check-v90{display:flex;align-items:center;gap:5px;min-width:62px;font-weight:800;color:#159447}
.bulk-check-v90 input{width:17px;height:17px;accent-color:#159447}
.doc-status-modal-v90{width:min(860px,94vw)!important;max-width:860px!important}
.status-detail-grid-v90{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.status-detail-grid-v90>div,.status-note-v90,.status-history-v90{border:1px solid #dce7f3;border-radius:14px;background:#f9fcff;padding:12px}
.status-detail-grid-v90 span{display:block;font-size:11px;font-weight:800;color:#667085;text-transform:uppercase;margin-bottom:5px}
.status-note-v90 p{margin:7px 0 0}
.status-history-v90>div{padding:8px 0;border-bottom:1px solid #e7eef5}
.status-history-v90>div:last-child{border-bottom:0}
.doc-group-foot-v90{margin-top:10px;padding:12px 14px;border-top:1px solid #e6eef5;color:#667085}
.non-card-body-v83 .doc-item-v47{grid-template-columns:auto 1.35fr .8fr auto 1.4fr}
.doc-list .doc-item-v47{grid-template-columns:auto 1.35fr .8fr auto 1.4fr}
@media(max-width:900px){
  .status-detail-grid-v90{grid-template-columns:1fr}
  .bulk-toolbar-v90{align-items:stretch}
  .bulk-toolbar-v90>*{width:100%}
  .non-card-body-v83 .doc-item-v47,.doc-list .doc-item-v47{grid-template-columns:1fr}
  .bulk-check-v90{min-width:0}
}

/* SIMPROV v91 - Posisi centang, kolom jumlah, dan aksi Non Pengadaan */
.bulk-toolbar-v90{justify-content:flex-end!important;text-align:right}
.bulk-toolbar-v90 label{margin-left:auto!important;order:2}
.bulk-toolbar-v90 button{order:3}
.bulk-toolbar-v90 small{order:1;margin-right:auto}
.doc-list .doc-item-v47,.non-card-body-v83 .doc-item-v47{
  grid-template-columns:1.35fr .8fr auto 1.4fr auto!important;
}
.doc-item-v47>.bulk-check-v90{
  grid-column:5!important;
  grid-row:1!important;
  justify-self:end!important;
  margin-left:auto!important;
  min-width:auto!important;
}
.planning-table-v81 th:nth-child(7),.planning-table-v81 td:nth-child(7){
  width:12%!important;
  min-width:165px!important;
  white-space:nowrap!important;
}
@media(max-width:980px){
  .planning-table-v81 th:nth-child(7),.planning-table-v81 td:nth-child(7){min-width:170px!important}
}
@media(max-width:900px){
  .bulk-toolbar-v90{justify-content:stretch!important;text-align:left}
  .bulk-toolbar-v90 small,.bulk-toolbar-v90 label,.bulk-toolbar-v90 button{order:initial!important;margin:0!important;width:100%!important}
  .doc-item-v47>.bulk-check-v90{grid-column:1!important;justify-self:end!important;width:auto!important}
}

/* SIMPROV v92 */
.honor-modal-v92{width:min(1560px,98vw)!important;max-width:1560px!important;max-height:94vh!important;overflow:auto!important;border-radius:22px!important;padding:24px!important}
.honor-rows-v92{display:flex;flex-direction:column;gap:14px;max-height:56vh;overflow:auto;padding-right:4px}
.honor-row-v92{border:1px solid #dce8f3;border-radius:18px;background:#fbfdff;padding:16px;display:flex;flex-direction:column;gap:12px}
.honor-row-main-v92{display:grid;grid-template-columns:1.3fr 1.15fr 1.2fr .45fr;gap:12px;align-items:end}
.honor-row-second-v92{grid-template-columns:1.25fr 1fr 1.35fr .55fr auto}
.honor-row-v92 .field{margin:0;min-width:0}.honor-row-v92 label{display:block;font-size:11px;font-weight:800;color:#596f82;margin-bottom:6px}.honor-row-v92 input,.honor-row-v92 select{width:100%;min-width:0}
.manual-tax-v92{background:#fff8e6!important;border-color:#e5a20b!important}
.selected-kegiatan-detail-v92{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:12px 0 18px;padding:14px;border:1px solid #dbe7f2;border-radius:16px;background:#f8fbfe}
.selected-kegiatan-detail-v92>div{min-width:0}.selected-kegiatan-detail-v92 span{display:block;font-size:10px;font-weight:800;color:#667085;text-transform:uppercase;margin-bottom:4px}.selected-kegiatan-detail-v92 b{display:block;color:#0b4a7e;font-size:13px;line-height:1.4;word-break:break-word}
@media(max-width:1100px){.honor-row-main-v92,.honor-row-second-v92{grid-template-columns:repeat(2,minmax(0,1fr))}.selected-kegiatan-detail-v92{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.honor-modal-v92{width:96vw!important;padding:14px!important}.honor-row-main-v92,.honor-row-second-v92{grid-template-columns:1fr}.selected-kegiatan-detail-v92{grid-template-columns:1fr 1fr}}

/* SIMPROV v93 - Upload langsung pada rincian Non Pengadaan */
.inline-non-upload-v93{margin:14px 12px 4px;border-top:1px solid #dce8f2;padding-top:14px}
.inline-non-title-v93{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:#0b4a7e}
.inline-non-title-v93 span{font-size:12px;color:#667085}
.inline-non-row-v93{display:grid;grid-template-columns:minmax(190px,.8fr) minmax(260px,1.7fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px dashed #e1eaf2}
.inline-non-row-v93:first-of-type{border-top:0}
.inline-non-row-v93 small{display:block;color:#667085;margin-top:3px}
.inline-non-row-v93 input[type=file]{width:100%;padding:8px;border:1px solid #d7e4ef;border-radius:10px;background:#fff}
.inline-non-complete-v93{margin:14px 12px 4px;padding:12px;border-radius:12px;background:#ebfff1;border:1px solid #bdebc9;color:#16743a;font-weight:700}
@media(max-width:760px){.inline-non-row-v93{grid-template-columns:1fr}.inline-non-title-v93{align-items:flex-start;flex-direction:column}}

/* ===== SIMPROV v94 - Pipeline Pengadaan Langsung, Master Penyedia, Pencatatan BL ===== */
.pl-stepper-v94{display:flex;align-items:flex-start;gap:0;margin:14px 4px 18px;overflow-x:auto;padding-bottom:6px}
.pl-step-v94{display:flex;flex-direction:column;align-items:center;min-width:96px;text-align:center;gap:6px}
.pl-step-dot-v94{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:#eef2f7;color:#8592a6;border:2px solid #d7e0ec}
.pl-step-v94.done .pl-step-dot-v94{background:#16a34a;color:#fff;border-color:#16a34a}
.pl-step-v94.next .pl-step-dot-v94{background:#fff;color:#1d6fd1;border-color:#1d6fd1;box-shadow:0 0 0 4px rgba(29,111,209,.14)}
.pl-step-v94.proses .pl-step-dot-v94{background:#f59e0b;color:#fff;border-color:#f59e0b}
.pl-step-name-v94{font-size:11px;font-weight:700;color:#64748b;line-height:1.25}
.pl-step-v94.done .pl-step-name-v94{color:#166534}
.pl-step-v94.next .pl-step-name-v94{color:#1d6fd1}
.pl-step-line-v94{flex:1;min-width:18px;height:2px;background:#d7e0ec;margin-top:16px}
.pl-tahap-v94{border:1px solid #e2e9f2;border-radius:12px;margin:8px 0;background:#fff;overflow:hidden}
.pl-tahap-v94.done{background:#f6fdf8;border-color:#c9ecd4}
.pl-tahap-v94>summary{cursor:pointer;padding:11px 14px;font-weight:700;display:flex;align-items:center;gap:8px;list-style:none}
.pl-tahap-v94>summary::-webkit-details-marker{display:none}
.pl-tahap-no-v94{background:#eef4ff;color:#1d6fd1;border-radius:8px;padding:2px 8px;font-size:12px;font-weight:800}
.pl-tahap-v94.done .pl-tahap-no-v94{background:#dcf5e4;color:#166534}
.pl-tahap-status-v94{margin-left:auto;font-size:11px;font-weight:800;color:#94a3b8;background:#f1f5f9;border-radius:999px;padding:3px 10px}
.pl-tahap-status-v94.ok{color:#166534;background:#dcf5e4}
.pl-tahap-body-v94{padding:4px 14px 14px;border-top:1px dashed #e2e9f2}
.pl-info-v94{margin:8px 0;font-size:13px;color:#334155;background:#f8fafc;border-radius:10px;padding:8px 10px}
.pl-dok-row-v94{padding:5px 0;font-size:13px;color:#334155;border-bottom:1px dotted #eef2f7}
.pl-dok-row-v94:last-of-type{border-bottom:0}
.pl-dok-chip-v94{display:inline-block;min-width:88px;text-align:center;font-size:10px;font-weight:800;border-radius:999px;padding:3px 8px;margin-right:6px;background:#fee2e2;color:#b91c1c}
.pl-dok-chip-v94.ok{background:#dcf5e4;color:#166534}
.pl-dok-chip-v94.wait{background:#fef3c7;color:#92400e}
.pl-upload-v94{margin-top:10px;background:#f8fafc;border:1px solid #e2e9f2;border-radius:10px;padding:10px}
.pl-upload-row-v94{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.pl-upload-row-v94 select,.pl-upload-row-v94 input[type=file]{padding:8px;border:1px solid #d7e4ef;border-radius:10px;background:#fff}
.pl-form-v94{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;background:#f5f9ff;border:1px solid #dbe8fb;border-radius:12px;padding:12px}
.pl-form-v94 button{grid-column:1/-1;justify-self:start}
.pl-form-v94 button[disabled]{opacity:.55;cursor:not-allowed}
.pl-buka-v94{margin-top:10px}
.pl-progress-v94{font-size:12px;font-weight:800;background:#eef4ff;color:#1d6fd1;border-radius:999px;padding:5px 12px;white-space:nowrap}
.pl-progress-v94.ok{background:#dcf5e4;color:#166534}
.bl-catat-v94{border-left:4px solid #16a34a}
@media(max-width:760px){.pl-step-v94{min-width:76px}.pl-form-v94{grid-template-columns:1fr}}

/* ===== SIMPROV v95 - List Paket ala SPSE + Standar Biaya ===== */
.paket-table-v95 th{white-space:nowrap}
.paket-row-v95 td{vertical-align:middle}
.paket-link-v95{font-weight:700;color:#1d6fd1;text-decoration:none}
.paket-link-v95:hover{text-decoration:underline}
.paket-badge-v95{display:inline-block;font-size:10px;font-weight:800;border-radius:5px;padding:2px 7px;margin-left:4px;vertical-align:middle;background:#eef2f7;color:#475569;border:1px solid #d7e0ec}
.paket-badge-v95.bl{background:#dcf5e4;color:#166534;border-color:#bdebc9}
.paket-badge-v95.pl{background:#fde9d2;color:#b45309;border-color:#f7d6ab}
.paket-badge-v95.tm{background:#fee2e2;color:#b91c1c;border-color:#f7c5c5}
.paket-badge-v95.non{background:#ede9fe;color:#6d28d9;border-color:#ddd3fb}
.paket-badge-v95.ver{background:#e0edff;color:#1d4ed8;border-color:#c4dbff}
.paket-toolbar-v95{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0 8px;flex-wrap:wrap}
.paket-toolbar-v95 input{min-width:240px;padding:9px 12px;border:1px solid #d7e4ef;border-radius:10px}
.paket-buat-v95{background:#16a34a}
.paket-buka-v95{white-space:nowrap}
.paket-backbar-v95{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.paket-backbar-v95>div{flex:1;min-width:200px}
.sbv-overlay-v95{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:18px}
.sbv-overlay-v95.hidden{display:none}
.sbv-box-v95{background:#fff;border-radius:16px;max-width:860px;width:100%;max-height:88vh;display:flex;flex-direction:column;padding:18px;box-shadow:0 24px 60px rgba(2,20,43,.35)}
.sbv-head-v95{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.sbv-box-v95>input{padding:10px 12px;border:1px solid #d7e4ef;border-radius:10px;margin-bottom:10px}
.sbv-body-v95{overflow:auto;padding-right:6px}
.sbv-body-v95 h4{margin:14px 0 6px;color:#0f3d75}
.sbv-body-v95 table{width:100%;border-collapse:collapse;font-size:13px}
.sbv-body-v95 th,.sbv-body-v95 td{border:1px solid #e2e9f2;padding:7px 9px;text-align:left}
.sbv-body-v95 th{background:#f5f9ff}
.sbv-nilai-v95{white-space:nowrap;font-weight:700;color:#0f3d75}
@media(max-width:760px){.paket-toolbar-v95 input{min-width:0;width:100%}.paket-backbar-v95{align-items:flex-start}}

/* ===== SIMPROV v96 - Polesan UI, upload per-baris, sumber biaya, template ===== */
.paket-table-v95 tbody tr:hover{background:#f5f9ff}
.paket-meta-v96{margin-top:3px}
.paket-meta-v96 .paket-badge-v95{margin-left:0;margin-right:4px}
.paket-status-v96{font-size:11px;font-weight:700;color:#475569;background:#f1f5f9;border-radius:999px;padding:4px 10px;white-space:nowrap;display:inline-block}
.paket-status-v96.ok{color:#166534;background:#dcf5e4}
.selesai-banner-v96{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:12px;padding:12px 14px;font-size:14px}
.input-over-v96{border-color:#ef4444 !important;box-shadow:0 0 0 3px rgba(239,68,68,.15)}
.max-warn-v96{color:#b91c1c;font-weight:700;display:block;margin-top:4px}
.dok-table-v96 td{vertical-align:middle}
.dok-table-v96 input[type=file]{max-width:190px;font-size:11px}
.dok-table-v96 tr.siap-upload-v96{background:#f0f9ff}
.dok-upload-bar-v96{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:10px 14px;margin-bottom:10px;flex-wrap:wrap}
.dok-upload-bar-v96 span{font-weight:700;color:#1d4ed8;font-size:13px}
.kecil-v96{font-size:11px}
.pl-penyedia-card-v96{border-left:4px solid #1d6fd1}
.tpl-bar-v96{margin-top:14px;background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:12px 14px;font-size:13px}
.tpl-btns-v96{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.non-stat-grid-v96{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:6px 0 12px}
.non-stat-v96{background:#f8fafc;border:1px solid #e2e9f2;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.non-stat-v96 small{color:#64748b;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.non-stat-v96 b{color:#0f3d75;font-size:14px}
.sb-blok-v96{background:#f5f9ff;border:1px solid #dbe8fb;border-radius:14px;padding:14px;margin-bottom:14px}
.sb-blok-title-v96{display:block;color:#0f3d75;margin-bottom:8px;font-size:14px}
.sb-pick-row-v96{display:flex;gap:0}
.sb-pick-row-v96 input{flex:1;border-radius:10px 0 0 10px !important;background:#fff}
.sb-pick-btn-v96{border-radius:0 10px 10px 0;white-space:nowrap;background:linear-gradient(90deg,#1d6fd1,#0ea5e9);color:#fff;border:0;padding:0 16px;font-weight:800;cursor:pointer}
.sb-card-v96{display:flex;align-items:center;gap:12px;border:1px solid #e2e9f2;border-radius:12px;padding:10px 14px;margin:7px 0;cursor:pointer;background:#fff;transition:box-shadow .12s,border-color .12s}
.sb-card-v96:hover{border-color:#1d6fd1;box-shadow:0 4px 14px rgba(29,111,209,.12)}
.sb-huruf-v96{width:34px;height:34px;border-radius:9px;background:#eef4ff;color:#1d6fd1;font-weight:900;display:flex;align-items:center;justify-content:center;flex:none}
.sb-info-v96{flex:1;min-width:0}
.sb-info-v96 b{color:#0f3d75;display:block}
.sb-info-v96 small{color:#64748b;font-weight:700;font-size:11px}
.sb-nilai-v96{text-align:right;flex:none}
.sb-nilai-v96 b{color:#0f3d75;display:block;white-space:nowrap}
.sb-nilai-v96 small{color:#b45309;font-weight:900;font-size:9.5px;letter-spacing:.5px}
@media(max-width:760px){.dok-table-v96 input[type=file]{max-width:130px}.tpl-btns-v96 button{flex:1}.sb-nilai-v96 b{font-size:13px}}

/* SIMPROV v101 */
.template-meta-grid-v101{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
@media(max-width:760px){.template-meta-grid-v101{grid-template-columns:1fr}}

/* SIMPROV v102 - struktur pejabat & keterangan non pengadaan */
.ppk-grid-v102{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.ppk-grid-v102 .field small{display:block;margin-top:7px;line-height:1.45;color:#60738b}.non-info-v102{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}.non-info-v102>div{padding:12px 14px;border:1px solid #d8e8f5;border-radius:12px;background:#f8fbfe}.non-info-v102 span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#718096;margin-bottom:4px}.non-info-v102 strong{font-size:14px;color:#0d4777}.non-info-v102 p{grid-column:1/-1;margin:0;padding:12px 14px;border-left:4px solid #149bd7;border-radius:10px;background:#f1f9fd;line-height:1.5;color:#334e68}.metode-grid+.doc-help-box{display:none!important}@media(max-width:760px){.ppk-grid-v102,.non-info-v102{grid-template-columns:1fr}}


/* SIMPROV v103 */
.honor-row-v103{grid-template-columns:1.3fr 1.15fr 1.2fr .55fr 1fr 1fr 1.15fr .75fr auto!important}
.honor-row-v103 .htarif[readonly]{background:#edf6ff;color:#0b477d;font-weight:800;cursor:not-allowed}
.pipeline-v103{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px;overflow-x:auto;padding:8px 2px}
.pipe-step-v103{display:flex;align-items:center;gap:9px;border:1px solid #d7e4ef;border-radius:12px;background:#fff;padding:12px;color:#66788c;min-width:145px}
.pipe-step-v103 span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#e8eef5;font-weight:800}
.pipe-step-v103.done{background:#effbf4;border-color:#bfe8ce;color:#166b3a}.pipe-step-v103.done span{background:#27ae60;color:#fff}
.notice-v103{padding:14px 16px;border:1px solid #f4d27c;background:#fff9e8;border-radius:12px;color:#805700;font-weight:700}
.dok-table-v96 input[type=file]{width:100%!important;min-width:280px!important;max-width:none!important;color:#334e68}
.dok-table-v96 th:nth-child(4),.dok-table-v96 td:nth-child(4){min-width:320px!important;width:34%!important}
.dok-upload-bar-v96 button{white-space:nowrap}
@media(max-width:900px){.honor-row-v103{grid-template-columns:1fr 1fr!important}.pipeline-v103{grid-template-columns:repeat(6,170px)}.dok-table-v96 input[type=file]{min-width:220px!important}}

/* SIMPROV v104 */
.pipe-step-v103.waiting{border-color:#8fc8ff;background:#eef7ff;color:#0b5b9a}
.pipe-step-v103.waiting span{background:#168bd2;color:#fff}
.pipe-step-v103.repair{border-color:#ffb7b7;background:#fff0f0;color:#a82727}
.pipe-step-v103.repair span{background:#e94b4b;color:#fff}
.dok-table-v96 input[type="file"]{min-width:260px;max-width:100%}
.dok-table-v96 th:nth-child(2),.dok-table-v96 td:nth-child(2){min-width:190px}
.dok-table-v96 th:nth-child(4),.dok-table-v96 td:nth-child(4){min-width:280px}


/* SIMPROV v105 */
.hps-box-v105{margin:16px 0;padding:14px;border:1px solid #d7e5f3;border-radius:14px;background:#fbfdff}.hps-table-v105{min-width:1100px}.hps-table-v105 input{width:100%;min-width:80px}.hps-table-v105 th:nth-child(1){min-width:260px}.hps-table-v105 th:nth-child(2){min-width:130px}.hps-table-v105 th:nth-child(3){width:80px}.hps-table-v105 th:nth-child(4){min-width:150px}.hps-table-v105 th:nth-child(5){width:95px}.hps-table-v105 th:nth-child(6){min-width:160px}.hps-table-v105 th:nth-child(7){min-width:220px}.hps-grand-v105{text-align:right;padding:14px 6px;font-size:16px}.hps-grand-v105 b{display:inline-block;min-width:180px;margin-left:20px;color:#0b4f86}.pipeline-v103 .pipe-step-v103.waiting{background:#e8f3ff;border-color:#8fc7ff;color:#0b5f9d}.pipeline-v103 .pipe-step-v103.repair{background:#fff0f0;border-color:#ffaaaa;color:#b51f1f}

/* SIMPROV v107 - Nilai honor tidak dapat diedit */
.honor-row-v87 .htarif[readonly],
.honor-row-v87 .htarif[aria-readonly="true"]{
  background:#eef6ff !important;
  color:#0d4779 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
  user-select:none !important;
}

/* SIMPROV v112 */
.honor-row-v112{display:grid;grid-template-columns:1.15fr 1fr 1.1fr .45fr 1fr 1fr 1.05fr .72fr auto;gap:10px;align-items:end}
.realisasi-verif-actions-v112{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
@media(max-width:1100px){.honor-row-v112{grid-template-columns:repeat(2,minmax(0,1fr))}.honor-remove-wrap{grid-column:span 2}}

/* SIMPROV v117 */
.paket-row-selesai-v117{border-left:4px solid #28a745!important;background:linear-gradient(90deg,#effcf3 0%,#fff 55%)!important}
.paket-link-selesai-v117{color:#18833a!important;font-weight:800}
.paket-status-selesai-v117{display:inline-flex;padding:5px 10px;border-radius:999px;background:#dcf8e5;color:#167239;font-weight:800;font-size:12px;border:1px solid #bdecca}
.pipeline-pgd-v117{grid-template-columns:repeat(5,minmax(165px,1fr))}
@media(max-width:800px){.pipeline-pgd-v117{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto}}

.modal-wide-v121{width:min(1180px,96vw);max-height:92vh;overflow:auto}.btn-hps-opt-v121{margin-top:8px;font-size:12px}.hps-opt-row-v121 input{min-width:110px}.hps-opt-spesifikasi{min-width:220px!important}

/* SIMPROV v122 */
body.modal-open-v122{overflow:hidden}
.hps-modal-backdrop-v122{position:fixed!important;inset:0!important;z-index:20000!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:18px!important;background:rgba(20,42,64,.42)!important;backdrop-filter:blur(7px)!important}
.hps-modal-card-v122{position:relative!important;width:min(1240px,96vw)!important;max-height:92vh!important;overflow:auto!important;margin:0!important;box-shadow:0 28px 80px rgba(15,45,75,.28)!important}
.hps-table-wrap-v122{max-height:45vh;overflow:auto}
@media(max-width:720px){.hps-modal-backdrop-v122{padding:8px!important}.hps-modal-card-v122{width:98vw!important;max-height:96vh!important;padding:14px!important}}

/* =========================================================
   SIMPROV v123 - Pengadaan Langsung bertahap
   ========================================================= */
.modal-pl-v123{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(35,58,77,.34);backdrop-filter:blur(7px)}
.modal-stage-v123{width:min(1180px,96vw);max-height:90vh;overflow:hidden;display:flex;flex-direction:column;border-radius:20px;background:#fff;box-shadow:0 24px 70px rgba(20,52,80,.28)}
.modal-stage-v123 .modal-head{flex:0 0 auto;padding:20px 22px;border-bottom:1px solid #dce9f4;background:linear-gradient(135deg,#fff,#f5fbff)}
.modal-stage-body-v123{overflow:auto;padding:18px 22px 24px}
.eyebrow-v123{display:block;color:#0c75b9;font-weight:800;letter-spacing:.12em;margin-bottom:5px}
.stage-modal-section-v123{padding:16px;border:1px solid #dce8f2;border-radius:16px;background:#fbfdff;margin-bottom:16px}
.stage-modal-section-v123:last-child{margin-bottom:0}
.stage-modal-section-v123>h4{margin:0 0 13px;color:#123f73}
.template-stage-section-v123{padding:15px 0;border-bottom:1px solid #e2edf5}
.template-stage-section-v123:last-child{border-bottom:0}
.template-stage-section-v123 h4{margin:0 0 12px;color:#17497d}
.template-stage-grid-v123{display:grid;gap:10px}
.template-item-v123{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;border:1px solid #dbe8f3;border-radius:13px;background:#fff}
.template-item-v123>div:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.template-item-v123 b{color:#153f70}
.template-item-v123 small{color:#708399;line-height:1.4}
.progress-pl-v123{overflow:hidden}
.progress-head-v123{display:flex;align-items:center;justify-content:space-between;gap:24px}
.progress-head-v123 small{font-weight:800;letter-spacing:.13em;color:#0f77b7}
.progress-head-v123 h3{margin:7px 0 4px;font-size:clamp(24px,2.4vw,36px)}
.progress-head-v123 p{margin:0;color:#6d7f91}
.progress-circle-v123{--p:0;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:conic-gradient(#1b96d3 calc(var(--p)*1%),#e7eff6 0);position:relative}
.progress-circle-v123:before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}
.progress-circle-v123 b{position:relative;color:#123f70;font-size:15px}
.progress-line-v123{height:8px;background:#e8f0f6;border-radius:999px;overflow:hidden;margin:18px 0}
.progress-line-v123 i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0c69a9,#28a8d7,#27b66c);transition:width .25s ease}
.summary-pl-v123{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.summary-pl-v123>div{padding:14px;border:1px solid #dce8f2;border-radius:13px;background:#f9fcff;min-width:0}
.summary-pl-v123 span{display:block;text-transform:uppercase;font-size:11px;font-weight:800;color:#718297;margin-bottom:7px}
.summary-pl-v123 b{display:block;color:#123f70;font-size:16px;overflow-wrap:anywhere}
.actions-pl-v123{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.stage-grid-v123{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.stage-card-v123{position:relative;padding:16px;border:1px solid #dce8f2;border-radius:16px;background:#fff;box-shadow:0 7px 20px rgba(28,76,112,.04);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.stage-card-v123:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(28,76,112,.08)}
.stage-card-v123.done{border-color:#aee4bf;background:#f2fff6}
.stage-card-v123.waiting{border-color:#9fd4f4;background:#f3faff}
.stage-card-v123.repair{border-color:#f4aaa5;background:#fff6f5}
.stage-card-v123.locked{opacity:.58;background:#f7f9fb}
.stage-card-v123.open{border-color:#c6deef}
.stage-card-head-v123{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.stage-card-head-v123>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e8f4fc;color:#0c6fae;font-weight:900}
.stage-card-v123.done .stage-card-head-v123>span{background:#27af62;color:#fff}
.stage-card-v123.repair .stage-card-head-v123>span{background:#df4d45;color:#fff}
.stage-card-head-v123 small{padding:5px 9px;border-radius:999px;background:#edf3f7;color:#65788b;font-weight:800;text-align:right}
.stage-card-v123.done .stage-card-head-v123 small{background:#dff6e7;color:#177a3c}
.stage-card-v123.waiting .stage-card-head-v123 small{background:#dff2ff;color:#126eaa}
.stage-card-v123.repair .stage-card-head-v123 small{background:#ffe1df;color:#b92d27}
.stage-card-v123 h4{margin:0 0 7px;color:#143f70;font-size:16px}
.stage-card-v123 p{margin:0 0 14px;color:#76889a;font-size:13px}
.stage-card-v123 button{width:100%}
.btn-lihat-paket-v123{margin-left:6px;margin-top:4px;white-space:nowrap}
.modal-stage-v123 .dok-upload-bar-v96,.modal-stage-v123 .bulk-verif-bar-v108{position:sticky;top:0;z-index:2}
.modal-stage-v123 .table-wrap{max-height:430px}

@media(max-width:900px){
  .summary-pl-v123{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage-grid-v123{grid-template-columns:1fr}
  .template-item-v123{align-items:flex-start;flex-direction:column}
  .template-item-v123 .action-group{width:100%}
  .template-item-v123 .action-group button{flex:1}
}
@media(max-width:600px){
  .modal-pl-v123{padding:8px;align-items:flex-end}
  .modal-stage-v123{width:100%;max-height:94vh;border-radius:18px 18px 0 0}
  .modal-stage-body-v123{padding:14px}
  .progress-head-v123{align-items:flex-start}
  .progress-circle-v123{width:62px;height:62px}
  .summary-pl-v123{grid-template-columns:1fr}
  .actions-pl-v123>*{width:100%}
}

/* SIMPROV v126 */
.planning-table-v126{min-width:1360px}
.planning-table-v126 th.paket-col-v126,
.planning-table-v126 td.paket-cell-v126{min-width:132px;text-align:center}
.planning-table-v126 td:last-child{min-width:150px}
.planning-table-v126 .btn-lihat-paket-v123{width:100%;white-space:nowrap}

.modal-stage-v123{width:min(1460px,98vw)!important;max-height:94vh!important}
.modal-stage-body-v123{padding:20px 24px 26px!important}
.modal-stage-v123 .table-wrap{max-height:520px!important}
.modal-stage-v123 .dok-table-v96{min-width:1120px}

.hps-modal-wide-v126,
.hps-modal-card-v122.hps-modal-wide-v126,
#hpsOptionalModalV121 .modal-card{width:min(1500px,98vw)!important;max-width:none!important;max-height:94vh!important;overflow:auto!important}
#hpsOptionalModalV121 .form-grid{grid-template-columns:repeat(3,minmax(230px,1fr))!important}
#hpsOptionalModalV121 .hps-table-wrap-v126{overflow-x:visible!important;max-width:none!important}
#hpsOptionalModalV121 .hps-table-v105{width:100%!important;min-width:0!important;table-layout:fixed}
#hpsOptionalModalV121 .hps-table-v105 th:nth-child(1){width:18%}
#hpsOptionalModalV121 .hps-table-v105 th:nth-child(2){width:24%}
#hpsOptionalModalV121 .hps-table-v105 th:nth-child(3){width:10%}
#hpsOptionalModalV121 .hps-table-v105 th:nth-child(4){width:11%}
#hpsOptionalModalV121 .hps-table-v105 th:nth-child(5){width:14%}
#hpsOptionalModalV121 .hps-table-v105 th:nth-child(6){width:13%}
#hpsOptionalModalV121 .hps-table-v105 th:nth-child(7){width:10%}
#hpsOptionalModalV121 .hps-table-v105 input{width:100%;min-width:0}
#hpsOptionalModalV121 .hps-opt-jumlah{white-space:nowrap}

@media(max-width:900px){
  .modal-stage-v123{width:99vw!important}
  #hpsOptionalModalV121 .modal-card{width:99vw!important}
  #hpsOptionalModalV121 .form-grid{grid-template-columns:1fr!important}
  #hpsOptionalModalV121 .hps-table-wrap-v126{overflow-x:auto!important}
  #hpsOptionalModalV121 .hps-table-v105{min-width:1050px!important;table-layout:auto}
}

/* =========================================================
   SIMPROV v133 - UI akses, surat, konfirmasi, dan sesi
   ========================================================= */
#verifierModalV65.modal-backdrop.access-modal-v133{position:fixed!important;inset:0!important;z-index:25000!important;display:grid!important;place-items:center!important;padding:22px!important;background:rgba(17,42,66,.38)!important;backdrop-filter:blur(8px)!important}
#verifierModalV65.hidden{display:none!important}
.access-card-v133{width:min(1120px,96vw)!important;max-height:92vh!important;overflow:auto!important}
.access-card-v133 .account-scope-grid{max-height:320px;overflow:auto;padding:10px;border:1px solid #d9e8f3;border-radius:15px;background:#f8fcff}
.optional-scope-v133{opacity:.66}
.optional-scope-v133:before{content:'Opsional untuk role ini';display:inline-block;margin-bottom:8px;padding:5px 9px;border-radius:999px;background:#edf4f8;color:#61758a;font-size:11px;font-weight:800}
.field-help-v133{margin:3px 0 10px;color:#73869a;font-size:12px}
.account-card-v133{grid-template-columns:minmax(220px,1.15fr) minmax(150px,.65fr) minmax(260px,1.4fr) 100px 70px!important}

.confirm-v133{z-index:32000!important}
.confirm-card-v133{width:min(480px,94vw)!important;text-align:center;padding:28px!important}
.confirm-card-v133 h3{margin:12px 0 8px;color:#123f70}
.confirm-card-v133 p{margin:0 0 20px;color:#61758a;line-height:1.55}
.confirm-icon-v133{width:56px;height:56px;margin:auto;border-radius:50%;display:grid;place-items:center;background:#dff7e8;color:#138244;font-size:28px;font-weight:900}
.confirm-icon-v133.danger{background:#ffe6e4;color:#c8322c}
.confirm-card-v133 .modal-actions{justify-content:center}

.surat-head-v133{padding-bottom:14px!important}
.surat-tabs-v133{display:flex;gap:8px;flex-wrap:wrap}
.surat-tabs-v133 button{background:#f6fbff;color:#164979;border:1px solid #d5e7f4;box-shadow:none}
.surat-tabs-v133 button.active{background:linear-gradient(135deg,#0f5d99,#18a7da);color:#fff;border-color:transparent}
.surat-tabs-v133 button span{display:inline-grid;place-items:center;min-width:23px;height:23px;margin-left:6px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.25);font-size:11px}
.surat-form-panel-v133 textarea{resize:vertical;min-height:150px}
.surat-form-note-v133{margin:12px 0;padding:13px 15px;border-left:4px solid #169fd4;border-radius:10px;background:#edf8ff;color:#335d7b;font-size:13px;line-height:1.5}
.surat-list-v133{display:grid;gap:14px;margin-top:16px}
.surat-card-v133{padding:18px;border:1px solid #d9e8f3;border-radius:17px;background:linear-gradient(135deg,#fff,#f9fcff);box-shadow:0 8px 22px rgba(23,73,110,.06)}
.surat-card-head-v133{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.surat-card-head-v133 small{font-size:11px;font-weight:900;color:#1573aa;letter-spacing:.04em}
.surat-card-head-v133 h4{margin:5px 0 6px;color:#123f70;font-size:19px}
.surat-card-head-v133 p{margin:0;color:#718398;font-size:12px}
.surat-status-v133{display:inline-flex;align-items:center;justify-content:center;max-width:250px;padding:7px 10px;border-radius:999px;font-size:10px;font-weight:900;text-align:center;white-space:normal}
.surat-status-v133.gray{background:#edf2f6;color:#617386}.surat-status-v133.blue{background:#e1f2ff;color:#0b6da8}.surat-status-v133.green{background:#dcf8e5;color:#147c3e}.surat-status-v133.red{background:#ffe2df;color:#b9312b}
.surat-pipeline-v133{display:grid;grid-template-columns:repeat(6,minmax(100px,1fr));gap:6px;margin:16px 0;overflow:auto;padding-bottom:3px}
.surat-pipeline-v133>div{min-width:105px;padding:10px;border-radius:12px;border:1px solid #dfeaf2;background:#f6f8fa;color:#7a8997;display:flex;align-items:center;gap:8px}
.surat-pipeline-v133 span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e4ebf0;font-weight:900;font-size:11px}
.surat-pipeline-v133 b{font-size:11px}
.surat-pipeline-v133 .done{background:#edfbf2;border-color:#b9e7c8;color:#1a7e42}.surat-pipeline-v133 .done span{background:#24aa5c;color:#fff}.surat-pipeline-v133 .active{background:#eaf6ff;border-color:#93caf0;color:#0e6ca6}.surat-pipeline-v133 .active span{background:#178ec8;color:#fff}
.surat-summary-v133{padding:13px 15px;border-radius:12px;background:#f8fbfd;color:#435f75;font-size:13px;line-height:1.55}
.surat-summary-v133 p{margin:0 0 10px;white-space:pre-wrap}.surat-summary-v133>div{margin-top:5px}
.surat-history-v133{margin-top:10px;border:1px solid #dce8f1;border-radius:11px;padding:10px 12px;background:#fff}
.surat-history-v133 summary{cursor:pointer;color:#174d7c;font-weight:800;font-size:12px}.surat-history-v133 pre{white-space:pre-wrap;font-family:inherit;font-size:12px;line-height:1.55;color:#53697b}
.surat-actions-v133{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.surat-action-card-v133{width:min(760px,95vw)!important;max-height:90vh;overflow:auto}
.approval-statement-v133{margin:14px 0;padding:14px;border:1px solid #a9d8ef;border-radius:12px;background:#eef9ff;color:#285a78;line-height:1.5}
.surat-loading-v133{min-height:230px}.skeleton-v133{height:48px;margin-top:15px;border-radius:12px;background:linear-gradient(90deg,#edf3f7 25%,#f8fbfd 45%,#edf3f7 65%);background-size:240% 100%;animation:skeletonV133 1.2s linear infinite}.skeleton-v133.short{width:65%}@keyframes skeletonV133{to{background-position:-240% 0}}
.finance-stage-v133{border-top-color:#23a261!important}.finance-stage-v133 h3{margin:0 0 8px}.finance-stage-v133 p{color:#65798d}
.idle-warning-v133{position:fixed;right:18px;bottom:18px;z-index:31000;display:flex;align-items:center;gap:12px;max-width:520px;padding:14px 16px;border-radius:14px;background:#fff7db;color:#745300;border:1px solid #f2d17c;box-shadow:0 18px 50px rgba(40,49,59,.2)}
.idle-warning-v133 button{padding:8px 12px;font-size:12px}

@media(max-width:900px){
  .account-card-v133{grid-template-columns:1fr!important;gap:10px!important}
  .surat-card-head-v133{flex-direction:column}
  .surat-status-v133{max-width:100%}
  .surat-pipeline-v133{grid-template-columns:repeat(6,130px)}
  .idle-warning-v133{left:10px;right:10px;bottom:10px;flex-direction:column;align-items:stretch}
}

/* =========================================================
   SIMPROV v134 - Revisi visual Surat dan Modal
   ========================================================= */
.surat-tabs-v133{display:flex;gap:10px;flex-wrap:wrap}
.surat-tabs-v133 button{background:linear-gradient(180deg,#f5fbff 0%,#eaf6ff 100%);color:#18517f;border:1px solid #c8dff0;box-shadow:0 6px 16px rgba(19,88,135,.08)}
.surat-tabs-v133 button:hover{background:linear-gradient(180deg,#ffffff 0%,#edf8ff 100%)}
.surat-tabs-v133 button.active{background:linear-gradient(135deg,#1786c6,#36b6e5);color:#fff;border-color:transparent;box-shadow:0 10px 20px rgba(17,116,176,.22)}
.surat-tabs-v133 button span{background:rgba(255,255,255,.55);color:inherit}
.surat-editor-toolbar-v134{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;border:1px solid #d8e7f2;border-bottom:0;border-radius:14px 14px 0 0;background:#f8fbfe}
.editor-btn-v134{border:1px solid #cfe1ee;background:#fff;border-radius:10px;padding:7px 10px;font-weight:800;color:#154a76;cursor:pointer}
.editor-btn-v134:hover{background:#eef7fd}
.surat-editor-v134{min-height:240px;padding:16px;border:1px solid #d8e7f2;border-radius:0 0 14px 14px;background:#fff;color:#243a4d;line-height:1.6;outline:none}
.surat-editor-v134 h4{margin:0 0 10px;color:#153f69}
.surat-editor-v134 p{margin:0 0 10px}
.surat-editor-v134 ul,.surat-editor-v134 ol{margin:0 0 10px 24px}
.surat-meta-grid-v134{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px 12px;margin-top:8px;font-size:12px;color:#5b7083}
.surat-meta-grid-v134 span{padding:6px 8px;border-radius:10px;background:#f7fbfe;border:1px solid #e0ecf4}
.surat-rich-view-v134 p{margin:0 0 8px}
.surat-rich-view-v134 ul,.surat-rich-view-v134 ol{margin:0 0 8px 20px}
.surat-return-banner-v134{display:flex;gap:8px;align-items:flex-start;margin:14px 0 8px;padding:10px 12px;border-radius:12px;background:#fff1ef;border:1px solid #ffc9c1;color:#a43a34;font-size:12px}
.surat-return-banner-v134 b{display:block}
.surat-return-banner-v134 span{display:block;color:#93433f}
.surat-action-meta-v134{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:8px 0 16px}
.surat-action-meta-v134>div{padding:10px 12px;border-radius:12px;background:#f7fbfe;border:1px solid #deebf3}
.surat-action-meta-v134 b{display:block;font-size:11px;color:#688096;text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
#verifierModalV65{z-index:25000}
#verifierModalV65 .modal-card{max-height:92vh;overflow:auto}
@media (max-width:720px){
  .surat-tabs-v133 button{width:100%;justify-content:center}
  .surat-editor-v134{min-height:200px}
}

/* =========================================================
   SIMPROV v135 - Loading upload selalu terlihat + progress 0-100%
   ========================================================= */
#loadingOverlay{
  z-index:2147483000!important;
  isolation:isolate;
}
#loadingOverlay .loader-card{
  width:min(390px,92vw)!important;
}
.loading-progress-wrap{
  margin-top:18px;
  width:100%;
  text-align:left;
}
.loading-progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
  color:#446176;
  font-size:12px;
}
.loading-progress-head span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:270px;
}
.loading-progress-head b{
  color:#0b5f99;
  font-size:13px;
  flex:0 0 auto;
}
.loading-progress-track{
  height:12px;
  border-radius:999px;
  background:#e6f0f7;
  overflow:hidden;
  border:1px solid #d1e2ee;
  box-shadow:inset 0 1px 3px rgba(13,65,101,.08);
}
.loading-progress-track i{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#0c70b0,#18a8d8,#19aa60);
  box-shadow:0 0 12px rgba(24,168,216,.30);
  transition:width .20s ease;
}
#loadingOverlay.upload-mode-v135 .loader-ring{
  animation-duration:.85s;
}
#loadingOverlay.upload-mode-v135 .loader-logo-wrap{
  animation-duration:.9s;
}
.modal-pl-v123{
  z-index:1200000!important;
}
#confirmModalV133,
.confirm-v133{
  z-index:1300000!important;
}
@media(max-width:560px){
  #loadingOverlay .loader-card{padding:24px 20px!important}
  .loading-progress-head span{max-width:210px}
}

/* =========================================================
   SIMPROV v136 - Surat terang, kartu ringkas, editor, pimpinan
   ========================================================= */
.surat-page-v136{display:grid;gap:16px}
.surat-page-v136 button,
.surat-page-v136 .btn-soft,
.surat-page-v136 .btn-refresh,
.surat-page-v136 .btn-green{background:linear-gradient(180deg,#fbfeff 0%,#e8f6ff 100%)!important;color:#15577f!important;border:1px solid #bddbed!important;box-shadow:0 5px 14px rgba(38,107,151,.09)!important}
.surat-page-v136 button:hover{background:linear-gradient(180deg,#fff 0%,#daf1ff 100%)!important;transform:translateY(-1px)}
.surat-page-v136 .btn-danger{background:linear-gradient(180deg,#fff8f7 0%,#ffe8e5 100%)!important;color:#a63a35!important;border:1px solid #f3c3bd!important;box-shadow:none!important}
.surat-page-v136 .surat-submit-v136{background:linear-gradient(180deg,#effcf7 0%,#d5f5e7 100%)!important;color:#126840!important;border-color:#a9dfc5!important}
.surat-page-v136 .surat-tabs-v133 button{min-width:150px;background:linear-gradient(180deg,#fff 0%,#edf8ff 100%)!important;color:#14577f!important;border:1px solid #c5dfef!important}
.surat-page-v136 .surat-tabs-v133 button.active{background:linear-gradient(180deg,#dff4ff 0%,#c9ebfb 100%)!important;color:#0b5c8a!important;border-color:#8fc9e6!important;box-shadow:inset 0 -3px 0 #31a7d4,0 7px 16px rgba(40,126,174,.12)!important}
.surat-page-v136 .surat-tabs-v133 button span{background:#fff!important;color:#0b6a9c!important;border:1px solid #b8dceb}
.surat-form-v136{overflow:visible}
.surat-editor-toolbar-v136{display:flex;flex-wrap:wrap;gap:7px;padding:10px 11px;border:1px solid #cfe1ed;border-bottom:0;border-radius:14px 14px 0 0;background:#f5fbff;position:sticky;top:0;z-index:2}
.surat-editor-toolbar-v136 .editor-btn-v136{min-height:34px;padding:7px 11px!important;border-radius:9px!important;background:#fff!important;color:#174f75!important;border:1px solid #c9deeb!important;box-shadow:none!important;font-size:12px;font-weight:800}
.surat-editor-toolbar-v136 .editor-btn-v136.clear{background:#fff1ef!important;color:#9b3a35!important;border-color:#f0c4bf!important;margin-left:auto}
.surat-editor-v136{min-height:270px;padding:20px 22px;border:1px solid #cfe1ed;border-radius:0 0 14px 14px;background:#fff;color:#263d4f;line-height:1.65;outline:none;white-space:normal;overflow-wrap:anywhere}
.surat-editor-v136:focus{border-color:#5fb7df;box-shadow:0 0 0 3px rgba(48,159,211,.12)}
.surat-editor-v136 p{margin:0 0 12px}.surat-editor-v136 ul,.surat-editor-v136 ol{margin:0 0 12px 28px}
.surat-package-list-v136{display:grid;gap:11px;margin-top:15px}
.surat-package-card-v136{border:1px solid #d2e5f1;border-radius:15px;background:linear-gradient(135deg,#fff,#f8fcff);overflow:hidden;box-shadow:0 7px 18px rgba(34,83,119,.055)}
.surat-package-card-v136>summary{list-style:none;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:13px;align-items:center;padding:15px 17px;cursor:pointer;user-select:none}
.surat-package-card-v136>summary::-webkit-details-marker{display:none}
.surat-package-card-v136[open]>summary{background:#f1f9fe;border-bottom:1px solid #d5e7f2}
.surat-number-v136{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e0f3ff;color:#0d6d9f;font-weight:900;border:1px solid #b9dff1}
.surat-summary-title-v136{min-width:0;display:grid;gap:3px}
.surat-summary-title-v136>b{color:#123f6d;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.surat-summary-title-v136 small{color:#71869a;font-size:11px}.surat-summary-title-v136 em{color:#47697f;font-size:11px;font-style:normal}
.surat-package-detail-v136{padding:15px 17px 17px;background:#fff}
.surat-package-detail-v136 .surat-pipeline-v133{margin-top:0}
.surat-count-v136{display:inline-flex;padding:7px 11px;border-radius:999px;background:#edf8ff;color:#17618e;border:1px solid #cce3f1;font-size:12px;font-weight:800}
.surat-inbox-v136 .surat-package-card-v136{border-left:4px solid #74bde0}
.surat-route-note-v136{grid-column:1/-1;padding:11px 13px;border-radius:11px;background:#eef9ff;border:1px solid #c6e5f5;color:#245f80;font-size:12px}
.pimpinan-bidang-panel-v136{margin-bottom:16px}
.pimpinan-bidang-grid-v136{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:11px;margin-top:15px}
.pimpinan-bidang-card-v136{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(180px,1.1fr);gap:12px;align-items:center;padding:13px;border:1px solid #d7e6f0;border-radius:14px;background:#fbfdff}
.pimpinan-bidang-card-v136 span{display:grid;gap:3px}.pimpinan-bidang-card-v136 b{color:#143f6c}.pimpinan-bidang-card-v136 small{color:#7b8ea0;font-size:10px}
.pimpinan-bidang-card-v136 input{width:100%;min-width:0}
@media(max-width:780px){
  .surat-package-card-v136>summary{grid-template-columns:38px minmax(0,1fr);padding:13px}.surat-package-card-v136>summary>.surat-status-v133{grid-column:2;justify-self:start}
  .surat-summary-title-v136>b{white-space:normal}.surat-editor-toolbar-v136{position:static}.surat-editor-v136{min-height:230px;padding:16px}
  .pimpinan-bidang-card-v136{grid-template-columns:1fr}.surat-page-v136 .surat-tabs-v133 button{width:auto;min-width:130px}
}


/* =========================================================
   SIMPROV v137 - HPS foreground, management minimize, surat.
   ========================================================= */
#hpsOptionalModalV121.hps-modal-backdrop-v122{
  z-index:1500000!important;
}
#hpsOptionalModalV121 .hps-modal-card-v122{
  isolation:isolate;
}
.management-collapsible-v137.is-collapsed-v137 > :not(.management-header-v137){
  display:none!important;
}
.management-header-v137{
  margin-bottom:0!important;
  align-items:center!important;
}
.management-collapsible-v137:not(.is-collapsed-v137) .management-header-v137{
  margin-bottom:14px!important;
}
.management-toggle-v137{
  margin-left:auto;
  flex:0 0 auto;
}
.surat-attachment-btn-v137{
  margin-top:8px!important;
  width:auto!important;
}
@media(max-width:720px){
  .management-header-v137{align-items:flex-start!important;flex-wrap:wrap}
  .management-toggle-v137{margin-left:0}
}


/* SIMPROV v138 - Pengajuan Pembayaran SOP */
.payment-page-v138{display:grid;gap:16px}.payment-head-v138{margin-bottom:0}.payment-sop-note-v138{padding:13px 16px;border:1px solid #f1d58a;background:#fffaf0;border-radius:13px;color:#664b00}.payment-list-v138{display:grid;gap:12px}.payment-card-v138{border:1px solid #cfe0ec;border-radius:15px;background:#fff;overflow:hidden}.payment-card-v138>summary{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:15px 17px;cursor:pointer;list-style:none}.payment-card-v138>summary::-webkit-details-marker{display:none}.payment-card-v138>summary div{display:grid;gap:4px}.payment-card-v138>summary small{color:#6f8191}.payment-card-body-v138{padding:0 17px 17px;border-top:1px solid #e3edf4}.payment-status-v138{font-size:11px;font-weight:800;border-radius:999px;padding:6px 10px;white-space:nowrap}.payment-status-v138.done{background:#e5f8e9;color:#17682d}.payment-status-v138.waiting{background:#e8f3ff;color:#175a8b}.payment-status-v138.repair{background:#ffe9e9;color:#a42e2e}.payment-status-v138.draft{background:#f0f3f5;color:#52616d}.payment-timeline-v138{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:16px 0}.payment-timeline-v138>div{position:relative;text-align:center;color:#81909c}.payment-timeline-v138>div:before{content:"";position:absolute;height:3px;background:#dce7ee;left:-50%;right:50%;top:14px;z-index:0}.payment-timeline-v138>div:first-child:before{display:none}.payment-timeline-v138 span{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;margin:auto;border-radius:50%;background:#e7eef3;font-weight:800}.payment-timeline-v138 b{display:block;font-size:10px;margin-top:5px}.payment-timeline-v138 .done span{background:#31a85b;color:white}.payment-timeline-v138 .active span{background:#267bb5;color:white}.payment-timeline-v138 .done:before,.payment-timeline-v138 .active:before{background:#53b976}.payment-meta-v138{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}.payment-meta-v138 span{padding:9px;border:1px solid #dae7ef;border-radius:10px;background:#f9fcfe;font-size:12px}.payment-doc-grid-v138{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.payment-doc-grid-v138 article{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid #d9e7ef;border-radius:11px;background:#fbfdff}.payment-doc-grid-v138 article>div{display:grid;gap:3px}.payment-doc-grid-v138 small{color:#718392;font-size:10px}.payment-doc-grid-v138 .required-v138,.required-v138{color:#b42d2d;font-weight:800}.payment-generated-v138,.payment-actions-v138{margin-top:10px}.payment-note-v138{margin:12px 0;padding:10px;border-left:4px solid #e0a32e;background:#fff8e7}.payment-form-v138 .field label{font-weight:700}.payment-section-v138{margin-top:18px;padding:14px;border:1px solid #d5e5ef;border-radius:14px;background:#fbfdff}.payment-row-v138{display:grid;grid-template-columns:minmax(0,1fr) 220px auto;gap:8px;margin-bottom:8px}.payment-account-row-v138{display:grid;grid-template-columns:1.35fr 1.1fr .8fr 1fr .8fr auto;gap:7px;margin-bottom:8px}.payment-row-v138 input,.payment-account-row-v138 input{min-width:0}.payment-total-v138{display:grid;grid-template-columns:170px 220px 1fr;gap:10px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px dashed #c7d9e5}.payment-total-v138 span{font-weight:800}.payment-total-v138 small{font-style:italic}.payment-generated-box-v138{margin:14px 0;padding:12px;border:1px solid #d6e6ef;border-radius:12px;background:#f8fcff}.payment-modal-v138{width:min(760px,94vw);max-height:90vh;overflow:auto}.payment-tab-btn-v138{white-space:nowrap}
@media(max-width:900px){.payment-timeline-v138{grid-template-columns:repeat(3,1fr);row-gap:14px}.payment-timeline-v138>div:before{display:none}.payment-meta-v138{grid-template-columns:repeat(2,1fr)}.payment-account-row-v138{grid-template-columns:1fr 1fr}.payment-row-v138{grid-template-columns:1fr}.payment-doc-grid-v138{grid-template-columns:1fr}.payment-total-v138{grid-template-columns:1fr}}
@media(max-width:560px){.payment-card-v138>summary{align-items:flex-start;flex-direction:column}.payment-meta-v138{grid-template-columns:1fr}.payment-timeline-v138{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   SIMPROV v139 - Pengajuan pembayaran lebih jelas dan aman
   ========================================================= */
.payment-tabs-v139{display:flex!important;flex-wrap:wrap!important;gap:10px!important}
.payment-tabs-v139 button{min-width:150px!important}
.payment-budget-card-v139{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;padding:10px 12px;border:1px solid #c8e1ef;border-radius:12px;background:linear-gradient(135deg,#f7fcff,#edf8ff);color:#315b76}
.payment-budget-card-v139 span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.payment-budget-card-v139 b{font-size:15px;color:#0c5e91}
.payment-budget-card-v139 small{width:100%;color:#658092}
.payment-budget-warning-v139{margin-top:10px;padding:9px 12px;border-radius:10px;background:#f2f9fd;border:1px solid #d5e7f1;color:#45687c;font-size:12px;font-weight:700}
.payment-budget-warning-v139.warn{background:#fff9e9;border-color:#f0d694;color:#845d12}
.payment-budget-warning-v139.danger{background:#fff1ef;border-color:#f0bcb5;color:#9d3933}
.payment-account-total-v139{margin-top:12px;font-weight:900;color:#174e72}
.payment-empty-activity-v139{display:flex;flex-direction:column;gap:4px;margin:0 0 16px;padding:14px 16px;border:1px solid #f0d48c;border-radius:14px;background:#fff9e8;color:#745516}
.payment-empty-activity-v139 span{font-size:12px;line-height:1.5}
.payment-tte-submit-v139{min-width:220px!important}
.payment-form-v138 button:disabled{opacity:.55;cursor:not-allowed;transform:none!important}
@media(max-width:720px){.payment-tabs-v139 button{width:100%;min-width:0!important}.payment-budget-card-v139{align-items:flex-start}}

/* =========================================================
   SIMPROV v140 - Surat & Pengajuan Pembayaran
   ========================================================= */
.payment-tabs-v140{
  display:flex!important;flex-wrap:wrap!important;gap:9px!important;
}
.payment-tabs-v140 button{
  width:auto!important;min-width:0!important;padding:10px 16px!important;
  border:1px solid #bcd7e8!important;border-radius:12px!important;
  background:linear-gradient(180deg,#ffffff,#f4faff)!important;
  color:#174b75!important;box-shadow:0 3px 9px rgba(27,83,123,.06)!important;
  font-weight:800!important;
}
.payment-tabs-v140 button:hover{background:#eaf7ff!important;border-color:#75bde1!important;transform:translateY(-1px)}
.payment-tabs-v140 button.active{background:linear-gradient(180deg,#eaf8ff,#dff3ff)!important;color:#0c5f91!important;border-color:#4ca9d5!important;box-shadow:0 3px 0 #2a9aca!important}
.payment-tabs-v140 button span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:5px;padding:0 5px;border-radius:999px;background:#fff;border:1px solid #c9dfec;font-size:10px}
.payment-list-head-actions-v140{align-items:center;justify-content:flex-end;flex-wrap:wrap}
.btn-primary-v140{background:linear-gradient(135deg,#126db1,#35a7d9)!important;color:#fff!important;border:0!important;box-shadow:0 7px 16px rgba(20,112,171,.18)!important}
.payment-form-v138>.panel-title-row{align-items:flex-start}
.surat-editor-toolbar-v140{display:flex!important;flex-wrap:wrap!important;gap:7px!important;padding:8px!important;position:sticky!important;top:0!important;z-index:3!important}
.editor-group-v140{display:flex;align-items:center;gap:4px;padding-right:7px;border-right:1px solid #d5e5ef}
.editor-group-v140:last-child{border-right:0;padding-right:0}
.surat-editor-toolbar-v140 .editor-btn-v136{min-width:36px;height:34px;padding:5px 9px!important;display:inline-grid;place-items:center;font-size:12px}
.summary-pl-v140{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:760px){
  .payment-tabs-v140 button{width:100%!important}
  .payment-list-head-actions-v140{width:100%;justify-content:stretch}
  .payment-list-head-actions-v140 button{flex:1}
  .editor-group-v140{border-right:0;border-bottom:1px solid #dce9f1;padding:0 0 5px;width:100%;overflow-x:auto}
  .summary-pl-v140{grid-template-columns:1fr!important}
}

/* SIMPROV v141 - indikator sinkronisasi Perencanaan */
.planning-realtime-v141{display:inline-flex;align-items:center;gap:6px;margin:4px 0 10px;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.01em;background:#eaf8ef;color:#16723b;border:1px solid #bfe8cd}.planning-realtime-v141::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(22,114,59,.11)}.planning-realtime-v141.sync{background:#eaf4ff;color:#1769aa;border-color:#bfddf4}.planning-realtime-v141.sync::before{animation:planningPulseV141 1s infinite}.planning-realtime-v141.wait{background:#fff8df;color:#8a6200;border-color:#efd98d}.planning-realtime-v141.warn{background:#fff0ec;color:#a13b22;border-color:#f0c4b8}@keyframes planningPulseV141{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* =========================================================
   SIMPROV v145 - Surat terpisah, edit sumber harga, payment lock
   ========================================================= */
.surat-tabs-v145{display:flex;flex-wrap:wrap;gap:10px}
.surat-tabs-v145 button{min-height:42px}
.payment-lock-notice-v145{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px;padding:14px 16px;border:1px solid #f0c36b;background:#fff9e9;border-radius:14px;color:#6f4b00}
.payment-lock-notice-v145 div{display:flex;flex-direction:column;gap:4px}
.payment-lock-notice-v145 span{font-size:13px;line-height:1.5}
.payment-data-locked-v145 input:disabled,.payment-data-locked-v145 select:disabled,.payment-data-locked-v145 textarea:disabled{opacity:.82;background:#f3f6f8;color:#43566a;cursor:not-allowed}
.payment-data-locked-v145 button:disabled{opacity:.48;cursor:not-allowed}
.dok-table-v96 td:nth-child(4) .btn-soft,.dok-table-v96 td:nth-child(4) .btn-green{white-space:nowrap}
#editStandardFieldV145.hidden{display:none}
@media(max-width:760px){.payment-lock-notice-v145{align-items:stretch;flex-direction:column}.surat-tabs-v145 button{flex:1 1 140px}}

/* =========================================================
   SIMPROV v146 - Tab Surat terang dan timeline pembayaran ringkas
   ========================================================= */
.surat-page-v136 .surat-tabs-v146,
.payment-page-v138 .surat-tabs-v146{display:flex!important;flex-wrap:wrap!important;gap:10px!important}
.surat-page-v136 .surat-tabs-v146 button,
.payment-page-v138 .surat-tabs-v146 button{
  min-width:145px!important;min-height:42px!important;padding:11px 17px!important;
  background:linear-gradient(180deg,#ffffff 0%,#edf8ff 100%)!important;
  color:#14577f!important;border:1px solid #c5dfef!important;
  box-shadow:0 6px 15px rgba(30,103,150,.09)!important;
  opacity:1!important;filter:none!important;pointer-events:auto!important
}
.surat-page-v136 .surat-tabs-v146 button:hover,
.payment-page-v138 .surat-tabs-v146 button:hover{background:linear-gradient(180deg,#ffffff 0%,#e5f5ff 100%)!important;border-color:#8cc9e7!important;transform:translateY(-1px)}
.surat-page-v136 .surat-tabs-v146 button.active,
.payment-page-v138 .surat-tabs-v146 button.active{
  background:linear-gradient(180deg,#e7f7ff 0%,#d2effd 100%)!important;
  color:#0a5b89!important;border-color:#78bddf!important;
  box-shadow:inset 0 -3px 0 #2aa5d4,0 7px 16px rgba(40,126,174,.12)!important
}
.surat-tabs-v146 button span{background:#fff!important;color:#0b6a9c!important;border:1px solid #b8dceb!important}
.payment-timeline-v146{grid-template-columns:repeat(5,minmax(0,1fr))!important}
@media(max-width:760px){.surat-page-v136 .surat-tabs-v146 button,.payment-page-v138 .surat-tabs-v146 button{flex:1 1 140px!important;min-width:0!important}.payment-timeline-v146{grid-template-columns:1fr!important;gap:10px!important}.payment-timeline-v146>div:before{display:none!important}.payment-timeline-v146>div{display:flex;align-items:center;gap:10px;text-align:left}.payment-timeline-v146 span{margin:0!important}.payment-timeline-v146 b{margin:0!important}}


/* =========================================================
   SIMPROV v147 - Badge antrean dan konsistensi template dokumen
   ========================================================= */
.queue-badge-v147{
  display:inline-grid!important;place-items:center!important;min-width:22px!important;height:22px!important;
  margin-left:7px!important;padding:0 6px!important;border-radius:999px!important;
  background:#dc2626!important;color:#fff!important;border:2px solid #fff!important;
  box-shadow:0 3px 9px rgba(185,28,28,.28)!important;font-size:11px!important;font-weight:900!important;line-height:1!important;
}
#menuNav button .queue-badge-v147{vertical-align:middle!important}
.surat-tabs-v146 button .queue-badge-v147,.payment-tabs-v140 button .queue-badge-v147{background:#dc2626!important;color:#fff!important;border-color:#fff!important}
.dok-table-v96 td:nth-child(4){vertical-align:middle!important}
.dok-table-v96 td:nth-child(4) .btn-soft{display:inline-flex!important;align-items:center!important;justify-content:center!important}


/* =========================================================
   SIMPROV v148 - Login cepat, tombol mata, dan sesi terbatas
   ========================================================= */
.password-field-v148{position:relative;width:100%}
.password-field-v148 #password{width:100%;padding-right:48px}
.password-toggle-v148{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:34px;padding:0!important;border:1px solid #c9ddeb!important;border-radius:10px!important;background:#fff!important;color:#174f79!important;box-shadow:none!important;cursor:pointer;z-index:2}
.password-toggle-v148:hover{background:#edf8ff!important}
.password-toggle-v148 span{font-size:17px;line-height:1;filter:grayscale(1)}
#loginBtn.is-loading-v148{opacity:.72;cursor:wait;pointer-events:none}
#loginMsg{min-height:20px;margin-top:8px;font-weight:700}
#loginMsg.login-checking-v148{color:#386b8e}
#loginMsg.login-error-v148{color:#c62828}
#loginMsg.login-success-v148{color:#16823d}
.session-warning-v148{position:fixed;right:18px;bottom:18px;z-index:32000;max-width:480px;padding:14px 16px;border-radius:14px;background:#fff7da;border:1px solid #e9c95e;color:#684d00;box-shadow:0 18px 50px rgba(30,54,76,.22);display:flex;align-items:center;gap:12px}
.session-warning-v148 button{white-space:nowrap}
@media(max-width:640px){.session-warning-v148{left:10px;right:10px;bottom:10px;flex-direction:column;align-items:stretch}}

/* =========================================================
   SIMPROV v149 - Kolom template dan badge pembayaran
   ========================================================= */
.document-helper-actions-v149{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.document-helper-actions-v149 .btn-soft,.document-helper-actions-v149 .btn-green{min-height:38px;white-space:nowrap}
.document-helper-separator-v149{font-weight:900;color:#7990a3}
.document-system-btn-v149{background:linear-gradient(135deg,#128a45,#1aad5a)!important;color:#fff!important;border-color:#128a45!important}
.queue-badge-v149{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:7px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:900;line-height:1;vertical-align:middle}
.queue-badge-v149.is-zero-v149{background:#fff;color:#17577f;border:1px solid #b9d6e9;box-shadow:none}
.queue-badge-v149.has-count-v149{background:#dc2626;color:#fff;border:2px solid #fff;box-shadow:0 3px 9px rgba(185,28,28,.3)}
@media(max-width:720px){.document-helper-actions-v149{align-items:stretch;flex-direction:column}.document-helper-separator-v149{display:none}.document-helper-actions-v149 .btn-soft,.document-helper-actions-v149 .btn-green{width:100%}}

/* SIMPROV v150 */
.paket-pagu-v150{
  display:flex;
  align-items:center;
  gap:7px;
  width:max-content;
  margin-top:7px;
  padding:4px 9px;
  border:1px solid #cfe3f4;
  border-radius:999px;
  background:#f5faff;
  color:#567086;
  font-size:11px;
  line-height:1.2;
}
.paket-pagu-v150 b{color:#0b4f82;font-size:12px}
.payment-created-v150{
  display:block;
  margin-top:4px;
  color:#60758a;
  font-weight:600;
}
.btn-buat-dokumen-v150{white-space:nowrap}


/* =========================================================
   SIMPROV v151 - Perbaikan tombol mata password (perubahan 1)
   Masalah: aturan ".login-card button{position:relative}" menimpa
   posisi tombol sehingga ikon mata jatuh ke BAWAH input.
   Perbaikan (spesifisitas tinggi + !important) tanpa mengubah
   aturan lama: ikon kembali di dalam kolom password, sisi kanan,
   rata tengah, tidak menambah tinggi form, tidak menutupi teks. */
.login-card .password-field-v148{position:relative;width:100%}
.login-card .password-field-v148 #password{width:100%;padding-right:52px}
.login-card .password-field-v148 .password-toggle-v148{
  position:absolute !important;
  top:50% !important; right:8px !important; bottom:auto !important; left:auto !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  width:36px !important; height:34px !important;
  display:grid !important; place-items:center;
  overflow:visible !important;
  z-index:5;
}
/* matikan animasi kilau (:after) yang ikut menempel di tombol mata */
.login-card .password-field-v148 .password-toggle-v148:after{
  content:none !important; display:none !important; animation:none !important;
}

/* =========================================================
   SIMPROV v153 - Rapikan tampilan (aditif, CSS saja)
   - Sembunyikan badge versi internal "SIMPROV v95" pada daftar paket.
   - Sembunyikan chip jabatan di dashboard PUBLIK
     ("Ketua Umum: -", "Sekretaris Umum: ...", "Verifikator: -").
   Tidak mengubah data, logika, maupun elemen lain. Hanya menyembunyikan
   tampilan; elemen tetap ada di DOM sehingga tidak ada JS yang rusak.
   ========================================================= */
.paket-badge-v95.ver{ display:none !important; }
#publicIdentity, .public-identity{ display:none !important; }

/* =========================================================
   SIMPROV v154 - Badge antrean: 0 = putih, >0 = merah (aditif)
   Badge default (merah) tetap dipakai saat ada antrean (>0).
   Saat 0 (tidak ada antrean), badge jadi putih/netral.
   ========================================================= */
.queue-badge-v147.no-queue-v154,
#menuNav button .queue-badge-v147.no-queue-v154,
.surat-tabs-v146 button .queue-badge-v147.no-queue-v154,
.payment-tabs-v140 button .queue-badge-v147.no-queue-v154{
  background:#ffffff!important;
  color:#64748b!important;
  border:2px solid #cbd5e1!important;
  box-shadow:none!important;
}

/* SIMPROV v155 - Non Pengadaan cetak HTML */
.non-modal-v155{max-width:1120px}.non-pay-row-v155{position:relative}.non-row-calculation-v155{grid-column:1/-1;display:flex;gap:18px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:rgba(11,99,206,.06);font-size:12px}.non-row-calculation-v155 span{display:flex;gap:6px}.non-modal-totals-v155{margin-top:12px;padding:12px 14px;border-radius:10px;background:#eef6ff;border:1px solid rgba(11,99,206,.18);font-size:13px;text-align:right}.non-modal-totals-v155 b{color:#0b63ce}.dok-table-v96 input[type=file].non-doc-file-v155{max-width:230px}.non-stat-grid-v96+button{margin-top:14px}@media(max-width:780px){.non-row-calculation-v155{gap:8px;flex-direction:column}.non-modal-totals-v155{text-align:left}}

/* SIMPROV v156 - Multi Realisasi Non Honorarium */
.nh-summary-v156{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 16px}.nh-summary-v156>div{padding:14px 16px;border:1px solid #dce8f2;border-radius:14px;background:#f8fbfe}.nh-summary-v156 small{display:block;color:#687889;margin-bottom:6px}.nh-summary-v156 b{font-size:17px;color:#173f62}.nh-toolbar-v156{display:flex;gap:10px;flex-wrap:wrap}.nh-table-v156{min-width:1120px}.nh-table-v156 th{white-space:nowrap}.nh-table-v156 td{vertical-align:top}.nh-table-v156 tfoot td{background:#f4f8fb}.money-cell-v156{white-space:nowrap;font-weight:700}.nh-actions-v156{white-space:nowrap}.nh-actions-v156 button+button{margin-left:6px}.nh-doc-list-v156{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}.nh-doc-chip-v156{display:inline-flex;align-items:center;max-width:220px;border:1px solid #cfe0ed;background:#f7fbfe;border-radius:999px;overflow:hidden}.nh-doc-chip-v156 a{display:block;max-width:180px;padding:5px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.nh-doc-chip-v156 button{border:0;background:#e95060;color:#fff;width:24px;height:24px;padding:0;border-radius:50%;cursor:pointer}.nh-upload-label-v156{display:inline-flex!important;cursor:pointer;font-size:11px!important;padding:6px 9px!important}.nh-modal-card-v156{max-height:92vh;overflow:auto}.nh-modal-total-v156{display:grid;grid-template-columns:1fr auto 1fr auto;gap:10px;align-items:center;margin-top:14px;padding:12px 14px;background:#f4f9fd;border:1px solid #d6e6f2;border-radius:12px}.nh-modal-total-v156 span{color:#637587}.nh-modal-total-v156 b{color:#174b73}.nh-legacy-docs-v156{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.nh-legacy-docs-v156 a{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid #dce7ef;border-radius:12px;background:#fafcfe}.nh-legacy-docs-v156 span{font-size:12px;color:#667788;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.nh-summary-v156{grid-template-columns:repeat(2,minmax(0,1fr))}.nh-modal-total-v156{grid-template-columns:1fr auto}}
@media(max-width:540px){.nh-summary-v156{grid-template-columns:1fr}.nh-toolbar-v156>*{width:100%}}

/* SIMPROV v157 - Tahap pemeriksaan PBJ multi realisasi Non Honorarium */
.nh-flow-notice-v157{display:flex;flex-direction:column;gap:4px;margin:12px 0;padding:12px 14px;border:1px solid #d5e4ef;border-radius:12px;background:#f7fbfe;color:#50677a}
.nh-flow-notice-v157 b{color:#163f60}.nh-flow-notice-v157 span{font-size:12px;line-height:1.5}
.nh-flow-notice-v157.review{background:#fff8e8;border-color:#f1d99c}.nh-flow-notice-v157.review b{color:#805b00}
.nh-flow-notice-v157.ready{background:#effaf3;border-color:#bfe3ca}.nh-flow-notice-v157.ready b{color:#176b37}
.nh-flow-notice-v157.reopen{background:#fff4ed;border-color:#efc5a8}.nh-flow-notice-v157.reopen b{color:#934713}
.nh-flow-notice-v157.done{background:#eef5ff;border-color:#bfd4f2}.nh-flow-notice-v157.done b{color:#174e8a}
.btn-warning-v157{border:1px solid #e1a967!important;background:#fff4e6!important;color:#8a4c08!important;box-shadow:none!important}
.btn-warning-v157:hover{background:#ffe8c8!important}
.nh-stage-badge-v157{max-width:310px;text-align:center;line-height:1.25}
.nh-stage-badge-v157.menunggu-pemeriksaan-pbj{background:#fff0c9!important;color:#795400!important;border-color:#e8c56c!important}
.nh-stage-badge-v157.siap-diselesaikan{background:#e4f8eb!important;color:#176536!important;border-color:#9fd1ae!important}
.nh-stage-badge-v157.dibuka-kembali{background:#fff0e5!important;color:#924710!important;border-color:#e5b48e!important}
.nh-stage-badge-v157.selesai{background:#e7f1ff!important;color:#164c86!important;border-color:#a9c5e8!important}
.nh-modal-card-v156 input:disabled,.nh-modal-card-v156 textarea:disabled{background:#f3f6f8!important;color:#667788!important;cursor:not-allowed}
@media(max-width:720px){.nh-stage-badge-v157{max-width:100%}.nh-flow-notice-v157{margin-top:10px}}


/* SIMPROV v158 - Verifikasi dokumen dan total realisasi disetujui */
.nh-summary-v158{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:12px 0 16px}
.nh-summary-v158>div{padding:14px 16px;border:1px solid #dce8f2;border-radius:14px;background:#f8fbfe;min-width:0}
.nh-summary-v158 small{display:block;color:#687889;margin-bottom:6px}.nh-summary-v158 b{display:block;font-size:17px;color:#173f62}.nh-summary-v158 span{display:block;margin-top:4px;color:#687889;font-size:10px}
.nh-review-summary-v158{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px}.nh-review-summary-v158 span{padding:7px 10px;border:1px solid #d9e6ef;border-radius:999px;background:#fff;font-size:11px;color:#52687a}
.nh-table-v158{min-width:1320px}.nh-real-status-v158,.nh-doc-status-v158{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;line-height:1.2}
.nh-real-status-v158.valid,.nh-doc-status-v158.valid{background:#e5f8eb;color:#176437;border:1px solid #a9dbb8}.nh-real-status-v158.waiting,.nh-doc-status-v158.waiting{background:#fff3d5;color:#795600;border:1px solid #e6ca80}.nh-real-status-v158.repair,.nh-doc-status-v158.repair{background:#ffe9e6;color:#a2342b;border:1px solid #efb0aa}.nh-real-status-v158.draft{background:#edf3f8;color:#52697d;border:1px solid #cfdae4}
.nh-real-note-v158,.nh-doc-note-v158{display:block;margin-top:5px;color:#a23d32;font-size:10px;line-height:1.35;white-space:normal}
.nh-doc-list-v158{display:flex;flex-direction:column;gap:8px;margin-bottom:7px}.nh-doc-item-v158{display:grid;grid-template-columns:minmax(145px,1fr) auto;gap:5px 8px;align-items:center;padding:7px;border:1px solid #e0e9f0;border-radius:10px;background:#fbfdff}.nh-doc-item-v158 .nh-doc-chip-v156{max-width:100%}.nh-doc-item-v158 .nh-doc-chip-v156 a{max-width:220px}.nh-doc-item-v158 .nh-doc-note-v158,.nh-doc-item-v158 .nh-doc-verify-v158{grid-column:1/-1}.nh-doc-verify-v158{display:flex;gap:6px;flex-wrap:wrap}.nh-doc-verify-v158 .btn-mini{margin:0!important}
.btn-primary-v158{border:1px solid #0c6fa4!important;background:linear-gradient(135deg,#0b74ad,#1491c8)!important;color:#fff!important}
.honor-return-box-v158{margin-top:14px;padding:14px;border:1px solid #efc1b7;border-radius:12px;background:#fff8f6}.honor-return-box-v158 label{display:block;margin-bottom:7px;font-weight:800;color:#8e382d}.honor-return-box-v158 textarea{width:100%;margin-bottom:9px}.honor-return-note-v158{margin-top:0}
@media(max-width:1100px){.nh-summary-v158{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.nh-summary-v158{grid-template-columns:1fr}.nh-doc-item-v158{grid-template-columns:1fr}.nh-doc-item-v158 .nh-doc-status-v158,.nh-doc-item-v158 .nh-doc-note-v158,.nh-doc-item-v158 .nh-doc-verify-v158{grid-column:1}.nh-toolbar-v156 button{width:100%}}

/* =========================================================
   SIMPROV v159 - UI Verifikator ringkas & kartu per menu
   ========================================================= */
.summary-card-v159{min-height:108px;display:flex;flex-direction:column;justify-content:center}
.summary-card-v159 span{line-height:1.25}
.summary-card-v159 b{font-size:25px;line-height:1.15}
.honor-review-state-v159{display:flex;align-items:flex-start;gap:13px;margin:14px 0;padding:15px 17px;border-radius:14px;border:1px solid #d9e8f3;background:#f7fbfe;color:#31536d}
.honor-review-state-v159.waiting-user{border-color:#f2c7ad;background:#fff7f1;color:#8a431c}
.honor-review-state-v159.info{border-color:#cfe1ef;background:#f4faff}
.honor-review-state-v159 b{display:block;font-size:14px;margin-bottom:4px}
.honor-review-state-v159 p{margin:0;font-size:12px;line-height:1.55}
.honor-review-state-v159 small{display:block;margin-top:7px;font-size:12px}
.honor-state-icon-v159{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;background:rgba(11,120,189,.11);font-weight:900;font-size:16px}
.honor-review-card-v159{margin-top:14px;padding:17px;border:1px solid #d8e7f2;border-radius:16px;background:#f9fcff}
.honor-review-head-v159{display:flex;flex-direction:column;gap:3px;margin-bottom:14px}
.honor-review-head-v159 b{color:#123f70;font-size:15px}
.honor-review-head-v159 span{color:#6d8092;font-size:12px;line-height:1.45}
.honor-review-card-v159 .form-grid{margin:0 0 11px;grid-template-columns:minmax(220px,405px) minmax(260px,1fr)}
.honor-review-card-v159 .realisasi-verif-actions-v112{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 13px}
.honor-return-row-v159{padding-top:13px;border-top:1px solid #dce8f1}
.honor-return-row-v159>label{display:block;margin-bottom:7px;color:#9b2c20;font-size:12px;font-weight:800}
.honor-return-row-v159>div{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:9px;align-items:center}
.honor-return-row-v159 input{min-width:0}
@media(max-width:760px){.honor-review-card-v159 .form-grid{grid-template-columns:1fr}.honor-return-row-v159>div{grid-template-columns:1fr}.honor-return-row-v159 button{width:100%}}

/* SIMPROV v160 - penyederhanaan pemeriksaan dan tampilan responsif */
.pipeline-simple-v160{grid-template-columns:repeat(5,minmax(120px,1fr));gap:10px}
.compact-flow-v160 .pipeline-v103{margin-top:12px}
.next-action-v160{margin-top:14px;padding:14px 16px;border:1px solid #c9ddf2;border-radius:14px;background:#f4f9ff;display:flex;gap:8px;flex-direction:column;color:#244b73}
.next-action-v160 b{font-size:15px;color:#0f477d}.next-action-v160 span{font-size:13px;line-height:1.5}
.nh-summary-v160{grid-template-columns:repeat(4,minmax(150px,1fr))}
.nh-toolbar-v160{align-items:center;flex-wrap:wrap}.approval-blocked-v160{display:flex;flex-direction:column;gap:3px;padding:10px 13px;border-radius:12px;background:#fff7e5;border:1px solid #f2c766;color:#744b00;max-width:560px}.approval-blocked-v160 span{font-size:12px;line-height:1.45}
.replace-doc-v160{cursor:pointer;display:inline-flex!important;margin-top:4px}.nh-table-v160 td:nth-child(2) small{display:block;color:#68788b;margin-top:3px}.nh-table-v160 td{vertical-align:top}
@media(max-width:900px){.pipeline-simple-v160{grid-template-columns:1fr}.nh-summary-v160{grid-template-columns:repeat(2,minmax(0,1fr))}.nh-table-v160{min-width:980px}}
@media(max-width:520px){.nh-summary-v160{grid-template-columns:1fr}.next-action-v160{padding:12px}.nh-toolbar-v160>button,.nh-toolbar-v160>.approval-blocked-v160{width:100%}}

/* SIMPROV v161 - detail perencanaan & koreksi tampilan verifikator */
.plan-id-link-v161{display:inline-block;max-width:150px;border:0;background:transparent;color:#075fa8;text-decoration:underline;text-decoration-style:dotted;font:inherit;font-weight:700;text-align:left;cursor:pointer;padding:2px 0;overflow-wrap:anywhere}.plan-id-link-v161:hover{color:#003f73;text-decoration-style:solid}.plan-detail-backdrop-v161{position:fixed;inset:0;z-index:10050;background:rgba(12,29,46,.56);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:20px}.plan-detail-card-v161{width:min(1000px,96vw);max-height:92vh;background:#fff;border:1px solid rgba(44,119,180,.2);border-radius:20px;box-shadow:0 28px 70px rgba(5,39,70,.28);overflow:hidden}.plan-detail-head-v161{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 24px;border-bottom:1px solid #dce9f4;background:linear-gradient(135deg,#f7fbff,#fff)}.plan-detail-head-v161 small{font-weight:800;color:#2878b5;letter-spacing:.08em}.plan-detail-head-v161 h3{margin:4px 0;color:#083f73}.plan-detail-head-v161 p{margin:0;color:#60758a}.plan-detail-scroll-v161{padding:20px 24px 28px;overflow:auto;max-height:calc(92vh - 105px)}.plan-detail-scroll-v161 h4{margin:18px 0 10px;color:#0b4a82}.plan-detail-scroll-v161 h4:first-child{margin-top:0}.plan-detail-grid-v161{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.plan-detail-item-v161{min-width:0;padding:11px 13px;background:#f7fbff;border:1px solid #dbe9f5;border-radius:11px}.plan-detail-item-v161.wide{grid-column:1/-1}.plan-detail-item-v161 span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#63788d;margin-bottom:5px}.plan-detail-item-v161 b{display:block;color:#163f64;white-space:pre-wrap;overflow-wrap:anywhere}.empty-state-v161{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:36px;border:1px dashed #bcd6ea;border-radius:15px;background:#f8fcff;color:#49677f}.empty-state-v161 b{font-size:18px;color:#0b4a82}.struktur-verifikator-v161 table td{vertical-align:middle}.pipeline-one-active-v161 .pipe-step-v103:not(.done):not(.waiting):not(.repair){opacity:.52}
@media(max-width:820px){.plan-detail-grid-v161{grid-template-columns:1fr 1fr}.plan-detail-card-v161{max-height:95vh}.plan-detail-scroll-v161{max-height:calc(95vh - 105px)}}
@media(max-width:520px){.plan-detail-backdrop-v161{padding:8px}.plan-detail-grid-v161{grid-template-columns:1fr}.plan-detail-item-v161.wide{grid-column:auto}.plan-detail-head-v161,.plan-detail-scroll-v161{padding:16px}}

/* =========================================================
   SIMPROV v162 - Detail ID dan pemeriksaan Honorarium ringkas
   ========================================================= */
button.plan-id-link-v161,
.plan-id-link-v161{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#0b5ea8!important;
  font:inherit!important;
  font-weight:600!important;
  line-height:1.35!important;
  text-align:left!important;
  text-decoration:none!important;
  cursor:pointer!important;
  transform:none!important;
}
button.plan-id-link-v161:hover,
button.plan-id-link-v161:focus-visible{
  color:#073f75!important;
  text-decoration:underline!important;
  outline:none!important;
  box-shadow:none!important;
  transform:none!important;
}
.honor-review-grid-v162{grid-template-columns:minmax(240px,420px)!important;margin-bottom:10px!important}
.honor-review-actions-v162{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.honor-review-actions-v162 button{min-width:112px}
.honor-review-help-v162{margin:9px 0 0;color:#607086;font-size:12px;line-height:1.45}

/* =========================================================
   SIMPROV v163 - ID paket, enam kartu, kalkulasi Honorarium
   ========================================================= */
.summary-grid.summary-six-v163{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:12px!important;
}
.summary-six-v163 .summary-card{min-width:0;padding:17px 15px!important}
.summary-six-v163 .summary-card b{font-size:21px!important;overflow-wrap:anywhere}
.paket-id-head-v163,.paket-id-cell-v163{width:150px;min-width:150px}
.paket-id-link-v163{
  display:inline!important;padding:0!important;margin:0!important;border:0!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;
  color:#0b63a9!important;font:inherit!important;font-weight:800!important;
  line-height:1.35!important;text-decoration:none!important;overflow-wrap:anywhere;
}
.paket-id-link-v163:hover{text-decoration:underline!important;color:#084d85!important;transform:none!important}
.non-pay-row-v163 .non-row-calculation-v163{
  grid-column:1/-2;display:grid!important;grid-template-columns:repeat(3,minmax(120px,1fr));
  gap:9px!important;padding:0!important;background:transparent!important;
}
.non-row-calculation-v163 span{
  min-height:54px;display:flex!important;flex-direction:column;justify-content:center;gap:3px!important;
  padding:8px 11px;border:1px solid #d4e5f2;border-radius:10px;background:#eef6ff;
}
.non-row-calculation-v163 small{font-size:10px;color:#647b8f;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.non-row-calculation-v163 b{font-size:13px;color:#0b4a7e}
@media(max-width:1350px){.summary-grid.summary-six-v163{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:900px){.summary-grid.summary-six-v163{grid-template-columns:repeat(2,minmax(0,1fr))!important}.paket-id-head-v163,.paket-id-cell-v163{min-width:130px;width:130px}}
@media(max-width:680px){.summary-grid.summary-six-v163{grid-template-columns:1fr!important}.non-pay-row-v163 .non-row-calculation-v163{grid-column:1/-1;grid-template-columns:1fr}.paket-id-head-v163,.paket-id-cell-v163{min-width:120px;width:120px}}

/* =========================================================
   SIMPROV v164 - ID paket & tombol lihat paket pembayaran
   ========================================================= */
.payment-title-line-v164{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 12px;
  min-width:0;
}
.payment-title-line-v164>b{min-width:0}
.payment-package-id-v164{
  appearance:none;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  color:#1767a5!important;
  font:inherit;
  font-size:.82rem;
  font-weight:700;
  line-height:1.35;
  text-decoration:none;
  cursor:pointer;
}
.payment-package-id-v164:hover,
.payment-package-id-v164:focus-visible{
  color:#0b4776!important;
  text-decoration:underline;
  outline:none;
}
.payment-package-actions-v164{
  display:flex;
  justify-content:flex-end;
  margin:12px 0 4px;
}
.payment-view-package-v164{white-space:nowrap}
@media(max-width:700px){
  .payment-title-line-v164{align-items:flex-start;flex-direction:column;gap:4px}
  .payment-package-actions-v164{justify-content:flex-start}
}

/* =========================================================
   SIMPROV v164.1 - Pengelompokan Pembayaran & Bendahara
   ========================================================= */
.payment-source-tabs-v1641{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 10px}
.payment-source-tabs-v1641 button{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:72px;padding:13px 15px;border:1px solid #cfe1ed;border-radius:14px;background:#f8fcff;color:#174a70;text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease}
.payment-source-tabs-v1641 button:hover{transform:translateY(-1px);border-color:#79b9dc;box-shadow:0 7px 18px rgba(20,91,135,.09)}
.payment-source-tabs-v1641 button.active{border-color:#1782bd;background:linear-gradient(135deg,#e9f7ff,#f7fcff);box-shadow:inset 0 -3px 0 #1782bd,0 7px 18px rgba(20,91,135,.1)}
.payment-source-tabs-v1641 button span{display:grid;gap:3px;min-width:0}
.payment-source-tabs-v1641 button b{font-size:14px;color:#0f4d77}
.payment-source-tabs-v1641 button small{font-size:11px;color:#6b8191;font-weight:600}
.payment-source-tabs-v1641 button em{display:grid;place-items:center;min-width:32px;height:32px;padding:0 8px;border-radius:999px;background:#fff;border:1px solid #c8dfec;color:#0d6294;font-style:normal;font-weight:900}
.payment-source-tabs-v1641 button.active em{background:#147fb8;color:#fff;border-color:#147fb8}
.payment-source-current-v1641{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 13px;padding:9px 12px;border-radius:10px;background:#f5f9fc;color:#526b7d;font-size:12px}
.payment-source-current-v1641 b{color:#174f76}
.payment-empty-source-v1641{display:grid;gap:5px;padding:22px;border:1px dashed #bdd5e3;border-radius:13px;background:#fbfdff;text-align:center;color:#6b8191}
.payment-empty-source-v1641 b{color:#315d79}
.payment-proof-button-v1641{display:inline-flex!important;align-items:center!important;text-decoration:none!important}
.loading-progress-track i{transition:width .28s ease!important}
@media(max-width:700px){.payment-source-tabs-v1641{grid-template-columns:1fr}.payment-source-tabs-v1641 button{min-height:64px}}

/* =========================================================
   SIMPROV v164.2 - UI pembayaran terbaca dan konsisten
   ========================================================= */
.payment-source-tabs-v1641 > button,
.payment-source-tabs-v1642 > button{
  background:#ffffff!important;
  color:#123f61!important;
  border:1px solid #c9ddea!important;
  box-shadow:0 7px 18px rgba(20,91,135,.07)!important;
  opacity:1!important;
}
.payment-source-tabs-v1641 > button:hover,
.payment-source-tabs-v1642 > button:hover{
  background:#f4faff!important;
  border-color:#62acd4!important;
  box-shadow:0 9px 21px rgba(20,91,135,.12)!important;
}
.payment-source-tabs-v1641 > button.active,
.payment-source-tabs-v1642 > button.active{
  background:linear-gradient(135deg,#e8f6ff,#f8fcff)!important;
  color:#0a456d!important;
  border:2px solid #258bc3!important;
  box-shadow:inset 0 -3px 0 #258bc3,0 9px 22px rgba(20,91,135,.12)!important;
}
.payment-source-tabs-v1641 > button b,
.payment-source-tabs-v1642 > button b{color:#0c4368!important;font-size:14px!important;opacity:1!important}
.payment-source-tabs-v1641 > button small,
.payment-source-tabs-v1642 > button small{color:#597486!important;font-size:11px!important;opacity:1!important}
.payment-source-tabs-v1641 > button em,
.payment-source-tabs-v1642 > button em{background:#eef7fc!important;color:#145e89!important;border:1px solid #b9d7e8!important}
.payment-source-tabs-v1641 > button.active em,
.payment-source-tabs-v1642 > button.active em{background:#167eb7!important;color:#fff!important;border-color:#167eb7!important}
.payment-proof-button-v1642{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:13px 18px!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#f8fcff,#eef8ff)!important;
  color:var(--logo-blue-dark)!important;
  border:1px solid rgba(11,120,189,.14)!important;
  font-weight:900!important;
  line-height:1!important;
  text-decoration:none!important;
  box-shadow:none!important;
  transition:.18s ease!important;
}
.payment-proof-button-v1642:hover{transform:translateY(-2px)!important;box-shadow:0 10px 20px rgba(15,76,129,.12)!important}
.queue-badge-v1642{
  display:inline-grid!important;place-items:center!important;min-width:22px!important;height:22px!important;
  margin-left:7px!important;padding:0 6px!important;border-radius:999px!important;font-size:11px!important;
  font-weight:900!important;line-height:1!important;vertical-align:middle!important;
}
.queue-badge-v1642.is-zero-v1642{background:#fff!important;color:#17577f!important;border:1px solid #b9d6e9!important;box-shadow:none!important}
.queue-badge-v1642.has-count-v1642{background:#dc2626!important;color:#fff!important;border:2px solid #fff!important;box-shadow:0 3px 9px rgba(185,28,28,.3)!important}
.payment-categorized-page-v1642 .payment-source-current-v1641{margin-bottom:12px!important}
@media(max-width:700px){
  .payment-source-tabs-v1641,.payment-source-tabs-v1642{grid-template-columns:1fr!important}
}

/* SIMPROV v164.3 - Tahap Realisasi Pengadaan Langsung */
.payment-auto-open-v1643{scroll-margin-top:18px;box-shadow:0 12px 30px rgba(17,91,143,.14)}
.stage-real-v1643{border-color:#8ec8ee;background:linear-gradient(135deg,#f4fbff,#eef8ff)}
.stage-real-v1643.waiting{border-color:#f1c462;background:linear-gradient(135deg,#fffdf5,#fff8df)}
.stage-real-v1643.done{border-color:#83d39c;background:linear-gradient(135deg,#f2fff6,#eafbef)}
.stage-real-v1643.locked{opacity:.72;background:#f7f9fb}
.real-summary-v1643{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.real-summary-v1643>div{border:1px solid #d6e5f0;border-radius:12px;padding:11px 13px;background:#f8fbfd;display:flex;flex-direction:column;gap:4px}
.real-summary-v1643 span{font-size:11px;color:#64788a;text-transform:uppercase;font-weight:700;letter-spacing:.03em}
.real-summary-v1643 b{font-size:15px;color:#0e456f}
.real-form-v1643{margin:14px 0}
@media(max-width:760px){.real-summary-v1643{grid-template-columns:1fr}.stage-real-v1643{grid-column:1/-1}}

/* =========================================================
   SIMPROV v164.4 - Pimpinan, TTE, badge realtime, dan card 2 baris
   ========================================================= */
.payment-source-tabs-v1644 button{background:#f8fcff!important;color:#123e67!important;border:1px solid #bad6e8!important}
.payment-source-tabs-v1644 button b,.payment-source-tabs-v1644 button small{color:inherit!important}
.payment-source-tabs-v1644 button.active{background:linear-gradient(135deg,#e8f5ff,#f5fbff)!important;color:#0b4f83!important;border-color:#2b91ca!important;box-shadow:0 5px 14px rgba(17,95,146,.14)!important}
.payment-source-tabs-v1644 button em{background:#fff!important;color:#17577f!important;border:1px solid #b9d6e9!important}
.payment-source-tabs-v1644 button.active em{background:#237eb5!important;color:#fff!important;border-color:#237eb5!important}
.pimpinan-payment-panel-v1644 .payment-list-v138{margin-top:10px}
.tte-box-v1644{text-align:center!important;min-width:94px}
.tte-box-v1644 .tte-time-v139{display:block!important;text-align:center!important;margin-top:3px!important}
.payment-signature-v1644{width:100%;text-align:center!important}
.summary-planning-groups-v1644{display:flex!important;flex-direction:column!important;gap:12px!important}
.summary-group-v1644{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%}
.summary-group-v1644 .summary-card{min-width:0}
.summary-status-v1644{padding-bottom:2px}
.summary-budget-v1644{padding-top:12px;border-top:1px dashed rgba(21,87,127,.22)}
@media(max-width:1000px){.summary-group-v1644{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.summary-group-v1644{grid-template-columns:1fr}.payment-source-tabs-v1644{grid-template-columns:1fr!important}}

/* =========================================================
   SIMPROV v164.5 - Layout kartu horizontal selain Perencanaan
   ========================================================= */
#summaryCards.summary-grid:not(.summary-planning-groups-v1644){
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px!important;
  width:100%;
}
#summaryCards.summary-grid:not(.summary-planning-groups-v1644).summary-six-v163{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
#summaryCards.summary-grid:not(.summary-planning-groups-v1644)>.summary-card{
  width:auto!important;
  min-width:0!important;
}
@media(max-width:1350px){
  #summaryCards.summary-grid:not(.summary-planning-groups-v1644),
  #summaryCards.summary-grid:not(.summary-planning-groups-v1644).summary-six-v163{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media(max-width:900px){
  #summaryCards.summary-grid:not(.summary-planning-groups-v1644),
  #summaryCards.summary-grid:not(.summary-planning-groups-v1644).summary-six-v163{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:620px){
  #summaryCards.summary-grid:not(.summary-planning-groups-v1644),
  #summaryCards.summary-grid:not(.summary-planning-groups-v1644).summary-six-v163{
    grid-template-columns:1fr!important;
  }
}

/* SIMPROV v164.13 */
.proc-bulk-toolbar-v16413{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:12px 14px;border:1px solid #cfe1ef;border-radius:12px;background:#f6fbff}
.proc-bulk-toolbar-v16413 label{display:flex;align-items:center;gap:8px;font-weight:700;color:#163f63}
.proc-bulk-toolbar-v16413 input[type="checkbox"]{width:18px;height:18px;accent-color:#159447}
.proc-bulk-toolbar-v16413 small{color:#63778b}
.proc-bulk-summary-v16413{padding:6px 10px;border-radius:999px;background:#e8f4ff;color:#14517d;font-size:12px}
.proc-bulk-cell-v16413,.proc-bulk-head-v16413{width:64px;text-align:center!important}
.proc-bulk-choice-v16413{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid #b9d5e8;border-radius:8px;background:#fff;cursor:pointer}
.proc-bulk-choice-v16413 input{position:absolute;opacity:0;pointer-events:none}
.proc-bulk-choice-v16413 span{font-size:16px;color:#8aa0b3;font-weight:900}
.proc-bulk-choice-v16413:has(input:checked){background:#e3f8eb;border-color:#3ab269}
.proc-bulk-choice-v16413:has(input:checked) span{color:#158444}
@media(max-width:760px){.proc-bulk-toolbar-v16413{align-items:stretch}.proc-bulk-toolbar-v16413 .btn-green{width:100%}}

/* SIMPROV v164.14 - pencarian ringan dan filter bidang */
.fast-payment-filter-v16414,
.fast-generated-filter-v16414 .toolbar{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(190px,280px) auto;
  gap:12px;
  align-items:end;
  margin:12px 0 14px;
  padding:12px;
  border:1px solid #d5e5f3;
  border-radius:14px;
  background:#f8fbfe;
}
.fast-search-field-v16414,
.fast-filter-field-v16414{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.fast-search-field-v16414>span,
.fast-filter-field-v16414>span{
  color:#4d6279;
  font-size:12px;
  font-weight:800;
}
.fast-search-field-v16414 input,
.fast-filter-field-v16414 select,
.fast-package-field-wrap-v16414 select{
  width:100%;
  min-height:40px;
  padding:9px 12px;
  border:1px solid #cbddec;
  border-radius:10px;
  background:#fff;
  color:#153b65;
  outline:none;
}
.fast-search-field-v16414 input:focus,
.fast-filter-field-v16414 select:focus,
.fast-package-field-wrap-v16414 select:focus{
  border-color:#2387c7;
  box-shadow:0 0 0 3px rgba(35,135,199,.12);
}
.fast-result-v16414{
  align-self:center;
  white-space:nowrap;
  color:#60758d;
  font-size:12px;
  font-weight:700;
}
.fast-result-v16414 span{color:#0e548d;font-size:15px}
.fast-package-field-wrap-v16414{min-width:210px}
.fast-package-field-wrap-v16414 .fast-filter-field-v16414>span{display:none}
.paket-toolbar-v95{gap:10px;align-items:center;flex-wrap:wrap}
.paket-toolbar-v95>input{min-width:260px;flex:1}
.payment-card-v138[style*="display: none"],
.paket-row-v95[style*="display: none"],
.non-card-v83[style*="display: none"]{display:none!important}
@media(max-width:800px){
  .fast-payment-filter-v16414,
  .fast-generated-filter-v16414 .toolbar{grid-template-columns:1fr}
  .fast-package-field-wrap-v16414{width:100%;min-width:0}
  .paket-toolbar-v95>input{width:100%;min-width:0}
}

/* SIMPROV v164.22 */
.payment-card-v138.payment-focus-v16422{
  outline:3px solid rgba(23,126,192,.28);
  outline-offset:4px;
  transition:outline-color .25s ease,box-shadow .25s ease;
  box-shadow:0 12px 30px rgba(12,78,132,.14);
}
.payment-view-btn-v16422{white-space:nowrap}


/* SIMPROV v165.4 - panel persentase realisasi kini tunggal */
.public-chart-single-v1654{grid-template-columns:1fr}
.public-progress-notes span{font-variant-numeric:tabular-nums}
.public-table-v82 td:nth-child(n+2),.public-table-v82 th:nth-child(n+2){text-align:right}
.pct-cell-v1654{font-weight:800;color:#0f4c81}
.panpel-induk-v1654{display:block;margin-top:2px;font-size:11.5px;font-style:normal;font-weight:700;color:#0f4c81;opacity:.85}

/* SIMPROV v165.5 - Impor RAB */
.rab-import-head-v1655{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.rab-import-head-v1655 input[type=file]{padding:10px;border:1px dashed #bcd8ef;border-radius:10px;background:#f7fbff;cursor:pointer;font-size:13px}
.rab-preview-v1655{margin-top:6px}
.rab-preview-stat-v1655{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.rab-chip-v1655{padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:800;background:#eef4fa;color:#17365b;border:1px solid #d6e6f4}
.rab-chip-v1655.baru{background:#e8f7ee;color:#12633a;border-color:#bfe6cf}
.rab-chip-v1655.ubah{background:#fff6e5;color:#8a5a00;border-color:#f3ddb0}
.rab-chip-v1655.sama{background:#f1f3f6;color:#5a6472;border-color:#dde2e8}
.rab-chip-v1655.induk{background:#eef2ff;color:#3b4a9c;border-color:#ccd5f5}
.rab-chip-v1655.tolak{background:#fdeced;color:#a01722;border-color:#f5c6ca}
.rab-chip-v1655.total{background:#eaf7ff;color:#0f4c81;border-color:#cfe6f7}
.rab-error-box-v1655{background:#fff7f7;border:1px solid #f3ccd0;border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:13px;color:#8a1220}
.rab-error-box-v1655 ul{margin:6px 0 0;padding-left:18px}
.rab-preview-table-v1655{width:100%;border-collapse:collapse;font-size:13px}
.rab-preview-table-v1655 th{background:#f4f8fc;text-align:left;padding:9px 10px;font-weight:800;color:#17365b;white-space:nowrap}
.rab-preview-table-v1655 td{padding:9px 10px;border-top:1px solid #eef2f6;vertical-align:top}
.rab-preview-table-v1655 td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rab-preview-table-v1655 s{color:#98a2ae}
.rab-tag-v1655{padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:800;white-space:nowrap}
.rab-tag-v1655.baru{background:#e8f7ee;color:#12633a}
.rab-tag-v1655.ubah{background:#fff6e5;color:#8a5a00}
.rab-tag-v1655.kunci{background:#fdeced;color:#a01722}
.rab-preview-actions-v1655{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
@media(max-width:720px){.rab-preview-table-v1655{font-size:12px}}
.rab-rekon-v1655{background:#eef7ff;border:1px solid #cfe3f5;border-radius:10px;padding:9px 14px;margin-bottom:10px;font-size:13px;color:#17365b}
.rab-rekon-v1655.timpang{background:#fff5f5;border-color:#f3ccd0;color:#8a1220;font-weight:700}
.rab-skip-box-v1655{background:#f6f8fb;border:1px solid #dde5ee;border-radius:10px;padding:8px 14px;margin-bottom:10px;font-size:13px}
.rab-skip-box-v1655 summary{cursor:pointer;font-weight:700;color:#3b4a9c}
.rab-skip-box-v1655 ul{margin:6px 0 0;padding-left:18px;color:#5a6472}
.rab-ket-v1655{color:#7a8694;font-size:11.5px}
.rab-row-sama-v1655{opacity:.62}
.rab-cek-v1655{margin:-4px 0 12px;font-size:12.5px}
.rab-induk-box-v1655{background:#f5f7ff;border-color:#ccd5f5;color:#3b4a9c}
.rab-induk-box-v1655 summary{cursor:pointer;font-weight:700}
.rab-tag-v1655.sama{background:#eef1f5;color:#5a6472}

/* SIMPROV v165.7 - Dashboard publik, tata letak layar lebar
   Aplikasi ini dipakai dari komputer. Layar lebar jadi acuan utama,
   ponsel hanya diberi susunan cadangan agar tidak rusak. */

.public-metric:after{display:none}
.public-metric{border:1px solid #dde8f1;box-shadow:0 2px 8px rgba(11,74,126,.05)}
.public-belum-v1656{margin:0;color:#667085;font-size:14px;line-height:1.6}
.nol-v1656{color:#b6bfc9}
.public-panel{box-shadow:0 2px 10px rgba(11,74,126,.06)}
.public-table-v82 tbody tr:nth-child(even){background:#fafcfe}

/* Dua kartu mengisi lebar penuh, tidak menyisakan kolom kosong */
.public-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:18px}
.public-metric{min-height:132px;padding:24px 26px;display:flex;flex-direction:column;justify-content:center}
.public-metric small{font-size:12.5px;letter-spacing:.02em}
.public-metric strong{font-size:38px;letter-spacing:-1px;margin:10px 0 6px;line-height:1}
.public-metric span{font-size:12.5px}

/* Panel persentase dibuat mendatar agar lebar terpakai */
.public-chart-single-v1654 .public-panel{padding:26px 28px}
#publicProgress{display:flex;align-items:center;gap:32px}
#publicProgress .big-percent{font-size:52px;line-height:1;flex:0 0 auto;min-width:150px}
#publicProgress .public-progress-track{flex:1;margin:0;height:20px}
#publicProgress .public-progress-notes{flex:0 0 auto;flex-direction:column;gap:5px;text-align:right;font-size:13px}
#publicProgress .public-belum-v1656{flex:1}

.public-table-v82 th,.public-table-v82 td{padding:13px 16px}
.public-table-v82 th{font-size:12px;letter-spacing:.04em}
.public-table-v82 td{font-size:14px}

/* Susunan cadangan untuk layar sempit */
@media(max-width:820px){
  .public-summary-grid{grid-template-columns:1fr !important}
  .public-metric{min-height:0;padding:18px}
  .public-metric strong{font-size:28px}
  #publicProgress{flex-direction:column;align-items:stretch;gap:14px}
  #publicProgress .big-percent{font-size:36px;min-width:0}
  #publicProgress .public-progress-notes{flex-direction:row;text-align:left}
}

/* SIMPROV v165.8 - Acuan RAB pada form perencanaan */
.rab-acuan-field-v1658 select{font-weight:600}
.rab-info-box-v1658{margin-top:6px;min-height:18px}
.rab-hint-v1658{font-size:12.5px;color:#667085}
.rab-info-v1658{font-size:13px;color:#17365b}
.rab-info-v1658 .sisa-ada{color:#12633a}
.rab-info-v1658 .sisa-habis{color:#a01722}

/* SIMPROV v165.8b - Acuan RAB di atas panel sumber biaya */
.rab-acuan-block-v1658{margin:0 0 16px}
.rab-acuan-inner-v1658{background:#f7fbff;border:1px solid #cfe6f7;border-radius:12px;padding:16px 18px}
.rab-acuan-label-v1658{display:block;font-weight:800;color:#0f4c81;margin-bottom:6px;font-size:13px;letter-spacing:.02em}
.rab-acuan-inner-v1658 select{width:100%;font-weight:600}
.input-terkunci-v1661{background:#f2f5f8;color:#41505f;cursor:not-allowed}
.ket-harga-v1661{display:block;margin-top:4px;font-size:11.5px;color:#667085}
.sb-filter-ket-v1662{margin:0 0 10px;font-size:12.5px;color:#41505f;background:#f3f8fc;border:1px solid #dce9f4;border-radius:8px;padding:8px 12px}

/* SIMPROV v167 - Kelola Standar Biaya */
.sb-kelola-head-v1671{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.sb-kelola-head-v1671 input{flex:1;min-width:220px}
.sb-jumlah-v1671{font-size:12.5px;color:#667085}
.sb-kelola-table-v1671{width:100%;border-collapse:collapse;font-size:13px}
.sb-kelola-table-v1671 th{background:#f4f8fc;text-align:left;padding:10px;font-weight:800;color:#17365b;white-space:nowrap}
.sb-kelola-table-v1671 td{padding:9px 10px;border-top:1px solid #eef2f6;vertical-align:middle}
.sb-kelola-table-v1671 td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sb-kat-v1671{padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:800;white-space:nowrap}
.sb-kat-v1671.pgd{background:#eaf4fd;color:#0f4c81}
.sb-kat-v1671.non{background:#fff4e6;color:#8a5a00}
.sb-kosong-v1671{padding:18px;text-align:center;background:#f7fbff;border:1px dashed #cfe2f2;border-radius:10px}
.sb-kosong-v1671 p{margin:0 0 10px;color:#41505f}
.sb-form-box-v1671{max-width:640px}
.sb-form-grid-v1671{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:4px 0 14px}
.sb-form-grid-v1671 .field.full{grid-column:1/-1}
.sb-form-aksi-v1671{display:flex;gap:10px;justify-content:flex-end}
.at-cost-v1671{color:#8a5a00;font-style:normal;font-weight:700}

/* SIMPROV v168.3 - Kerapian kartu ringkasan */
.summary-grid-rapi-v1683{display:grid;gap:14px;align-items:stretch}
.summary-grid-rapi-v1683 .summary-card{margin:0;min-height:96px;display:flex;flex-direction:column;justify-content:center}
@media(min-width:900px){
  .summary-grid-rapi-v1683{grid-template-columns:repeat(var(--kartu-v1683,4),minmax(0,1fr))}
}
@media(max-width:899px){
  .summary-grid-rapi-v1683{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* SIMPROV v168.5 - Paging tabel Standar Biaya */
.sb-paging-v1671{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap;font-size:13px;color:#5a6472}
.sb-paging-nav-v1671{display:flex;align-items:center;gap:10px}
.sb-paging-info-v1671{font-weight:700;color:#17365b}
.sb-paging-nav-v1671 .btn-mini[disabled]{opacity:.45;cursor:not-allowed}
.rab-daftar-table-v1686 td:nth-child(2){max-width:280px}
.rab-daftar-table-v1686 .sisa-ada{color:#12633a}
.rab-daftar-table-v1686 .sisa-habis{color:#a01722}

/* SIMPROV v168.7 - Form kelola RAB */
.rab-form-box-v1687{max-width:820px}

/* Kepala dan tombol tetap di tempat, hanya isian yang digulir.
   min-height:0 diperlukan agar anak flex boleh menyusut di bawah tinggi isinya,
   tanpa itu tombol terdorong keluar kotak. */
.rab-form-box-v1687 .sbv-head-v95{flex:0 0 auto}
.rab-form-isi-v1687{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px;margin-right:-4px}
.rab-form-aksi-v1687{flex:0 0 auto;display:flex;gap:10px;justify-content:flex-end;
  padding-top:14px;margin-top:4px;border-top:1px solid #eef2f6}

.rab-form-grid-v1687{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:2px 0 4px}
.rab-form-grid-v1687 .field{display:flex;flex-direction:column;gap:5px;min-width:0}
.rab-form-grid-v1687 .field.full{grid-column:1/-1}
.rab-form-grid-v1687 .field.span2-v1687{grid-column:span 2}
.rab-form-grid-v1687 label{font-size:12.5px;font-weight:700;color:#41505f}
.rab-form-grid-v1687 input,.rab-form-grid-v1687 select{width:100%;padding:9px 11px;border:1px solid #d7e4ef;
  border-radius:9px;font-size:13.5px;background:#fff;min-width:0}
.rab-form-grid-v1687 select:disabled,.rab-form-grid-v1687 input:disabled{background:#f2f5f8;color:#41505f;cursor:not-allowed}

.rab-form-ket-v1687{flex:0 0 auto;margin:0 0 12px;padding:9px 13px;background:#fff7e8;
  border:1px solid #f0dcb4;border-radius:8px;font-size:13px;color:#7a5312}
.rab-aksi-v1687{white-space:nowrap}
.rab-kunci-ket-v1687{font-size:12px;color:#a01722;font-weight:700}

@media(max-width:760px){
  .rab-form-grid-v1687{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rab-form-grid-v1687 .field.span2-v1687{grid-column:1/-1}
}

/* Perbaikan sama untuk form Standar Biaya, yang memakai kotak modal serupa. */
.sb-form-box-v1671 .sbv-head-v95{flex:0 0 auto}
.sb-form-grid-v1671{flex:1 1 auto;min-height:0;overflow-y:auto}
.sb-form-grid-v1671 .field{display:flex;flex-direction:column;gap:5px;min-width:0}
.sb-form-grid-v1671 input,.sb-form-grid-v1671 select{width:100%;padding:9px 11px;
  border:1px solid #d7e4ef;border-radius:9px;font-size:13.5px;min-width:0}
.sb-form-aksi-v1671{flex:0 0 auto;padding-top:14px;border-top:1px solid #eef2f6}

/* SIMPROV v168.9 - Pemilih jumlah baris */
.per-hal-v1687{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.per-hal-v1687 label{font-size:12.5px;color:#667085}
.per-hal-v1687 select{padding:7px 9px;border:1px solid #d7e4ef;border-radius:8px;font-size:13px;background:#fff;min-width:78px}

/* SIMPROV v170 - Info pagu pada pencatatan realisasi */
.info-pagu-real-v170{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 14px;padding:10px 14px;
  background:#f4f8fc;border:1px solid #dce9f4;border-radius:9px;font-size:13px;color:#41505f}
.info-pagu-real-v170 b{color:#17365b}
.info-pagu-real-v170 .sisa-ada{color:#12633a}
.info-pagu-real-v170 .sisa-habis{color:#a01722}

/* SIMPROV v176 - Konteks paket pada form realisasi */
.konteks-paket-v176{margin:0 0 14px;padding:12px 15px;background:#f4f8fc;
  border:1px solid #dce9f4;border-left:3px solid #0f4c81;border-radius:9px}
.konteks-judul-v176{font-weight:800;color:#17365b;font-size:14.5px;line-height:1.35}
.konteks-kode-v176{font-size:12px;color:#667085;margin-top:2px}
.konteks-angka-v176{display:flex;flex-wrap:wrap;gap:18px;margin-top:9px;font-size:13px;color:#41505f}
.konteks-angka-v176 b{color:#17365b}
.konteks-angka-v176 .sisa-ada{color:#12633a}
.konteks-angka-v176 .sisa-habis{color:#a01722}

/* SIMPROV v178 - Pencarian bidang pada Dashboard Pemeriksaan */
.cari-bidang-v178{display:flex;align-items:center;gap:12px;margin:14px 0 10px}
.cari-bidang-v178 input{flex:1;max-width:420px;padding:9px 12px;border:1px solid #d7e4ef;
  border-radius:9px;font-size:13.5px;background:#fff}
.hasil-cari-v178{font-size:12.5px;color:#667085;white-space:nowrap}

/* SIMPROV v179 - Keterangan total RAB pada Struktur Anggaran */
.info-rab-v179{display:block;margin-top:5px;font-size:11.5px;color:#667085;line-height:1.45}

/* SIMPROV v180 - Rincian kegiatan per bidang */
.baris-klik-v180{cursor:pointer}
.baris-klik-v180:hover{background:#f2f7fc}
.rincian-card-v180{max-width:900px;width:94vw}
.rincian-ringkas-v180{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 12px;padding:10px 14px;
  background:#f4f8fc;border:1px solid #dce9f4;border-radius:9px;font-size:13px;color:#41505f}
.rincian-ringkas-v180 b{color:#17365b}
.rincian-saring-v180{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.rincian-table-v180{width:100%;border-collapse:collapse;font-size:13px}
.rincian-table-v180 th{background:#f4f8fc;text-align:left;padding:9px 10px;font-weight:800;color:#17365b;white-space:nowrap}
.rincian-table-v180 td{padding:9px 10px;border-top:1px solid #eef2f6;vertical-align:top}
.rincian-table-v180 td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rincian-nol-v180{opacity:.68}
.rincian-kode-v180{font-size:11.5px;color:#667085}
.rincian-status-v180{font-size:12px;color:#5a6472}
.ket-atcost-v181{display:block;margin-top:5px;font-size:11.5px;color:#8a5a00;line-height:1.45}


/* SIMPROV v185.1 - Pilihan Impor CSV */
.import-selector-v1851{
  display:grid;
  grid-template-columns:minmax(180px,260px);
  gap:8px;
  margin:14px 0 12px;
}
.import-selector-v1851 label{font-weight:700;color:var(--ink,#123b63)}
.import-selector-v1851 select{
  min-height:44px;
  padding:9px 12px;
  border:1px solid rgba(25,103,160,.22);
  border-radius:12px;
  background:#fff;
  color:inherit;
  font:inherit;
}

/* v185.2 - Form edit bidang lengkap */
.admin-budget-card-v1852{
  grid-template-columns:minmax(220px,1.35fr) minmax(150px,.8fr) minmax(145px,.7fr) minmax(145px,.7fr) auto auto;
}
.admin-budget-card-v1852.editing{
  grid-template-columns:repeat(5,minmax(150px,1fr));
  align-items:end;
}
.admin-budget-card-v1852.editing .admin-budget-summary-v1852{
  grid-column:1/4;
  min-height:44px;
  justify-content:center;
}
.admin-budget-card-v1852.editing .admin-budget-actions-v1852{
  grid-column:4/6;
  align-self:center;
}
.info-rab-inline-v1852{
  display:block;
  margin-top:6px;
  color:#64748b;
  font-size:11px;
  line-height:1.35;
}
.admin-budget-actions-v1852 .btn-danger{
  background:#fff1f2!important;
  color:#b42318!important;
  border:1px solid #fecdd3!important;
}
@media(max-width:1280px){
  .admin-budget-card-v1852,
  .admin-budget-card-v1852.editing{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .admin-budget-card-v1852.editing .admin-budget-summary-v1852,
  .admin-budget-card-v1852.editing .admin-budget-actions-v1852{grid-column:1/-1}
}
@media(max-width:720px){
  .admin-budget-card-v1852,
  .admin-budget-card-v1852.editing{grid-template-columns:1fr!important}
  .admin-budget-card-v1852.editing .admin-budget-summary-v1852,
  .admin-budget-card-v1852.editing .admin-budget-actions-v1852{grid-column:auto}
}

/* SIMPROV v185.3.3 - Manajemen Akses per role, paging, dan minimize. */
.management-account-head-v18533{gap:14px!important}
.management-account-actions-v18533{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.account-toolbar-v18533{display:grid;grid-template-columns:minmax(210px,1fr) minmax(150px,.45fr) auto;gap:12px;align-items:end;margin:4px 0 12px;padding:13px;border:1px solid #d9e9f3;border-radius:15px;background:linear-gradient(135deg,#f8fcff,#f4f9fc)}
.account-toolbar-v18533 .field{margin:0}
.account-count-v18533{display:flex;align-items:center;gap:8px;justify-content:flex-end;min-height:42px;color:#537084}
.account-count-v18533 b{font-size:24px;color:#07558b}
.account-count-v18533 span{font-size:12px;font-weight:700}
.account-list-v18533{margin-top:0!important;gap:9px!important}
.account-card-v18533{padding:12px 14px!important;border-radius:14px!important;box-shadow:0 5px 16px rgba(9,64,104,.055)!important}
.account-paging-v18533{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:13px;padding-top:12px;border-top:1px solid #e0ecf3;color:#61798b;font-size:12px}
.account-paging-v18533>div{display:flex;align-items:center;gap:9px}
.account-paging-v18533 .btn-mini:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:850px){
  .account-toolbar-v18533{grid-template-columns:1fr 1fr}
  .account-count-v18533{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:620px){
  .management-account-actions-v18533{width:100%;margin-left:0}
  .account-toolbar-v18533{grid-template-columns:1fr}
  .account-count-v18533{grid-column:auto}
  .account-paging-v18533{align-items:flex-start;flex-direction:column}
  .account-paging-v18533>div{width:100%;justify-content:space-between}
}

/* SIMPROV v185.4 - Ketentuan survey harga per Standar Biaya */
.sb-survey-badge-v1854{display:inline-flex;align-items:center;width:max-content;max-width:100%;margin-top:6px;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.25;white-space:normal}
.sb-survey-badge-v1854.wajib{background:#fff4d7;border:1px solid #f0c86a;color:#7a5200}
.sb-survey-badge-v1854.tidak{background:#eef8f1;border:1px solid #b8dfc2;color:#1d6b35}
.sb-survey-desc-v1854{display:block;margin-top:5px;max-width:300px;color:#617086;line-height:1.35}
.survey-rule-v1854{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;margin-top:2px;padding:12px 14px;border:1px solid #c6e2cd;border-radius:14px;background:#f2faf4;color:#225d33}
.survey-rule-v1854.wajib{border-color:#efd18a;background:#fff8e8;color:#745000}
.survey-rule-v1854 b{font-size:13px}.survey-rule-v1854 span{font-size:12px;line-height:1.45}
.sb-survey-table-v1854 th:nth-child(7),.sb-survey-table-v1854 td:nth-child(7){min-width:190px}
@media(max-width:760px){.survey-rule-v1854{padding:10px 12px}.sb-survey-table-v1854 th:nth-child(7),.sb-survey-table-v1854 td:nth-child(7){min-width:170px}}

/* SIMPROV v186.0 TAHAP 1 - Versi RAB dan analisis dampak */
.rab-version-v186,.rab-draft-v186{display:inline-flex;align-items:center;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:800;line-height:1.4;vertical-align:middle}.rab-version-v186{background:#e8f3ff;color:#075b95;border:1px solid #c7e4f8}.rab-draft-v186{background:#fff4d8;color:#8a5a00;border:1px solid #f1d894}.rab-impact-form-v186{border:1px solid #d7e7f3;border-radius:14px;background:#f9fcff;padding:12px}.rab-impact-status-v186{display:flex;flex-direction:column;gap:3px;border-radius:12px;padding:11px 13px;margin-bottom:12px}.rab-impact-status-v186 b{font-size:13px}.rab-impact-status-v186 span{font-size:12px}.rab-impact-status-v186.safe{background:#eaf9f0;color:#146c3c;border:1px solid #bfe9cf}.rab-impact-status-v186.warning{background:#fff8e3;color:#805d00;border:1px solid #efd894}.rab-impact-status-v186.danger{background:#fff0f0;color:#9d2f2f;border:1px solid #f1c3c3}.rab-impact-grid-v186{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.rab-impact-grid-v186>div{display:flex;flex-direction:column;gap:3px;border:1px solid #dbeaf4;border-radius:11px;background:#fff;padding:10px}.rab-impact-grid-v186 small{color:#64788a;font-size:10px;text-transform:uppercase;letter-spacing:.04em}.rab-impact-grid-v186 b{font-size:13px;color:#0e4f7b}.rab-impact-grid-v186 span{font-size:10px;color:#718494}.rab-info-box-v186{width:min(920px,94vw);max-height:88vh;overflow:auto}.rab-info-body-v186{padding:16px}.rab-history-list-v186{display:grid;gap:12px}.rab-history-card-v186{border:1px solid #d8e7f1;border-radius:15px;background:#fff;padding:14px;box-shadow:0 5px 18px rgba(16,75,112,.05)}.rab-history-head-v186{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.rab-history-head-v186>div{display:flex;flex-direction:column;gap:2px}.rab-history-head-v186 small{color:#6d8191}.rab-history-status-v186{display:inline-flex;border-radius:999px;padding:4px 9px;font-size:10px;font-weight:900}.rab-history-status-v186.aktif{background:#e8f8ef;color:#197044}.rab-history-status-v186.draft{background:#fff5d9;color:#855d00}.rab-history-status-v186.dibatalkan{background:#f3f3f3;color:#666}.rab-history-values-v186{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:12px 0 8px}.rab-history-values-v186 span{font-weight:800;color:#0e4f7b}.rab-history-values-v186 em{font-style:normal;font-size:11px;border-radius:999px;padding:3px 8px;background:#eef6fb;color:#47677d}.rab-history-card-v186 p{margin:6px 0;font-size:12px}.rab-history-metrics-v186{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.rab-history-metrics-v186 span{background:#f4f8fb;border:1px solid #e0ebf2;border-radius:8px;padding:5px 8px;font-size:10px;color:#526b7d}.rab-history-actions-v186{display:flex;gap:8px;margin-top:12px}.rab-reason-v186 textarea{width:100%;resize:vertical}.rab-all-history-v186{margin-left:auto}.rab-aksi-v1687{white-space:normal;min-width:250px}.rab-impact-btn-v186,.rab-history-btn-v186{margin-top:4px}
@media(max-width:900px){.rab-impact-grid-v186{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.rab-impact-grid-v186{grid-template-columns:1fr}.rab-history-head-v186{flex-direction:column}.rab-all-history-v186{margin-left:0}}

/* =========================================================
   SIMPROV v186.2 - Tahap 2 Pergeseran RAB + pelebaran tabel
   ========================================================= */
/* [v186.8] Blok pelebaran paksa tabel Perencanaan v186.2 dihapus - digantikan Sistem Tampilan Terpadu di bagian akhir berkas ini. */
.rab-stage2-card-v186{width:min(1380px,98vw)!important;max-width:none!important}
.rab-stage2-modal-v186{padding:22px 24px 26px;max-height:92vh;overflow:auto}
.rab-stage2-head-v186{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px}
.rab-stage2-head-v186 small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#0b7ab8;font-weight:800}
.rab-stage2-head-v186 h3{margin:4px 0 6px;color:#0c4573}
.rab-stage2-head-v186 p{margin:0;color:#6a7f90}
.rab-stage2-summary-v186,.rab-stage2-highlights-v186{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.rab-stage2-summary-v186>div,.rab-stage2-highlights-v186>div{padding:14px 16px;border:1px solid #d9e7f3;border-radius:14px;background:#f8fbfe;min-width:0}
.rab-stage2-summary-v186 small,.rab-stage2-highlights-v186 small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6c8092;margin-bottom:6px}
.rab-stage2-summary-v186 b,.rab-stage2-highlights-v186 b{display:block;font-size:18px;color:#123f64}
.rab-stage2-summary-v186 span,.rab-stage2-highlights-v186 span{display:block;font-size:12px;color:#64768a;margin-top:5px;line-height:1.4}
.rab-stage2-note-v186{margin:10px 0 14px;padding:12px 14px;border-radius:12px;border:1px solid #cfe4f5;background:#eff8ff;color:#1d4c72;line-height:1.5}
.rab-stage2-table-v186{min-width:1420px!important}
.rab-stage2-table-v186 th,.rab-stage2-table-v186 td{vertical-align:top!important}
.rab-stage2-table-v186 td.num{text-align:right;white-space:nowrap;font-weight:800}
.rab-stage2-control-v186{display:grid;gap:8px;min-width:280px}
.rab-stage2-control-v186 select,.rab-stage2-control-v186 input{width:100%}
.rab-stage2-inline-v186{display:grid;gap:5px}
.rab-stage2-inline-v186 label{font-size:11px;font-weight:800;color:#5d7488;text-transform:uppercase;letter-spacing:.04em}
.rab-stage2-lock-v186{display:grid;gap:7px;min-width:220px}
.rab-stage2-lock-v186 small{color:#7b5f00;line-height:1.4}
.rab-stage2-badge-v186{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;background:#eef5fb;color:#294d6a;white-space:nowrap}
.rab-stage2-badge-v186.lock{background:#fff6dd;color:#8a5a00}
.rab-stage2-badge-v186.process{background:#ffedd5;color:#a1440f}
.rab-stage2-badge-v186.free{background:#eafaf0;color:#15683c}
.rab-stage2-badge-v186.disetujui{background:#eaf7ee;color:#15683c}
.rab-stage2-badge-v186.diajukan{background:#e8f2ff;color:#0d5fa1}
.rab-stage2-badge-v186.perubahan_diajukan{background:#fff5e8;color:#9a5b00}
.rab-stage2-badge-v186.dibatalkan,.rab-stage2-badge-v186.ditolak{background:#ffe8e8;color:#aa1f2f}
.rab-stage2-actions-v186{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.rab-stage2-table-wrap-v186{max-height:54vh;overflow:auto}
@media(max-width:980px){.rab-stage2-summary-v186,.rab-stage2-highlights-v186{grid-template-columns:repeat(2,minmax(0,1fr))}.rab-stage2-table-v186{min-width:1260px!important}}
@media(max-width:640px){.rab-stage2-summary-v186,.rab-stage2-highlights-v186{grid-template-columns:1fr}.rab-stage2-modal-v186{padding:16px}.rab-stage2-actions-v186>*{width:100%}}

/* [v186.8] Blok v186.2.1 (min-width tabel Perencanaan) dihapus - digantikan Sistem Tampilan Terpadu. */

/* [v186.8] Blok v186.3 (desktop full screen) dihapus - digantikan Sistem Tampilan Terpadu. */
/* Aturan fungsional v186.3 (Tahap 2 RAB) dipertahankan: */
.rab-stage2-flow-v1863{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px;color:#557086;font-size:12px}
.rab-stage2-flow-v1863 span{padding:5px 8px;border:1px solid #d7e6f2;border-radius:999px;background:#f8fbfe}
.rab-stage2-flow-v1863 i{font-style:normal;color:#0b7ab8;font-weight:900}
.rab-doc-info-v1863{margin-top:7px;padding:6px 8px;border-radius:8px;background:#fff7e7;border:1px solid #f2d59a;color:#775000;font-size:10.5px;line-height:1.35}
.rab-stage-status-v1863{margin-bottom:7px;font-size:10.5px;color:#5f7283}
.rab-stage2-wait-v1863,.rab-stage2-ready-v1863{margin:10px 0 14px;padding:12px 14px;border-radius:12px;line-height:1.45}
.rab-stage2-wait-v1863{background:#fff8e6;border:1px solid #efcf82;color:#745000}
.rab-stage2-ready-v1863{background:#ecfaf1;border:1px solid #a9dfba;color:#176038}
.rab-stage2-actions-v186 button:disabled{opacity:.48;cursor:not-allowed}

/* [v186.8] Blok v186.5 (desktop penuh) dihapus - digantikan Sistem Tampilan Terpadu. */
.rab-pagu-auto-v1865{display:block;margin-top:5px;color:#60788c;font-size:11px;line-height:1.35}
.rab-rollback-note-v1865{margin-top:10px;padding:8px 10px;border-radius:10px;background:#f5f8fb;border:1px solid #dce6ef;color:#647789;font-size:11px;line-height:1.4}
.rab-history-status-v186.pengembalian{background:#e9f8ef!important;color:#17653b!important}
.rab-history-status-v186.dikembalikan{background:#eef2f7!important;color:#586677!important}


/* [v186.8] Blok v186.6 (desktop 100% viewport) dihapus - digantikan Sistem Tampilan Terpadu. */

/* [v186.8] Blok v186.7 (proporsi Perencanaan) dihapus - digantikan Sistem Tampilan Terpadu. */


/* =========================================================
   SIMPROV v186.8 - SISTEM TAMPILAN TERPADU (UI/UX POLISH)
   ---------------------------------------------------------
   Lapisan ini menyatukan seluruh aturan tampilan yang sebelumnya
   tersebar pada banyak blok override lintas versi.

   Ruang lingkup: HANYA tampilan (warna, ukuran, jarak, radius,
   bayangan, responsivitas, state interaksi).

   TIDAK diubah: struktur menu, nama menu, role, hak akses, alur
   proses, id elemen, nama fungsi, atribut onclick, selector yang
   dipakai JavaScript, isi teks, data, API, dan backend.

   Urutan bagian:
     1. Token desain
     2. Dasar halaman & latar
     3. Kerangka layout aplikasi
     4. Header (topbar)
     5. Navigasi menu
     6. Kartu ringkasan
     7. Panel & section
     8. Tabel (umum)
     9. Tabel Perencanaan / Persetujuan Perencanaan
    10. Formulir
    11. Tombol
    12. Badge & status
    13. Modal
    14. Dashboard publik & login
    15. Loading & efek
    16. Responsivitas
    17. Aksesibilitas visual
   ========================================================= */

/* ---------------------------------------------------------
   1. TOKEN DESAIN
   Warna logo tetap dipakai, namun sebagai aksen, bukan
   memenuhi seluruh permukaan.
   --------------------------------------------------------- */
:root{
  --primary:#0f4c81;
  --primary-strong:#0b3a64;
  --primary-soft:#e8f1f9;
  --primary2:#0ea5c6;
  --accent:#0ea5c6;
  --dark:#0f3a63;

  --page-bg:#f1f5f9;
  --surface:#ffffff;
  --surface-soft:#f7fafc;
  --surface-head:#eef3f8;

  --line:#dbe4ee;
  --line-strong:#c6d4e2;

  --text:#1f2d3d;
  --text-soft:#3d4d61;
  --muted:#5c6b7f;

  --green:#157347;
  --green-soft:#e7f5ec;
  --orange:#b45309;
  --orange-soft:#fdf1e0;
  --red:#c0392b;
  --red-soft:#fdecea;
  --blue:#0f4c81;

  --card:#ffffff;
  --shadow:0 1px 2px rgba(16,42,67,.05), 0 2px 8px rgba(16,42,67,.05);
  --shadow-raised:0 2px 6px rgba(16,42,67,.07), 0 8px 20px rgba(16,42,67,.06);

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:14px;
  --radius-xl:14px;

  --control-h:38px;
  --gap:16px;

  --font-main:"Segoe UI","Inter",system-ui,-apple-system,Arial,sans-serif;
  --font-size-base:14.5px;
}

/* ---------------------------------------------------------
   2. DASAR HALAMAN & LATAR
   Glassmorphism dan ornamen berlebih dikurangi supaya
   kontras teks jelas dan halaman terasa ringan.
   --------------------------------------------------------- */
html{background:var(--page-bg)}
body{
  margin:0!important;
  width:100%!important;
  max-width:none!important;
  font-family:var(--font-main)!important;
  font-size:var(--font-size-base)!important;
  line-height:1.5!important;
  color:var(--text)!important;
  background:var(--page-bg)!important;
  overflow-x:hidden!important;
  -webkit-font-smoothing:antialiased;
}
body:before{display:none!important;content:none!important}
.bg-orb,.orb-a,.orb-b{display:none!important}

/* Efek kilau (shine sweep) lintas versi dimatikan: sumber utama
   kesan "template" dan animasi yang tidak perlu. */
.topbar:before,.panel:before,.summary-card:before,.login-card:before,
.logo-mini:after,.logo-box:after,.summary-card:after,.public-metric:after,
.premium-row:before{
  display:none!important;
  content:none!important;
  animation:none!important;
}

/* Permukaan dibuat solid, bukan transparan. */
.topbar,.panel,.summary-card,.login-card,.public-hero,.public-intro,.public-panel,.public-metric{
  background:var(--surface)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--shadow)!important;
  overflow:visible;
}
.summary-card:hover,.panel:hover{box-shadow:var(--shadow)!important}

h1,h2,h3,h4{color:var(--dark);letter-spacing:-.01em}
.muted,.panel-sub,.topbar small,.login-card small{color:var(--muted)!important}

/* ---------------------------------------------------------
   3. KERANGKA LAYOUT APLIKASI
   Lebar layar dipakai penuh tanpa zoom dan tanpa transform.
   --------------------------------------------------------- */
#appPage.app-page,.app-page{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:14px clamp(12px,1.6vw,26px) 34px!important;
  transform:none!important;
}
#appPage>.topbar,
#appPage>.menu-nav,
#appPage>.summary-grid,
#appPage>.content-area,
#contentArea>.panel,
#contentArea>section{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:none!important;
}
.content-area{display:block}

/* ---------------------------------------------------------
   4. HEADER (TOPBAR)
   Ringkas, tidak tinggi, identitas pengguna tetap terbaca.
   --------------------------------------------------------- */
.topbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:12px 18px!important;
  border-radius:var(--radius)!important;
  border-left:3px solid var(--primary)!important;
}
.topbar-left{display:flex!important;align-items:center!important;gap:12px!important;min-width:0}
.topbar .logo-mini,.logo-mini{
  width:40px!important;height:40px!important;
  border-radius:10px!important;
  background:var(--surface)!important;
  box-shadow:none!important;
  border:1px solid var(--line)!important;
  padding:3px;
  flex:0 0 auto;
}
.topbar h2{
  font-size:19px!important;
  margin:0!important;
  line-height:1.2!important;
  letter-spacing:-.2px!important;
  color:var(--dark)!important;
}
.topbar p{
  font-size:12.5px!important;
  font-weight:600!important;
  margin:2px 0 0!important;
  color:var(--text-soft)!important;
}
.topbar small,.topbar #userInfo{
  display:block;
  font-size:12px!important;
  line-height:1.4!important;
  margin-top:2px;
  color:var(--muted)!important;
}
.topbar-actions{display:flex!important;gap:8px!important;align-items:center!important;flex:0 0 auto}

/* ---------------------------------------------------------
   5. NAVIGASI MENU
   Nama, jumlah, dan urutan menu tidak diubah. Hanya ukuran,
   jarak, dan state yang dirapikan.
   --------------------------------------------------------- */
.menu-nav{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin:12px 0 14px!important;
  padding:7px!important;
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow)!important;
}
.menu-nav button{
  min-height:34px!important;
  padding:7px 13px!important;
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:0!important;
  border-radius:var(--radius-sm)!important;
  background:transparent!important;
  color:var(--text-soft)!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  white-space:nowrap;
  transition:background .14s ease,color .14s ease;
}
.menu-nav button:hover{
  background:var(--primary-soft)!important;
  color:var(--primary-strong)!important;
  transform:none!important;
}
.menu-nav button.active{
  background:var(--primary)!important;
  color:#fff!important;
  border-color:var(--primary)!important;
  box-shadow:none!important;
  font-weight:700!important;
}
.menu-nav button.active:hover{background:var(--primary-strong)!important;color:#fff!important}

/* ---------------------------------------------------------
   6. KARTU RINGKASAN
   Kompak, tinggi seragam, angka tetap mudah dibaca.
   --------------------------------------------------------- */
.summary-grid{
  gap:12px!important;
  margin:0 0 14px!important;
}
/* Catatan: jumlah kolom .summary-grid TIDAK dikunci di sini karena
   ditentukan varian dinamis (summary-grid-rapi-v1683, summary-six-v163,
   summary-pl-v140, summary-planning-groups-v1644) sesuai jumlah kartu. */
.summary-card{
  min-height:0!important;
  padding:13px 15px!important;
  border-radius:var(--radius)!important;
  border-left:3px solid var(--primary)!important;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.summary-card span{
  font-size:11.5px!important;
  font-weight:700!important;
  letter-spacing:.02em!important;
  color:var(--muted)!important;
  line-height:1.35!important;
}
.summary-card b{
  display:block;
  margin-top:5px!important;
  font-size:19px!important;
  line-height:1.25!important;
  color:var(--dark)!important;
  word-break:break-word;
  font-variant-numeric:tabular-nums;
}
.summary-card small{font-size:11.5px!important;color:var(--muted)!important}
.summary-card.green,.summary-card.ok{border-left-color:var(--green)!important}
.summary-card.orange,.summary-card.warn{border-left-color:var(--orange)!important}
.summary-card.red,.summary-card.danger{border-left-color:var(--red)!important}

/* ---------------------------------------------------------
   7. PANEL & SECTION
   Hierarki: judul panel > keterangan > isi.
   --------------------------------------------------------- */
.panel,.premium-panel,section.panel{
  padding:18px!important;
  border-radius:var(--radius)!important;
  margin-bottom:14px!important;
}
.panel h3,.premium-panel h3,section.panel>h3{
  font-size:17px!important;
  font-weight:700!important;
  margin:0 0 4px!important;
  letter-spacing:-.15px!important;
  color:var(--dark)!important;
}
.panel-sub{
  font-size:13px!important;
  line-height:1.5!important;
  margin:0 0 12px!important;
  max-width:1100px!important;
  color:var(--muted)!important;
}
.panel-head,.panel-title-row{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:12px!important;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.panel-head h3,.panel-title-row h3{margin:0 0 3px!important}
.panel-head .panel-sub,.panel-title-row .panel-sub{margin:0!important}
.panel .panel{
  box-shadow:none!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius-sm)!important;
  padding:14px!important;
  background:var(--surface-soft)!important;
}
.filter-card{
  background:var(--surface-soft)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius-sm)!important;
  padding:12px!important;
  margin:0 0 12px!important;
}
.toolbar{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  align-items:flex-end!important;
  margin:0!important;
}
.toolbar .field{min-width:170px;flex:1 1 170px}
.table-footer{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin-top:10px!important;
  font-size:13px;
}
.reason-box,.history-box{
  font-size:12px!important;
  line-height:1.45!important;
  border-radius:var(--radius-sm)!important;
  padding:8px 10px!important;
}
.empty{padding:22px!important;font-size:13.5px!important;color:var(--muted)!important}
.empty-box{border-radius:var(--radius-sm)!important;padding:22px!important;font-size:13.5px!important}

/* ---------------------------------------------------------
   8. TABEL (UMUM)
   Prioritas utama: keterbacaan.
   --------------------------------------------------------- */
.table-wrap{
  overflow:auto!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius-sm)!important;
  background:var(--surface)!important;
  box-shadow:none!important;
  scrollbar-width:thin;
  scrollbar-color:#a9bed2 #eef3f8;
  max-width:100%;
}
.table-wrap::-webkit-scrollbar{height:9px;width:9px}
.table-wrap::-webkit-scrollbar-track{background:#eef3f8;border-radius:99px}
.table-wrap::-webkit-scrollbar-thumb{background:#a9bed2;border-radius:99px}
.table-wrap::-webkit-scrollbar-thumb:hover{background:#8ba6bf}

table{
  width:100%!important;
  border-collapse:collapse!important;
  min-width:0;
  font-size:13px!important;
}
th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--surface-head)!important;
  color:#2b3f56!important;
  font-size:11.5px!important;
  font-weight:700!important;
  letter-spacing:.03em!important;
  text-transform:uppercase!important;
  text-align:left!important;
  padding:10px 12px!important;
  line-height:1.3!important;
  border-bottom:1px solid var(--line-strong)!important;
  vertical-align:middle!important;
}
td{
  font-size:13px!important;
  padding:10px 12px!important;
  line-height:1.45!important;
  color:var(--text)!important;
  border-bottom:1px solid #edf1f6!important;
  vertical-align:top!important;
}
tbody tr:nth-child(even){background:#fafcfe!important}
tbody tr:hover{background:var(--primary-soft)!important}
tbody tr:last-child td{border-bottom:0!important}
td b{color:var(--dark)!important}
.num,td.num,.money{
  text-align:right!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums;
}
.nowrap{white-space:nowrap!important}
.note-cell{
  white-space:pre-wrap!important;
  line-height:1.45!important;
  font-size:12.5px!important;
  color:var(--text-soft)!important;
}
.table-hint{
  display:none;
  margin:0 0 8px!important;
  padding:8px 11px!important;
  border-radius:var(--radius-sm)!important;
  background:var(--surface-soft)!important;
  border:1px solid var(--line)!important;
  color:var(--text-soft)!important;
  font-size:12.5px!important;
  font-weight:600!important;
}
/* Kolom aksi: tombol rapi, tidak memakan ruang berlebihan. */
td .btn-mini{margin:0 4px 4px 0!important;vertical-align:top}
td .btn-mini:last-child{margin-bottom:0!important}

/* ---------------------------------------------------------
   9. TABEL PERENCANAAN / PERSETUJUAN PERENCANAAN
   Tabel ini memiliki 12 kolom, lalu JavaScript (v126)
   menambahkan kolom "Paket" sehingga menjadi 13 kolom.
   Kedua kondisi diatur terpisah.

   Strategi:
   - >=1500px : lebar penuh, table-layout fixed, tanpa scroll.
   - 1100-1499px: lebar penuh, fixed, teks sedikit lebih rapat.
   - <1100px  : scroll horizontal di dalam container tabel saja.
   --------------------------------------------------------- */
.perencanaan-wrap,.planning-table-wrap-v81{
  width:100%!important;
  max-width:100%!important;
  border-radius:var(--radius-sm)!important;
}
.perencanaan-table,.planning-table-v126{
  width:100%!important;
  font-size:12.5px!important;
}
.perencanaan-table th,.planning-table-v126 th{vertical-align:middle!important}
.perencanaan-table td,.planning-table-v126 td{vertical-align:top!important}
.perencanaan-table .note-cell,.planning-table-v126 .note-cell{max-width:none!important}

@media (min-width:1100px){
  .perencanaan-wrap,.planning-table-wrap-v81{
    overflow-x:hidden!important;
    overflow-y:visible!important;
  }
  .perencanaan-table,.planning-table-v126{
    min-width:0!important;
    max-width:none!important;
    table-layout:fixed!important;
  }
  .perencanaan-table th,.perencanaan-table td,
  .planning-table-v126 th,.planning-table-v126 td{
    min-width:0!important;
    padding:9px 7px!important;
    font-size:12.2px!important;
    line-height:1.4!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
  .perencanaan-table th,.planning-table-v126 th{
    font-size:10.8px!important;
    line-height:1.25!important;
    padding:9px 7px!important;
    letter-spacing:.02em!important;
  }
  /* Kolom uang tetap satu baris supaya angka mudah dibaca. */
  .perencanaan-table td:nth-child(6),.perencanaan-table td:nth-child(7),
  .planning-table-v126 td:nth-child(6),.planning-table-v126 td:nth-child(7){
    white-space:nowrap!important;
    text-align:right!important;
    font-variant-numeric:tabular-nums;
  }
  .perencanaan-table th:nth-child(6),.perencanaan-table th:nth-child(7),
  .planning-table-v126 th:nth-child(6),.planning-table-v126 th:nth-child(7){text-align:right!important}
  .perencanaan-table td:nth-child(4),.planning-table-v126 td:nth-child(4){text-align:center!important}
  .perencanaan-table th:nth-child(4),.planning-table-v126 th:nth-child(4){text-align:center!important}

  /* 12 kolom - sebelum kolom Paket ditambahkan JavaScript. */
  .perencanaan-table:not(.planning-table-v126) th:nth-child(1),
  .perencanaan-table:not(.planning-table-v126) td:nth-child(1){width:9%!important}
  .perencanaan-table:not(.planning-table-v126) th:nth-child(2),
  .perencanaan-table:not(.planning-table-v126) td:nth-child(2){width:8%!important}
  .perencanaan-table:not(.planning-table-v126) th:nth-child(3),
  .perencanaan-table:not(.planning-table-v126) td:nth-child(3){width:15%!important}
  .perencanaan-table:not(.planning-table-v126) th:nth-child(4),
  .perencanaan-table:not(.planning-table-v126) td:nth-child(4){width:3.5%!important}
  .perencanaan-table:not(.planning-table-v126) th:nth-child(5),
  .perencanaan-table:not(.planning-table-v126) td:nth-child(5){width:5.5%!important}
  .perencanaan-table:not(.planning-table-v126) th:nth-child(6),
  .perencanaan-table:not(.planning-table-v126) td:nth-child(6){width:8.5%!important}
  .perencanaan-table:not(.planning-table-v126) th:nth-child(7),
  .perencanaan-table:not(.planning-table-v126) td:nth-child(7){width:8.5%!important}
  .perencanaan-table:not(.planning-table-v126) th:nth-child(8),
  .perencanaan-table:not(.planning-table-v126) td:nth-child(8){width:8%!important}
  .perencanaan-table:not(.planning-table-v126) th:nth-child(9),
  .perencanaan-table:not(.planning-table-v126) td:nth-child(9){width:7%!important}
  .perencanaan-table:not(.planning-table-v126) th:nth-child(10),
  .perencanaan-table:not(.planning-table-v126) td:nth-child(10){width:8%!important}
  .perencanaan-table:not(.planning-table-v126) th:nth-child(11),
  .perencanaan-table:not(.planning-table-v126) td:nth-child(11){width:9%!important}
  .perencanaan-table:not(.planning-table-v126) th:nth-child(12),
  .perencanaan-table:not(.planning-table-v126) td:nth-child(12){width:10%!important}

  /* 13 kolom - setelah kolom Paket ditambahkan JavaScript (v126). */
  .planning-table-v126 th:nth-child(1),.planning-table-v126 td:nth-child(1){width:8.5%!important}
  .planning-table-v126 th:nth-child(2),.planning-table-v126 td:nth-child(2){width:7.5%!important}
  .planning-table-v126 th:nth-child(3),.planning-table-v126 td:nth-child(3){width:14%!important}
  .planning-table-v126 th:nth-child(4),.planning-table-v126 td:nth-child(4){width:3.5%!important}
  .planning-table-v126 th:nth-child(5),.planning-table-v126 td:nth-child(5){width:5%!important}
  .planning-table-v126 th:nth-child(6),.planning-table-v126 td:nth-child(6){width:8%!important}
  .planning-table-v126 th:nth-child(7),.planning-table-v126 td:nth-child(7){width:8%!important}
  .planning-table-v126 th:nth-child(8),.planning-table-v126 td:nth-child(8){width:7.5%!important}
  .planning-table-v126 th:nth-child(9),.planning-table-v126 td:nth-child(9){width:6.5%!important}
  .planning-table-v126 th:nth-child(10),.planning-table-v126 td:nth-child(10){width:7.5%!important}
  .planning-table-v126 th:nth-child(11),.planning-table-v126 td:nth-child(11){width:8.5%!important}
  .planning-table-v126 th:nth-child(12),.planning-table-v126 td:nth-child(12){width:6.5%!important}
  .planning-table-v126 th:nth-child(13),.planning-table-v126 td:nth-child(13){width:9%!important}

  /* Tombol pada kolom Paket dan Aksi ditumpuk rapi selebar kolom. */
  .perencanaan-table:not(.planning-table-v126) td:nth-child(12) .btn-mini,
  .planning-table-v126 td:nth-child(12) .btn-mini,
  .planning-table-v126 td:nth-child(13) .btn-mini{
    display:flex!important;
    width:100%!important;
    margin:0 0 4px!important;
    padding:6px 6px!important;
    font-size:11px!important;
    line-height:1.2!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
  }
  .perencanaan-table .badge,.planning-table-v126 .badge{
    display:inline-block!important;
    white-space:normal!important;
    text-align:center!important;
    padding:4px 7px!important;
    font-size:10.5px!important;
    line-height:1.3!important;
  }
  .perencanaan-table .plan-id-link-v161,.planning-table-v126 .plan-id-link-v161{
    max-width:none!important;
    font-size:11.5px!important;
    line-height:1.35!important;
  }
  .table-hint{display:none!important}
}

/* Laptop 1366px: rapatkan sedikit, tetap tanpa scroll. */
@media (min-width:1100px) and (max-width:1499px){
  .perencanaan-table th,.perencanaan-table td,
  .planning-table-v126 th,.planning-table-v126 td{
    padding:8px 6px!important;
    font-size:11.8px!important;
  }
  .perencanaan-table th,.planning-table-v126 th{font-size:10.5px!important}
  .perencanaan-table:not(.planning-table-v126) td:nth-child(12) .btn-mini,
  .planning-table-v126 td:nth-child(12) .btn-mini,
  .planning-table-v126 td:nth-child(13) .btn-mini{font-size:10.2px!important;padding:5px 4px!important}
}

/* Di bawah 1100px tabel ini memang tidak dapat dipadatkan:
   gunakan scroll horizontal pada container tabel saja. */
@media (max-width:1099px){
  .perencanaan-wrap,.planning-table-wrap-v81{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .perencanaan-table,.planning-table-v126{
    table-layout:auto!important;
    min-width:1180px!important;
    width:1180px!important;
    font-size:13px!important;
  }
  .perencanaan-table th,.perencanaan-table td,
  .planning-table-v126 th,.planning-table-v126 td{
    padding:10px 10px!important;
    font-size:12.5px!important;
    white-space:normal!important;
  }
  .perencanaan-table td:nth-child(1),.planning-table-v126 td:nth-child(1){min-width:110px}
  .perencanaan-table td:nth-child(3),.planning-table-v126 td:nth-child(3){min-width:190px}
  .perencanaan-table td:nth-child(6),.perencanaan-table td:nth-child(7),
  .planning-table-v126 td:nth-child(6),.planning-table-v126 td:nth-child(7){white-space:nowrap!important;text-align:right!important}
  .table-hint{display:block}
}

/* ---------------------------------------------------------
   10. FORMULIR
   --------------------------------------------------------- */
.form-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px 14px!important;
}
.field{min-width:0}
.field.full,.span-2{grid-column:1/-1}
label{
  display:block;
  font-size:12.5px!important;
  font-weight:700!important;
  color:#2d3f55!important;
  margin:0 0 5px!important;
  line-height:1.35!important;
}
input,select,textarea{
  width:100%;
  min-height:var(--control-h)!important;
  padding:8px 11px!important;
  font-size:13.5px!important;
  font-family:inherit;
  color:var(--text);
  background:var(--surface)!important;
  border:1px solid var(--line-strong)!important;
  border-radius:var(--radius-sm)!important;
  outline:none;
  transition:border-color .14s ease,box-shadow .14s ease;
}
textarea{min-height:76px!important;resize:vertical;line-height:1.5}
select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#5c6b7f 50%),linear-gradient(135deg,#5c6b7f 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% + 1px),calc(100% - 11px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:30px!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary2)!important;
  box-shadow:0 0 0 3px rgba(14,165,198,.16)!important;
}
input:disabled,select:disabled,textarea:disabled,
input[readonly],textarea[readonly],.readonly-total{
  background:var(--surface-head)!important;
  color:var(--text-soft)!important;
  border-color:var(--line)!important;
  cursor:not-allowed;
}
.readonly-total{font-weight:700!important;color:var(--dark)!important}
.readonly-display{
  padding:8px 11px!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius-sm)!important;
  background:var(--surface-head)!important;
  font-weight:700!important;
  font-size:13.5px!important;
  color:var(--dark)!important;
}
input[type=file]{
  padding:6px 10px!important;
  font-size:12.5px!important;
  background:var(--surface-soft)!important;
}
input[type=file]::file-selector-button{
  margin-right:10px;
  padding:6px 12px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  background:var(--surface);
  color:var(--primary-strong);
  font-weight:700;
  font-size:12.5px;
  cursor:pointer;
}
input[type=date]{min-height:var(--control-h)!important}
input.is-invalid,select.is-invalid,textarea.is-invalid,
input:invalid:not(:placeholder-shown){border-color:var(--red)!important}
.msg{margin-top:10px!important;font-size:13px!important;color:var(--text-soft)!important}
.doc-upload-row{
  border:1px solid var(--line)!important;
  border-radius:var(--radius-sm)!important;
  background:var(--surface-soft)!important;
  padding:12px!important;
  gap:10px!important;
}

/* ---------------------------------------------------------
   11. TOMBOL
   Merah = aksi berbahaya, hijau = setujui/berhasil,
   oranye = peringatan/revisi, biru = aksi utama/netral.
   --------------------------------------------------------- */
button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:var(--control-h)!important;
  padding:8px 15px!important;
  border:1px solid transparent!important;
  border-radius:var(--radius-sm)!important;
  background:var(--primary)!important;
  color:#fff!important;
  font-family:inherit;
  font-size:13.5px!important;
  font-weight:700!important;
  letter-spacing:0!important;
  line-height:1.25!important;
  cursor:pointer;
  box-shadow:none!important;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
button:hover{background:var(--primary-strong)!important;transform:none!important;box-shadow:none!important}
button:active{transform:none!important}
button:disabled,button[disabled],.btn-disabled,.btn-disabled-v87{
  opacity:.55!important;
  cursor:not-allowed!important;
  transform:none!important;
}
button:disabled:hover{background:var(--primary)!important}

.btn-refresh{background:var(--primary)!important;color:#fff!important}
.btn-refresh:hover{background:var(--primary-strong)!important}

.btn-soft,.btn-toggle{
  background:var(--surface)!important;
  color:var(--primary-strong)!important;
  border:1px solid var(--line-strong)!important;
}
.btn-soft:hover,.btn-toggle:hover{background:var(--primary-soft)!important;border-color:var(--primary2)!important}

.btn-green{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important}
.btn-green:hover{background:#11603b!important}

.btn-orange,.btn-warning-v157{background:var(--orange)!important;color:#fff!important;border-color:var(--orange)!important}
.btn-orange:hover,.btn-warning-v157:hover{background:#96450a!important}

.btn-red,.btn-danger{background:var(--red)!important;color:#fff!important;border-color:var(--red)!important}
.btn-red:hover,.btn-danger:hover{background:#a12f23!important}

.btn-detail{
  background:var(--surface)!important;
  color:var(--primary-strong)!important;
  border:1px solid var(--line-strong)!important;
}
.btn-detail:hover{background:var(--primary-soft)!important}

.btn-mini{
  min-height:29px!important;
  padding:6px 10px!important;
  font-size:11.8px!important;
  font-weight:700!important;
  border-radius:6px!important;
  box-shadow:none!important;
}
.btn-wide{width:100%}
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pager button{min-height:30px!important;padding:5px 11px!important;font-size:12.5px!important}
.action-group,.admin-actions,.modal-actions{
  display:flex!important;
  gap:8px!important;
  align-items:center!important;
  flex-wrap:wrap!important;
}
.modal-actions{justify-content:flex-end!important;margin-top:14px!important}

/* Status memuat pada tombol tetap terlihat tanpa menggeser layout. */
button.is-loading-v148{position:relative;color:transparent!important}
button.is-loading-v148:after{
  content:"";
  position:absolute;
  width:15px;height:15px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  animation:spinV1868 .7s linear infinite;
}
@keyframes spinV1868{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------
   12. BADGE & STATUS
   Nama status tidak diubah; hanya ukuran dan warna diseragamkan.
   --------------------------------------------------------- */
.badge,.lock-badge,.audit-pill,.rab-chip-v1655{
  display:inline-block!important;
  padding:4px 9px!important;
  border-radius:999px!important;
  font-size:11.5px!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:.01em!important;
  white-space:normal!important;
  border:1px solid transparent;
  vertical-align:middle;
}
.badge-blue{background:#e4eff9!important;color:#0d4a7c!important;border-color:#c4dcf0!important}
.badge-green{background:var(--green-soft)!important;color:#116040!important;border-color:#bfe3cd!important}
.badge-red{background:var(--red-soft)!important;color:#98281c!important;border-color:#f3c9c4!important}
.badge-orange{background:var(--orange-soft)!important;color:#8a4008!important;border-color:#f0d2ac!important}
.badge-gray{background:#eef1f5!important;color:#42536a!important;border-color:#dde3ea!important}
.lock-badge{background:#eef1f5!important;color:#42536a!important;border-color:#dde3ea!important}
.progress-bar{height:7px!important;background:#e6edf4!important;border-radius:99px!important;overflow:hidden}
.progress-bar div{background:var(--primary)!important}
.locked-panel{
  border:1px solid #ecd8a8!important;
  background:#fdf9ef!important;
}

/* ---------------------------------------------------------
   13. MODAL
   --------------------------------------------------------- */
.modal-backdrop,.status-modal-backdrop{
  background:rgba(15,32,52,.52)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:18px!important;
  overflow:auto;
}
.modal-card,.status-modal-card{
  width:min(920px,94vw)!important;
  max-height:90vh!important;
  overflow:auto!important;
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius-lg)!important;
  padding:20px!important;
  box-shadow:0 12px 40px rgba(10,30,50,.22)!important;
}
.modal-head,.status-modal-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0 0 14px!important;
  padding-bottom:11px!important;
  border-bottom:1px solid var(--line)!important;
}
.modal-head h3,.status-modal-head h3{margin:0!important;font-size:16.5px!important;color:var(--dark)!important}
.modal-head p{margin:4px 0 0!important;font-size:12.5px!important;color:var(--muted)!important}
.modal-head .btn-soft{flex:0 0 auto}
.modal-wide,.honor-modal-v87,.honor-modal-v83,.rab-stage2-card-v186,.hps-modal-wide-v126{
  border-radius:var(--radius-lg)!important;
  padding:20px!important;
}
.honor-backdrop-v83,.honor-backdrop-v87{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(15,32,52,.52)!important}
body.modal-open-v122{overflow:hidden}

/* ---------------------------------------------------------
   14. DASHBOARD PUBLIK & LOGIN
   --------------------------------------------------------- */
.public-page{
  width:100%!important;
  max-width:1440px!important;
  margin:0 auto!important;
  padding:18px clamp(12px,2vw,26px) 40px!important;
}
.public-hero{
  padding:14px 20px!important;
  border-radius:var(--radius)!important;
  border-image:none!important;
  border-top:1px solid var(--line)!important;
  border-left:3px solid var(--primary)!important;
}
.public-brand{gap:13px!important}
.public-brand .logo-box{
  width:44px!important;height:44px!important;
  border-radius:10px!important;
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
  margin-bottom:0!important;
  padding:3px;
}
.public-brand h1{font-size:22px!important;margin:0!important;color:var(--dark)!important}
.public-brand p{font-size:12.5px!important;margin:2px 0 0!important;font-weight:600!important;color:var(--text-soft)!important}
.public-identity{margin-top:6px!important;gap:6px!important}
.public-identity span{font-size:11px!important;padding:3px 8px!important;background:var(--surface-head)!important;color:var(--text-soft)!important;border:1px solid var(--line)!important}
.btn-public-login{padding:8px 20px!important;border-radius:var(--radius-sm)!important;background:var(--primary)!important;font-size:13.5px!important}
.public-intro{
  margin-top:12px!important;
  padding:16px 20px!important;
  border-radius:var(--radius)!important;
}
.eyebrow{font-size:11px!important;letter-spacing:.1em!important;color:var(--primary2)!important;font-weight:700!important}
.public-intro h2{font-size:20px!important;margin:5px 0 3px!important;color:var(--dark)!important}
.public-intro p{font-size:13px!important;color:var(--muted)!important;max-width:820px!important}
.public-summary-grid{
  gap:12px!important;
  margin:12px 0!important;
}
.public-metric{
  min-height:0!important;
  padding:14px 16px!important;
  border-radius:var(--radius)!important;
  border-left:3px solid var(--primary)!important;
  display:flex;flex-direction:column;justify-content:center;
}
.public-metric small{font-size:11.5px!important;font-weight:700!important;color:var(--muted)!important}
.public-metric strong{font-size:21px!important;margin:6px 0 3px!important;line-height:1.2!important;letter-spacing:-.2px!important;color:var(--dark)!important;font-variant-numeric:tabular-nums}
.public-metric span{font-size:11.5px!important;color:var(--muted)!important}
.public-metric.green{border-left-color:var(--green)!important}
.public-metric.yellow{border-left-color:var(--orange)!important}
.public-metric.red{border-left-color:var(--red)!important}
.public-panel{padding:18px!important;border-radius:var(--radius)!important;margin-bottom:12px!important}
.public-panel h3{font-size:16px!important;margin:0 0 10px!important}
.public-chart-single-v1654 .public-panel{padding:18px!important}
.big-percent{font-size:28px!important;color:var(--dark)!important;font-variant-numeric:tabular-nums}
.public-progress-track{height:12px!important;background:#e6edf4!important;margin:10px 0!important}
.public-progress-track i{background:var(--primary)!important}
.public-progress-notes{font-size:12.5px!important;color:var(--muted)!important}
.public-table-v82{min-width:0!important;width:100%!important;table-layout:auto!important}
.public-table-v82 th,.public-table-v82 td{padding:10px 13px!important;white-space:normal!important;word-break:normal!important}
.public-table-v82 th{font-size:11.5px!important}
.public-table-v82 td{font-size:13px!important}
.public-table-v82 td:nth-child(n+2),.public-table-v82 th:nth-child(n+2){text-align:right!important;font-variant-numeric:tabular-nums}
.public-loading,.public-error{padding:24px!important;border-radius:var(--radius)!important;background:var(--surface)!important;border:1px solid var(--line)!important;font-size:13.5px!important}
.public-system-note-v84{font-size:12px!important;border-radius:var(--radius-sm)!important}

.login-page{min-height:100vh;display:grid;place-items:center;padding:22px}
.login-card{
  width:100%!important;
  max-width:380px!important;
  padding:26px!important;
  border-radius:var(--radius-lg)!important;
  text-align:left;
}
.login-card .logo-box{
  width:52px!important;height:52px!important;
  border-radius:12px!important;
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
  margin:0 auto 12px!important;
  padding:4px;
}
.login-card h1{font-size:24px!important;text-align:center;margin:0!important;color:var(--dark)!important}
.login-card p{font-size:12.5px!important;text-align:center;margin:5px 0 16px!important;font-weight:600!important;color:var(--muted)!important}
.login-card label{margin:12px 0 5px!important}
.login-card #loginBtn{width:100%;margin-top:16px}
.btn-back-public{width:100%;margin-top:8px!important}
.password-field-v148{position:relative}
.password-field-v148 input{padding-right:42px!important}
.password-toggle-v148{
  position:absolute;
  right:5px;top:50%;transform:translateY(-50%);
  min-height:0!important;
  width:30px;height:30px;
  padding:0!important;
  background:transparent!important;
  color:var(--muted)!important;
  border:0!important;
}
.password-toggle-v148:hover{background:var(--surface-head)!important;color:var(--primary)!important;transform:translateY(-50%)!important}
.login-card .msg{text-align:center}

/* ---------------------------------------------------------
   15. LOADING & EFEK
   Animasi disederhanakan: halus, cepat, tidak terus-menerus.
   --------------------------------------------------------- */
.loading-overlay{background:rgba(15,32,52,.42)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.loader-card{
  width:min(300px,88vw)!important;
  padding:24px 22px!important;
  border-radius:var(--radius-lg)!important;
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  box-shadow:0 12px 40px rgba(10,30,50,.20)!important;
}
.loader-card:before{display:none!important;content:none!important}
.loader-card:after{
  background:var(--surface)!important;
  border-radius:13px!important;
}
.loader-logo-stage{width:70px!important;height:70px!important;margin:0 auto 12px!important}
.loader-logo-wrap{
  width:52px!important;height:52px!important;
  border-radius:14px!important;
  background:var(--surface)!important;
  box-shadow:none!important;
  animation:none!important;
}
.loader-logo-wrap img{animation:none!important}
.loader-ring{border-width:2.5px!important;border-color:rgba(15,76,129,.14)!important;border-top-color:var(--primary2)!important;animation-duration:.9s!important}
.loader-ring-2{display:none!important}
.loader-card b{font-size:15px!important}
.loader-card small{font-size:12.5px!important}
.loading-progress-track{height:6px!important;background:#e6edf4!important;border-radius:99px}
.loading-progress-track i{background:var(--primary)!important}
.fade-up{animation:fadeUpV1868 .18s ease both!important}
@keyframes fadeUpV1868{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.collapse-body{animation:none!important}

/* Hover tidak boleh menggeser layout. */
.summary-card:hover,.panel:hover,.monitor-card:hover,.public-metric:hover,
button:hover,.btn-mini:hover,.card:hover{transform:none!important}

/* ---------------------------------------------------------
   16. RESPONSIVITAS
   --------------------------------------------------------- */
@media (max-width:1200px){
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  #appPage.app-page,.app-page{padding:12px 12px 30px!important}
  .topbar{flex-wrap:wrap!important;align-items:flex-start!important}
  .topbar-actions{width:100%;justify-content:flex-end}
  .panel,.premium-panel,section.panel,.public-panel{padding:15px!important}
  .panel h3,.premium-panel h3,section.panel>h3{font-size:16px!important}
  .public-hero,.public-intro{flex-direction:column!important;align-items:flex-start!important;gap:12px!important}
  .btn-public-login{width:100%}
  .modal-card,.status-modal-card{width:min(720px,95vw)!important}
}
@media (max-width:640px){
  #appPage.app-page,.app-page{padding:10px 10px 26px!important}
  .public-page{padding:12px 10px 30px!important}
  .topbar{padding:12px 14px!important;gap:10px!important}
  .topbar h2{font-size:17px!important}
  .topbar p{font-size:12px!important}
  .topbar-actions{gap:8px}
  .topbar-actions button{flex:1 1 0;min-width:0}
  .menu-nav{gap:6px!important;padding:6px!important}
  .menu-nav button{flex:1 1 auto;min-width:calc(50% - 3px);padding:8px 10px!important;font-size:12.5px!important}
  .form-grid{grid-template-columns:1fr}
  .panel,.premium-panel,section.panel,.public-panel{padding:14px!important;border-radius:10px!important}
  .panel-head,.panel-title-row{flex-direction:column!important;gap:8px!important}
  .panel-head .btn-toggle,.panel-title-row .btn-refresh{width:100%}
  .toolbar .field{min-width:100%;flex:1 1 100%}
  .modal-backdrop,.status-modal-backdrop{padding:10px!important;align-items:flex-start}
  .modal-card,.status-modal-card{width:100%!important;max-width:100%!important;max-height:92vh!important;padding:16px!important;border-radius:12px!important}
  .modal-actions{justify-content:stretch!important}
  .modal-actions>button{flex:1 1 auto}
  .public-brand h1{font-size:19px!important}
  .public-intro h2{font-size:18px!important}
  .login-card{padding:20px!important;max-width:100%!important}
  .table-footer{justify-content:flex-start!important}
  /* Cegah iOS memperbesar halaman saat fokus ke input. */
  input,select,textarea{font-size:16px!important}
}
@media (max-width:430px){
  .menu-nav button{min-width:100%}
  .summary-card b{font-size:18px!important}
}

/* ---------------------------------------------------------
   17. AKSESIBILITAS VISUAL
   --------------------------------------------------------- */
:focus-visible{
  outline:2px solid var(--primary2)!important;
  outline-offset:2px!important;
  border-radius:4px;
}
button:focus-visible,a:focus-visible{
  outline:2px solid var(--primary-strong)!important;
  outline-offset:2px!important;
}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none!important}
a{color:var(--primary)}
a:hover{color:var(--primary-strong)}
::selection{background:rgba(14,165,198,.22)}

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

@media print{
  .menu-nav,.topbar-actions,.btn-mini,.table-hint{display:none!important}
  .panel,.table-wrap{box-shadow:none!important;border:1px solid #ccc!important}
}

/* ---------------------------------------------------------
   18. PENGAMAN AKHIR
   Ditempatkan paling akhir supaya keadaan tersembunyi tidak
   pernah kalah oleh aturan tampilan mana pun di atas.
   --------------------------------------------------------- */
.hidden{display:none!important}
[hidden]{display:none!important}

/* Di layar sempit tabel umum tetap dapat digulir di dalam
   containernya, bukan menggeser seluruh halaman. */
@media (max-width:1099px){
  .table-wrap>table{min-width:820px}
  .table-wrap>table.public-table-v82,
  .table-wrap>table.meta,
  .table-wrap>table.simple-table{min-width:0}
}


/* =========================================================
   SIMPROV v186.9 - NUANSA SPORT (ANIMASI & AKSEN)
   ---------------------------------------------------------
   Lapisan tambahan di atas Sistem Tampilan Terpadu v186.8.
   Ruang lingkup tetap HANYA tampilan: warna aksen, animasi
   masuk, transisi antarmenu, dan efek interaksi.

   Tidak ada perubahan struktur, menu, role, alur, id elemen,
   nama fungsi, selector JavaScript, isi teks, data, maupun
   backend.

   Prinsip yang dijaga:
   - Seluruh animasi berjalan SEKALI saat elemen muncul,
     tidak ada perulangan tanpa henti kecuali dua elemen
     etalase (garis aksen header dan hero publik).
   - Durasi pendek (0,25-0,9 detik) supaya sistem tetap ringan.
   - Animasi hanya menggerakkan transform dan opacity supaya
     tidak memicu perhitungan ulang tata letak.
   - Hover tidak pernah menggeser posisi elemen lain.
   - Seluruhnya dimatikan oleh prefers-reduced-motion.

   Urutan bagian:
    19.1 Token warna sport
    19.2 Kumpulan keyframes
    19.3 Transisi antarhalaman dan antarmenu
    19.4 Header dan garis aksen menyapu
    19.5 Menu navigasi
    19.6 Kartu ringkasan
    19.7 Panel dan judul
    19.8 Tabel dan baris
    19.9 Tombol
    19.10 Badge dan status
    19.11 Bar realisasi dan progres
    19.12 Dashboard publik dan login
    19.13 Modal dan loading
    19.14 Pengaman gerak
   ========================================================= */

/* ---------------------------------------------------------
   19.1 TOKEN WARNA SPORT
   Empat warna logo SIMPROV dipakai sebagai pita aksen.
   --------------------------------------------------------- */
:root{
  --sport-1:#159447;   /* hijau  */
  --sport-2:#0f7dba;   /* biru   */
  --sport-3:#e49a00;   /* kuning */
  --sport-4:#d93b3b;   /* merah  */
  --sport-pita:linear-gradient(90deg,var(--sport-1),var(--sport-2) 34%,var(--sport-3) 67%,var(--sport-4));
  --sport-ease:cubic-bezier(.16,.84,.28,1);
  --sport-ease-out:cubic-bezier(.22,1,.36,1);
}

/* ---------------------------------------------------------
   19.2 KUMPULAN KEYFRAMES
   --------------------------------------------------------- */
@keyframes sportMasukHalaman{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:none}
}
@keyframes sportMasukPanel{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}
@keyframes sportMasukKartu{
  from{opacity:0;transform:translate3d(0,16px,0) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes sportMasukBaris{
  from{opacity:0;transform:translate3d(-10px,0,0)}
  to{opacity:1;transform:none}
}
@keyframes sportMasukKiri{
  from{opacity:0;transform:translate3d(-14px,0,0)}
  to{opacity:1;transform:none}
}
/* Pita aksen menyapu dari kiri ke kanan. */
@keyframes sportPitaSapu{
  0%{transform:translate3d(-100%,0,0)}
  100%{transform:translate3d(100%,0,0)}
}
/* Garis aksen tumbuh dari kiri, dipakai sekali saat muncul. */
@keyframes sportGarisTumbuh{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
/* Bar realisasi terisi bergerak. Lebar akhir tetap ditentukan
   nilai data; yang dianimasikan hanya skala visualnya. */
@keyframes sportBarIsi{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes sportKilauBar{
  0%{transform:translate3d(-120%,0,0)}
  55%,100%{transform:translate3d(320%,0,0)}
}
@keyframes sportGarisMenu{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes sportDenyutAktif{
  0%{box-shadow:0 0 0 0 rgba(15,125,186,.35)}
  100%{box-shadow:0 0 0 8px rgba(15,125,186,0)}
}

/* ---------------------------------------------------------
   19.3 TRANSISI ANTARHALAMAN DAN ANTARMENU
   Halaman publik, login, dan aplikasi memakai animasi masuk
   yang berjalan otomatis ketika berpindah dari display:none.
   --------------------------------------------------------- */
.public-page,.login-page,.app-page{
  animation:sportMasukHalaman .34s var(--sport-ease) both;
}

/* Setiap kali menu diganti, isi #contentArea dibuat ulang oleh
   JavaScript sehingga animasi berikut otomatis terputar lagi.
   Tidak ada logika baru yang ditambahkan. */
#contentArea>.panel,
#contentArea>section{
  animation:sportMasukPanel .3s var(--sport-ease) both;
}
#contentArea>*:nth-child(2){animation-delay:.05s}
#contentArea>*:nth-child(3){animation-delay:.1s}
#contentArea>*:nth-child(4){animation-delay:.14s}
#contentArea>*:nth-child(5){animation-delay:.17s}
#contentArea>*:nth-child(n+6){animation-delay:.2s}

/* Kartu ringkasan masuk bergantian seperti papan skor. */
#summaryCards>.summary-card{
  animation:sportMasukKartu .34s var(--sport-ease-out) both;
}
#summaryCards>.summary-card:nth-child(1){animation-delay:.02s}
#summaryCards>.summary-card:nth-child(2){animation-delay:.07s}
#summaryCards>.summary-card:nth-child(3){animation-delay:.12s}
#summaryCards>.summary-card:nth-child(4){animation-delay:.17s}
#summaryCards>.summary-card:nth-child(5){animation-delay:.22s}
#summaryCards>.summary-card:nth-child(n+6){animation-delay:.26s}

/* .fade-up lama diselaraskan supaya tidak bertabrakan arah gerak. */
.fade-up{animation:sportMasukPanel .28s var(--sport-ease) both!important}

/* ---------------------------------------------------------
   19.4 HEADER DAN GARIS AKSEN MENYAPU
   --------------------------------------------------------- */
.topbar{
  position:relative;
  overflow:hidden;
  border-left:0!important;
  border-top:3px solid transparent!important;
  background:var(--surface)!important;
  padding-top:13px!important;
}
/* Pita empat warna logo di sisi atas header. */
.topbar:after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:var(--sport-pita);
  transform-origin:left center;
  animation:sportGarisTumbuh .55s var(--sport-ease-out) both;
  pointer-events:none;
}
/* Kilau tipis yang menyapu di sepanjang pita. Hanya satu elemen
   di seluruh halaman yang memakai animasi berulang. */
.topbar-left:before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:22%;height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  animation:sportPitaSapu 4.5s linear infinite;
  animation-delay:.6s;
  pointer-events:none;
  z-index:1;
}
.topbar-left{position:static}
.topbar h2{
  text-transform:uppercase!important;
  letter-spacing:.6px!important;
  font-weight:800!important;
}
.topbar .logo-mini{
  transition:transform .25s var(--sport-ease-out);
}
.topbar .logo-mini:hover{transform:rotate(-4deg) scale(1.05)}

/* ---------------------------------------------------------
   19.5 MENU NAVIGASI
   Susunan, nama, jumlah, dan urutan menu tidak diubah.
   --------------------------------------------------------- */
.menu-nav button{
  position:relative;
  text-transform:uppercase!important;
  letter-spacing:.5px!important;
  font-weight:700!important;
  overflow:hidden;
  transition:background .16s var(--sport-ease),color .16s var(--sport-ease);
}
/* Garis aksen yang tumbuh dari kiri saat disentuh kursor. */
.menu-nav button:before{
  content:"";
  position:absolute;
  left:8px;right:8px;bottom:3px;
  height:2px;
  border-radius:2px;
  background:var(--sport-2);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s var(--sport-ease-out);
  pointer-events:none;
}
.menu-nav button:hover:before,
.menu-nav button:focus-visible:before{transform:scaleX(1)}
.menu-nav button.active{
  background:var(--primary)!important;
  animation:sportDenyutAktif .5s ease-out 1;
}
.menu-nav button.active:before{
  background:var(--sport-3);
  transform:scaleX(1);
  animation:sportGarisMenu .3s var(--sport-ease-out) both;
}
.menu-nav button:active{transform:translateY(1px)}

/* ---------------------------------------------------------
   19.6 KARTU RINGKASAN
   Gaya papan skor: label kapital, angka tebal, aksen tebal
   di sisi kiri yang tumbuh saat kartu muncul.
   --------------------------------------------------------- */
.summary-card{
  position:relative;
  overflow:hidden;
  border-left:0!important;
  padding-left:18px!important;
  transition:box-shadow .2s var(--sport-ease),border-color .2s var(--sport-ease);
}
.summary-card:before{
  content:""!important;
  display:block!important;
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:var(--sport-2);
  transform:scaleY(0);
  transform-origin:top center;
  animation:sportGarisTumbuh .4s var(--sport-ease-out) .12s both;
  animation-name:sportGarisKartu;
  pointer-events:none;
}
@keyframes sportGarisKartu{
  from{transform:scaleY(0)}
  to{transform:scaleY(1)}
}
#summaryCards>.summary-card:nth-child(4n+2):before{background:var(--sport-1)}
#summaryCards>.summary-card:nth-child(4n+3):before{background:var(--sport-3)}
#summaryCards>.summary-card:nth-child(4n+4):before{background:var(--sport-4)}
.summary-card span{
  text-transform:uppercase!important;
  letter-spacing:.7px!important;
}
.summary-card b{
  font-weight:800!important;
  letter-spacing:-.4px!important;
}
.summary-card:hover{
  box-shadow:var(--shadow-raised)!important;
  border-color:var(--line-strong)!important;
}

/* ---------------------------------------------------------
   19.7 PANEL DAN JUDUL
   --------------------------------------------------------- */
.panel h3,.premium-panel h3,section.panel>h3{
  text-transform:uppercase!important;
  letter-spacing:.5px!important;
  font-weight:800!important;
}
/* Garis aksen pendek di bawah judul panel, tumbuh sekali. */
.panel>h3:first-child:after,
.panel-head h3:after,
.panel-title-row h3:after{
  content:"";
  display:block;
  width:44px;
  height:3px;
  margin-top:6px;
  border-radius:2px;
  background:var(--sport-pita);
  transform:scaleX(0);
  transform-origin:left center;
  animation:sportGarisTumbuh .45s var(--sport-ease-out) .1s both;
}

/* ---------------------------------------------------------
   19.8 TABEL DAN BARIS
   Baris masuk bergantian seperti daftar klasemen. Penundaan
   dibatasi 12 baris pertama supaya tabel panjang tetap cepat.
   --------------------------------------------------------- */
.table-wrap{position:relative}
/* Garis aksen tipis di bawah kepala tabel. */
.table-wrap>table>thead>tr>th{
  box-shadow:inset 0 -2px 0 rgba(15,125,186,.28);
}
#contentArea tbody tr{
  animation:sportMasukBaris .26s var(--sport-ease) both;
  transition:background .14s var(--sport-ease),box-shadow .14s var(--sport-ease);
}
#contentArea tbody tr:nth-child(1){animation-delay:.01s}
#contentArea tbody tr:nth-child(2){animation-delay:.03s}
#contentArea tbody tr:nth-child(3){animation-delay:.05s}
#contentArea tbody tr:nth-child(4){animation-delay:.07s}
#contentArea tbody tr:nth-child(5){animation-delay:.09s}
#contentArea tbody tr:nth-child(6){animation-delay:.11s}
#contentArea tbody tr:nth-child(7){animation-delay:.13s}
#contentArea tbody tr:nth-child(8){animation-delay:.15s}
#contentArea tbody tr:nth-child(9){animation-delay:.17s}
#contentArea tbody tr:nth-child(10){animation-delay:.19s}
#contentArea tbody tr:nth-child(11){animation-delay:.21s}
#contentArea tbody tr:nth-child(n+12){animation-delay:.22s}
/* Sorotan baris memakai garis aksen di tepi kiri, bukan
   pergeseran posisi, supaya kolom tidak ikut bergerak. */
#contentArea tbody tr:hover{
  background:var(--primary-soft)!important;
  box-shadow:inset 3px 0 0 var(--sport-2);
}

/* ---------------------------------------------------------
   19.9 TOMBOL
   --------------------------------------------------------- */
button{
  position:relative;
  overflow:hidden;
  text-transform:uppercase;
  letter-spacing:.5px;
  transition:background .16s var(--sport-ease),color .16s var(--sport-ease),box-shadow .16s var(--sport-ease);
}
/* Kilau menyapu saat kursor berada di atas tombol. */
button:not(.is-loading-v148):after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:0;
  width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translate3d(-160%,0,0);
  transition:transform .45s var(--sport-ease-out);
  pointer-events:none;
}
button:not(.is-loading-v148):hover:after{transform:translate3d(320%,0,0)}
button:hover{box-shadow:0 3px 12px rgba(15,76,129,.22)!important}
button:active{transform:translateY(1px)}
button:disabled:after,button[disabled]:after{display:none}
button:disabled:hover,button[disabled]:hover{box-shadow:none!important}
/* Tombol mata pada kolom sandi tidak ikut diberi efek. */
.password-toggle-v148{text-transform:none;letter-spacing:0}
.password-toggle-v148:after{display:none}
.password-toggle-v148:active{transform:translateY(-50%)}
.btn-mini{letter-spacing:.3px}
.btn-mini:after{display:none}

/* ---------------------------------------------------------
   19.10 BADGE DAN STATUS
   Nama status tidak diubah, hanya tampilannya.
   --------------------------------------------------------- */
.badge{
  text-transform:uppercase!important;
  letter-spacing:.5px!important;
  font-weight:800!important;
}

/* ---------------------------------------------------------
   19.11 BAR REALISASI DAN PROGRES
   Lebar akhir tetap berasal dari data. Yang dianimasikan
   hanya skala horizontal, sehingga angka tidak terpengaruh.
   --------------------------------------------------------- */
.progress-bar,.public-progress-track,.composition-bar,.loading-progress-track{
  position:relative;
  overflow:hidden;
}
.progress-bar>div,
.public-progress-track>i,
.composition-bar>i,
.loading-progress-track>i{
  transform-origin:left center;
  animation:sportBarIsi .85s var(--sport-ease-out) both;
  will-change:transform;
}
/* Kilau yang meluncur satu kali di atas bar realisasi publik. */
.public-progress-track:after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:0;
  width:26%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:sportKilauBar 2.6s var(--sport-ease-out) .5s 2 both;
  pointer-events:none;
}
.public-progress-track>i{
  background:linear-gradient(90deg,var(--sport-2),var(--sport-1))!important;
}
.progress-bar>div{
  background:linear-gradient(90deg,var(--sport-2),var(--sport-1))!important;
}

/* ---------------------------------------------------------
   19.12 DASHBOARD PUBLIK DAN LOGIN
   --------------------------------------------------------- */
.public-hero{
  position:relative;
  overflow:hidden;
  border-left:0!important;
  border-top:3px solid transparent!important;
}
.public-hero:after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:var(--sport-pita);
  transform-origin:left center;
  animation:sportGarisTumbuh .6s var(--sport-ease-out) both;
  pointer-events:none;
}
.public-brand:before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:24%;height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  animation:sportPitaSapu 5s linear infinite;
  animation-delay:.7s;
  pointer-events:none;
  z-index:1;
}
.public-brand{position:static}
.public-brand h1{text-transform:uppercase!important;letter-spacing:1px!important;font-weight:800!important}
.public-intro h2{text-transform:uppercase!important;letter-spacing:.5px!important;font-weight:800!important}
.public-metric{
  position:relative;
  overflow:hidden;
  border-left:0!important;
  padding-left:19px!important;
  animation:sportMasukKartu .4s var(--sport-ease-out) both;
  transition:box-shadow .2s var(--sport-ease);
}
.public-metric:nth-child(2){animation-delay:.08s}
.public-metric:nth-child(3){animation-delay:.14s}
.public-metric:nth-child(4){animation-delay:.2s}
.public-metric:before{
  content:""!important;
  display:block!important;
  position:absolute;
  left:0;top:0;bottom:0;
  width:5px;
  background:var(--sport-2);
  transform:scaleY(0);
  transform-origin:top center;
  animation:sportGarisKartu .45s var(--sport-ease-out) .15s both;
  pointer-events:none;
}
.public-metric.green:before{background:var(--sport-1)}
.public-metric.yellow:before{background:var(--sport-3)}
.public-metric.red:before{background:var(--sport-4)}
.public-metric:hover{box-shadow:var(--shadow-raised)!important}
.public-metric small{text-transform:uppercase!important;letter-spacing:.7px!important}
.public-metric strong{font-weight:800!important;letter-spacing:-.5px!important}
.big-percent{font-weight:800!important;letter-spacing:-1px!important}
.public-panel h3{text-transform:uppercase!important;letter-spacing:.5px!important;font-weight:800!important}
.btn-public-login{letter-spacing:.8px!important}

.login-card{
  position:relative;
  overflow:hidden;
  animation:sportMasukKartu .38s var(--sport-ease-out) both;
}
/* [v186.11] Batang gradasi atas kartu login DIHAPUS.
   Pseudo-element .login-card:after sudah dipakai lencana
   "Secure Access - SIMPROV" (baris 147) yang menyetel padding, border-radius,
   dan margin-top. Nilai-nilai itu ikut terwarisi sehingga batang tampil tebal
   dan membulat. Aksen warna logo dikembalikan ke bentuk bingkai kartu
   (border-image) seperti tampilan yang diminta. */
.login-card h1{text-transform:uppercase!important;letter-spacing:1px!important;font-weight:800!important}
.login-card .logo-box{transition:transform .3s var(--sport-ease-out)}
.login-card:hover .logo-box{transform:scale(1.04)}

/* Elemen yang sedang dihitung naik dijaga lebarnya supaya
   tata letak tidak bergoyang saat jumlah digit bertambah. */
.summary-card b,
.public-metric strong,
.big-percent{
  font-variant-numeric:tabular-nums;
  display:block;
}

/* ---------------------------------------------------------
   19.13 MODAL DAN LOADING
   --------------------------------------------------------- */
.modal-card,.status-modal-card,.honor-modal-v83,.honor-modal-v87,.rab-stage2-card-v186{
  animation:sportMasukKartu .26s var(--sport-ease-out) both;
}
.modal-head,.status-modal-head{
  position:relative;
}
.modal-head:after,.status-modal-head:after{
  content:"";
  position:absolute;
  left:0;bottom:-1px;
  width:64px;height:2px;
  border-radius:2px;
  background:var(--sport-pita);
  transform:scaleX(0);
  transform-origin:left center;
  animation:sportGarisTumbuh .4s var(--sport-ease-out) .08s both;
}
.modal-head h3,.status-modal-head h3{
  text-transform:uppercase!important;
  letter-spacing:.5px!important;
  font-weight:800!important;
}
.loader-ring{
  border-top-color:var(--sport-2)!important;
  border-right-color:var(--sport-1)!important;
}
.loading-progress-track>i{
  background:linear-gradient(90deg,var(--sport-2),var(--sport-1))!important;
}

/* Panel dan toolbar sekunder ikut masuk dari kiri supaya
   perpindahan menu terasa satu kesatuan. */
#contentArea .filter-card,
#contentArea .table-hint{
  animation:sportMasukKiri .3s var(--sport-ease) .06s both;
}

/* ---------------------------------------------------------
   19.14 PENGAMAN GERAK
   Ditempatkan paling akhir. Bila pengguna meminta pengurangan
   gerak, seluruh animasi sport dimatikan dan elemen langsung
   tampil pada keadaan akhirnya.
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .public-page,.login-page,.app-page,
  #contentArea>.panel,#contentArea>section,
  #summaryCards>.summary-card,.public-metric,
  #contentArea tbody tr,.fade-up,
  .modal-card,.status-modal-card,
  #contentArea .filter-card,#contentArea .table-hint{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .topbar:after,.public-hero:after,
  .summary-card:before,.public-metric:before,
  .panel>h3:first-child:after,.panel-head h3:after,.panel-title-row h3:after,
  .modal-head:after,.status-modal-head:after,
  .menu-nav button.active:before{
    animation:none!important;
    transform:none!important;
  }
  .topbar-left:before,.public-brand:before,.public-progress-track:after{
    display:none!important;
  }
  .progress-bar>div,.public-progress-track>i,
  .composition-bar>i,.loading-progress-track>i{
    animation:none!important;
    transform:none!important;
  }
  button:after{display:none!important}
}

/* Saat mencetak, seluruh animasi dan aksen gerak dilepas. */
@media print{
  *,*:before,*:after{animation:none!important;transform:none!important}
  .topbar-left:before,.public-brand:before,.public-progress-track:after{display:none!important}
}


/* =========================================================
   SIMPROV v186.10 - LOGO BERGERAK, TRANSISI MENU, PIPELINE
   ---------------------------------------------------------
   Lanjutan v186.9. Ruang lingkup tetap HANYA tampilan.

   Isi:
    20.1 Keyframes tambahan
    20.2 Logo login
    20.3 Logo dashboard publik dan header
    20.4 Transisi perpindahan menu
    20.5 Pipeline tahapan Pencatatan
    20.6 Loading yang tidak mengganggu
   ========================================================= */

/* ---------------------------------------------------------
   20.1 KEYFRAMES TAMBAHAN
   --------------------------------------------------------- */
@keyframes sportLogoApung{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-5px,0)}
}
@keyframes sportLogoMasuk{
  from{opacity:0;transform:scale(.75) rotate(-12deg)}
  to{opacity:1;transform:none}
}
@keyframes sportAuraDenyut{
  0%,100%{opacity:.35;transform:scale(1)}
  50%{opacity:.6;transform:scale(1.08)}
}
@keyframes sportKontenMasuk{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.994)}
  to{opacity:1;transform:none}
}
@keyframes sportJalurTumbuh{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes sportTitikAktif{
  0%{box-shadow:0 0 0 0 rgba(15,125,186,.45)}
  70%{box-shadow:0 0 0 10px rgba(15,125,186,0)}
  100%{box-shadow:0 0 0 0 rgba(15,125,186,0)}
}

/* ---------------------------------------------------------
   20.2 LOGO LOGIN
   Kotak putih bergaris dilepas. Logo berdiri sendiri dengan
   cincin empat warna yang berputar pelan di belakangnya.
   --------------------------------------------------------- */
/* [v186.10.1] DIBATALKAN.
   Percobaan cincin conic-gradient pada logo login dihapus seluruhnya atas
   permintaan pengguna. Logo login kembali memakai aturan v186.8/v186.9:
   kotak putih 52 px dengan logo di dalamnya, tanpa cincin dan tanpa
   pseudo-element tambahan.

   Alasan dibatalkan: pseudo-element .logo-box:before/:after sudah dipakai
   aturan kilau logo versi lama (SIPORBO v14). Memakainya ulang menimbulkan
   pewarisan properti geometri yang sulit dijamin benar tanpa pengujian
   visual di peramban, dan lingkungan pengerjaan tidak memiliki peramban. */

/* ---------------------------------------------------------
   20.3 LOGO DASHBOARD PUBLIK DAN HEADER
   Bingkai kotak dilepas sesuai permintaan; logo tampil polos
   dengan gerak mengapung halus.
   --------------------------------------------------------- */
.public-brand .logo-box{
  width:58px!important;
  height:58px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  display:grid!important;
  place-items:center!important;
  position:relative;
  overflow:visible;
  animation:sportLogoMasuk .55s var(--sport-ease-out) both;
}
/* Aura tipis warna logo, hanya sebagai kedalaman. */
.public-brand .logo-box:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:-8px!important;
  right:-8px!important;
  bottom:-8px!important;
  left:-8px!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(15,125,186,.16),rgba(21,148,71,.08) 55%,transparent 72%)!important;
  transform:none!important;
  animation:sportAuraDenyut 4.5s ease-in-out infinite!important;
  z-index:0!important;
  pointer-events:none;
}
.public-brand .logo-box img{
  position:relative;
  z-index:1;
  width:54px!important;
  height:54px!important;
  object-fit:contain;
  animation:sportLogoApung 5s ease-in-out infinite;
  transition:transform .35s var(--sport-ease-out);
}
.public-brand .logo-box:hover img{transform:scale(1.12) rotate(-6deg)}

/* Logo kecil pada header aplikasi disamakan: tanpa kotak. */
.topbar .logo-mini,.logo-mini{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
}
.topbar .logo-mini img,.logo-mini img{
  width:38px!important;
  height:38px!important;
  object-fit:contain;
}
.topbar .logo-mini:hover{transform:rotate(-6deg) scale(1.08)}

/* ---------------------------------------------------------
   20.4 TRANSISI PERPINDAHAN MENU
   Gerak dibuat lebih halus dan lebih terasa satu kesatuan:
   naik sedikit, mengecil tipis, lalu mengunci pada posisinya.
   --------------------------------------------------------- */
#contentArea>.panel,
#contentArea>section,
.fade-up{
  animation:sportKontenMasuk .42s cubic-bezier(.22,1,.36,1) both!important;
}
#contentArea>*:nth-child(1){animation-delay:0s!important}
#contentArea>*:nth-child(2){animation-delay:.06s!important}
#contentArea>*:nth-child(3){animation-delay:.11s!important}
#contentArea>*:nth-child(4){animation-delay:.15s!important}
#contentArea>*:nth-child(5){animation-delay:.18s!important}
#contentArea>*:nth-child(n+6){animation-delay:.21s!important}

/* Bagian dalam panel ikut masuk sedikit lebih lambat supaya
   perpindahan terasa berlapis, bukan serentak. */
#contentArea .table-wrap,
#contentArea .form-grid,
#contentArea .filter-card{
  animation:sportKontenMasuk .4s cubic-bezier(.22,1,.36,1) .08s both;
}

/* ---------------------------------------------------------
   20.5 PIPELINE TAHAPAN PENCATATAN
   Dipakai menu Pencatatan Pengadaan dan Pencatatan Non
   Pengadaan. Markup tidak diubah sama sekali; hanya tata
   letaknya yang diubah dari deretan kotak menjadi jalur
   tahapan yang tersambung.
   --------------------------------------------------------- */
.pipeline-v103{
  display:flex!important;
  grid-template-columns:none!important;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:0!important;
  padding:18px 4px 10px!important;
  overflow-x:auto;
  scrollbar-width:none;
}
.pipeline-v103::-webkit-scrollbar{height:0;display:none}

.pipe-step-v103{
  flex:1 1 0!important;
  min-width:112px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:center!important;
  gap:9px!important;
  position:relative;
  padding:0 4px!important;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  color:#6b7c90!important;
}
/* Garis penyambung ke tahap sebelumnya. */
.pipe-step-v103:before{
  content:"";
  position:absolute;
  top:18px;
  right:50%;
  width:100%;
  height:3px;
  border-radius:3px;
  background:#e1e8f0;
  transform:scaleX(0);
  transform-origin:right center;
  animation:sportJalurTumbuh .5s var(--sport-ease-out) both;
  z-index:0;
}
.pipe-step-v103:first-child:before{display:none}
.pipe-step-v103:nth-child(2):before{animation-delay:.06s}
.pipe-step-v103:nth-child(3):before{animation-delay:.12s}
.pipe-step-v103:nth-child(4):before{animation-delay:.18s}
.pipe-step-v103:nth-child(5):before{animation-delay:.24s}
.pipe-step-v103:nth-child(6):before{animation-delay:.3s}
.pipe-step-v103.done:before{background:var(--sport-1)}
.pipe-step-v103.waiting:before{background:linear-gradient(90deg,var(--sport-1),var(--sport-2))}
.pipe-step-v103.repair:before{background:var(--sport-4)}

/* Lingkaran nomor tahap. */
.pipe-step-v103 span{
  position:relative;
  z-index:1;
  width:38px!important;
  height:38px!important;
  flex:0 0 auto;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:#fff!important;
  border:2px solid #dbe4ee;
  color:#8595a8!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1!important;
  transition:transform .2s var(--sport-ease-out);
}
.pipe-step-v103 b{
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.4!important;
  letter-spacing:.1px;
  max-width:150px;
  color:inherit;
}

/* Tahap selesai. */
.pipe-step-v103.done{color:#166b3a!important;background:transparent!important;border:0!important}
.pipe-step-v103.done span{
  background:var(--sport-1)!important;
  border-color:var(--sport-1);
  color:#fff!important;
}
/* Tahap yang sedang berjalan: lingkaran biru berdenyut sekali
   lalu tenang, ditambah tanda titik kecil di bawah label. */
.pipe-step-v103.waiting{color:#0b5f9d!important;background:transparent!important;border:0!important}
.pipe-step-v103.waiting span{
  background:var(--sport-2)!important;
  border-color:var(--sport-2);
  color:#fff!important;
  animation:sportTitikAktif 1.6s ease-out 3;
}
.pipe-step-v103.waiting b{font-weight:800!important}
/* Tahap yang perlu perbaikan. */
.pipe-step-v103.repair{color:#b51f1f!important;background:transparent!important;border:0!important}
.pipe-step-v103.repair span{
  background:var(--sport-4)!important;
  border-color:var(--sport-4);
  color:#fff!important;
}
.pipe-step-v103:hover span{transform:scale(1.08)}

/* Alas jalur supaya terbaca sebagai satu kesatuan. */
.compact-flow-v160 .pipeline-v103,
.panel>.pipeline-v103,
.premium-panel .pipeline-v103{
  background:linear-gradient(180deg,#fbfdff,#f5f9fc);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

@media(max-width:900px){
  .pipeline-v103{
    grid-template-columns:none!important;
    padding:16px 4px 8px!important;
  }
  .pipe-step-v103{min-width:132px!important}
  .pipe-step-v103 b{font-size:11.5px!important}
}

/* ---------------------------------------------------------
   20.6 LOADING YANG TIDAK MENGGANGGU
   Latar dibuat lebih ringan dan muncul dengan lembut, supaya
   proses cepat tidak terasa seperti layar yang terkunci.
   --------------------------------------------------------- */
.loading-overlay{
  background:rgba(15,32,52,.28)!important;
  animation:sportKontenMasukHalus .16s ease-out both;
}
@keyframes sportKontenMasukHalus{
  from{opacity:0}
  to{opacity:1}
}
.loader-card{
  animation:sportMasukKartu .2s var(--sport-ease-out) both;
  box-shadow:0 10px 34px rgba(10,30,50,.18)!important;
}
.loading-overlay.upload-mode-v135{background:rgba(15,32,52,.42)!important}

/* ---------------------------------------------------------
   PENGAMAN GERAK - v186.10
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .public-brand .logo-box,
  .public-brand .logo-box:before,
  .public-brand .logo-box img,
  .pipe-step-v103:before,
  .pipe-step-v103.waiting span,
  #contentArea>.panel,#contentArea>section,.fade-up,
  #contentArea .table-wrap,#contentArea .form-grid,#contentArea .filter-card,
  .loading-overlay,.loader-card{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .pipe-step-v103:before{transform:scaleX(1)!important}
  .public-brand .logo-box:before{opacity:.35!important}
}

/* =========================================================
   SIMPROV v186.11 - PERBAIKAN LOGIN, TOMBOL BERKAS, TRANSISI
   ---------------------------------------------------------
    21.1 Bingkai warna logo pada kartu login
    21.2 Tombol "Choose file" agar terbaca
    21.3 Transisi dorong mendatar antarmenu
   ========================================================= */

/* ---------------------------------------------------------
   21.1 BINGKAI WARNA LOGO PADA KARTU LOGIN
   Aksen warna dikembalikan ke bentuk bingkai kartu seperti
   tampilan yang diminta: garis tebal di sisi atas dan garis
   tipis mengelilingi sisi lainnya.

   Bingkai memakai border-image, sehingga sudut harus siku.
   Aturan border 1px seragam dari v186.8 ditimpa khusus untuk
   kartu login saja; panel lain tidak terpengaruh.
   --------------------------------------------------------- */
.login-card{
  border-style:solid!important;
  border-color:transparent!important;
  border-width:4px 1px 1px!important;
  border-image:linear-gradient(
    90deg,
    var(--sport-2),
    var(--sport-3) 34%,
    var(--sport-4) 67%,
    var(--sport-1)) 1!important;
  border-radius:0!important;
  overflow:visible!important;
}
/* Lencana "Secure Access - SIMPROV" di bagian bawah kartu
   dikembalikan ke bentuk semula, tidak lagi ditumpangi
   aturan batang gradasi. */
.login-card:after{
  position:static!important;
  height:auto!important;
  width:auto!important;
  transform:none!important;
  animation:none!important;
}

/* ---------------------------------------------------------
   21.2 TOMBOL "CHOOSE FILE" AGAR TERBACA
   Aturan lama menyetel latar biru tua dengan !important,
   sedangkan warna teks diambil dari aturan yang lebih baru
   sehingga tulisan biru tua berada di atas latar biru tua.
   Seluruh properti ditulis lengkap dan dipaksa agar tidak
   ada lagi yang tercampur antarversi.
   --------------------------------------------------------- */
input[type="file"]::file-selector-button,
input[type=file]::file-selector-button{
  background:#0f4c81!important;
  background-image:none!important;
  color:#ffffff!important;
  border:0!important;
  border-radius:6px!important;
  padding:7px 13px!important;
  margin:0 11px 0 0!important;
  font-family:inherit!important;
  font-size:12.5px!important;
  font-weight:700!important;
  letter-spacing:.2px!important;
  line-height:1.2!important;
  text-shadow:none!important;
  box-shadow:none!important;
  cursor:pointer!important;
  transition:background .15s ease!important;
}
input[type="file"]::file-selector-button:hover,
input[type=file]::file-selector-button:hover{
  background:#0b3a64!important;
  filter:none!important;
  transform:none!important;
}
/* Nama berkas di sebelah tombol dibuat cukup kontras. */
input[type=file],input[type="file"]{
  color:#33475b!important;
  background:#ffffff!important;
  border-style:solid!important;
  border-width:1px!important;
  border-color:var(--line-strong)!important;
}

/* ---------------------------------------------------------
   21.3 TRANSISI DORONG MENDATAR ANTARMENU
   Isi lama bergeser sedikit ke kiri lalu memudar, isi baru
   masuk dari kanan. Gerakan sengaja pendek dan tertahan,
   bukan seperti korsel atau aplikasi ponsel.
   --------------------------------------------------------- */
@keyframes sportDorongMasuk{
  from{opacity:0;transform:translate3d(20px,0,0)}
  to{opacity:1;transform:none}
}

/* Isi lama saat menu ditekan. */
#contentArea.pindah-keluar-v18611{
  transform:translate3d(-12px,0,0);
  opacity:.32;
  transition:transform .12s ease-in,opacity .12s ease-in;
  pointer-events:none;
}
#contentArea{
  transition:transform .12s ease-out,opacity .12s ease-out;
  will-change:transform,opacity;
}

/* Isi baru masuk dari sisi berlawanan. */
#contentArea>.panel,
#contentArea>section,
#contentArea .fade-up{
  animation:sportDorongMasuk .24s cubic-bezier(.22,1,.36,1) both!important;
}
/* Kartu login memakai kelas "fade-up" juga, sehingga animasi dorong
   antarmenu harus dibatasi pada #contentArea saja. Kartu login tetap
   memakai animasi masuknya sendiri. */
.login-card.fade-up{
  animation:sportMasukKartu .38s var(--sport-ease-out) both!important;
}
#contentArea>*:nth-child(1){animation-delay:0s!important}
#contentArea>*:nth-child(2){animation-delay:.03s!important}
#contentArea>*:nth-child(3){animation-delay:.06s!important}
#contentArea>*:nth-child(4){animation-delay:.08s!important}
#contentArea>*:nth-child(5){animation-delay:.09s!important}
#contentArea>*:nth-child(n+6){animation-delay:.1s!important}

/* Isi dalam panel tidak ikut bergeser supaya tidak berlebihan. */
#contentArea .table-wrap,
#contentArea .form-grid,
#contentArea .filter-card{
  animation:none!important;
}

@media (prefers-reduced-motion:reduce){
  #contentArea,
  #contentArea.pindah-keluar-v18611{
    transition:none!important;
    transform:none!important;
    opacity:1!important;
  }
  #contentArea>.panel,#contentArea>section,#contentArea .fade-up,.login-card.fade-up{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}


/* =========================================================
   SIMPROV v186.12 - SISTEM MOTION KELAS ATAS
   ---------------------------------------------------------
   Lapisan presentasi murni. Tidak menyentuh business logic,
   API, backend, database, role, menu, alur, status, validasi,
   perhitungan, id elemen, selector, atau nama fungsi.

    22.1  Token motion
    22.2  Penertiban efek lama yang berlebihan
    22.3  Transisi halaman sinematik antarmenu
    22.4  Layering dan stagger pendek
    22.5  Content reveal
    22.6  Sistem kedalaman (depth)
    22.7  Tombol premium
    22.8  Indikator menu aktif yang bergeser
    22.9  Hover permukaan
    22.10 Modal
    22.11 Tabel
    22.12 Badge dan status
    22.13 Angka KPI
    22.14 Fokus form dan toolbar
    22.15 Expand / collapse
    22.16 Empty, error, success
    22.17 Loading dan skeleton
    22.18 Hierarki motion dan pengaman
   ========================================================= */

/* ---------------------------------------------------------
   22.1 TOKEN MOTION
   Satu sistem timing untuk seluruh aplikasi.
   --------------------------------------------------------- */
:root{
  --motion-fast:170ms;
  --motion-base:280ms;
  --motion-slow:340ms;
  --motion-micro:120ms;

  /* Responsif di awal, melambat mulus, tanpa overshoot. */
  --ease-standard:cubic-bezier(.2,.75,.25,1);
  --ease-enter:cubic-bezier(.15,.85,.3,1);
  --ease-exit:cubic-bezier(.4,.05,.75,.2);

  --depth-1:0 1px 2px rgba(16,42,67,.05);
  --depth-2:0 1px 2px rgba(16,42,67,.05), 0 3px 10px rgba(16,42,67,.06);
  --depth-3:0 2px 4px rgba(16,42,67,.06), 0 10px 26px rgba(16,42,67,.10);
}

/* ---------------------------------------------------------
   22.2 PENERTIBAN EFEK LAMA YANG BERLEBIHAN
   Arah desain berubah menjadi enterprise premium, sehingga
   efek berulang tanpa henti dan kilau menyapu dilepas.
   --------------------------------------------------------- */
/* Kilau menyapu pada tombol dilepas. */
button:after,
button:not(.is-loading-v148):after{
  display:none!important;
  content:none!important;
}
button.is-loading-v148:after{
  display:block!important;
  content:""!important;
}
/* Pita kilau berulang pada header dan hero publik dilepas. */
.topbar-left:before,
.public-brand:before{
  display:none!important;
  content:none!important;
  animation:none!important;
}
/* Logo tidak lagi mengapung terus-menerus. */
.public-brand .logo-box img,
.public-brand .logo-box:before{
  animation:none!important;
}
.public-brand .logo-box:before{opacity:.5}
/* Denyut pada menu aktif digantikan indikator yang bergeser. */
.menu-nav button.active{animation:none!important}
.menu-nav button.active:before{display:none!important}
.menu-nav button:before{display:none!important}
/* Baris tabel tidak lagi masuk satu per satu; gerak dipindahkan
   ke tingkat panel supaya tabel besar tetap cepat. */
#contentArea tbody tr{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
}

/* ---------------------------------------------------------
   22.3 TRANSISI HALAMAN SINEMATIK ANTARMENU
   Arah gerak mengikuti urutan menu: maju bergeser ke kiri,
   mundur bergeser ke kanan, sehingga navigasi terasa spasial.
   --------------------------------------------------------- */
#contentArea{
  transition:
    transform var(--motion-fast) var(--ease-exit),
    opacity var(--motion-fast) var(--ease-exit),
    filter var(--motion-fast) var(--ease-exit);
}
#contentArea.pindah-keluar-v18611{
  opacity:0;
  filter:blur(2px);
  pointer-events:none;
}
#contentArea.pindah-keluar-v18611.arah-maju-v18612{
  transform:translate3d(-22px,0,0) scale(.995);
}
#contentArea.pindah-keluar-v18611.arah-mundur-v18612{
  transform:translate3d(22px,0,0) scale(.995);
}

@keyframes masukMajuV18612{
  from{opacity:0;transform:translate3d(26px,0,0) scale(.995);filter:blur(2px)}
  60%{filter:blur(0)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes masukMundurV18612{
  from{opacity:0;transform:translate3d(-26px,0,0) scale(.995);filter:blur(2px)}
  60%{filter:blur(0)}
  to{opacity:1;transform:none;filter:blur(0)}
}

#contentArea.masuk-v18612>.panel,
#contentArea.masuk-v18612>section,
#contentArea.masuk-v18612>.fade-up{
  animation:masukMajuV18612 var(--motion-base) var(--ease-enter) both!important;
  will-change:transform,opacity;
}
#contentArea.masuk-v18612.arah-mundur-v18612>.panel,
#contentArea.masuk-v18612.arah-mundur-v18612>section,
#contentArea.masuk-v18612.arah-mundur-v18612>.fade-up{
  animation-name:masukMundurV18612!important;
}
/* Setelah animasi selesai, will-change dilepas oleh JavaScript. */

/* ---------------------------------------------------------
   22.4 LAYERING DAN STAGGER PENDEK
   Stagger sengaja hanya 0 / 30 / 60 ms supaya menimbulkan
   kedalaman tanpa membuat pengguna menunggu.
   --------------------------------------------------------- */
#contentArea.masuk-v18612>*:nth-child(1){animation-delay:0ms!important}
#contentArea.masuk-v18612>*:nth-child(2){animation-delay:30ms!important}
#contentArea.masuk-v18612>*:nth-child(3){animation-delay:60ms!important}
#contentArea.masuk-v18612>*:nth-child(n+4){animation-delay:75ms!important}

/* Judul halaman sedikit lebih cepat daripada isinya. */
@keyframes judulMasukV18612{
  from{opacity:0;transform:translate3d(8px,0,0)}
  to{opacity:1;transform:none}
}
@keyframes judulMasukMundurV18612{
  from{opacity:0;transform:translate3d(-8px,0,0)}
  to{opacity:1;transform:none}
}
#contentArea.masuk-v18612 .panel>h3:first-child,
#contentArea.masuk-v18612 .panel-head,
#contentArea.masuk-v18612 .panel-title-row{
  animation:judulMasukV18612 var(--motion-fast) var(--ease-enter) both;
}
#contentArea.masuk-v18612.arah-mundur-v18612 .panel>h3:first-child,
#contentArea.masuk-v18612.arah-mundur-v18612 .panel-head,
#contentArea.masuk-v18612.arah-mundur-v18612 .panel-title-row{
  animation-name:judulMasukMundurV18612;
}

/* Toolbar/filter menyusul 30 ms, isi/tabel 60 ms. */
@keyframes isiMasukV18612{
  from{opacity:0;transform:translate3d(0,6px,0)}
  to{opacity:1;transform:none}
}
#contentArea.masuk-v18612 .filter-card,
#contentArea.masuk-v18612 .toolbar{
  animation:isiMasukV18612 var(--motion-fast) var(--ease-enter) 30ms both;
}
#contentArea.masuk-v18612 .table-wrap,
#contentArea.masuk-v18612 .summary-grid{
  animation:isiMasukV18612 var(--motion-base) var(--ease-enter) 60ms both;
}

/* ---------------------------------------------------------
   22.5 CONTENT REVEAL
   Hanya pada panel utama, judul, modal, dan area ringkasan.
   Tidak pada paragraf atau sel tabel.
   --------------------------------------------------------- */
@keyframes revealPanelV18612{
  from{opacity:0;transform:translate3d(0,5px,0);clip-path:inset(0 0 8% 0)}
  to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}
.panel.reveal-v18612,
.premium-panel.reveal-v18612{
  animation:revealPanelV18612 var(--motion-base) var(--ease-enter) both;
}

/* ---------------------------------------------------------
   22.6 SISTEM KEDALAMAN (DEPTH)
   Perubahan halus: border sedikit lebih jelas, bayangan naik
   satu tingkat, elemen naik 1 px. Bukan kartu mengambang.
   --------------------------------------------------------- */
.panel,.premium-panel,.summary-card,.public-metric,.public-panel{
  box-shadow:var(--depth-1)!important;
  transition:
    box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.summary-card:hover,
.public-metric:hover{
  box-shadow:var(--depth-2)!important;
  border-color:var(--line-strong)!important;
  transform:translate3d(0,-1px,0)!important;
}
.summary-card:active,
.public-metric:active{
  box-shadow:var(--depth-1)!important;
  transform:none!important;
}
/* Panel besar tidak ikut naik supaya halaman tidak bergoyang. */
.panel:hover,.premium-panel:hover{
  box-shadow:var(--depth-2)!important;
  transform:none!important;
}

/* ---------------------------------------------------------
   22.7 TOMBOL PREMIUM
   Sorotan dalam yang tipis, perpindahan warna yang mulus,
   dan kedalaman saat ditekan.
   --------------------------------------------------------- */
button{
  transition:
    background-color var(--motion-micro) var(--ease-standard),
    border-color var(--motion-micro) var(--ease-standard),
    color var(--motion-micro) var(--ease-standard),
    box-shadow var(--motion-micro) var(--ease-standard),
    transform var(--motion-micro) var(--ease-standard)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;
}
button:hover{
  transform:translate3d(0,-1px,0)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    var(--depth-2)!important;
}
button:active{
  transform:translate3d(0,1px,0)!important;
  box-shadow:inset 0 2px 4px rgba(9,32,56,.22)!important;
  transition-duration:60ms!important;
}
button:disabled,button[disabled]{
  transform:none!important;
  box-shadow:none!important;
}
button:disabled:hover,button[disabled]:hover{
  transform:none!important;
  box-shadow:none!important;
}
/* Tombol sekunder: sorotan permukaan, bukan bayangan tebal. */
.btn-soft,.btn-toggle,.btn-detail{
  box-shadow:none!important;
}
.btn-soft:hover,.btn-toggle:hover,.btn-detail:hover{
  box-shadow:var(--depth-2)!important;
  border-color:var(--primary2)!important;
}
/* Tombol kecil di dalam tabel: gerak lebih tertahan. */
.btn-mini{box-shadow:none!important}
.btn-mini:hover{
  transform:translate3d(0,-1px,0)!important;
  box-shadow:var(--depth-1)!important;
}
.btn-mini:active{transform:translate3d(0,1px,0)!important}
/* Tombol mata sandi tidak boleh bergeser dari posisinya. */
.password-toggle-v148:hover,.password-toggle-v148:active{
  transform:translateY(-50%)!important;
  box-shadow:none!important;
}
/* Putaran singkat pada tombol Refresh, hanya saat ditekan. */
@keyframes putarSekaliV18612{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
button.sedang-refresh-v18612{
  position:relative;
}
button.sedang-refresh-v18612:before{
  content:"";
  display:inline-block;
  width:11px;height:11px;
  margin-right:7px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  animation:putarSekaliV18612 .6s linear 1;
  vertical-align:-1px;
}

/* ---------------------------------------------------------
   22.8 INDIKATOR MENU AKTIF YANG BERGESER
   Elemen indikator ditambahkan JavaScript sebagai <span>,
   bukan <button>, sehingga seluruh kueri "#menuNav button"
   yang sudah ada tidak terpengaruh.
   --------------------------------------------------------- */
.menu-nav{position:relative}
.menu-indikator-v18612{
  position:absolute;
  top:0;left:0;
  width:0;height:0;
  border-radius:var(--radius-sm);
  background:var(--primary);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  opacity:0;
  pointer-events:none;
  z-index:0;
  transition:
    transform 240ms var(--ease-standard),
    width 240ms var(--ease-standard),
    height 240ms var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}
.menu-indikator-v18612.tampil-v18612{opacity:1}
/* Tombol berada di atas indikator; latar tombol aktif dilepas
   supaya warna datang dari indikator yang bergeser. */
.menu-nav button{position:relative;z-index:1;background:transparent!important}
.menu-nav button.active{
  background:transparent!important;
  color:#fff!important;
  border-color:transparent!important;
}
.menu-nav button:hover:not(.active){
  background:var(--primary-soft)!important;
  color:var(--primary-strong)!important;
}
/* Bila JavaScript indikator tidak berjalan, menu aktif tetap
   terlihat lewat latar cadangan berikut. */
.menu-nav:not(.punya-indikator-v18612) button.active{
  background:var(--primary)!important;
}

/* ---------------------------------------------------------
   22.9 HOVER PERMUKAAN
   Pencahayaan permukaan yang nyaris tidak terlihat.
   --------------------------------------------------------- */
.menu-nav button{
  transition:
    background-color var(--motion-micro) var(--ease-standard),
    color var(--motion-micro) var(--ease-standard)!important;
}
.doc-upload-row,.filter-card{
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}
.doc-upload-row:hover{
  border-color:var(--line-strong)!important;
  box-shadow:var(--depth-1);
}
a{transition:color var(--motion-micro) var(--ease-standard)}

/* ---------------------------------------------------------
   22.10 MODAL
   Muncul ke lapisan depan, menutup lebih cepat daripada
   membuka.
   --------------------------------------------------------- */
@keyframes backdropMasukV18612{
  from{opacity:0}
  to{opacity:1}
}
@keyframes modalMasukV18612{
  from{opacity:0;transform:translate3d(0,8px,0) scale(.975);filter:blur(2px)}
  55%{filter:blur(0)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.modal-backdrop:not(.hidden),
.status-modal-backdrop:not(.hidden),
.honor-backdrop-v83:not(.hidden),
.honor-backdrop-v87:not(.hidden){
  animation:backdropMasukV18612 var(--motion-fast) var(--ease-standard) both;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
}
.modal-card,.status-modal-card,
.honor-modal-v83,.honor-modal-v87,
.rab-stage2-card-v186,.hps-modal-wide-v126{
  animation:modalMasukV18612 var(--motion-base) var(--ease-enter) both!important;
  will-change:transform,opacity;
}
/* Rasa kesinambungan: modal yang dibuka dari sebuah baris
   tabel muncul dari arah konteksnya. */
.modal-card.dari-baris-v18612,
.status-modal-card.dari-baris-v18612{
  transform-origin:center top;
}

/* ---------------------------------------------------------
   22.11 TABEL
   Interaksi tetap profesional. Baris tidak beterbangan.
   --------------------------------------------------------- */
#contentArea tbody tr{
  transition:
    background-color var(--motion-micro) var(--ease-standard),
    box-shadow var(--motion-micro) var(--ease-standard)!important;
}
#contentArea tbody tr:hover{
  background:var(--primary-soft)!important;
  box-shadow:inset 3px 0 0 var(--primary2)!important;
}
#contentArea tbody tr.terpilih-v18612{
  background:#e8f2fb!important;
  box-shadow:inset 3px 0 0 var(--primary)!important;
}
/* Sorotan sementara ketika data baris baru saja berubah. */
@keyframes sorotBarisV18612{
  0%{background-color:rgba(21,148,71,.16)}
  70%{background-color:rgba(21,148,71,.10)}
  100%{background-color:transparent}
}
#contentArea tbody tr.baris-berubah-v18612{
  animation:sorotBarisV18612 800ms var(--ease-standard) 1 both;
}
/* Tombol aksi baru terlihat penuh ketika baris disentuh. */
#contentArea tbody tr .btn-mini{
  transition:
    opacity var(--motion-micro) var(--ease-standard),
    transform var(--motion-micro) var(--ease-standard),
    background-color var(--motion-micro) var(--ease-standard)!important;
  opacity:.88;
}
#contentArea tbody tr:hover .btn-mini{opacity:1}

/* ---------------------------------------------------------
   22.12 BADGE DAN STATUS
   Pergantian status memakai crossfade sangat pendek.
   --------------------------------------------------------- */
@keyframes statusGantiV18612{
  from{opacity:0;transform:scale(.97)}
  to{opacity:1;transform:none}
}
.badge.status-ganti-v18612{
  animation:statusGantiV18612 var(--motion-fast) var(--ease-enter) both;
}
.badge{
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

/* ---------------------------------------------------------
   22.13 ANGKA KPI
   Pergeseran mikro dan crossfade, bukan penghitung panjang.
   --------------------------------------------------------- */
@keyframes angkaGantiV18612{
  from{opacity:0;transform:translate3d(0,3px,0)}
  to{opacity:1;transform:none}
}
.summary-card b.angka-ganti-v18612,
.public-metric strong.angka-ganti-v18612,
.big-percent.angka-ganti-v18612{
  animation:angkaGantiV18612 var(--motion-fast) var(--ease-enter) both;
}

/* ---------------------------------------------------------
   22.14 FOKUS FORM DAN TOOLBAR
   --------------------------------------------------------- */
input,select,textarea{
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard)!important;
}
input:hover:not(:disabled):not([readonly]),
select:hover:not(:disabled),
textarea:hover:not(:disabled):not([readonly]){
  border-color:#aebfd0!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary2)!important;
  background:#fff!important;
  box-shadow:
    0 0 0 3px rgba(14,165,198,.15),
    inset 0 1px 2px rgba(16,42,67,.05)!important;
}
.pager button{transition:
  background-color var(--motion-micro) var(--ease-standard),
  transform var(--motion-micro) var(--ease-standard)!important}

/* ---------------------------------------------------------
   22.15 EXPAND / COLLAPSE
   Memakai transform dan opacity, bukan animasi tinggi.
   --------------------------------------------------------- */
@keyframes bukaBagianV18612{
  from{opacity:0;transform:translate3d(0,-4px,0)}
  to{opacity:1;transform:none}
}
.collapse-body:not(.hidden),
.doc-list:not(.hidden),
.non-card-body-v83:not(.hidden){
  animation:bukaBagianV18612 var(--motion-fast) var(--ease-enter) both;
}

/* ---------------------------------------------------------
   22.16 EMPTY, ERROR, SUCCESS
   --------------------------------------------------------- */
@keyframes lembutMasukV18612{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:none}
}
.empty,.empty-box,.public-error{
  animation:lembutMasukV18612 var(--motion-base) var(--ease-enter) both;
}
.msg{transition:color var(--motion-fast) var(--ease-standard)}

/* ---------------------------------------------------------
   22.17 LOADING DAN SKELETON
   Kelas skeleton disediakan sebagai utilitas. Shimmer sengaja
   redup dan lambat.
   --------------------------------------------------------- */
@keyframes shimmerV18612{
  from{background-position:-180% 0}
  to{background-position:180% 0}
}
.skeleton-v18612{
  background:linear-gradient(90deg,#eef2f7 25%,#f6f9fc 50%,#eef2f7 75%);
  background-size:220% 100%;
  animation:shimmerV18612 1.6s linear infinite;
  border-radius:6px;
  color:transparent!important;
  user-select:none;
}
/* Isi yang sedang dimuat diredupkan tipis, tanpa blur, supaya
   tetap terbaca dan tidak mengganggu pengetikan. */
#contentArea.sedang-memuat-v18612{
  opacity:.72;
  transition:opacity var(--motion-fast) var(--ease-standard);
}
.loading-overlay{
  animation:backdropMasukV18612 var(--motion-fast) var(--ease-standard) both;
}
.loader-card{
  animation:modalMasukV18612 var(--motion-fast) var(--ease-enter) both!important;
}

/* ---------------------------------------------------------
   22.18 HIERARKI MOTION DAN PENGAMAN
   --------------------------------------------------------- */
/* Tidak ada transition:all di lapisan ini. Seluruh transisi
   ditulis per properti. */

@media (prefers-reduced-motion:reduce){
  #contentArea,
  #contentArea.pindah-keluar-v18611,
  #contentArea.masuk-v18612>.panel,
  #contentArea.masuk-v18612>section,
  #contentArea.masuk-v18612>.fade-up,
  #contentArea.masuk-v18612 .panel>h3:first-child,
  #contentArea.masuk-v18612 .panel-head,
  #contentArea.masuk-v18612 .panel-title-row,
  #contentArea.masuk-v18612 .filter-card,
  #contentArea.masuk-v18612 .toolbar,
  #contentArea.masuk-v18612 .table-wrap,
  #contentArea.masuk-v18612 .summary-grid,
  .modal-card,.status-modal-card,.loader-card,
  .collapse-body:not(.hidden),.doc-list:not(.hidden),
  .empty,.empty-box,.public-error,
  .panel.reveal-v18612{
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
  }
  .menu-indikator-v18612{transition:none!important}
  .skeleton-v18612{animation:none!important}
  button:hover,button:active,.btn-mini:hover,.btn-mini:active,
  .summary-card:hover,.public-metric:hover{transform:none!important}
}


/* =========================================================
   SIMPROV v186.13 - SIGNATURE MOTION & INTERACTION LIGHTING
   ---------------------------------------------------------
   Lapisan presentasi murni di atas v186.12.

    23.1  Token tambahan
    23.2  Transisi menu signature + parallax berlapis
    23.3  Clip reveal selektif
    23.4  Indikator menu + sapuan cahaya sekali
    23.5  Interaction lighting
    23.6  Fisika kartu
    23.7  Fisika tombol
    23.8  Hover cerdas
    23.9  Tabel sebagai command center
    23.10 Status morph
    23.11 Angka hidup
    23.12 Modal sebagai lapisan kedalaman
    23.13 Fokus, toolbar, dropdown
    23.14 Sukses dan error
    23.15 Garis progres global
    23.16 Pengaman gerak
   ========================================================= */

/* ---------------------------------------------------------
   23.1 TOKEN TAMBAHAN
   --------------------------------------------------------- */
:root{
  --motion-page:320ms;
  --motion-exit:190ms;
  --ease-spatial:cubic-bezier(.18,.89,.28,1);
  --ease-press:cubic-bezier(.3,.7,.4,1);

  /* Jarak gerak per lapisan - inilah yang menciptakan kedalaman. */
  --geser-judul:12px;
  --geser-alat:20px;
  --geser-isi:28px;

  --cahaya:rgba(14,165,198,.13);
}

/* ---------------------------------------------------------
   23.2 TRANSISI MENU SIGNATURE + PARALLAX BERLAPIS
   Wadah panel hanya memudar dan mengecil tipis. Yang bergeser
   mendatar adalah lapisan di dalamnya, dengan jarak berbeda:
   judul 12px, toolbar 20px, isi 28px. Perbedaan jarak inilah
   yang membuat perpindahan terasa punya kedalaman, bukan satu
   blok datar yang digeser.
   --------------------------------------------------------- */
#contentArea{
  transition:
    transform var(--motion-exit) var(--ease-exit),
    opacity var(--motion-exit) var(--ease-exit),
    filter var(--motion-exit) var(--ease-exit)!important;
}
#contentArea.pindah-keluar-v18611{
  opacity:0;
  filter:blur(1.5px);
}
#contentArea.pindah-keluar-v18611.arah-maju-v18612{
  transform:translate3d(-28px,0,0) scale(.992)!important;
}
#contentArea.pindah-keluar-v18611.arah-mundur-v18612{
  transform:translate3d(28px,0,0) scale(.992)!important;
}

@keyframes wadahMasukV18613{
  from{opacity:0;transform:scale(.992);filter:blur(1.5px)}
  55%{filter:blur(0)}
  to{opacity:1;transform:none;filter:blur(0)}
}
#contentArea.masuk-v18612>.panel,
#contentArea.masuk-v18612>section,
#contentArea.masuk-v18612>.fade-up{
  animation:wadahMasukV18613 var(--motion-page) var(--ease-spatial) both!important;
  will-change:transform,opacity;
}

/* Lapisan 1 - judul halaman, jarak terpendek, paling cepat. */
@keyframes lapisJudulV18613{
  from{opacity:0;transform:translate3d(var(--geser-judul),0,0)}
  to{opacity:1;transform:none}
}
/* Lapisan 2 - toolbar, filter, ringkasan. */
@keyframes lapisAlatV18613{
  from{opacity:0;transform:translate3d(var(--geser-alat),0,0)}
  to{opacity:1;transform:none}
}
/* Lapisan 3 - isi utama dan tabel, jarak terjauh. */
@keyframes lapisIsiV18613{
  from{opacity:0;transform:translate3d(var(--geser-isi),0,0)}
  to{opacity:1;transform:none}
}

#contentArea.masuk-v18612 .panel>h3:first-child,
#contentArea.masuk-v18612 .panel-head,
#contentArea.masuk-v18612 .panel-title-row{
  animation:lapisJudulV18613 220ms var(--ease-spatial) 0ms both!important;
}
#contentArea.masuk-v18612 .filter-card,
#contentArea.masuk-v18612 .toolbar,
#contentArea.masuk-v18612 .summary-grid,
#contentArea.masuk-v18612 .pipeline-v103{
  animation:lapisAlatV18613 260ms var(--ease-spatial) 30ms both!important;
}
#contentArea.masuk-v18612 .table-wrap,
#contentArea.masuk-v18612 .form-grid,
#contentArea.masuk-v18612 .doc-upload-row{
  animation:lapisIsiV18613 var(--motion-page) var(--ease-spatial) 55ms both!important;
}

/* Arah mundur: seluruh lapisan dibalik. */
#contentArea.masuk-v18612.arah-mundur-v18612{
  --geser-judul:-12px;
  --geser-alat:-20px;
  --geser-isi:-28px;
}

/* ---------------------------------------------------------
   23.3 CLIP REVEAL SELEKTIF
   Hanya judul panel utama dan grid ringkasan. Tidak pernah
   pada isi tabel.
   --------------------------------------------------------- */
@keyframes bukaKiriV18613{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0 0 0 0)}
}
#contentArea.masuk-v18612 .panel>h3:first-child,
#contentArea.masuk-v18612 .panel-head h3,
#contentArea.masuk-v18612 .panel-title-row h3{
  animation:
    lapisJudulV18613 220ms var(--ease-spatial) 0ms both,
    bukaKiriV18613 280ms var(--ease-spatial) 0ms both!important;
}
/* Garis aksen di bawah judul ikut terbuka dari kiri. */
#contentArea.masuk-v18612 .panel>h3:first-child:after,
#contentArea.masuk-v18612 .panel-head h3:after{
  animation:bukaKiriV18613 320ms var(--ease-spatial) 120ms both!important;
}

/* ---------------------------------------------------------
   23.4 INDIKATOR MENU + SAPUAN CAHAYA SEKALI
   Sapuan hanya berjalan satu kali setiap menu aktif berpindah.
   Tidak ada perulangan.
   --------------------------------------------------------- */
.menu-indikator-v18612{
  overflow:hidden;
  background:linear-gradient(180deg,#14589a,var(--primary))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 2px 8px rgba(15,76,129,.28)!important;
  transition:
    transform 280ms var(--ease-spatial),
    width 280ms var(--ease-spatial),
    height 280ms var(--ease-spatial),
    opacity var(--motion-fast) var(--ease-standard)!important;
}
@keyframes sapuSekaliV18613{
  from{transform:translate3d(-130%,0,0)}
  to{transform:translate3d(130%,0,0)}
}
.menu-indikator-v18612:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.34) 50%,transparent 80%);
  transform:translate3d(-130%,0,0);
  pointer-events:none;
}
.menu-indikator-v18612.sapu-v18613:after{
  animation:sapuSekaliV18613 520ms var(--ease-spatial) 1 both;
}

/* ---------------------------------------------------------
   23.5 INTERACTION LIGHTING
   Permukaan bereaksi terhadap posisi kursor. Titik cahaya
   diletakkan lewat variabel --mx/--my yang diisi JavaScript.
   Hanya kartu ringkasan dan tombol menu, bukan seluruh UI.
   --------------------------------------------------------- */
.summary-card,.public-metric,.menu-nav button{
  position:relative;
  isolation:isolate;
}
.summary-card:before,
.public-metric:before{
  z-index:0;
}
.summary-card .cahaya-v18613,
.public-metric .cahaya-v18613,
.menu-nav button .cahaya-v18613{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  z-index:-1;
  background:radial-gradient(
    170px circle at var(--mx,50%) var(--my,50%),
    var(--cahaya),
    transparent 62%);
  transition:opacity var(--motion-fast) var(--ease-standard);
}
.summary-card:hover .cahaya-v18613,
.public-metric:hover .cahaya-v18613{opacity:1}
.menu-nav button:hover .cahaya-v18613{opacity:.9}
.menu-nav button.active .cahaya-v18613{opacity:0}

/* ---------------------------------------------------------
   23.6 FISIKA KARTU
   --------------------------------------------------------- */
.summary-card,.public-metric{
  transition:
    transform 180ms var(--ease-spatial),
    box-shadow 180ms var(--ease-standard),
    border-color 180ms var(--ease-standard)!important;
}
.summary-card:hover,.public-metric:hover{
  transform:translate3d(0,-2px,0)!important;
  box-shadow:var(--depth-3)!important;
  border-color:#b9cfe2!important;
}
.summary-card:active,.public-metric:active{
  transform:translate3d(0,-1px,0)!important;
  box-shadow:var(--depth-1)!important;
  transition-duration:90ms!important;
}

/* ---------------------------------------------------------
   23.7 FISIKA TOMBOL
   --------------------------------------------------------- */
button{
  transition:
    background-color 140ms var(--ease-standard),
    border-color 140ms var(--ease-standard),
    color 140ms var(--ease-standard),
    box-shadow 160ms var(--ease-standard),
    transform 160ms var(--ease-press)!important;
}
button:hover{
  transform:translate3d(0,-1px,0)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 4px 14px rgba(15,76,129,.20)!important;
}
button:active{
  transform:translate3d(0,1px,0) scale(.985)!important;
  box-shadow:inset 0 2px 5px rgba(9,32,56,.26)!important;
  transition-duration:70ms!important;
}
.btn-mini:active{transform:translate3d(0,1px,0) scale(.97)!important}
.password-toggle-v148:hover,.password-toggle-v148:active{
  transform:translateY(-50%)!important;
}
/* Gerak mikro ikon kontekstual pada tombol berteks arah. */
.btn-soft,.btn-detail{transition:
  background-color 140ms var(--ease-standard),
  border-color 140ms var(--ease-standard),
  color 140ms var(--ease-standard),
  box-shadow 160ms var(--ease-standard),
  transform 160ms var(--ease-press)!important}

/* ---------------------------------------------------------
   23.8 HOVER CERDAS
   --------------------------------------------------------- */
.menu-nav button:hover:not(.active){
  background:rgba(15,76,129,.07)!important;
  color:var(--primary-strong)!important;
}
.plan-id-link-v161,.doc-item a,td a{
  transition:color 140ms var(--ease-standard),
             text-decoration-color 140ms var(--ease-standard);
}

/* ---------------------------------------------------------
   23.9 TABEL SEBAGAI COMMAND CENTER
   --------------------------------------------------------- */
#contentArea tbody tr:hover{
  background:linear-gradient(90deg,rgba(15,76,129,.075),rgba(15,76,129,.035))!important;
  box-shadow:inset 3px 0 0 var(--primary2)!important;
}
#contentArea thead th{
  box-shadow:inset 0 -2px 0 rgba(15,125,186,.30)!important;
}
/* Sorotan menyapu satu kali ketika data baris baru diperbarui. */
@keyframes sorotSapuV18613{
  0%{background-position:-150% 0;background-color:rgba(21,148,71,.15)}
  70%{background-color:rgba(21,148,71,.08)}
  100%{background-position:150% 0;background-color:transparent}
}
#contentArea tbody tr.baris-berubah-v18612{
  background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%)!important;
  background-size:200% 100%;
  animation:sorotSapuV18613 640ms var(--ease-spatial) 1 both!important;
}

/* ---------------------------------------------------------
   23.10 STATUS MORPH
   --------------------------------------------------------- */
@keyframes statusMorphV18613{
  from{opacity:0;transform:scale(.96)}
  60%{opacity:1}
  to{opacity:1;transform:none}
}
.badge.status-ganti-v18612{
  animation:statusMorphV18613 220ms var(--ease-spatial) both!important;
}

/* ---------------------------------------------------------
   23.11 ANGKA HIDUP
   Bukan penghitung dari nol. Angka lama naik dan memudar,
   angka baru datang dari 3 px di bawah.
   --------------------------------------------------------- */
@keyframes angkaMasukV18613{
  from{opacity:0;transform:translate3d(0,3px,0)}
  to{opacity:1;transform:none}
}
.summary-card b.angka-ganti-v18613,
.public-metric strong.angka-ganti-v18613,
.big-percent.angka-ganti-v18613,
.summary-card b.angka-ganti-v18612,
.public-metric strong.angka-ganti-v18612{
  animation:angkaMasukV18613 200ms var(--ease-spatial) both;
}

/* ---------------------------------------------------------
   23.12 MODAL SEBAGAI LAPISAN KEDALAMAN
   --------------------------------------------------------- */
@keyframes modalMasukV18613{
  from{opacity:0;transform:translate3d(0,10px,0) scale(.972);filter:blur(2px)}
  55%{filter:blur(0)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes latarMasukV18613{
  from{opacity:0;backdrop-filter:blur(0)}
  to{opacity:1;backdrop-filter:blur(3px)}
}
.modal-backdrop:not(.hidden),
.status-modal-backdrop:not(.hidden),
.honor-backdrop-v83:not(.hidden),
.honor-backdrop-v87:not(.hidden){
  animation:latarMasukV18613 200ms var(--ease-standard) both!important;
  backdrop-filter:blur(3px) saturate(.92)!important;
  -webkit-backdrop-filter:blur(3px) saturate(.92)!important;
}
.modal-card,.status-modal-card,
.honor-modal-v83,.honor-modal-v87,
.rab-stage2-card-v186,.hps-modal-wide-v126{
  animation:modalMasukV18613 var(--motion-page) var(--ease-spatial) both!important;
  transform-origin:var(--asal-x,50%) var(--asal-y,42%);
  box-shadow:
    0 2px 8px rgba(8,26,45,.10),
    0 18px 50px rgba(8,26,45,.26)!important;
}

/* ---------------------------------------------------------
   23.13 FOKUS, TOOLBAR, DROPDOWN
   --------------------------------------------------------- */
input:focus,select:focus,textarea:focus{
  border-color:var(--primary2)!important;
  box-shadow:
    0 0 0 3px rgba(14,165,198,.16),
    inset 0 1px 2px rgba(16,42,67,.06)!important;
}
/* Daftar pilihan bawaan peramban tidak dapat dianimasikan,
   tetapi kontrolnya diberi respons kedalaman saat dibuka. */
select:focus{
  box-shadow:
    0 0 0 3px rgba(14,165,198,.16),
    0 4px 12px rgba(15,76,129,.12)!important;
}
.filter-card:focus-within{
  border-color:#c2d6e6!important;
  box-shadow:var(--depth-2);
}

/* ---------------------------------------------------------
   23.14 SUKSES DAN ERROR
   --------------------------------------------------------- */
@keyframes sesuaiV18613{
  from{opacity:0;transform:scale(.9)}
  to{opacity:1;transform:none}
}
.msg.sukses-v18613{
  animation:sesuaiV18613 240ms var(--ease-spatial) both;
  color:#146b3f!important;
}
@keyframes doronganV18613{
  0%{transform:translate3d(0,0,0)}
  35%{transform:translate3d(3px,0,0)}
  100%{transform:translate3d(0,0,0)}
}
.msg.galat-v18613,
input.galat-v18613,select.galat-v18613,textarea.galat-v18613{
  animation:doronganV18613 220ms var(--ease-standard) 1 both;
}
input.galat-v18613,select.galat-v18613,textarea.galat-v18613{
  border-color:var(--red)!important;
  box-shadow:0 0 0 3px rgba(192,57,43,.13)!important;
}

/* ---------------------------------------------------------
   23.15 GARIS PROGRES GLOBAL
   Umpan balik seketika saat proses dimulai, tanpa menutup
   layar dan tanpa mengganggu pengetikan.
   --------------------------------------------------------- */
.progres-global-v18613{
  position:fixed;
  top:0;left:0;right:0;
  height:2px;
  z-index:99999;
  background:transparent;
  pointer-events:none;
  opacity:0;
  transition:opacity 200ms var(--ease-standard);
}
.progres-global-v18613.tampil-v18613{opacity:1}
.progres-global-v18613 i{
  display:block;
  height:100%;
  width:40%;
  border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  box-shadow:0 0 8px rgba(14,165,198,.45);
  transform:translate3d(-100%,0,0);
}
@keyframes progresJalanV18613{
  0%{transform:translate3d(-100%,0,0)}
  100%{transform:translate3d(280%,0,0)}
}
.progres-global-v18613.tampil-v18613 i{
  animation:progresJalanV18613 1.1s var(--ease-standard) infinite;
}

/* ---------------------------------------------------------
   23.16 PENGAMAN GERAK
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  #contentArea,
  #contentArea.pindah-keluar-v18611,
  #contentArea.masuk-v18612>.panel,
  #contentArea.masuk-v18612>section,
  #contentArea.masuk-v18612>.fade-up,
  #contentArea.masuk-v18612 .panel>h3:first-child,
  #contentArea.masuk-v18612 .panel>h3:first-child:after,
  #contentArea.masuk-v18612 .panel-head,
  #contentArea.masuk-v18612 .panel-head h3,
  #contentArea.masuk-v18612 .panel-head h3:after,
  #contentArea.masuk-v18612 .panel-title-row,
  #contentArea.masuk-v18612 .panel-title-row h3,
  #contentArea.masuk-v18612 .filter-card,
  #contentArea.masuk-v18612 .toolbar,
  #contentArea.masuk-v18612 .summary-grid,
  #contentArea.masuk-v18612 .pipeline-v103,
  #contentArea.masuk-v18612 .table-wrap,
  #contentArea.masuk-v18612 .form-grid,
  #contentArea.masuk-v18612 .doc-upload-row,
  #contentArea tbody tr.baris-berubah-v18612,
  .badge.status-ganti-v18612,
  .modal-card,.status-modal-card,
  .msg.sukses-v18613,.msg.galat-v18613,
  input.galat-v18613,select.galat-v18613,textarea.galat-v18613{
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
  }
  .menu-indikator-v18612:after,
  .progres-global-v18613 i{animation:none!important}
  .cahaya-v18613{display:none!important}
  button:hover,button:active,
  .summary-card:hover,.public-metric:hover{transform:none!important}
}

/* =========================================================
   SIMPROV v186.14 - PERBAIKAN KEDIPAN SAAT PINDAH MENU
   ---------------------------------------------------------
   Laporan: perpindahan antarmenu terasa berkedip walaupun
   cepat.

   Tiga penyebab yang menumpuk, seluruhnya berasal dari
   lapisan motion v186.12/v186.13:

   1. ANIMASI MASUK DIULANG BERKALI-KALI.
      picuMasuk() dipanggil pada SETIAP perubahan isi
      #contentArea, bukan hanya saat menu ditekan. Ketika
      sebuah halaman merender isinya lebih dari satu kali
      (mis. kerangka panel dulu, lalu data menyusul), animasi
      dilepas dan dipasang ulang. Isi yang sudah terlihat
      dikembalikan ke opacity 0 lalu masuk lagi - inilah
      kedipannya. Diperbaiki di app.js.

   2. DUA LAPISAN MEMUDAR BERSAMAAN.
      #contentArea memudar 0 -> 1 (transisi 190 ms) sementara
      anak-anaknya juga memudar 0 -> 1 (animasi 320 ms).
      Opasitas keduanya berlipat sehingga muncul lonjakan
      kecerahan di tengah transisi. Diperbaiki di bawah.

   3. LAPISAN KOMPOSIT DIBUAT LALU DIBUANG.
      filter: blur() pada #contentArea dan pada wadah panel
      memaksa peramban mengangkat seluruh isi halaman - termasuk
      tabel besar - menjadi lapisan komposit tersendiri, lalu
      membuangnya lagi begitu blur selesai. Pembuatan dan
      pembuangan lapisan inilah yang menimbulkan kilatan repaint.
      Blur pada transisi halaman karena itu dilepas. Blur pada
      modal dipertahankan karena areanya kecil dan tidak
      bermasalah.
   ========================================================= */

/* --- Penyebab 3: blur dilepas dari transisi halaman --- */
#contentArea.pindah-keluar-v18611{
  filter:none!important;
}
@keyframes wadahMasukV18614{
  from{opacity:0;transform:scale(.994)}
  to{opacity:1;transform:none}
}
#contentArea.masuk-v18612>.panel,
#contentArea.masuk-v18612>section,
#contentArea.masuk-v18612>.fade-up{
  animation:wadahMasukV18614 var(--motion-page) var(--ease-spatial) both!important;
}

/* --- Penyebab 2: wadah tidak ikut memudar saat masuk ---
   Saat isi baru masuk, #contentArea langsung terlihat penuh
   tanpa transisi. Yang bergerak hanya lapisan di dalamnya,
   sehingga tidak ada opasitas yang berlipat dan tidak ada
   satu frame pun yang tergambar dalam keadaan kosong. */
#contentArea.masuk-v18612{
  transition:none!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}

/* --- Mencegah lompatan tata letak ---
   Batang gulir yang muncul dan hilang antarmenu menggeser isi
   beberapa piksel dan ikut terbaca sebagai kedipan. */
html{scrollbar-gutter:stable}

/* --- Menahan tinggi minimum area isi ---
   Ketika isi lama dilepas dan isi baru belum terpasang, tinggi
   halaman dapat menyusut sesaat. Tinggi minimum menahan hal itu
   tanpa memengaruhi tata letak isi mana pun. */
#contentArea{min-height:60vh}

@media (prefers-reduced-motion:reduce){
  #contentArea.masuk-v18612>.panel,
  #contentArea.masuk-v18612>section,
  #contentArea.masuk-v18612>.fade-up{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}

/* =========================================================
   SIMPROV v186.14.1 - KEDIPAN ISI DI BAWAH KARTU RINGKASAN
   ---------------------------------------------------------
   Laporan lanjutan: kartu ringkasan tidak berkedip, tetapi isi
   DI BAWAHNYA masih berkedip.

   Penyebab: aturan animasi masuk dari v186.11 tidak pernah
   dibatasi pada keadaan perpindahan menu.

       #contentArea .fade-up{
         animation:sportDorongMasuk .24s ... both!important;
       }

   Panel SIMPROV selalu dirender dengan kelas "fade-up", dan
   halaman Dashboard Monitoring memperbarui datanya secara
   berkala (toast "Data terbaru berhasil diperbarui"). Setiap
   pembaruan mengganti isi #contentArea, sehingga aturan di atas
   memutar ulang animasi meluncur pada SELURUH panel - padahal
   pengguna tidak berpindah menu sama sekali.

   Penjaga anti-kedip v186.14 hanya mencegah kelas
   "masuk-v18612" dipasang ulang. Ia tidak dapat mencegah
   aturan yang memang tidak bergantung pada kelas itu.

   Perbaikan: seluruh animasi masuk pada isi #contentArea
   dimatikan ketika kelas "masuk-v18612" TIDAK ada. Jadi:
   - perpindahan menu  -> animasi berlapis tetap berjalan penuh;
   - render ulang data -> tidak ada animasi sama sekali.
   ========================================================= */
#contentArea:not(.masuk-v18612)>.panel,
#contentArea:not(.masuk-v18612)>section,
#contentArea:not(.masuk-v18612) .fade-up,
#contentArea:not(.masuk-v18612) .panel,
#contentArea:not(.masuk-v18612) .premium-panel,
#contentArea:not(.masuk-v18612) .panel-head,
#contentArea:not(.masuk-v18612) .panel-title-row,
#contentArea:not(.masuk-v18612) .filter-card,
#contentArea:not(.masuk-v18612) .toolbar,
#contentArea:not(.masuk-v18612) .summary-grid,
#contentArea:not(.masuk-v18612) .pipeline-v103,
#contentArea:not(.masuk-v18612) .table-wrap,
#contentArea:not(.masuk-v18612) .form-grid,
#contentArea:not(.masuk-v18612) .doc-upload-row,
#contentArea:not(.masuk-v18612) .table-hint,
#contentArea:not(.masuk-v18612) .empty,
#contentArea:not(.masuk-v18612) .empty-box{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  clip-path:none!important;
}
/* Judul panel juga dilepas dari clip reveal saat render ulang. */
#contentArea:not(.masuk-v18612) .panel>h3,
#contentArea:not(.masuk-v18612) .panel-head h3,
#contentArea:not(.masuk-v18612) .panel-title-row h3,
#contentArea:not(.masuk-v18612) .panel>h3:after,
#contentArea:not(.masuk-v18612) .panel-head h3:after{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
  clip-path:none!important;
}

/* Kartu ringkasan di DALAM panel isi (Total Bidang, Perlu
   Persetujuan, dan sejenisnya) juga tidak boleh masuk ulang
   setiap data diperbarui. */
#contentArea:not(.masuk-v18612) .summary-card,
#contentArea:not(.masuk-v18612) .monitor-card{
  animation:none!important;
  opacity:1!important;
}

/* Expand/collapse dikembalikan fungsinya. Aturan
   ".collapse-body{animation:none}" dari versi lama membuat
   animasi buka bagian pada 22.15 tidak pernah berjalan. */
#contentArea .collapse-body:not(.hidden),
#contentArea .doc-list:not(.hidden),
#contentArea .non-card-body-v83:not(.hidden){
  animation:bukaBagianV18612 var(--motion-fast) var(--ease-enter) both!important;
}

@media (prefers-reduced-motion:reduce){
  #contentArea .collapse-body:not(.hidden),
  #contentArea .doc-list:not(.hidden),
  #contentArea .non-card-body-v83:not(.hidden){
    animation:none!important;
  }
}

/* v186.16 - hanya warna penanda versi/status RAB dan riwayat realisasi. */
.rab-version-tone-1-v18616{background:#e8f3ff!important;color:#075b95!important;border-color:#c7e4f8!important}
.rab-version-tone-2-v18616{background:#eaf8ef!important;color:#17683f!important;border-color:#c9ead5!important}
.rab-version-tone-3-v18616{background:#f1ecff!important;color:#5f46a8!important;border-color:#ddd1ff!important}
.rab-version-tone-4-v18616{background:#fff3df!important;color:#9a5a00!important;border-color:#f0d49c!important}
.rab-version-tone-5-v18616{background:#ffebee!important;color:#a42e3c!important;border-color:#f2c8ce!important}
.rab-history-card-tone-1-v18616{border-left:4px solid #4a9bd4!important}
.rab-history-card-tone-2-v18616{border-left:4px solid #45a36a!important}
.rab-history-card-tone-3-v18616{border-left:4px solid #8a70cf!important}
.rab-history-card-tone-4-v18616{border-left:4px solid #d99a31!important}
.rab-history-card-tone-5-v18616{border-left:4px solid #cf5d68!important}
.rab-history-status-v186.aktif_perlu_penyesuaian{background:#fff0d8!important;color:#8c5800!important}
.rab-operational-warning-v18616{display:inline-flex;align-items:center;border-radius:999px;padding:2px 7px;font-size:9px;font-weight:900;background:#fff0d8;color:#8c5800;border:1px solid #efcf96;vertical-align:middle}
.rab-real-history-v18616{display:grid;gap:7px;margin-top:8px}.rab-real-history-v18616>div{padding:8px 10px;border:1px solid #dfeaf2;border-radius:9px;background:#f8fbfd;font-size:11px;line-height:1.45;color:#4f687b}

/* =========================================================
   SIMPROV v186.19.2 - TIRAI LOGIN & LOGOUT
   ---------------------------------------------------------
   HANYA efek tirai. Tidak ada perubahan lain pada tampilan,
   struktur, menu, role, alur, maupun logika apa pun.

   Nilai diambil persis dari versi tirai gelap sebelumnya:
   enam bilah hitam #0b0c0e, jeda 65 ms antarbilah, durasi
   900 ms, easing cubic-bezier(.16,1,.3,1), garis aksen 2 px
   empat warna logo di tepi tiap bilah, dan logo SIMPROV di
   tengah yang memudar membesar selama 620 ms.

   Perbedaan satu-satunya: arah.
   - Masuk  : bilah terangkat ke ATAS  (0 -> -101%).
   - Keluar : bilah turun ke BAWAH     (0 -> +101%).

   Aturan ditulis mandiri tanpa bergantung token dari lapisan
   motion versi lain, karena baseline ini tidak memilikinya.
   ========================================================= */
.tirai-simprov-v18619{
  position:fixed;
  inset:0;
  z-index:99998;
  display:flex;
  pointer-events:none;
}
.tirai-simprov-v18619 i{
  position:relative;
  overflow:hidden;
  flex:1 1 0;
  height:100%;
  background:#0b0c0e;
  transform:translate3d(0,0,0);
  animation:bilahNaikV18619 900ms cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--b,0) * 65ms);
  will-change:transform;
}
/* Garis aksen tipis di tepi bawah tiap bilah - satu-satunya
   warna pada tirai. */
.tirai-simprov-v18619 i:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--sport-pita,linear-gradient(90deg,#159447,#0f7dba 34%,#e49a00 67%,#d93b3b));
  opacity:.9;
}
@keyframes bilahNaikV18619{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-101%,0)}
}
/* Arah keluar: bilah turun ke bawah. */
.tirai-simprov-v18619.turun-v18619 i{
  animation-name:bilahTurunV18619;
}
@keyframes bilahTurunV18619{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,101%,0)}
}

/* Logo SIMPROV di tengah tirai. */
.tirai-merek-v18619{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  pointer-events:none;
  animation:merekPergiV18619 620ms cubic-bezier(.16,1,.3,1) both;
}
.tirai-merek-v18619 img{
  width:76px;
  height:76px;
  object-fit:contain;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
@keyframes merekPergiV18619{
  0%{opacity:1;transform:scale(1)}
  60%{opacity:1;transform:scale(1.04)}
  100%{opacity:0;transform:scale(1.12)}
}

@media (prefers-reduced-motion:reduce){
  .tirai-simprov-v18619,.tirai-merek-v18619{display:none!important}
}

/* =========================================================
   SIMPROV v186.19.3 - INTRO SAAT WEB PERTAMA DIBUKA
   ---------------------------------------------------------
   Berbeda dari tirai login. Ini berjalan saat halaman SIMPROV
   PERTAMA KALI dibuka, sebelum pengguna melakukan apa pun.

   Memakai logo versi SVG. Berkas hasil konversi berisi 151
   path hasil penelusuran otomatis, masing-masing satu gradasi
   anti-alias. Kalau 151 path itu dianimasikan sendiri-sendiri
   hasilnya jadi bintik acak, bukan logo yang terpecah. Karena
   itu path dikelompokkan menjadi EMPAT bagian sesuai warna
   logo - biru, hijau, merah, kuning - dan tiap bagian itulah
   yang bergerak sendiri-sendiri.

   Urutan:
     1. Empat bagian logo berdatangan dari arah berbeda sambil
        berputar, lalu menyatu menjadi logo utuh.
     2. Ditahan sejenak.
     3. Empat bagian berpencar keluar dan memudar.
     4. Enam bilah hitam terangkat ke atas, bentuk dan warnanya
        sama persis dengan tirai login.

   Seluruh lapisan memakai pointer-events:none, jadi tidak
   pernah menghalangi klik maupun pengetikan.
   ========================================================= */
.intro-simprov-v18619{
  position:fixed;
  inset:0;
  z-index:99997;
  display:flex;
  pointer-events:none;
  background:#050608;
}
.intro-simprov-v18619 .bilah-v18619{
  position:relative;
  overflow:hidden;
  flex:1 1 0;
  height:100%;
  background:#0b0c0e;
  animation:bilahNaikV18619 700ms cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(880ms + var(--b,0) * 55ms);
  will-change:transform;
}
.intro-simprov-v18619 .bilah-v18619:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--sport-pita,linear-gradient(90deg,#159447,#0f7dba 34%,#e49a00 67%,#d93b3b));
  opacity:.9;
}

/* Panggung logo */
.intro-logo-v18619{
  position:fixed;
  inset:0;
  z-index:99997;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.intro-logo-v18619 svg{
  width:168px;
  height:168px;
  overflow:visible;
}
/* Tiap bagian warna logo bergerak sendiri. */
.intro-logo-v18619 .bagian-logo-v18619{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  will-change:transform,opacity;
  animation:bagianLogoV18619 1150ms cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--d,0) * 90ms);
}
@keyframes bagianLogoV18619{
  0%{
    opacity:0;
    transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg)) scale(.45);
  }
  30%{
    opacity:1;
    transform:translate(0,0) rotate(0deg) scale(1);
  }
  58%{
    opacity:1;
    transform:translate(0,0) rotate(0deg) scale(1);
  }
  100%{
    opacity:0;
    transform:translate(calc(var(--x,0px) * -1.4),calc(var(--y,0px) * -1.4))
              rotate(calc(var(--r,0deg) * -1)) scale(1.35);
  }
}

@media (prefers-reduced-motion:reduce){
  .intro-simprov-v18619,.intro-logo-v18619{display:none!important}
}

/* =========================================================
   SIMPROV v186.19.4 - LATAR HALAMAN LOGIN
   ---------------------------------------------------------
   Gagasan: EMPAT WARNA YANG BERKUMPUL.

   Empat warna logo - biru, hijau, merah, kuning - hadir sebagai
   bidang cahaya yang sangat besar dan sangat lembut. Masing-
   masing mengorbit pelan dengan periode berbeda, sesekali
   mendekat ke arah kartu login lalu menjauh lagi.

   Alasannya bukan sekadar hiasan: gerak berkumpul itu meneruskan
   intro, di mana empat bagian logo berdatangan lalu menyatu.
   Jadi sejak halaman dibuka sampai pengguna menatap kartu login,
   bahasanya sama.

   Keputusan desain yang diambil:

   - TIDAK memakai logo sebagai gambar latar. Logo sudah ada di
     kartu; mengulanginya di latar adalah ciri khas template.
     Yang dipinjam dari logo hanya WARNANYA.
   - TIDAK memakai filter:blur. Kelembutan didapat gratis dari
     gradasi radial, tanpa biaya render sama sekali.
   - Hanya transform dan opacity yang digerakkan.
   - Periode tiap bidang sengaja tidak berkelipatan (37s, 43s,
     53s, 61s) supaya susunannya nyaris tidak pernah berulang.
   - mix-blend-mode: multiply supaya warna bercampur seperti
     tinta, bukan seperti stiker yang ditumpuk.
   - Opasitas ditahan di 0,10-0,13. Merah paling rendah karena
     merah terbaca paling kuat oleh mata.

   Dua lapisan lama ikut ditenangkan: lingkaran conic yang tadinya
   berputar 16 detik menjadi 48 detik, dan hanyutan kisi dari
   9 detik menjadi 26 detik. Keduanya terlalu cepat untuk sebuah
   latar - gerak latar seharusnya hampir tidak disadari.
   ========================================================= */
.aurora-v18619{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.login-card{position:relative;z-index:2}

.aurora-v18619 i{
  position:absolute;
  display:block;
  width:46vmax;
  height:46vmax;
  border-radius:50%;
  mix-blend-mode:multiply;
  will-change:transform;
}
/* Biru - bidang terbesar, mengorbit paling luas. */
.aurora-v18619 .medan-biru{
  left:-14vmax; top:-12vmax;
  background:radial-gradient(closest-side,rgba(8,120,194,.13),rgba(8,120,194,.05) 55%,transparent 72%);
  animation:orbitBiruV18619 37s ease-in-out infinite alternate;
}
/* Hijau - datang dari sisi berlawanan. */
.aurora-v18619 .medan-hijau{
  right:-16vmax; bottom:-14vmax;
  background:radial-gradient(closest-side,rgba(4,161,55,.12),rgba(4,161,55,.045) 55%,transparent 72%);
  animation:orbitHijauV18619 43s ease-in-out infinite alternate;
}
/* Kuning - hangat, menahan sisi atas kanan. */
.aurora-v18619 .medan-kuning{
  right:-10vmax; top:-16vmax;
  width:40vmax; height:40vmax;
  background:radial-gradient(closest-side,rgba(249,172,4,.12),rgba(249,172,4,.04) 55%,transparent 72%);
  animation:orbitKuningV18619 53s ease-in-out infinite alternate;
}
/* Merah - paling kecil dan paling redup, hanya aksen. */
.aurora-v18619 .medan-merah{
  left:-8vmax; bottom:-18vmax;
  width:34vmax; height:34vmax;
  background:radial-gradient(closest-side,rgba(220,8,10,.075),rgba(220,8,10,.03) 55%,transparent 70%);
  animation:orbitMerahV18619 61s ease-in-out infinite alternate;
}

/* Tiap orbit bergerak ke arah tengah lalu kembali. Perpindahan
   dijaga kecil supaya terasa bernapas, bukan meluncur. */
@keyframes orbitBiruV18619{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(9vmax,6vmax,0) scale(1.1)}
  100%{transform:translate3d(3vmax,11vmax,0) scale(.96)}
}
@keyframes orbitHijauV18619{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-10vmax,-7vmax,0) scale(1.08)}
  100%{transform:translate3d(-4vmax,-12vmax,0) scale(.95)}
}
@keyframes orbitKuningV18619{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-8vmax,7vmax,0) scale(1.06)}
  100%{transform:translate3d(-2vmax,12vmax,0) scale(.94)}
}
@keyframes orbitMerahV18619{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(7vmax,-8vmax,0) scale(1.09)}
  100%{transform:translate3d(2vmax,-13vmax,0) scale(.96)}
}

/* Menenangkan dua lapisan lama. */
.login-page:before{
  animation-duration:48s!important;
  opacity:.55;
}
.login-page:after{
  animation-duration:26s!important;
  opacity:.26!important;
}

@media (prefers-reduced-motion:reduce){
  .aurora-v18619 i{animation:none!important;transform:none!important}
  .login-page:before,.login-page:after{animation:none!important}
}

/* =========================================================
   SIMPROV v186.19.6 - LOGO OLAHRAGA MENGELILINGI LOGIN
   ---------------------------------------------------------
   Halaman login kembali TERANG. Blok gelap v186.19.5 sudah
   dihapus seluruhnya, bukan ditimpa.

   Gagasan: dua belas logo cabang olahraga PORPROV mengapung
   mengelilingi kartu login pada tiga lapisan kedalaman.
   Masing-masing bergerak sendiri dengan periode berbeda, dan
   seluruhnya bergeser mengikuti kursor - lapisan depan bergeser
   lebih jauh daripada lapisan belakang. Perbedaan jarak itulah
   yang menciptakan rasa ruang.

   Catatan jujur tentang scroll: pada rujukan, gerak dipicu oleh
   scroll. Halaman login SIMPROV setinggi satu layar dan memang
   tidak bisa di-scroll, jadi memicunya dengan scroll berarti
   memaksa pengguna menggulir hanya untuk melihat animasi -
   padahal yang mereka cari adalah kolom isian. Karena itu
   pemicunya diganti gerakan kursor dan hanyutan otomatis.
   Bila halaman kebetulan dapat digulir, scroll tetap ikut
   dipakai.

    30.1 Wadah dan lapisan kedalaman
    30.2 Gerak mengapung
    30.3 Kartu login transparan
    30.4 Pengaman gerak
   ========================================================= */

/* ---------------------------------------------------------
   30.1 WADAH DAN LAPISAN KEDALAMAN
   --------------------------------------------------------- */
.olahraga-lapis-v18619{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.olahraga-lapis-v18619 i{
  position:absolute;
  display:block;
  /* Pergeseran mengikuti kursor. --k adalah kekuatan parallax
     tiap lapisan; makin depan makin besar. */
  transform:translate3d(
    calc(var(--px,0) * var(--k,10) * 1px),
    calc(var(--py,0) * var(--k,10) * 1px),
    0);
  transition:transform 620ms cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
/* Tiga tingkat sarang, karena tiap tingkat memegang satu
   transform sendiri dan tidak boleh saling menimpa:
     <i> parallax kursor
     <b> animasi masuk
     <s> hanyutan terus-menerus + gambar logo          */
.olahraga-lapis-v18619 i>b{
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  animation:olahragaMasukV18619 1200ms cubic-bezier(.16,1,.3,1) both;
  animation-delay:var(--masuk,0s);
  will-change:transform,opacity;
}
.olahraga-lapis-v18619 i>b>s{
  display:block;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  animation:mengapungV18619 var(--dur,22s) ease-in-out infinite alternate;
  animation-delay:var(--del,0s);
  will-change:transform;
}

/* Tiga lapisan kedalaman. Yang jauh lebih kecil, lebih pudar,
   sedikit kabur, dan bergeser paling sedikit. */
.olahraga-lapis-v18619 i.jauh-v18619{
  width:76px;height:76px;
  opacity:.15;
  filter:blur(1.4px) saturate(.8);
}
.olahraga-lapis-v18619 i.tengah-v18619{
  width:104px;height:104px;
  opacity:.24;
  filter:blur(.5px) saturate(.9);
}
.olahraga-lapis-v18619 i.dekat-v18619{
  width:132px;height:132px;
  opacity:.34;
}

/* ---------------------------------------------------------
   30.2 GERAK MENGAPUNG
   Hanya transform. Perpindahan kecil supaya terasa mengapung,
   bukan melayang berpindah tempat.
   --------------------------------------------------------- */
/* Masuk: melayang dari luar layar menuju tempatnya, bertahap
   antar-logo. Watak geraknya sama dengan tirai - melesat di awal,
   berhenti sangat lembut, tanpa pantulan. */
@keyframes olahragaMasukV18619{
  from{
    opacity:0;
    transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(.55) rotate(var(--mr,-14deg));
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
  }
}
/* Hanyutan: jarak dan kecepatan dinaikkan jauh supaya benar-benar
   terlihat. Sebelumnya hanya 14-22 px selama 44-79 detik - secara
   praktis tidak kelihatan mata. */
@keyframes mengapungV18619{
  from{transform:translate3d(0,0,0) rotate(var(--r1,-7deg)) scale(1)}
  to  {transform:translate3d(var(--ox,90px),var(--oy,-70px),0) rotate(var(--r2,7deg)) scale(1.12)}
}

/* ---------------------------------------------------------
   30.3 KARTU LOGIN TRANSPARAN
   Kaca tipis supaya logo di belakangnya terasa, tetapi teks
   tetap terbaca. Kontras dijaga dengan menaikkan ketebalan
   warna label dan keterangan.
   --------------------------------------------------------- */
#loginPage .login-card{
  background:rgba(255,255,255,.58)!important;
  backdrop-filter:blur(18px) saturate(1.15)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.15)!important;
  border:1px solid rgba(255,255,255,.75)!important;
  box-shadow:
    0 1px 2px rgba(16,42,67,.06),
    0 20px 60px rgba(16,42,67,.14)!important;
}
#loginPage .login-card h1{color:#123a5e!important}
#loginPage .login-card p{color:#4a6076!important}
#loginPage .login-card label{color:#26415a!important}
/* Kolom isian dibuat sedikit lebih pekat daripada kartunya
   supaya batas kolom tetap jelas di atas permukaan kaca. */
#loginPage .login-card input{
  background:rgba(255,255,255,.82)!important;
  border-color:rgba(23,66,102,.20)!important;
}
#loginPage .login-card input:focus{
  background:#fff!important;
}
#loginPage .login-card:after{
  background:rgba(255,255,255,.55)!important;
  border:1px solid rgba(255,255,255,.7)!important;
}
#loginPage .login-card .logo-box{
  background:rgba(255,255,255,.9)!important;
}

/* ---------------------------------------------------------
   30.4 PENGAMAN GERAK
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .olahraga-lapis-v18619 i{transition:none!important;transform:none!important}
  .olahraga-lapis-v18619 i>b{animation:none!important}
}
/* Pada layar sempit jumlah logo dikurangi lewat CSS saja,
   supaya tidak menumpuk di belakang kartu. */
@media (max-width:820px){
  .olahraga-lapis-v18619 i.jauh-v18619{display:none}
  .olahraga-lapis-v18619 i.tengah-v18619{width:84px;height:84px}
  .olahraga-lapis-v18619 i.dekat-v18619{width:100px;height:100px}
}

/* =========================================================
   SIMPROV v186.19.8 - LOGO KARTU + PECAHAN LOGO OLAHRAGA
   ---------------------------------------------------------
    31.1 Logo SIMPROV pada kartu login
    31.2 Logo olahraga terpecah menjadi empat bagian
   ========================================================= */

/* ---------------------------------------------------------
   31.1 LOGO SIMPROV PADA KARTU LOGIN
   Bingkai dan kotak putihnya dilepas, ukurannya dinaikkan dari
   52 px ke 92 px, dan diberi gerak mengapung pelan.

   Sengaja TIDAK memakai pseudo-element sama sekali. Pada
   percobaan terdahulu, .logo-box:before dan :after ternyata
   sudah dipakai aturan kilau logo versi lama sehingga hasilnya
   rusak. Di sini hanya kotak dan gambarnya yang disentuh.
   --------------------------------------------------------- */
#loginPage .login-card .logo-box{
  width:92px!important;
  height:92px!important;
  margin:0 auto 14px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  overflow:visible!important;
  display:grid!important;
  place-items:center!important;
}
#loginPage .login-card .logo-box img{
  width:92px!important;
  height:92px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 6px 14px rgba(16,42,67,.18))!important;
  animation:logoKartuV18619 7s ease-in-out infinite alternate!important;
  will-change:transform;
}
@keyframes logoKartuV18619{
  from{transform:translate3d(0,0,0) rotate(-2.5deg) scale(1)}
  to  {transform:translate3d(0,-9px,0) rotate(2.5deg) scale(1.05)}
}
#loginPage .login-card .logo-box:hover img{
  animation-play-state:paused!important;
  transform:scale(1.1) rotate(0deg)!important;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion:reduce){
  #loginPage .login-card .logo-box img{animation:none!important;transform:none!important}
}

/* =========================================================
   SIMPROV v186.19.9 - GERAK BERJALAN, LINGKARAN, KARTU 3D
   ---------------------------------------------------------
    32.1 Logo olahraga bergerak seperti melangkah
    32.2 Lingkaran biru di belakang kartu dihapus
    32.3 Kartu login 3D
   ========================================================= */

/* ---------------------------------------------------------
   32.1 LOGO OLAHRAGA BERGERAK SEPERTI MELANGKAH
   Pemecahan 2x2 dibatalkan. Logo kembali utuh, tetapi diberi
   gerak melangkah: badan naik-turun seperti langkah kaki,
   disertai condong maju-mundur dan ayunan kecil ke samping.

   Tiga gerak dipisah ke tingkat berbeda supaya tidak saling
   menimpa transform:
     <s> langkah  - naik-turun cepat
     <em> condong - miring maju-mundur, lebih lambat
   --------------------------------------------------------- */
.olahraga-lapis-v18619 i>b>s{
  position:relative;
  background-image:none!important;
  animation:mengapungV18619 var(--dur,22s) ease-in-out infinite alternate;
  animation-delay:var(--del,0s);
}
.olahraga-lapis-v18619 em{
  display:block;
  width:100%;
  height:100%;
  transform-origin:50% 78%;
  animation:condongV18619 var(--cdur,4.4s) ease-in-out infinite alternate;
  animation-delay:var(--cdel,0s);
  will-change:transform;
}
.olahraga-lapis-v18619 em>span{
  display:block;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  animation:langkahV18619 var(--ldur,1.6s) cubic-bezier(.45,0,.55,1) infinite;
  animation-delay:var(--ldel,0s);
  will-change:transform;
}
/* Langkah: naik-turun dengan dua puncak per siklus, seperti
   berat badan berpindah dari kaki satu ke kaki lainnya. */
@keyframes langkahV18619{
  0%  {transform:translate3d(0,0,0)}
  25% {transform:translate3d(0,var(--lnaik,-7px),0)}
  50% {transform:translate3d(0,0,0)}
  75% {transform:translate3d(0,calc(var(--lnaik,-7px) * .62),0)}
  100%{transform:translate3d(0,0,0)}
}
/* Condong: badan miring maju lalu kembali, jauh lebih lambat
   daripada langkahnya. */
@keyframes condongV18619{
  from{transform:rotate(var(--c1,-6deg))}
  to  {transform:rotate(var(--c2,6deg))}
}

/* ---------------------------------------------------------
   32.2 LINGKARAN BIRU DI BELAKANG KARTU DIHAPUS
   Lingkaran conic besar itu peninggalan versi lama. Sekarang
   ruang di belakang kartu justru dibutuhkan logo olahraga.
   --------------------------------------------------------- */
#loginPage.login-page:before{
  display:none!important;
  content:none!important;
}

/* ---------------------------------------------------------
   32.3 KARTU LOGIN 3D
   Kartu dibungkus lapisan tersendiri yang dimiringkan mengikuti
   kursor. Pembungkus dipakai supaya animasi masuk milik kartu
   tidak bertabrakan dengan kemiringan - keduanya sama-sama
   memakai transform.

   Kemiringan dibatasi 5 derajat. Lebih dari itu, kolom isian
   mulai terasa meleset dari kursor saat diklik.
   --------------------------------------------------------- */
.kartu-3d-v18619{
  width:100%;
  max-width:430px;
  transform:
    perspective(1200px)
    rotateY(calc(var(--px,0) * 5deg))
    rotateX(calc(var(--py,0) * -5deg));
  transform-style:preserve-3d;
  transition:transform 380ms cubic-bezier(.16,1,.3,1);
  will-change:transform;
  position:relative;
  z-index:2;
}
/* Bayangan ikut bergeser berlawanan arah kemiringan, sehingga
   kartu terbaca benar-benar terangkat dari halaman. */
#loginPage .login-card{
  box-shadow:
    calc(var(--px,0) * -10px) calc(var(--py,0) * -10px + 18px) 46px rgba(16,42,67,.20),
    0 1px 2px rgba(16,42,67,.08)!important;
  transition:box-shadow 380ms cubic-bezier(.16,1,.3,1);
}
/* Isi kartu diangkat sedikit ke depan supaya ada kedalaman
   nyata di dalam kartu, bukan sekadar bidang datar yang miring. */
#loginPage .login-card .logo-box{transform:translateZ(34px)}
#loginPage .login-card h1{transform:translateZ(24px)}
#loginPage .login-card p{transform:translateZ(16px)}
#loginPage #loginBtn{transform:translateZ(20px)}

@media (prefers-reduced-motion:reduce){
  .olahraga-lapis-v18619 em,
  .olahraga-lapis-v18619 em>span{animation:none!important;transform:none!important}
  .kartu-3d-v18619{transition:none!important;transform:none!important}
  #loginPage .login-card .logo-box,
  #loginPage .login-card h1,
  #loginPage .login-card p,
  #loginPage #loginBtn{transform:none!important}
}