/* 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; }