/* ═══════════════════════════════════════════════
   WAQAF.CO — WARM EDITION · shared component system
   Parchment · sage green · antique gold · clay
   Cormorant Garamond (display) · DM Sans (ui) · Amiri (ar)
   Companion to ibadah-harian.css (Ibadah screen reuses it).
   ═══════════════════════════════════════════════ */

.wm-app {
  --paper:    #F1EADB;
  --cream:    #FBF7EF;
  --white:    #FFFFFF;
  --ink:      #2C2A22;
  --ink2:     #736E60;
  --ink3:     #A39C8A;
  --line:     #ECE4D3;
  --line2:    #F2ECDE;
  --green:    #3C6B54;
  --greenD:   #2E5642;
  --greenMid: #5E8A6F;
  --greenBg:  #E7EFE7;
  --gold:     #B08A45;
  --goldD:    #8E6E33;
  --goldBg:   #F4EBD4;
  --clay:     #A9724E;
  --clayBg:   #F1E4D8;
  --serif:    'Cormorant Garamond', Georgia, serif;
  --ui:       'DM Sans', system-ui, sans-serif;
  --ar:       'Amiri', serif;
  --ar-scale: 1;   /* Teks Arab size (Tetapan > Saiz Teks) */
  --ui-scale: 1;   /* reading-text size (translit/terjemahan/nota) */
  font-family: var(--ui);
  color: var(--ink);
  background: var(--paper);
}

/* ── screens ── */
.wm-screen { display: none; flex-direction: column; height: 100%; min-height: 0; background: var(--paper); }
.wm-screen.active { display: flex; }
.wm-scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
}

/* ── motif helper ── */
.wm-motif {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cg fill='none' stroke='%23B08A45' stroke-opacity='0.08' stroke-width='1'%3E%3Crect x='9' y='9' width='40' height='40'/%3E%3Crect x='9' y='9' width='40' height='40' transform='rotate(45 29 29)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 58px 58px;
}

