/* ==================================================================
   داشبورد فروشنده‌ها — رابط کاربری حرفه‌ای — نسخهٔ ۱.۳.۰
   تم: مشکی-طلایی لوکس + هدر سرمه‌ای، بخش‌بندی رنگی، نامک،
   راهنمای تول‌تیپ، آپلود تصویر هوشمند (۴:۵ / webp / ≤۵۰۰KB).
   ================================================================== */

/* ---------- متغیرهای رنگ ---------- */
.hzs-app {
	/* پالت اصلی برند */
	--hzs-gold:        #C9A96E;
	--hzs-gold-bright: #D4AF37;
	--hzs-gold-light:  #E8D5A3;
	--hzs-gold-dark:   #A08540;
	--hzs-gold-bg:     #faf6ec;
	--hzs-black:       #0A0A0A;
	--hzs-black-light: #1A1A1A;
	--hzs-black-card:  #141414;

	/* هدر سرمه‌ای تیره (بازطراحی ۱.۳.۰) */
	--hzs-navy:        #1e293b;
	--hzs-navy-light:  #334155;
	--hzs-navy-deep:   #0f172a;

	/* رنگ‌های بخش‌ها */
	--hzs-blue:        #2563eb;
	--hzs-blue-bg:     #eff6ff;
	--hzs-blue-border: #bfdbfe;
	--hzs-green:       #16a34a;
	--hzs-green-bg:    #f0fdf4;
	--hzs-green-border:#bbf7d0;
	--hzs-red:         #dc2626;
	--hzs-red-bg:      #fef2f2;
	--hzs-red-border:  #fecaca;
	--hzs-purple:      #7c3aed;
	--hzs-purple-bg:   #f5f3ff;
	--hzs-purple-border:#ddd6fe;

	/* خنثی */
	--hzs-text:        #1d2433;
	--hzs-text-soft:   #475569;
	--hzs-text-mute:   #6b7280;
	--hzs-line:        #e5e7eb;
	--hzs-line-soft:   #f1f5f9;
	--hzs-bg:          #f8fafc;

	font-family: 'Vazirmatn', 'Tahoma', sans-serif;
	direction: rtl;
	max-width: 980px;
	margin: 0 auto;
	padding: 20px 16px 60px;
	color: var(--hzs-text);
	box-sizing: border-box;
	line-height: 1.6;
}

.hzs-app *,
.hzs-app *::before,
.hzs-app *::after {
	box-sizing: border-box;
}

/* ---------- بارگذاری / خالی ---------- */
.hzs-loading {
	padding: 40px;
	text-align: center;
	color: var(--hzs-text-mute);
	background: #fff;
	border-radius: 16px;
	border: 1px solid var(--hzs-line);
	font-size: 14px;
}

.hzs-empty-state {
	text-align: center;
	padding: 60px 24px;
	background: #fff;
	border: 1px solid var(--hzs-line);
	border-radius: 16px;
}
.hzs-empty-state .hzs-empty-icon { font-size: 52px; margin-bottom: 12px; }
.hzs-empty-state h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.hzs-empty-state p { margin: 0 0 20px; color: var(--hzs-text-mute); font-size: 14px; }

/* ========================================================
   صفحهٔ ورود
   ======================================================== */
.hzs-login-wrap {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 0;
}

.hzs-login-card {
	background: linear-gradient(160deg, #fff 0%, #fff 60%, var(--hzs-gold-bg) 100%);
	border: 1px solid var(--hzs-gold-light);
	border-radius: 20px;
	padding: 36px 32px;
	max-width: 420px;
	width: 100%;
	box-shadow: 0 10px 40px rgba(10, 10, 10, .08);
	text-align: center;
}

.hzs-login-logo {
	display: inline-block;
	background: linear-gradient(135deg, var(--hzs-gold), var(--hzs-gold-dark));
	color: #fff;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .5px;
	padding: 6px 18px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.hzs-login-title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
	color: var(--hzs-black);
}

.hzs-login-sub {
	margin: 0 0 24px;
	color: var(--hzs-text-mute);
	font-size: 14px;
}

.hzs-login-card form { text-align: right; }

/* ========================================================
   کارت پایه
   ======================================================== */
.hzs-card {
	background: #fff;
	border: 1px solid var(--hzs-line);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
}

/* ========================================================
   فیلدها / ورودی‌ها
   ======================================================== */
.hzs-app .hzs-field {
	display: block;
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--hzs-text-soft);
}

