/* Al-Burhaniya — reusable components */

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: clamp(.9rem, 2vw, 1.25rem);
}
.card.flat { box-shadow: none; }
.card.hero {
  background: var(--grad-emerald-gold);
  color: #f5f8f6; border: 0; position: relative; overflow: hidden;
}
.card.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 6l38 22v44L50 94 12 72V28z' fill='none' stroke='%23ffffff' stroke-opacity='.08'/%3E%3C/svg%3E");
  background-size: 130px;
}
.card.hero > * { position: relative; z-index: 1; }
.card.hero h1, .card.hero h2, .card.hero h3 { color: #fff; }
.card.hero .sub, .card.hero .text-2 { color: #d5e7dd; }
.card-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-block-end: .85rem;
}
.card-title h2, .card-title h3 { margin: 0; font-size: var(--fs-md); }
.card-title .hint { font-size: var(--fs-xs); color: var(--text-3); }
.card-title .icon-wrap {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); flex: none;
}
.card.clickable { cursor: pointer; transition: transform var(--speed), box-shadow var(--speed); }
.card.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
@media (hover: none) { .card.clickable:hover { transform: none; box-shadow: var(--shadow-1); } } /* touch: tap feedback via :active only, no sticky hover lift */

/* Stat cards */
.stat {
  display: flex; align-items: center; gap: .85rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: .95rem 1rem; box-shadow: var(--shadow-1);
}
.stat .s-icon {
  width: 44px; height: 44px; border-radius: var(--r-md); flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.stat .s-icon.gold { background: #f7efcf; color: #8a6d12; }
[data-theme='dark'] .stat .s-icon.gold { background: #3a3212; color: var(--light-gold); }
.stat .s-val { font-size: var(--fs-xl); font-weight: 750; line-height: 1.1; }
.stat .s-label { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.stat .s-sub { font-size: var(--fs-sm); color: var(--text-2); }
.stat .s-total { font-size: 1rem; }   /* the "/total" suffix inside a value */
.stat .s-mini { font-size: 1.2rem; }  /* time-like values (Sehri/Iftar) */

/* KPI strip: the four dashboard stat cards stay on one neat line at every width */
.stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-strip.strip-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strip-lead { gap: 1rem; min-width: 0; }
.strip-lead-val { font-size: 1.15rem; line-height: 1.3; }

/* ---------- Phone polish: cards sized to the screen, never bulky ---------- */
@media (max-width: 700px) {
  .card { padding: .85rem .9rem; }
  .card-title h3 { font-size: .98rem; }
  .stat-strip { gap: .5rem; }
  .stat-strip .stat {
    flex-direction: column; align-items: center; text-align: center;
    gap: .32rem; padding: .68rem .42rem .62rem;
    border-radius: var(--r-md);
  }
  .stat-strip .stat .s-icon { width: 27px; height: 27px; border-radius: 9px; }
  .stat-strip .stat .s-icon svg { width: 15px; height: 15px; }
  .stat-strip .stat .s-val { font-size: 1.02rem; font-weight: 800; line-height: 1.3; margin-block-end: .3rem; }
  .stat-strip .stat .s-total { font-size: .7rem; }
  .stat-strip .stat .s-mini { font-size: .95rem; }
  .stat-strip .stat .s-label {
    font-size: .6rem; letter-spacing: .03em; line-height: 1.5;
    overflow-wrap: break-word;
  }
  .stat-strip .stat .s-sub { font-size: .64rem; }
  /* Nastaliq / Arabic labels need a larger floor to stay readable */
  html[lang='ur'] .stat-strip .stat .s-label,
  html[lang='ar'] .stat-strip .stat .s-label { font-size: .7rem; letter-spacing: 0; line-height: 1.85; }

  /* 3-up lead card (azkar page header): compact ring + counts, tidy lines */
  .stat-strip.strip-3 { gap: .5rem; }
  .strip-lead { gap: .5rem; padding: .6rem .55rem; }
  .strip-lead .ring { width: 46px !important; height: 46px !important; flex: none; }
  .strip-lead .ring svg { width: 46px; height: 46px; }
  .strip-lead .ring .ring-label { font-size: .58rem; }
  .strip-lead-val { font-size: .98rem; margin-block-end: .12rem; }
  .strip-lead .xsmall { font-size: .6rem; line-height: 1.5; }
  html[lang='ur'] .strip-lead .xsmall,
  html[lang='ar'] .strip-lead .xsmall { font-size: .66rem; line-height: 1.8; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.05rem; border-radius: var(--r-md);
  border: 1.5px solid transparent; background: var(--accent); color: var(--accent-contrast);
  font-weight: 650; font-size: var(--fs-base); cursor: pointer;
  transition: filter var(--speed), transform .1s, background var(--speed), border-color var(--speed);
  text-decoration: none; min-height: 40px; user-select: none;
}
.btn:hover { filter: brightness(1.07); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn.block { width: 100%; }
.btn.sm { padding: .38rem .7rem; min-height: 32px; font-size: var(--fs-sm); }
.btn.lg { padding: .75rem 1.4rem; min-height: 48px; font-size: var(--fs-md); }
.btn.outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn.outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn.ghost { background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--card-2); color: var(--text); }
.btn.gold { background: var(--grad-gold); color: #241d05; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger.outline { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn.danger.outline:hover { background: var(--danger-soft); }
.btn.success { background: var(--success); color: #fff; }
.btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.loading::after {
  content: ''; position: absolute; width: 18px; height: 18px;
  border: 2px solid #ffffff66; border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.outline.loading::after, .btn.ghost.loading::after { border-color: #0003; border-top-color: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-group { display: inline-flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Forms ---------- */
.field { margin-block-end: .95rem; }
.field label {
  display: flex; align-items: center; gap: .35rem;
  font-size: var(--fs-sm); font-weight: 650; margin-block-end: .35rem; color: var(--text-2);
}
.field .req { color: var(--danger); }
.input, .select, .textarea {
  width: 100%; padding: .62rem .8rem;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-elevated); color: var(--text);
  transition: border-color var(--speed), box-shadow var(--speed);
  min-height: 42px;
}
.textarea { min-height: 96px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.input.invalid, .select.invalid, .textarea.invalid { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: var(--fs-xs); margin-block-start: .3rem; display: none; }
.field.has-error .field-error { display: block; }
.field-hint { color: var(--text-3); font-size: var(--fs-xs); margin-block-start: .3rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.input-group { position: relative; }
.input-group .input { padding-inline-end: 2.6rem; }
.input-group .in-btn {
  position: absolute; inset-inline-end: .3rem; inset-block-start: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; background: none; color: var(--text-3);
  cursor: pointer; display: grid; place-items: center; border-radius: 8px;
}
.input-group .in-btn:hover { color: var(--text); background: var(--card-2); }
.check-row { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--fs-sm); margin-block-end: .6rem; }
.check-row input { width: 17px; height: 17px; margin-block-start: .15rem; accent-color: var(--accent); }
.switch { position: relative; display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch .track {
  width: 44px; height: 24px; border-radius: 99px; background: var(--border-strong);
  position: relative; transition: background var(--speed); flex: none;
}
.switch .track::after {
  content: ''; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: transform var(--speed); box-shadow: 0 1px 3px #0003;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(20px); }
[dir='rtl'] .switch input:checked + .track::after { transform: translateX(-20px); }
.switch input:focus-visible + .track { outline: 3px solid var(--gold); outline-offset: 2px; }
.form-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-block-start: 1.1rem; }
.form-note { font-size: var(--fs-sm); color: var(--text-3); }

/* ---------- Badges / chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--fs-xs); font-weight: 700; padding: .18rem .55rem;
  border-radius: var(--r-full); border: 1px solid transparent;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.badge.green { background: #e2f3ea; color: #0c5c3c; border-color: #bfe4d2; }
.badge.gold { background: #f8f0d0; color: #7a5f0e; border-color: #ecdfae; }
.badge.red { background: var(--danger-soft); color: var(--danger); border-color: #eec9c5; }
.badge.gray { background: var(--card-2); color: var(--text-2); border-color: var(--border); }
.badge.blue { background: #e3edf9; color: #1d4f8c; border-color: #c3d7f0; }
.badge.teal { background: #e0f2f1; color: #0b5c58; border-color: #b7e0dd; }
.badge.outline { background: transparent; border-color: var(--border-strong); color: var(--text-2); }
[data-theme='dark'] .badge.green { background: #123527; color: #7fd4ab; border-color: #1d4c37; }
[data-theme='dark'] .badge.gold { background: #38300f; color: var(--light-gold); border-color: #544716; }
[data-theme='dark'] .badge.red { background: #3d1c18; color: #f0a49b; border-color: #5c2a24; }
[data-theme='dark'] .badge.gray { background: #22322b; color: var(--text-2); border-color: var(--border); }
[data-theme='dark'] .badge.blue { background: #14283f; color: #93bde9; border-color: #1e3b5c; }
[data-theme='dark'] .badge.teal { background: #0f3331; color: #7fd0ca; border-color: #1a4a47; }

/* ---------- Progress ---------- */
.progress {
  height: 9px; background: var(--card-2); border-radius: 99px;
  overflow: hidden; border: 1px solid var(--border);
}
.progress > span {
  display: block; height: 100%; border-radius: 99px;
  background: var(--grad-emerald);
  transition: width var(--speed-slow) ease;
}
.progress.gold > span { background: var(--grad-gold); }
.progress.thin { height: 6px; }

.ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring .track { stroke: var(--card-2); }
.ring .bar {
  stroke: var(--accent); stroke-linecap: round;
  transition: stroke-dashoffset var(--speed-slow);
}
.ring.gold .bar { stroke: var(--gold); }
.ring .ring-label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  font-size: .72rem; font-weight: 750; text-align: center; line-height: 1.1;
}

/* Bead dots (tasbeeh) */
.beads { display: flex; flex-wrap: wrap; gap: 4px; }
.beads i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong); display: block;
  transition: background var(--speed), transform var(--speed);
}
.beads i.on { background: var(--gold); transform: scale(1.15); }

/* ---------- Tables (responsive) ---------- */
.table-wrap {
  width: 100%; overflow-x: auto; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--card);
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; /* momentum swipe, no pull-navigation */
}
table.data {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
}
table.data th, table.data td {
  padding: .7rem .85rem; text-align: start;
  border-block-end: 1px solid var(--border); vertical-align: middle;
}
table.data th {
  background: var(--card-2); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3); font-weight: 700;
  position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
table.data tr:last-child td { border-block-end: 0; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
table.data td .row { gap: .5rem; }

@media (max-width: 720px) {
  table.responsive-cards thead { display: none; }
  table.responsive-cards, table.responsive-cards tbody, table.responsive-cards tr, table.responsive-cards td { display: block; width: 100%; }
  table.responsive-cards tr {
    border: 1px solid var(--border); border-radius: var(--r-md);
    margin-block-end: .65rem; padding: .5rem .65rem; background: var(--card);
  }
  table.responsive-cards tr:hover { background: var(--card); }
  table.responsive-cards td {
    border: 0; padding: .3rem 0; display: flex; justify-content: space-between;
    align-items: center; gap: 1rem; text-align: end;
  }
  table.responsive-cards td::before {
    content: attr(data-label); font-weight: 700; color: var(--text-3);
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
    text-align: start;
  }
  table.responsive-cards td[data-label='']::before { content: none; }
}

/* ---------- Tabs ---------- */
.tabs {
  display: flex; gap: .25rem; border-block-end: 1px solid var(--border);
  margin-block-end: 1rem; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: .6rem .95rem; border: 0; background: none; color: var(--text-2);
  font-weight: 650; font-size: var(--fs-sm); cursor: pointer;
  border-block-end: 2.5px solid transparent; margin-block-end: -1px;
  white-space: nowrap; display: inline-flex; gap: .4rem; align-items: center;
}
.tab:hover { color: var(--text); }
.tab[aria-selected='true'] { color: var(--accent); border-block-end-color: var(--accent); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--overlay); display: grid; place-items: center;
  padding: 1rem; animation: fadeIn .18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: min(560px, 100%); max-height: min(86dvh, 900px);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; animation: modalIn .22s ease;
}
.modal.wide { width: min(860px, 100%); }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98);} to { opacity: 1; transform: none;} }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem; border-block-end: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: var(--fs-md); }
.modal-body { padding: 1.15rem; overflow-y: auto; }
.modal-foot {
  padding: .9rem 1.15rem; border-block-start: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: .55rem; flex-wrap: wrap;
}

/* ---------- Toast ---------- */
.toast-root {
  position: fixed; z-index: 300; inset-block-end: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 12px);
  inset-inline: 0; display: flex; flex-direction: column; align-items: center;
  gap: .5rem; pointer-events: none; padding-inline: .75rem;
}
@media (min-width: 769px) { .toast-root { inset-block-end: 20px; } }

