/* =========================================================================
   Amal Journal 1.9.0
   Complete stylesheet — tokens, shell, tabs, tracker, quran, duas, stats,
   calendar, prayer times, forbidden times, fasting banner, events,
   masjid toggle + chip, location picker, mobile, dark mode, reduced motion
   ========================================================================= */

/* CHANGELOG — 1.9.0:
   - Sprint 3 additions (see "Sprint 3 — User Data Depth" section near the
     bottom): favorite metadata popover, note history popover, search tabs,
     bulk favorite button, stats card, sidebar tag filter, note tags list.
   - All dark mode rules for the new components live inside the same section.
*/

/* CHANGELOG — 1.8.0:
   - Sprint 2 additions: share/copy buttons, night mode, focus mode,
     repeat popover + badge, hifz blur, verse range, sleep timer, modal
     focus trap visuals.
*/

/* CHANGELOG — 1.7.0:
   - .aj-toast z-index 9999 → 1000000.
   - .aj-audio-player moved to position: fixed.
   - Added .aj-app-title to replace inline styles on the shell h1.
*/

/* =========================================================================
   Tokens
   ========================================================================= */

.aj-app {
	--aj-bg: #ffffff;
	--aj-fg: #1f2933;
	--aj-muted: #6b7280;
	--aj-border: #e5e7eb;
	--aj-radius: 14px;

	--aj-jamaah: #0f766e;
	--aj-on-time: #16a34a;
	--aj-late: #f59e0b;
	--aj-not-prayed: #dc2626;
	--aj-excused: #64748b;
	--aj-done: #0f766e;
	--aj-skipped: #dc2626;

	--aj-brand: #2f80ed;
	--aj-brand-2: #7c3aed;
	--aj-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);

	--aj-arabic-font: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
	--aj-arabic-size: 1.9em;

	color: var(--aj-fg);
	font-size: 15px;
	line-height: 1.5;
	box-sizing: border-box;
}

.aj-app *, .aj-app *::before, .aj-app *::after { box-sizing: inherit; }

@media (prefers-color-scheme: dark) {
	.aj-app {
		--aj-bg: #14181f;
		--aj-fg: #e6e8eb;
		--aj-muted: #9aa4b2;
		--aj-border: #2a313b;
		--aj-shadow: none;
	}
}

/* =========================================================================
   Shell
   ========================================================================= */

.aj-shell {
	max-width: 640px;
	margin: 0 auto;
	padding: 0;
	background: #f1f3f5;
	min-height: 100vh;
	position: relative;
	padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	overscroll-behavior-y: contain;
	-webkit-overflow-scrolling: touch;
}

@media (prefers-color-scheme: dark) {
	.aj-shell { background: #0f1318; }
}

@media (min-width: 640px) {
	.aj-shell { border-left: 1px solid var(--aj-border); border-right: 1px solid var(--aj-border); }
}

.aj-app-title {
	padding: 16px 20px 0;
	margin: 0;
	font-size: 17px;
	color: var(--aj-fg);
}

.aj-app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 8px;
	background: var(--aj-bg);
}

.aj-app-header-text { display: flex; flex-direction: column; gap: 2px; }

.aj-app-greg {
	font-size: 18px;
	font-weight: 700;
	color: var(--aj-fg);
	line-height: 1.2;
}

.aj-app-hijri { font-size: 12px; color: var(--aj-muted); }

.aj-app-add {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--aj-brand);
	color: #fff;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(47, 128, 237, .35);
	transition: transform .15s, background .15s;
}
.aj-app-add:hover { background: #1f6fd6; transform: scale(1.05); }
.aj-app-add .aj-svg { line-height: 0; }

/* =========================================================================
   Weekly strip
   ========================================================================= */

.aj-week {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	padding: 10px 12px 14px;
	background: var(--aj-bg);
	border-bottom: 1px solid var(--aj-border);
	position: sticky;
	top: 0;
	z-index: 10;
	backdrop-filter: saturate(1.2) blur(8px);
}

.aj-week-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 0 6px;
	border-radius: 12px;
	text-decoration: none;
	color: var(--aj-muted);
	transition: background .15s, color .15s;
	text-align: center;
}

.aj-week-day:hover { background: rgba(127, 127, 127, .08); }
.aj-week-dow   { font-size: 10px; letter-spacing: .06em; font-weight: 600; }
.aj-week-month { font-size: 9px; letter-spacing: .06em; opacity: .8; line-height: 1; }
.aj-week-num   { font-size: 16px; font-weight: 700; color: var(--aj-fg); line-height: 1; }

.aj-week-day.is-current { background: var(--aj-brand); color: #fff; }
.aj-week-day.is-current .aj-week-num,
.aj-week-day.is-current .aj-week-dow,
.aj-week-day.is-current .aj-week-month { color: #fff; }

/* =========================================================================
   Panels
   ========================================================================= */

.aj-tab-panels {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 12px 12px 4px;
	transition: opacity .18s ease;
}

.aj-tab-panel { animation: aj-fade .15s ease-out; }
@keyframes aj-fade { from { opacity: .4; } to { opacity: 1; } }

/* =========================================================================
   Collapsible categories
   ========================================================================= */

.aj-category {
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: 14px;
	margin: 0 0 12px;
	overflow: hidden;
	transition: box-shadow .15s ease;
}

.aj-category[open] { box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }

.aj-category > summary.aj-category-title {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	margin: 0;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--aj-fg);
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .15s;
	min-height: 52px;
}

.aj-category > summary.aj-category-title::-webkit-details-marker { display: none; }
.aj-category > summary.aj-category-title:hover { background: rgba(127, 127, 127, .05); }
.aj-category > summary.aj-category-title:active { background: rgba(127, 127, 127, .08); }

.aj-category-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: rgba(47, 128, 237, .1);
	color: var(--aj-brand);
	flex-shrink: 0;
	transition: transform .15s ease, background-color .15s ease;
}

.aj-category-icon .aj-svg { line-height: 0; }
.aj-category-icon .aj-svg svg { width: 18px; height: 18px; }

.aj-category > summary.aj-category-title:hover .aj-category-icon { transform: scale(1.05); }
.aj-category[open] > summary.aj-category-title .aj-category-icon { transform: scale(1.08); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }

.aj-category-label {
	flex: 1;
	color: var(--aj-fg);
	font-weight: 700;
	letter-spacing: .04em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.aj-category-count {
	font-size: 11px;
	font-weight: 700;
	color: var(--aj-brand);
	background: rgba(47, 128, 237, .1);
	border: 1px solid rgba(47, 128, 237, .2);
	padding: 2px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

.aj-category-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--aj-muted);
	opacity: .7;
	transition: transform .2s ease, opacity .15s ease;
	flex-shrink: 0;
}

.aj-category > summary:hover .aj-category-arrow { opacity: 1; }
.aj-category[open] > summary.aj-category-title .aj-category-arrow { transform: rotate(180deg); }

.aj-category > .aj-deed-list {
	padding: 4px 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	animation: aj-cat-open .2s ease-out;
}

@keyframes aj-cat-open {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.aj-category[data-aj-category="prayers"]  .aj-category-icon { color: var(--aj-brand);  background: rgba(47, 128, 237, .1); }
.aj-category[data-aj-category="fasting"]  .aj-category-icon { color: var(--aj-late);   background: rgba(245, 158, 11, .12); }
.aj-category[data-aj-category="learning"] .aj-category-icon { color: var(--aj-brand-2); background: rgba(124, 58, 237, .1); }
.aj-category[data-aj-category="dhikr"]    .aj-category-icon { color: var(--aj-jamaah); background: rgba(15, 118, 110, .1); }
.aj-category[data-aj-category="durood"]   .aj-category-icon { color: #db2777;          background: rgba(219, 39, 119, .1); }
.aj-category[data-aj-category="asma"]     .aj-category-icon { color: #ea580c;          background: rgba(234, 88, 12, .1); }
.aj-category[data-aj-category="social"]   .aj-category-icon { color: #0891b2;          background: rgba(8, 145, 178, .1); }
.aj-category[data-aj-category="ramadan"]  .aj-category-icon { color: var(--aj-brand-2); background: rgba(124, 58, 237, .12); }
.aj-category[data-aj-category="quran"]    .aj-category-icon { color: var(--aj-brand);  background: rgba(47, 128, 237, .1); }
.aj-category[data-aj-category="hifz"]     .aj-category-icon { color: var(--aj-brand-2); background: rgba(124, 58, 237, .1); }
.aj-category[data-aj-category="adhkar"]   .aj-category-icon { color: var(--aj-jamaah); background: rgba(15, 118, 110, .1); }

.aj-category[data-aj-category="durood"]  .aj-category-count { color: #db2777; background: rgba(219, 39, 119, .1); border-color: rgba(219, 39, 119, .2); }
.aj-category[data-aj-category="asma"]    .aj-category-count { color: #ea580c; background: rgba(234, 88, 12, .1); border-color: rgba(234, 88, 12, .2); }
.aj-category[data-aj-category="ramadan"] .aj-category-count { color: var(--aj-brand-2); background: rgba(124, 58, 237, .1); border-color: rgba(124, 58, 237, .2); }

/* =========================================================================
   Category hint
   ========================================================================= */

.aj-cat-hint {
	margin: 0 12px 10px;
	padding: 8px 12px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--aj-brand-2);
	background: rgba(124, 58, 237, .08);
	border: 1px solid rgba(124, 58, 237, .18);
	border-radius: 10px;
}

/* =========================================================================
   Fasting + Event banners
   ========================================================================= */

.aj-fast-banner,
.aj-event-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 12px 10px;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.4;
}

.aj-fast-banner {
	background: #eef2ff;
	border: 1px solid #c7d2fe;
	color: #3730a3;
}
.aj-fast-icon { font-size: 18px; line-height: 1; }
.aj-fast-text { display: flex; flex-direction: column; gap: 2px; }
.aj-fast-text strong { font-size: 12.5px; font-weight: 700; }
.aj-fast-reason { font-size: 12px; color: #4338ca; }

.aj-event-banner {
	background: #fef3c7;
	border: 1px solid #fde68a;
	color: #78350f;
	font-weight: 600;
}

/* =========================================================================
   Forbidden times card
   ========================================================================= */

.aj-forbidden-card {
	margin: 4px 12px 12px;
	padding: 12px 14px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 12px;
	color: #78350f;
}

.aj-forbidden-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.aj-forbidden-icon { font-size: 16px; line-height: 1; }
.aj-forbidden-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #92400e; }

.aj-forbidden-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.aj-forbidden-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed rgba(180, 83, 9, .18); }
.aj-forbidden-list li:last-child { border-bottom: none; }

.aj-forbidden-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #78350f;
}

.aj-forbidden-label span[aria-hidden="true"] { font-size: 14px; line-height: 1; }

.aj-forbidden-time {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	font-weight: 700;
	color: #92400e;
	background: rgba(245, 158, 11, .12);
	border: 1px solid rgba(245, 158, 11, .3);
	border-radius: 999px;
	padding: 2px 9px;
	white-space: nowrap;
}

.aj-forbidden-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: #92400e; opacity: .85; }

@media (max-width: 640px) {
	.aj-forbidden-card { margin: 4px 10px 10px; padding: 10px 12px; }
	.aj-forbidden-title { font-size: 11px; }
	.aj-forbidden-label { font-size: 12px; }
	.aj-forbidden-time  { font-size: 12px; padding: 2px 8px; }
	.aj-forbidden-note  { font-size: 11px; }
}

/* =========================================================================
   Deed card
   ========================================================================= */

.aj-deed-card {
	position: relative;
	background: var(--aj-bg);
	border-radius: 14px;
	box-shadow: var(--aj-shadow);
	overflow: hidden;
	transition: box-shadow .15s;
}

.aj-deed-card:hover { box-shadow: 0 2px 6px rgba(16, 24, 40, .09); }

.aj-deed-main {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 16px 18px;
	background: transparent;
	border: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	font-size: 17px;
	color: var(--aj-fg);
	min-height: 68px;
	z-index: 1;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .15s;
}
.aj-deed-main:active { background-color: rgba(127, 127, 127, .05); }

.aj-deed-icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--aj-brand);
	position: relative;
	z-index: 2;
}

.aj-deed-time {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 700;
	color: var(--aj-brand);
	background: #eaf2fe;
	border: 1px solid rgba(47, 128, 237, .25);
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
	position: relative;
	z-index: 2;
	min-width: 48px;
	text-align: center;
	line-height: 1;
}

.aj-deed-card.aj-jamaah     .aj-deed-time,
.aj-deed-card.aj-on-time    .aj-deed-time,
.aj-deed-card.aj-late       .aj-deed-time,
.aj-deed-card.aj-not-prayed .aj-deed-time,
.aj-deed-card.aj-excused    .aj-deed-time,
.aj-deed-card.aj-done       .aj-deed-time,
.aj-deed-card.aj-skipped    .aj-deed-time,
.aj-deed-card.aj-count-set  .aj-deed-time {
	background: #ffffff;
	border-color: rgba(0, 0, 0, .12);
}

.aj-category[data-aj-category="asma"]     .aj-deed-time,
.aj-category[data-aj-category="dhikr"]    .aj-deed-time,
.aj-category[data-aj-category="durood"]   .aj-deed-time,
.aj-category[data-aj-category="ramadan"]  .aj-deed-time,
.aj-category[data-aj-category="fasting"]  .aj-deed-time,
.aj-category[data-aj-category="learning"] .aj-deed-time,
.aj-category[data-aj-category="social"]   .aj-deed-time,
.aj-category[data-aj-category="adhkar"]   .aj-deed-time { display: none; }

.aj-masjid-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(15, 118, 110, .12);
	color: #0f766e;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	margin-right: 4px;
}