/* ردیف برچسب + نشان راهنما (؟) */
.hzs-app .hzs-field-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}

.hzs-app .hzs-field > span,
.hzs-app .hzs-field-head > span {
	display: inline-block;
}

.hzs-app input[type="text"],
.hzs-app input[type="password"],
.hzs-app input[type="number"],
.hzs-app select,
.hzs-app textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1.5px solid var(--hzs-line);
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	color: var(--hzs-text);
	transition: border-color .15s, box-shadow .15s;
}
.hzs-app input::placeholder,
.hzs-app textarea::placeholder { color: #94a3b8; }

.hzs-app input:focus,
.hzs-app select:focus,
.hzs-app textarea:focus {
	outline: none;
	border-color: var(--hzs-gold);
	box-shadow: 0 0 0 3px rgba(201, 169, 110, .18);
}

.hzs-app select[multiple] {
	min-height: 90px;
}

/* فیلد کلیدی (وزن/عیار) — تأکید طلایی */
.hzs-field-key .hzs-field-head > span {
	color: var(--hzs-gold-dark);
}
.hzs-field-key input {
	border-color: var(--hzs-gold-light);
	background: #fffdf7;
}

/* فیلد نامک — تأکید برجسته */
.hzs-field-slug .hzs-field-head > span { color: var(--hzs-navy); }
.hzs-field-slug input {
	border-color: var(--hzs-navy-light);
	background: #f8fafc;
	font-family: 'Courier New', monospace;
	direction: ltr;
	text-align: left;
}
.hzs-field-slug input:focus {
	border-color: var(--hzs-navy);
	box-shadow: 0 0 0 3px rgba(30, 41, 59, .15);
}
.hzs-slug-preview {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--hzs-text-mute);
	margin-top: 4px;
	direction: ltr;
}
.hzs-slug-ok    { color: var(--hzs-green); font-weight: 700; }
.hzs-slug-bad   { color: var(--hzs-red);   font-weight: 700; }

/* ========================================================
   راهنمای تول‌تیپ (علامت «؟») — نسخهٔ ۱.۳.۰
   ======================================================== */
.hzs-tip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--hzs-navy-light);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	cursor: help;
	font-family: 'Tahoma', sans-serif;
	user-select: none;
}
.hzs-tip::before {
	content: '?';
}
.hzs-tip-box {
	position: absolute;
	bottom: calc(100% + 8px);
	right: 50%;
	transform: translateX(50%);
	min-width: 200px;
	max-width: 280px;
	padding: 9px 12px;
	background: var(--hzs-navy-deep);
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(15, 23, 42, .25);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s, visibility .15s;
	z-index: 50;
	pointer-events: none;
	text-align: right;
	white-space: normal;
}
.hzs-tip-box::after {
	content: '';
	position: absolute;
	top: 100%;
	right: calc(50% - 6px);
	border: 6px solid transparent;
	border-top-color: var(--hzs-navy-deep);
}
.hzs-tip:hover .hzs-tip-box,
.hzs-tip:focus .hzs-tip-box {
	opacity: 1;
	visibility: visible;
}

/* ========================================================
   دکمه‌ها
   ======================================================== */
.hzs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	border: 1.5px solid var(--hzs-line);
	background: #fff;
	color: var(--hzs-text);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s, border-color .15s, opacity .15s, transform .1s;
	white-space: nowrap;
}
.hzs-btn:hover { background: var(--hzs-bg); }
.hzs-btn:active { transform: translateY(1px); }

