/* =========================================================
   پلن — داشبورد پروژه‌ها
   بر پایه دیزاین‌سیستم بریم تایلند v2 (همان مقیاس فاصله/شعاع/سایه/تایپوگرافی).
   تفاوت: لایه رنگ. به‌جای یک برند سبز-طلایی، هر پروژه یک --accent اختصاصی دارد
   و خنثی‌ها هیوی خنثی گرفته‌اند تا با هر شش رنگ بخوانند.
   منبع حقیقت: هیچ رنگ/فاصله/سایز/شعاع/سایه‌ای خارج از این توکن‌ها مجاز نیست.
   ========================================================= */

:root {
	/* ---- پالت پروژه‌ها — رنگ‌های گوگل (Material / Google Brand) ---- */
	/* هر رنگ: تُن ۶۰۰–۸۰۰ برای متن و آیکون (کنتراست AA روی سفید) + تُن ۵۰ برای پس‌زمینه */
	--g-blue:   #1A73E8;  --g-blue-soft:   #E8F0FE;
	--g-red:    #D93025;  --g-red-soft:    #FCE8E6;
	--g-yellow: #EA8600;  --g-yellow-soft: #FEF7E0;
	--g-green:  #188038;  --g-green-soft:  #E6F4EA;
	--g-cyan:   #007B83;  --g-cyan-soft:   #E4F7FB;
	--g-purple: #7627BB;  --g-purple-soft: #F3E8FD;
	--g-pink:   #B80672;  --g-pink-soft:   #FDE7F3;
	--g-orange: #C26401;  --g-orange-soft: #FEEFE3;

	/* ---- رنگ‌های معنایی — خاکستری‌های Google Grey ---- */
	/* مقیاس روشنایی: صفحه یک پله خاکستری، سکشن‌ها سفید، آیتم‌های داخلشان یک پله تیره‌تر */
	--bg: #F8F9FA;
	--tint: #FCFCFD;
	--surface: #FFFFFF;
	--surface-2: #F1F3F4;
	--text-1: #202124;
	--text-2: #5F6368;
	--text-3: #6D7276;
	--border: #DADCE0;
	--border-2: #C4C7C5;
	--success: #188038; --success-soft: #E6F4EA; --success-line: #A8DAB5;
	--warning: #C26401; --warning-soft: #FEF7E0; --warning-line: #FDD663;
	--error: #D93025;   --error-soft: #FCE8E6;

	/* پیش‌فرض اکسنت — هر کارت روی خودش بازنویسی می‌کند */
	--accent: var(--g-blue);
	--accent-soft: var(--g-blue-soft);

	/* ---- تایپوگرافی: یکان‌بخ FaNum ---- */
	--font: 'Yekan Bakh FaNum', Tahoma, 'Segoe UI', sans-serif;
	--fs-display: clamp(2rem, 4vw, 2.75rem); --fw-display: 900; --lh-display: 1.3;
	--fs-h2: clamp(1.375rem, 2.6vw, 1.75rem); --fw-h2: 800; --lh-h2: 1.4;
	--fs-h3: 1.25rem; --fw-h3: 800; --lh-h3: 1.45;
	--fs-body-lg: 1.125rem; --lh-body-lg: 1.9;
	--fs-body: 1rem; --lh-body: 1.85;
	--fs-caption: 0.875rem; --lh-caption: 1.7;
	--fs-micro: 0.8125rem;

	/* ---- فاصله (پایه ۴px) ---- */
	--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
	--sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
	--section-gap: clamp(40px, 6vw, 72px);
	--container: 1240px;

	/* ---- شعاع گوشه ---- */
	--r-sm: 10px;
	--r-md: 14px;
	--r-lg: 20px;
	--r-xl: 28px;
	--r-full: 999px;

	/* ---- سایه ---- */
	--sh-1: 0 1px 3px rgba(20,22,21,.05);
	--sh-2: 0 6px 24px rgba(20,22,21,.07);
	--sh-3: 0 16px 48px rgba(20,22,21,.12);

	/* ---- حرکت ---- */
	--ease: cubic-bezier(.22,.61,.36,1);
	--t-fast: 160ms;
	--t-med: 280ms;

	color-scheme: light;
}

/* ---------------------------------------------------------
   نایت‌مد — فقط توکن‌ها بازنویسی می‌شوند، هیچ کامپوننتی دست نمی‌خورد.
   رنگ‌های برند به تُن روشن‌تر گوگل (۳۰۰) می‌روند تا روی زمینه‌ی تیره کنتراست بدهند،
   و «soft»ها به نسخه‌ی کم‌اشباعِ تیره تبدیل می‌شوند.
   --------------------------------------------------------- */
