/* ==== prayer (ibodat) ==== */
.ib-seg button { padding: 8px 6px; font-size: 12px; min-height: 38px; }
.ib-nav .btn.sq { width: 42px; height: 42px; }
.ib-return { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; min-height: 28px; padding: 2px 8px; border: 0; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); font-size: 11px; font-weight: 700; }
.ib-return::before { content: ''; position: absolute; inset: -6px -4px; } /* 40px hit area, small visual */
.ib-center { justify-content: center; }

/* state colours (shared by pills, dots, times) */
.ib-c-jamaat { --c: var(--success); }
.ib-c-alone { --c: var(--info); }
.ib-c-qaza { --c: var(--warning); }
.ib-c-missed { --c: var(--danger-text); }
.ib-st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--text3)); display: inline-block; flex: none; box-shadow: 0 0 6px color-mix(in srgb, var(--c, transparent) 60%, transparent); }

/* hero */
.ib-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 10% -20%, color-mix(in srgb, var(--success) 18%, transparent), transparent 55%); }
.ib-hero-row { position: relative; display: flex; align-items: center; gap: 16px; }
.ib-hero-main { flex: 1; min-width: 0; }
.ib-hero-name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin-top: 4px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ib-hero-name .num { font-size: 13px; font-weight: 600; }
.ib-hero-count { font-size: 46px; font-weight: 800; letter-spacing: -.045em; color: var(--success); line-height: 1.05; margin: 6px 0 4px;
  text-shadow: 0 0 28px var(--success-glow); }
.ib-hero-meta { font-size: 12px; color: var(--text3); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ib-hero-meta b { color: var(--text2); font-weight: 700; }
.ib-hero .ring-pct { color: var(--success); display: flex; align-items: center; justify-content: center; }
@media (max-width: 480px) { .ib-hero-count { font-size: 40px; } .ib-hero-row { gap: 10px; } }

/* times table */
.ib-times { display: flex; flex-direction: column; gap: 4px; }
.ib-time-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid transparent; transition: background .2s, opacity .2s; }
.ib-time-row.past { opacity: .5; }
.ib-time-row.now { background: color-mix(in srgb, var(--success) 10%, transparent); border-color: color-mix(in srgb, var(--success) 30%, transparent); opacity: 1; }
.ib-time-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line3); flex: none; display: block; }
.ib-time-row.now .ib-time-dot { background: var(--success); box-shadow: 0 0 8px var(--success-glow); animation: led 1.6s ease-in-out infinite; }
.ib-time-name { flex: 1; min-width: 0; font-weight: 700; color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-time-row.quyosh .ib-time-name { color: var(--text3); font-weight: 600; }
.ib-time-state { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c); white-space: nowrap; }
.ib-time-val { font-size: 15px; font-weight: 700; color: var(--text); flex: none; }
.ib-time-row.now .ib-time-val { color: var(--success); }
.ib-method .small { color: var(--text2); }

/* log */
.ib-log-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.ib-log-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ib-log-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ib-log-name { flex: 1; min-width: 0; font-weight: 700; color: var(--text); font-size: 14px; }
.ib-hint { font-size: 11px; color: var(--warning); opacity: .85; }
.ib-states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
/* NB: do not set --c here — .ib-c-* has the same specificity and comes earlier,
   so a --c declared on .ib-st would win and grey out every selected state. */