.hzs-btn-primary {
	background: linear-gradient(135deg, var(--hzs-gold), var(--hzs-gold-dark));
	border-color: var(--hzs-gold-dark);
	color: #fff;
	box-shadow: 0 2px 8px rgba(160, 133, 64, .25);
}
.hzs-btn-primary:hover {
	background: linear-gradient(135deg, var(--hzs-gold-bright), var(--hzs-gold));
}

.hzs-btn-ghost {
	background: transparent;
	border-color: var(--hzs-line);
	color: var(--hzs-text-soft);
}
.hzs-btn-ghost:hover { background: var(--hzs-line-soft); }

.hzs-btn-danger {
	background: #fff;
	border-color: var(--hzs-red-border);
	color: var(--hzs-red);
}
.hzs-btn-danger:hover { background: var(--hzs-red-bg); }

.hzs-btn:disabled { opacity: .55; cursor: not-allowed; }
.hzs-btn-sm { padding: 7px 12px; font-size: 13px; }
.hzs-btn-lg { padding: 14px 28px; font-size: 15px; }
.hzs-btn-block { width: 100%; }

.hzs-link {
	background: none;
	border: none;
	color: var(--hzs-gold-dark);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	padding: 4px 6px;
}
.hzs-link:hover { text-decoration: underline; }

/* ========================================================
   نوار بالا (Header) — بازطراحی سرمه‌ای نسخهٔ ۱.۳.۰
   ======================================================== */
.hzs-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	background: linear-gradient(135deg, var(--hzs-navy-deep), var(--hzs-navy));
	border-radius: 16px;
	padding: 16px 20px;
	margin-bottom: 24px;
	box-shadow: 0 6px 20px rgba(15, 23, 42, .22);
	border: 1px solid var(--hzs-navy-light);
}

.hzs-brand { display: flex; flex-direction: column; }
.hzs-brand-mark {
	font-size: 11px;
	font-weight: 700;
	color: var(--hzs-gold);
	letter-spacing: 1px;
	text-transform: uppercase;
}
.hzs-brand-name {
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	margin-top: 2px;
}
.hzs-brand-ver {
	font-size: 10px;
	color: var(--hzs-gold-light);
	font-weight: 600;
	margin-top: 3px;
	opacity: .85;
}

.hzs-top-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.hzs-top-actions .hzs-btn-ghost {
	color: #e2e8f0;
	border-color: var(--hzs-navy-light);
	background: rgba(255, 255, 255, .04);
}
.hzs-top-actions .hzs-btn-ghost:hover {
	background: rgba(255, 255, 255, .1);
}

/* ========================================================
   عنوان بخش‌ها
   ======================================================== */
.hzs-section-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}
.hzs-section-head h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	color: var(--hzs-black);
	flex: 1;
}
.hzs-section-head .hzs-count {
	background: var(--hzs-gold-bg);
	color: var(--hzs-gold-dark);
	font-size: 12px;
	font-weight: 700;
	padding: 3px 12px;
	border-radius: 999px;
	border: 1px solid var(--hzs-gold-light);
}

/* نوار بالای لیست (بازطراحی ۱.۳.۰) */
.hzs-list-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: linear-gradient(90deg, var(--hzs-blue-bg), #fff);
	border: 1px solid var(--hzs-blue-border);
	border-radius: 12px 12px 0 0;
	padding: 12px 16px;
	margin-bottom: 14px;
}
.hzs-list-head h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: var(--hzs-blue);
}

/* ========================================================
   فیلدست‌های رنگی (قلب طراحی حرفه‌ای)
   ======================================================== */
.hzs-fieldset {
	border: 1.5px solid var(--hzs-line);
	border-radius: 14px;
	padding: 22px 20px 8px;
	margin: 0 0 20px;
	background: #fff;
}
.hzs-fieldset legend {
	font-size: 14px;
	font-weight: 800;
	padding: 4px 14px;
	border-radius: 10px;
	background: #fff;
	border: 1.5px solid var(--hzs-line);
}
.hzs-fs-desc {
	margin: -8px 0 16px;
	font-size: 12.5px;
	color: var(--hzs-text-mute);
}

