:root{--color-paper: oklch(97.8% .012 85);--color-paper-2: oklch(95.8% .016 85);--color-paper-3: oklch(93.2% .018 85);--color-card: oklch(99.2% .006 85);--color-ink: oklch(24% .02 60);--color-ink-2: oklch(40% .018 65);--color-muted: oklch(52% .014 70);--color-neutral: oklch(45% .015 65);--color-rule: oklch(89.5% .014 85);--color-rule-2: oklch(80% .016 80);--color-accent: oklch(74% .14 82);--color-accent-ink: oklch(30% .04 70);--color-accent-soft: oklch(93.5% .045 85);--color-accent-line: oklch(78% .09 85);--color-accent-deep: oklch(68% .13 82);--color-focus: oklch(58% .15 60);--color-ok: oklch(52% .13 155);--color-ok-ink: oklch(34% .065 155);--color-ok-soft: oklch(94.5% .032 155);--color-ok-line: oklch(84% .05 155);--color-danger: oklch(52% .19 27);--color-danger-ink: oklch(40% .09 27);--color-danger-soft: oklch(94.2% .03 27);--color-danger-line: oklch(85% .06 27);--color-garis: oklch(58% .045 240);--color-garis-merah: oklch(58% .13 25);--font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--space-3xs: .125rem;--space-2xs: .25rem;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2.5rem;--space-2xl: 4rem;--space-3xl: 6rem;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-md: 1.25rem;--text-lg: 1.5625rem;--text-xl: 1.9531rem;--text-2xl: 2.4414rem;--text-display: clamp(2rem, 10vw + .5rem, 3.25rem);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.7, 0, .84, 0);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--dur-micro: .12s;--dur-short: .22s;--dur-long: .42s;--radius-card: 14px;--radius-input: 12px;--radius-pill: 999px;--shadow-whisper: 0 1px 2px oklch(24% .02 60 / .05);--shadow-card: 0 8px 24px -12px oklch(30% .02 60 / .14);--z-base: 1;--z-raised: 10;--z-dropdown: 100;--z-sticky: 200;--z-modal: 400;--z-toast: 500;--z-tooltip: 600;--hitam: var(--color-ink);--putih: var(--color-card);--paper: var(--color-paper);--paper-2: var(--color-paper-2);--semen: var(--color-rule);--garis: var(--color-ink);--kuning: var(--color-accent);--kuning-tua: var(--color-accent-deep);--cabe: var(--color-danger);--merah: var(--color-danger);--hijau: var(--color-ok);--hijau-muda: var(--color-ok-soft);--abu: var(--color-muted);--merah-muda: var(--color-danger-soft);--hijau-tua: var(--color-ok-ink);--cabe-tua: var(--color-danger-ink)}@font-face{font-family:Plus Jakarta Sans;src:url(/fonts/plus-jakarta-sans.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}*{box-sizing:border-box;margin:0;padding:0}html{overflow-x:clip;scroll-behavior:smooth}body{overflow-x:clip}body{font-family:var(--font-body);background:var(--color-paper);color:var(--color-ink);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}::selection{background:var(--color-accent);color:var(--color-accent-ink)}.app{display:flex;flex-direction:column;min-height:100dvh;background:var(--color-paper)}.konten{flex:1;padding:20px 16px calc(110px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;width:100%}.konten.dengan-fab{padding-bottom:calc(170px + env(safe-area-inset-bottom))}.halaman{animation:masuk var(--dur-short) var(--ease-out)}@keyframes masuk{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}h1{font-family:var(--font-display);font-size:1.55rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--color-ink);margin-bottom:4px;overflow-wrap:anywhere}h1 .aksen{color:inherit;text-decoration:underline;text-decoration-color:var(--color-accent);text-decoration-thickness:4px;text-underline-offset:5px;text-decoration-skip-ink:none}.subjudul{font-size:.95rem;color:var(--color-muted);font-weight:500;margin-bottom:18px;line-height:1.5;max-width:52ch}h2{font-size:1.02rem;font-weight:800;letter-spacing:-.01em;color:var(--color-ink);margin-bottom:10px}.kartu-label{font-size:.78rem;font-weight:700;color:var(--color-ink-2);margin-bottom:6px;letter-spacing:.01em}.kartu-angka{font-size:1.9rem;font-weight:800;line-height:1.05;letter-spacing:-.03em;margin:4px 0;color:var(--color-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.kartu-kecil{font-size:.82rem;color:var(--color-muted);font-weight:500;line-height:1.45}.mono,.kartu-angka.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.hero{margin-bottom:18px}.hero-label{font-size:.86rem;font-weight:600;color:var(--color-muted);margin-bottom:2px}.hero-angka{font-family:var(--font-display);font-weight:800;font-size:var(--text-display);line-height:1.08;letter-spacing:-.03em;color:var(--color-ink);margin:6px 0 8px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:0}.hero-angka.untung{color:var(--color-ok-ink)}.hero-angka.rugi{color:var(--color-danger-ink)}.hero-kata{display:block;font-size:.4em;font-weight:800;letter-spacing:-.01em;margin-bottom:3px}.hero-keterangan{font-size:.95rem;font-weight:500;color:var(--color-ink-2);line-height:1.5;max-width:34ch}.kartu{background:var(--color-card);border:1px solid var(--color-rule);border-radius:var(--radius-card);padding:16px;margin-bottom:12px}.kartu-nota{background:var(--color-card);border:1px solid var(--color-rule);border-radius:var(--radius-card);padding:18px 16px 16px;margin-bottom:14px;box-shadow:var(--shadow-card);position:relative}.kartu-nota:before{content:"";position:absolute;top:-1px;left:16px;width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--color-rule-2)}.kartu-hero-kuning{background:var(--color-accent-soft);border-color:var(--color-accent-line)}.kartu-hero-hijau{background:var(--color-ok-soft);border-color:var(--color-ok-line)}.kertas-buku{background-color:var(--color-card);background-image:linear-gradient(90deg,transparent 0 14px,color-mix(in oklab,var(--color-garis-merah) 15%,transparent) 14px 15px,transparent 15px),repeating-linear-gradient(to bottom,transparent 0 27px,color-mix(in oklab,var(--color-garis) 7%,transparent) 27px 28px)}.kartu-empty{background:var(--color-card);border:1.5px dashed var(--color-rule-2);border-radius:var(--radius-card);padding:30px 18px;text-align:center;margin-bottom:12px}.kartu-peringatan{background:var(--color-accent-soft);border:1px solid var(--color-accent-line);border-radius:var(--radius-input);padding:12px 14px;color:var(--color-ink-2);font-size:.88rem}.tombol{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--color-ink);color:var(--color-paper);padding:13px 22px;border-radius:var(--radius-pill);text-decoration:none;font-family:var(--font-body);font-size:.98rem;font-weight:700;letter-spacing:-.01em;border:1px solid var(--color-ink);cursor:pointer;min-height:52px;white-space:nowrap;transition:transform var(--dur-micro) var(--ease-out),background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}@media (hover: hover){.tombol:hover{background:color-mix(in oklch,var(--color-ink) 88%,var(--color-accent));border-color:color-mix(in oklch,var(--color-ink) 88%,var(--color-accent))}}.tombol:active{transform:scale(.985)}.tombol:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}.tombol:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.tombol-besar{width:100%;font-size:1.05rem;min-height:56px}.tombol-kedua{background:var(--color-card);color:var(--color-ink);border-color:var(--color-rule-2)}@media (hover: hover){.tombol-kedua:hover{background:var(--color-paper-2);border-color:var(--color-ink-2)}}.tombol-ghost{background:transparent;color:var(--color-ink);border-color:var(--color-rule-2)}@media (hover: hover){.tombol-ghost:hover{background:var(--color-paper-2);border-color:var(--color-ink-2)}}.tombol-merah{background:var(--color-danger-soft);color:var(--color-danger-ink);border-color:var(--color-danger-line)}@media (hover: hover){.tombol-merah:hover{background:color-mix(in oklch,var(--color-danger-soft) 88%,var(--color-danger));border-color:var(--color-danger-line)}}.fab{position:fixed;bottom:calc(88px + env(safe-area-inset-bottom));right:16px;z-index:var(--z-raised);width:62px;height:62px;border-radius:50%;background:var(--color-ink);color:var(--color-paper);border:1px solid var(--color-ink);box-shadow:var(--shadow-card);display:grid;place-items:center;cursor:pointer;transition:transform var(--dur-micro) var(--ease-out),background-color var(--dur-short) var(--ease-out)}@media (hover: hover){.fab:hover{background:color-mix(in oklch,var(--color-ink) 88%,var(--color-accent))}}.fab:active{transform:scale(.95)}.fab:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}.chip{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--radius-pill);border:1px solid var(--color-rule-2);background:var(--color-card);color:var(--color-ink-2);font-family:var(--font-body);font-weight:600;font-size:.84rem;cursor:pointer;min-height:38px;white-space:nowrap;transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}@media (hover: hover){.chip:hover{background:var(--color-paper-2);border-color:var(--color-ink-2)}}.chip:active{transform:scale(.98)}.chip:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.chip-aktif{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}@media (hover: hover){.chip-aktif:hover{background:var(--color-ink);border-color:var(--color-ink)}}.segmented{display:flex;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-pill);padding:4px;gap:4px}.segmented button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;border-radius:var(--radius-pill);border:1px solid transparent;font-family:var(--font-body);font-weight:600;font-size:.9rem;background:transparent;color:var(--color-ink-2);cursor:pointer;min-height:40px;white-space:nowrap;transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}.segmented button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.segmented button.aktif{background:var(--color-card);color:var(--color-ink);font-weight:700;box-shadow:var(--shadow-whisper);border-color:var(--color-rule)}.error{display:flex;gap:8px;align-items:flex-start;background:var(--color-danger-soft);border:1px solid var(--color-danger-line);border-radius:var(--radius-input);padding:12px 14px;margin-bottom:12px;color:var(--color-danger-ink);font-weight:600;font-size:.9rem;line-height:1.45}.sukses{display:flex;gap:8px;align-items:center;background:var(--color-ok-soft);border:1px solid var(--color-ok-line);border-radius:var(--radius-input);padding:12px 14px;margin-bottom:12px;color:var(--color-ok-ink);font-weight:600;font-size:.9rem;line-height:1.45}.nav-bawah{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-sticky);display:flex;background:color-mix(in oklch,var(--color-card) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--color-rule);padding:4px 6px calc(4px + env(safe-area-inset-bottom))}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 2px 10px;text-decoration:none;border-radius:12px;color:var(--color-muted);font-size:.72rem;font-weight:600;min-height:56px;position:relative;white-space:nowrap;transition:color var(--dur-short) var(--ease-out)}.nav-item .ikon{width:22px;height:22px}.nav-item:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.nav-item.aktif{color:var(--color-ink);font-weight:700}.nav-item.aktif:after{content:"";position:absolute;bottom:3px;left:50%;transform:translate(-50%);width:5px;height:5px;border-radius:50%;background:var(--color-accent)}.topbar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:10px;padding:10px 16px;background:color-mix(in oklch,var(--color-card) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-rule)}.topbar .logo-boks{width:30px;height:30px;border-radius:9px;background:var(--color-accent-soft);color:var(--color-accent-ink);display:grid;place-items:center;flex-shrink:0}.topbar .nama{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.topbar .tipe{color:var(--color-muted);font-size:.78rem;font-weight:500;white-space:nowrap}.topbar .ganti{margin-left:auto;color:var(--color-ink-2);text-decoration:none;border:1px solid var(--color-rule-2);border-radius:var(--radius-pill);padding:6px 12px;font-size:.75rem;font-weight:700;white-space:nowrap;flex-shrink:0;transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}@media (hover: hover){.topbar .ganti:hover{background:var(--color-paper-2);border-color:var(--color-ink-2)}}.topbar .ganti:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.baris-tombol{display:flex;gap:10px;margin-bottom:14px;align-items:center}.baris-tombol .tombol{flex:1;text-align:center}input,select,textarea{width:100%;min-height:52px;padding:13px 14px;border:1px solid var(--color-rule-2);border-radius:var(--radius-input);background:var(--color-card);color:var(--color-ink);font-family:var(--font-body);font-size:1rem;font-weight:500;margin-bottom:10px;outline:2px solid transparent;outline-offset:1px;transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}input::placeholder,textarea::placeholder{color:var(--color-neutral);font-weight:500}@media (hover: hover){input:hover,select:hover,textarea:hover{background:var(--color-paper-2);border-color:var(--color-rule-2)}}input:focus,select:focus,textarea:focus{outline-color:var(--color-focus);border-color:var(--color-ink-2);background:var(--color-card)}input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23705d46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}.input-prefix{position:relative}.input-prefix span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:800;color:var(--color-muted);pointer-events:none;font-variant-numeric:tabular-nums}.input-prefix input{padding-left:44px}.input-well{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-input);padding:12px;margin-bottom:10px}.help{font-size:.78rem;color:var(--color-muted);margin:-4px 0 10px;font-weight:500;line-height:1.45}.daftar-item{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--color-rule);gap:12px;min-height:44px}.daftar-item:last-child{border-bottom:none}.daftar-total{border-bottom:none!important;background:var(--color-paper-2);border-radius:10px;padding:12px!important;margin-top:8px;font-weight:800;color:var(--color-ink)}.daftar-total.hijau{background:var(--color-ok-soft);color:var(--color-ok-ink)}.daftar-total.merah{background:var(--color-danger-soft);color:var(--color-danger-ink)}.daftar-total.netral{background:var(--color-paper-3);color:var(--color-ink-2)}.badge{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border:1px solid var(--color-rule);border-radius:var(--radius-pill);background:var(--color-paper-2);color:var(--color-ink-2);font-size:.72rem;font-weight:700;letter-spacing:.01em;white-space:nowrap}.badge-baru{background:var(--color-accent-soft);color:var(--color-accent-ink);border-color:var(--color-accent-line)}.badge-selesai{background:var(--color-ok-soft);color:var(--color-ok-ink);border-color:var(--color-ok-line)}.badge-tipis{background:var(--color-danger-soft);color:var(--color-danger-ink);border-color:var(--color-danger-line)}.badge-netral{background:var(--color-paper-3);color:var(--color-ink-2)}.jumlah{display:inline-flex;align-items:center;gap:2px;font-weight:800;font-size:.9rem;padding:7px 11px;border-radius:var(--radius-pill);white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1}.jumlah-masuk{background:var(--color-ok-soft);color:var(--color-ok-ink)}.jumlah-keluar{background:var(--color-danger-soft);color:var(--color-danger-ink)}.jumlah-pindah{background:var(--color-paper-3);color:var(--color-ink-2)}.ikon-boks{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}.ikon-boks .ikon{width:21px;height:21px}.ikon-masuk{background:var(--color-ok-soft);color:var(--color-ok-ink)}.ikon-keluar{background:var(--color-danger-soft);color:var(--color-danger-ink)}.ikon-netral{background:var(--color-accent-soft);color:var(--color-accent-ink)}.ikon-abu{background:var(--color-paper-3);color:var(--color-ink-2)}.tanggal-boks{width:28px;height:28px;border-radius:8px;background:var(--color-accent-soft);color:var(--color-accent-ink);display:grid;place-items:center;font-size:.74rem;font-weight:800;flex-shrink:0}.nomor-langkah{width:32px;height:32px;border-radius:50%;background:var(--color-ink);color:var(--color-paper);display:grid;place-items:center;font-weight:800;font-size:.92rem;flex-shrink:0}.progress{display:flex;gap:6px;align-items:center;margin-bottom:14px}.progress-dot{width:10px;height:10px;border-radius:50%;background:var(--color-paper-3);border:1px solid var(--color-rule-2)}.progress-dot.aktif{background:var(--color-accent);border-color:var(--color-accent);width:28px;border-radius:var(--radius-pill)}.progress-garis{flex:1;height:3px;background:var(--color-paper-3);border-radius:var(--radius-pill)}.progress-garis.terisi{background:var(--color-ink-2)}.stat-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.stat-mini .kartu{margin-bottom:0;text-align:center;padding:14px 8px}.stat-mini .kartu-angka{font-size:1rem;margin:6px 0 2px}.stepper{display:flex;align-items:center;gap:12px}.stepper button{width:52px;height:52px;font-size:1.4rem;border-radius:50%;border:1px solid var(--color-rule-2);background:var(--color-card);cursor:pointer;box-shadow:var(--shadow-whisper);font-weight:700;color:var(--color-ink);transition:transform var(--dur-micro) var(--ease-out),background-color var(--dur-short) var(--ease-out)}.stepper button:active{transform:scale(.94)}.stepper button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.stepper-nilai{font-size:1.1rem;font-weight:800;min-width:60px;text-align:center;font-variant-numeric:tabular-nums}.grafik-bar{display:flex;gap:4px}.grafik-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;align-items:center}.grafik-batang{position:relative;width:100%;height:54px}.grafik-batang:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--color-rule)}.grafik-batang .batang{position:absolute;left:0;right:0}.grafik-batang .batang.masuk{bottom:50%;background:var(--kuning);border-radius:5px 5px 0 0}.grafik-batang .batang.keluar{top:50%;background:var(--merah);border-radius:0 0 5px 5px}.grafik-label{font-size:.62rem;font-weight:600;color:var(--color-muted);white-space:nowrap}.toast-host{position:fixed;top:calc(env(safe-area-inset-top) + 14px);left:16px;right:16px;z-index:var(--z-toast);display:flex;justify-content:center;pointer-events:none}.toast{pointer-events:auto;max-width:520px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--color-ink);color:var(--color-paper);padding:13px 20px;border-radius:var(--radius-pill);box-shadow:var(--shadow-card);font-weight:600;font-size:.92rem;text-align:center;animation:toast-in var(--dur-long) var(--ease-out)}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.cap{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-pill);background:var(--color-accent-soft);border:1px solid var(--color-accent-line);color:var(--color-accent-ink);font-weight:800;font-size:.72rem;letter-spacing:.04em;white-space:nowrap}.divider{height:1px;background:var(--color-rule);border:none;margin:12px 0}.skeleton{background:linear-gradient(90deg,var(--color-paper-3) 25%,var(--color-paper-2) 50%,var(--color-paper-3) 75%);background-size:200% 100%;animation:shimmer 1.2s ease-in-out infinite;border-radius:8px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}details.kartu{padding:0;overflow:hidden}details.kartu>summary{padding:16px;cursor:pointer;font-weight:700;font-size:.95rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px}details.kartu>summary::-webkit-details-marker{display:none}details.kartu>summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px;border-radius:var(--radius-card)}@media (min-width: 40rem){.konten{padding-top:28px}.hero-angka{font-size:clamp(2.25rem,8vw,3.5rem)}}@media (min-width: 60rem){.konten{padding-inline:24px}}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.15s!important;animation-iteration-count:1!important;transition-duration:.15s!important}.halaman,.skeleton{animation:none}}