/* ── deep header (Bacaan / Solat / Tetapan) ── */
.wm-header {
  position: sticky; top: 0; z-index: 10; overflow: hidden;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 22px 20px;
  background: linear-gradient(165deg, var(--cream) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
}
.wm-header-inner { position: relative; }
.wm-header-ar { font-family: var(--ar); font-size: 26px; color: var(--gold); line-height: 1; direction: rtl; }
.wm-header-title { font-family: var(--serif); font-size: 34px; font-weight: 700; color: var(--ink); line-height: 1; margin-top: 8px; letter-spacing: 0.3px; }
.wm-header-sub { font-family: var(--ui); font-size: 13px; color: var(--ink2); margin-top: 7px; }

/* ── back pill (drill-in screens) ── */
.wm-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px 6px 9px; border-radius: 20px;
  background: var(--white); border: 1px solid var(--line);
  font-family: var(--ui); font-size: 12.5px; font-weight: 600; color: var(--ink2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  position: relative; z-index: 2;
}
.wm-back svg { width: 13px; height: 13px; }
.wm-back:active { transform: scale(0.97); }

/* ── musafir blocks ── */
.wm-note {
  position: relative; overflow: hidden;
  margin: 12px 18px 0; padding: 16px 18px;
  background: linear-gradient(160deg, #2E5642 0%, #3C6B54 60%, #4A7A60 100%);
  border-radius: 20px; color: #F4EBD4;
  box-shadow: 0 12px 28px rgba(46,86,66,0.24);
}
.wm-note-ar { font-family: var(--ar); font-size: 20px; color: #F4EBD4; direction: rtl; line-height: 1.6; }
.wm-note-tx { font-family: var(--ui); font-size: 13px; line-height: 1.65; color: rgba(244,235,212,0.92); margin-top: 8px; }
.wm-note-tx b { color: #fff; font-weight: 700; }

.wm-rakaat { display: flex; gap: 7px; margin: 12px 18px 0; }
.wm-rk {
  flex: 1; text-align: center; padding: 12px 4px 11px; border-radius: 14px;
  background: var(--white); border: 1px solid var(--line);
}
.wm-rk.cut { background: var(--goldBg); border-color: var(--goldBg); }
.wm-rk-n { font-family: var(--ui); font-size: 10.5px; font-weight: 600; color: var(--ink3); }
.wm-rk.cut .wm-rk-n { color: var(--goldD); }
.wm-rk-v { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--ink); margin-top: 3px; line-height: 1; }
.wm-rk.cut .wm-rk-v { color: var(--goldD); }
.wm-rk-was { font-family: var(--ui); font-size: 9px; color: var(--ink3); margin-top: 3px; }
.wm-rk-was s { opacity: 0.8; }

.wm-pair { display: flex; gap: 10px; margin: 12px 18px 0; }
.wm-pair-card {
  flex: 1; position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: 15px 15px 16px;
}
.wm-pair-tag { font-family: var(--ui); font-size: 9.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; }
.wm-pair-card.taqdim .wm-pair-tag { color: var(--green); }
.wm-pair-card.takhir .wm-pair-tag { color: var(--clay); }
.wm-pair-name { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 5px; line-height: 1.15; }
.wm-pair-desc { font-family: var(--ui); font-size: 12.5px; color: var(--ink3); margin-top: 6px; line-height: 1.5; }

/* Masjid directory */
.wm-msq-search { display: flex; align-items: center; gap: 9px; margin: 14px 18px 0; padding: 11px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.wm-msq-search svg { width: 17px; height: 17px; color: var(--ink3); flex-shrink: 0; }
.wm-msq-search input { flex: 1; border: none; background: none; outline: none; font-family: var(--ui); font-size: 13.5px; color: var(--ink); -webkit-appearance: none; }
.wm-msq-filters { display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 13px 18px 5px; scrollbar-width: none; }
.wm-msq-filters::-webkit-scrollbar { display: none; }
.wm-msq-chip { flex-shrink: 0; border: 1px solid var(--line); background: var(--white); border-radius: 20px; padding: 7px 13px; font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--ink2); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.wm-msq-chip span { color: var(--ink3); font-weight: 700; font-size: 11px; }
.wm-msq-chip.on { background: var(--green); color: #fff; border-color: var(--green); }
.wm-msq-chip.on span { color: rgba(255,255,255,0.7); }
.wm-msq-dist { font-family: var(--ui); font-size: 11.5px; font-weight: 700; color: var(--green); flex-shrink: 0; white-space: nowrap; }
.wm-msq-empty { font-family: var(--ui); font-size: 13px; color: var(--ink3); text-align: center; padding: 34px 20px; }

/* Haji tabs + manasik prose */
.wm-haji-tabs { display: flex; gap: 5px; margin: 14px 18px 6px; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.wm-haji-tab { flex: 1; padding: 9px 6px; border: none; background: transparent; border-radius: 10px; font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--ink2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s; }
.wm-haji-tab.on { background: var(--green); color: #fff; }
.wm-haji-prose { font-family: var(--ui); font-size: 12.5px; line-height: 1.75; color: var(--ink2); padding: 3px 0; }
.wm-haji-prose strong { color: var(--ink); font-weight: 700; }
.wm-haji-link .wm-doa-hdr { cursor: pointer; }
.wm-haji-link .wm-doa-title { color: var(--green); }
.wm-hrm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 18px 0; }
.wm-hrm { border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; }
.wm-hrm.mk { background: var(--goldBg); border-color: var(--goldBg); }
.wm-hrm.md { background: var(--greenBg); border-color: var(--greenBg); }
.wm-hrm-t { font-family: var(--ui); font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 8px; }
.wm-hrm.mk .wm-hrm-t { color: var(--goldD); }
.wm-hrm.md .wm-hrm-t { color: var(--greenD); }
.wm-hrm-r { display: flex; justify-content: space-between; font-family: var(--ui); font-size: 12px; color: var(--ink2); padding: 2.5px 0; }
.wm-hrm-r b { color: var(--ink); font-weight: 700; }
.wm-hrm-src { font-family: var(--ui); font-size: 10px; font-style: italic; color: var(--ink3); text-align: center; margin: 8px 18px 0; }
.wm-hrm-t svg { width: 14px; height: 14px; vertical-align: -2px; }
.wm-haji-glyph { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--goldBg); color: var(--goldD); display: flex; align-items: center; justify-content: center; margin-right: 11px; }
.wm-haji-glyph svg { width: 17px; height: 17px; }
.wm-arbain { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 6px 18px 0; }
.wm-arbain-desc { font-family: var(--ui); font-size: 12px; color: var(--ink2); line-height: 1.6; margin-bottom: 10px; }
.wm-arbain-n { font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1; margin: 4px 0; }
.wm-arbain-n.done { color: var(--gold); }
.wm-arbain-n span { font-size: 20px; color: var(--ink3); font-weight: 600; }
.wm-arbain-bar { height: 7px; background: var(--line); border-radius: 6px; overflow: hidden; margin: 14px 0; }
.wm-arbain-fill { height: 100%; background: var(--greenMid); border-radius: 6px; transition: width .3s; }
.wm-arbain-bar.done .wm-arbain-fill { background: var(--gold); }
.wm-arbain-btns { display: flex; gap: 8px; }
.wm-arbain-add { flex: 2; padding: 11px; background: var(--green); color: #fff; border: none; border-radius: 12px; font-family: var(--ui); font-size: 13px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wm-arbain-add.done { background: var(--line2); color: var(--ink3); cursor: default; }
.wm-arbain-reset { flex: 1; padding: 11px; background: transparent; color: var(--ink2); border: 1px solid var(--line); border-radius: 12px; font-family: var(--ui); font-size: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* Musafir — Panduan & Syarat cards */
.wm-msf-syarat { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: 0 22px 9px; }
.wm-msf-syarat-t { font-family: var(--ui); font-size: 12.5px; font-weight: 700; color: var(--green); margin-bottom: 7px; }
.wm-msf-syarat-b { font-family: var(--ui); font-size: 13px; color: var(--ink2); line-height: 1.75; }
.wm-msf-syarat-b strong, .wm-msf-syarat-b b { color: var(--ink); font-weight: 700; }

/* ── topbar (home) ── */
.wm-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 4px;
}
.wm-brand { display: flex; align-items: baseline; gap: 2px; }
.wm-brand-jawi { font-family: var(--ar); font-size: 24px; color: var(--gold); line-height: 1; }
.wm-brand-dot { font-family: var(--ui); font-size: 13px; font-weight: 700; color: var(--ink3); }
.wm-loc {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px;
  background: var(--white); border: 1px solid var(--line);
  font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--ink2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wm-loc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--greenMid); }
.wm-top-right { display: flex; align-items: center; gap: 9px; }

/* Apa Baru — home pill + bottom sheet */
.wm-wn-pill { display: flex; align-items: center; gap: 8px; margin: 8px 18px 0; padding: 10px 14px; background: var(--goldBg); border: 1px solid var(--gold); border-radius: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wm-wn-pill svg:first-child { width: 17px; height: 17px; color: var(--goldD); flex-shrink: 0; }
.wm-wn-pill span { flex: 1; font-family: var(--ui); font-size: 12.5px; font-weight: 700; color: var(--goldD); }
.wm-wn-pill svg:last-child { color: var(--gold); }
.wm-wn-backdrop { position: absolute; inset: 0; z-index: 150; background: rgba(40,35,25,0.4); opacity: 0; pointer-events: none; transition: opacity .25s; }
.wm-wn-backdrop.show { opacity: 1; pointer-events: auto; }
.wm-wn-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 151; background: var(--paper); border-radius: 24px 24px 0 0; padding: 8px 18px calc(env(safe-area-inset-bottom,0px) + 18px); box-shadow: 0 -10px 40px rgba(40,35,25,0.2); transform: translateY(102%); transition: transform .3s cubic-bezier(.4,0,.2,1); max-height: 80%; overflow-y: auto; }
.wm-wn-sheet.show { transform: translateY(0); }
.wm-wn-handle { width: 38px; height: 4px; border-radius: 3px; background: var(--line2); margin: 4px auto 14px; }
.wm-wn-head { margin-bottom: 12px; }
.wm-wn-h { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--ink); }
.wm-wn-sub { font-family: var(--ui); font-size: 12px; color: var(--ink2); margin-top: 2px; }
.wm-wn-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wm-wn-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.wm-wn-ic svg { width: 20px; height: 20px; }
.wm-wn-ic.sage { background: var(--greenBg); color: var(--green); }
.wm-wn-ic.gold { background: var(--goldBg); color: var(--goldD); }
.wm-wn-ic.green { background: var(--greenBg); color: var(--greenD); }
.wm-wn-ib { flex: 1; min-width: 0; }
.wm-wn-it { font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--ink); }
.wm-wn-baru { font-size: 8.5px; font-weight: 800; letter-spacing: 0.5px; color: #fff; background: var(--gold); padding: 1px 5px; border-radius: 5px; vertical-align: middle; }
.wm-wn-is { font-family: var(--ui); font-size: 12px; color: var(--ink2); line-height: 1.5; margin-top: 3px; }
.wm-wn-id { font-family: var(--ui); font-size: 10.5px; color: var(--ink3); margin-top: 4px; }
.wm-wn-empty { font-family: var(--ui); font-size: 13px; color: var(--ink3); text-align: center; padding: 30px; }
.wm-wn-dismiss { width: 100%; margin-top: 16px; padding: 12px; border: 1px solid var(--line); background: transparent; border-radius: 14px; font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--ink2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wm-wx { display: inline-flex; align-items: center; gap: 4px; font-family: var(--ui); font-size: 12.5px; color: var(--ink2); }
.wm-wx svg { width: 17px; height: 17px; color: var(--gold); }
.wm-wx b { font-weight: 700; color: var(--ink); }

/* ── section divider ── */
.wm-divider {
  display: flex; align-items: center; gap: 11px;
  padding: 22px 22px 4px;
}
.wm-divider-tx { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.wm-divider-ln { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(176,138,69,0.3), transparent); }

/* ── star rule ── */
.wm-rule { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.wm-rule-ln { flex: 1; height: 1px; }
.wm-rule-ln.l { background: linear-gradient(90deg, transparent, rgba(176,138,69,0.35)); }
.wm-rule-ln.r { background: linear-gradient(90deg, rgba(176,138,69,0.35), transparent); }
.wm-rule-star { width: 11px; height: 11px; color: var(--gold); flex-shrink: 0; }

/* ── chips ── */
.wm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border-radius: 20px;
  font-family: var(--ui); font-size: 11.5px; font-weight: 600;
}
.wm-chip-dot { width: 5px; height: 5px; border-radius: 50%; }
.wm-chip.gold  { background: var(--goldBg);  color: var(--goldD); }  .wm-chip.gold .wm-chip-dot { background: var(--gold); }
.wm-chip.green { background: var(--greenBg); color: var(--greenD); } .wm-chip.green .wm-chip-dot { background: var(--green); }
.wm-chip.clay  { background: var(--clayBg);  color: var(--clay); }   .wm-chip.clay .wm-chip-dot { background: var(--clay); }

/* ── list group + rows ── */
.wm-group {
  margin: 12px 18px 0;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 20px; padding: 0 16px; overflow: hidden;
}
.wm-row {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 0; border-bottom: 1px solid var(--line2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wm-row:last-child { border-bottom: none; }
.wm-glyph {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--goldBg); color: var(--gold);
}
.wm-glyph svg { width: 21px; height: 21px; }
.wm-glyph.green { background: var(--greenBg); color: var(--green); }
.wm-glyph.gold  { background: var(--goldBg);  color: var(--goldD); }
.wm-glyph.clay  { background: var(--clayBg);  color: var(--clay); }
.wm-glyph.sage  { background: #E9F0EC; color: var(--greenMid); }
.wm-row-body { flex: 1; min-width: 0; }
.wm-row-name { font-family: var(--ui); font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.3; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wm-row-desc { font-family: var(--ui); font-size: 13px; color: var(--ink2); margin-top: 3px; line-height: 1.4; }
.wm-row-badge {
  flex-shrink: 0; min-width: 26px; text-align: center;
  font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--gold);
  padding: 2px 8px; border-radius: 9px; background: var(--goldBg);
}
.wm-chev { flex-shrink: 0; color: var(--ink3); }
.wm-new {
  font-family: var(--ui); font-size: 8.5px; font-weight: 800; letter-spacing: 0.6px;
  color: var(--clay); background: var(--clayBg); padding: 2px 6px; border-radius: 5px;
}

/* ── toggle ── */
.wm-toggle {
  width: 44px; height: 26px; border-radius: 14px; flex-shrink: 0;
  border: none; background: #DAD3C6; position: relative; cursor: pointer;
  transition: background 0.2s ease; -webkit-tap-highlight-color: transparent;
}
.wm-toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.2s ease;
}
.wm-toggle.on { background: var(--green); }
.wm-toggle.on::after { transform: translateX(18px); }

/* ── generic raised card ── */
.wm-card {
  position: relative; margin: 14px 18px 0;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 22px; padding: 18px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(60,50,30,0.05);
}

/* ════════ HOME ════════ */
/* hero — next prayer focal */
.wm-hero {
  position: relative; overflow: hidden;
  margin: 12px 18px 0; padding: 20px 20px 18px;
  background: linear-gradient(160deg, #2E5642 0%, #3C6B54 55%, #4A7A60 100%);
  border-radius: 24px; color: #fff;
  box-shadow: 0 14px 32px rgba(46,86,66,0.28);
}
.wm-hero-motif {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23F4EBD4' stroke-opacity='0.10' stroke-width='1'%3E%3Crect x='9' y='9' width='38' height='38'/%3E%3Crect x='9' y='9' width='38' height='38' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
}
.wm-hero-in { position: relative; }
.wm-hero-eye { font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(244,235,212,0.75); }
.wm-hero-now { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; }
.wm-hero-prayer { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1; color: #F4EBD4; }
.wm-hero-time { font-family: var(--serif); font-size: 52px; font-weight: 700; line-height: 0.95; letter-spacing: 0.5px; color: #fff; margin-top: 6px; }
.wm-hero-count { font-family: var(--ui); font-size: 12.5px; color: rgba(255,255,255,0.85); margin-top: 12px; }
.wm-hero-count b { color: #F4EBD4; font-weight: 700; }
.wm-hero-bar { height: 5px; border-radius: 4px; background: rgba(255,255,255,0.18); margin-top: 8px; overflow: hidden; }
.wm-hero-fill { height: 100%; border-radius: 4px; background: var(--gold); }
.wm-hero-date { font-family: var(--ui); font-size: 13px; color: rgba(244,235,212,0.7); margin-top: 12px; display: flex; gap: 8px; }

/* prayer strip */
.wm-prayers { display: flex; gap: 7px; margin: 16px 18px 0; }
.wm-prayer {
  flex: 1; text-align: center; padding: 12px 4px 11px; border-radius: 16px;
  background: var(--white); border: 1px solid var(--line); position: relative;
  transition: transform .12s ease;
}
.wm-prayer:active { transform: scale(0.97); }
.wm-prayer.now {
  background: linear-gradient(168deg, #FBF1D8 0%, var(--goldBg) 100%);
  border-color: #E6CF9A;
  box-shadow: 0 6px 16px rgba(176,138,69,0.18);
}
/* gold accent bar on top of the active waktu */
.wm-prayer.now::before {
  content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--gold);
}
.wm-prayer-n { font-family: var(--ui); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink3); }
.wm-prayer.now .wm-prayer-n { color: var(--goldD); }
.wm-prayer-t { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 6px; letter-spacing: 0.3px; }
.wm-prayer.now .wm-prayer-t { color: var(--goldD); }

/* ── Solat: interactive waktu tabs + per-waktu fardu niat ── */
.wm-wt-tabs { display: flex; gap: 7px; margin: 14px 18px 0; }
.wm-wt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 2px; border-radius: 14px; cursor: pointer;
  background: var(--white); border: 1px solid var(--line);
  -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, border-color 0.15s ease;
}
/* selected waktu = filled sage card — clearly stands out (goldBg blended into
   the cream page and looked card-less) */
.wm-wt.on { background: linear-gradient(165deg, var(--green) 0%, var(--greenD) 100%); border-color: var(--greenD); box-shadow: 0 5px 14px rgba(46,86,66,0.22); }
.wm-wt-n { font-family: var(--ui); font-size: 10.5px; font-weight: 600; color: var(--ink3); }
.wm-wt.on .wm-wt-n { color: rgba(244,235,212,0.82); }
.wm-wt-t { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--ink); }
.wm-wt.on .wm-wt-t { color: #fff; }
.wm-niat-card {
  margin: 12px 18px 0; background: var(--white); border: 1px solid var(--line);
  border-radius: 18px; padding: 16px 18px;
}
.wm-niat-lbl {
  font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--goldD); margin-bottom: 10px;
}
/* Ibadah Sekarang — time-aware card */
.wm-now {
  margin: 14px 18px 0; padding: 13px 16px 6px; border-radius: 18px;
  background: linear-gradient(160deg, #E9F0EC 0%, #FBF7EF 70%);
  border: 1px solid var(--line);
}
.wm-now-eye {
  font-family: var(--ui); font-size: 10.5px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--greenD); margin-bottom: 4px;
}
.wm-now-row {
  display: flex; align-items: center; gap: 13px; padding: 10px 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wm-now-row + .wm-now-row { border-top: 1px solid var(--line2); }

/* grid */
.wm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 18px 0; }
.wm-gcard {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: 20px;
  padding: 16px 16px 15px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.wm-gcard:active { transform: scale(0.98); }
.wm-gcard-ar { position: absolute; top: 12px; right: 14px; font-family: var(--ar); font-size: 19px; color: var(--line); }
.wm-gcard-glyph { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--greenBg); color: var(--green); }
.wm-gcard-glyph svg { width: 21px; height: 21px; }
.wm-gcard.g2 .wm-gcard-glyph { background: var(--goldBg); color: var(--goldD); }
.wm-gcard.g3 .wm-gcard-glyph { background: var(--clayBg); color: var(--clay); }
.wm-gcard.g4 .wm-gcard-glyph { background: #E9F0EC; color: var(--greenMid); }
.wm-gcard-name { font-family: var(--ui); font-size: 14.5px; font-weight: 600; color: var(--ink); margin-top: 13px; }
.wm-gcard-sub { font-family: var(--ui); font-size: 12.5px; color: var(--ink3); margin-top: 2px; }

/* daily doa card */
.wm-doa-eye { font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink3); }
.wm-doa-ar { font-family: var(--ar); font-size: calc(24px * var(--ar-scale, 1)); color: var(--green); line-height: 1.8; direction: rtl; text-align: center; margin-top: 12px; }
.wm-doa-tr { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink2); text-align: center; margin-top: 8px; line-height: 1.4; }
.wm-doa-ms { font-family: var(--ui); font-size: calc(13px * var(--ui-scale, 1)); color: var(--ink2); text-align: center; margin-top: 10px; line-height: 1.5; }

/* entry card (Ibadah Harian) on home */
.wm-entry {
  position: relative; display: flex; align-items: center; gap: 14px;
  margin: 14px 18px 0; padding: 16px 16px 16px 18px; border-radius: 20px;
  background: linear-gradient(135deg, #FBF7EF 0%, #F4EBD4 100%);
  border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(60,50,30,0.06);
  cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.wm-entry:active { transform: scale(0.985); }
.wm-entry-glyph { position: relative; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; background: var(--green); color: #F4EBD4; display: flex; align-items: center; justify-content: center; }
.wm-entry-glyph svg { width: 24px; height: 24px; }
.wm-entry-body { position: relative; flex: 1; min-width: 0; }
.wm-entry-title { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.05; }
.wm-entry-sub { font-family: var(--ui); font-size: 13px; color: var(--goldD); font-weight: 600; margin-top: 3px; }
.wm-entry-info { cursor: default; }
.wm-entry-info:active { transform: none; }

/* arwah tags (Tetapan) */
.wm-arwah-add { display: flex; gap: 8px; margin: 12px 18px 0; }
.wm-arwah-input { flex: 1; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; font-family: var(--ui); font-size: 14px; color: var(--ink); outline: none; }
.wm-arwah-input::placeholder { color: var(--ink3); }
.wm-arwah-btn { background: var(--green); color: #fff; border: none; border-radius: 12px; padding: 0 18px; font-family: var(--ui); font-size: 13px; font-weight: 700; cursor: pointer; }
.wm-arwah-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 18px 0; }
.wm-arwah-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 12px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); font-family: var(--ui); font-size: 13px; color: var(--ink); }
.wm-arwah-x { width: 18px; height: 18px; border-radius: 50%; background: var(--clayBg); color: var(--clay); border: none; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* footer note */
.wm-foot { text-align: center; padding: 22px 24px 16px; }
.wm-foot-ar { font-family: var(--ar); font-size: 19px; color: var(--ink); line-height: 1.8; direction: rtl; }
.wm-foot-ms { font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--ink2); margin-top: 8px; line-height: 1.5; }
.wm-foot-v { font-family: var(--ui); font-size: 11px; color: var(--ink3); margin-top: 14px; letter-spacing: 0.4px; }

/* ── ✦ Sekitar Anda — collapsible context panel (gradient pill header + white body) ── */
.wm-sekitar {
  margin: 14px 18px 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: linear-gradient(135deg, #FBF7EF 0%, #F4EBD4 100%);
  box-shadow: 0 6px 18px rgba(60,50,30,0.06);
}
.wm-sekitar-hdr {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 16px 16px 18px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wm-sekitar-chev { flex-shrink: 0; color: var(--ink3); font-size: 14px; transition: transform 0.2s ease; }
.wm-sekitar.open .wm-sekitar-chev { transform: rotate(180deg); }
.wm-sekitar-body {
  display: none; background: var(--white); padding: 4px 16px 10px;
  border-top: 1px solid var(--line);
}
.wm-sekitar.open .wm-sekitar-body { display: block; }
.wm-sekitar-lbl {
  font-family: var(--ui); font-size: 10px; font-weight: 800; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--goldD); margin-top: 4px;
  padding-top: 12px; border-top: 1px solid var(--line2);
}
.wm-sekitar-body .wm-row { padding: 12px 0; }
.wm-sekitar-body .wm-row:last-child { border-bottom: none; }

/* ════════ BOTTOM NAV ════════ */
.wm-nav {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 100;
  display: flex; padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: rgba(251,247,239,0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.wm-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: none; background: none; cursor: pointer; padding: 3px 0; color: var(--ink3);
  -webkit-tap-highlight-color: transparent;
}
.wm-nav-item.active { color: var(--green); }
.wm-nav-ic { width: 22px; height: 22px; }
.wm-nav-lbl { font-family: var(--ui); font-size: 10px; font-weight: 500; letter-spacing: 0.1px; }
.wm-nav-item.active .wm-nav-lbl { font-weight: 700; }
.wm-nav-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--green); margin-top: -2px; }

/* ── static content pages: Dasar Privasi + Sumber & Rujukan (Kredit) ──
   Content is ported verbatim from prod (inline styles using prod tokens).
   Remap prod custom props → warm tokens so the inline styles render warm. */
#scr-privasi, #scr-kredit {
  --charcoal:    var(--ink);
  --text-mid:    var(--ink2);
  --text-muted:  var(--ink3);
  --sage:        var(--green);
  --sage-bg:     var(--greenBg);
  --sage-border: #CFE0D0;
  --surface:     var(--cream);
  --border:      var(--line);
  --font-ui:     var(--ui);
}
.wm-page { font-family: var(--ui); color: var(--ink); }
.wm-page strong { color: var(--ink); font-weight: 700; }
.wm-page a { color: var(--green); }
.wm-page p { font-family: var(--ui); }

.wm-page .kredit-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--cream); border: 0.5px solid var(--line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
}
.wm-page .kredit-ic {
  font-size: 20px; line-height: 1; width: 36px; height: 36px;
  border-radius: 9px; background: var(--greenBg); color: var(--green);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wm-page .kredit-ic svg { width: 19px; height: 19px; }
.wm-page .kredit-body { flex: 1; min-width: 0; }
.wm-page .kredit-title {
  font-family: var(--ui); font-size: 13.5px; font-weight: 600;
  color: var(--ink); line-height: 1.35; margin-bottom: 3px;
}
.wm-page .kredit-org {
  font-family: var(--ui); font-size: 11.5px; font-weight: 600;
  color: var(--green); margin-bottom: 2px;
}
.wm-page .kredit-sub {
  font-family: var(--ui); font-size: 11px; color: var(--ink3); margin-bottom: 6px;
}
.wm-page .kredit-use {
  font-family: var(--ui); font-size: 11.5px; color: var(--ink2);
  line-height: 1.5; padding-top: 6px; border-top: 0.5px dashed var(--line);
}

/* ── Saiz Teks segmented control (Tetapan) ── */
.wm-size-seg {
  display: flex; gap: 6px; width: 100%;
}
.wm-size-opt {
  flex: 1; padding: 9px 0; border-radius: 9px;
  border: 1px solid var(--line); background: var(--cream);
  font-family: var(--ui); font-weight: 700; color: var(--ink2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.wm-size-opt.on {
  background: var(--green); border-color: var(--green); color: #fff;
}
.wm-size-opt:active { transform: scale(0.97); }
.wm-size-prev {
  margin: 4px 22px 0; padding: 14px 16px;
  background: var(--cream); border: 0.5px solid var(--line); border-radius: 12px;
  text-align: center;
}
.wm-size-prev .wm-doa-ar { color: var(--ink); }

/* ── Backup Awan sheet (reuses .wm-wn-* sheet shell) ── */
.wm-bk-head { margin-bottom: 14px; }
.wm-bk-h { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--ink); }
.wm-bk-sub { font-family: var(--ui); font-size: 12.5px; color: var(--ink2); line-height: 1.5; margin-top: 5px; }
.wm-bk-code-card {
  background: var(--greenBg); border: 1px solid #CFE0D0; border-radius: 16px;
  padding: 16px; text-align: center; margin-bottom: 12px;
}
.wm-bk-code-lbl { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--green); }
.wm-bk-code { font-family: 'DM Sans', monospace; font-size: 24px; font-weight: 800; letter-spacing: 1.5px; color: var(--greenD); margin: 8px 0 12px; }
.wm-bk-copy {
  border: 1px solid var(--green); background: transparent; color: var(--green);
  border-radius: 12px; padding: 8px 18px; font-family: var(--ui); font-size: 12.5px; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wm-bk-sync { font-family: var(--ui); font-size: 11.5px; color: var(--ink3); margin-top: 12px; }
.wm-bk-btn {
  width: 100%; padding: 13px; border-radius: 14px; margin-bottom: 9px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  font-family: var(--ui); font-size: 13.5px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wm-bk-btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.wm-bk-btn:active { transform: scale(0.98); }
.wm-bk-warn { font-family: var(--ui); font-size: 11px; color: var(--clay); line-height: 1.5; margin: 4px 2px 0; }
.wm-bk-restore { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.wm-bk-restore-lbl { font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 9px; }
.wm-bk-restore-row { display: flex; gap: 8px; }
.wm-bk-input {
  flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
  font-family: 'DM Sans', monospace; font-size: 14px; font-weight: 700; letter-spacing: 1px;
  color: var(--ink); background: var(--cream); outline: none; -webkit-appearance: none; text-transform: uppercase;
}
.wm-bk-input::placeholder { color: var(--ink3); font-weight: 500; letter-spacing: 0.5px; }
.wm-bk-restore-btn {
  flex-shrink: 0; border: 1px solid var(--gold); background: var(--goldBg); color: var(--goldD);
  border-radius: 12px; padding: 0 18px; font-family: var(--ui); font-size: 13px; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* ── arwah gender picker (Tetapan) ── */
.wm-arwah-gender { display: flex; gap: 7px; margin: 9px 22px 0; }
.wm-ag-opt {
  flex: 1; padding: 9px 6px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--cream);
  font-family: var(--ui); font-size: 11.5px; font-weight: 600; color: var(--ink2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.wm-ag-opt.on { background: var(--green); border-color: var(--green); color: #fff; }
.wm-ag-opt:active { transform: scale(0.98); }

/* ── push pre-azan dropdown (Tetapan Notifikasi) ── */
.wm-push-sel {
  flex-shrink: 0; border: 1px solid var(--line); background: var(--cream);
  color: var(--ink); padding: 6px 9px; border-radius: 9px;
  font-family: var(--ui); font-size: 12.5px; font-weight: 600;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23736E60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; padding-right: 26px;
}

/* ── Transliterasi Rumi + Terjemahan Melayu toggles (Tetapan › Bacaan) ──
   Default OFF = Arabic-only (matches prod). The toggles add/remove these
   classes on .wm-app to reveal romanisation / translation everywhere at once
   (readers, doa, solat niat, sekolah, tarawih). :has hides the dangling
   "Sebutan"/"Terjemahan" eyebrow label when its row is hidden.
   Scoped to cards that actually contain Arabic (:has) so Malay-only cards —
   e.g. the adhkar intro — keep their text. The Saiz Teks preview uses bare
   .wm-doa-tr/.wm-doa-ms (no card wrapper) so it's never hidden. */
.wm-app.wm-hide-translit .wm-rd-card:has(.wm-rd-ar) .wm-rd-translit,
.wm-app.wm-hide-translit :is(.wm-doa-card, .wm-niat-card):has(.wm-doa-ar) .wm-doa-tr,
.wm-app.wm-hide-translit :is(.wm-doa-card, .wm-niat-card):has(.wm-doa-ar) .wm-doa-lbl:has(+ .wm-doa-tr),
.wm-app.wm-hide-translit .ih-focal-translit { display: none; }
.wm-app.wm-hide-malay .wm-rd-card:has(.wm-rd-ar) .wm-rd-ms,
.wm-app.wm-hide-malay :is(.wm-doa-card, .wm-niat-card):has(.wm-doa-ar) .wm-doa-ms,
.wm-app.wm-hide-malay :is(.wm-doa-card, .wm-niat-card):has(.wm-doa-ar) .wm-doa-lbl:has(+ .wm-doa-ms) { display: none; }
/* English meaning — same mechanism as Malay, toggled by the Terjemahan picker */
.wm-app.wm-hide-en .wm-rd-card:has(.wm-rd-ar) .wm-rd-en,
.wm-app.wm-hide-en :is(.wm-doa-card, .wm-niat-card):has(.wm-doa-ar) .wm-doa-en,
.wm-app.wm-hide-en :is(.wm-doa-card, .wm-niat-card):has(.wm-doa-ar) .wm-doa-lbl:has(+ .wm-doa-en) { display: none; }
/* Tawaf guide always shows Malay; its English line follows the Terjemahan toggle */
.wm-app.wm-hide-en #scr-tawaf .wm-doa-en { display: none; }
/* Terjemahan segmented picker (Tetapan › Bacaan) */
.wm-seg { display: flex; gap: 4px; width: 100%; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
.wm-seg-btn { flex: 1; border: none; background: transparent; border-radius: 9px; padding: 8px 4px; font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--ink2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s; }
.wm-seg-btn.on { background: var(--green); color: #fff; }
.wm-seg-btn:active { transform: scale(.96); }

/* ── Responsive autoscale: iPad (≥768) + desktop (≥1024) ──
   The shell widens (index.html: 600/680) and everything inside it — grid
   cards, hero, bottom nav, notification sheets — scales up together. The nav
   and sheets are position:absolute within .app-shell, so they follow the
   wider column automatically; here we just bump their type to match. */
@media (min-width: 768px) {
  .wm-gcard-ar { font-size: 24px; }
  .wm-gcard-name { font-size: 15.5px; }
  .wm-gcard-sub { font-size: 13px; }
  .wm-gcard-glyph { width: 46px; height: 46px; }
  .wm-hero-prayer { font-size: 32px; }
  .wm-hero-time { font-size: 60px; }
  .wm-hero-eye { font-size: 12px; }
  .wm-hero-count { font-size: 13.5px; }
  .wm-nav-ic { width: 25px; height: 25px; }
  .wm-nav-lbl { font-size: 11px; }
  .wm-header-title { font-size: 38px; }
  .wm-header-ar { font-size: 29px; }
  .wm-wn-h, .wm-bk-h { font-size: 26px; }
  .wm-wn-sub, .wm-bk-sub { font-size: 13.5px; }
}
@media (min-width: 1024px) {
  .wm-gcard-ar { font-size: 28px; }
  .wm-hero-time { font-size: 66px; }
  .wm-header-title { font-size: 42px; }
}

/* ── Smart "live" tiles: pulse the faint Arabic word (not a dot) ──
   When a Panduan Ibadah tile is contextually live, its background Arabic
   gently breathes in the tone colour — subtle, since the script is opaque. */
.wm-gcard-live { border-color: #E6CF9A; }
.wm-gcard-live .wm-gcard-ar { animation: wm-arpulse 1.9s ease-in-out infinite; }
.wm-gcard-live.gold .wm-gcard-ar { color: var(--gold); }
.wm-gcard-live.red  .wm-gcard-ar { color: #C0392B; }
@keyframes wm-arpulse { 0%,100% { opacity: 0.22; } 50% { opacity: 0.62; } }
/* whole-card breathing halo so a live tile is unmistakably pulsing */
.wm-gcard-live.gold { animation: wm-cardpulse 2.1s ease-in-out infinite; }
.wm-gcard-live.red  { animation: wm-cardpulse-red 2.1s ease-in-out infinite; }
@keyframes wm-cardpulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(176,138,69,0); border-color: #E6CF9A; }
  50%     { box-shadow: 0 0 0 4px rgba(176,138,69,0.18); border-color: var(--gold); }
}
@keyframes wm-cardpulse-red {
  0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); border-color: #E2B8AE; }
  50%     { box-shadow: 0 0 0 4px rgba(192,57,43,0.16); border-color: #C0392B; }
}
/* iqamah countdown bar on the Solat tile */
.wm-gcard-bar { height: 4px; background: var(--line); border-radius: 3px; margin-top: 11px; overflow: hidden; }
.wm-gcard-bar-fill { height: 100%; background: var(--gold); border-radius: 3px; transition: width 1s linear; }
@media (prefers-reduced-motion: reduce) {
  .wm-gcard-live .wm-gcard-ar { animation: none; opacity: 0.5; }
  .wm-gcard-live.gold, .wm-gcard-live.red { animation: none; border-color: var(--gold); }
  .wm-prayer.now::before { animation: none; }
  .wm-rloader-ring { animation: none; }
}

/* ── pull-to-refresh (home) ── */
#scr-home, #scr-bacaan, #scr-solat, #scr-ibadah, #scr-tetapan { position: relative; }
#scr-home #wm-home-body, #scr-bacaan #wm-bacaan-body, #scr-solat #wm-solat-body,
#scr-ibadah #ih-body, #scr-tetapan #wm-tetapan-body { position: relative; z-index: 1; background: var(--paper); }
.wm-ptr {
  position: absolute; top: 0; left: 0; right: 0; height: 48px; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--green); opacity: 0; pointer-events: none;
}
.wm-ptr svg { width: 22px; height: 22px; transition: transform .1s linear; }
.wm-ptr.ready { color: var(--gold); }
.wm-ptr.spinning svg { animation: wm-ptr-spin .75s linear infinite; }
@keyframes wm-ptr-spin { to { transform: rotate(360deg); } }

/* branded centre refresh loader — وقف disc with an orbiting gold arc */
.wm-rloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(241,234,219,0.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.wm-rloader.show { opacity: 1; pointer-events: auto; }
.wm-rloader-box { position: relative; width: 94px; height: 94px; display: flex; align-items: center; justify-content: center; }
.wm-rloader-ring { position: absolute; inset: 0; width: 94px; height: 94px; transform-origin: 50% 50%; animation: wm-rload-spin 1s linear infinite; }
.wm-rloader-track { fill: none; stroke: rgba(176,138,69,0.16); stroke-width: 5; }
.wm-rloader-arc { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 72 205; }
.wm-rloader-mark {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(160deg, var(--green) 0%, var(--greenD) 100%);
  color: #FBF7EF; font-family: var(--ar); font-size: 27px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(46,86,66,0.28);
}
@keyframes wm-rload-spin { to { transform: rotate(360deg); } }

/* ── REKOD IBADAH (history heatmap) ───────────────────────── */
.ih-jejak-rekod { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; border: 0; background: transparent; padding: 0; font: inherit; }
.ih-jejak-rekod-chev { width: 11px; height: 11px; margin-left: 1px; opacity: .55; }
.ih-jejak-rekod:active { opacity: .6; }

.wm-rkd-head { flex: 0 0 auto; padding: 18px 22px 16px; background-color: var(--goldBg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cg fill='none' stroke='%23B08A45' stroke-opacity='0.11' stroke-width='1'%3E%3Crect x='9' y='9' width='40' height='40'/%3E%3Crect x='9' y='9' width='40' height='40' transform='rotate(45 29 29)'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(168deg, #FBF1D8 0%, var(--goldBg) 100%); background-size: 58px 58px, auto; border-bottom: 1px solid var(--line); position: relative; }
.wm-rkd-head .wm-back { margin-bottom: 10px; }
.wm-rkd-ar { font-family: var(--ar); font-size: 26px; color: var(--goldD); text-align: center; line-height: 1.4; direction: rtl; }
.wm-rkd-title { font-family: var(--serif); font-size: 23px; font-weight: 600; color: var(--ink); text-align: center; margin-top: 2px; }
.wm-rkd-sum { font-family: var(--ui); font-size: 12px; color: var(--ink2); text-align: center; margin-top: 5px; }
.wm-rkd-fire { color: var(--clay); font-weight: 600; }
.wm-rkd-flame { width: 12px; height: 12px; vertical-align: -1px; }

/* stats strip */
.wm-rkd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.wm-rkd-stat { background: var(--white); border: 1px solid var(--line); border-radius: 13px; padding: 11px 8px; text-align: center; }
.wm-rkd-stat-v { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--green); line-height: 1; }
.wm-rkd-stat-v .wm-rkd-flame { width: 15px; height: 15px; vertical-align: -2px; color: var(--clay); }
.wm-rkd-stat-sub { font-size: 13px; color: var(--ink3); font-weight: 600; }
.wm-rkd-stat-l { font-family: var(--ui); font-size: 10.5px; color: var(--ink3); margin-top: 5px; }

/* streak milestone */
.wm-rkd-ms { background: var(--white); border: 1px solid var(--line); border-radius: 13px; padding: 11px 14px 13px; margin-bottom: 14px; }
.wm-rkd-ms-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wm-rkd-ms-badge { font-family: var(--ui); font-size: 12px; font-weight: 700; color: var(--goldD); }
.wm-rkd-ms-lbl { font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--ink2); }
.wm-rkd-ms-rem { font-family: var(--ui); font-size: 11px; color: var(--ink3); }
.wm-rkd-ms-bar { height: 7px; border-radius: 999px; background: var(--line2); overflow: hidden; }
.wm-rkd-ms-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--clay)); transition: width .4s ease; }

.wm-rkd-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 18px 40px; }

.wm-rkd-mnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wm-rkd-arr { width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--line); background: var(--white); color: var(--green); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wm-rkd-arr:active { background: var(--greenBg); }
.wm-rkd-mlbl { text-align: center; }
.wm-rkd-mlbl b { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); display: block; }
.wm-rkd-mlbl span { font-family: var(--ui); font-size: 11px; color: var(--ink3); }

.wm-rkd-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.wm-rkd-dow span { font-family: var(--ui); font-size: 11px; font-weight: 600; color: var(--ink3); text-align: center; }

.wm-rkd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wm-rkd-cell { aspect-ratio: 1; border-radius: 10px; border: 1px solid transparent; font-family: var(--ui); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink2); }
.wm-rkd-cell.pad { background: transparent; border: 0; cursor: default; }
.wm-rkd-cell.empty { background: var(--line2); border-color: var(--line); color: var(--ink3); }
.wm-rkd-cell.partial { background: #DCE9DF; border-color: #BBD3C2; color: var(--greenD); }
.wm-rkd-cell.full { background: linear-gradient(165deg, var(--green) 0%, var(--greenD) 100%); border-color: var(--greenD); color: #fff; }
.wm-rkd-cell.future { background: transparent; border-color: var(--line2); color: var(--ink3); opacity: .5; cursor: default; }
.wm-rkd-cell.today { box-shadow: 0 0 0 2px var(--gold); }
.wm-rkd-cell.sel { box-shadow: 0 0 0 2px var(--clay); }
.wm-rkd-cell:not(.pad):not(.future):active { transform: scale(.93); }
/* 5-level intensity: l0 empty → l4 teras-complete (deepest) */
.wm-rkd-cell.l0 { background: var(--line2); border-color: var(--line); color: var(--ink3); }
.wm-rkd-cell.l1 { background: #E3EFE7; border-color: #CFE2D5; color: #5A7A66; }
.wm-rkd-cell.l2 { background: #C2DBCB; border-color: #A6C7B2; color: var(--greenD); }
.wm-rkd-cell.l3 { background: #84B097; border-color: #6E9E81; color: #fff; }
.wm-rkd-cell.l4 { background: linear-gradient(165deg, var(--green) 0%, var(--greenD) 100%); border-color: var(--greenD); color: #fff; }

.wm-rkd-legend { display: flex; align-items: center; gap: 5px; font-family: var(--ui); font-size: 11px; color: var(--ink2); margin: 16px 2px 4px; flex-wrap: wrap; }
.wm-rkd-leg-lbl { font-family: var(--ui); font-size: 11px; color: var(--ink3); }
.wm-rkd-key { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.wm-rkd-key.l0 { background: var(--line2); border: 1px solid var(--line); }
.wm-rkd-key.l1 { background: #E3EFE7; border: 1px solid #CFE2D5; }
.wm-rkd-key.l2 { background: #C2DBCB; }
.wm-rkd-key.l3 { background: #84B097; }
.wm-rkd-key.l4 { background: var(--green); }
.wm-rkd-key-gap { margin-left: 14px; }

.wm-rkd-hint { font-family: var(--ui); font-size: 12.5px; color: var(--ink3); text-align: center; padding: 22px 10px; }
.wm-rkd-detailcard { margin-top: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.wm-rkd-dhdr { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wm-rkd-dgreg { font-family: var(--ui); font-size: 11.5px; color: var(--ink3); margin: 2px 0 12px; }
.wm-rkd-bd { font-family: var(--ui); font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.wm-rkd-bd.full { background: var(--greenBg); color: var(--greenD); }
.wm-rkd-bd.partial { background: var(--goldBg); color: var(--goldD); }
.wm-rkd-bd.empty { background: var(--line2); color: var(--ink3); }
.wm-rkd-drow { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line2); font-family: var(--ui); font-size: 13px; color: var(--ink2); }
.wm-rkd-drow:first-of-type { border-top: 0; }
.wm-rkd-drow b { color: var(--ink3); font-weight: 600; }
.wm-rkd-drow b.ok { color: var(--green); }

/* ── iOS "Tambah ke Skrin Utama" nudge (warm/wm-ios-install.js) ── */
.wm-iosi {
  position: absolute; left: 12px; right: 12px; z-index: 150;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
  background: var(--cream); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 14px 38px rgba(40, 35, 25, 0.22); padding: 14px 14px 13px;
  transform: translateY(160%); opacity: 0;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .38s;
}
.wm-iosi.show { transform: translateY(0); opacity: 1; }
.wm-iosi-x {
  position: absolute; top: 6px; right: 9px; background: none; border: 0;
  font-size: 22px; line-height: 1; color: var(--ink3); cursor: pointer; padding: 4px;
}
.wm-iosi-row { display: flex; gap: 12px; align-items: center; padding-right: 18px; }
.wm-iosi-icon img { border-radius: 11px; display: block; }
.wm-iosi-title { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.wm-iosi-sub { font-family: var(--ui); font-size: 12px; color: var(--ink2); line-height: 1.45; margin-top: 3px; }
.wm-iosi-steps {
  font-family: var(--ui); font-size: 12px; color: var(--ink2); line-height: 1.6;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line);
}
.wm-iosi-steps b { color: var(--ink); font-weight: 600; }
.wm-iosi-share { display: inline-flex; vertical-align: -4px; color: var(--green); }
.wm-iosi-share svg { width: 16px; height: 16px; }

/* ── "Pasang Semula" announcement pop-up (warm/wm-announce.js) ── */
.wm-anc-ov {
  position: absolute; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  padding: 22px 16px; background: rgba(30, 26, 18, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .26s;
}
.wm-anc-ov.show { opacity: 1; }
.wm-anc-card {
  position: relative; width: 100%; max-width: 380px; max-height: 88%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--cream); border: 1px solid var(--line); border-radius: 22px; padding: 26px 24px 22px;
  box-shadow: 0 24px 60px rgba(30, 26, 18, 0.4); transform: translateY(18px) scale(.98); transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.wm-anc-ov.show .wm-anc-card { transform: none; }
.wm-anc-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 24px; line-height: 1; color: var(--ink3); cursor: pointer; padding: 4px; }
.wm-anc-badge { display: inline-block; background: var(--green); color: #fff; font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; padding: 6px 13px; border-radius: 999px; }
.wm-anc-h1 { font-family: var(--serif); font-size: 32px; font-weight: 700; line-height: 1.05; margin-top: 14px; color: var(--ink); }
.wm-anc-h1 em { font-style: italic; color: var(--green); }
.wm-anc-lead { font-family: var(--ui); font-size: 13.5px; line-height: 1.55; color: var(--ink2); margin-top: 12px; }
.wm-anc-lead b { color: var(--ink); font-weight: 600; }
.wm-anc-warn { margin-top: 18px; background: #FBF3E4; border: 1.5px solid var(--gold, #B0894A); border-radius: 14px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.wm-anc-warn-ic { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.wm-anc-warn-t { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--goldD, #977536); }
.wm-anc-warn-b { font-family: var(--ui); font-size: 12px; line-height: 1.5; color: var(--ink2); margin-top: 3px; }
.wm-anc-warn-b b { color: var(--goldD, #977536); }
.wm-anc-backup { width: 100%; margin-top: 14px; background: var(--green); color: #fff; border: 0; border-radius: 12px; padding: 13px; font-family: var(--ui); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.wm-anc-plat { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--ink); margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 9px; }
.wm-anc-plat span { font-family: var(--ui); font-size: 11px; font-weight: 700; color: var(--green); background: #EAF1EC; padding: 3px 10px; border-radius: 999px; }
.wm-anc-step { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; }
.wm-anc-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.wm-anc-stxt { font-family: var(--ui); font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.wm-anc-stxt b { font-weight: 700; }
.wm-anc-shr { display: inline-flex; vertical-align: -3px; color: var(--green); }
.wm-anc-shr svg { width: 15px; height: 15px; }
.wm-anc-done { width: 100%; margin-top: 22px; background: transparent; color: var(--ink2); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px; font-family: var(--ui); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.wm-anc-foot { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--green); text-align: center; margin-top: 16px; letter-spacing: .3px; }