:root {
	--pcdz-teal: #0f766e;
	--pcdz-teal-dark: #0b5850;
	--pcdz-coral: #fb7185;
	--pcdz-coral-dark: #e8536a;
	--pcdz-bg: #f8faf9;
	--pcdz-card: #ffffff;
	--pcdz-border: #e2e8e6;
	--pcdz-text: #1a2e2b;
	--pcdz-text-muted: #5b6b68;
	--pcdz-radius: 14px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--pcdz-bg);
	color: var(--pcdz-text);
	font-family: 'Inter', system-ui, sans-serif;
	line-height: 1.6;
}

body[data-lang="ar"] {
	font-family: 'Cairo', 'Inter', sans-serif;
}

.pcdz-container {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Header */
.pcdz-header {
	border-bottom: 1px solid var(--pcdz-border);
	background: var(--pcdz-card);
}
.pcdz-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
}
.pcdz-tools-nav {
	background: var(--pcdz-teal-dark);
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.pcdz-tools-nav-inner {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	padding: 0 20px;
}
.pcdz-tools-nav-link {
	display: inline-block;
	white-space: nowrap;
	padding: 10px 14px;
	font-size: 0.82rem;
	font-weight: 600;
	color: rgba(255,255,255,0.75);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.pcdz-tools-nav-link:hover { color: #fff; }
.pcdz-tools-nav-link.active { color: #fff; border-bottom-color: var(--pcdz-coral); }
.pcdz-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--pcdz-teal-dark);
	text-decoration: none;
}
.pcdz-logo-text em { color: var(--pcdz-coral); font-style: normal; }
.pcdz-beta-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(251, 113, 133, 0.12);
	color: var(--pcdz-coral-dark);
	border: 1.5px solid var(--pcdz-coral);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: 3px 10px;
	border-radius: 999px;
	line-height: 1.4;
	margin-inline-start: 6px;
}
.pcdz-lang-switch { display: flex; gap: 4px; }
.pcdz-lang-btn {
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--pcdz-text-muted);
	text-decoration: none;
	border: 1px solid transparent;
}
.pcdz-lang-btn.active,
.pcdz-lang-btn:hover {
	background: var(--pcdz-teal);
	color: #fff;
}

/* Hero */
.pcdz-hero { text-align: center; padding: 48px 0 24px; }
.pcdz-hero h1 { font-size: 1.9rem; margin: 0 0 10px; color: var(--pcdz-teal-dark); }
.pcdz-hero p { color: var(--pcdz-text-muted); margin: 0; }

/* Tool card */
.pcdz-tool {
	background: var(--pcdz-card);
	border: 1px solid var(--pcdz-border);
	border-radius: var(--pcdz-radius);
	padding: 28px;
	margin: 24px 0;
	box-shadow: 0 2px 10px rgba(15, 118, 110, 0.06);
}

.pcdz-dropzone {
	border: 2px dashed var(--pcdz-border);
	border-radius: var(--pcdz-radius);
	padding: 40px 20px;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	color: var(--pcdz-text-muted);
}
.pcdz-dropzone.dragover {
	border-color: var(--pcdz-teal);
	background: rgba(15, 118, 110, 0.05);
}
.pcdz-dropzone svg { color: var(--pcdz-teal); margin-bottom: 8px; }
.pcdz-drop-text { font-weight: 600; color: var(--pcdz-text); margin: 4px 0; }
.pcdz-drop-or { font-size: 0.85rem; margin: 8px 0; }

.pcdz-btn {
	display: inline-block;
	border: none;
	border-radius: 10px;
	padding: 12px 22px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}
