* {
	box-sizing: border-box
}

html {
	line-height: 1.5
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: #ecfdf5;
	color: #0f172a
}

button,
input {
	font: inherit
}

button {
	border: 0;
	cursor: pointer
}

audio {
	width: 100%
}

.app {
	max-width: 430px;
	margin: auto;
	min-height: 100vh;
	background: linear-gradient(180deg, #059669 0, #047857 265px, #f8fafc 265px);
	padding-bottom: 85px
}

.hero {
	padding: 22px 18px 8px;
	color: #fff
}

.topbar,
.row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px
}

.topbar h1 {
	margin: 0;
	font-size: 30px
}

.topbar p,
.count-card p {
	margin: 2px 0 0;
	color: rgba(255, 255, 255, .9)
}

.install,
.pill {
	background: rgba(255, 255, 255, .18);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	padding: 9px 14px;
	font-weight: 800
}

.hidden {
	display: none !important
}

.location-card {
	margin-top: 18px;
	background: #fff;
	color: #0f172a;
	border-radius: 22px;
	padding: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 16px 35px rgba(2, 6, 23, .16)
}

.location-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #d1fae5;
	display: grid;
	place-items: center
}

.location-card small {
	display: block;
	color: #64748b
}

.location-card button,
.circle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #f1f5f9
}

.count-card {
	margin-top: 18px;
	background: linear-gradient(135deg, rgba(6, 78, 59, .94), rgba(20, 184, 166, .72));
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 28px;
	padding: 20px;
	box-shadow: 0 22px 40px rgba(2, 6, 23, .2)
}

.count-card h2 {
	font-size: 38px;
	margin: 6px 0;
	text-shadow: 0 3px 15px rgba(0, 0, 0, .35)
}

#countdown {
	font-size: 46px;
	font-weight: 900;
	letter-spacing: -1px;
	text-shadow: 0 3px 15px rgba(0, 0, 0, .35)
}

main {
	padding: 14px 18px
}

.page {
	display: none
}

.page.active {
	display: block
}

.card {
	background: #fff;
	border-radius: 26px;
	padding: 18px;
	margin-bottom: 16px;
	box-shadow: 0 14px 36px rgba(15, 23, 42, .08);
	border: 1px solid rgba(15, 23, 42, .06)
}

h2,
h3 {
	margin: 0
}

.muted {
	color: #64748b;
	font-size: 14px
}

.mt {
	margin-top: 14px
}

.grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px
}

.grid3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px
}

.mini {
	background: #f1f5f9;
	border-radius: 18px;
	padding: 14px
}

.mini small {
	display: block;
	color: #64748b;
	font-weight: 700
}

.mini strong {
	font-size: 28px
}

.emerald {
	background: #ecfdf5;
	color: #047857
}

.primary,
.secondary,
.dark,
.blue {
	border-radius: 18px;
	padding: 13px;
	font-weight: 900
}

.primary {
	background: #059669;
	color: #fff
}

.secondary {
	background: #f1f5f9;
	color: #334155
}

.dark {
	background: #0f172a;
	color: #fff
}

.blue {
	background: #2563eb;
	color: #fff
}

.small {
	font-size: 13px;
	padding: 11px
}

.list {
	display: grid;
	gap: 9px
}

.item {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	padding: 14px;
	text-align: left
}

.item.active {
	border: 2px solid #10b981;
	background: #ecfdf5;
	box-shadow: 0 12px 26px rgba(16, 185, 129, .2)
}

.progress {
	height: 12px;
	background: #e2e8f0;
	border-radius: 999px;
	overflow: hidden
}

.progress span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #10b981, #14b8a6);
	border-radius: 999px;
	transition: .3s
}

.habit-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 7px
}

.habit-grid button {
	min-height: 68px;
	border-radius: 18px;
	font-size: 12px;
	font-weight: 900;
	background: #f1f5f9
}

.habit-grid button.done {
	background: #059669;
	color: white
}

.center {
	text-align: center
}

.compass {
	position: relative;
	width: 280px;
	height: 280px;
	margin: 18px auto;
	border-radius: 50%;
	border: 10px solid #10b981;
	background: radial-gradient(circle, #fff, #d1fae5);
	box-shadow: 0 25px 45px rgba(2, 6, 23, .18)
}

.north,
.south,
.west,
.east {
	position: absolute;
	font-weight: 900;
	color: #065f46
}

.north {
	top: 10px;
	left: 50%;
	transform: translateX(-50%)
}

.south {
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%)
}

.west {
	left: 13px;
	top: 50%;
	transform: translateY(-50%)
}

.east {
	right: 13px;
	top: 50%;
	transform: translateY(-50%)
}

