/* ===================================================================
 * ADMIN-SIDE COMPONENTS
 * Deliberately OUTSIDE the .ppx-client scope below — these are used on
 * the Tabler-themed admin pages. All namespaced `ppx-` so they can't
 * collide with Tabler's own classes.
 * =================================================================== */

.ppx-status-badge { text-transform: uppercase; font-size: .7rem; letter-spacing: .02em; }

/* Hero banner (see app/Views/admin/partials/hero.php) */
.ppx-hero {
    position: relative;
    overflow: hidden;
    border-radius: .9rem;
    padding: 1.75rem 1.9rem;
    margin-bottom: 1.5rem;
    color: #fff;
    background: linear-gradient(105deg, #0d1424 0%, #1b2a44 55%, #2b4463 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    min-height: 168px; /* biar foto banner kebaca, tidak jadi strip tipis */
}
/* With a photo: image on the right, dark gradient keeps the text readable
   regardless of how light that photo is. */
.ppx-hero-photo::before {
    content: "";
    position: absolute;
    /* top/right/bottom/left, BUKAN shorthand `inset: 0` — WebView lama di
       beberapa HP Android dan browser bawaan WhatsApp/Instagram tidak
       mengenali `inset`. Kalau tidak dikenali, browser DIAM-DIAM
       mengabaikan seluruh baris itu (bukan error), jadi elemen `position:
       fixed/absolute` kehilangan ukuran & posisinya — mengecil mengikuti
       kontennya dan menempel di pojok kiri-atas alih-alih full-bleed. Ini
       exact penyebab layar splash/info album "mengecil ke pojok" yang
       dilaporkan lewat screenshot (Sesi 15). `top/right/bottom/left: 0`
       didukung SEMUA browser sejak awal CSS positioning, termasuk WebView
       tertua sekalipun.
       (Berlaku untuk SEMUA pemakaian `inset: 0` lain di file ini juga —
       lihat rangkuman di SESI15_NOTES.md.) */
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: var(--ppx-hero-img);
    background-size: cover;
    /* 45% vertikal: hero ini jauh lebih pendek daripada rasio fotonya, jadi
       `center` memotong garis langit/matahari. Digeser sedikit ke atas supaya
       sunset + punggungan gunung tetap masuk frame. */
    background-position: 50% 45%;
    z-index: 0;
}
.ppx-hero-photo::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, rgba(10,16,28,.94) 0%, rgba(10,16,28,.78) 45%, rgba(10,16,28,.25) 100%);
    z-index: 1;
}
.ppx-hero-body, .ppx-hero-right { position: relative; z-index: 2; }
.ppx-hero-title { font-size: 1.9rem; font-weight: 700; margin: 0 0 .35rem; line-height: 1.15; }
.ppx-hero-subtitle { margin: 0; opacity: .85; font-size: .95rem; }
.ppx-hero-meta { display: flex; flex-wrap: wrap; gap: 1.35rem; margin-top: 1rem; font-size: .88rem; opacity: .92; }
.ppx-hero-meta-item { display: inline-flex; align-items: center; gap: .45rem; }
.ppx-hero-meta-icon { opacity: .8; }
@media (max-width: 575.98px) {
    .ppx-hero { padding: 1.25rem; }
    .ppx-hero-title { font-size: 1.4rem; }
}