.ib-st { min-height: 40px; padding: 6px 4px; border-radius: 10px; border: 1px solid var(--line2); background: var(--glass); color: var(--text3);
  font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.ib-st:hover { border-color: var(--line3); color: var(--text2); }
.ib-st.on { background: color-mix(in srgb, var(--c, var(--text3)) 16%, transparent); border-color: color-mix(in srgb, var(--c, var(--text3)) 48%, transparent); color: var(--c, var(--text3));
  box-shadow: 0 0 12px color-mix(in srgb, var(--c, var(--text3)) 28%, transparent); }
@media (max-width: 360px) { .ib-st { font-size: 11px; padding: 6px 2px; } }

/* qaza ledger */
.ib-ledger .kpi-num { color: var(--warning); }
.ib-ledger.zero .kpi-num { color: var(--success); }
.ib-ledger .btn.sq { width: 42px; height: 42px; }

/* tasbih */
.ib-names, .ib-presets { margin-bottom: 4px; }
.ib-presets { justify-content: center; margin: 4px 0 14px; }
.ib-presets button { min-width: 58px; text-align: center; font-size: 13px; }
.ib-names button, .ib-presets button { min-height: 38px; }
.ib-tap-wrap { display: flex; justify-content: center; padding: 12px 0 10px; }
.ib-tap { position: relative; width: 208px; height: 208px; border-radius: 50%; border: 0; padding: 0; color: var(--text);
  background: radial-gradient(circle at 50% 30%, var(--hover), var(--inset) 72%); box-shadow: var(--sh), inset 0 1px 0 var(--line3);
  user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: transform .08s var(--ease-out), box-shadow .2s; }
.ib-tap:active { transform: scale(.955); box-shadow: var(--sh), inset 0 2px 12px color-mix(in srgb, var(--violet) 20%, transparent); }
.ib-tap-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.ib-tap-track { fill: none; stroke: var(--line2); stroke-width: 6; }
.ib-tap-fill { fill: none; stroke: var(--violet); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--violet)); transition: stroke-dashoffset .18s var(--ease-out); }
.ib-tap-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; padding: 0 24px; }
.ib-tap-n { font-size: 58px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--text); }
.ib-tap-sub { margin-top: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); font-family: var(--mono);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 360px) { .ib-tap { width: 180px; height: 180px; } .ib-tap-n { font-size: 50px; } }

/* fasting */
.ib-fast-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; width: 100%; padding: 8px 16px 8px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line2); background: var(--glass); color: var(--text); font-weight: 700; font-size: 14px; text-align: left; transition: background .2s, border-color .2s, color .2s; }
.ib-fast-toggle:hover { border-color: var(--line3); }
.ib-fast-toggle.on { border-color: color-mix(in srgb, var(--success) 40%, transparent); background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); }
.ib-hgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ib-hcell { --c: var(--info); position: relative; aspect-ratio: 1; min-height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--inset);
  color: var(--text2); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .15s, border-color .15s, color .15s; }
.ib-hcell:hover:not(:disabled) { border-color: var(--line3); }
.ib-hcell:disabled { opacity: .35; cursor: default; }
.ib-hcell.today { box-shadow: inset 0 0 0 1.5px var(--text3); }
.ib-hcell.done { background: color-mix(in srgb, var(--c) 22%, transparent); border-color: color-mix(in srgb, var(--c) 48%, transparent); color: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 18%, transparent); }
.ib-hcell.done.today { box-shadow: inset 0 0 0 1.5px var(--c), 0 0 10px color-mix(in srgb, var(--c) 18%, transparent); }
.ib-hcell.sug::after { content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--warning); }
.ib-hcell.done.sug::after { background: currentColor; }
.ib-f-ramadan { --c: var(--success); } .ib-f-sunnah { --c: var(--info); } .ib-f-qaza { --c: var(--warning); } .ib-f-nafl { --c: var(--violet); }
.ib-owed.inp.sm { padding: 6px 8px; font-size: 20px; font-weight: 700; line-height: 1.1; min-height: 44px; }
.ib-ramadan .bar { display: block; }

/* qibla */
.ib-compass-wrap { display: flex; justify-content: center; padding: 6px 0; }
.ib-compass { width: min(260px, 72vw); aspect-ratio: 1; }
.ib-compass svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ib-dial { transform-box: fill-box; transform-origin: center; transition: transform .25s var(--ease-out); }
.ib-dial-ring { fill: var(--inset); stroke: var(--line2); stroke-width: 1.5; }
.ib-tick { stroke: var(--line3); stroke-width: 1.5; }
.ib-tick.major { stroke: var(--text3); stroke-width: 2.5; }
.ib-cardinal { fill: var(--text3); font-size: 15px; font-weight: 800; font-family: var(--mono); text-anchor: middle; dominant-baseline: central; }
.ib-cardinal.n { fill: var(--danger-text); }
.ib-needle { fill: var(--success); filter: drop-shadow(0 0 8px var(--success-glow)); }
.ib-needle-tail { fill: var(--line3); }
.ib-kaaba { fill: var(--text); stroke: var(--success); stroke-width: 1.5; }
.ib-hub { fill: var(--bg3); stroke: var(--line3); stroke-width: 2; }
.ib-idx { fill: var(--warning); }
.ib-qibla-deg { text-align: center; margin-top: 4px; }
.ib-qibla-deg .num { font-size: 34px; font-weight: 800; letter-spacing: -.04em; color: var(--text); line-height: 1.1; }

