/* TOKO ASTRID — tambahan komponen di atas tema dasar */
html { scroll-behavior: auto; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.page-head h2 { font-size: 1.4rem; font-weight: 600; margin: 0; }
.bc { font-size: 12.5px; color: var(--muted-foreground); margin-bottom: .2rem; }
.bc a:hover { color: var(--primary); }
.kurs-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--accent); color: var(--primary); padding: .4rem .8rem; border-radius: 999px; font-size: 12.5px; margin-left: auto; margin-right: .6rem; white-space: nowrap; }
@media (max-width: 575px) { .kurs-chip span { display: none; } }
.alert-warn { background: #fef3c7; color: #92400e; }
.alert-info { background: #e0f2fe; color: #075985; }

/* sidebar bertingkat */
.s-group-d { margin: 0; }
.s-group-d > summary { list-style: none; cursor: pointer; }
.s-group-d > summary::-webkit-details-marker { display: none; }
.s-sum { display: flex; align-items: center; }
.s-caret { margin-left: auto; font-size: 10px; transition: transform .15s; }
.s-group-d[open] > summary .s-caret { transform: rotate(180deg); }
.s-sub { padding-left: 1.2rem; margin-left: 1.15rem; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; margin-bottom: .3rem; }
.s-child { font-size: 13px; padding-top: .45rem; padding-bottom: .45rem; }
.sidebar-collapsed .s-sub, .sidebar-collapsed .s-caret { display: none; }

/* ikon aksi tabel */
.aksi-col { text-align: center; white-space: nowrap; }
.aksi-ikon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; color: #475569; border: 0; background: transparent; cursor: pointer; font-size: 14px; }
.aksi-ikon:hover { background: var(--accent); color: var(--primary); }
.aksi-ikon.bahaya:hover { background: #fee2e2; color: #dc2626; }

/* DataTables dirapikan */
.dataTables_wrapper { font-size: 14px; }
.dt-top, .dt-bottom { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; padding: .8rem 1.1rem; }
.dt-bottom { border-top: 1px solid var(--border); color: var(--muted-foreground); }
.dataTables_wrapper .dataTables_filter input { border: 1px solid var(--input); border-radius: 10px; padding: .5rem .8rem; min-width: 14rem; margin-left: 0; }
.dataTables_wrapper .dataTables_length select { border: 1px solid var(--input); border-radius: 8px; padding: .3rem 1.5rem .3rem .5rem; }
table.dataTable { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; }
table.dataTable thead th { background: #f8fafc; color: var(--muted-foreground); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: .8rem 1rem; border-bottom: 1px solid var(--border) !important; white-space: nowrap; }
table.dataTable tbody td { padding: .75rem 1rem; border-top: 1px solid var(--border); vertical-align: middle; }
table.dataTable tbody tr:hover { background: #f8fafc; }
table.dataTable.no-footer { border-bottom: 0; }
table.dataTable td.num, table.dataTable th.num { text-align: right; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border: 1px solid var(--border) !important; border-radius: 8px !important; background: #fff !important; color: var(--primary) !important; padding: .25rem .65rem; margin-left: .2rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .4; }
.dataTables_wrapper .dataTables_processing { background: rgba(255,255,255,.9); border: 1px solid var(--border); border-radius: 10px; }
.dataTables_empty { padding: 2.2rem 1rem !important; text-align: center; color: var(--muted-foreground); }
.panel > .tbl-wrap, .panel .dataTables_wrapper { overflow-x: auto; }

/* filter tanggal preset */
.filter-tgl { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.seg { display: inline-flex; background: var(--muted); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: .38rem .8rem; border-radius: 8px; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; }
.seg button.on { background: var(--primary); color: #fff; }
.seg button:not(.on):hover { background: #fff; color: var(--primary); }
.rentang-in { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.rentang-in .input { width: 15rem; }

/* empty state */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--muted-foreground); }
.empty-state i { font-size: 2rem; color: #cbd5e1; display: block; margin-bottom: .6rem; }

/* form transaksi */
.trx-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }
@media (max-width: 1100px) { .trx-grid { grid-template-columns: minmax(0, 1fr); } }
.item-table { width: 100%; border-collapse: collapse; }
.item-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); padding: .5rem .4rem; text-align: left; }
.item-table th.num { text-align: right; }
.item-table td { padding: .4rem .3rem; vertical-align: top; border-top: 1px solid var(--border); }
.item-table .input, .item-table .select { min-height: 2.3rem; width: 100%; }
.item-table td.num .input { text-align: right; }
.item-table .sub { padding-top: .65rem; font-weight: 600; }
.item-table .info-stok { font-size: 12px; color: var(--muted-foreground); margin-top: .2rem; }
.item-table .input.salah { border-color: #dc2626; background: #fef2f2; }
.err-baris { color: #dc2626; font-size: 12px; margin-top: .2rem; }
.items-wrap { overflow-x: auto; padding: .3rem 1rem 1rem; }
.items-wrap .item-table { min-width: 640px; }
.sum-big { font-size: 1.5rem; font-weight: 800; color: var(--primary); text-align: right; font-variant-numeric: tabular-nums; }
.select2-container--default .select2-selection--single { height: 2.3rem; border-color: var(--input); border-radius: 10px; display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 2.3rem; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.2; padding-left: .7rem; }
.select2-dropdown { border-color: var(--input); border-radius: 10px; overflow: hidden; z-index: 3000; }
.s2-barang { display: flex; justify-content: space-between; gap: 1rem; font-size: 13px; }
.s2-barang small { color: #64748b; }
.s2-barang b { font-weight: 600; }
.swal2-container { z-index: 5000 !important; }

/* popup kurs & ringkasan */
.kurs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.kurs-grid > div { background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1rem; }
.kurs-grid small { display: block; color: var(--muted-foreground); font-size: 12px; }
.kurs-grid b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
@media (max-width: 575px) { .kurs-grid { grid-template-columns: 1fr; } }
.progress { background: #e5e7eb; border-radius: 999px; height: 10px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--primary); }
.stat-sub { font-size: 12px; color: var(--muted-foreground); margin-top: .1rem; }
.list-peringatan { list-style: none; margin: 0; padding: 0; }
.list-peringatan li { display: flex; gap: .7rem; padding: .65rem 0; border-top: 1px solid var(--border); align-items: flex-start; }
.list-peringatan li:first-child { border-top: 0; }
.list-peringatan i { margin-top: .2rem; }
.tombol-cepat { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
.chart-empty { display: grid; place-items: center; height: 100%; color: var(--muted-foreground); }
.ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.ringkas > div { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1rem; box-shadow: var(--shadow); }
.ringkas small { display: block; color: var(--muted-foreground); font-size: 12px; }
.ringkas b { font-size: 1.1rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lr-table { width: 100%; }
.lr-table td { padding: .5rem 1rem; border-top: 1px solid var(--border); }
.lr-table tr.sub td { font-weight: 700; background: #f8fafc; }
.lr-table tr.grand td { font-weight: 800; font-size: 1.05rem; background: var(--accent); color: var(--primary); }
.up { color: #16a34a; } .down { color: #dc2626; }
.kv-note { font-size: 12.5px; color: var(--muted-foreground); }
.print-only { display: none; }

/* cetak halaman laporan dari layout utama */
@media print {
  @page { size: A4; margin: 15mm; }
  .app-sidebar, .app-header, .sidebar-backdrop, #toasts, .no-print, .filter-tgl, .page-head .btn, .toolbar, .dt-top, .dt-bottom, .aksi-col, .alert-warn { display: none !important; }
  .app-main { margin: 0 !important; padding: 0 !important; width: 100% !important; }
  .app-content { padding: 0 !important; }
  body { background: #fff !important; font-size: 11px; }
  .panel, .ringkas > div, .stat-card { box-shadow: none !important; break-inside: avoid; }
  .print-only { display: block !important; }
  table { page-break-inside: auto; } tr { page-break-inside: avoid; }
  thead { display: table-header-group; }
  .chart-box { height: 220px !important; }
}

/* perbaikan tampilan */
dialog.dlg { width: min(640px, 96vw); }
.stat-value { font-size: 1.35rem; overflow-wrap: normal; word-break: keep-all; }
.stat-card { flex-wrap: nowrap; }
.kurs-grid b { overflow-wrap: normal; }
.grid-stats { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)) !important; }
.stat-value { font-size: clamp(1.05rem, 1.5vw, 1.35rem); }
@media (max-width: 575px) { .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.seg { flex-wrap: nowrap; align-self: flex-start; width: fit-content; max-width: 100%; }
.seg button { flex: none; width: auto; min-height: 0; height: auto; box-shadow: none; }
.field .seg { align-self: flex-start; }
#dlgKurs .table th, #dlgKurs .table td { padding: .55rem .5rem; font-size: 12.5px; }
#dlgKurs .tbl-wrap { overflow-x: auto; }
.filter-tgl .seg { flex-wrap: wrap; }

/* metode pembayaran: dua kartu pilihan */
.metode-pilih { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.metode-pilih button { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; padding: .75rem 1rem; border: 1.5px solid var(--input); border-radius: 12px; background: #fff; cursor: pointer; width: auto; height: auto; min-height: 0; color: var(--foreground); }
.metode-pilih button i { color: var(--muted-foreground); margin-bottom: .2rem; }
.metode-pilih button b { font-weight: 700; font-size: .95rem; }
.metode-pilih button small { color: var(--muted-foreground); font-size: 12px; font-weight: 400; }
.metode-pilih button:hover { border-color: var(--primary); }
.metode-pilih button.on { border-color: var(--primary); background: var(--accent); box-shadow: 0 0 0 3px rgba(31, 72, 255, .12); }
.metode-pilih button.on i { color: var(--primary); }

/* halaman detail transaksi */
.detail-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; margin-bottom: 1rem; }
@media (max-width: 1200px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }
.detail-grid .panel { margin-bottom: 0; }
.detail-grid > div > .panel + .panel { margin-top: 1rem; }
.kv { grid-template-columns: 7.5rem minmax(0, 1fr); font-size: 13.5px; }
.panel .table { width: 100%; }
.panel .table th, .panel .table td { padding: .65rem .9rem; }
.panel .table tfoot td { background: #f8fafc; border-top: 1px solid var(--border); }
.panel .table tfoot tr:last-child td { font-size: 1rem; }
.tbl-wrap td .badge-status { white-space: nowrap; }
.ringkas { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.ringkas b { font-size: 1rem; }

/* dropdown pilih barang (Select2) */
.select2-container--default .select2-results__option { padding: 0; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted { background: var(--accent) !important; color: var(--foreground) !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background: #f1f5f9; color: var(--foreground); }
.select2-container--default .select2-results__option[aria-disabled=true] { opacity: .5; cursor: not-allowed; }
.select2-results__options { max-height: 320px; padding: .3rem; }
.select2-container--default .select2-results__option { border-radius: 10px; }
.select2-container--open .select2-dropdown { box-shadow: 0 16px 40px rgba(16, 24, 40, .18); border: 1px solid var(--input); border-radius: 14px; margin-top: 4px; }
.dd-barang { min-width: 380px; max-width: 94vw; }
.select2-search--dropdown { padding: .6rem .6rem .3rem; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--input); border-radius: 10px; padding: .55rem .8rem; outline: 0; font-size: 14px; }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31, 72, 255, .15); }
.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31, 72, 255, .12); }
.s2-opt { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem .8rem; }
.s2-nama { font-weight: 600; font-size: 14px; line-height: 1.25; }
.s2-meta { display: flex; align-items: center; gap: .45rem; margin-top: .2rem; font-size: 12px; }
.s2-sku { background: #eef2ff; color: var(--primary); font-weight: 600; border-radius: 6px; padding: .05rem .4rem; letter-spacing: .02em; }
.s2-stok { color: var(--muted-foreground); }
.s2-stok.habis { color: #b91c1c; font-weight: 600; }
.s2-kanan { text-align: right; white-space: nowrap; }
.s2-kanan b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.s2-kanan small { color: var(--muted-foreground); font-size: 11.5px; }
.select2-results__message { padding: .9rem; color: var(--muted-foreground); text-align: center; }

/* lonceng notifikasi */
.notif { position: relative; margin-right: .5rem; }
.notif-btn { position: relative; }
.notif-badge { position: absolute; top: -4px; right: -4px; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: #f59e0b; color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; line-height: 1; }
.notif-badge.merah { background: #dc2626; }
.notif-badge[hidden], .notif-pop[hidden] { display: none; }
.notif-pop { position: absolute; right: 0; top: calc(100% + 10px); width: min(31rem, calc(100vw - 1.5rem)); background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 50px rgba(16, 24, 40, .22); z-index: 1500; overflow: hidden; animation: tin .15s ease; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem .6rem; }
.notif-head b { display: block; font-size: 1rem; }
.notif-head small { color: var(--muted-foreground); font-size: 12.5px; }
.notif-tabs { display: flex; gap: .35rem; padding: 0 1rem .7rem; overflow-x: auto; border-bottom: 1px solid var(--border); }
.notif-tabs button { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: .28rem .7rem; font-size: 12.5px; font-weight: 600; color: #475569; cursor: pointer; white-space: nowrap; width: auto; height: auto; min-height: 0; }
.notif-tabs button i { font-style: normal; background: #f1f5f9; border-radius: 999px; padding: 0 .4rem; margin-left: .2rem; font-size: 11px; }
.notif-tabs button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.notif-tabs button.on i { background: rgba(255, 255, 255, .25); color: #fff; }
.notif-list { max-height: min(24rem, 60vh); overflow-y: auto; padding: .4rem; }
.notif-item { display: flex; align-items: center; gap: .75rem; padding: .65rem .7rem; border-radius: 12px; text-decoration: none; color: inherit; }
.notif-item:hover, .notif-item:focus-visible { background: #f5f7ff; }
.notif-ico { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 10px; display: grid; place-items: center; background: #fef3c7; color: #b45309; }
.notif-item.bahaya .notif-ico { background: #fee2e2; color: #dc2626; }
.notif-isi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notif-isi b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-isi small { color: var(--muted-foreground); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-tag { flex: none; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: .15rem .55rem; background: #fef3c7; color: #b45309; }
.notif-item.bahaya .notif-tag { background: #fee2e2; color: #b91c1c; }
.notif-kosong { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: 2rem 1.2rem; color: var(--muted-foreground); font-size: 13px; }
.notif-kosong i { font-size: 2rem; color: #22c55e; }
.notif-kosong b { color: var(--foreground); font-size: 14px; }
.notif-foot { display: block; text-align: center; padding: .75rem; border-top: 1px solid var(--border); background: #f8fafc; font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; }
.notif-foot:hover { background: var(--accent); }
@media (max-width: 575px) { .notif-pop { position: fixed; left: .75rem; right: .75rem; top: 4rem; width: auto; } }

/* dashboard */
@media (min-width: 992px) { .grid-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 576px) and (max-width: 991px) { .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1rem; }
@media (max-width: 1199px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.stat-card { transition: transform .15s ease, box-shadow .15s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(31, 72, 255, .12); }
.panel-head small.hint { font-weight: 500; margin-left: .35rem; }
.donat-wrap { display: flex; flex-direction: column; gap: .9rem; }
.chart-box.donat { height: 190px; }
.donat-leg { display: flex; flex-direction: column; gap: .15rem; max-height: 9rem; overflow: auto; }
.donat-leg > div { display: flex; align-items: center; gap: .55rem; font-size: 13px; padding: .3rem .4rem; border-radius: 8px; }
.donat-leg > div:hover { background: #f8fafc; }
.donat-leg i { width: .7rem; height: .7rem; border-radius: 3px; flex: none; }
.donat-leg span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donat-leg b { font-variant-numeric: tabular-nums; }

/* hero dashboard */
.hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.8rem 2rem; margin-bottom: 1.25rem; border-radius: 20px; color: #fff; isolation: isolate;
  background: linear-gradient(115deg, #0b1f80 0%, #1f48ff 55%, #4a6bff 120%); box-shadow: 0 14px 34px rgba(31, 72, 255, .28); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .55; background-image: radial-gradient(rgba(255, 255, 255, .28) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 65%); mask-image: linear-gradient(100deg, #000 0%, transparent 65%); }
.hero::after { content: ''; position: absolute; right: -90px; top: -110px; width: 360px; height: 360px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 62%); box-shadow: 0 0 0 60px rgba(255, 255, 255, .04), 0 0 0 120px rgba(255, 255, 255, .03); }
.hero-tgl { display: inline-flex; align-items: center; gap: .5rem; font-size: 12.5px; font-weight: 600; padding: .3rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); }
.hero h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: .8rem 0 .35rem; }
.hero h2 span { color: #ffe27a; }
.hero p { margin: 0; opacity: .88; font-size: .94rem; max-width: 34rem; }
.hero p b { color: #ffe27a; }
.hero-chips { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-chip { min-width: 11.5rem; padding: .85rem 1.1rem; border-radius: 16px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(6px); display: flex; flex-direction: column; gap: .1rem; }
.hero-chip small { font-size: 11.5px; opacity: .8; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.hero-chip b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hero-chip span { font-size: 12px; opacity: .75; }
@media (max-width: 575px) { .hero { padding: 1.3rem 1.2rem; } .hero-chip { flex: 1; min-width: 9.5rem; } }

/* Panduan */
.pd-hero { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; background: linear-gradient(135deg, var(--primary), #3b63ff); color: #fff; border-radius: 14px; padding: 1.4rem 1.6rem; margin-bottom: 1.2rem; }
.pd-hero h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .25rem; }
.pd-hero p { opacity: .9; font-size: 14px; max-width: 520px; }
.pd-cari { position: relative; flex: 1 1 280px; max-width: 380px; }
.pd-cari i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); }
.pd-cari .input { width: 100%; padding-left: 2.3rem; background: #fff; color: #0f172a; }
.pd-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.pd-toc { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: .5rem; max-height: calc(100vh - 100px); overflow: auto; }
.pd-toc a { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 8px; font-size: 13.5px; color: var(--muted-foreground); }
.pd-toc a i { width: 1rem; text-align: center; }
.pd-toc a:hover { background: var(--accent); color: var(--primary); }
.pd-toc a.on { background: var(--accent); color: var(--primary); font-weight: 600; }
.pd-toc a[hidden], .pd-sec[hidden] { display: none; }
.pd-isi { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pd-sec { padding: 1.3rem 1.5rem; scroll-margin-top: 80px; }
.pd-sec h3 { display: flex; align-items: center; gap: .65rem; font-size: 1.1rem; font-weight: 700; margin-bottom: .8rem; }
.pd-no { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 8px; background: var(--accent); color: var(--primary); font-size: 13px; font-weight: 700; }
.pd-body { font-size: 14.5px; line-height: 1.7; color: #334155; }
.pd-body p { margin-bottom: .6rem; }
.pd-body ul, .pd-body ol { margin: 0 0 .6rem 1.2rem; }
.pd-body ul { list-style: disc; }
.pd-body li { margin-bottom: .3rem; }
.pd-body code { background: var(--muted); padding: .1rem .4rem; border-radius: 5px; font-size: 13px; }
.pd-langkah { list-style: none !important; margin-left: 0 !important; counter-reset: l; }
.pd-langkah li { counter-increment: l; position: relative; padding-left: 2rem; }
.pd-langkah li::before { content: counter(l); position: absolute; left: 0; top: .12rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.pd-tip { display: flex; gap: .65rem; align-items: flex-start; background: #fffbeb; border: 1px solid #fde68a; color: #854d0e; border-radius: 10px; padding: .75rem .9rem; font-size: 13.5px; margin-top: .4rem; }
.pd-tip i { margin-top: .2rem; }
.pd-rumus { background: var(--accent); color: var(--primary); font-weight: 600; border-radius: 10px; padding: .8rem 1rem; }
.pd-q { border: 1px solid var(--border); border-radius: 10px; padding: .7rem .9rem; margin-bottom: .5rem; }
.pd-q summary { cursor: pointer; font-weight: 600; color: #0f172a; }
.pd-q p { margin: .5rem 0 0; }
@media (max-width: 900px) { .pd-wrap { grid-template-columns: 1fr; } .pd-toc { position: static; flex-direction: row; overflow-x: auto; max-height: none; } .pd-toc a { white-space: nowrap; } .pd-toc a span { display: inline; } }