.pcdz-btn-primary { background: var(--pcdz-teal); color: #fff; }
.pcdz-btn-primary:hover { background: var(--pcdz-teal-dark); }
.pcdz-btn-ghost { background: transparent; color: var(--pcdz-text-muted); border: 1px solid var(--pcdz-border); margin-top: 10px; }
.pcdz-btn-block { display: block; width: 100%; margin-top: 16px; }

.pcdz-quality { margin-top: 24px; }
.pcdz-mode-switch { display: flex; gap: 10px; margin-bottom: 10px; }
.pcdz-mode-opt { flex: 1 1 auto; border: 1px solid var(--pcdz-border); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.88rem; font-weight: 600; }
.pcdz-mode-opt:has(input:checked) { border-color: var(--pcdz-teal); background: rgba(15,118,110,0.06); color: var(--pcdz-teal-dark); }
.pcdz-mode-note { font-size: 0.8rem; color: var(--pcdz-text-muted); margin: 0 0 16px; }
.pcdz-quality-label { font-weight: 600; margin-bottom: 10px; }
.pcdz-quality-label strong { color: var(--pcdz-teal); }
.pcdz-slider { width: 100%; accent-color: var(--pcdz-teal); height: 6px; cursor: pointer; }
.pcdz-quality-scale { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--pcdz-text-muted); margin-top: 4px; }
.pcdz-estimate { display: flex; align-items: center; justify-content: space-between; background: rgba(15, 118, 110, 0.06); border: 1px dashed var(--pcdz-teal); border-radius: 10px; padding: 10px 14px; margin-top: 16px; font-size: 0.9rem; }
.pcdz-estimate-value { font-weight: 700; color: var(--pcdz-teal-dark); }
.pcdz-quality-note { font-size: 0.8rem; color: var(--pcdz-text-muted); margin-top: 10px; }
.pcdz-warning { margin-top: 12px; padding: 12px 16px; border-radius: 10px; background: #fff7ed; color: #9a3412; font-size: 0.88rem; font-weight: 600; }

/* شريط الإحصائيات (بيل مضغوط واحد بدل صناديق منفصلة) */
.pcdz-stats-bar {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}
.pcdz-stats-pill {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #ffffff;
	border: 1px solid var(--pcdz-border);
	border-radius: 999px;
	padding: 8px 18px;
	box-shadow: 0 2px 10px rgba(15, 118, 110, 0.08);
	flex-wrap: wrap;
	justify-content: center;
}
.pcdz-stats-item {
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--pcdz-teal-dark);
	white-space: nowrap;
}
.pcdz-stats-item-rating { color: var(--pcdz-coral-dark); }
.pcdz-stats-num { font-size: 1rem; font-weight: 800; }
.pcdz-stats-sub { font-size: 0.72rem; color: var(--pcdz-text-muted); font-weight: 500; }
.pcdz-stats-divider { width: 1px; height: 16px; background: var(--pcdz-border); }

@media (max-width: 380px) {
	.pcdz-stats-pill { padding: 7px 14px; gap: 8px; }
	.pcdz-stats-item { font-size: 0.78rem; }
}