:root[data-theme="dark"] {
	--g-blue:   #8AB4F8;  --g-blue-soft:   #1B2A43;
	--g-red:    #F28B82;  --g-red-soft:    #402522;
	--g-yellow: #FDD663;  --g-yellow-soft: #3D3220;
	--g-green:  #81C995;  --g-green-soft:  #1D3325;
	--g-cyan:   #78D9EC;  --g-cyan-soft:   #143138;
	--g-purple: #C58AF9;  --g-purple-soft: #2E2140;
	--g-pink:   #FF8BCB;  --g-pink-soft:   #3D1F31;
	--g-orange: #FCAD70;  --g-orange-soft: #3C2A19;

	--bg: #16181A;
	--tint: #1D2022;
	--surface: #202124;
	--surface-2: #2A2C2F;
	--text-1: #E8EAED;
	--text-2: #9AA0A6;
	--text-3: #8B9196;
	--border: #35383C;
	--border-2: #494C50;
	--success: #81C995; --success-soft: #1D3325; --success-line: #37634A;
	--warning: #FDD663; --warning-soft: #3D3220; --warning-line: #6B5A2A;
	--error: #F28B82;   --error-soft: #402522;

	--accent: var(--g-blue);
	--accent-soft: var(--g-blue-soft);

	--sh-1: 0 1px 3px rgba(0,0,0,.4);
	--sh-2: 0 6px 24px rgba(0,0,0,.45);
	--sh-3: 0 16px 48px rgba(0,0,0,.55);

	color-scheme: dark;
}

/* ---------------------------------------------------------
   Reset
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text-1);
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	direction: rtl;
	text-align: right;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

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

/* ---------------------------------------------------------
   تایپوگرافی
   --------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0 0 .6em; }
h1 { font-size: var(--fs-display); font-weight: var(--fw-display); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); }
p { margin: 0 0 1.2em; }
.text-muted { color: var(--text-2); }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------
   Layout
   --------------------------------------------------------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.section { padding-block: var(--sp-6); }
.icon { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-sm { width: 15px; height: 15px; vertical-align: -3px; }
.icon-lg { width: 28px; height: 28px; }

/* ---------------------------------------------------------
   هدر صفحه
   --------------------------------------------------------- */
