.dlc-wrap,
body.dlc-standalone {
	--bg: #f3f5fa;
	--card: #ffffff;
	--text: #1f2937;
	--muted: #6b7280;
	--primary: #2563eb;
	--primary-hover: #1d4ed8;
	--ring-bg: #e5e7eb;
	--border: #e5e7eb;
	--disabled: #cbd5e1;
	--disabled-text: #64748b;
}

/* الوضع الداكن للتصميم المستقل فقط؛ داخل القالب نحافظ على ألوان تناسب أي قالب. */
@media (prefers-color-scheme: dark) {
	body.dlc-standalone,
	body.dlc-standalone .dlc-wrap {
		--bg: #0f172a;
		--card: #1e293b;
		--text: #f1f5f9;
		--muted: #94a3b8;
		--primary: #3b82f6;
		--primary-hover: #2563eb;
		--ring-bg: #334155;
		--border: #334155;
		--disabled: #334155;
		--disabled-text: #94a3b8;
	}
}

.dlc-wrap,
.dlc-wrap * {
	box-sizing: border-box;
}

body.dlc-standalone {
	margin: 0;
	padding: 0;
}

body.dlc-standalone {
	background: var(--bg);
	color: var(--text);
	font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, -apple-system, sans-serif;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}

.dlc-wrap {
	max-width: 720px;
	margin: 0 auto;
	padding: 16px;
}

.dlc-header {
	padding: 8px 4px 16px;
	text-align: center;
}

.dlc-site {
	color: var(--text);
	font-weight: 700;
	font-size: 1.1rem;
	text-decoration: none;
}

.dlc-card {
	background: var(--card);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 28px 20px 24px;
	text-align: center;
	box-shadow: 0 6px 24px rgba(15, 23, 42, 0.07);
}

.dlc-title {
	margin: 0 0 6px;
	padding: 0;
	color: var(--text);
	font-weight: 700;
	text-align: center;
	font-size: 1.4rem;
	line-height: 1.5;
	word-break: break-word;
}

.dlc-sub {
	margin: 0 0 8px;
	color: var(--muted);
	font-size: 0.95rem;
}

/* مساحات الإعلانات: ارتفاع محجوز لتفادي القفز في التصميم */
.dlc-ad {
	margin: 24px auto;
	width: 100%;
	max-width: 100%;
}

.dlc-ad-bottom {
	margin-top: 44px;
}

.dlc-ad-label {
	display: block;
	margin-bottom: 4px;
	color: var(--muted);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
}

.dlc-ad-inner {
	min-height: 100px;
	overflow: hidden;
	text-align: center;
}

/* العدّاد */
.dlc-timer {
	position: relative;
	width: 140px;
	height: 140px;
	margin: 28px auto 12px;
}

.dlc-ring {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.dlc-ring circle {
	fill: none;
	stroke-width: 8;
}

.dlc-ring-bg {
	stroke: var(--ring-bg);
}

.dlc-ring-bar {
	stroke: var(--primary);
	stroke-linecap: round;
	transition: stroke-dashoffset 0.25s linear;
}

.dlc-num {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.6rem;
	color: var(--text);
	line-height: 1;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.dlc-timer.is-done .dlc-num {
	color: var(--primary);
}

.dlc-status {
	margin: 0 0 18px;
	color: var(--muted);
	min-height: 1.7em;
}

/* الزر */
.dlc-btn {
	display: inline-block;
	min-width: 220px;
	padding: 14px 32px;
	border-radius: 12px;
	background: var(--primary);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.dlc-btn:hover,
.dlc-btn:focus-visible {
	background: var(--primary-hover);
}

.dlc-btn:focus-visible {
	outline: 3px solid var(--primary);
	outline-offset: 3px;
}

.dlc-wrap a.dlc-btn,
.dlc-wrap a.dlc-btn:hover,
.dlc-wrap a.dlc-btn:focus {
	color: #fff;
	text-decoration: none;
}

.dlc-wrap a.dlc-btn.is-disabled {
	color: var(--disabled-text);
}

.dlc-btn.is-disabled {
	background: var(--disabled);
	color: var(--disabled-text);
	cursor: not-allowed;
	pointer-events: none;
}

.dlc-btn.is-ready {
	animation: dlc-pop 0.5s ease;
}

@keyframes dlc-pop {
	0% {
		transform: scale(0.92);
	}
	60% {
		transform: scale(1.06);
	}
	100% {
		transform: scale(1);
	}
}

.dlc-note {
	margin: 28px auto 0;
	max-width: 560px;
	color: var(--muted);
	font-size: 0.95rem;
	text-align: start;
}

.dlc-warn {
	margin: 16px 0 0;
	color: #b91c1c;
}

.dlc-back {
	margin: 28px 0 0;
	font-size: 0.9rem;
}

.dlc-back a {
	color: var(--muted);
}

@media (max-width: 480px) {
	.dlc-card {
		padding: 22px 14px 20px;
		border-radius: 14px;
	}
	.dlc-title {
		font-size: 1.2rem;
	}
	.dlc-btn {
		display: block;
		min-width: 0;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dlc-ring-bar,
	.dlc-btn {
		transition: none;
	}
	.dlc-btn.is-ready {
		animation: none;
	}
}