.grid{display:grid;gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-sm)}
.card-visual{height:200px;position:relative;overflow:hidden;background:#e9e2d4}
.card-visual img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;left:12px;top:12px;background:#fff;border-radius:var(--r-pill);padding:6px 11px;font-size:11.5px;font-weight:800;border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px}
.badge.gold{background:var(--gold);border-color:var(--gold);color:#1f1a08}
.badge.truck{left:auto;right:12px}
.badge.verif{left:auto;right:12px;background:var(--green);color:#fff;border-color:var(--green)}
.card-body{padding:20px}
.card-body h3{font-size:18px;line-height:1.35}
.meta{color:var(--soft);font-size:13.5px;margin:6px 0;line-height:1.55;display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
.meta .icon-inline{margin-top:2px}
.price{font-size:20px;font-weight:800;color:var(--green);letter-spacing:-.3px}
.price small{font-size:12.5px;color:var(--soft);font-weight:600}
.price-big{font-size:24px;font-weight:800;color:var(--green);line-height:1.2;letter-spacing:-.4px}
.price-big small{font-size:12.5px;color:var(--soft);font-weight:600}
.per-unit{font-size:14px;color:var(--green);font-weight:700;margin:6px 0 14px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.row .btn{flex:1}
.tag{display:inline-flex;align-items:center;background:var(--green-tint);color:var(--green);border-radius:var(--r-pill);padding:5px 11px;font-size:12px;font-weight:700;margin:2px 4px 2px 0}

.detail-visual{height:220px;overflow:hidden;border-radius:var(--r-card);margin:14px 0;background:#e9e2d4}
.detail-visual img{width:100%;height:100%;object-fit:cover;display:block}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.kv div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px}
.kv b{display:block;font-size:15px;line-height:1.4}
.kv span{font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{border-bottom:1px solid var(--line);padding:10px 6px;text-align:left}
td:last-child,th:last-child{text-align:right}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px 15px;min-height:48px;background:var(--surface);font:inherit;margin:6px 0}
textarea{min-height:110px;resize:vertical}
label{font-size:13px;font-weight:700}
.form{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;margin:14px 0}
.view{display:none}
.view.active{display:block}

/* Bottom nav: ikon SVG + label + indikator aktif */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.nav button{border:0;background:none;font-size:11px;font-weight:600;color:var(--soft);padding:6px 8px;min-height:56px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:color 160ms ease}
.nav button .nav-ic{width:44px;height:28px;display:grid;place-items:center;border-radius:var(--r-pill);transition:background-color 160ms ease}
.nav button.on{color:var(--green);font-weight:800}
.nav button.on .nav-ic{background:var(--green-tint)}
.nav button.on::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);margin-top:1px}

/* Video & moderasi */
.video-box{background:var(--green);color:#fff;border-radius:18px;padding:18px;margin:14px 0}
.video-box .play{width:56px;height:56px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:#1f1a08;margin-bottom:10px}
.video-box .play .icon{width:26px;height:26px}
.check{font-size:14px;line-height:1.7}
.check li{margin:5px 0}
footer{color:var(--soft);font-size:12.5px;text-align:center;padding:20px;line-height:1.6}
.stepper{display:flex;gap:6px;flex-wrap:wrap;font-size:12.5px;font-weight:700;margin:14px 0}
.stepper .step{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:8px 13px;color:var(--soft);display:inline-flex;align-items:center;gap:6px}
.stepper .step.on{background:var(--green);color:#fff;border-color:var(--green)}
.stepper .step.done{background:var(--green-tint);color:var(--green);border-color:var(--green-tint)}
.empty{background:var(--surface);border:1px dashed #d3c294;border-radius:18px;padding:20px;margin:14px 0;line-height:1.6}
.empty p{color:var(--soft);font-size:14px;margin:6px 0 0}
.timeline{margin:16px 0;border-left:2px solid var(--line);padding-left:16px}
.tl{padding:8px 0;color:var(--soft);font-weight:600;display:flex;align-items:center;gap:9px}
.tl.on{color:var(--green);font-weight:800}
.tl-dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:0 0 auto}
.tl.on .tl-dot{background:var(--green)}
.lamp{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);padding:6px 11px;font-size:12px;font-weight:800}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dot-g{background:#1d6a4a}.dot-y{background:#b98a1e}.dot-r{background:#9a2a20}
.lamp-g{background:#e2f3e6;color:#0e3b2a}.lamp-y{background:#fdf3cf;color:#5c4a1e}.lamp-r{background:#fde3e0;color:#7a1f16}
.modpanel{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:16px;padding:16px;margin:14px 0}
.video-vert{background:var(--green);color:#fff;border-radius:20px;padding:20px;margin:14px 0;overflow:hidden;position:relative}
.video-vert img{width:100%;height:170px;object-fit:cover;border-radius:14px;display:block;margin-bottom:14px}
.vv-play{width:54px;height:54px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:#1f1a08;margin-bottom:12px}
.vv-play .icon{width:26px;height:26px}
.vv-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:var(--r-pill);padding:6px 11px;font-size:11.5px;font-weight:700}
.vscroll{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 16px;scroll-snap-type:x mandatory}
.vcard{flex:0 0 248px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px;scroll-snap-align:start}
.vcard-visual{height:150px;overflow:hidden;position:relative;border-radius:16px;margin-bottom:12px;background:#e9e2d4}
.vcard-visual img{width:100%;height:100%;object-fit:cover;display:block}
.vcard-visual .vv-chip{position:absolute;top:10px;left:10px;background:rgba(14,59,42,.85);border-color:transparent;color:#fff}
.minrow{display:flex;gap:8px;margin-top:12px}
.minbtn{flex:1;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:0 8px;min-height:46px;font-size:12.5px;font-weight:700;color:var(--green);display:inline-flex;align-items:center;justify-content:center;gap:6px}

/* Skeleton statis (tanpa animasi berdenyut) */
.skeleton{background:#ece7db;border-radius:12px;min-height:16px}

@media(min-width:700px){
  .grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:34px}
  .hero-media{aspect-ratio:21/9}
}
@media(max-width:480px){
  .app{padding:12px 12px calc(96px + env(safe-area-inset-bottom))}
  .topbar{padding:10px 12px}
  .brand small{font-size:11px}
  .hero-body{padding:20px 18px 22px}
  .hero h1{font-size:27px}
  .card-visual{height:180px}
  .detail-visual{height:190px}
  .statrow{gap:8px}
  .stat{padding:13px}
  .stat b{font-size:17px}
  .search input,.search select{flex:1 1 100%}
  .nav button{padding:6px 4px}
}
@media(max-width:380px){
  .kv{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr 1fr}
  .stat:last-child{grid-column:1/-1}
}

/* v2 minimal: judul kartu bisa diketuk, visual kartu bisa diketuk, pencarian Beranda */
.card-visual{cursor:pointer}
.card-title{border:0;background:none;padding:0;font-size:18px;font-weight:800;letter-spacing:-.2px;line-height:1.35;text-align:left;cursor:pointer;color:var(--ink)}
.home-search .btn{flex:0 0 auto}
.home-search{margin-top:16px}

/* Banner + popup pemeriksa update (version.json vs CURRENT_VERSION) */
.upd-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--gold-tint);border:1px solid #e2d3a8;border-radius:16px;padding:12px 16px;font-size:13.5px;font-weight:700;margin:0 0 14px}
.upd-banner[hidden]{display:none}
.upd-modal{position:fixed;inset:0;z-index:60;background:rgba(14,59,42,.45);display:grid;place-items:center;padding:20px}
.upd-modal[hidden]{display:none}
.upd-card{background:#fff;border-radius:24px;padding:22px;max-width:380px;width:100%;box-shadow:var(--shadow-md)}
.upd-card p{color:var(--soft);font-size:14px;line-height:1.6}
/* Tabel total di layar sempit: geser horizontal, bukan meluber */
#flowTotal{overflow-x:auto}
#flowTotal table{min-width:300px}

/* === v3: bahasa desain Yobana, palet TernakAntar === */
/* Judul serif display besar */
h2{font-family:Fraunces,Georgia,serif;font-size:25px}
h3{font-family:Fraunces,Georgia,serif}
/* Hero foto besar + teks overlay elegan (gradasi hanya penopang keterbacaan) */
.hero{position:relative}
.hero-media{aspect-ratio:16/10;background:var(--green)}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-body{position:absolute;left:0;right:0;bottom:0;padding:34px 22px 22px;color:#fff;background:linear-gradient(to top,rgba(14,59,42,.82),rgba(14,59,42,0))}
.hero-body h1{color:#fff}
.hero-body p{color:rgba(255,255,255,.93)}
/* Kartu foto-kiri: foto + teks + tombol brand penuh di kanan bawah */
.card-h{display:flex;align-items:stretch}
.card-h .card-visual-h{flex:0 0 132px;position:relative;overflow:hidden;background:#e9e2d4;cursor:pointer}
.card-h .card-visual-h img{width:100%;height:100%;object-fit:cover;display:block}
.card-h .card-body{flex:1;min-width:0;padding:16px 16px 18px}
.card-h .card-body .btn-block{margin-top:12px}
@media(max-width:380px){.card-h .card-visual-h{flex-basis:112px}}
/* Menu grid ikon kartu putih bulat */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.menu-item{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px 6px;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--green);box-shadow:var(--shadow-sm)}
.menu-item .mic{width:48px;height:48px;border-radius:50%;background:var(--green-tint);display:grid;place-items:center}
.menu-item .icon{width:26px;height:26px}
/* Bottom-nav: pill aktif bordir emas + titik emas, ikon sama besar & jelas */
.nav button{color:#55605a}
.nav .icon{width:26px;height:26px}
.nav button.on .nav-ic{background:var(--green-tint);border:1.5px solid var(--gold)}
.nav button.on::after{width:5px;height:5px;background:var(--gold)}
/* Tombol utama penuh warna brand, besar & empuk */
.btn{min-height:52px;border-radius:16px;font-size:15px}
.btn-sm{min-height:40px}

/* ============ v4 additions ============ */
/* Wajah pemilik — standar utama, clean & elegan */
.owner-row{display:flex;align-items:center;gap:12px}
.owner-text{line-height:1.3}
.owner-text b{font-size:14.5px;color:var(--ink)}
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center;border:2px solid var(--gold);background:var(--cream);box-shadow:0 2px 10px rgba(14,59,42,.14);flex:0 0 auto;display:block}
.avatar-sm{width:36px;height:36px}
.avatar-lg{width:76px;height:76px;border-width:2.5px;box-shadow:0 4px 16px rgba(14,59,42,.16)}
.avatar-empty{width:44px;height:44px;border-radius:50%;border:2px dashed #c9c2b2;background:#f3efe6;color:#8a857a;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.avatar-empty svg{width:22px;height:22px}
.owner-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.owner-header h2{font-size:22px}
.owner-role{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:700}
.face-preview{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center;border:2.5px solid var(--gold);background:var(--cream);box-shadow:0 4px 16px rgba(14,59,42,.16);display:block;margin:12px 0}
/* Kartu: satu sistem foto-kiri */
.card-h{display:flex;gap:14px;padding:14px}
.card-visual-h{width:132px;flex:0 0 auto;border-radius:18px;overflow:hidden;cursor:pointer;background:#efe9dc}
.card-visual-h img{width:100%;height:100%;min-height:150px;object-fit:cover;display:block}
.card-body{flex:1;min-width:0}
.card-title{font-family:Georgia,'Times New Roman',serif;font-size:19px;font-weight:700;color:var(--ink);background:none;border:0;padding:0;text-align:left;cursor:pointer}
.card-title:hover{text-decoration:underline}
.price-big{font-size:18px;font-weight:800;color:var(--green);margin-top:6px}
.price-big small{font-size:12px;font-weight:600;color:#6b6f66}
.per-unit{font-size:12.5px;color:#6b6f66;margin:2px 0 10px}
.dotline{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#6b6f66}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot-g{background:#2e8b57}.dot-y{background:#d4a017}.dot-r{background:#c0392b}
.demo-banner{background:#fff7dd;border:1px solid #e6c87a;border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.55;margin:0 0 16px}
.empty-state{background:#f7f4ec;border:1px solid #e4ddc8;border-radius:18px;padding:22px 18px;text-align:center;margin:0 0 14px}
.empty-state p{color:#6b6f66;font-size:13.5px;line-height:1.55;margin:6px 0 0}
.warn{background:#fff3f3;border:1px solid #e6b0aa;border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.55;margin:0 0 14px}
.oknote{background:#eef7f0;border:1px solid #bcd8c2;border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.55;margin:0 0 14px}
.field-error{color:#a93226;font-size:13px;margin:6px 0}
.role-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0}
.role-btn{background:#fff;border:1.5px solid #ddd6c2;border-radius:16px;padding:14px;text-align:left;cursor:pointer}
.role-btn b{display:block;font-size:15px;color:var(--ink)}
.role-btn span{font-size:13px;color:#6b6f66}
.detail-visual{border-radius:20px;overflow:hidden;background:#efe9dc}
.detail-visual img{width:100%;height:230px;object-fit:cover;display:block}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.kv>div{background:#f7f4ec;border:1px solid #e4ddc8;border-radius:14px;padding:10px 12px}
.kv span{display:block;font-size:12px;color:#6b6f66}
.kv b{font-size:14px;color:var(--ink)}
.video-box{background:#0f3b2c;color:#fdfbf4;border-radius:18px;padding:16px;margin:14px 0;position:relative}
.video-box .play{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.video-box .play svg{width:22px;height:22px}
.vv-chip{display:inline-block;margin-top:10px;font-size:11.5px;border:1px solid var(--gold);color:#e8d9a8;border-radius:999px;padding:3px 9px}
.vcard{background:#fff;border:1px solid #e8e2d0;border-radius:20px;padding:12px;box-shadow:0 4px 18px rgba(14,59,42,.08)}
.vcard-visual{border-radius:14px;overflow:hidden;position:relative;background:#efe9dc}
.vcard-visual img{width:100%;height:150px;object-fit:cover;display:block}
.vcard-visual .vv-chip{position:absolute;left:10px;bottom:10px;background:rgba(15,59,42,.85);color:#fdfbf4;border-color:transparent;margin:0}
.timeline{margin:14px 0 6px;border-left:2px solid #e4ddc8;padding-left:16px}
.tl{position:relative;padding:4px 0;font-size:13.5px;color:#9a9587}
.tl.on{color:var(--ink);font-weight:700}
.tl-dot{position:absolute;left:-22.5px;top:8px;width:11px;height:11px;border-radius:50%;background:#d8d2c0;border:2px solid #fff;box-shadow:0 0 0 1px #d8d2c0}
.tl.on .tl-dot{background:var(--green);box-shadow:0 0 0 1px var(--green)}
.step{display:inline-block;font-size:12.5px;padding:4px 8px;border-radius:999px;background:#f1ede0;color:#6b6f66}
.step.on{background:var(--green);color:#fff}
.step.done{background:#e6efe8;color:var(--green)}
.linkbtn{background:none;border:0;color:var(--green);font-weight:700;cursor:pointer;padding:8px 0;text-align:left;display:block}
.minrow{display:flex;gap:8px;margin-top:10px}
.minbtn{flex:1;background:#f7f4ec;border:1px solid #e4ddc8;border-radius:10px;padding:8px;cursor:pointer;font-size:13px}
.btn-sm{padding:8px 12px;font-size:13px}
@media(min-width:640px){.card-visual-h{width:170px}.detail-visual img{height:300px}}

/* ============ v4 profil gaya IG ============ */
.profil-cover{height:150px;border-radius:20px;overflow:hidden;background:#efe9dc}
.profil-cover img{width:100%;height:100%;object-fit:cover;display:block}
.profil-head{display:flex;align-items:flex-start;gap:16px;margin:-38px 8px 12px;position:relative}
.profil-head h2{font-size:22px;margin:2px 0 4px}
.profil-head .avatar-lg{border:3px solid #fdfbf4}
.profil-stats{display:flex;gap:10px;margin:14px 0}
.stat{flex:1;text-align:center;background:#f7f4ec;border:1px solid #e4ddc8;border-radius:14px;padding:10px 6px}
.stat b{display:block;font-size:17px;color:var(--ink)}
.stat span{font-size:11.5px;color:#6b6f66}
.tabs{display:flex;gap:8px;margin:16px 0 12px;flex-wrap:wrap}
.tab{background:#f1ede0;border:1px solid #e4ddc8;border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:700;font-size:13.5px}
.tab.on{background:var(--green);color:#fff;border-color:var(--green)}
.feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.feed-item{aspect-ratio:1;border-radius:12px;overflow:hidden;position:relative;cursor:pointer;background:#efe9dc}
.feed-item img{width:100%;height:100%;object-fit:cover;display:block}
.feed-tag{position:absolute;left:6px;bottom:6px;font-size:10.5px;background:rgba(15,59,42,.88);color:#fff;border-radius:999px;padding:2px 7px}
.feed-tag.warn{background:rgba(160,115,5,.95)}
.viewer{border-radius:18px;overflow:hidden;background:#0f3b2c;color:#fdfbf4;margin:14px 0}
.viewer img{width:100%;height:220px;object-fit:cover;display:block}
.viewer .feed-tag{position:static}
@media(min-width:640px){.profil-cover{height:190px}.viewer img{height:280px}}

/* ============ v4.1 — perbaikan layout dari screenshot HP user (CSS SAJA) ============
   Akar masalah yang ditemukan di markup/CSS lama (bukan tebakan):
   - Header memakai <img class="logo-img"> dan footer <img class="foot-logo">,
     padahal TIDAK ADA aturan CSS untuk kedua kelas itu (hanya .logo div yang
     diatur) -> logo SVG tampil sebesar bawaan WebView dan mendorong/menumpuk
     teks header. Perbaikan: ukuran eksplisit di bawah.
   - Nav 5 tab meluber di 320px: pill ikon 44px + padding tombol membuat total
     > 320px sehingga tab ke-5 (Akun) jatuh ke luar layar. Perbaikan: tiap tab
     flex:1 1 0 + min-width:0 sehingga tepat 1/5 lebar layar, ikon diperkecil.
   - Badge tanpa white-space: teks panjang membungkus dan menutupi foto.
   - Padding bawah konten (96px) terlalu mepet dengan tinggi nav nyata
     (~78px + safe-area) sehingga kartu terakhir tersembunyi di balik nav.
   Blok ini diletakkan paling akhir supaya menang atas aturan lama. */

/* Pengaman global: tidak ada gambar/SVG yang boleh meluber horizontal */
html,body{overflow-x:clip}
img{max-width:100%}

/* (1) Logo: ukuran eksplisit di semua tempat, tidak pernah raksasa */
.topbar .logo-img{width:44px;height:44px;flex:0 0 auto;display:block;border-radius:12px;object-fit:cover}
.topbar .brand{min-width:0}
.topbar .brand b{overflow-wrap:anywhere}
footer .foot-logo{width:40px;height:40px;flex:0 0 auto;display:inline-block;vertical-align:middle;border-radius:10px;object-fit:cover}
/* (1b) Foto yang gagal muat diganti logo oleh fallback JS: di dalam wadah foto,
   logo itu WAJIB tampil kecil-terpusat di atas hijau, bukan potongan raksasa */
.profil-cover img[src$="logo.svg"],.card-visual-h img[src$="logo.svg"],.card-visual img[src$="logo.svg"],.detail-visual img[src$="logo.svg"],.viewer img[src$="logo.svg"],.feed-item img[src$="logo.svg"]{object-fit:contain;background:var(--green);padding:14px}

/* (2) Bottom-nav: 5 tab SELALU tampil, termasuk di 320px */
.nav{justify-content:space-between;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.nav button{flex:1 1 0;min-width:0;padding:6px 2px;min-height:52px;font-size:11px;white-space:nowrap}
.nav button .nav-ic{width:40px;height:26px}
.nav .icon{width:24px;height:24px}
@media(max-width:360px){
  .nav button{font-size:10px;padding:6px 1px}
  .nav button .nav-ic{width:36px;height:24px}
  .nav .icon{width:22px;height:22px}
}

/* (3) Badge: satu baris pendek, tidak menutupi foto/wajah/nama/harga */
.badge{white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;font-size:11px;padding:5px 9px}
.feed-tag{white-space:nowrap;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;font-size:9.5px;padding:2px 6px}
.lamp{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.dotline{white-space:nowrap}
.vcard-visual .vv-chip{white-space:nowrap}

/* (4) Konten tidak boleh tertutup bottom-nav: padding bawah jauh di atas tinggi nav */
.app{padding-bottom:calc(124px + env(safe-area-inset-bottom))}
footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}

/* (5) Nama pemilik di profil: teks TIDAK BOLEH menumpuk di atas foto.
   Avatar tetap menumpang sampul (gaya IG), tapi blok nama dipindah ke area
   terang di bawah sampul, plus scrim tipis di bawah sampul untuk kontras avatar */
.profil-head{margin:0 8px 12px;position:relative;z-index:1}
.profil-head .avatar-lg,.profil-head .avatar-empty{margin-top:-38px}
.profil-head>div{min-width:0;overflow-wrap:break-word}
.profil-head h2{color:var(--ink)}
.profil-cover{position:relative}
.profil-cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(to top,rgba(14,59,42,.35),rgba(14,59,42,0));pointer-events:none}

/* (6) Sampul profil: rasio foto 16:9 + object-fit cover, bukan kotak raksasa */
.profil-cover{aspect-ratio:16/9;height:auto;max-height:200px;background:var(--green)}
.profil-cover img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:640px){.profil-cover{max-height:240px}}

/* Pengaman teks panjang di kartu/baris pemilik (nama/usaha tidak meluber) */
.owner-row>div,.owner-header>div,.card-body{min-width:0;overflow-wrap:break-word}
.card-h{min-width:0}
.menu-item{text-align:center}
@media(max-width:360px){.menu-item{font-size:11.5px;padding:12px 4px}}

/* ============ v6 — footer profesional (aturan permanen) ============
   UI pengguna TIDAK menampilkan bahasa developer. Di v6 markup tombol
   cache, tautan APK, dan label versi SUDAH DIHAPUS dari aplikasi (bukan
   disembunyikan lewat CSS), jadi tidak ada lagi aturan sembunyi di sini.
   Yang tampil di footer: brand + tagline + Kepercayaan & Keamanan + Bantuan.
   Pembaruan berjalan otomatis dan diam-diam. */

/* ============ v5 — merge: pengaman topbar eksplisit ============
   html,body sudah overflow-x:clip (blok v4.1); topbar berada DI LUAR .app,
   jadi pengaman ini menegaskan topbar sendiri tidak pernah meluber.
   Atribut inline width/height pada logo header mengikuti blok v6
   (38px), supaya header ringkas bahkan bila CSS eksternal telat dimuat. */
.topbar{max-width:100%}

/* ============ v6 — compact + nav selalu di atas + carousel penuh ============
   Standar ringkas (dari screenshot layar Pesan 17:57 WIB): kartu tidak boleh
   memakan setengah layar. Foto kartu ~104px (96px di <=380px), judul kartu
   16px, harga 18px tebal, meta 12.5px, avatar kartu 34px (kecil 32px),
   padding kartu 12px, gap 10-12px, header ringkas (logo 38px, judul 18px,
   tagline 12px satu baris). Tombol utama tetap >=48px agar mudah diketuk.
   Target: minimal 2 kartu produk penuh per tinggi layar HP. Blok ini paling
   akhir supaya menang atas aturan v2-v5. */
.topbar{padding:10px 12px;gap:10px}
.topbar .logo-img{width:38px;height:38px}
.topbar .brand b{font-size:18px}
.topbar .brand small{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-body{padding:24px 18px 18px}
.hero h1{font-size:26px}
h2{font-size:22px;margin:20px 0 6px}
.grid{gap:12px}
.menu-grid{gap:10px;margin:12px 0}
.menu-item{min-height:84px;padding:12px 6px}
.card-h{padding:12px;gap:10px}
.card-h .card-visual-h{flex-basis:104px}
.card-visual-h{width:104px}
.card-visual-h img{min-height:120px}
.card-h .card-body{padding:12px 12px 14px}
.card-title{font-size:16px}
.price-big{font-size:18px}
.meta{font-size:12.5px}
.per-unit{margin:2px 0 8px}
.owner-row{gap:10px}
.owner-text b{font-size:13.5px}
.avatar{width:34px;height:34px}
.avatar-sm{width:32px;height:32px}
.avatar-lg{width:64px;height:64px}
.avatar-empty{width:34px;height:34px}
.avatar-empty svg{width:18px;height:18px}
.face-preview{width:80px;height:80px}
.form{padding:14px;margin:12px 0}
.detail-visual{height:190px}
.detail-visual img{height:190px}
.profil-cover{max-height:160px}
.profil-head{margin:0 8px 10px}
.stat{padding:8px 6px}
.stat b{font-size:16px}
.btn{min-height:48px}
/* Carousel Video Profil: kartu terakhir wajib tampil penuh */
.vscroll{padding:4px 20px 16px 2px;scroll-padding-right:20px;gap:12px}
.vcard{flex-basis:220px;padding:12px}
.vcard-visual img{height:130px}
/* Nav: selalu di atas konten apa pun, tidak boleh tertutup overlay/scroll */
.nav{z-index:100;pointer-events:auto}
.nav button{pointer-events:auto}
@media(max-width:380px){
  .card-h .card-visual-h{flex-basis:96px}
  .card-visual-h{width:96px}
}
@media(min-width:640px){
  .card-visual-h{width:120px}
  .detail-visual img{height:240px}
  .hero h1{font-size:30px}
}

/* ============ v7 — REBUILD ke standar Yobana/BerkahKu (SATU builder) ============
   Token yang DISALIN dari saudara (bukan tebakan):
   - Yobana .svc & BerkahKu .item: foto 118px, body padding 14/14/14/0, nama
     serif 17px, deskripsi 12.5px, harga 15px tebal, radius 26px, gap 14px.
   - Nav saudara: tombol flex kolom gap 3px, font 11px tebal, ikon 21-24px,
     AKTIF = warna brand + titik 4px SAJA (tanpa pill, tanpa border box).
   - Footer saudara: tidak ada tombol/blok besar; konten berakhir, nav di bawah.
   Blok ini paling akhir supaya menang atas v2-v6. */

/* --- v7: lebar aplikasi = saudara (560px, 720px di desktop lebar) --- */
.app{max-width:560px;padding:16px 16px calc(104px + env(safe-area-inset-bottom))}
@media(min-width:900px){.app{max-width:720px}}
@media(max-width:480px){.app{padding:12px 12px calc(104px + env(safe-area-inset-bottom))}}

/* --- v7: nav aktif gaya saudara (warna + titik, TANPA pill/border box) --- */
.nav{justify-content:space-between;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.nav button{flex:1 1 0;min-width:0;padding:6px 2px;min-height:56px;font-size:11px;font-weight:700;color:var(--soft)}
.nav button .nav-ic{width:auto;height:auto;background:none!important;border:none!important;border-radius:0;display:grid;place-items:center}
.nav .icon{width:24px;height:24px}
.nav button.on{color:var(--green);font-weight:800}
.nav button.on .nav-ic{background:none!important;border:none!important}
.nav button.on::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);margin-top:1px}
@media(max-width:360px){.nav button{font-size:10px}.nav .icon{width:22px;height:22px}}

/* --- v7: footer profesional SATU baris, tanpa tombol, tanpa garis bawah aneh --- */
footer{padding:20px 16px 8px;text-align:center}
.foot-links{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.foot-links a{color:var(--green);font-weight:700;text-decoration:none;font-size:13px}
.foot-links a:hover{text-decoration:underline}
.foot-links span{color:var(--soft)}
.foot-brand{font-size:12.5px;color:var(--soft);line-height:1.6}
footer .foot-logo{width:32px;height:32px;border-radius:10px;vertical-align:middle;margin-right:6px}

/* --- v7: kartu BENAR-BENAR ringkas (sistem saudara, tanpa tombol penuh/tag) --- */
.grid{gap:12px}
.card-h{display:flex;gap:12px;padding:0;overflow:hidden;border-radius:26px}
.card-h .card-visual-h{flex:0 0 118px;width:118px;border-radius:0;overflow:hidden}
.card-visual-h img{min-height:118px}
.card-h .card-body{flex:1;min-width:0;padding:12px 12px 12px 0;display:flex;flex-direction:column}
.card-h .owner-row{gap:8px}
.card-h .owner-row .avatar{width:28px;height:28px;border-width:1.5px}
.card-h .owner-text{line-height:1.25}
.card-h .owner-text b{font-size:12px}
.card-h .owner-text .dotline{font-size:11px}
.card-h .card-title{font-family:Fraunces,Georgia,serif;font-size:17px;line-height:1.25;margin:4px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-h .meta{font-size:11.5px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.card-h .card-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.card-h .price-big{font-size:15px;margin:0}
.card-h .price-big small{font-size:11.5px}
.card-h .card-act{font-size:12.5px;font-weight:800;color:var(--green);white-space:nowrap;flex:none}
.card-h .tag{display:none}
/* kartu produk di dalam profil mengikuti sistem yang sama */
#profilBox .card-h .card-visual-h{flex-basis:118px}
#profilBox .card-h .card-body{padding:12px 12px 12px 0}

/* --- v7: layar daftar lebih ringkas (judul + cari + hitung, tanpa sub panjang) --- */
.view h2{font-size:22px;margin:14px 0 8px}
#view-lapak .sub,#view-sopir .sub{display:none}
#view-lapak .search,#view-sopir .search{margin:8px 0}
#view-lapak .search input,#view-lapak .search select,#view-sopir .search input{min-height:44px;padding:0 14px;font-size:13.5px}
#lapakCount{font-size:12.5px;margin:4px 0 10px}

/* --- v7: wizard daftar bertahap (gaya pick/form saudara) --- */
.wiz-steps{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.wiz-step{flex:1;min-width:0;text-align:center;font-size:11px;font-weight:700;color:var(--soft);padding:8px 4px;border-radius:999px;background:#f1ede0;border:1px solid #e4ddc8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wiz-step.on{background:var(--green);color:#fff;border-color:var(--green)}
.wiz-step.done{background:#e6efe8;color:var(--green);border-color:#e6efe8}
.wiz-nav{display:flex;gap:10px;margin-top:14px}
.wiz-nav .btn{flex:1}
.pick{display:flex;gap:12px;align-items:center;border:1.5px solid #ddd6c2;background:#fff;border-radius:16px;padding:13px;margin-bottom:10px;cursor:pointer;text-align:left;width:100%}
.pick.sel{border-color:var(--green);background:#eef4ee}
.pick .pic-ic{width:44px;height:44px;border-radius:14px;background:var(--green-tint);display:grid;place-items:center;flex:none;color:var(--green)}
.pick b{display:block;font-size:15px;color:var(--ink)}
.pick span{font-size:12.5px;color:var(--soft);line-height:1.45}
.review-box{background:#f7f4ec;border:1px solid #e4ddc8;border-radius:16px;padding:14px;margin:12px 0}
.review-box .rv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed #e4ddc8;font-size:13.5px}
.review-box .rv:last-child{border-bottom:none}
.review-box .rv b{text-align:right}
.src-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:800}
.src-badge.live{background:#e2f3e6;color:#0e3b2a}
.src-badge.demo{background:#fff7dd;color:#5c4a1e;border:1px solid #e6c87a}

/* ============ v8 — POLISH halus-elegan ala Instagram (bukan warna/logo IG) ============
   Yang ditiru dari IG hanya KEHALUSANNYA: transisi lembut, scroll mulus,
   gambar memudar masuk, pemisah tipis, bayangan sangat lembut, profil
   dengan avatar bercincin + statistik + bio, grid 3 kolom yang rapi.
   Palet TETAP hijau pekat + ivory + emas tipis. Blok ini paling akhir
   supaya menang atas v2-v7, TANPA mengubah ukuran kartu v7 (foto 118px,
   judul 17px, harga 15px) — compact v7 dipertahankan. */

/* Bayangan lebih lembut lagi (bukan tebal) */
:root{--shadow-sm:0 1px 3px rgba(14,59,42,.05);--shadow-md:0 10px 24px rgba(14,59,42,.07)}
html{scroll-behavior:smooth}
@keyframes igFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes igImgIn{from{opacity:0}to{opacity:1}}
.view.active{animation:igFade .32s ease both}
.card,.form,.menu-item,.vcard,.pick,.role-btn{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease}
.card-h:active,.menu-item:active,.vcard:active{transform:scale(.99)}
.btn:active{transform:scale(.97)}
.chip:active,.tab:active{transform:scale(.97)}
/* Gambar memudar masuk (bukan kotak kosong lalu muncul tiba-tiba); wadah
   foto sudah punya latar + rasio tetap sehingga tidak ada layout shift */
.card-visual-h img,.card-visual img,.feed-item img,.profil-cover img,.hero-media img,.vcard-visual img,.detail-visual img,.viewer img{animation:igImgIn .5s ease both;background:#efe9dc}
.vcard-visual{aspect-ratio:4/3}
.vcard-visual img{height:100%}
/* Carousel geser mulus (snap lembut, bukan jepret kasar) */
.vscroll{scroll-behavior:smooth;scroll-snap-type:x proximity}
/* Pemisah tipis 1px yang lembut di bawah tab + antar seksi profil */
.tabs{border-bottom:1px solid var(--line);padding-bottom:10px}
.tab{transition:background-color .22s ease,color .22s ease,border-color .22s ease}
footer{border-top:1px solid var(--line)}
/* Umpan balik nav yang halus (bukan berkedip) */
.nav button{transition:color .22s ease,transform .22s ease}
.nav button:active{transform:scale(.96)}
.nav button.on{transition:color .22s ease}
/* Tipografi tenang: tidak berteriak, meta abu lembut tapi tetap terbaca */
h2{font-size:21px}
.meta{color:#6f7a72}
.sub{color:#6f7a72}
/* Aksi bergaris tipis seperti IG (suka/komentar/bagikan/laporkan = tombol
   garis tipis yang sudah ada: Pesan/Hubungi/Laporkan + minbtn) */
.minbtn{transition:background-color .22s ease,border-color .22s ease,transform .22s ease}
.minbtn:active{transform:scale(.97)}
/* --- Profil gaya IG yang sesungguhnya --- */
.ig-profile-head{display:flex;align-items:center;gap:16px;padding:6px 2px 0}
.ig-ring{padding:3px;border:1.5px solid var(--gold);border-radius:50%;background:#fffdf5;box-shadow:0 2px 10px rgba(14,59,42,.10);flex:none;line-height:0}
.ig-ring .avatar{border:none!important;box-shadow:none!important}
.ig-stats{flex:1;display:flex;justify-content:space-around;text-align:center;gap:4px}
.ig-stat b{display:block;font-size:17px;color:var(--ink);line-height:1.25}
.ig-stat span{display:block;font-size:11.5px;color:#6f7a72;line-height:1.4}
.ig-name{font-size:20px;margin:14px 0 2px}
.ig-sub{margin:2px 0 10px}
.ig-bio{font-size:14px;line-height:1.65;color:#3d4a43;margin:0 0 14px}
.ig-actions .btn{flex:1}
/* Grid eksplorasi 3 kolom yang lebih rapat + sudut konsisten */
.feed-grid{gap:6px}
.feed-item{border-radius:10px}
/* Skeleton lembut TANPA animasi berdenyut: placeholder statis yang memudar */
.ig-ph{background:#efe9dc;border-radius:12px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* --- v9: ruang aman tombol aksi di atas nav fixed (pesan/bayar/lacak/detail/akun).
   Nav fixed ~72px + safe-area; padding ini ditambah di atas padding .app + footer,
   sehingga tombol utama (Bayar Escrow, Lanjut Status, Simpan Ulasan, dsb.) tidak
   pernah berakhir di balik nav saat konten mencapai lipatan bawah layar. --- */
#view-pesan,#view-lacak,#view-lapak-detail,#view-sopir-detail,#view-akun,#view-admin{padding-bottom:calc(88px + env(safe-area-inset-bottom))}

/* --- v12: badge DIDAPAT — pill kecil, emas tipis di atas ivory (bukan prestasi tempel). --- */
.badge-pill{display:inline-block;margin:3px 6px 3px 0;padding:5px 11px;border:1px solid #c6a15b;border-radius:999px;background:#fffdf5;color:#0e3b2a;font-size:12.5px;font-weight:700;white-space:nowrap}

.nofoto{display:flex;align-items:center;justify-content:center;min-height:110px;color:#8a7d5a;font-size:12.5px;background:#efe9dc;padding:10px;text-align:center}

/* v25 — Lacak redesain: visualisasi rute + timeline modern */
.lk-head{display:flex;gap:12px;align-items:flex-start}
.lk-pill{display:inline-block;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:#0e3b2a;color:#fff}
.lk-pill.sengketa{background:#a33b2e}
.lk-pill.selesai{background:#8a6d2f}
.lk-sum{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:14px;padding:12px 14px;background:#f7f4ec;border:1px solid #e4ddc8;border-radius:14px}
.lk-sum span{display:block;font-size:11.5px;color:#8a8578;letter-spacing:.04em;text-transform:uppercase}
.lk-sum b{font-size:14px}
.lk-rute{position:relative;margin:20px 6px 8px;padding-top:10px}
.lk-rute-line{position:relative;height:4px;background:#e4ddc8;border-radius:99px;overflow:visible}
.lk-rute-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#0e3b2a,#c6a15b);border-radius:99px;transition:width .8s ease}
.lk-rute-dash{position:absolute;left:0;top:0;width:100%;height:100%}
.lk-rute-dash line{stroke:#0e3b2a;stroke-width:2;stroke-dasharray:7 7;animation:lkDash 1.2s linear infinite}
@keyframes lkDash{to{stroke-dashoffset:-14}}
.lk-node{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #0e3b2a;transform:translate(-50%,-50%);z-index:2}
.lk-node.end{border-color:#c6a15b}
.lk-truk{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:24px;z-index:3;transition:left .8s ease;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.lk-rute-kota{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;font-weight:700}
.lk-rute-kota span:last-child{text-align:right}
.lk-note{font-size:12px;color:#8a8578;margin:4px 0 14px}
.lk-tl{margin:6px 0 14px;border-left:0;padding-left:0}
.lk-tl-item{display:flex;gap:12px;align-items:flex-start;padding:9px 0;position:relative}
.lk-tl-item::before{content:"";position:absolute;left:19px;top:44px;bottom:-4px;width:2px;background:#e4ddc8}
.lk-tl-item:last-child::before{display:none}
.lk-tl-dot{width:40px;height:40px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;background:#efe9db;color:#9a9587;border:2px solid #e4ddc8}
.lk-tl-item.done .lk-tl-dot{background:#0e3b2a;color:#fff;border-color:#0e3b2a}
.lk-tl-item.done .lk-tl-dot::after{content:""}
.lk-tl-item.active .lk-tl-dot{background:#fff8e6;color:#0e3b2a;border-color:#c6a15b;animation:lkPulse 1.8s ease-in-out infinite}
@keyframes lkPulse{0%,100%{box-shadow:0 0 0 0 rgba(198,161,91,.45)}50%{box-shadow:0 0 0 8px rgba(198,161,91,0)}}
.lk-tl-item.sengketa .lk-tl-dot{background:#a33b2e;color:#fff;border-color:#a33b2e}
.lk-tl-item b{display:block;font-size:14.5px}
.lk-tl-item.done b{color:#0e3b2a}
.lk-tl-item.todo{opacity:.55}
.lk-tl-time{font-size:12.5px;color:#8a8578}
.lk-sopir{display:flex;gap:12px;align-items:center;padding:12px 14px;background:#f7f4ec;border:1px solid #e4ddc8;border-radius:14px;margin:12px 0}
.lk-galeri{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.lk-galeri img{width:84px;height:84px;object-fit:cover;border-radius:12px;border:1px solid #e4ddc8}
.lk-eta{margin:12px 0;padding:12px 14px;border:1px solid #c6a15b;border-radius:14px;background:#fff8e6}
.lk-eta b{font-size:15px}
.lk-empty-viz{margin:6px 0 14px}

/* ============ v29 — Hero proporsional + badge peringkat + admin baru ============
   Hero: tinggi selalu 260–300px (bukan fullscreen), foto cover, teks di blok
   gradasi gelap bawah yang cukup, headline/tagline clamp + wrap penuh,
   dots dipindah ke atas supaya tidak menumpuk teks/CTA. */
.hc-slides{aspect-ratio:auto;height:clamp(260px,62vw,300px)}
.hc-slide img{object-fit:cover}
.hc-body{padding:18px 16px 22px;background:linear-gradient(to top,rgba(14,59,42,.94) 0%,rgba(14,59,42,.82) 55%,rgba(14,59,42,0) 100%)}
.hc-body h1{font-size:clamp(20px,5.5vw,26px);line-height:1.25;margin:10px 0 6px;max-width:100%;overflow-wrap:break-word}
.hc-body p{font-size:clamp(13px,3.8vw,15px);line-height:1.5;margin:0 0 12px;max-width:100%;overflow-wrap:break-word}
.hc-dots{top:12px;bottom:auto;right:14px}
.hc-body .btn{min-height:48px}
.v29-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.v29-badge{display:inline-block;background:#fff8e6;border:1px solid #c6a15b;color:#0e3b2a;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800;white-space:nowrap}
.v29-badge.v29-unggulan{background:#0e3b2a;color:#fff;border-color:#0e3b2a}
.v29-badge.v29-pro{background:#eef4ee;border-color:#0e3b2a}
.v29-notice{background:#fff8e6;border:1px solid #e6c87a;border-radius:16px;padding:14px 16px;margin:12px 0}
.v29-lindungi{display:block;margin-bottom:10px;padding:8px 12px;border-radius:12px;font-size:12.5px;font-weight:800;background:#eef4ee;border:1px solid #bcd8c2;color:#0e3b2a}
.v29-lindungi.warn{background:#fff8e6;border-color:#e6c87a;color:#5c4a1e}
.v29-catatan-chat{margin-top:12px}
.v29-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.v29-tab{background:#f1ede0;border:1px solid #e4ddc8;border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:700;font-size:13.5px}
.v29-tab.on{background:#0e3b2a;color:#fff;border-color:#0e3b2a}

/* v30 — etalase, badge peninjauan/baru, story */
.v30-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.v30-badge{display:inline-block;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800;white-space:nowrap}
.v30-badge.v30-tinjau{background:#fff3c4;border:1px solid #d9a441;color:#6b4e00}
.v30-badge.v30-baru{background:#e2f3e6;border:1px solid #0e3b2a;color:#0e3b2a}
.v30-badge.v30-lengkap{background:#eef4ee;border:1px solid #0e3b2a;color:#0e3b2a}
.v30-notice{background:#fff8e6;border:1px solid #e6c87a;border-radius:16px;padding:14px 16px;margin:12px 0}
.ig-ring.story-aktif{border:2.5px solid #c6a15b;box-shadow:0 0 0 3px #fff8e6,0 2px 10px rgba(14,59,42,.10);cursor:pointer}
.avatar.story-aktif{border:2.5px solid #c6a15b!important;box-shadow:0 0 0 3px #fff8e6,0 4px 16px rgba(14,59,42,.16);cursor:pointer}
#v30StoryViewer{position:fixed;inset:0;background:rgba(10,20,14,.96);z-index:9999;display:flex;flex-direction:column;color:#fff}
.v30-sv-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px}
.v30-sv-media{flex:1;display:flex;align-items:center;justify-content:center;padding:0 12px;min-height:0}