.page-head {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	padding-block: var(--sp-7) var(--sp-6);
	position: relative;
	overflow: hidden;
}
/* نوار چهاررنگ بالای صفحه — ترتیب رنگ‌های لوگوی گوگل: آبی، قرمز، زرد، سبز */
.page-head::before {
	content: ''; position: absolute; inset-inline: 0; top: 0; height: 4px;
	background: linear-gradient(90deg,
		#4285F4 0%,   #4285F4 25%,
		#EA4335 25%,  #EA4335 50%,
		#FBBC05 50%,  #FBBC05 75%,
		#34A853 75%,  #34A853 100%);
}
.page-head .eyebrow {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	font-size: var(--fs-caption); font-weight: 700; color: var(--text-2);
	margin-bottom: var(--sp-3);
}
.page-head h1 { margin-bottom: var(--sp-3); }
.page-head .lede { color: var(--text-2); font-size: var(--fs-body-lg); max-width: 60ch; margin: 0; }

/* ---------------------------------------------------------
   ردیف KPI
   --------------------------------------------------------- */
.kpi-row {
	display: grid; gap: var(--sp-4);
	grid-template-columns: repeat(5, 1fr);
	margin-top: calc(var(--sp-6) * -1);
	position: relative; z-index: 2;
}
.kpi {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
	padding: var(--sp-5); box-shadow: var(--sh-1);
	border-top: 3px solid var(--accent);
}
.kpi-value { font-size: 2rem; font-weight: 900; line-height: 1.2; color: var(--accent); font-variant-numeric: tabular-nums; }
.kpi-label { font-size: var(--fs-caption); color: var(--text-2); font-weight: 600; }

/* ---------------------------------------------------------
   کلید نایت‌مد
   --------------------------------------------------------- */
.theme-toggle {
	position: absolute; top: var(--sp-6); inset-inline-start: clamp(16px, 4vw, 32px);
	width: 42px; height: 42px; border-radius: var(--r-full);
	background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
	display: grid; place-items: center;
	transition: all var(--t-fast) var(--ease);
}
.theme-toggle:hover { color: var(--text-1); border-color: var(--border-2); }
.theme-toggle .t-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .t-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .t-moon { display: block; }

/* ---------------------------------------------------------
   عملیات این هفته
   --------------------------------------------------------- */
.ops {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
	box-shadow: var(--sh-1); overflow: hidden; margin-bottom: var(--sp-6);
}
.ops-head {
	display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
	padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
	background: var(--surface-2);
}
.ops-head h2 { margin: 0; font-size: var(--fs-h3); display: inline-flex; align-items: center; gap: var(--sp-2); }
.ops-head h2 .icon { color: var(--g-yellow); }
.ops-date { font-size: var(--fs-caption); color: var(--text-2); font-variant-numeric: tabular-nums; }
.ops-total {
	font-size: var(--fs-micro); font-weight: 800;
	background: var(--g-blue-soft); color: var(--g-blue);
	border-radius: var(--r-full); padding: 3px 12px; margin-inline-start: auto;
}
.ops-total.is-over { background: var(--error-soft); color: var(--error); }
.ops-soon { font-size: var(--fs-micro); color: var(--text-3); flex-basis: 100%; }

/* ---- پیشرفت عملیات این هفته: واقعی در برابر روند مورد انتظار روز ---- */
.wp { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.wp-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.wp-title { font-size: var(--fs-caption); font-weight: 800; display: inline-flex; align-items: center; gap: var(--sp-2); }
.wp-title .icon-sm { color: var(--g-yellow); }
.wp-stat { font-size: var(--fs-micro); font-weight: 800; border-radius: var(--r-full); padding: 3px 12px; margin-inline-start: auto; }
.wp-stat.is-ok { background: var(--success-soft); color: var(--success); }
.wp-stat.is-behind { background: var(--error-soft); color: var(--error); }

.wp-track {
	position: relative; height: 14px; border-radius: var(--r-full);
	background: var(--surface-2); overflow: visible;
}
.wp-fill {
	position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
	border-radius: var(--r-full); transition: width var(--t-med) var(--ease);
}
.wp-fill.is-ok { background: var(--success); }
.wp-fill.is-behind { background: var(--error); }
/* خط نشانه‌ی «امروز باید اینجا باشیم» — با inset-inline-start همسو با RTL جابه‌جا می‌شود */
.wp-target {
	position: absolute; top: -4px; bottom: -4px; width: 2px; margin-inline-start: -1px;
	background: var(--text-1); border-radius: 1px;
}
.wp-note { margin-top: var(--sp-2); font-size: var(--fs-micro); color: var(--text-3); }
.wp-note b { color: var(--text-2); font-weight: 800; }

/* ---- نوار بار هفتگی در برابر ظرفیت ---- */
.load { border-top: 1px solid var(--border); padding: var(--sp-4) var(--sp-5) var(--sp-5); background: var(--tint); }
.load-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.load-title { font-size: var(--fs-caption); font-weight: 800; display: inline-flex; align-items: center; gap: var(--sp-2); }
.load-title .icon-sm { color: var(--g-yellow); }
.load-cap { font-size: var(--fs-micro); color: var(--text-2); }
.load-flag { font-size: var(--fs-micro); font-weight: 800; border-radius: var(--r-full); padding: 2px 12px; margin-inline-start: auto; }
.load-flag.is-ok { background: var(--success-soft); color: var(--success); }
.load-flag.is-over { background: var(--error-soft); color: var(--error); }

.load-bars { display: flex; gap: var(--sp-2); align-items: flex-end; }
.load-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.load-n { font-size: var(--fs-micro); font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.load-bar { width: 100%; height: 64px; background: var(--surface-2); border-radius: var(--r-sm); display: flex; align-items: flex-end; overflow: hidden; }
.load-bar i { width: 100%; background: var(--g-blue); border-radius: var(--r-sm); min-height: 2px; }
.load-col.is-over .load-bar i { background: var(--error); }
.load-col.is-over .load-n { color: var(--error); }
.load-w { font-size: var(--fs-micro); color: var(--text-3); font-variant-numeric: tabular-nums; }
.ops-empty { padding: var(--sp-6); text-align: center; color: var(--text-2); }

/* آکاردئون: هر پروژه یک details، بسته‌بودن پیش‌فرض تا سکشن کوتاه بماند */
.ops-grid { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
.ops-card {
	border: 1px solid var(--border); border-radius: var(--r-md);
	background: var(--tint); overflow: hidden;
	border-inline-start: 3px solid var(--accent);
}
.ops-card[open] { background: var(--surface); box-shadow: var(--sh-1); }

.ops-card-head {
	display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
	padding: var(--sp-3) var(--sp-4);
	cursor: pointer; list-style: none; user-select: none;
}
.ops-card-head::-webkit-details-marker { display: none; }
.ops-card-head:hover { background: var(--surface-2); }
.ops-card[open] .ops-card-head { border-bottom: 1px solid var(--border); }

.ops-name { font-weight: 800; font-size: var(--fs-caption); }
.ops-sum { font-size: var(--fs-micro); font-weight: 800; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-full); padding: 2px 10px; white-space: nowrap; }
/* خلاصه‌ی یک‌خطی وقتی بسته است */
.ops-brief {
	font-size: var(--fs-micro); color: var(--text-2); margin-inline-start: auto;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* خط توسعه — دو خط موازی و مستقل، پس هم‌زمانی‌شان تصادم نیست */
.ops-track {
	font-size: var(--fs-micro); font-weight: 800; white-space: nowrap;
	border-radius: var(--r-full); padding: 2px 10px;
}
.ops-track.t-wp { background: var(--g-purple-soft); color: var(--g-purple); }
.ops-track.t-en { background: var(--g-cyan-soft); color: var(--g-cyan); }

.ops-chev { color: var(--text-3); transition: transform var(--t-med) var(--ease); flex-shrink: 0; }
.ops-card[open] .ops-chev { transform: rotate(180deg); color: var(--accent); }
.ops-week { font-size: var(--fs-micro); color: var(--text-3); white-space: nowrap; }

/* زیرکارهای یک نقطه‌عطف */
.ms-tasks { display: grid; gap: 4px; margin: var(--sp-2) 0 0; }
.ms-tasks li {
	display: flex; align-items: center; gap: var(--sp-2);
	font-size: var(--fs-micro); color: var(--text-2); font-weight: 500; line-height: 1.7;
}

/* دکمه‌ی تیک — مشترک بین زیرکارهای نقطه‌عطف و آیتم‌های نام‌گذاری‌شده‌ی تقویم/عملیات این هفته */
.tick-btn {
	flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; padding: 0; border: none;
	display: grid; place-items: center; cursor: pointer; margin-top: 1px;
	background: var(--surface-2); color: var(--text-3);
	transition: background .15s, color .15s, transform .1s;
}
.tick-btn:hover { background: var(--accent-soft); color: var(--accent); }
.tick-btn:active { transform: scale(.9); }
.tick-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* کارهای انجام‌شده در «عملیات این هفته» — رنگی و برجسته (مثل بقیه‌ی is-done سایت: .tag, .check-item)،
   نه کم‌رنگ. آیتم انجام‌نشده همان متن تیره‌ی پیش‌فرض را دارد که خودش کافی است برای برجسته دیده شدن. */
.ms-tasks li.is-done, .ops-items li.is-done, .wk-items li.is-done {
	color: var(--success);
}
.ms-tasks li.is-done .tick-label, .ops-items li.is-done .wk-t, .wk-items li.is-done .wk-t {
	color: var(--success); text-decoration: line-through; text-decoration-color: var(--success-line);
}
.ms-tasks li.is-done .tick-btn, .ops-items li.is-done .tick-btn, .wk-items li.is-done .tick-btn {
	background: var(--success); color: #fff;
}

/* نشان اولویت — همان عدد ۱ تا ۶ */
.pri-num {
	width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
	display: grid; place-items: center;
	background: var(--accent); color: var(--surface);
	font-size: var(--fs-micro); font-weight: 900; font-variant-numeric: tabular-nums;
}

.ops-card-body { padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-3); }
.ops-group-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.ops-group-head .ops-n { font-size: var(--fs-micro); color: var(--text-3); font-weight: 700; }
.ops-items { display: grid; gap: var(--sp-2); }
.ops-items li { display: flex; align-items: flex-start; gap: var(--sp-2); line-height: 1.55; }
.ops-items .tick-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ops-items .wk-unnamed { padding-inline-start: 26px; }
.ops-milestone {
	display: flex; flex-direction: column; gap: 2px;
	background: var(--accent-soft); border-radius: var(--r-sm);
	padding: var(--sp-2) var(--sp-3); position: relative;
}
.ops-milestone .icon-sm { color: var(--accent); position: absolute; inset-inline-end: var(--sp-3); top: var(--sp-2); }
.ops-milestone .wk-t { font-size: var(--fs-caption); font-weight: 800; padding-inline-end: var(--sp-5); }

/* ---------------------------------------------------------
   نوار ابزار: فیلتر + جستجو
   --------------------------------------------------------- */
.toolbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.chip-group { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.filter-chip {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	background: var(--surface); border: 1.5px solid var(--border);
	color: var(--text-1); padding: 8px 18px; border-radius: var(--r-full);
	font-size: var(--fs-caption); font-weight: 700;
	transition: all var(--t-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--text-3); background: var(--surface-2); }
/* چیپ فعال به سبک گوگل: پس‌زمینه آبی روشن + متن آبی، نه پرکردن تیره */
.filter-chip.is-active { background: var(--g-blue-soft); border-color: var(--g-blue); color: var(--g-blue); }
.filter-chip .count {
	background: var(--surface-2); color: var(--text-2);
	border-radius: var(--r-full); padding: 1px 8px; font-size: var(--fs-micro);
	font-variant-numeric: tabular-nums;
}
.filter-chip.is-active .count { background: #fff; color: var(--g-blue); }

.search-box { position: relative; flex: 0 1 280px; }
.search-box .icon { position: absolute; inset-inline-start: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search-box input {
	width: 100%; padding-block: 10px; padding-inline-start: 40px; padding-inline-end: var(--sp-3);
	border: 1.5px solid var(--border); border-radius: var(--r-full);
	background: var(--surface); color: var(--text-1); font-size: var(--fs-caption);
	transition: border-color var(--t-fast) var(--ease);
}
.search-box input::placeholder { color: var(--text-3); }
.search-box input:focus { outline: none; border-color: var(--text-3); }

/* ---------------------------------------------------------
   گرید پروژه‌ها
   --------------------------------------------------------- */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: start; }

.p-card {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
	box-shadow: var(--sh-1); overflow: hidden; text-align: right; width: 100%;
	padding: 0; display: flex; flex-direction: column;
	transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.p-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--accent); }
.p-card.is-open { border-color: var(--accent); box-shadow: var(--sh-2); transform: none; }
.p-card-top { height: 5px; background: var(--accent); }
/* برند چتر (دات سفر): نوار بالای کارت چهاررنگ گوگل می‌شود تا از بقیه جدا باشد */
.p-card.is-umbrella .p-card-top {
	background: linear-gradient(90deg,
		#4285F4 0%,  #4285F4 25%,
		#EA4335 25%, #EA4335 50%,
		#FBBC05 50%, #FBBC05 75%,
		#34A853 75%, #34A853 100%);
}

.p-card-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.p-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.p-mark {
	width: 42px; height: 42px; border-radius: var(--r-md); flex-shrink: 0;
	background: var(--accent-soft); color: var(--accent);
	display: grid; place-items: center; font-weight: 900; font-size: 1.05rem;
}
.p-card-id { display: flex; gap: var(--sp-3); align-items: center; min-width: 0; }
.p-title { display: block; font-size: var(--fs-h3); font-weight: 800; line-height: 1.4; margin: 0; }
.p-domain { display: block; font-size: var(--fs-micro); color: var(--text-3); direction: ltr; text-align: right; font-weight: 600; }
.p-desc { display: block; font-size: var(--fs-caption); color: var(--text-2); line-height: 1.75; margin: 0; }
.p-card-top { display: block; }

/* بج وضعیت */
.badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border-radius: var(--r-full);
	font-size: var(--fs-micro); font-weight: 700; white-space: nowrap;
}
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-done { background: var(--success-soft); color: var(--success); }
.badge-active { background: var(--warning-soft); color: var(--warning); }
/* شروع‌نشده = تاریخ دارد ولی نرسیده → آبی. برنامه‌ریزی‌نشده = بی‌تاریخ → خاکستری خنثی */
.badge-scheduled { background: var(--g-blue-soft); color: var(--g-blue); }
.badge-backlog { background: var(--surface-2); color: var(--text-2); }
.badge-backlog::before { background: var(--text-3); }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.badge-plain::before { display: none; }

/* نوار پیشرفت */
.progress { display: flex; flex-direction: column; gap: 6px; }
.progress-meta { display: flex; justify-content: space-between; font-size: var(--fs-micro); color: var(--text-2); font-weight: 700; }
.progress-meta .val { color: var(--accent); font-variant-numeric: tabular-nums; }
.progress-track { height: 7px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: var(--r-full); transition: width 700ms var(--ease); }

/* تگ‌های کار */
.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: var(--fs-micro); font-weight: 600; padding: 4px 10px;
	border-radius: var(--r-sm); border: 1px solid var(--border);
	background: var(--tint); color: var(--text-2);
}
.tag.is-done { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 700; }
.tag .icon-sm { width: 13px; height: 13px; }
/* تگ زیرپروژه روی کارت مجموعه — نقطه‌ی رنگی همان پروژه */
.tag-dot { background: var(--surface); color: var(--text-1); font-weight: 700; }
.tag-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }

.p-card-foot {
	margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border);
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.p-content-count { font-size: var(--fs-micro); color: var(--text-2); font-weight: 600; }
.p-content-count b { color: var(--text-1); font-variant-numeric: tabular-nums; }
.p-toggle {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: var(--fs-caption); font-weight: 700; color: var(--accent);
}
.p-toggle .icon-sm { transition: transform var(--t-med) var(--ease); }
.p-card.is-open .p-toggle .icon-sm { transform: rotate(180deg); }

/* ---------------------------------------------------------
   پنل جزئیات (آکاردئون درجا)
   --------------------------------------------------------- */
.p-detail {
	grid-column: 1 / -1; display: none;
	background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-lg);
	box-shadow: var(--sh-2); overflow: hidden;
}
.p-detail.is-open { display: block; animation: panelIn var(--t-med) var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.p-detail-head {
	background: var(--accent-soft); padding: var(--sp-5);
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.p-detail-head h3 { margin: 0; color: var(--accent); }
.p-detail-head .sub { font-size: var(--fs-caption); color: var(--text-2); margin: 0; }
.p-close {
	background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
	border-radius: var(--r-full); padding: 7px 16px; font-size: var(--fs-micro); font-weight: 700;
	display: inline-flex; align-items: center; gap: 6px;
	transition: all var(--t-fast) var(--ease);
}
.p-close:hover { background: var(--surface-2); color: var(--text-1); }

.p-detail-body { padding: var(--sp-5); }
.proj-body { display: grid; gap: var(--sp-6); }

/* ---- سطح دوم: فهرست زیرپروژه‌ها ---- */
.proj-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.proj-row {
	border: 1px solid var(--border); border-radius: var(--r-md);
	background: var(--tint); overflow: hidden;
	transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.proj-row:hover { border-color: var(--accent); }
.proj-row.is-open { background: var(--surface); border-color: var(--accent); box-shadow: var(--sh-1); }

.proj-row-head {
	width: 100%; background: none; border: none; text-align: right;
	display: flex; align-items: center; gap: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
}
.proj-row-head .p-mark { width: 36px; height: 36px; font-size: .95rem; }
.proj-row-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 180px; line-height: 1.5; }
.proj-row-title .name { font-size: var(--fs-caption); font-weight: 800; }

.proj-row-prog { display: flex; align-items: center; gap: var(--sp-2); flex: 0 1 150px; min-width: 90px; }
.proj-row-prog .progress-track { flex: 1; }
.proj-row-prog .val { font-size: var(--fs-micro); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }

.proj-row-count { font-size: var(--fs-micro); color: var(--text-2); font-weight: 600; white-space: nowrap; }
.proj-row-head .chev { color: var(--text-3); transition: transform var(--t-med) var(--ease); }
.proj-row.is-open .chev { transform: rotate(180deg); color: var(--accent); }

.proj-row .proj-body {
	padding: var(--sp-5) var(--sp-4) var(--sp-5);
	border-top: 1px solid var(--border);
	animation: panelIn var(--t-med) var(--ease);
}
.sub-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.sub-head h4 { margin: 0; font-size: var(--fs-body-lg); font-weight: 800; }
.sub-head .icon { color: var(--accent); }
.sub-head .hint { font-size: var(--fs-micro); color: var(--text-3); font-weight: 600; margin-inline-start: auto; }

/* چک‌لیست ساخت */
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3); }
.check-item {
	display: flex; align-items: center; gap: var(--sp-3);
	background: var(--tint); border: 1px solid var(--border); border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4);
	font: inherit; text-align: start; width: 100%; cursor: pointer;
	transition: background .15s, border-color .15s, transform .1s;
}
.check-item:hover { border-color: var(--accent); }
.check-item:active { transform: scale(.98); }
.check-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check-item .mark {
	width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
	display: grid; place-items: center;
	background: var(--surface-2); color: var(--text-3);
}
.check-item.is-done { background: var(--surface); border-color: var(--accent); }
.check-item.is-done .mark { background: var(--accent); color: #fff; }
.check-item .label { font-size: var(--fs-caption); font-weight: 700; }
.check-item .note { font-size: var(--fs-micro); color: var(--text-3); font-weight: 500; }
.check-item .txt { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }

/* خلاصه پلن محتوایی */
.plan-summary { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.stack-bar { flex: 1 1 240px; height: 10px; border-radius: var(--r-full); overflow: hidden; display: flex; background: var(--surface-2); }
.stack-bar span { height: 100%; }
.stack-bar .s-published { background: var(--accent); }
.stack-bar .s-writing { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.stack-bar .s-todo { background: var(--surface-2); }
.legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-micro); color: var(--text-2); font-weight: 600; }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-inline-end: 6px; }
.legend .s-published { background: var(--accent); }
.legend .s-writing { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); border: 1px solid var(--border); }
.legend .s-todo { background: var(--surface-2); border: 1px solid var(--border-2); }

