/* Identitas Beyond the Verse untuk VersLens dan Meja Tahqiq: token warna yang sama dengan web app
   www.beyondtheverse.my.id (tema terang, sepia, gelap), kepala halaman dengan logo, dan tombol pil.
   Tema dibaca dari localStorage "beyond-the-verse:v1" (kunci theme), jadi pilihan tema ikut web app Beyond the Verse. */
:root,[data-theme=terang]{
  --bg:#fbfaf8;--surface:#f2f0ec;--raise:#fff;--ink:#141414;--muted:#62605c;--line:#e3dfd8;
  --brand:#f47521;--accent:#c24f06;--on-brand:#141414;--arabic:#111;--hl:#fde6d4;
  --ok:#1d6b45;--ok-soft:#e5f2ea;--warn:#8f600c;--warn-soft:#fbf0d8;--bad:#b42318;--bad-soft:#fdecea;--blue:#2c4c9c;--blue-soft:#e8eefa;
  --deep:#141414;--deep-ink:#f2f0ec;--deep-muted:#bdb9b2;--shadow:0 18px 44px -20px rgba(20,20,20,.38);color-scheme:light}
[data-theme=sepia]{
  --bg:#f4ecdf;--surface:#ebe0cd;--raise:#f9f3e9;--ink:#2a2118;--muted:#6e604f;--line:#dccdb4;
  --accent:#b04806;--on-brand:#1f170f;--arabic:#22190f;--hl:#f6d5b6;
  --ok:#2f6a3f;--ok-soft:#e1ebd6;--warn:#8a5a10;--warn-soft:#f3e2c2;--bad:#a3271b;--bad-soft:#f6dcd3;--blue:#2f4a8a;--blue-soft:#e3e3ec;
  --deep:#2a2118;--deep-ink:#f9f3e9;--deep-muted:#d6c7ae;--shadow:0 18px 44px -20px rgba(42,33,24,.4);color-scheme:light}
[data-theme=gelap]{
  --bg:#131313;--surface:#1c1c1c;--raise:#242424;--ink:#f2f0ec;--muted:#a3a09a;--line:#2e2e2e;
  --accent:#ff8c42;--on-brand:#141414;--arabic:#fbf7f0;--hl:#4a2a14;
  --ok:#7fd1a3;--ok-soft:#173326;--warn:#f0c26b;--warn-soft:#3a2e15;--bad:#ff8a7a;--bad-soft:#3b1a16;--blue:#9db6ff;--blue-soft:#1d2540;
  --deep:#0b0b0b;--deep-ink:#f2f0ec;--deep-muted:#a3a09a;--shadow:0 18px 44px -18px rgba(0,0,0,.7);color-scheme:dark}
html{
  /* nama lama di VersLens, dipetakan ke token Beyond the Verse */
  --paper:var(--bg);--panel:var(--surface);--ink-2:var(--muted);--accent-soft:var(--hl);--orange:var(--brand);--gold:var(--accent);--gold-soft:var(--hl);
  --f-quran:"Scheherazade New","Amiri","Noto Naskh Arabic","Traditional Arabic",serif;
  --f-ar:"Amiri","Scheherazade New","Noto Naskh Arabic",serif;
  --f-read:"Literata",Georgia,"Times New Roman",serif;
  --f-ui:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* Kepala halaman: sama dengan web app Beyond the Verse (tinggi 56/64px, latar 90% + blur, garis bawah). */
.btv-top{position:sticky;top:0;z-index:40;border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent);background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btv-top .in{display:flex;align-items:center;gap:4px;height:56px;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));min-width:0}
@media (min-width:640px){.btv-top .in{height:64px;gap:6px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}}
.logo{display:block;flex:none;padding:4px;border-radius:8px;color:var(--ink)}
.wm{position:relative;display:block;height:30px;aspect-ratio:2.585}
@media (min-width:640px){.wm{height:34px}}
.wordmark{position:absolute;inset:0;-webkit-mask:url(/brand/wordmark-mask.png) center/contain no-repeat;mask:url(/brand/wordmark-mask.png) center/contain no-repeat;background:currentColor}
.wm img{position:absolute;left:39.66%;top:0;width:15.72%;height:auto}
.prod{display:inline-flex;align-items:center;height:26px;margin-left:6px;padding-left:12px;border-left:1px solid var(--line);font:700 16px/1 var(--f-ui);letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.prod b{font-weight:700;color:var(--brand)}
.prod small{margin-left:8px;font:600 10.5px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.spacer{flex:1;min-width:0}

/* Tombol pil (rounded-full, tinggi 36px, 13px medium). */
.pb{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:500 13px/1 var(--f-ui);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.pb:hover{background:var(--surface)}
.pb svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pb.ic{width:36px;padding:0;border-color:transparent;color:var(--muted)}.pb.ic:hover{color:var(--ink)}
.pb.pri{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:600}.pb.pri:hover{filter:brightness(1.05)}
.pb.dark{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tema svg{display:none}
[data-theme=terang] .tema .i-terang,:root:not([data-theme]) .tema .i-terang,[data-theme=sepia] .tema .i-sepia,[data-theme=gelap] .tema .i-gelap{display:block}
.eyebrow{margin:0;font:600 12px/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}