.kaaba {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 50px
}

.arrow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 112px;
	background: #dc2626;
	border-radius: 999px;
	transform-origin: bottom;
	transform: translateX(-50%) translateY(-100%) rotate(0deg)
}

.status {
	display: inline-block;
	border-radius: 999px;
	background: #f1f5f9;
	padding: 9px 14px;
	font-weight: 800
}

.hit {
	background: #059669;
	color: #fff;
	animation: pulse 1s infinite
}

@keyframes pulse {
	50% {
		transform: scale(1.05)
	}
}

.guide {
	color: #475569
}

.table-wrap {
	overflow: auto
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px
}

th,
td {
	padding: 8px;
	border-bottom: 1px solid #e2e8f0;
	text-align: left
}

.player {
	background: #f1f5f9;
	border-radius: 20px;
	padding: 14px
}

.player strong {
	display: block;
	margin: 3px 0 12px
}

.tasbih-count {
	font-size: 88px;
	font-weight: 900;
	color: #059669
}

.tasbih-btn {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: #059669;
	color: #fff;
	font-size: 36px;
	font-weight: 900;
	box-shadow: 0 22px 40px rgba(5, 150, 105, .35)
}

.badge-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px
}

.badge {
	border-radius: 18px;
	background: #f1f5f9;
	padding: 14px
}

.badge.unlocked {
	background: #ecfdf5;
	color: #047857
}

.bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(10px);
	border-top: 1px solid #e2e8f0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 430px;
	margin: auto;
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0 -14px 30px rgba(15, 23, 42, .12)
}

.bottom button {
	background: transparent;
	padding: 12px 6px;
	font-weight: 900;
	color: #475569
}

.bottom span {
	display: block;
	font-size: 11px
}

.modal {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .55);
	z-index: 50;
	display: none;
	align-items: flex-end;
	justify-content: center
}

.modal.show {
	display: flex
}

.panel {
	background: #fff;
	width: 100%;
	max-width: 430px;
	max-height: 84vh;
	overflow: auto;
	border-radius: 26px 26px 0 0;
	padding: 18px
}

.menu-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 14px
}

.menu-grid button {
	background: #f1f5f9;
	border-radius: 18px;
	padding: 14px;
	font-weight: 900
}

.search {
	width: 100%;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 13px
}

@media(prefers-color-scheme:dark) {
	body {
		background: #020617;
		color: #e5e7eb
	}

	.app {
		background: linear-gradient(180deg, #064e3b 0, #022c22 265px, #020617 265px)
	}

	.card,
	.panel,
	.bottom,
	.item {
		background: #0f172a;
		color: #e5e7eb;
		border-color: #1e293b
	}

	.secondary,
	.mini,
	.location-card button,
	.circle,
	.player,
	.habit-grid button,
	.menu-grid button,
	.status {
		background: #1e293b;
		color: #e5e7eb
	}

	.muted,
	.mini small {
		color: #cbd5e1
	}

	.location-card {
		background: #0f172a;
		color: #e5e7eb
	}

	.compass {
		background: radial-gradient(circle, #0f172a, #064e3b)
	}
}

.infaq-card {
	border: 2px solid #10b981
}

.infaq-badge {
	background: #ecfdf5;
	color: #047857;
	border-radius: 999px;
	padding: 8px 12px;
	font-size: 13px
}

.inner-card {
	box-shadow: none;
	border: 1px solid #e2e8f0;
	background: #f8fafc
}

.cost-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #e2e8f0
}

.cost-row:last-child {
	border-bottom: 0
}

.qr-placeholder {
	width: 150px;
	height: 150px;
	border-radius: 20px;
	background: #e2e8f0;
	color: #64748b;
	display: grid;
	place-items: center;
	margin: 16px auto;
	font-size: 38px;
	font-weight: 900
}

code {
	background: #e2e8f0;
	border-radius: 6px;
	padding: 2px 5px
}

@media(prefers-color-scheme:dark) {
	.inner-card {
		background: #020617;
		border-color: #1e293b
	}

	.qr-placeholder {
		background: #1e293b;
		color: #cbd5e1
	}

	code {
		background: #1e293b
	}
}

/* FIX: highlight waktu solat seterusnya dalam dark mode */
.item.active {
	background: linear-gradient(135deg, #059669, #10b981) !important;
	border: 2px solid #34d399 !important;
	color: #ffffff !important;
	box-shadow: 0 14px 34px rgba(16, 185, 129, .35) !important;
}

.item.active b,
.item.active strong,
.item.active small,
.item.active .muted {
	color: #ffffff !important;
	opacity: 1 !important;
}