/* ---------- Save chip: exported file is ready (download fallback) ---------- */
.save-chip {
  position: fixed; z-index: 320; inset-inline: 0; margin-inline: auto;
  inset-block-end: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 66px);
  width: max-content; max-width: calc(100vw - 1.2rem);
  display: flex; align-items: center; gap: .65rem;
  background: var(--card); color: var(--text);
  border: 1px solid var(--gold); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); padding: .5rem .65rem;
}
.save-chip .sc-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.save-chip .sc-txt .xsmall { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.save-chip a.btn { text-decoration: none; flex: none; min-height: 34px; padding: .35rem .75rem; }
@media (min-width: 769px) { .save-chip { inset-block-end: 74px; } }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: .6rem;
  background: #14231c; color: #f1f5f2; border-radius: var(--r-md);
  padding: .7rem .95rem; box-shadow: var(--shadow-2); font-size: var(--fs-sm);
  max-width: min(460px, 94vw); animation: toastIn .25s ease;
  border: 1px solid #ffffff1c;
}
[data-theme='dark'] .toast { background: #22322b; }
.toast.success { border-inline-start: 4px solid #3ecf8e; }
.toast.error { border-inline-start: 4px solid #f07167; }
.toast.warn { border-inline-start: 4px solid var(--light-gold); }
.toast.info { border-inline-start: 4px solid #7db3e8; }
.toast .t-close { background: none; border: 0; color: inherit; cursor: pointer; opacity: .7; display: grid; place-items: center; padding: .1rem; }
.toast.out { animation: toastOut .25s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: none;} }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px);} }

