/*
 * seller.id dashboard — direction "Buku Kas" (docs/design/visual-direction.md §1 + §3).
 *
 * Buku kas & stempel toko: dashboard = buku kas digital yang diisi AI,
 * approval = membubuhkan stempel. Signature element satu-satunya: stempel
 * bertinta miring DISETUJUI ✓ / DITOLAK pada kartu riwayat, animasi "cap"
 * 150ms. Tidak ada elemen dekoratif lain yang bersaing dengan itu.
 *
 * Served as a plain file from public/css (copy of this source) — no build
 * step. Fonts bundled locally in public/fonts, NEVER a runtime CDN.
 */

/* ---------------------------------------------------------------- fonts */

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/public-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/public-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------- tokens */

:root {
    --paper: #F6F7F4;        /* kertas buku kas, sejuk — BUKAN cream hangat */
    --ink: #1C2B33;          /* tinta pena, teal-hitam — bukan #000 */
    --ruling: #DDE3DC;       /* garis ruling — hanya encoding (tabel/list) */
    --stamp-green: #0F6B54;  /* stempel LUNAS/DISETUJUI — primary action */
    --stamp-red: #C2453A;    /* stempel DITOLAK — destructive */
    --pending-ink: #B7791F;  /* kuning tembaga: menunggu keputusan */
    --data-blue: #2563A8;    /* angka metrik/link, dipakai hemat */
    --chart-green: #12915A;  /* seri 2 chart (BUKAN stamp-green, §3) */
    --muted: #5C6B72;
    --kartu: #FFFFFF;
    --display: 'Bricolage Grotesque', system-ui, sans-serif;
    --body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ----------------------------------------------------------------- base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.dashboard {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--data-blue);
    outline-offset: 2px;
}