/* ---- تقویم محتوایی ---- */
.cal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.cal-stat {
	background: var(--tint); border: 1px solid var(--border); border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; line-height: 1.5;
}
.cal-stat .v { font-size: 1.5rem; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.cal-stat .l { font-size: var(--fs-micro); font-weight: 700; color: var(--text-1); }
.cal-stat .n { font-size: var(--fs-micro); color: var(--text-3); }
/* شاخص تطابق با بازه‌ی مجاز انتشار هفتگی */
.cal-stat.is-ok { background: var(--success-soft); border-color: var(--success-line); }
.cal-stat.is-ok .v, .cal-stat.is-ok .n { color: var(--success); }
.cal-stat.is-warn { background: var(--warning-soft); border-color: var(--warning-line); }
.cal-stat.is-warn .v, .cal-stat.is-warn .n { color: var(--warning); }

.cal-hint {
	margin: 0; font-size: var(--fs-micro); color: var(--text-2);
	background: var(--tint); border: 1px dashed var(--border-2); border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-2);
}
.cal-hint .icon-sm { color: var(--text-3); }

.t-note { display: block; font-size: var(--fs-micro); font-weight: 500; color: var(--text-3); line-height: 1.6; margin-top: 2px; }

/* کلیدواژه‌ی ستون سایت */
.kw-pillar {
	display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
	background: var(--accent-soft); border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.kw-pillar .icon { color: var(--accent); }
.kw-pillar .l { font-size: var(--fs-micro); font-weight: 700; color: var(--text-2); }
.kw-pillar b { font-size: var(--fs-body-lg); font-weight: 900; color: var(--accent); }
.kw-pillar .n { font-size: var(--fs-micro); color: var(--text-2); margin-inline-start: auto; }

/* برنامه‌ی کاری هفته‌به‌هفته */
.cal-weeks { max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3);
	border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); background: var(--tint); }