/* namozlar kesimida */
.ib-per-row { display: grid; grid-template-columns: 68px 1fr 42px; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--line); }
.ib-per-row:first-of-type { border-top: 0; }
.ib-per-row.weak .ib-per-name { color: var(--warning); }
.ib-per-name { font-size: 12.5px; font-weight: 700; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-per-bar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--line); }
.ib-per-bar i { display: block; height: 100%; }
.ib-per-val { font-size: 12.5px; font-weight: 700; text-align: right; color: var(--text); }
.ib-leg { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.ib-per-note { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--warning) 8%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 26%, transparent);
  font-size: 12.5px; color: var(--text2); }
.ib-per-note .ic { color: var(--warning); flex: none; }
.ib-per-note strong { color: var(--text); font-weight: 700; }

/* ===================================================================== */
/* QAZO — debt ledger                                                     */
/* ===================================================================== */

/* reminder strip: the debt follows you across every Ibodat tab */
.ib-qz-remind { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 12px; padding: 11px 12px;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); text-align: left;
  background: linear-gradient(120deg, color-mix(in srgb, var(--warning) 15%, transparent), color-mix(in srgb, var(--warning) 5%, transparent)), var(--card-bg);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  color: var(--text); transition: border-color .2s, transform .1s; }
.ib-qz-remind:active { transform: scale(.99); }
.ib-qz-remind.met { border-color: color-mix(in srgb, var(--success) 30%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--success) 14%, transparent), color-mix(in srgb, var(--success) 4%, transparent)), var(--card-bg); }
.ib-qz-rdot { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 10px;
  background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.ib-qz-remind.met .ib-qz-rdot { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.ib-qz-rtext { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ib-qz-rgo { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 11px; font-weight: 700; color: var(--text3); }

/* hero */
.ib-qz-hero { text-align: left; }
.ib-qz-top { display: flex; align-items: center; gap: 14px; }
.ib-qz-main { flex: 1; min-width: 0; }
.ib-qz-num { font-size: 46px; font-weight: 800; line-height: .95; letter-spacing: -.045em; color: var(--text);
  font-variant-numeric: tabular-nums; margin-top: 4px; }
.ib-qz-unit { font-size: 12px; font-weight: 600; color: var(--text3); margin-top: 4px; }
.ib-qz-sub { font-size: 12px; font-weight: 700; color: var(--warning); margin-top: 8px; }
.ib-qz-dn { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--text); line-height: 1; }
.ib-qz-dl { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin-top: 3px; }

.ib-qz-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 4px 10px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--line); }
.ib-qz-lg { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text3); font-weight: 600; }
.ib-qz-lg i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.ib-qz-lg b { margin-left: auto; color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }

.ib-qz-today { margin-top: 14px; padding: 11px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); }
.ib-qz-today.met { border-color: color-mix(in srgb, var(--success) 28%, transparent); }
.ib-qz-tn { font-size: 14px; font-weight: 800; color: var(--text); }
.ib-qz-today .bar-fill { background: linear-gradient(90deg, var(--warning), var(--success)); }
.ib-qz-today.met .bar-fill { background: var(--success); }

/* debt-free state */
.ib-qz-hero.zero { text-align: center; padding-top: 26px; padding-bottom: 26px; }
.ib-qz-free { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 50%;
  background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--success) 6%, transparent); }