.aj-masjid-chip .aj-svg svg { width: 14px; height: 14px; }

.aj-deed-name {
	font-weight: 500;
	flex: 1;
	position: relative;
	z-index: 2;
	color: var(--aj-fg);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aj-deed-state,
.aj-deed-count-badge {
	font-size: 12px;
	font-weight: 600;
	color: var(--aj-muted);
	position: relative;
	z-index: 2;
	white-space: nowrap;
	flex-shrink: 0;
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
	line-height: 1.2;
}

.aj-deed-count-badge { font-size: 14px; font-weight: 700; color: var(--aj-fg); }

.aj-deed-fill {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 40%;
	background: #c7cad0;
	clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
	z-index: 0;
	transition: background .25s cubic-bezier(.2, .8, .2, 1), transform .25s;
	pointer-events: none;
}

@media (prefers-color-scheme: dark) { .aj-deed-fill { background: #2a313b; } }

.aj-deed-card.aj-jamaah     .aj-deed-fill { background: var(--aj-jamaah); }
.aj-deed-card.aj-on-time    .aj-deed-fill { background: var(--aj-on-time); }
.aj-deed-card.aj-late       .aj-deed-fill { background: var(--aj-late); }
.aj-deed-card.aj-not-prayed .aj-deed-fill { background: var(--aj-not-prayed); }
.aj-deed-card.aj-excused    .aj-deed-fill { background: var(--aj-excused); }
.aj-deed-card.aj-done       .aj-deed-fill { background: var(--aj-done); }
.aj-deed-card.aj-skipped    .aj-deed-fill { background: var(--aj-skipped); }
.aj-deed-card.aj-count-set  .aj-deed-fill { background: var(--aj-jamaah); }

.aj-deed-card.aj-jamaah     .aj-deed-state,
.aj-deed-card.aj-jamaah     .aj-deed-count-badge,
.aj-deed-card.aj-on-time    .aj-deed-state,
.aj-deed-card.aj-on-time    .aj-deed-count-badge,
.aj-deed-card.aj-late       .aj-deed-state,
.aj-deed-card.aj-late       .aj-deed-count-badge,
.aj-deed-card.aj-not-prayed .aj-deed-state,
.aj-deed-card.aj-not-prayed .aj-deed-count-badge,
.aj-deed-card.aj-excused    .aj-deed-state,
.aj-deed-card.aj-excused    .aj-deed-count-badge,
.aj-deed-card.aj-done       .aj-deed-state,
.aj-deed-card.aj-done       .aj-deed-count-badge,
.aj-deed-card.aj-skipped    .aj-deed-state,
.aj-deed-card.aj-skipped    .aj-deed-count-badge,
.aj-deed-card.aj-count-set  .aj-deed-state,
.aj-deed-card.aj-count-set  .aj-deed-count-badge { color: #fff; }

/* =========================================================================
   Drawer
   ========================================================================= */

.aj-deed-drawer {
	padding: 6px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-top: 1px solid var(--aj-border);
	background: var(--aj-bg);
	animation: aj-slide-down .2s ease-out;
}
@keyframes aj-slide-down {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.aj-deed-card .aj-statuses { gap: 6px; }

.aj-deed-card .aj-status {
	padding: 7px 12px;
	font-size: 12px;
	border-radius: 999px;
	background: rgba(127, 127, 127, .06);
	border-color: transparent;
}

.aj-deed-card .aj-status.is-active { color: #fff; }

.aj-masjid-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(15, 118, 110, .06);
	border: 1px solid rgba(15, 118, 110, .18);
	color: #0f766e;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}

.aj-masjid-toggle input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #0f766e;
	cursor: pointer;
}

.aj-masjid-icon { display: inline-flex; align-items: center; color: #0f766e; }

/* =========================================================================
   Status pills
   ========================================================================= */

.aj-status {
	border: 1px solid var(--aj-border);
	background: transparent;
	color: var(--aj-fg);
	border-radius: 999px;
	padding: 6px 10px;
	font-size: 12px;
	cursor: pointer;
	line-height: 1;
	transition: background-color .15s, color .15s, transform .1s;
}
.aj-status:hover { background: rgba(127, 127, 127, .08); }
.aj-status:active { transform: scale(.96); }
.aj-status.is-active { color: #fff; border-color: transparent; }

.aj-status-jamaah.is-active     { background: var(--aj-jamaah); }
.aj-status-on_time.is-active    { background: var(--aj-on-time); }
.aj-status-late.is-active       { background: var(--aj-late); }
.aj-status-not_prayed.is-active { background: var(--aj-not-prayed); }
.aj-status-excused.is-active    { background: var(--aj-excused); }
.aj-status-done.is-active       { background: var(--aj-done); }
.aj-status-skipped.is-active    { background: var(--aj-skipped); }

/* =========================================================================
   Count control
   ========================================================================= */

.aj-count { display: flex; align-items: center; gap: 6px; }

.aj-count-btn {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1px solid var(--aj-border);
	background: transparent;
	color: var(--aj-fg);
	font-size: 18px;
	cursor: pointer;
	line-height: 1;
}

.aj-count-input {
	width: 70px;
	text-align: center;
	border: 1px solid var(--aj-border);
	border-radius: 8px;
	padding: 6px;
	background: transparent;
	color: var(--aj-fg);
	font-size: 14px;
}

.aj-count-goal { font-size: 12px; color: var(--aj-muted); margin-left: auto; }

/* =========================================================================
   Fields
   ========================================================================= */

.aj-extra { display: flex; flex-direction: column; gap: 8px; }
.aj-field { display: flex; flex-direction: column; gap: 4px; }

.aj-field-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--aj-muted);
}

.aj-field select,
.aj-field input,
.aj-field textarea {
	border: 1px solid var(--aj-border);
	border-radius: 8px;
	padding: 6px 8px;
	background: transparent;
	color: var(--aj-fg);
	font-size: 14px;
	width: 100%;
	font-family: inherit;
}

/* =========================================================================
   Deed footer
   ========================================================================= */

.aj-deed-foot {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
}

.aj-clear,
.aj-delete-deed {
	background: transparent;
	border: none;
	color: var(--aj-muted);
	font-size: 12px;
	cursor: pointer;
	padding: 4px 0;
	text-decoration: underline;
}

.aj-clear:hover       { color: var(--aj-fg); }
.aj-delete-deed:hover { color: var(--aj-not-prayed); }

/* =========================================================================
   Bottom nav (6 tabs)
   ========================================================================= */

.aj-bottom-nav {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100%;
	max-width: 640px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: var(--aj-bg);
	border-top: 1px solid var(--aj-border);
	padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
	z-index: 100;
	box-shadow: 0 -1px 3px rgba(16, 24, 40, .06);
}

.aj-bottom-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	flex: 1;
	text-decoration: none;
	color: var(--aj-muted);
	padding: 4px 0;
	position: relative;
	transition: color .15s;
	min-width: 0;
}

.aj-bottom-tab-icon { line-height: 0; display: inline-flex; }
.aj-bottom-tab-icon svg { width: 20px; height: 20px; display: block; }

.aj-bottom-tab-label {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	line-height: 1;
}

.aj-bottom-tab:hover { color: var(--aj-fg); }
.aj-bottom-tab.is-active { color: var(--aj-brand); }

.aj-bottom-tab.is-active::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 50%;
	width: 22px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--aj-brand);
	transform: translateX(-50%);
}

@media (max-width: 380px) {
	.aj-bottom-tab-label { font-size: 8.5px; }
	.aj-bottom-tab-icon svg { width: 18px; height: 18px; }
}

/* =========================================================================
   Modal
   ========================================================================= */

.aj-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

@media (min-width: 640px) { .aj-modal { align-items: center; } }

.aj-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }

.aj-modal-panel {
	position: relative;
	background: var(--aj-bg);
	width: 100%;
	max-width: 520px;
	border-radius: 16px 16px 0 0;
	padding: 20px;
	z-index: 1;
	max-height: 90vh;
	overflow-y: auto;
	animation: aj-slide-up .2s ease-out;
}

@media (min-width: 640px) { .aj-modal-panel { border-radius: 16px; } }

@keyframes aj-slide-up {
	from { transform: translateY(20px); opacity: .6; }
	to   { transform: translateY(0);    opacity: 1; }
}

.aj-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.aj-modal-head h2 { font-size: 17px; margin: 0; }

.aj-modal-close {
	background: transparent;
	border: none;
	color: var(--aj-muted);
	cursor: pointer;
	padding: 4px;
	line-height: 0;
}
.aj-modal-close:hover { color: var(--aj-fg); }

.aj-create-form { display: flex; flex-direction: column; gap: 12px; }
.aj-create-actions { display: flex; gap: 8px; margin-top: 4px; }

.aj-btn-primary,
.aj-btn-ghost {
	border-radius: 8px;
	padding: 8px 16px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
	font-family: inherit;
}
.aj-btn-primary { background: var(--aj-brand); color: #fff; }
.aj-btn-primary:hover { opacity: .9; }
.aj-btn-ghost {
	background: transparent;
	color: var(--aj-fg);
	border-color: var(--aj-border);
	text-decoration: none;
	display: inline-block;
}

/* =========================================================================
   Settings
   ========================================================================= */

.aj-settings-section {
	background: var(--aj-bg);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 12px;
	box-shadow: var(--aj-shadow);
}

.aj-settings-section h3 {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--aj-muted);
	margin: 0 0 12px;
}

.aj-settings-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--aj-border);
	font-size: 14px;
}