/* آبی — اطلاعات اصلی / پرفروش‌ها */
.hzs-fs-blue { border-color: var(--hzs-blue-border); background: #fff; }
.hzs-fs-blue legend { color: var(--hzs-blue); border-color: var(--hzs-blue-border); background: var(--hzs-blue-bg); }

/* سرمه‌ای — نامک */
.hzs-fs-navy { border-color: var(--hzs-navy-light); background: #fff; }
.hzs-fs-navy legend { color: var(--hzs-navy); border-color: var(--hzs-navy-light); background: var(--hzs-blue-bg); }

/* طلایی — مشخصات طلا */
.hzs-fs-gold { border-color: var(--hzs-gold-light); background: #fffdf9; }
.hzs-fs-gold legend { color: var(--hzs-gold-dark); border-color: var(--hzs-gold-light); background: var(--hzs-gold-bg); }

/* سبز — قیمت/موجودی */
.hzs-fs-green { border-color: var(--hzs-green-border); }
.hzs-fs-green legend { color: var(--hzs-green); border-color: var(--hzs-green-border); background: var(--hzs-green-bg); }

/* بنفش — تصاویر */
.hzs-fs-purple { border-color: var(--hzs-purple-border); }
.hzs-fs-purple legend { color: var(--hzs-purple); border-color: var(--hzs-purple-border); background: var(--hzs-purple-bg); }

/* قرمز — هشدار موجودی */
.hzs-fs-red { border-color: var(--hzs-red-border); }
.hzs-fs-red legend { color: var(--hzs-red); border-color: var(--hzs-red-border); background: var(--hzs-red-bg); }

/* ========================================================
   فهرست محصولات
   ======================================================== */
.hzs-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hzs-prod-card {
	display: flex;
	gap: 16px;
	padding: 16px;
	align-items: flex-start;
	transition: box-shadow .15s, transform .15s;
}
.hzs-prod-card:hover {
	box-shadow: 0 6px 20px rgba(16, 24, 40, .09);
	transform: translateY(-1px);
}

.hzs-row-img {
	width: 84px;
	height: 84px;
	flex-shrink: 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--hzs-line-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hzs-line);
}
.hzs-row-img img { width: 100%; height: 100%; object-fit: cover; }
.hzs-noimg { font-size: 11px; color: #94a3b8; text-align: center; }

.hzs-row-main { flex: 1; min-width: 0; }

.hzs-row-name {
	font-weight: 800;
	font-size: 15px;
	margin: 0 0 6px;
	color: var(--hzs-black);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.hzs-row-meta {
	font-size: 13px;
	color: var(--hzs-text-mute);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}
.hzs-meta-item b { color: var(--hzs-text-soft); font-weight: 700; }

/* نامک محصول در کارت */
.hzs-row-slug {
	display: inline-block;
	font-size: 11px;
	color: var(--hzs-navy);
	background: var(--hzs-blue-bg);
	padding: 2px 8px;
	border-radius: 6px;
	border: 1px solid var(--hzs-blue-border);
	font-family: 'Courier New', monospace;
	direction: ltr;
}

/* وزن به‌صورت مجزا و برجسته */
.hzs-row-weight {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--hzs-gold-dark);
	background: var(--hzs-gold-bg);
	padding: 3px 10px;
	border-radius: 8px;
	border: 1px solid var(--hzs-gold-light);
	margin-bottom: 4px;
}

.hzs-row-gold {
	font-size: 12px;
	color: var(--hzs-text-soft);
}
.hzs-row-gold b { color: var(--hzs-gold-dark); font-weight: 700; }
.hzs-dot { color: var(--hzs-line); margin: 0 2px; }

.hzs-row-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-shrink: 0;
}

/* ========================================================
   نشانگر وضعیت
   ======================================================== */
.hzs-badge {
	display: inline-block;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
}
.hzs-st-draft   { background: #fef3c7; color: #92400e; }
.hzs-st-pending { background: var(--hzs-purple-bg); color: #5b21b6; }
.hzs-st-publish { background: var(--hzs-green-bg); color: #166534; }

/* ========================================================
   یادداشت / راهنما
   ======================================================== */
.hzs-note {
	margin-top: 8px;
	padding: 10px 12px;
	background: var(--hzs-gold-bg);
	border: 1px solid var(--hzs-gold-light);
	border-radius: 10px;
	font-size: 13px;
	color: var(--hzs-gold-dark);
}
.hzs-note-warn {
	background: var(--hzs-red-bg);
	border-color: var(--hzs-red-border);
	color: #991b1b;
}
.hzs-hint {
	margin-bottom: 16px;
	padding: 11px 14px;
	background: var(--hzs-blue-bg);
	border: 1px solid var(--hzs-blue-border);
	border-radius: 10px;
	font-size: 13px;
	color: #1e40af;
}

/* ========================================================
   فرم: گرید / آپلود
   ======================================================== */
.hzs-grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.hzs-grid2 .hzs-field { margin-bottom: 0; }

.hzs-form-title {
	margin: 14px 0 6px;
	font-size: 18px;
	font-weight: 800;
}

.hzs-upload {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

#hzs-imgprev {
	width: 96px;
	height: 96px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--hzs-line-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px dashed var(--hzs-gold-light);
}
.hzs-imgprev { max-width: 100%; max-height: 100%; object-fit: cover; }

.hzs-form-actions { margin-top: 12px; display: flex; justify-content: center; }

.hzs-error {
	color: var(--hzs-red);
	font-size: 13px;
	margin: 6px 0;
	min-height: 1px;
	font-weight: 600;
}

.hzs-error-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px;
	background: var(--hzs-red-bg);
	border: 1px solid var(--hzs-red-border);
	border-radius: 14px;
	text-align: center;
	color: #991b1b;
	font-weight: 600;
}
.hzs-error-icon { font-size: 36px; }

/* ========================================================
   گالری + راهنمای تصویر (نسخهٔ ۱.۳.۰)
   ======================================================== */
.hzs-gallery { margin-top: 4px; }
.hzs-gallery-empty {
	font-size: 12px;
	color: #94a3b8;
	padding: 14px;
	text-align: center;
	border: 1.5px dashed var(--hzs-line);
	border-radius: 10px;
}
#hzs-gallery-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}
.hzs-gallery-item {
	position: relative;
	width: 82px;
	height: 82px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--hzs-line);
}
.hzs-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.hzs-gallery-del {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: none;
	background: rgba(220, 38, 38, .92);
	color: #fff;
	font-size: 11px;
	cursor: pointer;
	line-height: 22px;
	padding: 0;
}
.hzs-gallery-add {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.hzs-gallery-add #hzs-gallery-msg { font-size: 12px; color: var(--hzs-text-mute); }
.hzs-gallery-item #hzs-gallery-msg,
#hzs-upload-msg { font-size: 12px; color: var(--hzs-text-mute); }

/* راهنمای الزامات تصویر */
.hzs-img-rules {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}
.hzs-img-rule {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	color: var(--hzs-navy);
	background: var(--hzs-blue-bg);
	border: 1px solid var(--hzs-blue-border);
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 600;
}

/* شماره موقعیت تصویر روی دکمه‌ها */
.hzs-slot-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--hzs-purple);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	margin-left: 4px;
}

/* ========================================================
   آمار فروش
   ======================================================== */
.hzs-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 22px;
}
.hzs-stat-card {
	border-radius: 16px;
	padding: 22px 12px;
	text-align: center;
	border: 1.5px solid;
}
.hzs-stat-num {
	font-size: 28px;
	font-weight: 900;
	line-height: 1.2;
}
.hzs-stat-lbl { font-size: 12.5px; color: var(--hzs-text-mute); margin-top: 6px; }

.hzs-stat-blue  { background: var(--hzs-blue-bg);   border-color: var(--hzs-blue-border); }
.hzs-stat-blue  .hzs-stat-num { color: var(--hzs-blue); }
.hzs-stat-green { background: var(--hzs-green-bg);  border-color: var(--hzs-green-border); }
.hzs-stat-green .hzs-stat-num { color: var(--hzs-green); }
.hzs-stat-gold  { background: #fff;                 border-color: var(--hzs-gold-light); }
.hzs-stat-gold  .hzs-stat-num { color: var(--hzs-gold-dark); }

.hzs-stat-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--hzs-line);
	border-radius: 10px;
	margin-bottom: 6px;
	font-size: 13px;
}
.hzs-stat-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--hzs-gold-bg);
	color: var(--hzs-gold-dark);
	font-weight: 800;
	font-size: 12px;
	flex-shrink: 0;
}
.hzs-stat-name { flex: 1; font-weight: 600; }
.hzs-stat-val { color: var(--hzs-text-soft); font-weight: 700; }
.hzs-stat-rev { color: var(--hzs-green); font-weight: 700; }
.hzs-stat-row .hzs-low { color: var(--hzs-red); }