.ib-qz-free-t { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ib-qz-freestat { margin-top: 14px; font-size: 22px; font-weight: 800; color: var(--success); }
.ib-qz-freestat span { font-size: 11px; font-weight: 600; color: var(--text3); letter-spacing: .06em; text-transform: uppercase; }

/* repayment rows */
.ib-qz-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line);
  transition: background .25s ease; border-radius: 10px; }
.ib-qz-row:last-of-type { border-bottom: 0; }
.ib-qz-row.clear { opacity: .45; }
.ib-qz-name { width: 66px; flex: none; font-size: 13px; font-weight: 700; color: var(--text); }
.ib-qz-bar { flex: 1; min-width: 24px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ib-qz-bar i { display: block; height: 100%; border-radius: inherit; transition: width .5s var(--ease-out); }
.ib-qz-owed { width: 44px; flex: none; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--text2); font-variant-numeric: tabular-nums; }
.ib-qz-step { display: flex; align-items: center; gap: 2px; flex: none; }
.ib-qz-step b { min-width: 24px; text-align: center; font-size: 14px; font-weight: 800; color: var(--text3); font-variant-numeric: tabular-nums; transition: color .2s ease; }
.ib-qz-step b.on { color: var(--success); }
/* 38px box inside a 44px hit area — comfortable on a phone without looking heavy */
.ib-qz-b { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line2);
  background: var(--glass); color: var(--text3); touch-action: manipulation;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .1s var(--ease-out); }
.ib-qz-b::after { content: ''; position: absolute; inset: -3px; }
.ib-qz-b.add { border-color: color-mix(in srgb, var(--success) 32%, transparent); color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent); }
.ib-qz-b:active { transform: scale(.9); }
.ib-qz-b.add:active { background: color-mix(in srgb, var(--success) 22%, transparent); }
.ib-qz-b:disabled { opacity: .3; }

/* projection */
.ib-qz-eta { margin-top: 12px; padding: 10px 12px; border-radius: 13px; border: 1px dashed var(--line3); background: var(--glass); }

/* per-prayer precision */
.ib-qz-per { padding: 9px 0; border-bottom: 1px solid var(--line); }
.ib-qz-per:last-child { border-bottom: 0; }
.ib-qz-pn { font-size: 12.5px; font-weight: 700; color: var(--text); }
.ib-qz-per .bar { margin: 6px 0 5px; }
.ib-qz-pmeta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10.5px; font-variant-numeric: tabular-nums; }

/* backlog setup */
.ib-qz-ins { display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 8px; }
.ib-qz-in { display: flex; flex-direction: column; gap: 4px; }
.ib-qz-in span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); }
.ib-qz-in input { text-align: center; }
.ib-qz-target { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.ib-qz-target input { width: 74px; flex: none; text-align: center; }

/* ===================================================================== */
/* prayer matrix — 5 waqts × 8 weeks                                      */
/* ===================================================================== */
.ib-mx { display: flex; flex-direction: column; gap: 3px; }
.ib-mx-row { display: flex; align-items: center; gap: 8px; }
.ib-mx-name { width: 62px; flex: none; font-size: 10.5px; font-weight: 700; color: var(--text3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-mx-cells { display: grid; grid-template-columns: repeat(56, 1fr); gap: 1.5px; flex: 1; min-width: 0; }
.ib-mx-cells i { height: 14px; border-radius: 2px; background: var(--line); }
.ib-mx-cells i.s-jamaat { background: var(--success); box-shadow: 0 0 3px color-mix(in srgb, var(--success) 55%, transparent); }
.ib-mx-cells i.s-alone  { background: var(--info); }
.ib-mx-cells i.s-qaza   { background: var(--warning); }
.ib-mx-cells i.s-missed { background: var(--danger-text); }
.ib-mx-axis { display: flex; justify-content: space-between; margin: 6px 0 0 68px; font-size: 10px; color: var(--text3); font-weight: 600; }
.ib-mx-lg.s-jamaat { background: var(--success); }
.ib-mx-lg.s-alone  { background: var(--info); }
.ib-mx-lg.s-qaza   { background: var(--warning); }
.ib-mx-lg.s-missed { background: var(--danger-text); }
.ib-qz-free.fresh { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--warning) 6%, transparent); }
.ib-qz-axis { margin-left: 0; }