.aj-settings-row:last-of-type { border-bottom: none; }
.aj-settings-label { color: var(--aj-muted); }
.aj-settings-value { color: var(--aj-fg); font-weight: 600; }
.aj-settings-note { font-size: 12px; color: var(--aj-muted); margin: 12px 0 0; }
.aj-settings-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.aj-settings-deeds { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.aj-settings-deeds li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--aj-border);
	font-size: 14px;
}
.aj-settings-deeds li:last-child { border-bottom: none; }
.aj-settings-deed-label { flex: 1; font-weight: 600; }
.aj-settings-deed-type { font-size: 11px; color: var(--aj-muted); text-transform: uppercase; letter-spacing: .04em; }

/* =========================================================================
   Stats
   ========================================================================= */

.aj-stats-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}
.aj-range-nav { display: flex; gap: 6px; flex-wrap: wrap; }

.aj-range {
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid var(--aj-border);
	color: var(--aj-muted);
	text-decoration: none;
	font-size: 12px;
}
.aj-range.is-active { color: #fff; background: var(--aj-brand); border-color: var(--aj-brand); }

.aj-subtitle { font-size: 13px; color: var(--aj-muted); margin: 0; }

.aj-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin: 16px 0;
}

.aj-kpi {
	padding: 12px;
	border: 1px solid var(--aj-border);
	border-radius: 12px;
	background: var(--aj-bg);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.aj-kpi-value { font-size: 22px; font-weight: 700; }
.aj-kpi-label { font-size: 12px; color: var(--aj-muted); }

.aj-section { margin-top: 24px; }
.aj-section h3 { font-size: 15px; margin: 0 0 12px; }
.aj-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.aj-card { border: 1px solid var(--aj-border); border-radius: 12px; padding: 12px; background: var(--aj-bg); }
.aj-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.aj-card-head h4 { font-size: 14px; margin: 0; }
.aj-card-rate { font-weight: 700; font-size: 14px; }

.aj-stack { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(127, 127, 127, .12); }
.aj-stack-seg { height: 100%; }
.aj-stack-seg.aj-done       { background: var(--aj-done); }
.aj-stack-seg.aj-not-prayed { background: var(--aj-not-prayed); }
.aj-stack-seg.aj-excused    { background: var(--aj-excused); }

.aj-legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; }
.aj-legend li { display: flex; align-items: center; gap: 4px; }
.aj-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--aj-muted); }
.aj-dot.aj-done       { background: var(--aj-done); }
.aj-dot.aj-not-prayed { background: var(--aj-not-prayed); }
.aj-dot.aj-excused    { background: var(--aj-excused); }
.aj-legend-label { color: var(--aj-muted); }
.aj-legend-value { font-weight: 600; }

.aj-heatmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); gap: 4px; }
.aj-cell { aspect-ratio: 1 / 1; border-radius: 4px; background: rgba(127, 127, 127, .08); display: inline-block; }
.aj-cell.is-complete { background: var(--aj-done); }
.aj-cell.is-partial  { background: var(--aj-late); }
.aj-cell.is-empty    { background: rgba(127, 127, 127, .12); }
.aj-cell.is-excused  { background: var(--aj-excused); }

.aj-heatmap-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--aj-muted); }
.aj-heatmap-legend .aj-cell { width: 12px; height: 12px; aspect-ratio: auto; }

.aj-reason-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.aj-reason-list li { display: grid; grid-template-columns: 140px 1fr 40px; gap: 8px; align-items: center; font-size: 13px; }
.aj-reason-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj-reason-bar { height: 8px; background: rgba(127, 127, 127, .12); border-radius: 999px; overflow: hidden; }
.aj-reason-bar > span { display: block; height: 100%; background: var(--aj-brand); }
.aj-reason-count { text-align: right; font-weight: 600; }

/* =========================================================================
   Calendar (Hijri)
   ========================================================================= */

.aj-calendar { display: flex; flex-direction: column; gap: 12px; }

.aj-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: 14px;
	box-shadow: var(--aj-shadow);
}

.aj-cal-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: transparent;
	border: 1px solid var(--aj-border);
	color: var(--aj-fg);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	flex-shrink: 0;
	transition: background-color .15s, transform .1s;
}
.aj-cal-nav:hover { background: rgba(127, 127, 127, .08); }
.aj-cal-nav:active { transform: scale(.96); }

.aj-cal-title-wrap { text-align: center; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.aj-cal-title { font-weight: 700; font-size: 17px; color: var(--aj-fg); line-height: 1.2; }
.aj-cal-subtitle { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--aj-muted); }

.aj-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
	padding: 12px;
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: 14px;
	box-shadow: var(--aj-shadow);
}

.aj-cal-dow {
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aj-muted);
	padding: 6px 0;
}

.aj-cal-cell {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	min-height: 44px;
	border-radius: 10px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--aj-fg);
	text-decoration: none;
	transition: background-color .15s, border-color .15s, transform .1s;
	-webkit-tap-highlight-color: transparent;
}
.aj-cal-cell:hover { background: rgba(127, 127, 127, .06); border-color: var(--aj-border); }
.aj-cal-cell:active { transform: scale(.96); }

.aj-cal-cell-empty { pointer-events: none; visibility: hidden; }

.aj-cal-cell.is-today {
	background: var(--aj-brand);
	color: #fff;
	border-color: var(--aj-brand);
	box-shadow: 0 2px 6px rgba(47, 128, 237, .35);
}
.aj-cal-cell.is-today .aj-cal-hijri,
.aj-cal-cell.is-today .aj-cal-greg { color: #fff; }
.aj-cal-cell.is-today .aj-cal-dot { background: #fff; }

.aj-cal-cell.has-entries:not(.is-today) { background: rgba(47, 128, 237, .08); }
.aj-cal-cell.has-event { background: rgba(245, 158, 11, .1); }

.aj-cal-hijri { font-size: 15px; font-weight: 700; line-height: 1; }
.aj-cal-greg { font-size: 9px; color: var(--aj-muted); margin-top: 2px; line-height: 1; }

.aj-cal-dot {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--aj-brand);
}

.aj-cal-event-dot,
.aj-cal-fast-dot {
	position: absolute;
	bottom: 3px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 9px;
	line-height: 1;
}

.aj-cal-footer { text-align: center; padding: 10px 12px; font-size: 12px; color: var(--aj-muted); }

@media (max-width: 640px) {
	.aj-cal-header { padding: 12px 14px; }
	.aj-cal-nav    { width: 36px; height: 36px; font-size: 18px; }
	.aj-cal-title  { font-size: 15px; }
	.aj-cal-grid   { gap: 4px; padding: 10px; }
	.aj-cal-cell   { min-height: 42px; border-radius: 8px; }
	.aj-cal-hijri  { font-size: 14px; }
	.aj-cal-greg   { font-size: 8px; }
}

/* =========================================================================
   Quran tab
   ========================================================================= */

.aj-quran { display: flex; flex-direction: column; gap: 16px; }

.aj-quran-rings {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 480px) {
	.aj-quran-rings { grid-template-columns: 1fr; }
}

.aj-quran-ring {
	position: relative;
	padding: 16px;
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: 14px;
	box-shadow: var(--aj-shadow);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.aj-quran-ring svg { display: block; }

.aj-quran-ring-value {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -70%);
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	pointer-events: none;
}

.aj-quran-ring-value strong { font-size: 22px; font-weight: 700; color: var(--aj-fg); }
.aj-quran-ring-value span { font-size: 11px; color: var(--aj-muted); margin-top: 3px; }

.aj-quran-ring-label {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--aj-muted);
	text-align: center;
}

.aj-quran-list-wrap {
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: 14px;
	padding: 14px;
	box-shadow: var(--aj-shadow);
}

.aj-quran-list-wrap h3 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--aj-muted);
	margin: 0 0 12px;
}

/* ---------- Juz grid ---------- */
.aj-juz-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 6px;
}