/* flex-shrink:0 لازم است — وگرنه کانتینرِ ارتفاع‌محدود کارت‌ها را له می‌کند به‌جای اسکرول کردن */
.wk-card { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.wk-head {
	display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
	background: var(--surface-2); padding: var(--sp-2) var(--sp-4);
	border-bottom: 1px solid var(--border); font-size: var(--fs-micro);
}
.wk-head .wk-w { font-weight: 900; color: var(--accent); font-size: var(--fs-caption); }
.wk-head .wk-date { color: var(--text-2); font-variant-numeric: tabular-nums; }
.wk-head .wk-sum { font-weight: 800; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-full); padding: 2px 10px; }
.wk-head .wk-cum { color: var(--text-3); margin-inline-start: auto; font-variant-numeric: tabular-nums; }

.wk-body { padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-4); }
.wk-group-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.wk-group-head .wk-n { font-size: var(--fs-micro); color: var(--text-3); font-weight: 600; }
.wk-items { display: grid; gap: var(--sp-2); }
.wk-items li { display: flex; align-items: flex-start; gap: var(--sp-2); line-height: 1.6; }
.wk-items .tick-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-items .wk-t { font-size: var(--fs-caption); font-weight: 700; }
.wk-items .wk-kw, .ops-items .wk-kw { font-size: var(--fs-micro); color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; }
.wk-items .wk-kw .icon-sm, .ops-items .wk-kw .icon-sm { color: var(--text-3); }
.wk-items .wk-note { font-size: var(--fs-micro); color: var(--text-3); }
.wk-items .wk-unnamed { color: var(--text-3); font-size: var(--fs-micro); font-style: normal; padding-inline-start: 26px; }

