:root{--bg:#f5f7fb;--surface:#fff;--navy:#172c42;--ink:#293a4f;--muted:#8695a7;--teal:#07827b;--teal-dark:#086e69;--teal-pale:#eaf7f4;--border:#e3eaf0;--shadow:0 5px 24px rgba(31,50,75,.035);--radius:12px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Segoe UI",Arial,Helvetica,sans-serif;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #71c9be;outline-offset:3px}a{color:inherit}svg.icon{height:20px;width:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.app-shell{min-height:100vh}.topbar{height:76px;position:sticky;z-index:40;top:0;display:flex;align-items:center;justify-content:space-between;padding:0 29px;background:var(--surface);border-bottom:1px solid var(--border)}.header-left,.header-right{display:flex;align-items:center}.header-left{gap:12px}.header-right{gap:17px}.brand-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#078a82,#0a6f70);display:grid;place-items:center;color:#fff;box-shadow:0 4px 12px rgba(7,130,123,.17)}.brand-icon .icon{width:24px;height:24px}.brand-copy{display:flex;flex-direction:column;gap:1px}.brand-title{font-size:15px;letter-spacing:-.25px;font-weight:800;color:#182d43}.brand-caption{font-size:11px;color:#93a0af}.demo-pill{border-radius:8px;background:#e7f7f0;border:1px solid #d6f0e6;padding:7px 11px;font-size:11px;font-weight:750;color:#0c806c;display:flex;align-items:center;gap:6px;white-space:nowrap}.demo-dot{width:6px;height:6px;background:#0b9f77;border-radius:50%}.header-monogram{border-radius:50%;height:35px;width:35px;display:grid;place-items:center;background:#e9eef4;color:#425970;font-size:11px;font-weight:800}.icon-button{border:0;background:transparent;color:#4d6073;display:grid;place-items:center;padding:8px;border-radius:8px}.icon-button:hover{background:#f0f4f5}.mobile-toggle{display:none}.page-layout{display:flex;align-items:flex-start;min-height:calc(100vh - 76px)}.sidebar{width:273px;flex:none;background:#fff;border-right:1px solid var(--border);height:calc(100vh - 76px);position:sticky;top:76px;display:flex;flex-direction:column;justify-content:space-between}.sidebar-scroll{min-height:0;overflow-y:auto;padding:31px 15px 20px}.sidebar-eyebrow{margin:0 12px;color:#8998a9;font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase}.sidebar-intro{padding:10px 12px 20px;color:#96a1ae;font-size:12px;line-height:1.65}.criteria-nav{display:flex;flex-direction:column;gap:5px}.criterion{width:100%;border:0;background:transparent;display:flex;align-items:center;text-align:left;padding:11px 11px;gap:12px;border-radius:10px;color:#708095;transition:background .15s,color .15s}.criterion:hover{background:#f2f7f7;color:#137b76}.criterion.active{background:var(--teal-pale);color:#087b73;font-weight:750}.criterion-number{height:30px;width:30px;flex:none;border-radius:8px;background:#f1f4f7;color:#8292a6;font-size:11px;font-weight:800;display:grid;place-items:center}.criterion.active .criterion-number{background:#0c8680;color:white}.criterion-label{font-size:12.5px;line-height:1.45;flex:1;min-width:0}.criterion-arrow{font-size:20px;color:#96a7af;line-height:1}.criterion.active .criterion-arrow{color:#0d8a80}.sidebar-bottom{padding:15px}.help-panel{border:1px solid #e1f0ed;border-radius:10px;display:flex;gap:10px;align-items:flex-start;background:#f4faf9;padding:13px 12px;color:#6d8d8a;font-size:11px;line-height:1.6}.help-panel .icon{width:17px;height:17px;color:#22958b;margin-top:1px}.version{display:block;text-align:center;margin-top:13px;font-size:10px;color:#a7b1bc}.main-area{flex:1;min-width:0;min-height:calc(100vh - 76px)}.main-inner{max-width:1220px;padding:35px 43px 30px;margin:0 auto}.breadcrumb{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-bottom:25px;font-size:11px;color:#9ba9b6}.breadcrumb .icon{width:14px;height:14px;color:#8da1b1}.breadcrumb strong{color:#0a8078;font-weight:750}.breadcrumb-sep{color:#ccd4dd}.title-area{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:27px}.eyebrow{display:flex;gap:9px;align-items:center;color:#119287;font-size:10px;font-weight:800;letter-spacing:1.8px;margin-bottom:9px}.eyebrow-line{height:2px;width:16px;background:#0c988c}.title-area h1{color:#183148;font-size:clamp(23px,2.3vw,31px);line-height:1.2;letter-spacing:-.85px;font-weight:800;margin:0 0 10px}.title-area p{margin:0;color:#8998a7;font-size:13px;line-height:1.7}.title-decoration{height:61px;width:61px;border-radius:18px;border:1px solid #e3efed;background:linear-gradient(140deg,#fff,#edf8f5);display:grid;place-items:center;color:#8cbbb2;flex:none}.title-decoration .icon{height:30px;width:30px;stroke-width:1.2}.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-bottom:34px}.stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;align-items:center;gap:15px;box-shadow:var(--shadow);min-width:0}.stat-icon{height:46px;width:46px;flex:none;border-radius:12px;display:grid;place-items:center}.stat-icon .icon{height:22px;width:22px}.stat-icon.turquoise{background:#e6f6f2;color:#068b7d}.stat-icon.blue{background:#eaf2ff;color:#5689c2}.stat-icon.amber{background:#fff4e3;color:#c38b37}.stat-detail{min-width:0;display:flex;flex-direction:column;gap:2px}.stat-detail strong{color:#1e344a;font-size:24px;line-height:1.15;letter-spacing:-.6px;font-weight:850}.stat-detail span{font-size:11px;color:#8a98a8}.documents-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:17px}.documents-toolbar h2{font-size:17px;color:#23384b;margin:0 0 3px;letter-spacing:-.25px}.toolbar-subtitle{margin:0;color:#9cabb7;font-size:11px}.toolbar-actions{display:flex;gap:10px;align-items:center}.search-field{height:41px;min-width:280px;max-width:340px;display:flex;align-items:center;background:#fff;border-radius:9px;border:1px solid #dae4ea;padding:0 12px;gap:9px;transition:border-color .15s}.search-field:focus-within{border-color:#67b8af;box-shadow:0 0 0 3px rgba(20,153,139,.09)}.search-field .icon{width:16px;height:16px;color:#90a3b5}.search-field input{outline:0;border:0;width:100%;font-size:12px;min-width:0;background:transparent;color:#294052}.search-field input::placeholder{color:#a6b2bf}.toggle-groups{border:1px solid var(--border);height:41px;padding:0 12px;background:#fff;color:#688193;border-radius:9px;font-size:11px;font-weight:700;white-space:nowrap}.toggle-groups:hover{background:#f4faf8;border-color:#b8dfd9;color:#09857b}.document-groups{display:flex;flex-direction:column;gap:13px}.doc-group{border:1px solid var(--border);background:#fff;overflow:hidden;border-radius:11px;box-shadow:var(--shadow)}.group-button{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:18px 19px;border:0;background:#fff}.group-button:hover{background:#fcfdfd}.group-title{flex:1;color:#2d3f52;font-weight:770;font-size:13px;line-height:1.5}.group-badge{border-radius:20px;background:#f2f5f7;color:#8393a3;padding:5px 9px;font-size:10px;font-weight:650;white-space:nowrap}.down-icon{display:grid;place-items:center;color:#8fa0ad;transition:transform .2s}.down-icon .icon{width:17px;height:17px}.down-icon.open{transform:rotate(180deg)}.group-items{border-top:1px solid #edf1f4}.document-entry+.document-entry{border-top:1px solid #edf1f4}.document-button{display:flex;gap:13px;align-items:center;width:100%;padding:15px 19px;text-align:left;border:0;background:#fff}.document-button:hover{background:#f9fcfc}.doc-icon{width:38px;height:40px;border-radius:9px;background:#eaf6f0;color:#178d80;display:grid;place-items:center;flex:none}.doc-icon .icon{width:19px;height:19px}.doc-text{flex:1;min-width:0}.doc-name{font-size:12.5px;color:#405468;font-weight:740;line-height:1.45}.doc-hint{display:block;font-size:10.5px;color:#9aabba;margin-top:4px}.document-type{font-size:9px;letter-spacing:.45px;font-weight:750;color:#8a9cad;background:#f2f5f8;border:1px solid #eaf0f4;padding:5px 8px;border-radius:5px;margin-right:4px}.file-items{background:#f9fbfc;border-top:1px solid #edf1f3;padding:6px 19px 10px 70px}.file-item{padding:11px 1px;display:flex;align-items:center;gap:11px;min-width:0}.file-item+.file-item{border-top:1px dashed #e5ecf0}.file-icon{color:#7695aa}.file-icon .icon{width:16px;height:16px}.file-label{font-size:12px;color:#586f83;flex:1;min-width:0}.file-tag{border-radius:5px;background:#edf3f7;color:#879aa9;font-size:9px;font-weight:700;padding:3px 6px}.file-link{border:0;display:inline-flex;align-items:center;gap:5px;border-radius:6px;background:#e9f7f3;color:#087e72;font-size:10px;font-weight:750;padding:8px 10px;text-decoration:none;white-space:nowrap}.file-link:hover{background:#d7f0e9}.file-link .icon{width:12px;height:12px}.file-link.not-set{background:#f0f3f6;color:#8a99a7}.file-link.not-set:hover{background:#e7edf1;color:#586d7d}.empty-state{border:1px dashed #dbe4e9;border-radius:13px;padding:44px 24px;text-align:center;background:#fff;color:#8c9aaa}.empty-state .icon{width:28px;height:28px;color:#93acae;margin-bottom:11px}.empty-state strong{display:block;font-size:14px;color:#617386;margin-bottom:4px}.empty-state p{font-size:12px;margin:0}.footnote{display:flex;align-items:flex-start;gap:10px;margin-top:25px;background:#edf8f6;border:1px solid #d7ece7;border-radius:10px;padding:14px 17px;color:#658681;font-size:11.5px;line-height:1.65}.footnote .icon{height:18px;width:18px;flex:none;color:#16897f;margin-top:2px}.footnote p{margin:0}.footnote strong{color:#367f79}.footnote code{background:#e2f0ec;border-radius:4px;padding:1px 4px;color:#27756e}.page-footer{display:flex;justify-content:space-between;gap:10px;margin-top:34px;padding-top:15px;border-top:1px solid #e2eaf0;color:#a4b0bc;font-size:10px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#17374a;color:#fff;border-radius:10px;box-shadow:0 12px 32px #162a3e32;padding:12px 18px;max-width:min(90vw,500px);z-index:100;font-size:12px;text-align:center}.toast[hidden],.sidebar-backdrop[hidden]{display:none!important}
@media(max-width:1110px){.main-inner{padding:30px 27px}.sidebar{width:240px}.search-field{min-width:220px}.stat-card{padding:15px;gap:11px}.stat-icon{width:41px;height:41px}}
@media(max-width:850px){.sidebar{width:208px}.sidebar-scroll{padding:23px 9px}.criterion{padding:10px 7px;gap:8px}.criterion-number{width:26px;height:27px}.criterion-label{font-size:11px}.main-inner{padding:25px 19px}.stat-grid{gap:8px}.stat-card{padding:12px 10px}.stat-detail strong{font-size:20px}.stat-detail span{font-size:10px}.documents-toolbar{align-items:stretch;flex-direction:column}.toolbar-actions{justify-content:space-between}.search-field{flex:1;max-width:none}}
@media(max-width:650px){.topbar{height:66px;padding:0 13px}.mobile-toggle{display:grid;margin-right:1px}.brand-icon{width:38px;height:38px;border-radius:10px}.brand-title{font-size:13px}.brand-caption{font-size:10px}.header-right{gap:8px}.header-monogram{display:none}.demo-pill{font-size:10px;padding:5px 8px}.page-layout{min-height:calc(100vh - 66px)}.sidebar{position:fixed;top:66px;bottom:0;left:0;height:calc(100vh - 66px);width:min(310px,86vw);z-index:61;transform:translateX(-102%);transition:transform .2s ease;box-shadow:10px 0 28px #1e384018}.sidebar.mobile-open{transform:translateX(0)}.sidebar-backdrop:not([hidden]){display:block;position:fixed;inset:66px 0 0;background:#112b4266;z-index:60}.sidebar-scroll{padding:22px 14px}.criterion{gap:12px;padding:11px}.criterion-label{font-size:12px}.main-inner{padding:24px 16px 24px}.breadcrumb{font-size:10px;gap:7px;margin-bottom:21px}.title-area{margin-bottom:23px}.title-area h1{font-size:24px}.title-area p{font-size:12px}.title-decoration{display:none}.stat-grid{gap:8px;margin-bottom:26px}.stat-card{flex-direction:column;align-items:flex-start;gap:9px;min-height:115px}.stat-icon{height:34px;width:34px;border-radius:8px}.stat-icon .icon{height:17px;width:17px}.stat-detail strong{font-size:21px}.stat-detail span{font-size:10px;line-height:1.3}.documents-toolbar h2{font-size:16px}.group-button{padding:14px 12px}.group-title{font-size:12px}.group-badge{padding:4px 7px;font-size:9px}.document-button{padding:12px 11px;gap:9px}.doc-icon{width:31px;height:34px}.doc-icon .icon{width:16px;height:16px}.doc-name{font-size:11.5px}.doc-hint{font-size:9.5px}.document-type{display:none}.file-items{padding-left:16px;padding-right:11px}.file-label{font-size:11px}.file-item{gap:7px}.file-link{padding:7px;font-size:9.5px}.page-footer{flex-direction:column;gap:4px}}
@media(max-width:390px){.brand-title{font-size:12px}.brand-caption{font-size:9px}.demo-pill{font-size:9px}.stat-grid{gap:6px}.stat-card{padding:9px}.toolbar-actions{flex-direction:column;align-items:stretch}.search-field{min-width:0;width:100%}.toggle-groups{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* v2.0: akses masuk admin melalui avatar AC */
.admin-avatar{height:36px;width:36px;border-radius:50%;background:#eaf2f7;color:#294c5c;border:1px solid #d7e6eb;text-decoration:none;display:grid;place-items:center;font-weight:800;font-size:11px;transition:background .15s}
.admin-avatar:hover{background:#d9f2ed;color:#087d70}
@media(max-width:650px){.admin-avatar{height:32px;width:32px}}


/* === FEBI v3.4: Header dashboard publik dengan slot logo yang stabil ===
 * Gunakan ukuran kotak logo sebagai flex-basis, bukan hanya ukuran gambar.
 * !important dipakai untuk menimpa aturan header lama/inline di index.php v3.3.
 */
.topbar .header-left {
  display:flex!important;
  flex:1 1 auto!important;
  align-items:center!important;
  gap:16px!important;
  min-width:0!important;
}
.topbar .brand-icon,
.topbar .brand-icon.febi-logo-slot {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 144px!important;
  width:144px!important;
  min-width:144px!important;
  height:64px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.topbar .brand-icon img,
.topbar .brand-icon .febi-header-logo {
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
.topbar .brand-copy {
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  justify-content:center!important;
  gap:2px!important;
  min-width:0!important;
  margin:0!important;
}
.topbar .brand-copy .brand-title,
.topbar .brand-copy .brand-caption {
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  margin:0!important;
}
.topbar .header-right { flex:0 0 auto!important; }
@media (max-width:650px) {
  .topbar .header-left { gap:8px!important; }
  .topbar .brand-icon,
  .topbar .brand-icon.febi-logo-slot {
    flex:0 0 88px!important;
    width:88px!important;
    min-width:88px!important;
    height:48px!important;
  }
  .topbar .brand-copy .brand-title { font-size:12px!important; }
  .topbar .brand-copy .brand-caption { font-size:10px!important; }
}
@media (max-width:390px) {
  .topbar .header-left { gap:6px!important; }
  .topbar .brand-icon,
  .topbar .brand-icon.febi-logo-slot {
    flex:0 0 70px!important;
    width:70px!important;
    min-width:70px!important;
    height:42px!important;
  }
  .topbar .brand-copy .brand-title { font-size:11px!important; }
  .topbar .brand-copy .brand-caption { font-size:9px!important; }
}