/* Stat cards */
.ppx-stat-card { border: 1px solid var(--tblr-border-color, #e6e8eb); border-radius: .75rem; }
.ppx-stat-icon {
    width: 46px; height: 46px; border-radius: .7rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}
.ppx-stat-icon.bg-total     { background: rgba(32,107,196,.12); }
.ppx-stat-icon.bg-open      { background: rgba(245,159,0,.14); }
.ppx-stat-icon.bg-submitted { background: rgba(47,179,68,.14); }
.ppx-stat-icon.bg-closed    { background: rgba(111,66,193,.13); }
.ppx-stat-icon.bg-clients   { background: rgba(47,179,68,.14); }
.ppx-stat-icon.bg-selected  { background: rgba(111,66,193,.13); }
.ppx-stat-label { color: var(--tblr-secondary, #6c757d); font-size: .82rem; }
.ppx-stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }

/* ===================================================================
 * Settings > Storage — app/Views/admin/settings/index.php
 * =================================================================== */
.ppx-storage-track {
    height: 10px;
    border-radius: 999px;
    background: #e9ebf1;
    overflow: hidden;
}
.ppx-storage-fill {
    height: 100%;
    border-radius: 999px;
    background: #2ecc71; /* aman: < 80% */
    transition: width .25s ease, background-color .25s ease;
}
/* >= 80% pemakaian: kuning peringatan. >= 95%: merah, hampir penuh. */
.ppx-storage-fill.is-warning { background: #f59f00; }
.ppx-storage-fill.is-danger  { background: #d9534f; }
.ppx-storage-caption { display: flex; justify-content: space-between; align-items: baseline; margin-top: .6rem; font-size: .85rem; }
.ppx-storage-caption .ppx-storage-used { font-weight: 700; color: #1a2332; }
.ppx-storage-hosting-note { font-size: .78rem; color: #8a92a3; margin-top: .35rem; }

.ppx-project-storage-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid #eef0f4;
}
.ppx-project-storage-row:last-child { border-bottom: none; }
.ppx-project-storage-main { flex: 1; min-width: 0; }
.ppx-project-storage-name { font-weight: 600; color: #1a2332; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppx-project-storage-meta { font-size: .8rem; color: #8a92a3; margin-top: .15rem; }
.ppx-project-storage-size { font-weight: 600; color: #1a2332; white-space: nowrap; text-align: right; min-width: 72px; }
.ppx-project-storage-bar-wrap { width: 100%; }

/* Thumbnails inside admin tables */
.ppx-row-thumb {
    width: 52px; height: 40px; object-fit: cover;
    border-radius: .4rem; background: #e9ebf1; flex-shrink: 0;
}
.ppx-row-thumb-empty {
    width: 52px; height: 40px; border-radius: .4rem;
    background: #e9ebf1; display: flex; align-items: center; justify-content: center;
    font-size: .9rem; opacity: .5; flex-shrink: 0;
}
.ppx-recent-card { border-radius: .75rem; }
.ppx-empty { padding: 3rem 1rem; text-align: center; color: var(--tblr-secondary, #6c757d); }
.ppx-empty-icon { font-size: 2rem; margin-bottom: .5rem; opacity: .6; }

/* Link pill shown on the Client Link pages */
.ppx-link-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: .55rem;
    padding: .45rem .7rem;
    font-size: .82rem;
    max-width: 100%;
}
.ppx-link-pill code { color: #fff; background: none; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Wizard step indicator — app/Views/admin/partials/wizard-steps.php,
   dipakai di create.php (step 1) & photos.php (step 2/3). */
.ppx-wizard-steps {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: 1.5rem; flex-wrap: wrap;
}
.ppx-wizard-step { display: flex; align-items: center; gap: .55rem; }
.ppx-wizard-step-circle {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
    background: #e9ebf1; color: #8a92a3; flex-shrink: 0;
}
.ppx-wizard-step-label { font-size: .85rem; color: #8a92a3; font-weight: 500; }
.ppx-wizard-step.active .ppx-wizard-step-circle { background: #10182b; color: #fff; }
.ppx-wizard-step.active .ppx-wizard-step-label { color: #10182b; font-weight: 700; }
.ppx-wizard-step.done .ppx-wizard-step-circle { background: #2ecc71; color: #062712; }
.ppx-wizard-step.done .ppx-wizard-step-label { color: #2ecc71; }
.ppx-wizard-step-line { width: 40px; height: 1px; background: #d8dce3; flex-shrink: 0; }
@media (max-width: 575.98px) {
    .ppx-wizard-step-line { width: 18px; }
    .ppx-wizard-step-label { display: none; }
}

/* Project Summary panel — app/Views/admin/albums/create.php */
.ppx-summary-row {
    display: flex; justify-content: space-between; gap: .75rem;
    padding: .5rem 0; border-bottom: 1px solid #eef0f4; font-size: .85rem;
}
.ppx-summary-row:last-child { border-bottom: none; }
.ppx-summary-label { color: #8a92a3; }
.ppx-summary-value { font-weight: 600; color: #1a2332; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }

/* ===================================================================
 * PHOTO GRID (admin) — komponen bersama untuk halaman Upload Photos
 * dan Client Link detail, supaya dua-duanya persis sama seperti mockup.
 *
 * Masalah yang diperbaiki (Sesi 14): sebelumnya grid Upload Photos memakai
 * `col-2` + `img-fluid` polos. `img-fluid` = `height:auto`, jadi tiap foto
 * setinggi rasio aslinya — potret dan lanskap bercampur, barisnya jadi
 * bergerigi dan nama file jatuh di ketinggian yang berbeda-beda. Mockup
 * memakai tile seragam, jadi tingginya dikunci lewat aspect-ratio +
 * object-fit: cover.
 * =================================================================== */
.ppx-photo-grid {
    display: grid;
    /* auto-fill + minmax: jumlah kolom menyesuaikan lebar layar sendiri,
       tanpa perlu menumpuk class col-6 col-md-4 col-xl-3 di tiap tile. */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}
.ppx-photo-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--tblr-border-color, #e6e8eb);
    border-radius: .7rem;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ppx-photo-card:hover { border-color: #c9ced8; box-shadow: 0 4px 14px rgba(16,24,43,.08); }
.ppx-photo-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;   /* kunci tinggi -> baris grid jadi rata */
    object-fit: cover;     /* isi penuh tanpa gepeng; kelebihan dipotong */
    background: #eef0f4;
    cursor: zoom-in;       /* klik foto -> lightbox (lihat admin.js) */
}
/* Gambar sedang di-drag tidak boleh mencuri klik -> lightbox. */
.ppx-photo-thumb { -webkit-user-drag: none; user-select: none; }
.ppx-photo-caption {
    padding: .5rem .6rem;
    border-top: 1px solid var(--tblr-border-color, #e6e8eb);
    font-size: .8rem;
    line-height: 1.3;
    min-height: 2.6rem;    /* caption 1 & 2 baris tetap sejajar antar-tile */
}
.ppx-photo-name {
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #1a2332;
}
.ppx-photo-meta { color: #8a92a3; font-size: .7rem; }

/* Badge & tombol yang mengambang di atas foto */
.ppx-photo-actions {
    position: absolute; top: .45rem; right: .45rem;
    display: flex; gap: .3rem;
    opacity: 0; transition: opacity .15s ease;
}
.ppx-photo-card:hover .ppx-photo-actions,
.ppx-photo-card:focus-within .ppx-photo-actions { opacity: 1; }
/* Layar sentuh tidak punya hover — tombolnya selalu tampil di sana, kalau
   tidak fiturnya jadi tidak bisa diakses sama sekali dari tablet/HP. */
@media (hover: none) {
    .ppx-photo-actions { opacity: 1; }
}
.ppx-photo-action-btn {
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: .4rem;
    background: rgba(16,24,43,.72); color: #fff;
    backdrop-filter: blur(2px);
    cursor: pointer; line-height: 1;
}
.ppx-photo-action-btn:hover { background: rgba(16,24,43,.92); }
.ppx-photo-action-btn.ppx-danger:hover { background: #d9534f; }
.ppx-photo-action-btn svg { width: 15px; height: 15px; pointer-events: none; }

/* Status "terpilih client" — dipakai di halaman Client Link (read-only). */
.ppx-photo-card.is-selected { border-color: #2ecc71; box-shadow: 0 0 0 1px #2ecc71 inset; }
.ppx-photo-check {
    position: absolute; top: .45rem; left: .45rem;
    width: 24px; height: 24px; border-radius: .35rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.9); border: 1px solid rgba(16,24,43,.15);
    color: transparent; font-size: .85rem; font-weight: 700;
}
.ppx-photo-card.is-selected .ppx-photo-check { background: #2ecc71; border-color: #2ecc71; color: #fff; }

/* Thumbnail di tabel halaman Result (Selected Photos). Klik -> lightbox. */
.ppx-result-thumb {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: .35rem;
    background: #eef0f4;
    cursor: zoom-in;
    transition: box-shadow .15s ease, opacity .15s ease;
}
.ppx-result-thumb:hover {
    opacity: .9;
    box-shadow: 0 4px 14px rgba(16,24,43,.18);
}

/* ===================================================================
 * Lightbox ADMIN — klik foto di grid "Foto di Album" untuk melihat
 * versi lebih besar (mirip lightbox client, tapi scope-nya terpisah:
 * yang di bawah sengaja TIDAK memakai class .ppx-lightbox supaya tidak
 * ketimpa rule `.ppx-client .ppx-lightbox ...`).
 * =================================================================== */
.ppx-admin-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 25, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;          /* di atas sidebar (1030) & sweetalert2 (1060 off) */
    padding: 1rem;
}
.ppx-admin-lightbox .ppx-alb-stage {
    margin: 0;
    max-width: min(92vw, 1200px);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ppx-admin-lightbox .ppx-alb-img {
    max-width: 100%;
    max-height: 78vh;
    border-radius: .35rem;
    box-shadow: 0 10px 40px rgba(0,0,0,.45);
    object-fit: contain;
}
.ppx-admin-lightbox .ppx-alb-caption {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin-top: .75rem;
    color: #e6e8eb;
    font-size: .9rem;
    max-width: 100%;
}
.ppx-admin-lightbox .ppx-alb-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ppx-admin-lightbox .ppx-alb-count {
    color: #8a92a3;
    font-size: .8rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.ppx-admin-lightbox button {
    position: absolute;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: none;
    border-radius: 999px;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ppx-admin-lightbox button:hover { background: rgba(255,255,255,.24); }
.ppx-alb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.ppx-alb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.ppx-alb-close { top: 14px; right: 14px; width: 38px; height: 38px; font-size: 1.6rem; }

@media (max-width: 575.98px) {
    .ppx-alb-prev { left: 6px; }
    .ppx-alb-next { right: 6px; }
    .ppx-admin-lightbox .ppx-alb-img { max-height: 68vh; }
}

/* Badge "nama diganti" — supaya admin ingat nama yang dilihat client bukan
   nama file aslinya, dan tetap bisa melihat nama asli lewat title/tooltip. */
.ppx-photo-renamed {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .65rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .03em; color: #2b7a4b;
}

/* Form ganti nama inline (menggantikan caption saat mode edit) */
.ppx-rename-form { display: flex; gap: .3rem; }
.ppx-rename-input {
    flex: 1; min-width: 0;
    font-size: .78rem; padding: .25rem .4rem;
    border: 1px solid #2b4463; border-radius: .35rem;
}
.ppx-rename-save {
    border: none; border-radius: .35rem; background: #10182b; color: #fff;
    font-size: .72rem; padding: .25rem .5rem; cursor: pointer;
}

/*
 * Everything below is scoped under `.ppx-client` (the <body> class on
 * app/Views/client/gallery.php) so it never touches the admin/Tabler
 * pages, which also link this same file but style themselves inline
 * (see app/Views/admin/layouts/main.php for why).
 */

.ppx-client {
    --ppx-accent: #2ecc71;
    --ppx-accent-dark: #24a75d;
    --ppx-dark: #10182b;
    --ppx-text: #1c2333;
    --ppx-muted: #6b7385;
    --ppx-border: #e4e7ee;
    --ppx-bg: #f4f6fa;
    margin: 0;
    background: var(--ppx-bg);
    color: var(--ppx-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding-bottom: 84px; /* leave room for sticky footer */
    box-sizing: border-box;
}
.ppx-client *, .ppx-client *::before, .ppx-client *::after { box-sizing: inherit; }
.ppx-client button { font-family: inherit; cursor: pointer; }
.ppx-client .d-none { display: none !important; }

/* Header */
.ppx-client .ppx-header {
    background: var(--ppx-dark);
    color: #fff;
    padding: 1rem 1.25rem 1.25rem;
}
.ppx-client .ppx-brand { font-weight: 700; letter-spacing: .02em; opacity: .85; font-size: .85rem; }
.ppx-client .ppx-header h1 { margin: .25rem 0 0; font-size: 1.3rem; }

/* Toolbar: search + filter tabs */
.ppx-client .ppx-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.25rem .25rem;
}
.ppx-client .ppx-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--ppx-border);
    border-radius: .7rem;
    padding: 0 .5rem 0 .8rem;
}
.ppx-client .ppx-search-icon { font-size: .85rem; opacity: .5; flex-shrink: 0; }
.ppx-client .ppx-search input {
    flex: 1;
    min-width: 0;
    padding: .55rem .5rem;
    border: none;
    background: none;
    font-size: .9rem;
}
.ppx-client .ppx-search input:focus { outline: none; }
.ppx-client .ppx-search:focus-within { border-color: var(--ppx-accent); }
/* Icon-only "Urutkan" — <select> asli ditumpuk transparan di atas ikon ⇅
   supaya tetap dropdown native tapi terlihat sebagai satu tombol ikon,
   sesuai mockup (bukan dropdown teks penuh). */
.ppx-client .ppx-sort-icon-btn {
    position: relative;
    width: 30px; height: 30px; border-radius: .5rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--ppx-bg); font-size: .85rem; color: var(--ppx-muted);
}
.ppx-client .ppx-sort-select {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; border: none; cursor: pointer;
}
.ppx-client .ppx-filter-tabs { display: flex; gap: .4rem; }
.ppx-client .ppx-filter-tab {
    border: 1px solid var(--ppx-border);
    background: #fff;
    color: var(--ppx-muted);
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
}
.ppx-client .ppx-filter-tab.active { background: var(--ppx-dark); color: #fff; border-color: var(--ppx-dark); }
.ppx-client .ppx-sort-select {
    border: 1px solid var(--ppx-border);
    background: #fff;
    color: var(--ppx-text);
    padding: .4rem .6rem;
    border-radius: .5rem;
    font-size: .82rem;
}

/* Stats bar */
.ppx-client .ppx-stats {
    padding: .5rem 1.25rem 1rem;
    font-size: .85rem;
    color: var(--ppx-muted);
}
.ppx-client .ppx-stats #ppx-selected-count { color: var(--ppx-accent-dark); font-weight: 700; }
.ppx-client .ppx-stats.ppx-limit-reached #ppx-selected-count { color: #d9534f; }

/* Grid */
.ppx-client .ppx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
    padding: 0 1.25rem;
}
.ppx-client .ppx-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: .5rem;
    overflow: hidden;
    background: #e9ebf1;
    cursor: pointer;
}
.ppx-client .ppx-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .15s ease;
}
.ppx-client .ppx-tile:hover img { transform: scale(1.03); }
/* Unselected (mockup): kotak checkbox kosong pojok kiri-atas.
   Selected (mockup): lingkaran centang hijau pojok kanan-atas.
   Satu elemen, dua tampilan berbeda lewat class .selected — tidak perlu
   ubah markup/JS (lihat renderTile() di gallery.js). */
.ppx-client .ppx-tile-check {
    position: absolute;
    top: 6px;
    left: 6px;
    right: auto;
    width: 22px;
    height: 22px;
    border-radius: .3rem;
    background: rgba(255, 255, 255, .35);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    border: 2px solid rgba(255,255,255,.9);
    z-index: 2;
    transition: none;
}
.ppx-client .ppx-tile.selected .ppx-tile-check {
    left: auto;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ppx-accent);
    border-color: var(--ppx-accent);
    color: #0a2015;
}
.ppx-client .ppx-tile.selected { outline: 3px solid var(--ppx-accent); outline-offset: -3px; }
.ppx-client .ppx-tile-skeleton { background: linear-gradient(90deg, #e9ebf1 25%, #f2f3f7 37%, #e9ebf1 63%); background-size: 400% 100%; animation: ppx-shimmer 1.4s ease infinite; }
@keyframes ppx-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.ppx-client .ppx-empty { text-align: center; color: var(--ppx-muted); padding: 2.5rem 1rem; }
.ppx-client .ppx-sentinel { height: 1px; }

/* Footer */
.ppx-client .ppx-footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid var(--ppx-border);
    padding: .75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 20;
}
.ppx-client .ppx-footer-count { line-height: 1.3; }
.ppx-client .ppx-footer-count-label { display: block; font-size: .76rem; color: var(--ppx-muted); }
.ppx-client .ppx-footer-count-value { display: block; font-size: .95rem; font-weight: 700; }
.ppx-client .ppx-btn-primary {
    background: var(--ppx-accent);
    color: #0a2015;
    font-weight: 700;
    border: none;
    padding: .65rem 1.4rem;
    border-radius: .5rem;
    font-size: .95rem;
}
.ppx-client .ppx-btn-primary:hover { background: var(--ppx-accent-dark); color: #fff; }
.ppx-client .ppx-btn-primary:disabled { background: #c7ccd6; color: #7c879c; cursor: not-allowed; }
.ppx-client .ppx-btn-secondary {
    background: #fff;
    color: var(--ppx-text);
    border: 1px solid var(--ppx-border);
    padding: .6rem 1.2rem;
    border-radius: .5rem;
    font-weight: 600;
    font-size: .9rem;
}

/* Lightbox */
.ppx-client .ppx-lightbox {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(10, 14, 25, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.ppx-client .ppx-lightbox .ppx-lb-img {
    max-width: min(90vw, 1100px);
    max-height: 80vh;
    border-radius: .25rem;
    box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.ppx-client .ppx-lightbox button {
    position: absolute;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: none;
    border-radius: 999px;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ppx-client .ppx-lightbox button:hover { background: rgba(255,255,255,.24); }
.ppx-client .ppx-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.ppx-client .ppx-lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.ppx-client .ppx-lb-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 1.6rem; }
.ppx-client .ppx-lb-select {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    border-radius: .5rem;
    padding: .55rem 1.1rem;
    font-size: .9rem;
    font-weight: 700;
    margin-top: 1rem;
    align-self: center;
}
.ppx-client .ppx-lb-select.selected { background: var(--ppx-accent); color: #0a2015; }
@media (min-width: 768px) {
    .ppx-client .ppx-lightbox { flex-direction: column; }
}
@media (max-width: 767.98px) {
    .ppx-client .ppx-lb-select { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); }
}

/* Toast */
.ppx-client .ppx-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ppx-dark);
    color: #fff;
    padding: .6rem 1.1rem;
    border-radius: .5rem;
    font-size: .85rem;
    z-index: 200;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* Modal (review / success) */
.ppx-client .ppx-modal {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(16, 24, 43, .55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 90;
}
.ppx-client .ppx-modal-panel {
    background: #fff;
    width: 100%;
    max-width: 560px;
    max-height: 82vh;
    overflow-y: auto;
    border-radius: 1rem 1rem 0 0;
    padding: 1.25rem 1.25rem 1.5rem;
}
@media (min-width: 640px) {
    .ppx-client .ppx-modal { align-items: center; }
    .ppx-client .ppx-modal-panel { border-radius: 1rem; }
}
.ppx-client .ppx-modal-panel h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
.ppx-client .ppx-modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.ppx-client .ppx-review-list { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; border: 1px solid var(--ppx-border); border-radius: .5rem; }
.ppx-client .ppx-review-list li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--ppx-border);
    font-size: .85rem;
}
.ppx-client .ppx-review-list li:last-child { border-bottom: none; }
.ppx-client .ppx-review-list img { width: 40px; height: 40px; object-fit: cover; border-radius: .35rem; flex-shrink: 0; }
.ppx-client .ppx-review-list .ppx-review-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppx-client .ppx-review-remove { background: none; border: none; color: #d9534f; font-size: .8rem; font-weight: 600; }
.ppx-client .ppx-modal-error { color: #d9534f; font-size: .85rem; margin-top: .6rem; }

/* Layar 1/8 (Splash) & 2/8 (Info Album) — ditampilkan sebelum #ppx-app.
   Full-viewport, di atas semuanya, sengaja TIDAK memakai .ppx-modal (itu
   untuk overlay di atas app yang sudah jalan; ini justru sebelum app mulai). */
.ppx-client .ppx-intro-screen {
    position: fixed;
    /* Ini penyebab bug "layar mengecil ke pojok kiri-atas" (Sesi 15) —
       lihat catatan panjang di .ppx-hero-photo::before di atas. Splash &
       Info Album adalah dua layar yang PALING sering dibuka lewat browser
       bawaan WhatsApp/Instagram (client menerima link lewat chat, tap
       langsung dari situ) — persis browser yang WebView-nya paling sering
       ketinggalan zaman. */
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--ppx-bg);
}

.ppx-client .ppx-splash {
    /* JANGAN set `position` di sini — .ppx-splash selalu dipasangkan dengan
       class .ppx-intro-screen yang sudah `position: fixed` + inset 0 (lihat
       di atas). Kalau di-override jadi `relative` lagi, stretch full-viewport
       itu hilang (splash cuma setinggi kontennya, sisa layar jadi kosong).
       Anak-anak splash (.ppx-splash-scrim absolute, .ppx-splash-top/body
       relative z-index:1) tetap otomatis mengacu ke .ppx-intro-screen sebagai
       positioning context, jadi tidak perlu `position: relative` di sini. */
    background-color: #0d1424; /* fallback kalau splash-hero.jpg belum ada di server */
    background-size: cover;
    background-position: center;
    color: #fff;
    justify-content: space-between;
    text-align: left;
    padding: 0;
}
.ppx-client .ppx-splash-scrim {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(180deg, rgba(9,14,26,.15) 0%, rgba(9,14,26,.1) 30%, rgba(9,14,26,.75) 68%, rgba(9,14,26,.95) 100%);
    z-index: 0;
}
.ppx-client .ppx-splash-top {
    position: relative; z-index: 1;
    padding: 1.75rem 1.5rem 0;
}
.ppx-client .ppx-splash-logo-row { display: flex; align-items: center; gap: .55rem; }
.ppx-client .ppx-splash-logo-row .ppx-logo-mark { width: 26px; height: 26px; }
.ppx-client .ppx-splash .ppx-brand { font-size: 1.15rem; letter-spacing: .04em; font-weight: 700; }
.ppx-client .ppx-splash .ppx-brand-sub { font-size: .85rem; opacity: .85; margin-top: .15rem; margin-left: calc(26px + .55rem); }
.ppx-client .ppx-splash-body { position: relative; z-index: 1; width: 100%; max-width: 480px; padding: 2rem 1.5rem 2.25rem; }
.ppx-client .ppx-logo-mark { width: 1em; height: 1em; vertical-align: -.15em; color: currentColor; }
.ppx-client .ppx-splash-tagline h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .85rem; font-weight: 800; }
.ppx-client .ppx-splash-tagline p { opacity: .9; font-size: .95rem; line-height: 1.5; margin: 0 0 1.5rem; }
.ppx-client .ppx-splash-note {
    display: flex; align-items: center; text-align: left; gap: .7rem;
    background: #fff; color: var(--ppx-text);
    border-radius: .8rem; padding: .9rem 1.1rem; font-size: .8rem; margin-bottom: 1rem;
}
.ppx-client .ppx-splash-note strong { color: var(--ppx-dark); }
.ppx-client .ppx-splash-note-icon { font-size: 1.3rem; flex-shrink: 0; }
.ppx-client .ppx-btn-block { width: 100%; text-align: center; }

/* Topbar (mockup Info Album & Gallery): ‹ back / brand-or-title / menu.
   Dua varian: dark (dipakai di atas Info Album, sebelum banner foto) dan
   light (dipakai di Gallery, di atas grid). */
.ppx-client .ppx-topbar {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem .75rem;
    background: var(--ppx-dark);
    color: #fff;
    /* position+z-index: topbar ini bertetangga dengan .ppx-info-banner yang
       `position: relative`. Elemen positioned selalu di-paint di ATAS elemen
       static, jadi tanpa ini banner (dan ::before/::after-nya) bisa menutup
       area tombol ‹ dan menelan klik-nya. */
    position: relative;
    z-index: 5;
}
.ppx-client .ppx-topbar-light { background: #fff; color: var(--ppx-text); border-bottom: 1px solid var(--ppx-border); }
.ppx-client .ppx-topbar-btn {
    background: none; border: none; color: inherit; line-height: 1;
    /* 44px = minimum tap target iOS/Android. Sebelumnya 32px dan isinya cuma
       glyph "‹" yang di beberapa font nyaris tak terlihat -> terasa "mati". */
    width: 44px; height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    border-radius: .5rem;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(255,255,255,.12);
    touch-action: manipulation;
}
.ppx-client .ppx-topbar-btn:hover { background: rgba(255,255,255,.1); }
.ppx-client .ppx-topbar-light .ppx-topbar-btn:hover { background: rgba(16,24,43,.06); }
.ppx-client .ppx-topbar-btn:active { transform: scale(.94); }
.ppx-client .ppx-topbar-btn svg {
    width: 22px; height: 22px; display: block;
    /* klik selalu mendarat di <button>, tidak pernah di <path> di dalamnya */
    pointer-events: none;
}

/* Menu ☰ (Info Album) / ⋮ (Gallery) — bottom sheet di mobile, sesuai pola
   navigasi layar client yang lain. */
.ppx-client .ppx-topbar-menu { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center; }
.ppx-client .ppx-topbar-menu-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(10,16,28,.5); }
.ppx-client .ppx-topbar-menu-panel {
    position: relative; z-index: 1;
    width: 100%; max-width: 480px;
    background: #fff; border-radius: 1rem 1rem 0 0;
    padding: .5rem; margin: 0 .5rem;
    box-shadow: 0 -8px 30px rgba(10,16,28,.25);
}
.ppx-client .ppx-topbar-menu-item {
    display: block; width: 100%; text-align: left;
    background: none; border: none; color: var(--ppx-text);
    padding: .85rem 1rem; font-size: .95rem; border-radius: .6rem;
}
.ppx-client .ppx-topbar-menu-item:hover { background: var(--ppx-bg); }
.ppx-client .ppx-topbar-menu-cancel { color: var(--ppx-muted); border-top: 1px solid var(--ppx-border); border-radius: 0; margin-top: .25rem; text-align: center; }
.ppx-client .ppx-topbar-brand { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .85rem; letter-spacing: .03em; }
.ppx-client .ppx-topbar-title { font-weight: 700; font-size: 1.05rem; }

/* Info Album — photo banner (mockup: foto besar + gradient + nama/tanggal).
   Fallback ke gradient gelap kalau album belum punya foto sama sekali. */
.ppx-client .ppx-info-banner {
    position: relative; flex-shrink: 0; height: 34vh; min-height: 190px; max-height: 260px;
    background-size: cover; background-position: center; background-color: #1b2a44;
    display: flex; align-items: flex-end;
}
.ppx-client .ppx-info-banner-noimg { background: linear-gradient(160deg, #0d1424 0%, #1b2a44 60%, #2b4463 100%); }
.ppx-client .ppx-info-banner-fade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(10,16,28,0) 40%, rgba(10,16,28,.85) 100%); }
.ppx-client .ppx-info-banner-text { position: relative; z-index: 1; color: #fff; padding: 1.1rem 1.25rem; }
.ppx-client .ppx-info-banner-text h1 { margin: 0; font-size: 1.35rem; font-weight: 700; }
.ppx-client .ppx-info-banner-date { margin-top: .25rem; font-size: .85rem; opacity: .9; }

.ppx-client .ppx-info-body { flex: 1; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.ppx-client .ppx-info-progress-card, .ppx-client .ppx-info-about-card {
    background: #fff; border: 1px solid var(--ppx-border); border-radius: .75rem; padding: 1.1rem 1.25rem;
}
.ppx-client .ppx-info-stat-row { display: flex; gap: 1.5rem; margin-bottom: 1rem; }
.ppx-client .ppx-info-stat { display: flex; align-items: center; gap: .65rem; }
.ppx-client .ppx-info-stat-icon {
    font-size: 1.05rem; width: 36px; height: 36px; border-radius: .6rem; flex-shrink: 0;
    background: rgba(43,68,99,.1); display: flex; align-items: center; justify-content: center;
}
.ppx-client .ppx-info-stat-icon-accent { background: rgba(46,204,113,.14); }
.ppx-client .ppx-info-stat-label { font-size: .78rem; color: var(--ppx-muted); }
.ppx-client .ppx-info-stat-value { font-size: 1.15rem; font-weight: 700; }
.ppx-client .ppx-info-progress-track { height: 6px; border-radius: 999px; background: var(--ppx-border); overflow: hidden; }
.ppx-client .ppx-info-progress-fill { height: 100%; background: var(--ppx-accent); transition: width .2s ease; }
.ppx-client .ppx-info-progress-label { margin-top: .4rem; font-size: .78rem; color: var(--ppx-muted); text-align: right; }
.ppx-client .ppx-info-about-card h2 { margin: 0 0 .85rem; font-size: 1rem; }
.ppx-client .ppx-info-row { display: flex; align-items: flex-start; gap: .65rem; padding: .5rem 0; border-bottom: 1px solid var(--ppx-border); }
.ppx-client .ppx-info-row:last-child { border-bottom: none; }
.ppx-client .ppx-info-row-icon { opacity: .7; }
.ppx-client .ppx-info-row-label { font-size: .76rem; color: var(--ppx-muted); }
.ppx-client .ppx-info-row-value { font-size: .92rem; font-weight: 500; }
.ppx-client .ppx-intro-footer { flex-shrink: 0; padding: 1rem 1.25rem; background: #fff; border-top: 1px solid var(--ppx-border); }

/* Success / result screen */
.ppx-client .ppx-success-icon { font-size: 2.5rem; text-align: center; margin-bottom: .5rem; }
.ppx-client .ppx-filename-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    max-height: 45vh;
    overflow-y: auto;
    border: 1px solid var(--ppx-border);
    border-radius: .5rem;
    font-size: .82rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ppx-client .ppx-filename-list li { padding: .35rem .7rem; border-bottom: 1px solid var(--ppx-border); }
.ppx-client .ppx-filename-list li:last-child { border-bottom: none; }