/* Angka rupiah & metrik SELALU mono tabular — ini buku kas. */
.mono {
    font-family: var(--mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10;
    padding: 0.5rem 1rem;
    background: var(--ink);
    color: var(--paper);
}

.skip-link:focus {
    left: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- frame */

.dash-frame {
    display: flex;
    min-height: 100vh;
}

/* Sidebar kiri sempit: ikon + label. */
.dash-sidebar {
    flex: 0 0 200px;
    border-right: 1px solid var(--ruling);
    padding: 1.25rem 0.75rem;
}

.dash-brand {
    margin: 0 0 1.5rem;
    padding: 0 0.75rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

/* Wordmark: "seller.id" is one word, so the .id only steps back a weight and
   a shade — never far enough to read as a separate token. Same rule serves
   the sidebar brand and the auth screens. */
.merek__id {
    font-weight: 500;
    color: var(--muted);
}

.dash-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dash-nav__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.925rem;
    color: var(--ink);
}

.dash-nav__link svg {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--muted);
}

.dash-nav__link:hover {
    background: var(--kartu);
    border-color: var(--ruling);
}

.dash-nav__link:active {
    background: var(--ruling);
}

/* Current-page state: kartu putih + tinta stempel hijau. */
.dash-nav__link[aria-current="page"] {
    background: var(--kartu);
    border-color: var(--ruling);
    color: var(--stamp-green);
    font-weight: 500;
}

.dash-nav__link[aria-current="page"] svg {
    color: var(--stamp-green);
}

/* Konten satu kolom maks 960px. */
.dash-body {
    flex: 1;
    min-width: 0;
}

.dash-header {
    max-width: 960px;
    padding: 1.5rem 1.5rem 0;
}

.dash-store {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.2;
}

.dash-subdomain {
    margin: 0.15rem 0 0;
    font-family: var(--mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    color: var(--muted);
}

.dash-main {
    max-width: 960px;
    padding: 1.25rem 1.5rem 3rem;
}

/* Satu kolom 960px itu bentuk buku kas, dan itu default-nya. Kelonggaran ini
   cuma buat halaman yang emang butuh dua benda bersebelahan sekaligus
   (penyusun tata letak: rak + kanvas + pratinjau). */
.dash-main--lebar {
    max-width: 1560px;
}

@media (max-width: 720px) {
    .dash-frame {
        flex-direction: column;
    }

    .dash-sidebar {
        flex: none;
        border-right: 0;
        border-bottom: 1px solid var(--ruling);
        padding: 0.75rem;
    }

    .dash-brand {
        margin-bottom: 0.5rem;
        padding: 0;
    }

    .dash-nav {
        flex-direction: row;
        overflow-x: auto;
    }

    .dash-nav__link {
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------- kartu */

.kartu {
    background: var(--kartu);
    border: 1px solid var(--ruling);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    margin: 0 0 1rem;
}

.kartu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.kartu-grid .kartu {
    margin: 0;
}

@media (max-width: 720px) {
    .kartu-grid {
        grid-template-columns: 1fr;
    }
}

.kartu__judul {
    margin: 0 0 0.5rem;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.05rem;
}

.kartu__angka {
    margin: 0 0 0.5rem;
    font-size: 1.9rem;
    line-height: 1.1;
}

/* Baris buku kas: label kiri, angka mono kanan, ruled line antar baris. */
.baris-kas {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--ruling);
}

.baris-kas__label {
    color: var(--muted);
    font-size: 0.875rem;
}

.baris-kas__angka {
    text-align: right;
    overflow-wrap: anywhere;
}

.tautan {
    color: var(--data-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.tautan:hover {
    text-decoration-thickness: 2px;
}

.kosong {
    color: var(--muted);
    margin: 0.5rem 0;
}

/* ------------------------------------------------- chip (stempel-mini) */

/* Border warna status, uppercase letterspaced, background transparan. */
.chip {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border: 1.5px solid currentColor;
    border-radius: 6px;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chip--ok {
    color: var(--stamp-green);
}

.chip--warn {
    color: var(--pending-ink);
}

.chip--off {
    color: var(--muted);
}

.chip--info {
    color: var(--data-blue);
}

.chip--tolak {
    color: var(--stamp-red);
}

/* Chip yang jadi tombol saring: bentuknya tetap stempel-mini. */
.chip--saring {
    cursor: pointer;
    font-family: var(--body);
    color: var(--muted);
}

.chip--saring:hover {
    background: var(--kartu);
}

/* Yang lagi aktif: tinta dibalik, jadi jelas mana yang kepilih. */
.chip--pilih {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* --------------------------------------------------------------- tombol */

.tombol {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border: 1.5px solid var(--ink);
    border-radius: 8px;
    background: var(--kartu);
    color: var(--ink);
    font-family: var(--body);
    font-weight: 500;
    font-size: 0.925rem;
    cursor: pointer;
}

.tombol:hover {
    background: var(--paper);
}

.tombol:active {
    transform: translateY(1px);
}

.tombol:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.tombol--utama {
    background: var(--stamp-green);
    border-color: var(--stamp-green);
    color: #FFFFFF;
}

.tombol--utama:hover {
    background: #0C5947;
}

.tombol--tolak {
    background: transparent;
    border-color: var(--stamp-red);
    color: var(--stamp-red);
}

.tombol--tolak:hover {
    background: #FBF1F0;
}

/* ---------------------------------------------------------------- chart */

.chart-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0.75rem 0;
}

@media (max-width: 720px) {
    .chart-duo {
        grid-template-columns: 1fr;
    }
}

.chart {
    margin: 0;
}

.chart__judul {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.chart__svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Grid resesif warna ruling; label pakai tinta muted, BUKAN warna seri. */
.chart__grid {
    stroke: var(--ruling);
    stroke-width: 1;
}

.chart__label {
    fill: var(--muted);
    font-family: var(--mono);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.chart__titik:focus {
    outline: none;
}

.chart__titik:focus circle:last-child,
.chart__titik:hover circle:last-child {
    stroke: var(--ink);
    stroke-width: 1.5;
}

/* --------------------------------------------------------------- ledger */

.ledger-gulir {
    overflow-x: auto;
}

.ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ledger th {
    text-align: left;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--ruling);
}

.ledger td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--ruling);
    white-space: nowrap;
}

.ledger .angka {
    text-align: right;
}

/* ------------------------------------------------------------ ads center */

.filter-baris {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.filter-baris label {
    font-weight: 500;
    font-size: 0.875rem;
}

.adset-kepala {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.adset-meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.adset-kanan {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.adset-budget {
    font-size: 1rem;
}

.adset-budget small {
    color: var(--muted);
    font-size: 0.75em;
}

/* ---------------------------------------------------------------- inbox */

.inbox-flash {
    padding: 0.6rem 1rem;
    border: 1.5px solid var(--stamp-green);
    border-radius: 8px;
    background: var(--kartu);
    color: var(--stamp-green);
    font-weight: 500;
}

.inbox-seksi__judul {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.15rem;
    margin: 1.25rem 0 0.75rem;
}

.usulan-narasi {
    margin: 0.25rem 0 0.5rem;
}

.usulan-bukti {
    margin: 0.5rem 0;
    padding-left: 0;
    list-style: none;
    font-size: 0.8rem;
    color: var(--muted);
}

.usulan-waktu {
    margin: 0.5rem 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.usulan-aksi {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

/* ----------------------------------------------- aktivitas autopilot */

/* Baris status di atas daftar: chip stempel-mini + satu kalimat penjelas. */
.autopilot-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--muted);
}

/* Kartu laporan: sama seperti kartu lain, cuma jarak antar kartunya
   dilonggarin karena isinya lebih padat (narasi + baris kas + bukti). */
.kartu--autopilot {
    margin-bottom: 1rem;
}

.kartu--autopilot .baris-kas:first-of-type {
    margin-top: 0.5rem;
}

/* ------------------------------------- stempel (SIGNATURE ELEMENT, §1) */

.kartu--riwayat {
    position: relative;
    padding-right: 10rem;
}

.kartu--distempel .kartu__judul {
    color: var(--muted);
}

/*
 * Stempel bertinta miring ~-8°: border ganda, teks uppercase display,
 * tekstur tinta tidak rata via mask noise (radial-gradient berulang).
 */
.stempel {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    transform: rotate(-8deg);
    padding: 0.3rem 0.7rem;
    border: 2.5px solid currentColor;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px currentColor;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
    -webkit-mask-image:
        radial-gradient(circle at 18% 32%, transparent 0 1.5%, #000 4%),
        radial-gradient(circle at 66% 71%, transparent 0 1.2%, #000 3.5%),
        radial-gradient(circle at 84% 22%, transparent 0 1%, #000 3%);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(circle at 18% 32%, transparent 0 1.5%, #000 4%),
        radial-gradient(circle at 66% 71%, transparent 0 1.2%, #000 3.5%),
        radial-gradient(circle at 84% 22%, transparent 0 1%, #000 3%);
    mask-composite: intersect;
}

.stempel--setuju {
    color: var(--stamp-green);
}

.stempel--tolak {
    color: var(--stamp-red);
}

/* Animasi "cap": scale 1.15 → 1, 150ms, ease-out. */
@keyframes cap {
    from {
        transform: rotate(-8deg) scale(1.15);
        opacity: 0.4;
    }

    to {
        transform: rotate(-8deg) scale(1);
        opacity: 0.9;
    }
}

.stempel--cap {
    animation: cap 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .stempel--cap {
        animation: none;
    }

    .tombol:active {
        transform: none;
    }
}

/* ----------------------------------------------------------------- form */

.kartu--form {
    margin-bottom: 1.25rem;
}

.form-baris {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.form-baris label,
.form-baris legend,
.form-label {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.3rem;
}

/* Label kiri + tautan bantuan kanan pada satu baris (mis. "Lupa password?"
   di sebelah label Password). Labelnya sendiri sudah punya margin bawah. */
.label-baris {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.tautan--kecil {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
}

.form-baris input[type="text"],
.form-baris input[type="email"],
.form-baris input[type="password"],
.form-baris select,
.saluran__isi input[type="text"],
.saluran__isi input[type="email"],
.filter-baris select {
    width: 100%;
    max-width: 26rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--ruling);
    border-radius: 8px;
    background: var(--kartu);
    color: var(--ink);
    font-family: var(--body);
    font-size: 0.925rem;
}

.filter-baris select {
    width: auto;
}

.form-baris input.mono,
.saluran__isi input.mono {
    font-family: var(--mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.form-baris input:focus-visible,
.form-baris select:focus-visible,
.saluran__isi input:focus-visible,
.filter-baris select:focus-visible {
    outline: 2px solid var(--data-blue);
    outline-offset: 2px;
    border-color: var(--data-blue);
}

.form-bacaan {
    margin: 0;
    font-size: 0.925rem;
    overflow-wrap: anywhere;
}

.form-bantuan {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
    max-width: 34rem;
}

.form-galat {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--stamp-red);
    font-weight: 500;
}

.radio-kartu {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--ruling);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.radio-kartu:has(input:checked) {
    border-color: var(--stamp-green);
    box-shadow: inset 0 0 0 1px var(--stamp-green);
}

.radio-kartu input {
    margin-top: 0.25rem;
    accent-color: var(--stamp-green);
}

.radio-kartu small {
    display: block;
    color: var(--muted);
    font-weight: 400;
}

.logo-pratinjau {
    max-width: 96px;
    max-height: 96px;
    border: 1px solid var(--ruling);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.form-kaki {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* "Tersimpan" — suara stempel kecil, bukan toast. */
.tersimpan {
    color: var(--stamp-green);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Saluran notifikasi: baris per channel, ruled line antar baris. */
.saluran {
    padding: 0.75rem 0;
    border-top: 1px solid var(--ruling);
}

.saluran:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.saluran__kepala {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.saluran__isi {
    margin-top: 0.5rem;
}

.saluran--nonaktif .saklar {
    color: var(--muted);
}

.saklar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
}

.saklar input {
    accent-color: var(--stamp-green);
    width: 1.05rem;
    height: 1.05rem;
}

.saklar input:disabled {
    cursor: not-allowed;
}

/* Checkbox rows keep their inline-flex shape inside a .form-baris. */
.form-baris label.saklar {
    display: inline-flex;
    margin-bottom: 0;
}

/* ------------------------------------------------- akun (sidebar bawah) */

/*
 * Identitas + keluar duduk di kaki sidebar, di bawah ruled line — sama
 * seperti baris terakhir di buku kas. Logout WAJIB form POST (bukan tautan).
 */
.dash-akun {
    margin-top: 1.25rem;
    padding: 0.75rem 0.75rem 0;
    border-top: 1px solid var(--ruling);
}

.dash-akun__nama {
    margin: 0 0 0.15rem;
    font-weight: 500;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.dash-toko {
    margin-top: 1.25rem;
    padding: 0.75rem 0.75rem 0;
    border-top: 1px solid var(--ruling);
}

.dash-toko__judul {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.dash-toko__link {
    display: block;
    padding: 0.2rem 0;
    font-size: 0.875rem;
    color: var(--data-blue);
    text-underline-offset: 2px;
}

/* Aksi POST yang harus terbaca sebagai tautan (Keluar). */
.tautan-tombol {
    padding: 0;
    border: 0;
    background: none;
    color: var(--data-blue);
    font-family: var(--body);
    font-size: 0.875rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.tautan-tombol:hover {
    text-decoration-thickness: 2px;
}

.tautan-tombol--tolak {
    color: var(--stamp-red);
}

/* -------------------------------------------------------------- produk */

.produk-kepala {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.produk-kepala__judul {
    margin: 0;
    font-size: 1.15rem;
}

/* Thumbnail 40px: foto, atau blok inisial (placeholder terdesain, §2). */
.produk-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid var(--ruling);
    object-fit: cover;
}

.produk-thumb--kosong {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--paper), #E9EDE8);
    color: var(--muted);
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.05rem;
}

.produk-nama {
    white-space: normal;
    min-width: 12rem;
}

.produk-aksi {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: flex-end;
}

.produk-aksi .tombol {
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
}

.produk-konfirmasi {
    font-size: 0.8rem;
    color: var(--stamp-red);
    font-weight: 500;
}

/* Varian diedit sebagai baris buku kas di dalam form produk: satu baris =
   satu pilihan yang bisa dibeli. Ruled line antar baris, angka mono kanan —
   sama persis kayak tabel tarif ongkir, karena isinya juga daftar angka. */
.varian-blok {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ruling);
}

.varian-blok legend {
    padding: 0;
}

.varian-tabel td {
    vertical-align: top;
}

.varian-tabel .tarif-input {
    max-width: 12rem;
}

.tarif-input--sempit {
    max-width: 6rem;
}

.varian-blok .tombol {
    margin-top: 0.75rem;
}

/* Galeri foto: daftar bernomor (urutannya PENTING — nomor 1 itu sampul),
   tiap baris fotonya kecil di kiri, aksinya di kanan. */
.galeri-kelola {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ruling);
}

.galeri-daftar {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.galeri-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--ruling);
}

.galeri-item:first-child {
    border-top: 0;
}

.galeri-thumb {
    width: 48px;
    height: 60px;
    object-fit: cover;
    border: 1px solid var(--ruling);
    border-radius: 6px;
    flex: 0 0 auto;
}

.galeri-aksi {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.galeri-aksi .tautan-tombol:disabled {
    color: var(--muted);
    cursor: not-allowed;
    text-decoration: none;
}

/* ------------------------------------------------------------- pesanan */

.saring {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.9rem;
}

.pesanan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 720px) {
    .pesanan-grid {
        grid-template-columns: 1fr;
    }
}

.pesanan-sub {
    margin: 0 0 0.35rem;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.875rem;
}

.pesanan-grid > div > .pesanan-sub:not(:first-child) {
    margin-top: 1.1rem;
}

/* Baris total: garis ganda ala buku kas, angkanya lebih tegas. */
.baris-kas--total {
    border-top: 2px solid var(--ink);
    font-weight: 500;
}

.pesanan-aksi {
    flex-wrap: wrap;
}

.pesanan-kirim {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ruling);
}

.form-galat--blok {
    padding: 0.55rem 0.75rem;
    border-left: 3px solid var(--stamp-red);
    background: #FBF1F0;
}

/* ---------------------------------------------------------- pengiriman */

/* Tarif ongkir diedit langsung di baris buku kas: input kecil, angka mono. */
.tarif-input {
    width: 100%;
    max-width: 9rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--ruling);
    border-radius: 6px;
    background: var(--kartu);
    color: var(--ink);
    font-family: var(--body);
    font-size: 0.875rem;
}

.tarif-input.mono {
    font-family: var(--mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.tarif-input:focus-visible {
    outline: 2px solid var(--data-blue);
    outline-offset: 2px;
    border-color: var(--data-blue);
}

.tarif-layanan {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
}

.tarif-baru {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ruling);
}

/* Alamat asal kirim: blok sendiri di dalam seksi Pengiriman, dipisah garis
 * ruling seperti form tarif baru — bukan kartu baru, karena secara isi ia
 * bagian dari pengaturan pengiriman yang sama. */
.asal-kirim {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ruling);
}

.paginasi {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.paginasi__hitungan {
    font-size: 0.8rem;
    color: var(--muted);
}

/* ------------------------------------------- auth & onboarding (satu kartu) */

.auth-halaman {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
}

.auth-wadah {
    width: 100%;
    max-width: 27rem;
    padding: 3rem 1.25rem 4rem;
}

.auth-merek {
    margin: 0 0 1.25rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.auth-kartu {
    margin-bottom: 1rem;
}

.auth-judul {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.2;
}

.auth-subjudul {
    margin: 0.15rem 0 1.25rem;
    color: var(--muted);
    font-size: 0.925rem;
}

.auth-kaki {
    margin: 0;
    font-size: 0.925rem;
    color: var(--muted);
}

/*
 * Kabar sukses di kartu auth (tautan reset terkirim, password sudah diganti).
 * Bukan pill pastel: garis tinta stempel di kiri, seperti catatan yang
 * dibubuhkan di pinggir buku kas.
 */
.auth-kabar {
    margin: 0 0 1.1rem;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--stamp-green);
    background: rgba(15, 107, 84, 0.06);
    color: var(--ink);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Inline form (Keluar) di kaki onboarding, sebaris dengan teksnya. */
.auth-keluar {
    display: inline;
}

/* Input subdomain + ekor domain: satu baris, ekornya mono & resesif. */
.alamat-baris {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.alamat-baris input {
    flex: 1 1 8rem;
    min-width: 0;
}

.alamat-ekor {
    font-size: 0.875rem;
    color: var(--muted);
}

/* ======================================================== Tata Letak (§1)
 *
 * Penyusun halaman depan toko: tiga panel — rak widget, kanvas, pratinjau.
 * CHROME-nya tetap Buku Kas (kartu putih di atas kertas, garis ruling, chip
 * stempel-mini, fokus data-blue). Yang digambar DI DALAM kartu (blok .tl-mini)
 * pakai palet STOREFRONT §2, bukan palet dashboard — soalnya yang digambar
 * memang muka toko: miniatur murni CSS, tanpa gambar, tanpa JS.
 */

/* Daftar centang produk buat bagian "Produk pilihan". */
.bagian-produk {
    display: grid;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--ruling);
    border-radius: 8px;
    background: #FFFFFF;
}

/* -------------------------------------------------------- tiga panel */

/*
 * Rak sempit — kanvas fleksibel — pratinjau selebar layar HP.
 * DI LAYAR SEMPIT panelnya numpuk dengan urutan kanvas → rak → pratinjau:
 * yang paling sering dilihat penjual itu halamannya sendiri, bukan raknya.
 */
.tl-panel {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr) minmax(0, 24rem);
    align-items: start;
    gap: 14px;
    margin-top: 14px;
}

.tl-kolom {
    min-width: 0;
}

@media (max-width: 1180px) {
    .tl-panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .tl-kolom--kanvas {
        order: 1;
    }

    .tl-kolom--rak {
        order: 2;
    }

    .tl-kolom--pratinjau {
        order: 3;
        grid-column: 1 / -1;
    }
}

@media (max-width: 780px) {
    .tl-panel {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Panel yang isinya bisa panjang nempel ikut discroll sendiri di layar lebar,
   biar pratinjau nggak ilang pas lagi nyusun. */
@media (min-width: 1181px) {
    .tl-kolom--rak,
    .tl-kolom--pratinjau {
        position: sticky;
        top: 14px;
        max-height: calc(100vh - 28px);
        overflow-y: auto;
    }
}

/* Live region: tetap ada di DOM walau kosong (kalau elemennya baru muncul
   barengan teksnya, pembaca layar sering kelewat), tapi nggak makan tempat. */
.tl-kabar {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--stamp-green);
    background: rgba(15, 107, 84, 0.06);
    color: var(--ink);
    font-size: 0.875rem;
    line-height: 1.5;
}

.tl-kabar:empty {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* ------------------------------------------------------- kartu widget */

.tl-rak__grup {
    margin: 14px 0 6px;
    font-family: var(--display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}

.tl-rak,
.tl-kanvas {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Kanvas kosong tetap jadi sasaran jatuh yang kelihatan. */
.tl-kanvas {
    min-height: 4.5rem;
    padding: 6px;
    border: 1px dashed var(--ruling);
    border-radius: 10px;
}

.tl-kartu {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--ruling);
    border-radius: 10px;
    background: #FFFFFF;
}

/*
 * Miniatur kiri, nama + gunanya di kanan, tombolnya di bawah teks. Bukan tiga
 * kolom sebaris: deskripsi tiap widget itu satu kalimat penuh, dan dijejelin
 * ke kolom selebar delapan karakter bikin kartunya nggak kebaca sama sekali.
 */
.tl-kartu--rak {
    grid-template-columns: 4.25rem minmax(0, 1fr);
    align-items: start;
    gap: 6px 10px;
    cursor: grab;
}

.tl-kartu--rak .tl-mini {
    grid-row: span 2;
}

.tl-kartu--rak:hover {
    border-color: var(--data-blue);
}

.tl-kartu__isi {
    display: block;
    min-width: 0;
}

.tl-kartu__label {
    display: block;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.925rem;
    color: var(--ink);
}

.tl-kartu__narasi {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--muted);
}

.tl-kartu__tambah {
    justify-self: start;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* --------------------------------------------------------- kartu kanvas */

.tl-kartu__kepala {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tl-kartu__nomor {
    font-size: 0.8rem;
    color: var(--muted);
}

/* Gagang seret: tombol beneran, jadi kena fokus keyboard dan bisa nyuarain
   aria-label-nya — walaupun yang bisa dilakuin dari keyboard itu ↑/↓. */
.tl-genggam {
    display: inline-flex;
    align-items: center;
    padding: 2px 4px;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: grab;
}

.tl-genggam svg {
    width: 12px;
    height: 16px;
}

.tl-genggam:active {
    cursor: grabbing;
}

.tl-genggam:focus-visible {
    outline: 2px solid var(--data-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.tl-kartu__urut {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
}

.tl-kartu__urut .tautan-tombol:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Badan kartu = tombol "buka setelan". Dibikin rata kiri dan polos biar
   kelihatan kayak kartu, bukan kayak tombol. */
.tl-kartu__badan {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tl-kartu__badan:hover {
    background: var(--paper);
}

.tl-kartu__badan:focus-visible {
    outline: 2px solid var(--data-blue);
    outline-offset: 2px;
}

.tl-kartu__badan--pensiun {
    cursor: default;
}

.tl-kartu__aksi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--ruling);
}

/* Bagian yang dimatiin: diredupin + stempel-mini "Nonaktif" di kepalanya. */
.tl-kartu--mati .tl-kartu__badan {
    opacity: 0.45;
}

/* Keadaan seret (dari SortableJS). */
.tl-kartu--bayangan {
    opacity: 0.35;
    border-style: dashed;
}

.tl-kartu--dipilih {
    border-color: var(--data-blue);
}

/* Kartu yang lagi "terbang" ngikutin kursor (jalur fallback SortableJS). */
.tl-kartu--terbang {
    border-color: var(--data-blue);
    box-shadow: 0 6px 18px rgba(28, 43, 51, 0.18);
    opacity: 1;
}

/* ---------------------------------------------------------- pratinjau */

.tl-perangkat {
    display: flex;
    gap: 6px;
    margin: 0 0 8px;
}

.tl-bingkai {
    margin: 0 auto;
    border: 1px solid var(--ruling);
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
}

/* Tombolnya CUMA ganti lebar bingkainya — url-nya sama persis. */
.tl-bingkai--desktop {
    width: 100%;
}

.tl-bingkai--mobile {
    width: 22rem;
    max-width: 100%;
}

.tl-iframe {
    display: block;
    width: 100%;
    height: 30rem;
    border: 0;
}

/* ==================================================== miniatur widget
 *
 * Gambaran mini tiap widget, dipakai di kartu rak DAN kartu kanvas. Semuanya
 * blok CSS — nggak ada gambar, nggak ada ikon font. Paletnya STOREFRONT (§2:
 * putih, tinta #111114, garis rambut #E6E7E9, abu #6B6E76, aksen vermilion
 * #D93A2B, kuning promo #FFD84D) karena yang lagi digambar itu muka toko;
 * chrome di sekelilingnya tetap Buku Kas.
 */
.tl-mini {
    --m-tinta: #111114;
    --m-garis: #E6E7E9;
    --m-abu: #6B6E76;
    --m-aksen: #D93A2B;
    --m-promo: #FFD84D;

    display: grid;
    gap: 3px;
    align-content: start;
    padding: 5px;
    border: 1px solid var(--m-garis);
    border-radius: 4px;
    background: #FFFFFF;
    /* Sepotong halaman, bukan halaman utuh: widget yang isinya panjang
       (FAQ dua puluh baris) tetap segede kartu yang lain. */
    max-height: 7rem;
    overflow: hidden;
}

.tl-mini__judul {
    height: 4px;
    width: 60%;
    border-radius: 1px;
    background: var(--m-tinta);
}

.tl-mini__judul--besar {
    height: 6px;
    width: 72%;
}

.tl-mini__baris {
    height: 2px;
    border-radius: 1px;
    background: var(--m-abu);
    opacity: 0.55;
}

.tl-mini__baris--pendek {
    width: 55%;
}

.tl-mini__baris--samar {
    opacity: 0.3;
}

.tl-mini__baris--tengah {
    width: 50%;
    justify-self: center;
}

.tl-mini__baris--mini {
    width: 70%;
}

.tl-mini__baris--harga {
    width: 40%;
    background: var(--m-tinta);
    opacity: 0.75;
}

.tl-mini__tombol {
    width: 34%;
    height: 6px;
    border-radius: 1px;
    background: var(--m-tinta);
}

.tl-mini__tombol--wa {
    width: 45%;
    height: 7px;
    background: var(--m-aksen);
}

/* Hero: satu panggung tinggi, isinya ketengah. */
.tl-mini--hero {
    padding: 0;
}

.tl-mini__panggung {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    width: 100%;
    padding: 10px 6px;
    background: #F4F4F6;
}

/* Hero yang punya gambar digambar sebagai foto, bukan tipografi. */
.tl-mini__panggung--foto {
    background: linear-gradient(150deg, #EEEFF1, #CFD2D8);
}

/* Grid produk / produk pilihan / galeri: ubin foto. */
.tl-mini__kisi {
    display: grid;
    grid-template-columns: repeat(var(--tl-kolom, 2), minmax(0, 1fr));
    gap: 3px;
}

.tl-mini__ubin {
    display: grid;
    gap: 2px;
    min-width: 0;
}

/* Placeholder foto = gradasi halus, bukan kotak abu mati (§2). */
.tl-mini__foto {
    aspect-ratio: 4 / 5;
    border-radius: 1px;
    background: linear-gradient(160deg, #F1F2F4, #DDDFE3);
}

.tl-mini__foto--b {
    background: linear-gradient(200deg, #EDEFF1, #D6D9DE);
}

.tl-mini__foto--lanskap {
    aspect-ratio: 4 / 3;
}

/* Banner promo: satu pita lebar, warnanya ikut kunci palet yang dipilih. */
.tl-mini--banner {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.tl-mini__pita {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
}

.tl-mini__pita--aksen {
    background: var(--m-aksen);
}

.tl-mini__pita--promo {
    background: var(--m-promo);
}

.tl-mini__pita--tinta {
    background: var(--m-tinta);
}

.tl-mini__pita--netral {
    background: #ECEDEF;
}

.tl-mini__pita-teks {
    flex: 1 1 auto;
    height: 3px;
    border-radius: 1px;
    background: #FFFFFF;
    opacity: 0.85;
}

.tl-mini__pita--promo .tl-mini__pita-teks,
.tl-mini__pita--netral .tl-mini__pita-teks {
    background: var(--m-tinta);
    opacity: 0.7;
}

.tl-mini__pita-tombol {
    flex: 0 0 auto;
    width: 14px;
    height: 5px;
    border-radius: 1px;
    background: #FFFFFF;
}

.tl-mini__pita--promo .tl-mini__pita-tombol,
.tl-mini__pita--netral .tl-mini__pita-tombol {
    background: var(--m-tinta);
}

/* FAQ: baris bergaris + chevron, bentuk <details>/<summary>. */
.tl-mini__tanya {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--m-garis);
}

.tl-mini__baris--tanya {
    flex: 1 1 auto;
}

.tl-mini__chevron {
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    border-right: 1px solid var(--m-abu);
    border-bottom: 1px solid var(--m-abu);
    transform: rotate(45deg);
}

/* Kontak: balon chat (satu sudut kotak, kayak ekor balon). */
.tl-mini__balon {
    display: grid;
    gap: 3px;
    padding: 5px;
    border: 1px solid var(--m-garis);
    border-radius: 5px 5px 5px 0;
    background: #F7F7F8;
}

/* ------------------------------------------------- pesan kilat (flash PRG) */

/* Redirect yang bawa ->with('success'|'error') tampil di sini. Bentuknya
   baris bertinta, bukan banner warna penuh — kartu tetap yang utama. */
.kabar {
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid var(--ruling);
    border-left-width: 3px;
    border-radius: 8px;
    background: var(--kartu);
    font-size: 0.94rem;
}

.kabar--ok {
    border-left-color: var(--stamp-green);
}

.kabar--galat {
    border-left-color: var(--stamp-red);
}

.remah {
    margin: 0 0 14px;
    font-size: 0.9rem;
    color: var(--muted);
}

/* ------------------------------------------------------------- siap iklan */

/* Daftar periksa yang mencentang dirinya sendiri. Tetap baris buku kas:
   label kiri, status kanan, ruled line antar butir — tanpa ikon ceklis
   dekoratif, chip stempel-mini yang sudah ada sudah cukup. */
.siap-aksi {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.siap-memuat {
    font-size: 0.9rem;
    color: var(--muted);
}

.siap-daftar {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.siap-butir {
    padding: 16px 0;
    border-top: 1px solid var(--ruling);
}

.siap-butir:first-child {
    border-top: 0;
    padding-top: 6px;
}

.siap-butir__kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.siap-butir__judul {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.02rem;
}

.siap-butir__catatan {
    margin: 6px 0 0;
    font-size: 0.86rem;
    color: var(--muted);
}

.siap-butir__kenapa {
    margin: 8px 0 0;
    font-size: 0.94rem;
    color: var(--muted);
    max-width: 62ch;
}

.siap-butir__cara {
    margin: 8px 0 0;
    font-size: 0.94rem;
    max-width: 62ch;
}

.siap-pixel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.siap-pixel select {
    padding: 8px 10px;
    border: 1px solid var(--ruling);
    border-radius: 8px;
    background: var(--kartu);
    font: inherit;
    color: inherit;
}

.siap-batas {
    margin: 10px 0;
    padding-left: 20px;
    max-width: 62ch;
}

.siap-batas li {
    margin: 4px 0;
}

/* ------------------------------------------------ wizard iklan pertama */

/* Jejak langkah: baris tipis di atas kartu, bukan stepper bergambar.
   Angka mono karena di buku kas angka selalu mono. */
.wz-jejak {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: 0.86rem;
    color: var(--muted);
}

.wz-jejak__nomor {
    display: inline-block;
    min-width: 1.4em;
    color: var(--muted);
}

.wz-jejak__item--lewat {
    color: var(--stamp-green);
}

.wz-jejak__item--lewat .wz-jejak__nomor {
    color: var(--stamp-green);
}

.wz-jejak__item--kini {
    color: var(--ink);
    font-weight: 500;
}

.wz-jejak__item--kini .wz-jejak__nomor {
    color: var(--data-blue);
}

.wz-navigasi {
    display: flex;
    gap: 10px;
    margin: 18px 0 0;
}

/* Kartu draf AI: dipisah ruling, bukan kotak berwarna. */
.wz-draf {
    margin: 14px 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--ruling);
}

.wz-draf__tujuan {
    margin: 0 0 8px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.wz-draf__teks {
    margin: 0 0 6px;
    max-width: 62ch;
}

.wz-draf__judul {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
}

.wz-draf__desk {
    margin: 2px 0 10px;
    font-size: 0.92rem;
    color: var(--muted);
}

.form-baris textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ruling);
    border-radius: 8px;
    background: var(--kartu);
    font: inherit;
    color: inherit;
    resize: vertical;
}

.form-baris textarea:focus-visible {
    outline: 2px solid var(--data-blue);
    outline-offset: 1px;
}

.wz-foto__gambar {
    width: 120px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

.wz-umur,
.wz-cari {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.wz-cari input[type="text"] {
    flex: 1 1 200px;
}

.wz-terpilih {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.wz-subjudul {
    margin: 22px 0 8px;
    font-family: var(--display);
    font-size: 1.02rem;
    font-weight: 600;
}

/* Pratinjau: mirip kartu iklan di feed, tetap tenang — ini alat baca,
   bukan tiruan Facebook. */
.wz-pratinjau {
    max-width: 420px;
    margin: 14px 0;
    border: 1px solid var(--ruling);
    border-radius: 10px;
    overflow: hidden;
    background: var(--kartu);
}

.wz-pratinjau__kepala {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.wz-pratinjau__kepala small {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
}

.wz-pratinjau__avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--ruling);
    font-family: var(--display);
    font-weight: 700;
}

.wz-pratinjau__teks {
    margin: 0;
    padding: 0 14px 12px;
    white-space: pre-line;
}

.wz-pratinjau__gambar {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.wz-pratinjau__kaki {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--paper);
}

.wz-pratinjau__kaki small {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
}

.wz-pratinjau__kaki strong {
    display: block;
    font-family: var(--display);
}

.wz-pratinjau__tombol {
    flex: none;
    padding: 7px 12px;
    border: 1px solid var(--ruling);
    border-radius: 7px;
    background: var(--kartu);
    font-size: 0.86rem;
    white-space: nowrap;
}

/* Istilah dijelasin di tempatnya — HTML murni, tanpa JS. */
.istilah {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--ruling);
    border-radius: 8px;
    background: var(--paper);
}

.istilah > summary {
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 500;
}

.istilah > p {
    margin: 8px 0 0;
    font-size: 0.92rem;
    color: var(--muted);
    max-width: 62ch;
}

/* ----------------------------------------------- kamus & istilah iklan */

/* Kata yang punya tooltip (atribut title): garis putus-putus tipis, bukan
   ikon tanda tanya — supaya header tabel tetap tenang. */
.istilah-singkat {
    border-bottom: 1px dotted var(--muted);
    cursor: help;
}

.kamus {
    margin: 0;
}

.kamus__baris {
    padding: 16px 0;
    border-top: 1px solid var(--ruling);
}

.kamus__baris:first-child {
    border-top: 0;
    padding-top: 4px;
}

.kamus__istilah {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.02rem;
}

.kamus__arti {
    margin: 0;
}

.kamus__singkat {
    margin: 4px 0 0;
    max-width: 62ch;
}

.kamus__panjang {
    margin: 6px 0 0;
    font-size: 0.94rem;
    color: var(--muted);
    max-width: 62ch;
}

/* ---------------------------------------------------------------------------
 * Kode OTP verifikasi email
 * ---------------------------------------------------------------------------
 * Enam angka yang disalin dari email. Mono + tabular-nums + jarak antar huruf:
 * ini angka yang dibaca dan diketik ulang, jadi lebar karakter yang sama
 * bukan hiasan — ia yang bikin salah ketik langsung kelihatan
 * (visual-direction §1: angka SELALU mono).
 */
.input-otp {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.34em;
    /* Padding kiri mengimbangi letter-spacing pada karakter terakhir, yang
       kalau tidak akan bikin teksnya terlihat mepet ke kiri. */
    padding-left: calc(0.75rem + 0.17em);
    text-align: center;
}

.otp-ulang {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--ruling);
}

.otp-ulang .form-bantuan {
    margin: 0;
}

/* ---------------------------------------------------------------------------
 * Tanya Asisten
 * ---------------------------------------------------------------------------
 * SENGAJA BUKAN GELEMBUNG CHAT. Gelembung berwarna berhadap-hadapan adalah
 * bentuk aplikasi pesan, dan di dalam dashboard "Buku Kas" ia terbaca sebagai
 * tempelan dari produk lain. Di sini percakapan ditulis sebagai ENTRI BUKU:
 * pertanyaan penjual jadi baris bertanda di margin, jawabannya mengalir di
 * bawahnya, dipisah garis ruling — persis cara catatan ditulis di buku kas.
 */
.chat-gulir {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 1.1rem 1.25rem;
    background: #ffffff;
    border: 1px solid var(--ruling);
    border-radius: 10px;
}

.chat-pesan + .chat-pesan {
    padding-top: 1.25rem;
    border-top: 1px solid var(--ruling);
}

.chat-pesan__isi {
    margin: 0;
    white-space: pre-line;
    line-height: 1.6;
}

/* Pertanyaan penjual: ditandai di margin, bukan diwarnai seluruhnya. */
.chat-pesan--penjual .chat-pesan__isi {
    padding-left: 0.8rem;
    border-left: 3px solid var(--data-blue);
    font-weight: 500;
}

.chat-pesan__waktu {
    margin: 0.35rem 0 0;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.chat-pesan--penjual .chat-pesan__waktu {
    padding-left: 0.8rem;
}

.chat-kosong {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.chat-kosong__judul {
    margin: 0;
    font-weight: 600;
}

.chat-kosong__teks {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    color: var(--muted);
}

/* Contoh pertanyaan: tombol yang mengisi kolom, jadi tampil sebagai teks
   yang bisa diklik — bukan tombol utama yang bersaing dengan "Tanya". */
.chat-contoh {
    padding: 0.4rem 0.7rem;
    background: var(--paper);
    border: 1px solid var(--ruling);
    border-radius: 999px;
    color: var(--ink);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.chat-contoh:hover {
    border-color: var(--data-blue);
    color: var(--data-blue);
}

.chat-mengetik {
    margin: 0;
    font-size: 0.875rem;
    font-style: italic;
    color: var(--muted);
}

.chat-form {
    margin-top: 1.1rem;
}

.chat-baris {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
    margin-top: 0.35rem;
}

.chat-input {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 560px) {
    .chat-baris {
        flex-direction: column;
    }
}

/* Uji koneksi berhasil — hijau stempel, sejajar dengan penanda "Tersimpan". */
.pg-tes-ok {
    margin: 0.6rem 0 0;
    padding: 0.55rem 0.7rem;
    border-left: 3px solid var(--stamp-green);
    background: rgba(15, 107, 84, 0.06);
    font-size: 0.875rem;
}

/* URL notifikasi: dibaca lalu disalin, bukan diketik. Mono supaya tiap
   karakter terbaca jelas — satu huruf meleset bikin pembayaran tidak pernah
   tercatat. */
.pg-webhook input[readonly] {
    font-family: var(--mono);
    font-size: 0.8125rem;
    background: var(--paper);
    cursor: text;
}

/* Langkah-langkah DNS untuk domain sendiri. Daftar bernomor karena urutannya
   memang bercabang (subdomain vs domain utama), bukan sekadar hiasan. */
.domain-langkah {
    margin: 0.4rem 0 0.6rem;
    padding-left: 1.1rem;
    list-style: disc;
}

.domain-langkah li + li {
    margin-top: 0.4rem;
}

.domain-langkah code {
    font-family: var(--mono);
    font-size: 0.8125rem;
    padding: 0.05rem 0.3rem;
    background: var(--paper);
    border: 1px solid var(--ruling);
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * Logo merek (gambar)
 * ---------------------------------------------------------------------------
 * width/height ada di HTML supaya peramban memesan ruangnya sebelum gambarnya
 * turun — tanpa itu isi halaman melompat saat logo muncul. CSS di bawah yang
 * menentukan ukuran TAMPILNYA; height auto menjaga rasionya.
 */
.auth-merek img,
.dash-brand img {
    display: block;
    width: auto;
    height: 1.75rem;
}

.dash-brand img {
    height: 1.5rem;
}

/* Penanda kolom opsional pada form antrian. Ditulis kecil dan redup supaya
   tidak bersaing dengan labelnya sendiri. */
.form-opsional {
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
 * Panel operator (/admin)
 * ---------------------------------------------------------------------------
 * Memakai token yang sama dengan dashboard seller — panel ini dipakai satu
 * orang, dan sistem desain kedua untuk satu pengguna adalah beban yang tidak
 * dibayar siapa pun.
 */
.admin-wadah {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 4rem;
}

.admin-kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ruling);
}

.admin-merek {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.admin-merek img {
    display: block;
    width: auto;
    height: 1.5rem;
}

.admin-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
}

.admin-masuk {
    max-width: 26rem;
    margin: 3rem auto 0;
}

/* Angka ringkasan: mono + tabular supaya kolomnya lurus dan perubahan
   angkanya kelihatan tanpa harus dibaca satu-satu (visual-direction §1). */
.angka-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.9rem;
    margin-bottom: 0.75rem;
}

.angka-sel {
    padding: 0.7rem 0.85rem;
    background: var(--paper);
    border: 1px solid var(--ruling);
    border-radius: 8px;
}

.angka-sel__label {
    margin: 0 0 0.3rem;
    font-size: 0.75rem;
    color: var(--muted);
}

.angka-sel__nilai {
    margin: 0;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.35rem;
    font-weight: 600;
}

.antrian-baris {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--ruling);
}

.antrian-baris__nama {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.2rem;
    font-weight: 600;
}

.antrian-baris__email {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.8125rem;
}

.antrian-baris__jualan {
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
}

.antrian-baris__meta {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    color: var(--muted);
}

.antrian-baris__aksi {
    display: flex;
    gap: 0.5rem;
}

/* Chip status berbentuk stempel-mini: garis warna status, huruf kapital
   berjarak, latar transparan — bukan pil pastel (visual-direction §1). */
.chip {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border: 1.5px solid var(--ruling);
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.chip--menunggu { border-color: var(--pending-ink); color: var(--pending-ink); }
.chip--setuju   { border-color: var(--stamp-green); color: var(--stamp-green); }
.chip--tolak    { border-color: var(--stamp-red);   color: var(--stamp-red); }

/* ---------------------------------------------------------------------------
 * Panel operator — tampilan
 * ---------------------------------------------------------------------------
 * Gaya awal panel ini memakai .tautan bawaan: filternya jadi deretan tautan
 * BIRU BERGARIS BAWAH di tengah palet Buku Kas. Terbaca seperti halaman yang
 * belum selesai, dan tautan biru di sebelah tombol hijau stempel adalah dua
 * bahasa visual yang bertabrakan.
 */
.admin-lompat {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--ruling);
    font-size: 0.8125rem;
}

.admin-lompat a {
    color: var(--muted);
    text-decoration: none;
}

.admin-lompat a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.kartu__kepala {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.kartu__kepala .kartu__judul {
    margin-bottom: 0;
}

.admin-subjudul {
    margin: 1.5rem 0 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.admin-cari {
    display: flex;
    gap: 0.5rem;
    margin: 0.9rem 0;
}

.admin-cari input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Tab penyaring: penanda garis bawah, bukan tautan biru. Yang aktif memakai
   tinta penuh dan garis stempel-hijau — pola yang sama dengan aria-current
   di sidebar seller. */
.admin-tab {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0 0 0.5rem;
    border-bottom: 1px solid var(--ruling);
}

.admin-tab__item {
    padding: 0.4rem 0 0.55rem;
    color: var(--muted);
    font-size: 0.875rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.admin-tab__item:hover {
    color: var(--ink);
}

.admin-tab__item--aktif {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--stamp-green);
}

.admin-kosong {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 0.875rem;
}

/* Baris buku kas: label kiri, angka kanan, dipisah garis ruling. Ini bentuk
   yang sama dengan metrik di dashboard seller (visual-direction §1) — bukan
   tabel, bukan kartu, tapi baris catatan. */
.baris-kas {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--ruling);
}

.baris-kas__kiri {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.baris-kas__sub {
    font-size: 0.75rem;
    color: var(--muted);
    word-break: break-word;
}

.baris-kas__kanan {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.baris-kas__angka {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
}

.angka-sel__ket {
    margin: 0.2rem 0 0;
    font-size: 0.7rem;
    color: var(--muted);
}

.integrasi-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}