/* Sipa, maskot HSP Finance Hub: halaman status/error (body.sipa-hal) + Sipa kecil di halaman aplikasi.
   Tema ikut pilihan aplikasi (localStorage hsp_tema -> html[data-tema]), bukan tema OS. */
.sipa-hal { --sipa-brand:#0680f3; --sipa-ink:#0b2a55; --sipa-bg:#fff; }
html[data-tema="gelap"] .sipa-hal { --sipa-ink:#eaf3ff; --sipa-bg:#0b1626; }
body.sipa-hal { margin:0; background:var(--sipa-bg); color:var(--sipa-ink); font-family:Montserrat,system-ui,-apple-system,'Segoe UI',Arial,sans-serif; }
.sipa-hal * { box-sizing:border-box; }
.err { min-height:100vh; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:24px 56px; padding:24px 16px; }
.err .txt { max-width:380px; }
.err small { letter-spacing:.12em; font-weight:300; opacity:.7; }
.err h1 { font-size:42px; font-weight:800; margin:8px 0 12px; line-height:1.15; }
.err p { font-size:20px; font-weight:300; margin:0 0 24px; line-height:1.4; }
.err nav { display:flex; gap:20px; flex-wrap:wrap; font-size:14px; }
.err nav a { color:inherit; text-decoration:none; border-bottom:2px solid var(--sipa-brand); padding-bottom:2px; cursor:pointer; }
.err svg { width:min(380px,100%); height:auto; }
@media (max-width:480px) { .err h1 { font-size:32px; } .err p { font-size:17px; } }
/* Sipa kecil + teks (lonceng, indikator sibuk). */
.sipa-mini { display:flex; align-items:center; gap:8px; }
.sipa-mini svg { width:48px; height:auto; flex:none; }
.kosong > .sipa-mini { justify-content:center; text-align:left; }
#sipaSibuk { position:fixed; top:72px; left:50%; transform:translateX(-50%); z-index:1085; padding:2px 16px 2px 6px; border-radius:999px;
  background:var(--bs-body-bg,#fff); color:var(--bs-body-color,#1c2533); font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,.18); }
#sipaSibuk[hidden] { display:none; }
.sipa .fl { animation:sipaFl 3s ease-in-out infinite; }
@keyframes sipaFl { 50% { transform:translateY(-8px); } }
.sipa .shake { animation:sipaShake .5s linear infinite; transform-origin:101px 130px; }
@keyframes sipaShake { 25% { transform:translateX(-3px) rotate(-1.5deg); } 75% { transform:translateX(3px) rotate(1.5deg); } }
.sipa .blink { animation:sipaBlink 4.5s infinite; transform-box:fill-box; transform-origin:center; }
@keyframes sipaBlink { 0%,90% { transform:scaleY(1); } 94%,100% { transform:scaleY(.1); } }
.sipa .tw { animation:sipaTw 1.8s ease-in-out infinite; }
@keyframes sipaTw { 50% { opacity:.25; } }
.sipa .spin { animation:sipaSpin 4s linear infinite; }
@keyframes sipaSpin { to { transform:rotate(360deg); } }
.sipa .wave { animation:sipaWave .8s ease-in-out infinite; transform-origin:150px 120px; }
@keyframes sipaWave { 50% { transform:rotate(-22deg); } }
.sipa .rise { animation:sipaRise 2.4s ease-in infinite; }
@keyframes sipaRise { from { transform:translateY(8px); opacity:.8; } to { transform:translateY(-10px); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .sipa, .sipa * { animation:none !important; } }