.hzs-empty-sm {
	font-size: 12.5px;
	color: #94a3b8;
	padding: 12px;
	text-align: center;
}

/* ========================================================
   گفت‌وگو (Thread)
   ======================================================== */
.hzs-thread-card { padding: 18px; }
.hzs-thread {
	max-height: 380px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	background: var(--hzs-bg);
	border: 1px solid var(--hzs-line);
	border-radius: 14px;
	margin-bottom: 16px;
}
.hzs-bubble {
	max-width: 78%;
	padding: 10px 13px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.65;
}
.hzs-b-admin {
	align-self: flex-start;
	background: var(--hzs-blue-bg);
	border: 1px solid var(--hzs-blue-border);
	border-bottom-right-radius: 4px;
}
.hzs-b-seller {
	align-self: flex-end;
	background: var(--hzs-green-bg);
	border: 1px solid var(--hzs-green-border);
	border-bottom-left-radius: 4px;
}
.hzs-bubble-meta { font-size: 11px; margin-bottom: 3px; }
.hzs-bubble-meta b { font-weight: 800; }
.hzs-bubble-meta small { color: var(--hzs-text-mute); }
.hzs-bubble-text { white-space: pre-wrap; word-wrap: break-word; }

.hzs-msg-count {
	font-size: 11px;
	background: var(--hzs-gold-bg);
	color: var(--hzs-gold-dark);
	padding: 1px 8px;
	border-radius: 999px;
	font-weight: 700;
	border: 1px solid var(--hzs-gold-light);
}

