:root{--kanvas:#f4f6f3;--garis:#e4e9e4;--tinta:#10241a;--redup:#6b7a71;--merek:#16a34a;--merek-lembut:#dcfce7;--merek-gelap:#166534;--rel:5.25rem;--kepala:3.75rem;--huruf-judul:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}body{background:var(--kanvas) !important;color:var(--tinta);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}#main-header #header-title,#app-shell h2,#app-shell h3,#app-shell h4,#bottom-nav span{font-family:var(--huruf-judul);letter-spacing:-.005em}#main-header{padding-top:max(1rem, env(safe-area-inset-top)) !important}#app-shell .menu-tile,#app-shell button,#bottom-nav button{transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease,color .16s ease}#app-shell .menu-tile:active,#bottom-nav button:active{transform:scale(.97)}#app-shell .menu-tile{border-color:var(--garis) !important;box-shadow:0 1px 2px rgba(16,36,26,.04),0 6px 16px -10px rgba(16,36,26,.12) !important}#app-shell :focus-visible,#bottom-nav :focus-visible,#main-header :focus-visible{outline:2px solid var(--merek);outline-offset:2px;border-radius:.75rem}@media (hover: hover){#app-shell .menu-tile:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,36,26,.05),0 14px 28px -14px rgba(16,36,26,.22) !important}}@media (prefers-reduced-motion: reduce){#app-shell *,#bottom-nav *{transition:none !important;animation:none !important}}.ber-tata{display:flex;flex-direction:column}.ber-kiri,.ber-kanan{display:contents}.ber-salam{order:1}#beranda-semester{order:2}#beranda-story{order:3}#beranda-lapak{order:4}#idcard-main{order:5}#idcard-main + p{order:6}.ber-kanan > #special-menu-section,.ber-kanan > #beranda-panel-admin,.ber-kanan > div:not([id]),.ber-kanan > #berita-list{order:7}#bottom-nav:not(.hidden){left:50% !important;right:auto !important;transform:translateX(-50%);bottom:max(.6rem, env(safe-area-inset-bottom)) !important;width:calc(100% - 1.5rem) !important;max-width:26.5rem !important;padding:.3rem;gap:.1rem;border:1px solid var(--garis) !important;border-radius:1.4rem;background:rgba(255,255,255,.9) !important;-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 10px 30px -12px rgba(16,36,26,.28),0 2px 6px rgba(16,36,26,.06) !important}#bottom-nav button{flex:1 1 0;min-width:0;gap:.15rem !important;padding:.4rem 0 .35rem !important;border-radius:1.1rem;color:#8a968f}#bottom-nav button.hidden{display:none !important}#bottom-nav button i{display:grid;place-items:center;width:3.1rem;height:1.8rem;border-radius:999px;font-size:1.05rem !important;transition:background-color .2s ease,color .2s ease}#bottom-nav button span{font-size:.64rem !important;font-weight:700}#bottom-nav button.text-green-600{color:var(--merek-gelap) !important}#bottom-nav button.text-green-600 i{background:var(--merek-lembut);color:var(--merek)}.bnav-content{padding-bottom:6.5rem !important}@media (min-width: 480px){#app-shell:not(.hidden),#main-header:not(.hidden){max-width:40rem !important}}@media (min-width: 600px),(orientation: landscape) and (min-width: 540px){.fixed.inset-0.max-w-md{max-width:none !important;margin:0 !important}.fixed.inset-0.max-w-md:not(.bg-white) > div{max-width:42rem;margin-left:auto;margin-right:auto}.fixed.inset-0.max-w-md.bg-white{max-width:52rem !important;margin:0 auto !important;box-shadow:0 0 0 100vmax rgba(0,0,0,.55)}.fixed.inset-0.max-w-md.items-end > div{max-width:34rem}#keuangan-modal > div,#keuangan-detail-modal > div{max-width:56rem !important}#keuangan-form-modal > div{max-width:40rem !important}.keu-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:.5rem}.keu-grid > *{margin-top:0 !important}.keu-grid > p{grid-column:1/-1}}@media (min-width: 700px),(orientation: landscape) and (min-width: 540px){#bottom-nav:not(.hidden){top:0 !important;bottom:0 !important;left:0 !important;right:auto !important;transform:none;width:var(--rel) !important;max-width:none !important;margin:0 !important;display:flex !important;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:.35rem;padding:calc(var(--kepala) + .75rem) .5rem 1rem calc(.5rem + env(safe-area-inset-left)) !important;border:0 !important;border-right:1px solid var(--garis) !important;border-radius:0;background:#fff !important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none !important;overflow-y:auto;scrollbar-width:none;z-index:40}#bottom-nav::-webkit-scrollbar{display:none}#bottom-nav::before{content:"";position:absolute;top:.7rem;left:calc(50% + env(safe-area-inset-left) / 2);transform:translateX(-50%);width:2.4rem;height:2.4rem;border-radius:.9rem;background:linear-gradient(140deg, var(--merek), var(--merek-gelap));box-shadow:0 6px 14px -6px rgba(22,101,52,.6)}#bottom-nav::after{content:"P";position:absolute;top:.7rem;left:calc(50% + env(safe-area-inset-left) / 2);transform:translateX(-50%);width:2.4rem;height:2.4rem;display:grid;place-items:center;color:#fff;font:800 1.05rem var(--huruf-judul)}#bottom-nav button{flex:0 0 auto;padding:.5rem 0 .45rem !important}#bottom-nav button span{font-size:.6rem !important}#bottom-nav button:hover{background:#f5f8f5}#main-header:not(.hidden){position:fixed !important;top:0;left:var(--rel);right:0;height:var(--kepala);width:auto !important;max-width:none !important;margin:0 !important;border-radius:0 !important;padding:0 max(1.5rem, env(safe-area-inset-right)) 0 1.5rem !important;z-index:35;box-shadow:0 1px 0 rgba(0,0,0,.06),0 8px 24px -18px rgba(16,36,26,.5) !important}#main-header #header-title{font-size:1.05rem !important}#main-header #header-role-tag{font-size:.68rem !important}#app-shell:not(.hidden){max-width:none !important;width:auto !important;margin:0 0 0 var(--rel) !important;padding:calc(var(--kepala) + 1.25rem) max(1.5rem, env(safe-area-inset-right)) 2rem 1.5rem !important}#app-shell .bnav-content{max-width:76rem;margin-left:auto;margin-right:auto;padding-bottom:1.5rem !important}#app-shell .bnav-content > .px-4{padding-left:0 !important;padding-right:0 !important;padding-top:0 !important}#bnav-biodata{max-width:60rem !important}#bnav-tambahan{max-width:46rem !important}.ber-tata{display:grid !important;grid-template-columns:minmax(18rem, 24rem) minmax(0, 1fr);gap:2rem;align-items:start}.ber-kiri,.ber-kanan{display:block;min-width:0}#berita-list{margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important}#bnav-layanan .grid.grid-cols-2,#special-menu-grid{grid-template-columns:repeat(auto-fill, minmax(13.5rem, 1fr)) !important;gap:.85rem !important}#bnav-layanan .menu-tile,#special-menu-grid > *{flex-direction:row !important;align-items:center !important;text-align:left !important;gap:.9rem !important;padding:.85rem 1rem !important;min-height:4.4rem}#bnav-layanan .menu-tile > div:first-of-type,#special-menu-grid > * > div:first-child{flex-shrink:0;margin:0 !important}#bnav-layanan .menu-tile h4{font-size:.88rem !important}#bnav-layanan .menu-tile p{font-size:.72rem !important;line-height:1.25 !important}#bnav-layanan #layanan-kategori-list > section{margin-bottom:1.5rem !important}#bnav-layanan #layanan-kategori-list > section > h3{font-size:.95rem;margin-bottom:.6rem !important}body:has(#screen-login:not(.hidden)){background:linear-gradient(135deg, #16a34a, #065f46) !important}#screen-login > .min-h-screen{max-width:30rem !important}}@media (min-width: 700px) and (min-height: 600px),(orientation: landscape) and (min-width: 540px) and (min-height: 600px){.ber-kiri{position:sticky;top:calc(var(--kepala) + 1.25rem)}}@media (orientation: landscape) and (max-height: 480px){:root{--rel:4.5rem;--kepala:3rem}#bottom-nav:not(.hidden){padding-top:.5rem !important;gap:.1rem;justify-content:space-evenly}#bottom-nav::before,#bottom-nav::after{display:none}#bottom-nav button{padding:.2rem 0 !important}#bottom-nav button i{height:1.55rem;width:2.7rem;font-size:.95rem !important}#bottom-nav button span{font-size:.58rem !important}#main-header img[data-brand-logo]{width:1.9rem !important;height:1.9rem !important}#app-shell:not(.hidden){padding-top:calc(var(--kepala) + .9rem) !important}.ber-tata{grid-template-columns:minmax(16rem, 20rem) minmax(0, 1fr);gap:1.25rem}}@media (min-width: 1200px) and (min-height: 560px){:root{--rel:15rem;--kepala:4.25rem}#bottom-nav:not(.hidden){padding:5.25rem .75rem 1rem !important;gap:.25rem}#bottom-nav::before{content:"PPMI Madinah";top:1.35rem;left:1.5rem;transform:none;width:auto;height:auto;background:none;box-shadow:none;border-radius:0;font:800 1.1rem var(--huruf-judul);color:var(--merek-gelap);letter-spacing:-.01em}#bottom-nav::after{content:"Aplikasi Terpadu";top:auto;bottom:1rem;left:1.5rem;transform:none;width:auto;height:auto;display:block;font:500 .65rem system-ui,sans-serif;color:#9ca3af}#bottom-nav button{flex-direction:row !important;justify-content:flex-start !important;gap:.6rem !important;padding:.55rem .75rem !important;border-radius:.9rem}#bottom-nav button i{width:2.4rem;height:2.1rem;border-radius:.7rem}#bottom-nav button span{font-size:.86rem !important}#bottom-nav button.text-green-600{background:#f0fdf4}#bottom-nav button.text-green-600 i{background:transparent}#main-header:not(.hidden){padding:0 2rem !important}#app-shell:not(.hidden){padding:calc(var(--kepala) + 1.5rem) 2rem 2rem !important}.ber-tata{grid-template-columns:minmax(20rem, 26rem) minmax(0, 1fr);gap:2.5rem}}@media (min-width: 760px){#bnav-biodata .bio-tab:not(.hidden){display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:1rem 1.25rem;align-items:start}#bnav-biodata .bio-tab > *{margin-top:0 !important;min-width:0}#bnav-biodata .bio-tab > h3,#bnav-biodata .bio-tab > .pt-2,#bnav-biodata .bio-tab > [id^="bio-alert"],#bnav-biodata .bio-tab > :has(textarea){grid-column:1/-1}#bnav-biodata .bio-tab > .pt-2{width:100%;max-width:26rem;justify-self:end}}