/* Sahabat Nugas — tema putih bersih (dashboard /app). Hapus <link> ini di app.html untuk rollback. */
:root,:root[data-theme="dark"],:root:not([data-theme="light"]){
  --paper:#F6F8FC; --sheet:#FFFFFF; --ink:#12213F; --ink-2:#3B4A68; --mute:#6A7690; --line:#E5EAF3;
  --blue:#2F6BFF; --blue-soft:#EAF1FF; --red:#D92D45; --red-soft:#FDECEF; --green:#12935F; --green-soft:#E3F6EE;
  --amber:#A86A00; --amber-soft:#FFF4DB; --hl:#FFE98A; --r-sm:10px; --r:16px;
  --shadow:0 1px 2px rgba(18,33,63,.04),0 8px 24px rgba(18,33,63,.06);
  --shadow-up:0 2px 4px rgba(18,33,63,.05),0 14px 32px rgba(47,107,255,.12);
  --ease:cubic-bezier(.2,.8,.2,1); color-scheme:light;
}
body{background:var(--paper);background-image:radial-gradient(900px 420px at 85% -10%,#E6EEFF 0,transparent 70%)}
aside{background:#fff!important;border-right:1px solid var(--line)!important;padding:22px 14px!important}
.logo{font-size:1.05rem;letter-spacing:-.01em}
.navgrp{text-transform:uppercase;letter-spacing:.08em;font-size:.68rem!important}
aside a.nav{transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);border-radius:12px!important}
aside a.nav:hover{background:var(--blue-soft)!important;color:var(--blue)!important;transform:translateX(2px)}
aside a.nav[aria-current="page"]{background:var(--blue)!important;color:#fff!important;box-shadow:0 6px 16px rgba(47,107,255,.28)}
aside a.nav.audit-nav{border:1.5px solid var(--red-soft);background:var(--red-soft);color:var(--red)}
aside a.nav.audit-nav[aria-current="page"]{background:var(--red)!important;box-shadow:0 6px 16px rgba(217,45,69,.28)}
.wallets{background:var(--paper);border:1px solid var(--line)!important;border-radius:14px;padding:14px!important;margin:10px 4px 0}
.panel{border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--shadow);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.panel:hover{box-shadow:var(--shadow-up)}
.panel.strong{border:1.5px solid var(--blue)!important}
.btn{border-radius:12px;border-color:var(--blue);background:var(--blue);color:#fff;transition:transform .15s var(--ease),box-shadow .2s var(--ease),filter .2s}
.btn:hover{filter:none;transform:translateY(-1px);box-shadow:0 8px 20px rgba(47,107,255,.3)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue);box-shadow:none}
.btn.red{background:var(--red);border-color:var(--red)}
input,textarea,select{border-radius:12px;border-color:var(--line);transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px rgba(47,107,255,.14)}
.badge{border-radius:999px;padding:.45em .8em}
.seg{border-color:var(--line);border-radius:12px}
.seg label:has(input:checked){background:var(--blue);color:#fff}
.steps button[aria-selected="true"]{color:var(--blue);border-bottom-color:var(--blue)}
.bar i b{background:linear-gradient(90deg,var(--blue),#6AA0FF);transform-origin:left;animation:grow .9s var(--ease) both}
.toast{border-radius:14px;box-shadow:var(--shadow-up)}
th{text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}
/* hero beranda */
.ns-hero{display:flex;align-items:center;gap:20px;background:linear-gradient(120deg,#fff 40%,#EAF1FF);border:1px solid var(--line);border-radius:22px;padding:22px 26px;margin-bottom:20px;box-shadow:var(--shadow);overflow:hidden}
.ns-hero h2{margin:0 0 6px}.ns-hero p{margin:0;color:var(--ink-2)}
.ns-hero img{width:124px;height:auto;flex:none;margin-left:auto;animation:float 3.6s ease-in-out infinite}
@media(max-width:640px){.ns-hero{padding:18px}.ns-hero img{width:84px}}
/* masuk halus */
#view>*{animation:rise .5s var(--ease) both}
#view>*:nth-child(2){animation-delay:.05s}#view>*:nth-child(3){animation-delay:.1s}#view>*:nth-child(4){animation-delay:.15s}#view>*:nth-child(n+5){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.hb{position:relative!important;border-radius:22px!important;box-shadow:var(--shadow-up)}
.ns-mascot{position:absolute;right:300px;bottom:0;width:110px;height:auto;pointer-events:none;animation:float 3.6s ease-in-out infinite}
@media(max-width:1100px){.ns-mascot{display:none}}