/* Nuréa — gaya tambahan untuk aplikasi (di luar desain) */
html, body { margin: 0; height: 100%; background: #EDEDE8; overscroll-behavior: none; }
/* layar pembuka sebelum aplikasi siap: sama persis dengan layar pembuka di dalam aplikasi */
.nr-boot { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #FDFCFD; }
html.nr-dk .nr-boot { background: #000000; }
.nr-boot-wm { display: block; width: 29.5vw; height: 8.53vw; max-width: 170px; max-height: 49px; background: #0D0D0D;
  -webkit-mask: url(icons/nurea-wordmark.png) center/contain no-repeat; mask: url(icons/nurea-wordmark.png) center/contain no-repeat; }
html.nr-dk .nr-boot-wm { background: #FFFFFF; }
body { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
#root { position: relative; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; }
#root.L-hp > .app { max-width: 560px; margin: 0 auto; }
body.dark-page { background: #111214; }
.nr-fatal { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; font-family: system-ui, sans-serif; background: #EDEDE8; color: #17191A; z-index: 9999; }
.nr-fatal button { height: 46px; padding: 0 22px; border-radius: 999px; border: none; background: #17191A; color: #fff; font-size: 15px; font-weight: 600; }
/* lembar bawah tidak boleh lebih tinggi dari layar HP yang pendek */
.app .sheet-in { max-height: calc(100% - 24px) !important; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* latar di luar aplikasi ikut mode gelap */
html:has(.app.mode-dark), body:has(.app.mode-dark) { background: #111214; }
.app .scr { overscroll-behavior: contain; }
/* tahap 2: layar masuk dengan Google (sebelum aplikasi dibuka) */
/* halaman masuk: foto pemandangan di belakang, tulisan Nuréa di atas, kartu kaca bening di bawah */
.nr-gate { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.42) 100%), url(icons/masuk-latar.jpg) center/cover no-repeat, #4E5B3A;
  color: #FFFFFF; font-family: 'Geist', 'Amiri', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.nr-gate-top { flex: 1 0 auto; min-height: 120px; display: flex; align-items: center; justify-content: center; }
.nr-gate-wm { width: 29.5vw; height: 8.53vw; max-width: 150px; max-height: 43px; min-width: 96px; min-height: 28px; background: #FFFFFF;
  -webkit-mask: url(icons/nurea-wordmark.png) center/contain no-repeat; mask: url(icons/nurea-wordmark.png) center/contain no-repeat; }
.nr-gate-card { flex: 0 0 auto; width: 100%; max-width: 420px; box-sizing: border-box; border-radius: 32px; padding: 30px 22px 22px; display: flex; flex-direction: column; gap: 14px;
  background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.26); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.nr-gate h1 { margin: 0; font-size: 25px; line-height: 1.2; font-weight: 650; letter-spacing: -.03em; text-align: center; }
.nr-gate-sub { margin: -6px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.82); text-align: center; }
.nr-gbtn, .nr-pbtn, .nr-sbtn { height: 54px; border-radius: 999px; font: inherit; font-size: 15.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.nr-gbtn { background: #111213; color: #FFFFFF; border: none; margin-top: 4px; }
.nr-gbtn:disabled { opacity: .6; cursor: default; }
.nr-pbtn { background: #111213; color: #FFFFFF; border: none; margin-top: 4px; }
.nr-sbtn { background: rgba(255,255,255,.1); color: #FFFFFF; border: 1px solid rgba(255,255,255,.4); }
.nr-gate-msg { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 600; color: #FFFFFF; background: rgba(179,64,47,.85); border-radius: 14px; padding: 8px 12px; text-align: center; }
.nr-gate-msg:empty { display: none; }
.nr-gate-note { margin: -4px 4px 4px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.78); }
.nr-gate-legal { margin: 2px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.72); text-align: center; }
.nr-gate-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* mode gelap: kartu warna aksen yang sedang dipilih diberi bingkai warna aksen supaya jelas terlihat */
.app.mode-dark .swatch { border-color: rgba(255,255,255,.14); }
.app.mode-dark .swatch.on { border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint); }
/* Browser bawaan aplikasi Google (Android WebView) menggelapkan paksa halaman yang tidak memakai
   prefers-color-scheme. Aturan ini memberi tahu bahwa Nuréa mengatur mode gelapnya sendiri
   (dipilih di Pengaturan), jadi mode terang tetap terang walaupun HP sedang mode gelap. */
@media (prefers-color-scheme: dark) {
  html { color-scheme: only light; }
  html:has(.app.mode-dark) { color-scheme: dark; }
}
/* Simpan catatan (tahap 3b-2): ikon bookmark di halaman baca, terisi saat sudah disimpan */
.rd-bm svg { transition: transform .16s ease; }
.rd-bm:active svg { transform: scale(.86); }
.rd-bm .sa { fill: transparent; transition: fill .16s ease; }
.rd-bm.on .sa { fill: var(--ink); }
/* Profil: Dibagikan / Pribadi / Disimpan memakai gaya tab yang sama dengan Semua / Teman di Komunitas */
.pn-tabs { gap: 22px; padding: 0 4px; }
.pn-tabs button { white-space: nowrap; display: inline-flex; align-items: baseline; }
.pn-tabs .kcnt { margin-left: 5px; font-size: 12px; font-weight: 600; opacity: .55; }
/* Halaman baca: warna tombol Bagikan / Ekspor PDF mengikuti warna huruf yang dipilih penulis,
   bukan warna kaca. Sebelumnya huruf putih + kaca terang membuat tombol Bagikan putih di atas putih. */
.app .rd.ink-d .rd-pill { background: rgba(255,255,255,.72); border-color: rgba(255,255,255,.8); }
.app .rd.ink-d .rd-act { color: #17191A; }
.app .rd.ink-d .rd-act .sa { stroke: #17191A; }
.app .rd.ink-d .rd-act.pri { background: #17191A; color: #FFFFFF; }
.app .rd.ink-d .rd-act.pri .sw { stroke: #FFFFFF; }
.app .rd.ink-l .rd-pill { background: rgba(20,22,24,.62); border-color: rgba(255,255,255,.16); }
.app .rd.ink-l .rd-act { color: #FFFFFF; }
.app .rd.ink-l .rd-act .sa { stroke: #FFFFFF; }
.app .rd.ink-l .rd-act.pri { background: #FFFFFF; color: #17191A; }
.app .rd.ink-l .rd-act.pri .sw { stroke: #17191A; }

/* ---- Petik (tahap 3d) ---- */
.app .pk-bar { position: absolute; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; background: #17191A; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); }
.app .pk-bar button { height: 40px; padding: 0 15px; border-radius: 999px; border: none; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 7px; -webkit-tap-highlight-color: transparent; }
.app .pk-b1 { background: #FFFFFF; color: #17191A; }
.app .pk-b2 { background: transparent; color: #FFFFFF; }
.app .pk-long { color: #FFFFFF; font-size: 12px; font-weight: 600; padding: 0 8px 0 12px; white-space: nowrap; }
.app .pk-hint { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 20px; border: 1px dashed var(--tint); font-size: 12.5px; line-height: 1.5; margin-top: 4px; }
.app .pk-row { gap: 10px; padding: 2px 2px 8px; }
.app .pk-card { flex: 0 0 214px; height: 164px; box-sizing: border-box; padding: 15px 16px 14px; border-radius: 20px; display: flex; flex-direction: column; gap: 8px; text-align: left; font-family: inherit; color: var(--ink); cursor: pointer; }
.app .pk-q { flex: 0 0 auto; min-height: 0; max-height: 4.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 13.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.app .pk-q.ar { font-family: 'Amiri', serif; font-weight: 400; font-size: 17px; line-height: 1.75; direction: rtl; text-align: right; -webkit-line-clamp: 2; }
.app .pk-by { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); min-width: 0; }
.app .pk-cnt { font-size: 12px; font-weight: 600; color: var(--tint); white-space: nowrap; }
.app .pk-x { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; }
.app.mode-dark .pk-x { background: rgba(255,255,255,.06); }
.app .pk-prev { padding: 20px 18px 16px; border-radius: 22px; color: #FFFFFF; display: flex; flex-direction: column; gap: 12px; }
.app .pk-prev-t { font-size: 16px; font-weight: 400; line-height: 1.55; }
.app .pk-prev-ar { font-family: 'Amiri', serif; font-size: 23px; line-height: 1.8; text-align: right; }
.app .pk-prev-ref { font-size: 12px; font-weight: 600; opacity: .9; padding-left: 10px; border-left: 2px solid rgba(255,255,255,.6); }
.app .pk-info { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--gsoft); color: var(--ink); font-size: 12px; line-height: 1.45; }
.app.mode-dark .pk-info { background: rgba(255,255,255,.07); }
.app .pk-half { flex: 1; height: 46px; font-size: 13.5px; gap: 7px; }
.app .pk-busy { opacity: .55; pointer-events: none; }
.app .pk-imgbox { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.app .pk-imgbox img { width: 100%; max-width: 280px; aspect-ratio: 4 / 5; border-radius: 16px; box-shadow: 0 18px 40px -24px rgba(0,0,0,.45); border: 1px solid var(--line); }
.app .pk-entry { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.55); font-family: inherit; color: var(--ink); cursor: pointer; width: 100%; box-sizing: border-box; }
.app.mode-dark .pk-entry { background: rgba(255,255,255,.06); }
.app .pk-entry-ic { width: 36px; height: 36px; border-radius: 12px; background: var(--grad); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app .pk-page { background: var(--paper); }
.app .pk-item { padding: 16px; border-radius: 22px; display: flex; flex-direction: column; gap: 10px; }
.app .pk-chip { align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.app .pk-chip.live { background: #DCE8F4; color: #1E3A5C; }
.app .pk-chip.past { background: #ECEEEE; color: #3E4245; }
.app .pk-chip.priv { background: #F3EBDD; color: #6B4A12; }
.app .pk-it { font-size: 15px; font-weight: 400; line-height: 1.55; }
.app .pk-ar { font-family: 'Amiri', serif; font-size: 21px; line-height: 1.8; text-align: right; }
.app .pk-note { font-size: 13px; font-style: italic; line-height: 1.5; opacity: .85; }
.app .pk-cred { font-size: 11.5px; line-height: 1.45; }
.app .pk-acts { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.app .pk-mini { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.app .pk-mini.warn { background: #B3261E; border-color: #B3261E; color: #FFFFFF; }
.app .pk-entry .kcnt { font-size: 12.5px; font-weight: 600; opacity: .6; }

.app .pk-by > span:first-child { font-size: 11.5px !important; }
.app .pk-by > span:last-child { font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .pk-sg.b { font-weight: 650; }
.app .pk-q.ar { max-height: 3.5em; }

/* ---- Jadwal kajian: kartu ber-gelembung + galeri poster (revisi 20 Okt) ---- */
.app .jd-wrap { display: flex; flex-direction: column; gap: 14px; }
.app .jd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 0; }
.app .jd-add { height: 34px; padding: 0 14px; border-radius: 999px; border: none; background: var(--inkcard); color: #FFFFFF; font-family: inherit; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0; }
.app .jd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.app .jd-card { display: flex; gap: 12px; align-items: stretch; padding: 9px; border-radius: 22px; border: 1px solid rgba(255,255,255,.75); background: rgba(255,255,255,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 14px 30px -24px rgba(30,58,92,.45); text-align: left; font-family: inherit; color: var(--ink); cursor: pointer; width: 100%; box-sizing: border-box; }
.app.mode-dark .jd-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); box-shadow: none; }
.app .jd-thumb { position: relative; flex: 0 0 112px; height: 100px; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.app .jd-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app .jd-noposter { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1; color: #FFFFFF; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 3px 6px; border-radius: 999px; background: rgba(15,16,18,.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.app .jd-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 3px 4px 2px 0; justify-content: center; }
.app .jd-t { font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app .jd-w { font-size: 12px; color: var(--muted); }
.app .jd-p { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .jd-chip { align-self: flex-start; margin-top: 4px; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--chip); color: var(--ink); }
.app .jd-chip.now { background: var(--tint); color: #FFFFFF; }
.app .jd-chip.soon { background: var(--gsoft); color: var(--ink); }
.app .jd-chip.off { opacity: .6; }
.app .jd-ver { margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.app .jd-gal { padding: 18px 18px 16px; border-radius: 24px; color: #FFFFFF; display: flex; flex-direction: column; gap: 14px; }
.app .jd-gal-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.app .jd-gal-row::-webkit-scrollbar { display: none; }
.app .jd-mini { flex: 0 0 76px; height: 96px; border-radius: 14px; border: 2px solid rgba(255,255,255,.65); padding: 0; overflow: hidden; position: relative; cursor: pointer; background: rgba(255,255,255,.2); box-shadow: 0 10px 22px -14px rgba(0,0,0,.5); }
.app .jd-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app.mode-dark .jd-add { background: #FFFFFF; color: #17191A; }
.app.mode-dark .jd-add .sw { stroke: #17191A; }
.app .jd-row { scroll-snap-type: x proximity; }
.app .jd-row > .jd-card { flex: 0 0 300px; width: 300px; scroll-snap-align: start; }
.app .jd-row > .jd-card:last-child { margin-right: 4px; }
/* Komunitas: pindah tab Semua / Teman / Jadwal kajian dengan mulus (nama kelas ktx* sengaja unik: .kb dll. sudah dipakai desain) */
.ktabs button { transition: color .25s ease; }
.ktabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--ink2);
  transform: scaleX(0); opacity: 0; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.ktabs button.on::after { transform: scaleX(1); opacity: 1; }
.ktxcol.ktxr { --ktx: 16px; }
.ktxcol.ktxl { --ktx: -16px; }
.ktxcol.ktxa > .ktabs ~ * { animation: ktIn1 .36s cubic-bezier(.2,.8,.2,1) both; }
.ktxcol.ktxb > .ktabs ~ * { animation: ktIn2 .36s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ktIn1 { from { opacity: 0; transform: translateX(var(--ktx, 12px)); } to { opacity: 1; transform: none; } }
@keyframes ktIn2 { from { opacity: 0; transform: translateX(var(--ktx, 12px)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ktxcol.ktxa > .ktabs ~ *, .ktxcol.ktxb > .ktabs ~ * { animation: none; } .ktabs button::after { transition: none; } }
/* jadwal pribadi: judul jadwal dapat diketuk untuk mengubah atau menghapus */
.jrow-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; background: none; border: none; padding: 0; margin: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jrow-open:active { opacity: .6; }
/* mode terang: pilihan filter Komunitas (Semua, Tafsir, Terdekat, dst.) yang tidak dipilih dibuat lebih jelas terbaca */
.app:not(.mode-dark) .kpill:not(.on) { background: rgba(255,255,255,.78); border-color: rgba(23,25,26,.10); color: #2A2D2F; text-shadow: none; }
.app:not(.mode-dark) .kpill.on { background: #17191A; border-color: #17191A; color: #FFFFFF; text-shadow: none; }
/* catatan Komunitas: disembunyikan sebentar sampai isi & sampulnya siap, lalu muncul utuh */
.rd-wait, .rd-wait * { animation: none !important; }
.rd-wait { opacity: 0 !important; pointer-events: none; }
[data-pkov] { transition: opacity .2s ease; }
/* Beranda: kalimat sambutan bergradasi lembut (tanpa efek samar) */
.sambut-g { background: linear-gradient(180deg, rgba(23,25,26,.42) 0%, rgba(23,25,26,.78) 45%, #17191A 90%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
.mode-dark .sambut-g { background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.8) 45%, #FFFFFF 90%); -webkit-background-clip: text; background-clip: text; }
/* foto di dalam catatan yang sedang ditulis: ketuk untuk memunculkan tombol hapus */
.editor img { cursor: pointer; transition: box-shadow .18s ease, opacity .18s ease; }
.editor img.img-sel { box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 0 0 4px rgba(23,25,26,.32); }
.nr-imgdel { position: fixed; z-index: 9500; height: 36px; min-width: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(20,22,24,.62); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 600 12.5px/1 'Geist', system-ui, -apple-system, sans-serif;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.55); cursor: pointer; animation: nrImgDel .18s ease; -webkit-tap-highlight-color: transparent; }
.nr-imgdel.arm { background: rgba(176,52,40,.92); border-color: rgba(255,255,255,.4); padding: 0 14px 0 12px; }
@keyframes nrImgDel { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
/* kartu catatan: foto sampul menggantikan gambar bawaan bila sudah terunduh */
.kimg-on { background-image: var(--kimg) !important; background-size: cover !important; background-position: center !important; }
/* mode gelap: label "x hari lagi" di Jadwal kajian tetap terbaca (latar biru redup, tulisan biru muda) */
.app.mode-dark .jd-chip.soon { background: rgba(147,182,220,.2); color: #D5E5F6; }
.app.mode-dark .jd-chip { background: rgba(255,255,255,.1); color: #ECECE7; }
.app.mode-dark .jd-chip.now { background: var(--tint); color: #FFFFFF; }
.app:not(.mode-dark) .jd-chip.soon { background: rgba(79,125,176,.14); color: #2E5A87; }

/* ---- Panel developer (tahap 4) ---- */
.app .dv-card { border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); }
.app .dv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app .dv-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.app .dv-t { font-size: 18px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.app .dv-q { font-size: 16px; font-style: italic; line-height: 1.5; overflow-wrap: anywhere; }
.app .dv-why { font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.app .dv-state { align-self: flex-start; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--chip); color: var(--ink); }
.app .dv-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.app .dv-acts:empty { display: none; }
.app .dv-b { height: 38px; padding: 0 16px; font-size: 12.5px; }
.app .dv-empty { border-radius: 20px; padding: 20px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--muted); }
.app .dv-user { flex-direction: row; align-items: center; gap: 12px; }
.app .dv-av { width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 15px; font-weight: 700; }
.app .dv-badge { min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; background: var(--ink); color: var(--paper, #FFFFFF); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.app.mode-dark .dv-badge { background: #ECECE7; color: #17191A; }
.app.mode-dark .dv-card { border-color: rgba(255,255,255,.1); }

/* ---- Keterangan "Disembunyikan dari Komunitas" untuk pemilik (tahap 4b) ---- */
.app .nr-hz { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 18px; background: rgba(176,122,40,.10); border: 1px solid rgba(176,122,40,.28); text-align: left; }
.app .nr-hz-t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #7A5214; }
.app .nr-hz-t .sa { stroke: #7A5214; }
.app .nr-hz-w { font-size: 13px; font-weight: 600; color: var(--ink); }
.app .nr-hz-n { font-size: 12.5px; line-height: 1.5; color: var(--ink); font-style: italic; }
.app .nr-hz-x { font-size: 12px; line-height: 1.55; color: var(--muted); }
.app .nr-hz-a { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.app.mode-dark .nr-hz { background: rgba(230,180,100,.10); border-color: rgba(230,180,100,.30); }
.app.mode-dark .nr-hz-t { color: #EBC88E; }
.app.mode-dark .nr-hz-t .sa { stroke: #EBC88E; }
.app .nr-hz-tag { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.app .pk-item .nr-hz, .app .card .nr-hz { margin: 4px 0; }
.app .dv-ask { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 2px; }
.app .dv-ask .inp { height: auto; padding: 10px 12px; resize: none; border-radius: 14px; font-size: 13px; }

/* ---- Tahap 5: Kirim masukan, Panduan singkat, angka di panel developer ---- */
.app .fb-pick { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px dashed var(--line); background: var(--field); font-size: 13px; font-weight: 600; cursor: pointer; }
.app .fb-img { display: flex; align-items: flex-end; gap: 10px; }
.app .fb-img img { max-width: 140px; max-height: 200px; border-radius: 14px; border: 1px solid var(--line); object-fit: cover; }
.app .nr-guide { position: absolute; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; background: rgba(15,16,18,.48); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.app .g-box { width: 100%; max-width: 440px; box-sizing: border-box; border-radius: 32px; padding: 20px 22px 22px; background: var(--paper, #FFFFFF); background-image: var(--wash); display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.app .g-top { display: flex; align-items: center; justify-content: space-between; }
.app .g-slide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 10px 6px 0; min-height: 270px; animation: gIn .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes gIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.app .g-ic { width: 96px; height: 96px; border-radius: 30px; background: var(--grad); display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 36px -18px rgba(30,58,92,.6); margin-bottom: 6px; }
.app .g-t { font-size: 25px; font-weight: 700; line-height: 1.2; color: var(--ink2); }
.app .g-x { font-size: 14.5px; line-height: 1.65; color: var(--muted); max-width: 340px; }
.app .g-dots { display: flex; justify-content: center; gap: 8px; }
.app .g-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: var(--line); cursor: pointer; transition: width .25s ease, background .25s ease; }
.app .g-dot.on { width: 22px; background: var(--ink2); }
.app .g-acts { display: flex; gap: 10px; }
.app.mode-dark .g-box { background: #17191A; }
.app .dv-seg button { font-size: 11.5px; padding: 0 4px; }
.app .dv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.app .dv-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--card, #FFFFFF); font-family: inherit; color: inherit; text-align: left; cursor: default; }
.app .dv-tile.go { cursor: pointer; border-color: var(--ink2); }
.app.mode-dark .dv-tile { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.app.mode-dark .dv-tile.go { border-color: rgba(255,255,255,.45); }
.app .dv-n { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.app .dv-l { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.app .dv-s { font-size: 11px; color: var(--muted); }
.app .dv-fbt { font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.app .dv-shot { align-self: flex-start; display: block; }
.app .dv-shot img { max-width: 180px; max-height: 260px; border-radius: 14px; border: 1px solid var(--line); object-fit: cover; display: block; }
/* tahap 6: akun ditangguhkan */
.app .dv-susp { background: rgba(176,122,40,.14); color: #7A5214; }
.app.mode-dark .dv-susp { background: rgba(230,180,100,.14); color: #EBC88E; }
/* foto di halaman mencatat: tahan lama tidak memunculkan menu "simpan gambar" / seret gambar */
.editor img { -webkit-touch-callout: none; -webkit-user-drag: none; }
.nr-imgdel { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---- gulir lebih halus (21 Okt 2026): kaca di dalam kaca lain tidak perlu blur sendiri.
   Tampilannya sama (yang di belakangnya sudah buram / polos), tapi ponsel tidak perlu menghitung blur
   berlapis-lapis di setiap gerakan gulir. ---- */
.app .dsheet .gl, .app .dsheet .glass-d, .app .gl .gl, .app .scr.kom .jd-card, .app .rg .gl { backdrop-filter: none; -webkit-backdrop-filter: none; }
.app .scr { -webkit-overflow-scrolling: touch; }

/* ---- ukuran semua isi catatan (Pengaturan > Tampilan / tombol Ukuran saat mencatat) ---- */
.app { --nfs: 1; }
.app.nfs-0 { --nfs: .9; }
.app.nfs-2 { --nfs: 1.15; }
.app.nfs-3 { --nfs: 1.3; }
.app.kj .kcanvas { font-size: calc(15px * var(--nfs)); }
.app.kj .k-q { font-size: calc(15px * var(--nfs)); }
.app.kj .k-ar-t { font-size: calc(25px * var(--nfs)); }
.app.kj .k-ar-tr { font-size: calc(14.5px * var(--nfs)); }

/* ---- ukuran kalimat yang disorot ---- */
.app .kcanvas font[size="1"], .app .kcanvas font[size="2"], .app .sg.z-s { font-size: .86em; }
.app .kcanvas font[size="3"] { font-size: 1em; }
.app .kcanvas font[size="4"], .app .kcanvas font[size="5"], .app .sg.z-l { font-size: 1.25em; line-height: 1.5; }
.app .kcanvas font[size="6"], .app .kcanvas font[size="7"], .app .sg.z-xl { font-size: 1.5em; line-height: 1.4; }

/* ---- panel Ukuran di atas alat menulis ---- */
.app .nr-ts { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; border-radius: 22px;
  background: #FFFFFF; border: 1px solid rgba(23,25,26,.08); box-shadow: 0 18px 40px -16px rgba(20,35,60,.45); text-align: left; cursor: default; }
.app .nr-ts-l { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.app .nr-ts-row { display: flex; gap: 6px; }
.app .nr-ts-c { flex: 1 1 0; min-width: 0; height: 38px; border-radius: 12px; border: 1px solid rgba(23,25,26,.1); background: transparent; color: var(--ink); font-family: inherit; font-weight: 600; cursor: pointer; padding: 0 4px; white-space: nowrap; }
.app .nr-ts-c.on { background: #17191A; color: #FFFFFF; border-color: #17191A; }
.app .nr-ts-all { align-items: center; }
.app .nr-ts-b { width: 52px; height: 38px; border-radius: 12px; border: 1px solid rgba(23,25,26,.1); background: transparent; color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.app .nr-ts-b.off { opacity: .35; }
.app .nr-ts-v { flex: 1; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); }
.app .nr-ts-h { font-size: 11px; line-height: 1.45; color: var(--muted); }
.app.mode-dark .nr-ts { background: #232529; border-color: rgba(255,255,255,.1); box-shadow: 0 18px 40px -16px rgba(0,0,0,.7); }
.app.mode-dark .nr-ts-c, .app.mode-dark .nr-ts-b { border-color: rgba(255,255,255,.14); }
.app.mode-dark .nr-ts-c.on { background: #F2F2EE; color: #17191A; border-color: #F2F2EE; }
.app .nr-nfs-seg button { white-space: nowrap; padding: 0 6px; }

/* ---- panah "geser" di kartu Faedah (21 Okt 2026): cukup bergoyang 4 kali sebagai petunjuk lalu diam.
   Goyangan tanpa henti membuat ponsel menghitung ulang halaman Beranda di setiap frame, termasuk saat digulir. ---- */
.app .nr-nudge { display: inline-flex; animation: knudge 2.4s ease-in-out 4; will-change: transform; }
.app .nr-nudge .nudge-i { display: block; }

/* ---- halaman baca catatan teman (21 Okt 2026): kaca buram yang ringan saat digulir.
   Buram dibuat dari salinan sampul yang diam (dihitung sekali), bukan dari layar di belakangnya
   (yang dihitung ulang setiap gerakan gulir). ---- */
.rd .rg.rg-x { backdrop-filter: none; -webkit-backdrop-filter: none; }
.rd .rg-pre { position: absolute; pointer-events: none; overflow: hidden; filter: blur(20px) saturate(1.5); -webkit-filter: blur(20px) saturate(1.5); }
.rd .rg-pre-t { position: absolute; inset: 0; pointer-events: none; }

/* ---- kartu kaca di dalam halaman yang digulir (21 Okt 2026): latar di belakangnya polos/gradasi halus,
   jadi buramnya tidak terlihat bedanya (sudah dibandingkan per piksel, terang & gelap) tetapi membuat
   ponsel menghitung ulang di setiap gerakan gulir. Lembar Profil sengaja tetap buram karena melewati foto sampul. ---- */
.app .scr .gl, .app .scr .kpill, .app .scr .kb.txt, .app .scr .jd-card { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---- layar pembuka (22 Okt 2026): hitam dengan tulisan Nuréa putih di mode terang maupun gelap,
   sama dengan layar pembuka bawaan HP (ikon hitam di latar hitam), jadi tidak ada kotak dan tidak berganti warna.
   Tampil 1 detik lalu memudar cepat. ---- */
.nr-boot, html.nr-dk .nr-boot { background: #000000; }
.nr-boot-wm, html.nr-dk .nr-boot-wm { background: #FFFFFF; }
.app .splash, .app.mode-dark .splash { background: #000000; color: #FFFFFF; transition: opacity .35s ease, transform .35s ease; }
.app .splash .nlogo { background: #FFFFFF; }

/* ---- pilihan ukuran tulisan yang disorot: satu jalur, sorotan muncul saat dipilih lalu bergeser mengikuti pilihan ---- */
.app .nr-ts-row.nr-ts-z { position: relative; gap: 0; padding: 3px; border-radius: 14px; background: rgba(23,25,26,.06); }
.app .nr-ts-z .nr-ts-c { position: relative; z-index: 1; border: none; background: transparent; height: 36px; border-radius: 11px; transition: color .2s ease; }
.app .nr-ts-z .nr-ts-c.on { background: transparent; color: #FFFFFF; }
.app .nr-ts-ind { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 4); border-radius: 11px; background: #17191A;
  transform: translateX(calc(var(--zi, 0) * 100%)); opacity: 0; transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .15s ease; pointer-events: none; }
.app .nr-ts-ind.on { opacity: 1; }
.app.mode-dark .nr-ts-row.nr-ts-z { background: rgba(255,255,255,.08); }
.app.mode-dark .nr-ts-ind { background: #F2F2EE; }
.app.mode-dark .nr-ts-z .nr-ts-c.on { background: transparent; color: #17191A; }

/* ---- Layar baca gaya baru (22 Okt): sampul memudar ke latar krem / cokelat tua ---- */
.app .r2, .app .r2v { --r2-bg: #FBF8F3; --r2-ink: #1E1B18; --r2-mut: rgba(30,27,24,.58); --r2-acc: #9A5B22; --r2-line: rgba(30,27,24,.12); --r2-card: rgba(80,50,20,.06); }
.app.mode-dark .r2, .app.mode-dark .r2v { --r2-bg: #2B2420; --r2-ink: #F3ECE4; --r2-mut: rgba(243,236,228,.62); --r2-acc: #D9A066; --r2-line: rgba(243,236,228,.14); --r2-card: rgba(255,255,255,.06); }
.app .r2 { position: absolute; inset: 0; overflow: hidden; background: var(--r2-bg); color: var(--r2-ink);
  --ink: var(--r2-ink); --ink2: var(--r2-ink); --muted: var(--r2-mut); --line: var(--r2-line); --chip: var(--r2-card); --tint: var(--r2-acc); }
.app .r2-sc { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.app .r2-sc::-webkit-scrollbar { display: none; }
.app .r2-hero { position: relative; height: 360px; background: var(--r2-bg); }
.app .r2-cv { position: absolute; inset: 0; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, rgba(0,0,0,.98) 31.2%, rgba(0,0,0,.93) 37.5%, rgba(0,0,0,.84) 43.8%, rgba(0,0,0,.74) 50%, rgba(0,0,0,.62) 56.2%, rgba(0,0,0,.5) 62.5%, rgba(0,0,0,.38) 68.8%, rgba(0,0,0,.26) 75%, rgba(0,0,0,.16) 81.2%, rgba(0,0,0,.07) 87.5%, rgba(0,0,0,.02) 93.8%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 25%, rgba(0,0,0,.98) 31.2%, rgba(0,0,0,.93) 37.5%, rgba(0,0,0,.84) 43.8%, rgba(0,0,0,.74) 50%, rgba(0,0,0,.62) 56.2%, rgba(0,0,0,.5) 62.5%, rgba(0,0,0,.38) 68.8%, rgba(0,0,0,.26) 75%, rgba(0,0,0,.16) 81.2%, rgba(0,0,0,.07) 87.5%, rgba(0,0,0,.02) 93.8%, transparent 100%); }
.app .r2-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.24) 0%, rgba(0,0,0,.23) 3.8%, rgba(0,0,0,.2) 7.5%, rgba(0,0,0,.16) 11.2%, rgba(0,0,0,.12) 15%, rgba(0,0,0,.08) 18.8%, rgba(0,0,0,.04) 22.5%, rgba(0,0,0,.01) 26.2%, transparent 30%); }
.app .r2-bar { position: relative; z-index: 2; margin-top: -360px; padding: 14px 12px 0; display: flex; align-items: center; justify-content: space-between; color: #FFFFFF; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.app .r2-bar .sa { stroke: #FFFFFF; }
.app .r2-bar .rd-bm.on .sa { fill: #FFFFFF; }
.app .r2-body { position: relative; padding: 214px 22px 140px; display: flex; flex-direction: column; gap: 18px; }
.app .r2-head { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.app .r2-kick { font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--r2-acc); }
.app .r2-title { font-family: 'Geist', 'Amiri', sans-serif; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.022em; color: var(--r2-ink); }
.app .r2-by { width: auto; display: flex; align-items: center; gap: 10px; padding: 2px 0; text-align: left; color: inherit; }
.app .r2-av { width: 34px; height: 34px; border-radius: 999px; background: var(--r2-acc); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.app .r2-byt { display: flex; flex-direction: column; gap: 1px; }
.app .r2-nm { font-size: 13.5px; font-weight: 650; line-height: 1.3; color: var(--r2-ink); }
.app .r2-mt { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--r2-mut); }
.app .r2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.app .r2 .r2-p { display: block; padding: 0 0 16px; font-family: 'Lora', 'Amiri', Georgia, serif; font-size: calc(17px * var(--nfs,1)); line-height: 1.7; color: var(--r2-ink); }
.app.kj .r2 .k-q { font-family: 'Lora', 'Amiri', Georgia, serif; font-style: italic; font-weight: 600; font-size: calc(17px * var(--nfs,1)); line-height: 1.42; letter-spacing: 0; text-align: left; color: var(--r2-ink);
  border-left: 3px solid var(--r2-acc); margin: 6px 0 22px; padding: 2px 0 2px 16px; }
.app.kj .r2 .k-ar { background: var(--r2-card); border: none; box-shadow: none; border-radius: 18px; padding: 18px 18px 16px; margin: 6px 0 22px; }
.app.kj .r2 .k-ar-t { font-size: calc(27px * var(--nfs,1)); color: var(--r2-ink); }
.app.kj .r2 .k-ar-tr { font-family: 'Lora', 'Amiri', Georgia, serif; font-size: calc(15.5px * var(--nfs,1)); color: var(--r2-ink); }
.app .r2 .sg.h { color: #1E1B18; }

/* ---- Warna stabilo (22 Okt) ---- */
.app .sg.h { background: #FFE47A; }
.app .sg.h.h-p { background: #FFB8D3; }
.app .sg.h.h-g { background: #A9E5B6; }
.app .sg.h.h-b { background: #A9D0FF; }
.app .sg.h.h-u { background: #D3C0FF; }
.app .nr-hl-row { display: flex; gap: 4px; }
.app .nr-hl-c { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 0 4px; border: none; border-radius: 14px; background: transparent; color: var(--ink); font-family: inherit; cursor: pointer; }
.app .nr-hl-d { width: 30px; height: 30px; border-radius: 999px; border: 1px solid rgba(23,25,26,.12); box-sizing: border-box; }
.app .nr-hl-c.on .nr-hl-d { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ink); }
.app .nr-hl-n { font-size: 11px; font-weight: 600; color: var(--muted); }
.app .nr-hl-x .nr-hl-d { background: linear-gradient(135deg, transparent 46%, #C0392B 46%, #C0392B 54%, transparent 54%), #FFFFFF; }
.app.mode-dark .nr-hl-d { border-color: rgba(255,255,255,.18); }
.app.mode-dark .nr-hl-c.on .nr-hl-d { box-shadow: 0 0 0 2px #232529, 0 0 0 4px var(--ink); }

/* ---- Tombol Foto: ambil foto langsung atau pilih dari galeri (22 Okt) ---- */
.app .nr-fp-row { display: flex; gap: 8px; }
.app .nr-fp-b { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px 12px; border-radius: 16px; background: var(--chip); color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer; }
.app .nr-fp-i { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--card, #FFFFFF); color: var(--ink); }
.app.mode-dark .nr-fp-i { background: rgba(255,255,255,.08); }

/* ---- Teman (22 Okt) ---- */
.app .tm-ic { background: linear-gradient(135deg, #3E7A5E, #2C5A45); }
.app .tm-entry { margin-top: 10px; }
.app .tm-badge { flex-shrink: 0; background: #C2410C; color: #FFFFFF; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1; padding: 4px 8px; margin-right: 2px; }
.app .tm-row { display: flex; align-items: center; gap: 12px; }
.app .tm-av { width: 42px; height: 42px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 15px; font-weight: 600; flex-shrink: 0; }
.app .tm-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app .tm-l1 { font-size: 13px; line-height: 1.45; }
.app .tm-l1 b { font-weight: 600; }
.app .tm-l2 { font-size: 11.5px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .tm-nm { font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .tm-req { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.app .tm-acts { display: flex; gap: 8px; padding-left: 54px; }
.app .tm-b { flex: 1; height: 38px; font-size: 13px; }
.app .tm-card { border-radius: 22px; padding: 6px 16px 4px; display: flex; flex-direction: column; }
.app .tm-cap { display: block; padding: 12px 0 6px; }
.app .tm-line { padding: 12px 0; border-top: 1px solid var(--line); }
.app .tm-sb { width: auto; height: 36px; padding: 0 14px; font-size: 12.5px; flex-shrink: 0; }
.app .tm-stat, .app .tm-empty { padding: 22px 20px; text-align: center; font-size: 13px; line-height: 1.5; gap: 6px; }
.app .tm-putus { color: #B42318; }
.app.mode-dark .tm-putus { color: #F97066; }
.app .tm-wait { color: var(--muted); }

/* ---- Profil baru (22 Okt) ---- */
.app .p2-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 55%, rgba(0,0,0,.16) 100%); }
.app .p2-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.app .p2-top > * { pointer-events: auto; }
.app .p2-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; padding: 0; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.18); color: #FFFFFF; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; }
.app .p2-aj { height: 40px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.18); color: #FFFFFF; display: flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; }
.app .p2-aj.on { background: rgba(255,255,255,.92); border-color: rgba(255,255,255,.92); color: #17191A; }
.app .p2-hero { height: max(380px, 59vh); box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 34px 38px; color: #FFFFFF; text-align: center; }
.app .p2-hero.p2-tab { height: max(320px, 48vh); padding-bottom: 46px; }
.app .p2-nm { display: inline-flex; align-items: center; gap: 4px; font-family: 'Space Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; opacity: .92; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.app .p2-bio { margin: 10px 0 0; max-width: 250px; font-family: 'Poppins', 'Geist', 'Amiri', sans-serif; font-size: 17px; line-height: 1.3; font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; text-shadow: 0 1px 14px rgba(0,0,0,.18); }
.app .p2-tab .p2-bio { max-width: 380px; font-size: 20px; }
.app .p2-nobio { margin-top: 12px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px dashed rgba(255,255,255,.6); background: rgba(255,255,255,.12); color: #FFFFFF; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.app .p2-pk .pk-item { margin: 0; }
.app .p2-sheet { min-height: calc(100vh - 150px); box-sizing: border-box; }
.app .p2-tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.app .p2-tag.sh { background: #E3F1E7; color: #1F6B3A; }
.app .p2-tag.pr { background: rgba(23,25,26,.07); color: rgba(23,25,26,.62); }
.app.mode-dark .p2-tag.sh { background: rgba(80,180,120,.18); color: #8FD6A8; }
.app.mode-dark .p2-tag.pr { background: rgba(255,255,255,.08); color: rgba(255,255,255,.62); }
.app .p2-ktm { display: flex; flex-direction: column; gap: 8px; }
.app .p2-req { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 18px; border: none; background: var(--card, rgba(255,255,255,.8)); color: inherit; font-family: inherit; cursor: pointer; width: 100%; }
.app .p2-avs { position: relative; display: flex; flex-shrink: 0; }
.app .p2-av { width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 13px; font-weight: 700; border: 2px solid #FFFFFF; box-sizing: border-box; }
.app .p2-av + .p2-av { margin-left: -12px; }
.app .p2-badge { min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; background: #C2410C; color: #FFFFFF; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.app .p2-fr { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 14px; border-radius: 14px; border: none; background: transparent; color: inherit; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; width: 100%; }

/* ---- Bagikan ulang (tahap 9) ---- */
.app .r2-bar > .serif { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.app .r2-acts { display: flex; align-items: center; gap: 6px; }
.app .rd-ul svg { transition: transform .16s ease; }
.app .rd-ul:active svg { transform: scale(.86); }
.app .r2-bar .rd-ul.on { background: rgba(255,255,255,.3); }
.app .p2-sheet .pn-tabs { gap: 18px; overflow-x: auto; scrollbar-width: none; }
.app .p2-sheet .pn-tabs::-webkit-scrollbar { display: none; }
.app .ul-row { gap: 10px; padding: 2px 2px 8px; align-items: stretch; }
.app .ul-row .ul-card { flex: 0 0 272px; }
.app .ul-card { box-sizing: border-box; padding: 14px; border-radius: 22px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.app .ul-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: none; background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
.app .ul-av { width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.app .ul-who { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .ul-who b { font-weight: 600; }
.app .ul-when { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; white-space: nowrap; }
.app .ul-cap { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; color: var(--ink); }
.app .ul-row .ul-cap { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.app .ul-cap-s { padding: 12px 14px; border-radius: 16px; background: var(--gsoft); }
.app.mode-dark .ul-cap-s { background: rgba(255,255,255,.07); }
.app .ul-note { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 8px 10px 8px 8px; border-radius: 16px; border: 1px solid var(--line); background: transparent; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
.app .ul-row .ul-note { margin-top: auto; }
.app .ul-cv { position: relative; display: block; width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; overflow: hidden; }
.app .ul-nt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app .ul-cat { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.app .ul-tt { font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.app .ul-by { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .ul-foot { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.app .ul-rp { padding: 4px 2px; border: none; background: none; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.app .ul-st { white-space: normal; line-height: 1.35; }
.app .ul-mini { cursor: default; }
.app .ul-batal { color: #B42318; }
.app.mode-dark .ul-batal { color: #F97066; }
.app .ul-ntf { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 0; border: none; border-top: 1px solid var(--line); background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
.app .ul-ncap { font-size: 12.5px; line-height: 1.45; color: var(--ink); opacity: .8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app .ul-dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 999px; background: #C2410C; flex-shrink: 0; }

/* ---- Komunitas › Semua: aliran campuran (22 Okt) ---- */
.app .mx-wrap { display: flex; flex-direction: column; gap: 14px; }
.app .mx-wrap > .hscroll:first-child .kpill { height: 36px; padding: 0 16px; font-size: 13px; }
.app .ul-ic { margin: 0 4px -2px 5px; opacity: .65; }
.app .mx-note { border-radius: 26px; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.app .mx-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border: none; background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
.app .mx-head .muted { font-weight: 400; }
.app .mx-body { display: flex; flex-direction: column; width: 100%; padding: 0; border: none; background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
.app .mx-cv { display: block; width: 100%; height: 170px; border-radius: 0; }
.app .mx-tx { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 18px; }
.app .mx-kick { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tint); }
.app .mx-tt { font-size: 18px; font-weight: 700; line-height: 1.28; letter-spacing: -.02em; }
.app .mx-ex { font-size: 13.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.app .mx-pk { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; width: 100%; box-sizing: border-box; padding: 16px 18px 18px; border-radius: 26px; color: var(--ink); font-family: inherit; text-align: left; cursor: pointer;
  background: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.28) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px -28px rgba(30,60,110,.45); }
.app .mx-pk::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(70% 60% at 0% 0%, color-mix(in srgb, var(--tint) 22%, transparent) 0%, transparent 70%), radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--tint) 14%, transparent) 0%, transparent 70%); }
.app .mx-pk::after { content: "\201D"; position: absolute; right: 14px; top: -14px; font-family: Georgia, serif; font-size: 110px; line-height: 1; color: var(--tint); opacity: .14; pointer-events: none; }
.app .mx-pk > * { position: relative; }
.app.mode-dark .mx-pk { background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 100%); border-color: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px -28px rgba(0,0,0,.6); }
.app .mx-pkh { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.app .mx-q { font-size: 17px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; overflow-wrap: anywhere; }
.app .mx-q .pk-sg.b { font-weight: 700; }
.app .mx-qar { font-family: 'Amiri', serif; font-size: 22px; line-height: 1.8; text-align: right; }
.app .mx-pkc { font-size: 11.5px; line-height: 1.45; }
.app .mx-pkc b { font-weight: 600; color: var(--ink); }
.app .mx-pkrow { display: flex; flex-direction: column; gap: 10px; }
.app .mx-pks { gap: 10px; margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; }
.app .mx-pk-s { flex: 0 0 250px; padding: 16px; border-radius: 22px; gap: 10px; }
.app .mx-pk-s .mx-q { font-size: 15px; }
.app .mx-pk-s .mx-pkc { margin-top: auto; }
.app .mx-ver { font-weight: 600; color: var(--tint); }