/* ========================================================
   واکنش‌گرا (موبایل)
   ======================================================== */
@media (max-width: 640px) {
	.hzs-app { padding: 14px 12px 50px; }

	.hzs-top { flex-direction: column; align-items: stretch; }
	.hzs-top-actions { justify-content: space-between; }
	.hzs-top-actions .hzs-btn { flex: 1; }

	.hzs-grid2 { grid-template-columns: 1fr; }

	.hzs-prod-card { flex-direction: column; align-items: stretch; }
	.hzs-row-img { width: 100%; height: 180px; }
	.hzs-row-actions { flex-direction: row; }
	.hzs-row-actions .hzs-btn { flex: 1; }

	.hzs-stats-grid { grid-template-columns: 1fr; }

	.hzs-section-head h2 { font-size: 18px; }

	.hzs-bubble { max-width: 90%; }

	.hzs-login-card { padding: 28px 22px; }

	/* تول‌تیپ روی موبایل عرض کامل‌تر */
	.hzs-tip-box { min-width: 160px; }
}

/* اسکرول‌بار طلایی ظریف */
.hzs-thread::-webkit-scrollbar { width: 7px; }
.hzs-thread::-webkit-scrollbar-track { background: transparent; }
.hzs-thread::-webkit-scrollbar-thumb {
	background: var(--hzs-gold-light);
	border-radius: 999px;
}
.hzs-thread::-webkit-scrollbar-thumb:hover { background: var(--hzs-gold); }