.topbar{position:sticky;top:12px;min-height:72px;z-index:20;margin:12px auto 0;max-width:1120px;width:calc(100% - 24px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:10px 16px;border-radius:22px}
.profile{justify-self:end}
.brand{display:flex;align-items:center;justify-content:center;min-width:0}
.brand img{height:50px;width:auto}
.profile{position:relative}
.profile-btn{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid transparent;border-radius:16px;
  padding:8px 12px 8px 14px;cursor:pointer;transition:background .2s,border-color .2s}
.profile-btn:hover,.profile-btn[aria-expanded=true]{background:var(--glass-strong);border-color:var(--glass-border)}
.who{display:flex;flex-direction:column;text-align:left;line-height:1.2}
.who b{font-size:.95rem;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu{position:absolute;right:0;top:calc(100% + 10px);min-width:190px;padding:8px;border-radius:18px;animation:pop .22s var(--ease) both}
.menu[hidden]{display:none}
.menu-item{display:block;width:100%;text-align:left;padding:10px 14px;border-radius:12px;border:0;background:transparent;cursor:pointer;font-size:.92rem}
.menu-item:hover{background:rgba(111,163,239,.18)}
.menu-item.danger{color:var(--danger)}
.welcome{padding:46px 4px 28px}
.eyebrow{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--green);font-weight:700;margin-bottom:10px}
.welcome h1,.page-head h1{font-size:clamp(1.9rem,4.6vw,3rem);letter-spacing:-.025em;line-height:1.1}
.page-head h1{font-size:clamp(1.5rem,3.4vw,2.2rem)}
.lead{color:var(--text-2);margin-top:10px;max-width:60ch}
.cards{margin-top:6px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:22px;scroll-margin-top:100px}
.card{display:flex;flex-direction:column;gap:14px;padding:26px;min-height:210px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s;animation:rise .7s var(--ease) both}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover),inset 0 1px 0 rgba(255,255,255,.8);background:var(--glass-strong)}
.card .ico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,#93bdf8,var(--blue-deep));box-shadow:0 8px 20px rgba(63,127,224,.32),inset 0 1px 0 rgba(255,255,255,.55)}
.card[data-tone="1"] .ico{background:linear-gradient(145deg,#5fcb90,var(--green));box-shadow:0 8px 20px rgba(47,158,91,.3),inset 0 1px 0 rgba(255,255,255,.55)}
.card[data-tone="2"] .ico{background:linear-gradient(145deg,#efc65c,var(--gold));box-shadow:0 8px 20px rgba(214,165,46,.32),inset 0 1px 0 rgba(255,255,255,.55)}
.card h3{font-size:1.2rem;letter-spacing:-.01em}
.card p{color:var(--text-2);font-size:.93rem;flex:1}
.card .go{color:var(--blue-deep);font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:6px}
.card .go svg{transition:transform .3s var(--ease)}.card:hover .go svg{transform:translateX(5px)}
.skeleton{min-height:210px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.85rem;color:var(--text-2);margin:18px 2px 14px}
.crumbs a:hover{color:var(--blue-deep)}.crumbs b{color:var(--text)}.crumbs span{opacity:.5}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.report-area{padding:28px;min-height:320px}
.report-content{overflow-x:auto}
.report-content table{border-collapse:collapse;width:100%}
.report-content th,.report-content td{padding:9px 12px;border-bottom:1px solid var(--glass-edge);text-align:left}
.report-content img{max-width:100%;height:auto}
.report-frame{width:100%;min-height:75vh;border:0;border-radius:16px;background:#fff;display:block}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;align-items:start}
.panel{padding:26px}.panel h2{font-size:1.15rem;margin-bottom:18px}
.ulist{display:flex;flex-direction:column;gap:10px}
.urow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:16px;background:var(--field);border:1px solid var(--glass-edge)}
.urow .info{flex:1;min-width:150px;line-height:1.3}.urow small{color:var(--text-2)}
.urow .act{display:flex;gap:6px;flex-wrap:wrap}
.btn.sm{padding:7px 12px;font-size:.8rem;border-radius:11px}
.btn.danger{color:var(--danger)}
.tag{font-size:.7rem;padding:2px 8px;border-radius:99px;background:rgba(111,163,239,.2);margin-left:6px}
@media (max-width:640px){
  .topbar{top:8px;padding:8px 10px;border-radius:18px}
  .brand img{height:36px}.who b{max-width:92px}.topbar{gap:6px;padding:8px 12px}
  .welcome{padding:30px 2px 20px}.cards{grid-template-columns:1fr;gap:16px}
  .card{min-height:0;padding:22px}.report-area{padding:16px}.wrap{padding:18px 12px 30px}
  .page-head .btn{width:100%}
}

/* Logo terang/gelap: hanya satu yang tampil, mengikuti tema */
.logo-d{display:none!important}
:root[data-theme=dark] .logo-l{display:none!important}
:root[data-theme=dark] .logo-d{display:block!important}
.logo-l{display:block}
/* Footer polos di tengah bawah: hak cipta, bahasa (ID/EN), tema gelap/terang */
.site-foot{width:100%;max-width:1120px;margin:8px auto 0;padding:24px 20px 32px;display:flex;align-items:center;justify-content:center;gap:14px 16px;flex-wrap:wrap}
.copy{color:var(--text-2);font-size:1rem}
.pill,.circle{display:inline-grid;place-items:center;height:38px;border:2px solid var(--text-3);border-radius:99px;background:transparent;
  color:var(--text-2);cursor:pointer;font-weight:500;transition:background .2s,color .2s,border-color .2s}
.pill{padding:0 18px;font-size:.92rem;letter-spacing:.02em}.circle{width:38px;padding:0;border-radius:50%}
.pill:hover,.circle:hover{background:var(--glass-strong);color:var(--text);border-color:var(--text-2)}
@media (max-width:640px){.site-foot{padding:20px 14px 28px}.copy{width:100%;text-align:center;font-size:.92rem}}

/* Laporan HTML penuh: tampil menyatu dengan latar portal, tanpa bingkai kaca */
.report-area:has(.report-frame){background:none;border:0;box-shadow:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;min-height:0}
.report-area:has(.report-frame)::before,.report-area:has(.report-frame)::after{display:none}
.report-area:has(.report-frame) .report-content{overflow:visible}
.report-frame{background:transparent;min-height:480px;border-radius:0}

/* Setelah login: tampilan penuh (lebar mengikuti layar) + mode gelap lebih terang */
body.app{--g:clamp(12px,2vw,32px)}
body.app .topbar{max-width:1760px;width:calc(100% - 2*var(--g))}
body.app .wrap{max-width:1760px;padding-left:calc(var(--g) + 8px);padding-right:calc(var(--g) + 8px)}
body.app .site-foot{max-width:1760px}
body.app .cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
@media (max-width:640px){body.app .wrap{padding-left:calc(var(--g) + 2px);padding-right:calc(var(--g) + 2px)}}
:root[data-theme=dark] body.app{
  --text:#f4f7fd;--text-2:#c3cee2;--text-3:#93a1bb;
  --bg-1:#1b2a46;--bg-2:#243552;
  --glass:rgba(255,255,255,.11);--glass-strong:rgba(255,255,255,.18);
  --glass-border:rgba(255,255,255,.28);--glass-edge:rgba(255,255,255,.15);
  --field:rgba(255,255,255,.12);
  --orb1:rgba(95,150,240,.55);--orb2:rgba(150,172,208,.38);--orb3:rgba(70,180,125,.38);
}
:root[data-theme=dark] body.app .glass::before{opacity:.4}
:root[data-theme=dark] body.app .card .go{color:#b4d0ff}

.card[data-tone="3"] .ico{background:linear-gradient(145deg,#6fe0d4,#2bb3a8);box-shadow:0 8px 20px rgba(43,179,168,.3),inset 0 1px 0 rgba(255,255,255,.55)}
.grps{display:flex;flex-direction:column;gap:26px}
.gh{font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin:2px 6px 12px}
.grp .cards{margin-top:0}