/* ---------- Skeletons ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--card-2) 25%, var(--border) 37%, var(--card-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.sk-line { height: 14px; margin-block-end: .55rem; }
.sk-line.w60 { width: 60%; } .sk-line.w40 { width: 40%; } .sk-line.w80 { width: 80%; }
.sk-card { height: 110px; border-radius: var(--r-lg); }
.sk-circle { width: 64px; height: 64px; border-radius: 50%; }

/* ---------- Empty state ---------- */
.empty {
  text-align: center; padding: clamp(1.5rem, 5vw, 3rem) 1rem;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg);
  background: var(--card);
}
.empty .e-icon {
  width: 72px; height: 72px; margin: 0 auto .9rem;
  display: grid; place-items: center; color: var(--accent);
  background: var(--accent-soft); border-radius: 22px;
  position: relative;
}
.empty .e-icon::before {
  content: ''; position: absolute; inset: -7px; border-radius: 26px;
  border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, transparent);
}
.empty h3 { margin-block-end: .3rem; font-size: var(--fs-md); }
.empty p { color: var(--text-2); max-width: 46ch; margin-inline: auto; font-size: var(--fs-sm); }
.empty .btn-group { justify-content: center; margin-block-start: 1rem; }

/* ---------- Alerts ---------- */
.alert {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem .95rem; border-radius: var(--r-md);
  font-size: var(--fs-sm); border: 1px solid;
}
.alert .icon { flex: none; margin-top: .1rem; }
.alert.info { background: #eaf2fb; border-color: #c6dbf3; color: #1c4f86; }
.alert.success { background: #e6f5ee; border-color: #bfe6d3; color: #0d5c3d; }
.alert.warn { background: #faf3dd; border-color: #ecdca8; color: #7a5f0e; }
.alert.danger { background: var(--danger-soft); border-color: #efc9c5; color: var(--danger); }
[data-theme='dark'] .alert.info { background: #13273c; border-color: #1e3d5c; color: #9dc3ea; }
[data-theme='dark'] .alert.success { background: #102c21; border-color: #1c4a36; color: #86d9b3; }
[data-theme='dark'] .alert.warn { background: #35300f; border-color: #4f4615; color: var(--light-gold); }

/* ---------- List items ---------- */
.list { display: flex; flex-direction: column; gap: .55rem; }
.list-item {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .85rem; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title { font-weight: 650; font-size: var(--fs-sm); display: block; }
.list-item .li-sub { font-size: var(--fs-xs); color: var(--text-3); display: block; }

/* ---------- Notifications ---------- */
.notif {
  display: flex; gap: .8rem; padding: .85rem .9rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card); position: relative;
}
.notif.unread { background: color-mix(in srgb, var(--accent-soft) 55%, var(--card)); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.notif.unread::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block: 10%;
  width: 3.5px; border-radius: 99px; background: var(--accent);
}
.notif .n-icon {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: grid; place-items: center; background: var(--card-2); color: var(--accent);
}
.notif .n-title { font-weight: 650; font-size: var(--fs-sm); display: block; }
.notif .n-body { font-size: var(--fs-sm); color: var(--text-2); display: block; }
.notif .n-time { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-block-start: .25rem; }

/* ---------- Milestones / badges ---------- */
.milestone {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--card);
}
.milestone.locked { opacity: .55; filter: grayscale(.4); }
.milestone .m-badge {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  color: #6b5410; background: var(--grad-gold); border-radius: 14px;
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
.milestone.earned .m-badge { animation: badgePop .6s ease; }
@keyframes badgePop {
  0% { transform: scale(.6) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.milestone .m-title { font-weight: 650; font-size: var(--fs-sm); }
.milestone .m-sub { font-size: var(--fs-xs); color: var(--text-3); }

/* ---------- Charts ---------- */
.chart { width: 100%; position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; direction: ltr; } /* axis labels keep LTR anchoring: 100/75/50/25/0 stay inside the card even in RTL */
.chart .axis-label { font-size: 10px; fill: var(--text-3); }
.chart .grid-line { stroke: var(--border); stroke-dasharray: 3 4; }
.chart .line-main { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .area-main { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.chart .bar-main { fill: var(--accent); rx: 4; }
.chart .bar-gold { fill: var(--gold); rx: 4; }
.chart .dot-main { fill: var(--card); stroke: var(--accent); stroke-width: 2; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .75rem; font-size: var(--fs-xs); color: var(--text-2); margin-block-start: .5rem; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-inline-end: .3rem; }
.chart-empty { text-align: center; color: var(--text-3); font-size: var(--fs-sm); padding: 1.5rem; }

/* ---------- Filter bar ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: .55rem; align-items: center;
  margin-block-end: 1rem;
}
.filters .input, .filters .select { min-height: 38px; padding: .45rem .7rem; width: auto; }
.filters .input[type='search'] { min-width: min(240px, 100%); }

/* ---------- Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block-start: .9rem; flex-wrap: wrap; }
.pager .pages { display: flex; gap: .3rem; }
.pager .pg {
  min-width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--card); cursor: pointer; font-size: var(--fs-sm); font-weight: 650;
}
.pager .pg.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Misc ---------- */
.kbd {
  font-size: .7rem; background: var(--card-2); border: 1px solid var(--border-strong);
  border-block-end-width: 2px; padding: .05rem .35rem; border-radius: 5px;
  font-family: ui-monospace, monospace;
}
.mode-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--grad-gold); color: #2a2205;
  border-radius: var(--r-full); padding: .18rem .6rem;
}
.watermark-hex {
  position: absolute; inset-inline-end: -30px; inset-block-start: -30px;
  width: 160px; height: 160px; opacity: .07; pointer-events: none;
}
.trend-up { color: var(--success); font-weight: 650; font-size: var(--fs-sm); }
.trend-down { color: var(--danger); font-weight: 650; font-size: var(--fs-sm); }


/* ==================== motion pack (page enter, charts, counters, burst) ==================== */
@keyframes pageEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page-enter { animation: pageEnter .28s cubic-bezier(.2, .7, .3, 1) both; }

/* line chart draw-in */
.chart .line-main { stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900); animation: drawLine 1.1s cubic-bezier(.4, 0, .2, 1) .1s forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.chart .area-main { opacity: 0; animation: areaFade .7s ease .75s forwards; }
@keyframes areaFade { to { opacity: 1; } }
.chart .dot-main { opacity: 0; transform-box: fill-box; transform-origin: center; animation: dotPop .3s ease forwards; animation-delay: calc(.55s + var(--di, 0) * .04s); }
@keyframes dotPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

/* bar chart grow-in (stagger via --i) */
.chart .bar-main, .chart .bar-gold {
  transform-box: fill-box; transform-origin: bottom; transform: scaleY(0);
  animation: barGrow .55s cubic-bezier(.2, .8, .3, 1) forwards;
  animation-delay: calc(var(--i, 0) * .05s);
}
@keyframes barGrow { to { transform: scaleY(1); } }

/* count-up bump (tasbeeh / widget) */
@keyframes countBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: var(--gold); } 100% { transform: scale(1); } }
.t-count.bump, .w-count.bump { display: inline-block; animation: countBump .28s ease; }

/* tasbeeh big tap press */
.tap-big { transition: transform .12s ease, box-shadow .12s ease; }
.tap-big:active { transform: scale(.96); }

/* celebration particles */
.burst-host i { will-change: transform, opacity; }

/* dark: danger alert (rest already covered above) */
[data-theme='dark'] .alert.danger { background: #3a1f1c; border-color: #5c2a24; color: #f0a49b; }

/* ---------- Phone app pass: full-size targets, no iOS zoom, bottom-sheet modals ---------- */
@media (max-width: 768px) {
  .btn { min-height: 44px; }
  .input, .select, .textarea { font-size: 16px; } /* >=16px: iOS never auto-zooms the viewport on focus */
  .form-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .55rem; }
  .form-actions .btn { width: 100%; min-height: 46px; }
  .tab { min-height: 44px; padding-inline: .95rem; }
  .list-item { padding: .8rem .9rem; }
  .modal-overlay { padding: 0; align-items: flex-end; } /* sheets rise from the bottom like native apps */
  .modal {
    width: 100%; max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    animation: sheetIn .28s cubic-bezier(.32, .72, 0, 1) both;
  }
  .modal-foot { padding-block-end: calc(.9rem + env(safe-area-inset-bottom, 0px)); }
}
@keyframes sheetIn { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }