:root{--latar:#f3f5fb;--permukaan:#fff;--permukaan-lembut:#eef2fb;--tinta:#16203a;--tinta-2:#34415d;--kabut:#5b667f;--kabut-redup:#8c97aa;--garis:#e3e8f2;--garis-tebal:#cbd5e5;--aksen:#1e40af;--aksen-gelap:#17348c;--organik:#12854f;--anorganik:#b47708;--telat:#d92d20;--telat-latar:#fdecea;--radius:1.25rem;--radius-kecil:.875rem;--tap:48px;--mono:ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;--teks:"Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{min-height:100%}body{background:var(--latar);color:var(--tinta);font-family:var(--teks);text-rendering:optimizelegibility;touch-action:manipulation;overscroll-behavior-y:none;margin:0;font-size:16px;line-height:1.5}h1,h2,h3,p{margin:0}button{font-family:inherit;font-size:inherit;cursor:pointer;color:inherit;background:0 0;border:none}:focus-visible{outline:2px solid var(--aksen);outline-offset:3px}.layar{min-height:100vh;background:var(--latar);max-width:28rem;min-height:100dvh;padding-bottom:env(safe-area-inset-bottom);flex-direction:column;margin:0 auto;display:flex}.bar-atas{z-index:20;padding:max(1.25rem, env(safe-area-inset-top)) 1.25rem 1.375rem;background:linear-gradient(135deg, var(--aksen) 0%, var(--aksen-gelap) 100%);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:0;border-radius:0 0 2rem 2rem;justify-content:space-between;align-items:center;gap:.75rem;display:flex;position:sticky;top:0;overflow:hidden;box-shadow:0 18px 34px -20px #1e40afb8}.bar-atas:after{content:"";border:1px solid #ffffff26;border-radius:999px;width:9rem;height:9rem;position:absolute;top:auto;bottom:-3rem;left:auto;right:-2rem}.merek-blok{z-index:1;min-width:0;position:relative}.bar-atas-aksi{z-index:1;justify-content:flex-end;align-items:center;gap:.5rem;min-width:0;display:inline-flex;position:relative}.keluar{color:#ffffffd6;background:#ffffff1f;border-radius:.75rem;min-height:2rem;padding:0 .625rem;font-size:.75rem;font-weight:800}.merek{letter-spacing:0;text-transform:uppercase;color:#fff;align-items:center;gap:.5rem;font-size:.875rem;font-weight:900;display:flex}.merek:before{content:"";background:#fff;border-radius:.25rem;width:.75rem;height:.75rem;box-shadow:0 0 0 4px #ffffff24}.merek-sub{color:#ffffffc7;white-space:nowrap;margin-top:.125rem;font-size:.6875rem;font-weight:700;display:block}.pwa-controls{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.pwa-controls[data-compact=true]{flex-wrap:nowrap;justify-content:flex-end;gap:.3125rem}.pwa-control{background:var(--permukaan);min-height:2.25rem;color:var(--aksen);white-space:nowrap;border:1px solid #1e40af29;border-radius:.875rem;justify-content:center;align-items:center;padding:0 .75rem;font-size:.8125rem;font-weight:800;display:inline-flex;box-shadow:0 8px 18px #16203a14}.pwa-control:disabled{opacity:.55;cursor:wait}.pwa-control[data-ready=true]{color:var(--aksen-gelap);background:#e9eefb;border-color:#1e40af52}.pwa-controls[data-compact=true] .pwa-control{color:#fff;min-height:2rem;box-shadow:none;background:#ffffff24;border-color:#ffffff38;padding:0 .5rem;font-size:.75rem}.pwa-install-banner{left:0;right:0;z-index:90;width:min(100%,34rem);padding:0 1rem calc(.875rem + env(safe-area-inset-bottom));pointer-events:none;margin:0 auto;position:fixed;bottom:0}.pwa-install-card{pointer-events:auto;background:#fffffff5;border:1px solid #1e40af29;border-radius:1.25rem;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;min-height:4.5rem;padding:.75rem;display:grid;box-shadow:0 18px 44px #1420332e}.pwa-install-icon{background:linear-gradient(135deg, var(--aksen), var(--organik));border-radius:1rem;width:2.75rem;height:2.75rem;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff7a}.pwa-install-icon img{width:100%;height:100%;display:block}.pwa-install-copy{min-width:0}.pwa-install-title{font-size:.9375rem;font-weight:900;line-height:1.2}.pwa-install-text{color:var(--kabut);margin-top:.1875rem;font-size:.8125rem;line-height:1.25}.pwa-install-actions{align-items:center;gap:.375rem;display:flex}.pwa-install-primary,.pwa-install-close{white-space:nowrap;border-radius:.875rem;justify-content:center;align-items:center;min-height:2.375rem;font-size:.8125rem;font-weight:900;display:inline-flex}.pwa-install-primary{background:var(--aksen);color:#fff;padding:0 .875rem}.pwa-install-close{border:1px solid var(--garis);color:var(--kabut);padding:0 .625rem}.pwa-dialog-backdrop{z-index:100;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#14203361;place-items:center;padding:1rem;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.pwa-dialog{border:1px solid var(--garis);background:var(--permukaan);border-radius:1.25rem;width:min(100%,22rem);padding:1.25rem;box-shadow:0 24px 54px #16203a3d}.pwa-dialog h2{font-size:1.125rem;font-weight:900;line-height:1.25}.pwa-dialog p{color:var(--kabut);margin-top:.5rem;font-size:.9375rem}.pwa-dialog-list{color:var(--tinta-2);margin:.875rem 0 0;padding-left:1.25rem;font-size:.875rem}.pwa-dialog-list li+li{margin-top:.5rem}.pwa-dialog-actions{flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-top:1rem;display:flex}.pwa-dialog-button{min-height:var(--tap);background:var(--aksen);color:#fff;border-radius:.875rem;justify-content:center;align-items:center;padding:0 .875rem;font-weight:800;display:inline-flex}.pwa-dialog-button[data-varian=garis]{border:1px solid var(--garis-tebal);background:var(--permukaan);color:var(--tinta-2)}.pwa-dialog-button:disabled{opacity:.55;cursor:wait}@media (max-width:24rem){.pwa-install-card{grid-template-columns:auto minmax(0,1fr)}.pwa-install-actions{grid-column:1/-1;justify-content:flex-end}}.isi{flex-direction:column;flex:1;gap:1rem;padding:1rem 1rem 7rem;display:flex}.eyebrow{letter-spacing:0;text-transform:uppercase;color:var(--kabut);font-size:.75rem;font-weight:800}.masuk-siswa{background:var(--latar);justify-content:flex-start}.masuk-siswa-panel{width:100%;min-height:100vh;min-height:100dvh;padding:0 0 max(1rem, env(safe-area-inset-bottom));flex-direction:column;justify-content:flex-start;gap:0;display:flex}.masuk-siswa-shape{background:linear-gradient(135deg, var(--aksen) 0%, var(--aksen-gelap) 100%);color:#fff;padding:max(3.25rem, calc(env(safe-area-inset-top) + 2.5rem)) 1.25rem 3rem;text-align:center;border:0;border-radius:0 0 2rem 2rem;position:relative;overflow:hidden;box-shadow:0 18px 34px -20px #1e40afb8}.masuk-siswa-shape:before{content:"";background:0 0;border:1px solid #ffffff24;border-radius:999px;width:10rem;height:10rem;position:absolute;top:auto;bottom:-3.5rem;left:auto;right:-2.5rem}.masuk-siswa-shape:after{content:"";background:0 0;border:1px dashed #ffffff1f;border-radius:999px;width:8rem;height:8rem;position:absolute;top:1.5rem;left:-2rem}.masuk-siswa-sekolah{z-index:1;border-radius:var(--radius);color:#ffffffeb;text-transform:uppercase;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;align-items:center;min-height:1.625rem;padding:0 .5625rem;font-size:.75rem;font-weight:800;display:inline-flex;position:relative}.masuk-siswa-shape h1{z-index:1;margin-top:.75rem;font-size:2.125rem;font-weight:900;line-height:1.05;position:relative}.masuk-siswa-shape p{z-index:1;margin-top:.625rem;color:#ffffffd1;max-width:19rem;margin-inline-start:auto;margin-inline-end:auto;font-size:.9375rem;position:relative}.masuk-siswa-form{z-index:2;border:1px solid var(--garis);border-radius:1.75rem 1.75rem var(--radius) var(--radius);background:var(--permukaan);width:calc(100% - 2rem);margin:-1.5rem 1rem 0;padding:1.375rem 1.25rem 1.25rem;position:relative;box-shadow:0 18px 42px #16203a1f}.masuk-siswa-form-kepala{margin-bottom:1.125rem}.masuk-siswa-form-kepala h2{margin-top:.25rem;font-size:1.375rem;font-weight:900;line-height:1.2}.masuk-siswa-catatan{color:var(--kabut-redup);text-align:center;margin-top:.875rem;font-size:.8125rem}.masuk-siswa-ilustrasi{opacity:.34;filter:saturate(.95);background:0 0;border:0;border-radius:0;width:100%;max-width:24rem;margin:.625rem auto 0;padding:0 .75rem;position:relative;overflow:hidden}.masuk-siswa-ilustrasi svg{width:100%;height:auto;display:block}.svg-ground{fill:#dfe8f3}.svg-school{fill:#f8fbff;stroke:#bdcad9;stroke-width:2px}.svg-school-roof{fill:#2459c6}.svg-school-line{fill:#dce8ff}.svg-tree{fill:#1f8f5f}.svg-trunk{fill:#6d7d92}.svg-bin-one{fill:#1f8f5f}.svg-bin-two{fill:#b98218}.svg-bin-lid{fill:#142033}.svg-person{fill:#2459c6}.svg-person-head{fill:#f0c7a8}.svg-leaf{fill:#7fbf8d}@media (min-width:36rem){.masuk-siswa-panel{max-width:28rem;min-height:100vh;min-height:100dvh;margin:0 auto;padding-inline-start:0;padding-inline-end:0}}.papan{border:1px solid var(--garis);border-radius:var(--radius);background:var(--permukaan);padding:1.25rem;box-shadow:0 14px 34px #16203a14}.saldo-besar{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--tinta);margin-top:.375rem;font-size:3rem;font-weight:900;line-height:1}.papan-pesan{color:var(--kabut);margin-top:.75rem;font-size:.9375rem}.aksi{background:var(--aksen);color:#fff;letter-spacing:0;border-radius:1rem;justify-content:center;align-items:center;gap:.625rem;width:100%;min-height:3.5rem;font-size:1rem;font-weight:800;transition:transform 80ms,background .15s,box-shadow .15s;display:inline-flex;box-shadow:0 14px 28px #1e40af33}.aksi:active{transform:translateY(1px)}.aksi:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.aksi[data-varian=sunyi]{background:var(--permukaan);color:var(--tinta);border:1px solid var(--garis-tebal);box-shadow:none;min-height:var(--tap);font-size:.9375rem;font-weight:700}.aksi-catatan{text-align:center;color:var(--kabut);margin-top:.5rem;font-size:.8125rem}.statistik{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.stat{background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--radius);padding:1rem;box-shadow:0 10px 24px #16203a0d}.stat-nilai{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.625rem;font-weight:800;line-height:1.1}.stat-label{letter-spacing:0;text-transform:uppercase;color:var(--kabut);margin-top:.25rem;font-size:.75rem;font-weight:800}.kartu{border:1px solid var(--garis);border-radius:var(--radius);background:var(--permukaan);padding:1.125rem;box-shadow:0 10px 24px #16203a0d}.kartu-judul{font-size:1rem;font-weight:800}.kartu-peringatan{background:#fff9e8;border-color:#b982186b}.hasil{text-align:center;border:1px solid var(--garis);border-radius:var(--radius);background:var(--permukaan);padding:1.375rem 1.125rem;box-shadow:0 10px 24px #16203a0d}.hasil[data-jenis=ORGANIK]{border-color:#1f8f5f61}.hasil[data-jenis=ANORGANIK]{border-color:#b982186b}.hasil-label{letter-spacing:0;margin:.375rem 0;font-size:1.875rem;font-weight:900}.hasil[data-jenis=ORGANIK] .hasil-label{color:var(--organik)}.hasil[data-jenis=ANORGANIK] .hasil-label{color:var(--anorganik)}.hasil-keyakinan{font-family:var(--mono);color:var(--kabut);font-size:.8125rem}.instruksi{border-top:1px solid var(--garis);color:var(--tinta-2);margin-top:1rem;padding-top:1rem;font-size:1rem;line-height:1.45}.instruksi strong{font-weight:900}.instruksi[data-warna=HIJAU] strong{color:var(--organik)}.instruksi[data-warna=KUNING] strong{color:var(--anorganik)}.bingkai-kamera{aspect-ratio:3/4;border-radius:var(--radius);background:#000;position:relative;overflow:hidden;box-shadow:0 18px 42px #16203a38}.bingkai-kamera video,.bingkai-kamera canvas{object-fit:cover;width:100%;height:100%;display:block}.pemandu{border-radius:var(--radius);pointer-events:none;border:2px dashed #ffffff9e;position:absolute;top:14%;bottom:14%;left:14%;right:14%}.pemandu-teks{text-align:center;color:#fff;text-shadow:0 1px 5px #000000e6;pointer-events:none;font-size:.875rem;position:absolute;bottom:1rem;left:1rem;right:1rem}.daftar{flex-direction:column;gap:.625rem;display:flex}.baris{background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--radius);justify-content:space-between;align-items:center;gap:1rem;padding:.875rem 1rem;display:flex;box-shadow:0 8px 20px #16203a0a}.baris-kiri{min-width:0}.baris-judul{white-space:nowrap;text-overflow:ellipsis;font-size:.9375rem;font-weight:800;overflow:hidden}.baris-meta{font-family:var(--mono);color:var(--kabut);margin-top:.125rem;font-size:.75rem}.baris-poin{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:1.0625rem;font-weight:800}.baris-poin[data-positif=true]{color:var(--organik)}.baris-poin[data-positif=false]{color:var(--kabut-redup)}.lencana{letter-spacing:0;text-transform:uppercase;border:1px solid;border-radius:4px;align-items:center;gap:.3125rem;padding:.1875rem .5rem;font-size:.75rem;font-weight:800;display:inline-flex}.lencana[data-nada=tepat],.lencana[data-nada=organik]{color:var(--organik)}.lencana[data-nada=telat]{color:var(--telat)}.lencana[data-nada=anorganik]{color:var(--anorganik)}.lencana[data-nada=netral]{color:var(--kabut)}.bidang{margin-bottom:1rem;display:block}.bidang-label{letter-spacing:0;text-transform:uppercase;color:var(--kabut);margin-bottom:.375rem;font-size:.75rem;font-weight:800;display:block}.bidang input{width:100%;min-height:var(--tap);background:var(--permukaan);border:1px solid var(--garis-tebal);color:var(--tinta);border-radius:1rem;padding:0 .875rem;font-family:inherit;font-size:1rem}.bidang input:focus{border-color:var(--aksen);outline:none;box-shadow:0 0 0 3px #2459c61f}.bidang-galat{color:var(--telat);margin-top:.375rem;font-size:.8125rem}.notif{border-radius:var(--radius);border:1px solid var(--garis);background:var(--permukaan);padding:.875rem 1rem;font-size:.9375rem;line-height:1.45}.notif[data-nada=galat]{color:var(--telat);background:var(--telat-latar);border-color:#c43d3861}.notif[data-nada=info]{color:var(--tinta-2);background:#eef5ff;border-color:#2459c63d}.nav{z-index:15;padding:.5rem .625rem calc(.5rem + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff0;border:1px solid #e3e8f2e6;border-radius:1.5rem 1.5rem 0 0;gap:.375rem;display:flex;position:sticky;bottom:0;box-shadow:0 -14px 34px #16203a14}.nav a{min-height:3.25rem;color:var(--kabut);letter-spacing:0;text-transform:uppercase;border-radius:1rem;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.1875rem;font-size:.75rem;font-weight:800;text-decoration:none;display:flex}.nav a[aria-current=page]{color:var(--aksen);background:#e9eefb}.nav-ikon{font-size:1.125rem;line-height:1}.antrean{font-family:var(--mono);color:var(--anorganik);align-items:center;gap:.5rem;font-size:.75rem;display:flex}.antrean:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px}.qr-nama{margin-top:.375rem;font-size:1.375rem;font-weight:900}.qr-meta{color:var(--kabut);margin-top:.125rem;font-size:.875rem}.qr-bingkai{border:1px solid var(--garis);border-radius:var(--radius);background:#fff;place-items:center;max-width:18rem;margin:1rem auto;padding:1rem;display:grid}.qr-bingkai-kecil{max-width:14rem}.qr-bingkai svg{width:100%;max-width:16rem;height:auto}.memuat{color:var(--kabut);place-items:center;padding:3rem 1rem;font-size:.875rem;display:grid}.kosong{text-align:center;color:var(--kabut);padding:2.5rem 1.25rem;font-size:.9375rem;line-height:1.5}@media print{body{background:#fff}.bar-atas,.nav,.isi>:not(.kartu-cetak),.tombol-cetak{display:none!important}.layar{background:#fff;max-width:none;min-height:auto}.isi{padding:0;display:block}.kartu-cetak{box-shadow:none;text-align:center;border:1px solid #111827;width:88mm;min-height:120mm;margin:12mm auto}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}