.proj-row-count .cad {
	display: inline-block; margin-inline-start: var(--sp-2);
	background: var(--accent-soft); color: var(--accent);
	border-radius: var(--r-sm); padding: 2px 8px; font-size: var(--fs-micro); font-weight: 800;
}

/* جدول پلن محتوایی */
.table-wrap { border: 1px solid var(--border); border-radius: var(--r-md); overflow-x: auto; background: var(--surface); }
.plan-table { min-width: 760px; font-size: var(--fs-caption); }
.plan-table th, .plan-table td { padding: var(--sp-3) var(--sp-4); text-align: right; vertical-align: middle; }
.plan-table thead th {
	background: var(--surface-2); color: var(--text-2);
	font-size: var(--fs-micro); font-weight: 800; white-space: nowrap;
	border-bottom: 1px solid var(--border);
}
.plan-table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--t-fast) var(--ease); }
.plan-table tbody tr:last-child { border-bottom: none; }
.plan-table tbody tr:hover { background: var(--tint); }
.plan-table .c-title { font-weight: 700; color: var(--text-1); min-width: 220px; line-height: 1.6; }
.plan-table .c-title a { color: var(--accent); display: inline-flex; align-items: center; gap: 5px; }
.plan-table .c-title a:hover { text-decoration: underline; }
.plan-table .c-kw { color: var(--text-2); direction: rtl; }
.plan-table .c-num { font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }

.type-tag {
	display: inline-block; padding: 3px 10px; border-radius: var(--r-sm);
	font-size: var(--fs-micro); font-weight: 700; white-space: nowrap;
	background: var(--accent-soft); color: var(--accent);
}
.pri { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: 700; white-space: nowrap; }
.pri::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.pri-high { color: var(--error); } .pri-high::before { background: var(--error); }
.pri-mid { color: var(--warning); } .pri-mid::before { background: var(--warning); }
.pri-low { color: var(--text-3); } .pri-low::before { background: var(--text-3); }

.st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: 700; padding: 4px 11px; border-radius: var(--r-full); white-space: nowrap; }
.st-published { background: var(--accent-soft); color: var(--accent); }
.st-writing { background: var(--warning-soft); color: var(--warning); }
.st-todo { background: var(--surface-2); color: var(--text-2); }

/* حالت خالی */
.empty {
	grid-column: 1 / -1; text-align: center; padding: var(--sp-8) var(--sp-4);
	background: var(--surface); border: 1px dashed var(--border-2); border-radius: var(--r-lg);
	color: var(--text-2);
}
.empty .icon-lg { color: var(--text-3); margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------
   فوتر
   --------------------------------------------------------- */
.page-foot {
	border-top: 1px solid var(--border); margin-top: var(--sp-8);
	padding-block: var(--sp-5); font-size: var(--fs-micro); color: var(--text-3);
	display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}

/* ---------------------------------------------------------
   واکنش‌گرایی
   --------------------------------------------------------- */
@media (max-width: 1080px) {
	.project-grid { grid-template-columns: repeat(2, 1fr); }
	.kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
	.project-grid { grid-template-columns: 1fr; }
	.kpi-row { grid-template-columns: repeat(2, 1fr); margin-top: var(--sp-5); }
	.kpi { padding: var(--sp-4); }
	.kpi-value { font-size: 1.6rem; }
	.toolbar { align-items: stretch; }
	.search-box { flex: 1 1 100%; }
	.p-detail-body { padding: var(--sp-4); }
	.p-detail-head { padding: var(--sp-4); }
	.proj-row-head { flex-wrap: wrap; gap: var(--sp-3); }
	.proj-row-title { flex: 1 1 auto; }
	.proj-row-prog { flex: 1 1 100%; order: 5; }
	.proj-row-count { order: 6; }
	.proj-row .proj-body { padding: var(--sp-4) var(--sp-3); }
	.cal-stats { grid-template-columns: repeat(2, 1fr); }
	.ops-grid { padding: var(--sp-4); }
	.ops-brief { flex-basis: 100%; margin-inline-start: 0; white-space: normal; }
	.theme-toggle { top: var(--sp-4); }
	.page-head { padding-block: var(--sp-6) var(--sp-5); }
}

@media print {
	.toolbar, .p-toggle, .p-close, .search-box { display: none !important; }
	.p-detail { display: block !important; box-shadow: none; page-break-inside: avoid; }
	body { background: #fff; }
}

/* کارت + لینک رودمپ زیرش؛ wrapper خودش آیتم گرید است */
.p-card-wrap { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.p-card-cta {
	display: flex; align-items: center; gap: var(--sp-2);
	background: var(--accent-soft); border: 1px solid transparent; border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-caption); font-weight: 800; color: var(--accent);
	transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.p-card-cta:hover { border-color: var(--accent); transform: translateY(-1px); }
.p-card-cta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-card-cta .icon-sm:last-child { margin-inline-start: auto; opacity: .7; }

/* لینک به صفحه سند/رودمپ اختصاصی پروژه */
.roadmap-link {
	display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
	background: var(--accent-soft); border: 1px solid transparent; border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
	transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.roadmap-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.roadmap-link .icon { color: var(--accent); }
.rl-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.6; }
.rl-label { font-size: var(--fs-caption); font-weight: 800; color: var(--accent); }
.rl-note { font-size: var(--fs-micro); color: var(--text-2); }
.rl-go {
	margin-inline-start: auto; white-space: nowrap;
	font-size: var(--fs-micro); font-weight: 800; color: var(--accent);
	background: var(--surface); border-radius: var(--r-full); padding: 4px 12px;
}