/* صندوق التقييم بالنجوم */
.pcdz-rating-box { margin-top: 24px; text-align: center; border-top: 1px solid var(--pcdz-border); padding-top: 20px; }
.pcdz-rating-prompt { font-weight: 600; margin-bottom: 8px; }
.pcdz-stars { display: flex; justify-content: center; gap: 6px; }
.pcdz-star { background: none; border: none; font-size: 2rem; line-height: 1; color: var(--pcdz-border); cursor: pointer; padding: 0; transition: color .1s, transform .1s; }
.pcdz-star:hover, .pcdz-star.pcdz-star-hover { color: #fbbf24; transform: scale(1.1); }
.pcdz-star.pcdz-star-active { color: #fbbf24; }
.pcdz-rating-thanks { color: var(--pcdz-teal-dark); font-weight: 600; margin-top: 8px; }

/* صندوق المشاركة */
.pcdz-share-box { margin-top: 20px; text-align: center; }
.pcdz-share-label { font-weight: 600; margin-bottom: 10px; font-size: 0.9rem; }
.pcdz-share-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pcdz-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border-radius: 8px;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	color: #fff;
}
.pcdz-share-whatsapp { background: #25d366; }
.pcdz-share-facebook { background: #1877f2; }
.pcdz-share-x { background: #111827; }
.pcdz-share-copy { background: var(--pcdz-text-muted); }

.pcdz-progress { margin-top: 24px; }
.pcdz-progress-bar { height: 8px; border-radius: 6px; background: var(--pcdz-border); overflow: hidden; }
.pcdz-progress-fill { height: 100%; width: 0%; background: var(--pcdz-coral); transition: width .2s; }
.pcdz-progress-text { text-align: center; font-size: 0.85rem; color: var(--pcdz-text-muted); margin-top: 8px; }

.pcdz-result { margin-top: 24px; }
.pcdz-result-stats { display: flex; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.pcdz-stat-label { display: block; font-size: 0.8rem; color: var(--pcdz-text-muted); }
.pcdz-stat-value { display: block; font-size: 1.2rem; font-weight: 700; }
.pcdz-stat-highlight { color: var(--pcdz-teal); }
.pcdz-arrow { color: var(--pcdz-coral); font-size: 1.3rem; }
[dir="rtl"] .pcdz-arrow { transform: scaleX(-1); }
.pcdz-reduction { text-align: center; font-weight: 700; color: var(--pcdz-coral-dark); margin: 14px 0 0; }
.pcdz-reduction.pcdz-negative { color: #b91c1c; }

.pcdz-error {
	margin-top: 18px;
	padding: 12px 16px;
	border-radius: 10px;
	background: #fef2f2;
	color: #b91c1c;
	font-size: 0.9rem;
}

.pcdz-how { padding: 12px 0 48px; }
.pcdz-how h2 { font-size: 1.3rem; color: var(--pcdz-teal-dark); }
.pcdz-how ol { padding-inline-start: 20px; color: var(--pcdz-text-muted); }
.pcdz-how li { margin-bottom: 6px; }
.pcdz-disclaimer {
	margin-top: 18px;
	font-size: 0.82rem;
	color: var(--pcdz-text-muted);
	border-inline-start: 3px solid var(--pcdz-coral);
	padding-inline-start: 12px;
}

.pcdz-footer {
	border-top: 1px solid var(--pcdz-border);
	padding: 24px 0;
	text-align: center;
	color: var(--pcdz-text-muted);
	font-size: 0.85rem;
}
.pcdz-footer-nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 12px 0;
}
.pcdz-footer-nav a {
	color: var(--pcdz-text-muted);
	text-decoration: none;
	font-size: 0.82rem;
}
.pcdz-footer-nav a:hover { color: var(--pcdz-teal); text-decoration: underline; }
.pcdz-copy { margin: 4px 0 0; opacity: 0.7; }

/* أداة التوقيع الإلكتروني */
.pcdz-sign-page-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0; font-size: 0.9rem; font-weight: 700; color: var(--pcdz-teal-dark); }
.pcdz-sign-page-nav button { border: 1px solid var(--pcdz-border); background: #fff; border-radius: 8px; width: 34px; height: 34px; font-size: 1rem; cursor: pointer; }
.pcdz-sign-page-wrap { position: relative; display: flex; justify-content: center; background: #f1f5f4; border-radius: 10px; padding: 10px; }
.pcdz-sign-page-wrap canvas { max-width: 100%; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.15); cursor: crosshair; }
.pcdz-sig-overlay { position: absolute; border: 1px dashed var(--pcdz-coral); }
.pcdz-sig-overlay img { width: 100%; height: 100%; display: block; pointer-events: none; }
.pcdz-sig-remove-btn { position: absolute; top: -10px; left: -10px; background: #b91c1c; color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 0.7rem; cursor: pointer; }
.pcdz-sign-pad-section { margin-top: 18px; border-top: 1px solid var(--pcdz-border); padding-top: 16px; }
.pcdz-sign-pad-section label { font-size: 0.85rem; color: var(--pcdz-text-muted); display: block; margin-bottom: 6px; }
.pcdz-sign-pad-wrap { background: #fff; border: 1px dashed var(--pcdz-border); border-radius: 10px; text-align: center; }
#pcdz-sign-pad { touch-action: none; cursor: crosshair; max-width: 100%; }
.pcdz-sign-controls { display: flex; gap: 8px; margin-top: 8px; }
.pcdz-btn-sm { padding: 7px 12px; font-size: 0.8rem; }
.pcdz-sign-size-row { margin-top: 12px; font-size: 0.85rem; }
.pcdz-sign-size-row input { width: 100%; accent-color: var(--pcdz-teal); }
.pcdz-sign-placing-badge { display: none; background: var(--pcdz-coral); color: #fff; text-align: center; padding: 8px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; margin-bottom: 10px; }
.pcdz-sign-placing-badge.active { display: block; }
.pcdz-file-list { margin: 14px 0; }
.pcdz-file-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f1f5f4;
	border-radius: 8px;
	padding: 9px 14px;
	margin-bottom: 6px;
	font-size: 0.85rem;
}
.pcdz-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80%; }
.pcdz-file-remove { border: none; background: none; color: #b91c1c; font-weight: 700; cursor: pointer; font-size: 1rem; }

.pcdz-split-options { margin-top: 20px; }
.pcdz-split-multi { margin-top: 20px; border-top: 1px solid var(--pcdz-border); padding-top: 16px; }
.pcdz-split-multi label { font-size: 0.85rem; color: var(--pcdz-text-muted); display: block; margin-bottom: 6px; font-weight: 600; }
.pcdz-split-multi input[type=text] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--pcdz-border);
	border-radius: 8px;
	font-size: 0.9rem;
	font-family: inherit;
	direction: ltr;
	text-align: left;
}
.pcdz-note { font-size: 0.85rem; color: var(--pcdz-text-muted); margin-bottom: 12px; text-align: center; }
.pcdz-row { display: flex; gap: 10px; margin-bottom: 14px; }
.pcdz-row > div { flex: 1; }
.pcdz-row label, .pcdz-split-options > label {
	font-size: 0.82rem;
	color: var(--pcdz-text-muted);
	display: block;
	margin-bottom: 4px;
}
.pcdz-row input[type=number] {
	width: 100%;
	padding: 9px;
	border: 1px solid var(--pcdz-border);
	border-radius: 8px;
	font-size: 0.9rem;
	font-family: inherit;
}
.pcdz-split-options select {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--pcdz-border);
	border-radius: 8px;
	font-size: 0.9rem;
	font-family: inherit;
	background: #fff;
	margin-bottom: 14px;
}

.pcdz-thumbs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 10px;
	margin-top: 14px;
}
.pcdz-thumb {
	border: 1px solid var(--pcdz-border);
	border-radius: 8px;
	padding: 6px;
	text-align: center;
	background: #fff;
}
.pcdz-thumb img { width: 100%; border-radius: 4px; }
.pcdz-thumb a { display: block; margin-top: 6px; font-size: 0.72rem; color: var(--pcdz-teal-dark); text-decoration: none; font-weight: 700; }
.pcdz-org-hint { font-size: 0.85rem; color: var(--pcdz-text-muted); margin-bottom: 14px; text-align: center; }
.pcdz-org-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}
.pcdz-org-card {
	background: #fff;
	border: 1px solid var(--pcdz-border);
	border-radius: 10px;
	padding: 8px;
	text-align: center;
	transition: opacity .15s;
}
.pcdz-org-card-deleted { opacity: 0.45; }
.pcdz-org-thumb-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 3/4;
	overflow: hidden;
	border-radius: 6px;
	background: #f1f5f4;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pcdz-org-thumb-inner {
	transition: transform .2s;
	display: flex;
}
.pcdz-org-thumb-inner canvas { max-width: 100%; height: auto; display: block; }
.pcdz-org-deleted-overlay {
	display: none;
	position: absolute;
	inset: 0;
	background: rgba(185, 28, 28, 0.55);
	color: #fff;
	font-size: 1.6rem;
	align-items: center;
	justify-content: center;
}
.pcdz-org-card-deleted .pcdz-org-deleted-overlay { display: flex; }
.pcdz-org-page-num { font-size: 0.72rem; color: var(--pcdz-text-muted); margin: 6px 0 4px; }
.pcdz-org-card-actions { display: flex; justify-content: center; gap: 6px; }
.pcdz-org-icon-btn {
	border: 1px solid var(--pcdz-border);
	background: #fff;
	border-radius: 8px;
	width: 32px;
	height: 32px;
	font-size: 1rem;
	cursor: pointer;
	color: var(--pcdz-teal-dark);
}
.pcdz-org-icon-btn:hover { background: rgba(15,118,110,0.08); }
.pcdz-org-delete-btn { color: #b91c1c; }
.pcdz-org-actions { margin-top: 8px; }
.pcdz-page-content { padding: 40px 0 56px; }
.pcdz-page-content h1 { color: var(--pcdz-teal-dark); font-size: 1.7rem; margin-bottom: 20px; }
.pcdz-static-content h2 { color: var(--pcdz-teal-dark); font-size: 1.15rem; margin: 28px 0 8px; }
.pcdz-static-content p { color: var(--pcdz-text); margin: 0 0 12px; }
.pcdz-contact-list { list-style: none; padding: 0; margin: 20px 0 0; }
.pcdz-contact-list li {
	background: var(--pcdz-card);
	border: 1px solid var(--pcdz-border);
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 10px;
}
.pcdz-contact-list a { color: var(--pcdz-teal); font-weight: 600; text-decoration: none; }
.pcdz-contact-list a:hover { text-decoration: underline; }

@media (max-width: 480px) {
	.pcdz-tool { padding: 20px; }
	.pcdz-hero h1 { font-size: 1.5rem; }
	.pcdz-quality-options { flex-direction: column; }
}