.aj-juz-cell {
	height: 44px;
	min-height: 44px;
	padding: 0;
	border-radius: 10px;
	border: 1px solid var(--aj-border);
	background: transparent;
	color: var(--aj-fg);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s, color .15s, transform .1s, border-color .15s;
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.aj-juz-cell:hover { background: rgba(47, 128, 237, .06); }
.aj-juz-cell:active { transform: scale(.94); }

.aj-juz-cell.is-done {
	background: var(--aj-brand);
	color: #fff;
	border-color: var(--aj-brand);
	box-shadow: 0 2px 6px rgba(47, 128, 237, .3);
}

.aj-juz-grid-hifz .aj-juz-cell.is-done {
	background: var(--aj-brand-2);
	border-color: var(--aj-brand-2);
	box-shadow: 0 2px 6px rgba(124, 58, 237, .3);
}

@media (prefers-color-scheme: dark) {
	.aj-juz-cell { border-color: var(--aj-border); }
	.aj-juz-cell:hover { background: rgba(47, 128, 237, .12); }
}

.aj-juz-cell-wrap {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 4px;
	width: 100%;
}

.aj-juz-cell-wrap .aj-juz-cell {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

.aj-juz-read {
	flex: 0 0 auto;
	width: 36px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--aj-border);
	background: var(--aj-bg);
	color: var(--aj-fg);
	border-radius: 10px;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, border-color .15s, color .15s;
	-webkit-tap-highlight-color: transparent;
}
.aj-juz-read:hover {
	background: rgba(47, 128, 237, .08);
	border-color: var(--aj-brand);
}
.aj-juz-read:focus-visible {
	outline: 2px solid var(--aj-brand);
	outline-offset: 2px;
}

/* ---------- Reader modal ---------- */
.aj-quran-reader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
}
.aj-quran-reader[hidden] { display: none !important; }
.aj-quran-reader-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
}
.aj-quran-reader-panel {
	position: relative;
	margin: auto;
	background: var(--aj-bg);
	color: var(--aj-fg);
	width: min(1100px, 96vw);
	height: min(90vh, 900px);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.aj-quran-reader-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
	border-bottom: 1px solid var(--aj-border);
}
.aj-quran-reader-head h3 { margin: 0; font-size: 1.1rem; }
.aj-quran-reader-close {
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: var(--aj-muted);
	padding: 0 6px;
	border-radius: 4px;
}
.aj-quran-reader-close:hover { color: var(--aj-fg); background: rgba(127, 127, 127, .1); }
.aj-quran-reader-body {
	display: flex;
	flex: 1;
	min-height: 0;
}
.aj-quran-reader-sidebar {
	width: 240px;
	border-inline-end: 1px solid var(--aj-border);
	overflow-y: auto;
	background: rgba(127, 127, 127, .04);
}
.aj-quran-reader-sidebar button {
	display: block;
	width: 100%;
	text-align: start;
	padding: 10px 14px;
	background: none;
	border: none;
	border-bottom: 1px solid var(--aj-border);
	cursor: pointer;
	font-size: .92rem;
	color: inherit;
	font-family: inherit;
	transition: background .15s;
}
.aj-quran-reader-sidebar button:hover { background: rgba(47, 128, 237, .08); }
.aj-quran-reader-sidebar button.is-active { background: var(--aj-brand); color: #fff; font-weight: 600; }
.aj-quran-reader-sidebar button.is-active small { color: rgba(255, 255, 255, .85); }
.aj-quran-reader-sidebar button small { color: var(--aj-muted); }
.aj-quran-reader-content {
	flex: 1;
	overflow-y: auto;
	padding: 20px 26px;
}
.aj-quran-reader-hint {
	color: var(--aj-muted);
	text-align: center;
	margin-top: 3em;
}

/* ---------- Ayah display ---------- */
.amal-quran-title { margin: 0 0 .25em; font-size: 1.35em; }
.amal-quran-meta { margin: 0 0 1.5em; color: var(--aj-muted); font-size: .9em; }
.amal-quran-ayah { margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: 1px dashed var(--aj-border); position: relative; transition: background-color .2s; border-radius: 8px; }
.amal-quran-ayah:last-child { border-bottom: none; }
.amal-quran-arabic {
	font-family: var(--aj-arabic-font);
	font-size: var(--aj-arabic-size);
	line-height: 2.2;
	-webkit-font-feature-settings: "kern" 1, "liga" 1;
	font-feature-settings: "kern" 1, "liga" 1;
}
.amal-quran-num { color: var(--aj-brand); font-size: 1.1em; margin: 0 .35em; }
.amal-quran-translation { margin: .6em 0 0; font-style: italic; color: var(--aj-fg); line-height: 1.6; font-size: .95em; }
.amal-quran-error { color: var(--aj-not-prayed); }

.amal-quran-pronunciation {
	margin: .5em 0 0;
	padding: 8px 12px;
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	border-radius: 6px;
	color: #78350f;
	font-family: 'Noto Sans Bengali', 'Kalpurush', 'SolaimanLipi', sans-serif;
	font-size: 13.5px;
	line-height: 1.75;
	direction: ltr;
	text-align: left;
}
.amal-quran-pronunciation .aj-pron-label {
	font-weight: 700;
	color: #92400e;
	margin-right: 6px;
}

.amal-quran-surah {
	max-width: 800px;
	margin: 2em auto;
	padding: 1.5em;
	background: var(--aj-bg);
	border-radius: 8px;
	border: 1px solid var(--aj-border);
}

/* =========================================================================
   Quran — Favorites, Notes, Highlights, Resume (Tier 1)
   ========================================================================= */

.amal-quran-ayah.hl-yellow { background: rgba(250, 204, 21, .18); padding: 10px 12px; }
.amal-quran-ayah.hl-green  { background: rgba(34, 197, 94, .16);  padding: 10px 12px; }
.amal-quran-ayah.hl-blue   { background: rgba(59, 130, 246, .16); padding: 10px 12px; }
.amal-quran-ayah.hl-pink   { background: rgba(236, 72, 153, .16); padding: 10px 12px; }
.amal-quran-ayah.hl-purple { background: rgba(168, 85, 247, .16); padding: 10px 12px; }
.amal-quran-ayah.hl-orange { background: rgba(249, 115, 22, .16); padding: 10px 12px; }
.amal-quran-ayah.aj-audio-playing { background: rgba(47, 128, 237, .1); }

.aj-ayah-tools {
	display: flex;
	gap: 4px;
	margin-top: 8px;
	flex-wrap: wrap;
	justify-content: flex-start;
	direction: ltr;
}
.aj-ayah-tool {
	border: 1px solid var(--aj-border);
	background: var(--aj-bg);
	color: var(--aj-fg);
	width: 32px;
	height: 32px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, border-color .15s, transform .1s;
	padding: 0;
	position: relative;
}
.aj-ayah-tool:hover { background: rgba(47, 128, 237, .08); border-color: var(--aj-brand); }
.aj-ayah-tool:active { transform: scale(.94); }
.aj-ayah-tool.is-fav { background: #fef3c7; border-color: #f59e0b; color: #b45309; }
.aj-ayah-tool.has-note::after {
	content: '';
	position: absolute;
	top: -2px;
	right: -2px;
	width: 8px;
	height: 8px;
	background: var(--aj-brand);
	border-radius: 50%;
	border: 2px solid var(--aj-bg);
}
.aj-ayah-tool.aj-tool-play { color: #0f766e; }
.aj-ayah-tool.aj-tool-play:hover { border-color: #0f766e; background: rgba(15, 118, 110, .08); }

.aj-hl-picker {
	display: flex;
	gap: 6px;
	margin-top: 6px;
	padding: 8px;
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(16, 24, 40, .1);
	direction: ltr;
}
.aj-hl-swatch {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 0;
	transition: transform .12s, border-color .12s;
}
.aj-hl-swatch:hover { transform: scale(1.12); }
.aj-hl-swatch.is-active { border-color: var(--aj-fg); }
.aj-hl-swatch[data-color="yellow"] { background: #facc15; }
.aj-hl-swatch[data-color="green"]  { background: #22c55e; }
.aj-hl-swatch[data-color="blue"]   { background: #3b82f6; }
.aj-hl-swatch[data-color="pink"]   { background: #ec4899; }
.aj-hl-swatch[data-color="purple"] { background: #a855f7; }
.aj-hl-swatch[data-color="orange"] { background: #f97316; }
.aj-hl-swatch[data-color="none"] {
	background: linear-gradient(45deg, transparent 46%, #dc2626 46%, #dc2626 54%, transparent 54%), #fff;
	border: 2px solid var(--aj-border);
}

.aj-note-editor {
	margin-top: 8px;
	padding: 10px;
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(16, 24, 40, .06);
	direction: ltr;
}
.aj-note-editor textarea {
	width: 100%;
	min-height: 90px;
	padding: 10px;
	border: 1px solid var(--aj-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	resize: vertical;
	box-sizing: border-box;
	background: transparent;
	color: var(--aj-fg);
}
.aj-note-editor textarea:focus { outline: 2px solid var(--aj-brand); outline-offset: 0; }
.aj-note-actions { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }
.aj-note-btn {
	padding: 6px 14px;
	border-radius: 8px;
	border: 1px solid var(--aj-border);
	background: transparent;
	color: var(--aj-fg);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
}
.aj-note-btn:hover { background: rgba(127, 127, 127, .08); }
.aj-note-save { background: var(--aj-brand); color: #fff; border-color: var(--aj-brand); }
.aj-note-save:hover { background: #1f6fd6; }

.aj-ayah-note-display {
	margin-top: 8px;
	padding: 8px 12px;
	background: #eff6ff;
	border-left: 3px solid var(--aj-brand);
	border-radius: 6px;
	font-size: 13px;
	color: #1e3a8a;
	line-height: 1.6;
	white-space: pre-wrap;
	font-family: 'Noto Sans Bengali', 'Kalpurush', 'SolaimanLipi', sans-serif;
}

.aj-resume-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	padding: 12px 16px;
	background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
	border: 1px solid #bfdbfe;
	border-radius: 12px;
	color: #1e3a8a;
}
.aj-resume-banner-icon { font-size: 22px; line-height: 1; }
.aj-resume-banner-text { flex: 1; min-width: 0; }
.aj-resume-banner-text strong { display: block; font-size: 13.5px; margin-bottom: 2px; font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif; }
.aj-resume-banner-text small { font-size: 11.5px; opacity: .85; }
.aj-resume-banner-btn {
	background: var(--aj-brand);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	flex-shrink: 0;
	font-family: inherit;
}
.aj-resume-banner-btn:hover { background: #1f6fd6; }

.aj-quran-reader-sidebar button.aj-sidebar-favorites {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	color: #78350f;
	font-weight: 700;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
	padding: 12px 14px;
	text-align: center;
}
.aj-quran-reader-sidebar button.aj-sidebar-favorites:hover { background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%); }
.aj-quran-reader-sidebar button.aj-sidebar-favorites.is-active { background: #b45309; color: #fff; }

.aj-fav-empty {
	padding: 20px 14px;
	text-align: center;
	color: var(--aj-muted);
	font-size: 13px;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
}
.aj-fav-ref {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	color: #b45309;
	background: rgba(245, 158, 11, .12);
	border-radius: 999px;
	padding: 1px 7px;
	margin-right: 6px;
	letter-spacing: .02em;
}
.aj-fav-link { color: #2f80ed; text-decoration: underline; font-size: 13px; }
.aj-fav-link:hover { color: #1f6fd6; }

/* =========================================================================
   Quran Tier 2 — Ayah of the Day, Plan, Search, Audio, Settings, Tajweed
   ========================================================================= */

/* ---------- Ayah of the Day ---------- */
.aj-aotd-card {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border: 1px solid #fcd34d;
	border-radius: 14px;
	padding: 16px;
	margin: 0 0 12px;
}
.aj-aotd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.aj-aotd-icon { font-size: 22px; line-height: 1; }
.aj-aotd-label { font-weight: 700; color: #78350f; font-size: 14px; font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif; }
.aj-aotd-theme {
	margin-left: auto;
	font-size: 11px;
	background: rgba(180, 83, 9, .15);
	color: #92400e;
	padding: 2px 8px;
	border-radius: 999px;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
}
.aj-aotd-arabic {
	font-family: 'Amiri', 'Scheherazade New', serif;
	font-size: 1.5em;
	line-height: 2;
	text-align: right;
	direction: rtl;
	color: #1f2933;
	margin: 6px 0;
}
.aj-aotd-pron { font-size: 12.5px; color: #6b7280; font-style: italic; margin-bottom: 6px; }
.aj-aotd-trans {
	font-size: 14px;
	color: #1f2933;
	line-height: 1.7;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
}
.aj-aotd-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.aj-aotd-ref { font-size: 11.5px; font-weight: 700; color: #92400e; font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif; }
.aj-aotd-open {
	background: #b45309;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 7px 14px;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
}
.aj-aotd-open:hover { background: #92400e; }

/* ---------- Reading Plan ---------- */
.aj-plan-card {
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: 14px;
	padding: 14px;
	box-shadow: var(--aj-shadow);
	margin: 0 0 12px;
}
.aj-plan-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.aj-plan-icon { font-size: 18px; line-height: 1; }
.aj-plan-title { font-weight: 700; font-size: 13.5px; color: var(--aj-fg); font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif; }
.aj-plan-delete {
	margin-left: auto;
	background: transparent;
	border: none;
	color: var(--aj-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0 6px;
}
.aj-plan-delete:hover { color: var(--aj-not-prayed); }
.aj-plan-empty p {
	font-size: 12.5px;
	color: var(--aj-muted);
	line-height: 1.6;
	margin: 0 0 12px;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
}
.aj-plan-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.aj-plan-choice {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 10px 12px;
	background: rgba(47, 128, 237, .06);
	border: 1px solid rgba(47, 128, 237, .2);
	border-radius: 10px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}
.aj-plan-choice:hover { background: rgba(47, 128, 237, .12); border-color: var(--aj-brand); }
.aj-plan-choice strong { font-size: 13px; color: var(--aj-brand); font-weight: 700; font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif; }
.aj-plan-choice small { font-size: 11px; color: var(--aj-muted); font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif; }

.aj-plan-active { display: flex; flex-direction: column; gap: 10px; }
.aj-plan-meta strong { display: block; font-size: 14px; color: var(--aj-fg); font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif; }
.aj-plan-meta small { font-size: 11.5px; color: var(--aj-muted); font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif; }
.aj-plan-bar { height: 8px; background: rgba(127, 127, 127, .12); border-radius: 999px; overflow: hidden; }
.aj-plan-bar span { display: block; height: 100%; background: var(--aj-brand); transition: width .3s; }
.aj-plan-pct { font-size: 11.5px; color: var(--aj-brand); font-weight: 700; text-align: right; }
.aj-plan-today {
	padding: 10px 12px;
	background: rgba(47, 128, 237, .06);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.aj-plan-today-label { font-size: 12.5px; color: var(--aj-fg); font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif; }
.aj-plan-mark {
	padding: 6px 12px;
	border-radius: 8px;
	border: 1px solid var(--aj-brand);
	background: var(--aj-brand);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
}
.aj-plan-mark.is-done { background: var(--aj-done); border-color: var(--aj-done); }

/* ---------- Search ---------- */
.aj-search-trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: 12px;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	margin: 0 0 12px;
	color: var(--aj-muted);
}
.aj-search-trigger:hover { border-color: var(--aj-brand); }
.aj-search-icon { font-size: 15px; line-height: 1; }
.aj-search-placeholder { font-size: 13.5px; font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif; }

.aj-search-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 60px;
}
.aj-search-modal[hidden] { display: none !important; }
.aj-search-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.aj-search-panel {
	position: relative;
	background: var(--aj-bg);
	width: min(680px, 92vw);
	max-height: 80vh;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.aj-search-input-wrap {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid var(--aj-border);
	gap: 8px;
}
.aj-search-input {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 16px;
	color: var(--aj-fg);
	outline: none;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
}
.aj-search-close {
	background: transparent;
	border: none;
	font-size: 24px;
	color: var(--aj-muted);
	cursor: pointer;
	padding: 0 6px;
}
.aj-search-results { overflow-y: auto; max-height: calc(80vh - 60px); }
.aj-search-loading,
.aj-search-empty {
	padding: 20px;
	text-align: center;
	color: var(--aj-muted);
	font-size: 13px;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
}
.aj-search-result {
	display: block;
	width: 100%;
	text-align: left;
	padding: 12px 16px;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--aj-border);
	cursor: pointer;
	font-family: inherit;
}
.aj-search-result:hover { background: rgba(47, 128, 237, .06); }
.aj-search-ref { font-size: 11px; font-weight: 700; color: var(--aj-brand); margin-bottom: 4px; }
.aj-search-text {
	font-size: 13.5px;
	color: var(--aj-fg);
	line-height: 1.6;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
}

/* ---------- Audio player ---------- */
.aj-audio-player {
	position: fixed;
	left: 8px;
	right: 8px;
	bottom: calc(var(--aj-footer-nav-h, 60px) + 8px);
	z-index: 1000000;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #1f2937;
	color: #fff;
	border-radius: 12px;
	box-shadow: 0 -2px 20px rgba(0, 0, 0, .35);
}
.aj-audio-player[hidden] { display: none !important; }

.aj-audio-play,
.aj-audio-prev,
.aj-audio-next,
.aj-audio-speed {
	background: rgba(255, 255, 255, .1);
	border: none;
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.aj-audio-play:hover,
.aj-audio-prev:hover,
.aj-audio-next:hover,
.aj-audio-speed:hover { background: rgba(255, 255, 255, .2); }
.aj-audio-speed { width: auto; padding: 0 10px; font-weight: 700; }
.aj-audio-info { flex: 1; min-width: 0; }
.aj-audio-title {
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
}
.aj-audio-time { font-size: 10.5px; opacity: .7; font-family: ui-monospace, monospace; }
.aj-audio-reciter {
	background: rgba(255, 255, 255, .1);
	border: none;
	color: #fff;
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 11.5px;
	max-width: 130px;
	cursor: pointer;
}
.aj-audio-reciter option { color: #1f2937; }
.aj-audio-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(255, 255, 255, .1);
	border-radius: 0 0 12px 12px;
	overflow: hidden;
}
.aj-audio-progress span {
	display: block;
	height: 100%;
	background: var(--aj-brand);
	width: 0;
	transition: width .2s;
}

/* ---------- Reading settings panel ---------- */
.aj-quran-settings-btn {
	background: transparent;
	border: 1px solid var(--aj-border);
	width: 36px;
	height: 36px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	color: var(--aj-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.aj-quran-settings-btn:hover { border-color: var(--aj-brand); color: var(--aj-brand); }
.aj-quran-settings-panel {
	position: absolute;
	top: 64px;
	right: 16px;
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: 12px;
	padding: 16px;
	width: 260px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
	z-index: 10;
}
.aj-quran-settings-panel[hidden] { display: none !important; }
.aj-quran-settings-panel h4 {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--aj-fg);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.aj-set-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	font-size: 13px;
	color: var(--aj-fg);
}
.aj-set-row select,
.aj-set-row input[type="range"] { max-width: 120px; }
.aj-set-reset {
	width: 100%;
	margin-top: 10px;
	padding: 6px;
	background: transparent;
	border: 1px solid var(--aj-border);
	border-radius: 6px;
	cursor: pointer;
	font-size: 12px;
	color: var(--aj-muted);
}
.aj-set-reset:hover { color: var(--aj-fg); border-color: var(--aj-fg); }

/* ---------- Tajweed colors ---------- */
.tj-shadda { color: #dc2626; }
.tj-madd   { color: #0891b2; }
.aj-tajweed-legend {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 11px;
	padding: 6px 0;
}
.aj-tajweed-legend span { display: inline-flex; align-items: center; gap: 4px; }
.aj-tajweed-legend i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

/* =========================================================================
   Quran responsive
   ========================================================================= */

@media (max-width: 700px) {
	.aj-quran-reader-body { flex-direction: column; }
	.aj-quran-reader-sidebar {
		width: 100%;
		max-height: 160px;
		border-inline-end: none;
		border-bottom: 1px solid var(--aj-border);
	}
	.amal-quran-arabic { font-size: 1.6em; line-height: 2; }
	.amal-quran-pronunciation { font-size: 12.5px; padding: 7px 10px; }
	.amal-quran-surah { padding: 1em; margin: 1em auto; }

	.aj-ayah-tool { width: 40px; height: 40px; font-size: 17px; }
	.aj-hl-swatch { width: 32px; height: 32px; }
	.aj-resume-banner { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
	.aj-resume-banner-btn { width: 100%; }

	.aj-audio-player { left: 4px; right: 4px; flex-wrap: wrap; padding: 8px 10px; }
	.aj-audio-info { order: 3; width: 100%; }
	.aj-audio-reciter { max-width: 100px; }
	.aj-quran-settings-panel { right: 8px; width: calc(100vw - 32px); }
	.aj-search-modal { padding-top: 20px; }
	.aj-aotd-arabic { font-size: 1.3em; line-height: 1.9; }
	.aj-plan-choices { grid-template-columns: 1fr; }
}

/* =========================================================================
   Duas tab
   ========================================================================= */

.aj-duas { display: flex; flex-direction: column; gap: 16px; }

.aj-dua-section,
.aj-sadaqah-section {
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: 14px;
	padding: 16px;
	box-shadow: var(--aj-shadow);
}

.aj-dua-section h3,
.aj-sadaqah-section h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 14px;
	color: var(--aj-fg);
}

.aj-dua-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.aj-dua-stat {
	padding: 10px;
	background: rgba(127, 127, 127, .05);
	border-radius: 10px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.aj-dua-stat-num { font-size: 20px; font-weight: 700; color: var(--aj-fg); line-height: 1; }
.aj-dua-stat-lbl { font-size: 11px; color: var(--aj-muted); text-transform: uppercase; letter-spacing: .04em; }

.aj-dua-add,
.aj-sadaqah-add { width: 100%; margin-bottom: 12px; }

.aj-dua-form,
.aj-sadaqah-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	margin-bottom: 12px;
	background: rgba(127, 127, 127, .04);
	border-radius: 10px;
	border: 1px dashed var(--aj-border);
}

.aj-dua-actions,
.aj-sadaqah-actions { display: flex; gap: 8px; }

.aj-sadaqah-row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }

.aj-dua-list,
.aj-sadaqah-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.aj-dua-item,
.aj-sadaqah-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: rgba(127, 127, 127, .03);
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	transition: background-color .15s;
}

.aj-dua-item.is-answered { background: rgba(15, 118, 110, .06); border-color: rgba(15, 118, 110, .2); }

.aj-dua-check {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1.6px solid var(--aj-border);
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: transparent;
	transition: all .15s;
}

.aj-dua-item.is-answered .aj-dua-check { background: #0f766e; color: #fff; border-color: #0f766e; }

.aj-dua-body { flex: 1; min-width: 0; }
.aj-dua-title { font-size: 14px; font-weight: 600; color: var(--aj-fg); }
.aj-dua-text { font-size: 12.5px; color: var(--aj-muted); margin-top: 2px; line-height: 1.4; }
.aj-dua-meta { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.aj-dua-cat {
	font-size: 10.5px;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(47, 128, 237, .1);
	color: var(--aj-brand);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 600;
}
.aj-dua-answered { font-size: 11px; color: #0f766e; font-weight: 600; }

.aj-dua-delete,
.aj-sadaqah-delete {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--aj-muted);
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
	flex-shrink: 0;
}

.aj-dua-delete:hover,
.aj-sadaqah-delete:hover { color: var(--aj-not-prayed); background: rgba(220, 38, 38, .08); }

.aj-sadaqah-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px;
	background: linear-gradient(135deg, rgba(47, 128, 237, .1), rgba(124, 58, 237, .08));
	border-radius: 10px;
	margin-bottom: 12px;
	gap: 12px;
	flex-wrap: wrap;
}

.aj-sadaqah-total-label { font-size: 12px; color: var(--aj-muted); text-transform: uppercase; letter-spacing: .04em; }
.aj-sadaqah-total-value { font-size: 20px; font-weight: 700; color: var(--aj-fg); }

.aj-sadaqah-amount { font-size: 15px; font-weight: 700; color: var(--aj-brand-2); min-width: 90px; }
.aj-sadaqah-meta { flex: 1; min-width: 0; }
.aj-sadaqah-recipient { font-size: 13px; font-weight: 600; color: var(--aj-fg); }
.aj-sadaqah-date { font-size: 11px; color: var(--aj-muted); margin-top: 2px; }

@media (max-width: 640px) {
	.aj-sadaqah-row { grid-template-columns: 1fr; }
	.aj-sadaqah-amount { min-width: 70px; font-size: 14px; }
	.aj-sadaqah-total-value { font-size: 18px; }
}

/* =========================================================================
   Location picker
   ========================================================================= */

.aj-loc-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.aj-loc-actions .aj-btn-primary,
.aj-loc-actions .aj-btn-ghost {
	flex: 1;
	min-width: 140px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.aj-loc-status {
	margin-top: 12px;
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.5;
	border-radius: 10px;
	border: 1px solid transparent;
}
.aj-loc-status.is-success { color: #0f766e; background: rgba(15, 118, 110, .08); border-color: rgba(15, 118, 110, .2); }
.aj-loc-status.is-error   { color: #b91c1c; background: rgba(220, 38, 38, .08);  border-color: rgba(220, 38, 38, .2); }

.aj-loc-manual {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 10px;
	align-items: end;
	margin-top: 12px;
}

@media (max-width: 640px) {
	.aj-loc-manual { grid-template-columns: 1fr 1fr; }
	.aj-loc-save-btn { grid-column: 1 / -1; width: 100%; }
}

.aj-loc-manual .aj-field input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* =========================================================================
   Toast
   ========================================================================= */

.aj-toast {
	position: fixed;
	left: 50%;
	bottom: calc(96px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%) translateY(20px);
	background: #111827;
	color: #fff;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 13px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
	z-index: 1000000;
	max-width: 90vw;
}
.aj-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.aj-toast.is-error { background: var(--aj-not-prayed); }
.aj-empty { text-align: center; color: var(--aj-muted); padding: 24px; font-style: italic; }

/* =========================================================================
   Icons
   ========================================================================= */

.aj-svg { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.aj-svg svg { display: block; }

/* =========================================================================
   Admin
   ========================================================================= */

.aj-admin .form-table th { width: 220px; }
.aj-admin code { background: rgba(127,127,127,.1); padding: 2px 6px; border-radius: 4px; }

/* =========================================================================
   Dhikr panel
   ========================================================================= */

.aj-deed-card.aj-deed-type-dhikr { border-left: 3px solid var(--aj-brand); }
.aj-deed-card.aj-deed-type-dhikr .aj-deed-icon { color: var(--aj-brand); }
.aj-deed-card.aj-deed-type-dhikr.aj-count-set .aj-deed-fill { background: var(--aj-done); }
.aj-deed-card.aj-deed-type-dhikr.aj-count-set .aj-deed-count-badge { color: #fff; }

.aj-dhikr-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba(127, 127, 127, .05);
	border: 1px solid var(--aj-border);
}

.aj-dhikr-arabic {
	font-family: 'Amiri', 'Scheherazade New', 'Traditional Arabic', 'Noto Naskh Arabic', serif;
	font-size: clamp(20px, 5.5vw, 28px);
	line-height: 2;
	letter-spacing: 0;
	-webkit-font-feature-settings: "kern" 1, "liga" 1;
	font-feature-settings: "kern" 1, "liga" 1;
	color: var(--aj-fg);
	text-align: right;
	padding: 4px 0 8px;
	border-bottom: 1px dashed var(--aj-border);
	word-break: break-word;
}

.aj-dhikr-translit { font-size: 13px; font-style: italic; line-height: 1.55; color: var(--aj-fg); }
.aj-dhikr-meaning { font-size: 12.5px; line-height: 1.6; color: var(--aj-muted); padding-left: 10px; border-left: 2px solid var(--aj-brand); }
.aj-dhikr-progress { display: flex; align-items: center; gap: 10px; }

.aj-dhikr-bar {
	flex: 1;
	height: 8px;
	border-radius: 999px;
	background: rgba(127, 127, 127, .15);
	overflow: hidden;
}
.aj-dhikr-bar > span { display: block; height: 100%; background: var(--aj-brand); transition: width .25s ease; }
.aj-deed-card.aj-deed-type-dhikr.aj-count-set .aj-dhikr-bar > span { background: var(--aj-done); }
.aj-dhikr-count-text { font-size: 12px; font-weight: 700; color: var(--aj-muted); white-space: nowrap; min-width: 56px; text-align: right; }
.aj-deed-card.aj-deed-type-dhikr.aj-count-set .aj-dhikr-count-text { color: var(--aj-done); }

/* =========================================================================
   Mobile tap targets
   ========================================================================= */

@media (max-width: 640px) {
	.aj-status,
	.aj-count-btn,
	.aj-clear,
	.aj-delete-deed,
	.aj-app-add,
	.aj-modal-close,
	.aj-btn-primary,
	.aj-btn-ghost { min-height: 44px; }

	.aj-count-btn { width: 44px; height: 44px; font-size: 20px; }
	.aj-count-input { height: 44px; font-size: 16px; }

	.aj-deed-card { box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
	.aj-deed-card:hover { box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }

	.aj-category { border-radius: 12px; margin-bottom: 10px; }
	.aj-category > summary.aj-category-title { padding: 12px 14px; font-size: 12px; gap: 8px; }
	.aj-category-icon { width: 28px; height: 28px; border-radius: 8px; }
	.aj-category-icon .aj-svg svg { width: 17px; height: 17px; }
	.aj-category-count { padding: 1px 7px; font-size: 10px; }
	.aj-category > .aj-deed-list { padding: 4px 10px 12px; gap: 8px; }

	.aj-deed-main { padding: 14px; gap: 10px; }
	.aj-deed-time { font-size: 11px; padding: 2px 7px; min-width: 44px; }
}

/* =========================================================================
   Just-saved pulse
   ========================================================================= */

@keyframes aj-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(47, 128, 237, .35); }
	70%  { box-shadow: 0 0 0 12px rgba(47, 128, 237, 0); }
	100% { box-shadow: 0 0 0 0 rgba(47, 128, 237, 0); }
}
.aj-deed-card.aj-just-saved { animation: aj-pulse .8s ease-out; }

/* =========================================================================
   Dark mode tweaks
   ========================================================================= */

@media (prefers-color-scheme: dark) {
	.aj-deed-time { background: rgba(47, 128, 237, .18); border-color: rgba(47, 128, 237, .28); }

	.aj-deed-card.aj-jamaah     .aj-deed-time,
	.aj-deed-card.aj-on-time    .aj-deed-time,
	.aj-deed-card.aj-late       .aj-deed-time,
	.aj-deed-card.aj-not-prayed .aj-deed-time,
	.aj-deed-card.aj-excused    .aj-deed-time,
	.aj-deed-card.aj-done       .aj-deed-time,
	.aj-deed-card.aj-skipped    .aj-deed-time,
	.aj-deed-card.aj-count-set  .aj-deed-time {
		background: #1f2937;
		border-color: rgba(255, 255, 255, .15);
		color: #93c5fd;
	}

	.aj-loc-status.is-success { color: #5eead4; background: rgba(94, 234, 212, .1); border-color: rgba(94, 234, 212, .2); }
	.aj-loc-status.is-error   { color: #fca5a5; background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .2); }

	.aj-fast-banner { background: rgba(99, 102, 241, .12); border-color: rgba(99, 102, 241, .28); color: #c7d2fe; }
	.aj-fast-reason { color: #a5b4fc; }
	.aj-event-banner { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .28); color: #fcd34d; }

	.aj-masjid-toggle { background: rgba(15, 118, 110, .15); border-color: rgba(15, 118, 110, .28); color: #5eead4; }
	.aj-masjid-chip   { background: rgba(15, 118, 110, .25); color: #5eead4; }

	.aj-forbidden-card {
		background: rgba(245, 158, 11, .1);
		border-color: rgba(245, 158, 11, .28);
		color: #fcd34d;
	}
	.aj-forbidden-title { color: #fbbf24; }
	.aj-forbidden-label { color: #fcd34d; }
	.aj-forbidden-time {
		color: #fde68a;
		background: rgba(245, 158, 11, .18);
		border-color: rgba(245, 158, 11, .35);
	}
	.aj-forbidden-note { color: #fcd34d; }
	.aj-forbidden-list li { border-bottom-color: rgba(252, 211, 77, .15); }

	.aj-dhikr-text { background: rgba(255, 255, 255, .03); }
	.aj-dua-stat { background: rgba(255, 255, 255, .03); }
	.aj-dua-form,
	.aj-sadaqah-form { background: rgba(255, 255, 255, .03); }
	.aj-dua-item,
	.aj-sadaqah-item { background: rgba(255, 255, 255, .02); }

	.aj-quran-reader-panel { background: #1e1e1e; }
	.aj-quran-reader-sidebar { background: #181818; }
	.aj-quran-reader-sidebar button:hover { background: rgba(47, 128, 237, .15); }
	.aj-quran-reader-close:hover { background: rgba(255, 255, 255, .08); }
	.aj-juz-read:hover { background: rgba(47, 128, 237, .18); }

	.amal-quran-pronunciation {
		background: rgba(245, 158, 11, .12);
		border-left-color: #f59e0b;
		color: #fcd34d;
	}
	.amal-quran-pronunciation .aj-pron-label { color: #fbbf24; }

	.aj-ayah-tool { background: #1e1e1e; }
	.aj-ayah-tool.is-fav { background: rgba(245, 158, 11, .2); color: #fcd34d; border-color: #f59e0b; }
	.aj-ayah-tool.has-note::after { border-color: #1e1e1e; }
	.aj-ayah-note-display { background: rgba(47, 128, 237, .12); color: #c7d2fe; border-left-color: #60a5fa; }
	.aj-resume-banner {
		background: linear-gradient(135deg, rgba(47, 128, 237, .12) 0%, rgba(124, 58, 237, .1) 100%);
		border-color: rgba(47, 128, 237, .3);
		color: #c7d2fe;
	}
	.amal-quran-ayah.hl-yellow { background: rgba(250, 204, 21, .12); }
	.amal-quran-ayah.hl-green  { background: rgba(34, 197, 94, .12); }
	.amal-quran-ayah.hl-blue   { background: rgba(59, 130, 246, .14); }
	.amal-quran-ayah.hl-pink   { background: rgba(236, 72, 153, .14); }
	.amal-quran-ayah.hl-purple { background: rgba(168, 85, 247, .14); }
	.amal-quran-ayah.hl-orange { background: rgba(249, 115, 22, .14); }
	.aj-hl-swatch[data-color="none"] { background: linear-gradient(45deg, transparent 46%, #dc2626 46%, #dc2626 54%, transparent 54%), #1e1e1e; }
	.aj-hl-swatch.is-active { border-color: #e6e8eb; }
	.aj-note-editor { background: #1e1e1e; }
	.aj-note-editor textarea { background: #181818; }
	.aj-quran-reader-sidebar button.aj-sidebar-favorites {
		background: linear-gradient(135deg, rgba(245, 158, 11, .2) 0%, rgba(245, 158, 11, .12) 100%);
		color: #fcd34d;
	}
	.aj-quran-reader-sidebar button.aj-sidebar-favorites:hover { background: rgba(245, 158, 11, .28); }
	.aj-quran-reader-sidebar button.aj-sidebar-favorites.is-active { background: #b45309; color: #fff; }
	.aj-fav-ref { background: rgba(245, 158, 11, .2); color: #fcd34d; }

	/* Tier 2 dark mode */
	.aj-aotd-card {
		background: linear-gradient(135deg, rgba(245, 158, 11, .18) 0%, rgba(245, 158, 11, .1) 100%);
		border-color: rgba(245, 158, 11, .35);
	}
	.aj-aotd-label,
	.aj-aotd-ref { color: #fcd34d; }
	.aj-aotd-theme { background: rgba(245, 158, 11, .25); color: #fde68a; }
	.aj-aotd-arabic,
	.aj-aotd-trans { color: #e6e8eb; }
	.aj-aotd-pron { color: #9aa4b2; }
	.aj-aotd-open { background: #92400e; }
	.aj-aotd-open:hover { background: #78350f; }

	.aj-plan-card { background: #1e1e1e; border-color: #2a313b; }
	.aj-plan-choice { background: rgba(47, 128, 237, .12); border-color: rgba(47, 128, 237, .3); }
	.aj-plan-choice:hover { background: rgba(47, 128, 237, .2); }
	.aj-plan-today { background: rgba(47, 128, 237, .12); }

	.aj-search-trigger { background: #1e1e1e; }
	.aj-search-panel { background: #1e1e1e; }
	.aj-search-input-wrap { border-bottom-color: #2a313b; }
	.aj-search-result { border-bottom-color: #2a313b; }
	.aj-search-result:hover { background: rgba(47, 128, 237, .12); }

	.aj-quran-settings-panel { background: #1e1e1e; border-color: #2a313b; }
	.aj-quran-settings-btn { background: transparent; }
	.aj-set-row select { background: #14181f; color: #e6e8eb; border-color: #2a313b; }
	.aj-set-reset { color: #9aa4b2; border-color: #2a313b; }

	.aj-audio-player { background: #0f1318; }
}

/* =========================================================================
   Sprint 2 — Tier A UX (v1.8.0)
   =========================================================================
   Styles for: share/copy buttons, night mode, focus mode, repeat/loop,
   hifz blur, verse range selector, sleep timer, modal focus trap.
   ========================================================================= */

/* ---------- Share / Copy buttons ---------- */
.aj-ayah-tool.aj-tool-share { color: #7c3aed; }
.aj-ayah-tool.aj-tool-share:hover { border-color: #7c3aed; background: rgba(124, 58, 237, .08); }
.aj-ayah-tool.aj-tool-copy { color: #0891b2; }
.aj-ayah-tool.aj-tool-copy:hover { border-color: #0891b2; background: rgba(8, 145, 178, .08); }
.aj-tool-share svg,
.aj-tool-copy svg,
.aj-tool-repeat svg,
.aj-tool-sleep svg { width: 16px; height: 16px; }

/* ---------- Night mode ---------- */
.aj-quran-reader.aj-night-force { --aj-bg: #14181f; --aj-fg: #e6e8eb; --aj-muted: #9aa4b2; --aj-border: #2a313b; }
.aj-quran-reader.aj-night-force .aj-quran-reader-panel { background: #14181f; color: #e6e8eb; }
.aj-quran-reader.aj-night-force .aj-quran-reader-sidebar { background: #0f1318; }
.aj-quran-reader.aj-night-force .aj-quran-reader-sidebar button { border-bottom-color: #2a313b; color: #e6e8eb; }
.aj-quran-reader.aj-night-force .aj-quran-reader-sidebar button:hover { background: rgba(47, 128, 237, .15); }
.aj-quran-reader.aj-night-force .aj-quran-reader-sidebar button.is-active { background: var(--aj-brand); color: #fff; }
.aj-quran-reader.aj-night-force .aj-quran-reader-head { border-bottom-color: #2a313b; }
.aj-quran-reader.aj-night-force .amal-quran-arabic { color: #e6e8eb; }
.aj-quran-reader.aj-night-force .amal-quran-translation { color: #c7d2fe; }
.aj-quran-reader.aj-night-force .amal-quran-ayah { border-bottom-color: #2a313b; }
.aj-quran-reader.aj-night-force .aj-tafsir-box { background: #1e293b; border-left-color: var(--aj-brand); }
.aj-quran-reader.aj-night-force .aj-tafsir-text { color: #e6e8eb; }
.aj-quran-reader.aj-night-force .aj-note-editor { background: #1e1e1e; }
.aj-quran-reader.aj-night-force .aj-note-editor textarea { background: #181818; color: #e6e8eb; }
.aj-quran-reader.aj-night-force .aj-note-btn { color: #e6e8eb; border-color: #2a313b; }
.aj-quran-reader.aj-night-force .aj-hl-picker { background: #1e1e1e; border-color: #2a313b; }
.aj-quran-reader.aj-night-force .aj-ayah-tool { background: #1e1e1e; color: #e6e8eb; border-color: #2a313b; }
.aj-quran-reader.aj-night-force .aj-ayah-tool:hover { background: rgba(47, 128, 237, .18); border-color: var(--aj-brand); color: #fff; }
.aj-quran-reader.aj-night-force .aj-quran-settings-panel { background: #1e1e1e; border-color: #2a313b; }
.aj-quran-reader.aj-night-force .aj-quran-settings-panel h4 { color: #e6e8eb; }
.aj-quran-reader.aj-night-force .aj-set-row { color: #e6e8eb; }
.aj-quran-reader.aj-night-force .aj-set-row select { background: #0f1318; color: #e6e8eb; border-color: #2a313b; }
.aj-quran-reader.aj-night-force .aj-wbw-word { background: #1e1e1e; border-color: #2a313b; }
.aj-quran-reader.aj-night-force .aj-wbw-arabic { color: #e6e8eb; }

.aj-set-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.aj-set-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.aj-set-toggle-track { display: block; width: 100%; height: 100%; border-radius: 999px; background: rgba(127, 127, 127, .25); transition: background .15s; }
.aj-set-toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transition: transform .15s; }
.aj-set-toggle input:checked + .aj-set-toggle-track { background: var(--aj-brand); }
.aj-set-toggle input:checked + .aj-set-toggle-track::after { transform: translateX(20px); }

/* ---------- Focus mode ---------- */
.aj-quran-reader.aj-focus-mode .aj-quran-reader-sidebar { display: none; }
.aj-quran-reader.aj-focus-mode .aj-quran-reader-head { padding: 8px 12px; opacity: .3; transition: opacity .2s; }
.aj-quran-reader.aj-focus-mode .aj-quran-reader-head:hover,
.aj-quran-reader.aj-focus-mode .aj-quran-reader-head:focus-within { opacity: 1; }
.aj-quran-reader.aj-focus-mode .aj-quran-reader-content { padding: 40px 30px; }
.aj-quran-reader.aj-focus-mode .aj-ayah-tools { opacity: 0; transition: opacity .2s; }
.aj-quran-reader.aj-focus-mode .amal-quran-ayah:hover .aj-ayah-tools,
.aj-quran-reader.aj-focus-mode .amal-quran-ayah:focus-within .aj-ayah-tools { opacity: 1; }
.aj-quran-reader.aj-focus-mode .amal-quran-arabic { font-size: calc(var(--aj-arabic-size, 1.9em) * 1.1); }
@media (min-width: 768px) {
	.aj-quran-reader.aj-focus-mode .amal-quran-arabic { font-size: calc(var(--aj-arabic-size, 1.9em) * 1.2); }
}

/* ---------- Repeat / Loop ---------- */
.aj-repeat-popover { display: flex; gap: 4px; margin-top: 6px; padding: 8px; background: var(--aj-bg); border: 1px solid var(--aj-border); border-radius: 10px; box-shadow: 0 4px 14px rgba(16, 24, 40, .1); direction: ltr; flex-wrap: wrap; }
.aj-repeat-choice { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--aj-border); background: transparent; color: var(--aj-fg); cursor: pointer; font-size: 12px; font-weight: 700; font-family: inherit; transition: background .15s, border-color .15s, color .15s; }
.aj-repeat-choice:hover { border-color: var(--aj-brand); background: rgba(47, 128, 237, .08); }
.aj-repeat-choice.is-active { background: var(--aj-brand); border-color: var(--aj-brand); color: #fff; }
.aj-repeat-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--aj-brand); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; font-family: ui-monospace, monospace; }
.aj-repeat-badge .aj-svg { line-height: 0; }
.aj-repeat-badge svg { width: 12px; height: 12px; }
.aj-audio-repeat { background: rgba(255, 255, 255, .1); border: none; color: #fff; height: 36px; padding: 0 10px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; }
.aj-audio-repeat:hover { background: rgba(255, 255, 255, .2); }
.aj-audio-repeat.is-active { background: var(--aj-brand); color: #fff; }
.aj-audio-repeat svg { width: 14px; height: 14px; }

/* ---------- Hifz blur ---------- */
.aj-quran-reader.aj-mode-hifz .amal-quran-arabic { filter: blur(6px); cursor: pointer; user-select: none; transition: filter .3s ease; }
.aj-quran-reader.aj-mode-hifz .amal-quran-ayah.is-revealed .amal-quran-arabic { filter: none; user-select: text; }
.aj-quran-reader.aj-mode-hifz .amal-quran-ayah.is-revealed { background: rgba(34, 197, 94, .05); border-radius: 8px; padding: 8px 10px; margin-left: -10px; margin-right: -10px; }
.aj-hifz-progress { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; margin: -20px -26px 20px; padding: 12px 26px; background: var(--aj-bg); border-bottom: 1px solid var(--aj-border); font-size: 12.5px; color: var(--aj-muted); }
.aj-hifz-progress-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(127, 127, 127, .15); overflow: hidden; }
.aj-hifz-progress-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #7c3aed, #a855f7); width: 0; transition: width .25s ease; }
.aj-hifz-progress-label { font-weight: 700; white-space: nowrap; color: #7c3aed; }
@media (max-width: 700px) {
	.aj-hifz-progress { margin: -14px -16px 14px; padding: 10px 16px; }
}
.aj-mode-btn-hifz.is-active { background: #7c3aed !important; color: #fff !important; }

/* ---------- Verse range ---------- */
.aj-range-inputs { display: none; align-items: center; gap: 6px; padding: 4px 8px; background: rgba(127, 127, 127, .06); border-radius: 8px; font-size: 12px; direction: ltr; flex-shrink: 0; }
.aj-quran-reader.aj-mode-bn .aj-range-inputs,
.aj-quran-reader.aj-mode-en .aj-range-inputs,
.aj-quran-reader.aj-mode-wbw .aj-range-inputs,
.aj-quran-reader.aj-mode-tafsir .aj-range-inputs { display: inline-flex; }
.aj-range-label { font-size: 11px; color: var(--aj-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.aj-range-input { width: 48px; padding: 4px 6px; border: 1px solid var(--aj-border); border-radius: 6px; background: var(--aj-bg); color: var(--aj-fg); font-family: ui-monospace, monospace; font-size: 12px; text-align: center; -webkit-appearance: textfield; appearance: textfield; }
.aj-range-input::-webkit-outer-spin-button,
.aj-range-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aj-range-input:focus { outline: 2px solid var(--aj-brand); outline-offset: 0; }
.aj-range-apply { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--aj-brand); background: var(--aj-brand); color: #fff; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.aj-range-apply:hover { background: #1f6fd6; border-color: #1f6fd6; }
.aj-range-clear { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--aj-border); background: transparent; color: var(--aj-muted); font-size: 11.5px; cursor: pointer; font-family: inherit; }
.aj-range-clear:hover { color: var(--aj-fg); border-color: var(--aj-fg); }
@media (max-width: 700px) {
	.aj-range-inputs { order: 5; width: 100%; justify-content: center; }
	.aj-range-input { width: 42px; font-size: 11px; }
}

/* ---------- Sleep timer ---------- */
.aj-sleep-timer { background: rgba(255, 255, 255, .1); border: none; color: #fff; padding: 6px 8px; border-radius: 6px; font-size: 11.5px; max-width: 90px; cursor: pointer; font-family: inherit; }
.aj-sleep-timer option { color: #1f2937; }
.aj-sleep-countdown { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(47, 128, 237, .25); color: #fff; font-size: 10.5px; font-weight: 700; font-family: ui-monospace, monospace; white-space: nowrap; }
.aj-sleep-countdown svg { width: 11px; height: 11px; }
@media (max-width: 700px) {
	.aj-sleep-timer { max-width: 70px; font-size: 10.5px; }
}

/* ---------- Modal focus-trap visuals ---------- */
.aj-quran-reader-panel:focus,
.aj-search-panel:focus,
.aj-modal-panel:focus { outline: none; }
.aj-quran-reader-panel :focus-visible,
.aj-search-panel :focus-visible,
.aj-modal-panel :focus-visible { outline: 2px solid var(--aj-brand); outline-offset: 2px; border-radius: 6px; }
body.aj-modal-open { overflow: hidden; }

/* ---------- Small polish ---------- */
.aj-ayah-tool.aj-tool-copy.is-copied { background: #d1fae5; border-color: #10b981; color: #065f46; }
@keyframes aj-share-pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.15); }
	100% { transform: scale(1); }
}
.aj-ayah-tool.aj-tool-share.is-shared { animation: aj-share-pulse .4s ease-out; }
.aj-set-row .aj-set-toggle-label { font-size: 13px; color: var(--aj-fg); }

/* =========================================================================
   Sprint 3 — User Data Depth (v1.9.0)
   =========================================================================
   Styles for: favorite metadata popover, note history popover, search tabs,
   bulk favorite button, stats card, sidebar tag filter, note tags list.
   ========================================================================= */

/* ---------- Favorite metadata popover ---------- */
/* Opens from long-press / double-tap on the ☆ button. Reuses the
   .aj-hl-picker shadow/border pattern so it feels native. */
.aj-fav-meta-popover {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
	padding: 12px;
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(16, 24, 40, .12);
	direction: ltr;
	min-width: 240px;
}
.aj-fav-meta-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--aj-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0;
}
.aj-fav-meta-colors {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.aj-fav-meta-color {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 0;
	transition: transform .12s, border-color .12s;
}
.aj-fav-meta-color:hover { transform: scale(1.12); }
.aj-fav-meta-color.is-active { border-color: var(--aj-fg); }
.aj-fav-meta-color[data-color="yellow"] { background: #facc15; }
.aj-fav-meta-color[data-color="green"]  { background: #22c55e; }
.aj-fav-meta-color[data-color="blue"]   { background: #3b82f6; }
.aj-fav-meta-color[data-color="pink"]   { background: #ec4899; }
.aj-fav-meta-color[data-color="purple"] { background: #a855f7; }
.aj-fav-meta-color[data-color="orange"] { background: #f97316; }
.aj-fav-meta-color[data-color="none"] {
	background: linear-gradient(45deg, transparent 46%, #dc2626 46%, #dc2626 54%, transparent 54%), #fff;
	border: 2px solid var(--aj-border);
}

.aj-fav-meta-tag {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid var(--aj-border);
	border-radius: 6px;
	background: transparent;
	color: var(--aj-fg);
	font-size: 13px;
	font-family: inherit;
	box-sizing: border-box;
}
.aj-fav-meta-tag:focus { outline: 2px solid var(--aj-brand); outline-offset: 0; }

.aj-fav-meta-actions {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
	margin-top: 2px;
}
.aj-fav-meta-btn {
	padding: 5px 12px;
	border-radius: 6px;
	border: 1px solid var(--aj-border);
	background: transparent;
	color: var(--aj-fg);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}
.aj-fav-meta-btn:hover { background: rgba(127, 127, 127, .08); }
.aj-fav-meta-btn.aj-fav-meta-save {
	background: var(--aj-brand);
	color: #fff;
	border-color: var(--aj-brand);
}
.aj-fav-meta-btn.aj-fav-meta-save:hover { background: #1f6fd6; }

/* Colored favorite dots shown on the ☆ button itself */
.aj-ayah-tool.aj-tool-fav.has-color::before {
	content: '';
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid var(--aj-bg);
}
.aj-ayah-tool.aj-tool-fav.color-yellow::before { background: #facc15; }
.aj-ayah-tool.aj-tool-fav.color-green::before  { background: #22c55e; }
.aj-ayah-tool.aj-tool-fav.color-blue::before   { background: #3b82f6; }
.aj-ayah-tool.aj-tool-fav.color-pink::before   { background: #ec4899; }
.aj-ayah-tool.aj-tool-fav.color-purple::before { background: #a855f7; }
.aj-ayah-tool.aj-tool-fav.color-orange::before { background: #f97316; }

/* ---------- Note history popover ---------- */
.aj-note-history {
	margin-top: 8px;
	padding: 10px 12px;
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(16, 24, 40, .1);
	direction: ltr;
	max-height: 260px;
	overflow-y: auto;
}
.aj-note-history-title {
	font-size: 11px;
	font-weight: 700;
	color: var(--aj-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 8px;
}
.aj-note-revision {
	padding: 8px 10px;
	margin-bottom: 6px;
	background: rgba(127, 127, 127, .04);
	border-radius: 6px;
	border-left: 3px solid var(--aj-border);
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.aj-note-revision:hover {
	background: rgba(47, 128, 237, .06);
	border-left-color: var(--aj-brand);
}
.aj-note-revision:last-child { margin-bottom: 0; }
.aj-note-revision-date {
	font-size: 10.5px;
	color: var(--aj-muted);
	font-family: ui-monospace, monospace;
	margin-bottom: 3px;
}
.aj-note-revision-text {
	font-size: 12.5px;
	color: var(--aj-fg);
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
}
.aj-note-history-empty {
	font-size: 12px;
	color: var(--aj-muted);
	font-style: italic;
	padding: 6px 0;
}
.aj-note-history-link {
	margin-top: 6px;
	background: transparent;
	border: none;
	color: var(--aj-brand);
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	padding: 2px 0;
	font-family: inherit;
}
.aj-note-history-link:hover { color: #1f6fd6; }

/* ---------- Bulk favorite button ---------- */
.aj-range-bulk-fav {
	padding: 4px 10px;
	border-radius: 6px;
	border: 1px solid #10b981;
	background: #10b981;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	margin-left: 4px;
}
.aj-range-bulk-fav:hover { background: #059669; border-color: #059669; }
.aj-range-bulk-fav:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Search modal tabs ---------- */
.aj-search-tabs {
	display: flex;
	gap: 4px;
	padding: 8px 12px 0;
	border-bottom: 1px solid var(--aj-border);
	background: var(--aj-bg);
}
.aj-search-tab {
	flex: 1;
	padding: 8px 12px;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--aj-muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
	transition: color .15s, border-color .15s;
}
.aj-search-tab:hover { color: var(--aj-fg); }
.aj-search-tab.is-active {
	color: var(--aj-brand);
	border-bottom-color: var(--aj-brand);
}

/* Search result preview for notes tab */
.aj-search-note-preview {
	font-size: 12px;
	color: var(--aj-muted);
	margin-top: 4px;
	line-height: 1.5;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
	white-space: pre-wrap;
}

/* ---------- Quran stats card ---------- */
.aj-quran-stats-card {
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: 14px;
	padding: 16px;
	box-shadow: var(--aj-shadow);
	margin: 0 0 12px;
}
.aj-quran-stats-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--aj-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.aj-quran-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: 10px;
}
.aj-quran-stat {
	padding: 10px 8px;
	background: rgba(127, 127, 127, .04);
	border-radius: 10px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.aj-quran-stat-value {
	font-size: 22px;
	font-weight: 800;
	color: var(--aj-fg);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.aj-quran-stat-label {
	font-size: 10.5px;
	color: var(--aj-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 600;
}
.aj-quran-stat.aj-quran-stat-streak .aj-quran-stat-value { color: #f97316; }
.aj-quran-stat.aj-quran-stat-fav    .aj-quran-stat-value { color: #b45309; }
.aj-quran-stat.aj-quran-stat-note   .aj-quran-stat-value { color: #0891b2; }
.aj-quran-stat.aj-quran-stat-hl     .aj-quran-stat-value { color: #7c3aed; }
.aj-quran-stat.aj-quran-stat-tag    .aj-quran-stat-value { color: #10b981; }

/* Last-read line */
.aj-quran-last-read {
	margin-top: 12px;
	padding: 8px 12px;
	background: rgba(47, 128, 237, .06);
	border-left: 3px solid var(--aj-brand);
	border-radius: 6px;
	font-size: 12.5px;
	color: var(--aj-fg);
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
}
.aj-quran-last-read strong { color: var(--aj-brand); }

/* ---------- Sidebar tag filter ---------- */
.aj-tag-filter {
	padding: 8px 12px;
	border-bottom: 1px solid var(--aj-border);
	background: rgba(127, 127, 127, .03);
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.aj-tag-chip {
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(47, 128, 237, .1);
	border: 1px solid rgba(47, 128, 237, .2);
	color: var(--aj-brand);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background .15s, border-color .15s, color .15s;
}
.aj-tag-chip:hover {
	background: rgba(47, 128, 237, .18);
	border-color: var(--aj-brand);
}
.aj-tag-chip.is-active {
	background: var(--aj-brand);
	border-color: var(--aj-brand);
	color: #fff;
}
.aj-tag-chip.aj-tag-clear {
	background: transparent;
	border-color: var(--aj-border);
	color: var(--aj-muted);
}
.aj-tag-chip.aj-tag-clear:hover {
	color: var(--aj-fg);
	border-color: var(--aj-fg);
	background: transparent;
}

/* ---------- Reader settings — Note tags list ---------- */
.aj-note-tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}
.aj-note-tag {
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(16, 185, 129, .12);
	color: #10b981;
	font-size: 10.5px;
	font-weight: 700;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
}
.aj-note-tags-empty {
	font-size: 11.5px;
	color: var(--aj-muted);
	font-style: italic;
}

/* ---------- Dark mode overrides for Sprint 3 ---------- */
@media (prefers-color-scheme: dark) {
	.aj-fav-meta-popover { background: #1e1e1e; border-color: #2a313b; }
	.aj-fav-meta-color.is-active { border-color: #e6e8eb; }
	.aj-fav-meta-color[data-color="none"] { background: linear-gradient(45deg, transparent 46%, #dc2626 46%, #dc2626 54%, transparent 54%), #1e1e1e; }
	.aj-fav-meta-tag { background: #181818; color: #e6e8eb; border-color: #2a313b; }
	.aj-fav-meta-btn { color: #e6e8eb; border-color: #2a313b; }
	.aj-ayah-tool.aj-tool-fav.has-color::before { border-color: #1e1e1e; }

	.aj-note-history { background: #1e1e1e; border-color: #2a313b; }
	.aj-note-revision { background: rgba(255, 255, 255, .04); border-left-color: #2a313b; }
	.aj-note-revision:hover { background: rgba(47, 128, 237, .12); }
	.aj-note-revision-text { color: #e6e8eb; }

	.aj-search-tabs { background: #1e1e1e; border-bottom-color: #2a313b; }
	.aj-search-tab { color: #9aa4b2; }
	.aj-search-tab:hover { color: #e6e8eb; }
	.aj-search-tab.is-active { color: #93c5fd; border-bottom-color: #93c5fd; }

	.aj-quran-stats-card { background: #1e1e1e; border-color: #2a313b; }
	.aj-quran-stat { background: rgba(255, 255, 255, .03); }
	.aj-quran-stat-value { color: #e6e8eb; }
	.aj-quran-stat.aj-quran-stat-streak .aj-quran-stat-value { color: #fb923c; }
	.aj-quran-stat.aj-quran-stat-fav    .aj-quran-stat-value { color: #fcd34d; }
	.aj-quran-stat.aj-quran-stat-note   .aj-quran-stat-value { color: #67e8f9; }
	.aj-quran-stat.aj-quran-stat-hl     .aj-quran-stat-value { color: #c4b5fd; }
	.aj-quran-stat.aj-quran-stat-tag    .aj-quran-stat-value { color: #5eead4; }
	.aj-quran-last-read { background: rgba(47, 128, 237, .12); color: #e6e8eb; }

	.aj-tag-filter { background: rgba(255, 255, 255, .02); border-bottom-color: #2a313b; }
	.aj-tag-chip { background: rgba(47, 128, 237, .18); border-color: rgba(47, 128, 237, .3); color: #93c5fd; }
	.aj-tag-chip:hover { background: rgba(47, 128, 237, .28); }
	.aj-tag-chip.is-active { background: #2f80ed; border-color: #2f80ed; color: #fff; }
	.aj-tag-chip.aj-tag-clear { border-color: #2a313b; color: #9aa4b2; }

	.aj-note-tag { background: rgba(16, 185, 129, .18); color: #5eead4; }
}

/* Night mode overrides for Sprint 3 components */
.aj-quran-reader.aj-night-force .aj-fav-meta-popover,
.aj-quran-reader.aj-night-force .aj-note-history { background: #1e1e1e; border-color: #2a313b; }
.aj-quran-reader.aj-night-force .aj-fav-meta-tag { background: #181818; color: #e6e8eb; border-color: #2a313b; }
.aj-quran-reader.aj-night-force .aj-fav-meta-btn { color: #e6e8eb; border-color: #2a313b; }
.aj-quran-reader.aj-night-force .aj-note-revision { background: rgba(255, 255, 255, .04); border-left-color: #2a313b; }
.aj-quran-reader.aj-night-force .aj-note-revision-text { color: #e6e8eb; }
.aj-quran-reader.aj-night-force .aj-range-bulk-fav { border-color: #10b981; }
.aj-quran-reader.aj-night-force .aj-tag-filter { background: rgba(255, 255, 255, .02); border-bottom-color: #2a313b; }

/* ---------- Mobile responsive for Sprint 3 ---------- */
@media (max-width: 700px) {
	.aj-range-bulk-fav { width: 100%; margin-left: 0; margin-top: 6px; }
	.aj-quran-stats-grid { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
	.aj-quran-stat-value { font-size: 18px; }
	.aj-search-tabs { padding: 6px 8px 0; }
	.aj-search-tab { padding: 7px 8px; font-size: 12px; }
	.aj-fav-meta-popover { min-width: 200px; padding: 10px; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.aj-category-arrow,
	.aj-category-icon,
	.aj-category > .aj-deed-list { transition: none !important; animation: none !important; }

	/* Sprint 2 — animation-free paths */
	.aj-share-pulse,
	.aj-ayah-tool.aj-tool-share.is-shared { animation: none !important; }
	.aj-quran-reader.aj-mode-hifz .amal-quran-arabic { transition: none !important; }

	/* Sprint 3 — popovers and chips have no animation, but make sure the
	   focus ring still transitions instantly if any inherited rules exist. */
	.aj-fav-meta-color,
	.aj-note-revision,
	.aj-tag-chip { transition: none !important; }
}