:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --green: #16a34a;
  --ink: #172033;
  --muted: #64748b;
  --line: #e2e8f0;
  --soft: #f8fafc;
  --blue-soft: #eff6ff;
  --green-soft: #f0fdf4;
  --radius: 14px;
  --shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; overflow-x: hidden; background: #f8fafc; color: var(--ink); font-family: Vazirmatn, Tahoma, sans-serif; line-height: 1.75; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 50; height: 68px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.site-header__inner { width: min(1280px, calc(100% - 40px)); height: 100%; margin: auto; display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 800; color: #111827; }
.brand__mark { width: 30px; height: 30px; border-radius: 7px; background: #20b66a; padding: 6px 5px; display: flex; flex-direction: column; justify-content: center; gap: 3px; box-shadow: 0 5px 12px rgba(22,163,74,.2); }
.brand__mark i { display: block; height: 3px; border-radius: 4px; background: white; }
.brand__mark i:nth-child(1) { width: 70%; }.brand__mark i:nth-child(2) { width: 100%; }.brand__mark i:nth-child(3) { width: 45%; }
.site-nav { display: flex; align-items: center; gap: 25px; margin-inline-start: auto; }
.site-nav a, .login-link { color: #475569; font-size: 13px; font-weight: 600; }
.site-nav a:hover, .login-link:hover { color: var(--primary); }
.header-actions { display: flex; align-items: center; gap: 15px; }
.header-cta { color: white; background: var(--primary); border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 700; box-shadow: 0 4px 12px rgba(37,99,235,.18); }
.mobile-menu { display: none; border: 0; background: none; font-size: 23px; }

.page-hero { padding: 74px 0 67px; text-align: center; background: radial-gradient(circle at 50% 0, #eef5ff 0, #f8fafc 62%); border-bottom: 1px solid #edf1f6; }
.page-hero--article { padding: 48px 0 52px; text-align: right; }
.page-hero h1 { max-width: 820px; margin: 10px auto 14px; font-size: clamp(30px, 4vw, 48px); line-height: 1.35; letter-spacing: -.5px; }
.page-hero--article h1, .page-hero--article p { margin-inline: 0; }
.page-hero--article h1 { font-size: clamp(29px, 3.5vw, 42px); }
.page-hero p { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 16px; }
.eyebrow, .free-pill { display: inline-flex; color: var(--primary); background: var(--blue-soft); border: 1px solid #dbeafe; border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; }
.breadcrumb { min-height: 24px; display: flex; align-items: center; gap: 8px; color: #94a3b8; font-size: 12px; margin-bottom: 22px; }
.breadcrumb a:hover { color: var(--primary); }
.article-meta { display: flex; gap: 22px; margin-top: 21px; color: #64748b; font-size: 12px; }

.section-block { padding: 54px 0 80px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 25px; }
.section-heading h2 { margin: 0; font-size: 25px; }.section-heading p { margin: 5px 0 0; color: var(--muted); }.section-heading > a { color: var(--primary); font-size: 13px; font-weight: 700; }
.learn-grid, .tool-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.learn-card, .tool-index-card { position: relative; display: block; min-height: 245px; padding: 25px; background: white; border: 1px solid var(--line); border-radius: var(--radius); transition: .2s; }
.learn-card:hover, .tool-index-card:hover { transform: translateY(-3px); border-color: #bfdbfe; box-shadow: var(--shadow); }
.learn-card__icon, .tool-index-card__icon { position: absolute; left: 22px; top: 22px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: var(--blue-soft); font-size: 20px; }
.learn-card__tag { color: var(--primary); font-size: 11px; font-weight: 700; }.learn-card h3, .tool-index-card h3 { margin: 33px 0 10px; font-size: 18px; }.learn-card p, .tool-index-card p { color: var(--muted); font-size: 13px; }.learn-card__link, .tool-index-card b { position: absolute; bottom: 22px; color: var(--primary); font-size: 12px; }
.tool-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 850px; margin: auto; }.tool-index-card { min-height: 270px; }.tool-index-card .free-pill { padding: 2px 9px; }.tool-index-card h3 { margin-top: 38px; font-size: 21px; }

.marketplace-hero { padding-bottom: 50px; }.marketplace-highlights { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin-top: 24px; color: #475569; font-size: 12px; }.marketplace-highlights span::first-letter { color: var(--green); }
.marketplace-section { padding-top: 31px; padding-bottom: 75px; }.marketplace-toolbar { position: relative; z-index: 2; margin-top: -58px; margin-bottom: 32px; padding: 13px; display: grid; grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(130px, .8fr)); gap: 9px; background: white; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }.marketplace-toolbar input, .marketplace-toolbar select { width: 100%; height: 43px; border: 1px solid var(--line); border-radius: 8px; background: white; color: #475569; outline: 0; padding: 0 11px; }.marketplace-toolbar input:focus, .marketplace-toolbar select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px #dbeafe; }.market-search { position: relative; }.market-search span { position: absolute; right: 13px; top: 8px; color: #94a3b8; font-size: 20px; }.market-search input { padding-right: 39px; }
.marketplace-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 19px; }.marketplace-heading h2 { margin: 0; font-size: 22px; }.marketplace-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }.marketplace-heading > a { color: var(--primary); font-size: 11px; font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }.card { min-width: 0; padding: 20px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }.card h3 { margin: 4px 0 8px; font-size: 17px; }.card .muted { color: var(--muted); font-size: 11px; }.card > .btn { margin-top: 10px; }
.template-card { padding: 0; overflow: hidden; transition: .2s; }.template-card:hover { transform: translateY(-3px); border-color: #bfdbfe; box-shadow: var(--shadow); }.template-card[hidden] { display: none; }.template-visual { position: relative; height: 150px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #eff6ff, #f8fafc); }.template-visual img { width: 100%; height: 100%; object-fit: cover; }.template-icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 20px; background: rgba(255,255,255,.9); box-shadow: 0 10px 25px rgba(30,64,175,.1); font-size: 35px; }.template-badges { position: absolute; top: 12px; right: 12px; }.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 9px; color: #15803d; background: #dcfce7; border: 1px solid #bbf7d0; font-size: 9px; font-weight: 800; }.badge.paid { color: #92400e; background: #fef3c7; border-color: #fde68a; }.template-card__body { padding: 17px; }.template-category { color: var(--primary); font-size: 9px; font-weight: 700; }.template-card__body p { min-height: 61px; margin: 6px 0 13px; color: var(--muted); font-size: 11px; line-height: 1.8; }.template-stats { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 13px; border-bottom: 1px solid #eef2f7; }.template-stats span { padding: 3px 7px; border-radius: 5px; color: #64748b; background: #f8fafc; font-size: 8px; }.template-card__footer { padding-top: 13px; display: flex; align-items: center; justify-content: space-between; }.template-card__footer b { font-size: 12px; }.template-card__footer a { color: var(--primary); font-size: 10px; font-weight: 800; }.market-empty { padding: 55px; border: 1px dashed #cbd5e1; border-radius: 13px; text-align: center; }.market-empty b, .market-empty span { display: block; }.market-empty span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.page-hero--listing { padding: 48px 0; text-align: right; }.page-hero--listing h1, .page-hero--listing p { margin-inline: 0; }.page-hero--listing h1 { font-size: 36px; }.page-hero--listing .breadcrumb { margin-bottom: 15px; }
.template-detail { padding-top: 27px; padding-bottom: 75px; }.template-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 315px; gap: 22px; align-items: start; }.template-detail-main, .template-purchase { background: white; border: 1px solid var(--line); border-radius: var(--radius); }.template-detail-hero { padding: 31px; display: flex; align-items: center; gap: 22px; background: linear-gradient(145deg, #eff6ff, #fff); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }.template-icon--large { flex: none; width: 94px; height: 94px; font-size: 44px; }.template-detail-hero h1 { margin: 9px 0 5px; font-size: 28px; line-height: 1.4; }.template-detail-hero p { margin: 0; color: var(--muted); font-size: 12px; }.template-meta { padding: 14px 27px; display: flex; flex-wrap: wrap; gap: 10px 25px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }.template-meta b { color: #334155; }.template-copy { padding: 27px; }.template-copy h2 { margin: 25px 0 10px; padding-right: 11px; border-right: 3px solid var(--primary); font-size: 18px; }.template-copy h2:first-child { margin-top: 0; }.template-copy p { color: #475569; font-size: 13px; }.phase-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; list-style: none; }.phase-list li { position: relative; padding: 9px 31px 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: #475569; font-size: 11px; }.phase-list li::before { content: '✓'; position: absolute; right: 10px; color: var(--green); font-weight: 800; }.template-purchase { position: sticky; top: 92px; padding: 21px; }.template-price { padding: 15px; border-radius: 10px; background: #f8fafc; text-align: center; }.template-price span, .template-price strong, .template-price small { display: block; }.template-price span, .template-price small { color: var(--muted); font-size: 9px; }.template-price strong { margin: 3px 0; font-size: 22px; }.template-facts { margin: 15px 0; }.template-facts div { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid #eef2f7; font-size: 10px; }.template-facts span { color: var(--muted); }.template-buy { width: 100%; }.template-purchase > p { margin: 12px 0 0; color: #94a3b8; text-align: center; font-size: 8px; line-height: 1.7; }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: 28px; align-items: start; padding-top: 38px; padding-bottom: 65px; }
.article-layout > *, .critical-layout > *, .workday-layout > * { min-width: 0; }
.article-card, .aside-card { background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.article-card { padding: clamp(24px, 4vw, 48px); }.article-card h2 { margin: 42px 0 16px; padding-right: 13px; border-right: 4px solid var(--primary); font-size: 23px; }.article-card p { color: #475569; }.article-lead { border-radius: 12px; background: var(--blue-soft); border: 1px solid #dbeafe; padding: 20px 22px; }.article-lead p { margin-bottom: 0; }
.article-aside { position: sticky; top: 92px; display: grid; gap: 15px; }.aside-card { padding: 20px; display: flex; flex-direction: column; gap: 11px; }.aside-card > b { margin-bottom: 4px; }.aside-card a { color: #64748b; font-size: 13px; }.aside-card a:hover { color: var(--primary); }.aside-card--green { background: var(--green-soft); border-color: #bbf7d0; }.aside-card--green span { color: var(--green); font-size: 11px; font-weight: 700; }.aside-card--green h3 { margin: 0; font-size: 17px; }.aside-card--green p { margin: 0; font-size: 12px; color: #64748b; }.aside-card--green a { color: var(--green); font-weight: 800; }
.steps { padding: 0; list-style: none; counter-reset: step; display: grid; gap: 13px; }.steps li { counter-increment: step; position: relative; padding: 15px 58px 15px 15px; background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; }.steps li:before { content: counter(step); position: absolute; right: 15px; top: 15px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: var(--primary); color: white; font-weight: 700; }.steps span { display: block; color: var(--muted); font-size: 13px; }
.article-cta { margin-top: 38px; padding: 23px; border-radius: 13px; background: #172554; color: white; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.article-cta > div { display: flex; align-items: center; gap: 14px; }.article-cta h3, .article-cta p { margin: 0; color: white; }.article-cta p { opacity: .7; font-size: 12px; }.cta-icon { width: 42px; height: 42px; border-radius: 11px; background: #22c55e; display: grid; place-items: center; font-weight: 800; }
.tip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.tip-grid > div { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 17px; }.tip-grid p { margin-bottom: 0; font-size: 13px; }
.next-reading { background: white; border-top: 1px solid var(--line); padding: 35px 0; }.next-reading .container { display: flex; justify-content: space-between; align-items: center; }.next-reading h2, .next-reading p { margin: 0; }.next-reading p { color: var(--muted); }.next-actions { display: flex; gap: 10px; }

.tool-page { padding-top: 27px; padding-bottom: 75px; }
.tool-title { display: flex; align-items: center; gap: 14px; margin-bottom: 27px; }.tool-title h1 { margin: 0; font-size: 25px; }.tool-title p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }.tool-title__icon { width: 49px; height: 49px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--blue-soft); font-size: 25px; }.tool-title__icon--calendar { color: #7c3aed; background: #f5f3ff; }
.critical-layout, .workday-layout { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(390px, .9fr); gap: 20px; direction: rtl; align-items: start; }
.workday-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.12fr); }.workday-layout .settings-panel { grid-column: 1; }.workday-layout .result-panel { grid-column: 2; grid-row: 1; }
.panel { min-width: 0; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 12px rgba(15,23,42,.025); overflow: visible; }.input-panel, .settings-panel { padding: 21px; }.result-panel { min-height: 480px; overflow: hidden; }.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 17px; }.panel-heading h2 { font-size: 17px; margin: 0; }.panel-heading p { font-size: 11px; color: var(--muted); margin: 3px 0 0; }
.ghost-btn, .outline-btn { border: 1px solid var(--line); background: white; color: #475569; border-radius: 8px; padding: 7px 12px; font-size: 11px; }.ghost-btn:hover, .outline-btn:hover { border-color: #93c5fd; color: var(--primary); }
.tabs { display: flex; border-bottom: 1px solid var(--line); margin: 0 -21px 18px; padding: 0 21px; }.tab { padding: 9px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #64748b; font-size: 11px; }.tab.is-active { border-color: var(--primary); color: var(--primary); font-weight: 700; }
.table-wrap { overflow-x: auto; }.editor-table, .result-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 10px; }.editor-table th, .result-table th { padding: 8px 6px; background: #f8fafc; color: #64748b; font-weight: 600; border-block: 1px solid var(--line); white-space: nowrap; }.editor-table td, .result-table td { padding: 6px; border-bottom: 1px solid #eef2f7; text-align: center; }.editor-table input, .editor-table select { min-width: 55px; width: 100%; height: 31px; padding: 4px 7px; background: white; border: 1px solid #dce3ec; border-radius: 6px; color: var(--ink); outline: 0; }.editor-table input:focus, .editor-table select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px #dbeafe; }.editor-table .cp-title { min-width: 122px; }.editor-table .cp-deps { min-width: 70px; direction: ltr; text-align: center; }.editor-table .cp-duration, .editor-table .cp-lag { width: 50px; min-width: 45px; direction: ltr; text-align: center; }.delete-row { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: #fff1f2; color: #e11d48; }
.text-entry label { display: block; color: #475569; font-size: 12px; margin-bottom: 6px; }.text-entry textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 9px; padding: 11px; line-height: 1.8; outline: 0; }.text-entry p { color: var(--muted); font-size: 10px; }.input-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 17px; }.primary-btn, .btn { display: inline-flex; justify-content: center; align-items: center; gap: 10px; border: 0; border-radius: 8px; padding: 9px 17px; color: white; background: var(--primary); font-weight: 700; font-size: 12px; box-shadow: 0 4px 11px rgba(37,99,235,.18); }.primary-btn:hover, .btn:hover { background: var(--primary-dark); }.primary-btn:disabled { opacity: .6; cursor: wait; }.primary-btn--full { width: 100%; margin-top: 19px; height: 43px; }.btn--outline { color: var(--primary); background: white; border: 1px solid #bfdbfe; box-shadow: none; }.btn--outline:hover { color: white; }
.dep-help { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 22px -2px -2px; padding-top: 14px; border-top: 1px solid var(--line); }.dep-help > div { min-width: 0; padding: 9px; background: #f8fafc; border-radius: 8px; }.dep-help span { display: inline-grid; place-items: center; width: 25px; height: 22px; margin-left: 5px; border-radius: 5px; color: var(--primary); background: #dbeafe; direction: ltr; font-size: 9px; font-weight: 800; }.dep-help b { font-size: 9px; }.dep-help small { display: block; margin-top: 5px; color: #94a3b8; font-size: 8px; line-height: 1.5; }
.empty-result { min-height: 478px; padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }.empty-result__icon { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; color: var(--primary); background: var(--blue-soft); font-size: 31px; }.empty-result__icon--calendar { color: #7c3aed; background: #f5f3ff; }.empty-result h2 { margin: 17px 0 4px; font-size: 16px; }.empty-result p { margin: 0; color: var(--muted); font-size: 11px; }
.result-success { display: flex; align-items: center; gap: 10px; padding: 16px 19px; color: #166534; background: var(--green-soft); border-bottom: 1px solid #dcfce7; }.result-success > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: #22c55e; }.result-success b, .result-success small { display: block; }.result-success b { font-size: 12px; }.result-success small { opacity: .75; font-size: 9px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; padding: 15px 17px; }.stat-grid--three { grid-template-columns: repeat(3, 1fr); }.stat-card { min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9px; text-align: center; background: white; }.stat-card span { color: var(--muted); font-size: 9px; }.stat-card strong { margin-top: 2px; font-size: 18px; line-height: 1.4; }.stat-card strong.blue { color: var(--primary); }.stat-card strong.red { color: #dc2626; }.stat-card strong.green { color: var(--green); }.stat-card--wide { grid-column: 1/-1; flex-direction: row; justify-content: space-between; padding-inline: 17px; }.stat-card--wide strong { font-size: 14px; direction: ltr; }
.result-section { padding: 0 17px 14px; }.result-section h3 { font-size: 11px; margin: 5px 0 9px; }.result-table td { font-size: 9px; }.critical-row { background: #fff7f7; }.status-pill { display: inline-flex; border-radius: 999px; padding: 2px 7px; font-size: 8px; color: #475569; background: #f1f5f9; }.status-pill--critical { color: #dc2626; background: #fee2e2; }.info-box { margin: 0 17px 17px; padding: 10px 12px; display: flex; gap: 9px; border: 1px solid #bfdbfe; border-radius: 8px; background: var(--blue-soft); color: #1e40af; }.info-box p { margin: 0; font-size: 9px; line-height: 1.7; }.error-box { margin: 18px; padding: 13px; border-radius: 9px; background: #fff1f2; border: 1px solid #fecdd3; color: #be123c; font-size: 11px; }

.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 19px; }.mode-card { position: relative; min-height: 72px; display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: white; color: #64748b; text-align: right; }.mode-card > span { font-size: 19px; }.mode-card div { flex: 1; }.mode-card b, .mode-card small { display: block; }.mode-card b { font-size: 10px; color: var(--ink); }.mode-card small { font-size: 8px; }.mode-card i { color: #cbd5e1; font-style: normal; }.mode-card.is-active { border-color: var(--primary); background: var(--blue-soft); color: var(--primary); }.mode-card.is-active i { color: var(--primary); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.field { position: relative; }.field label { display: block; margin-bottom: 5px; color: #475569; font-size: 10px; font-weight: 700; }.date-trigger, .stepper { width: 100%; height: 40px; border: 1px solid #dce3ec; border-radius: 8px; background: white; }.date-trigger { display: flex; align-items: center; justify-content: space-between; padding: 0 11px; color: #64748b; }.date-trigger b { color: var(--primary); }.stepper { display: grid; grid-template-columns: 39px 1fr 39px; overflow: hidden; }.stepper button { border: 0; background: #f8fafc; color: var(--primary); font-size: 17px; }.stepper input { min-width: 0; width: 100%; border: 0; outline: 0; text-align: center; direction: ltr; -moz-appearance: textfield; }.stepper input::-webkit-inner-spin-button { display: none; }
.jalali-picker { position: absolute; z-index: 20; top: 70px; right: 0; width: 290px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 17px 42px rgba(15,23,42,.17); }.picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }.picker-head button { width: 30px; height: 30px; border: 0; border-radius: 7px; color: var(--primary); background: var(--blue-soft); }.picker-head b { font-size: 12px; }.picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }.picker-grid span { color: #94a3b8; font-size: 8px; padding: 4px 0; }.picker-day { aspect-ratio: 1; border: 0; border-radius: 7px; background: transparent; color: #334155; font-size: 9px; }.picker-day:hover { background: var(--blue-soft); }.picker-day.is-other { color: #cbd5e1; }.picker-day.is-today { color: var(--primary); font-weight: 800; box-shadow: inset 0 0 0 1px #93c5fd; }.picker-day.is-selected { color: white; background: var(--primary); }.picker-day.is-friday { color: #ef4444; }
.notice-box { margin-top: 14px; padding: 9px 11px; border-radius: 8px; color: #1d4ed8; background: var(--blue-soft); font-size: 9px; }.calendar-settings { margin-top: 15px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #fafcff; }.calendar-settings h3 { margin: 0 0 9px; font-size: 11px; }.calendar-settings > div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #edf2f7; font-size: 9px; }.calendar-settings > div span { color: var(--muted); }.calendar-settings small { display: block; margin-top: 8px; color: #94a3b8; font-size: 8px; }.green-text { color: var(--green); }
.workday-result-head { padding: 21px; display: flex; justify-content: center; align-items: center; gap: 12px; text-align: center; color: #166534; background: var(--green-soft); border-bottom: 1px solid #dcfce7; }.workday-result-head > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: white; background: #22c55e; }.workday-result-head small, .workday-result-head strong, .workday-result-head b { display: block; }.workday-result-head small { font-size: 9px; }.workday-result-head strong { font-size: 21px; }.workday-result-head b { color: #64748b; font-size: 9px; font-weight: 500; direction: ltr; }
.range-card, .holiday-card { margin: 0 17px 12px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; }.range-card > div:first-child { display: flex; justify-content: space-between; font-size: 9px; }.range-card > div:first-child span { color: var(--muted); }.range-card > div:first-child b { direction: ltr; }.mini-calendar { margin-top: 11px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; direction: rtl; }.mini-day { height: 23px; display: grid; place-items: center; border-radius: 5px; color: #94a3b8; background: #f8fafc; font-size: 8px; }.mini-day.in-range { color: #1d4ed8; background: #dbeafe; }.mini-day.endpoint { color: white; background: var(--primary); }.mini-day.holiday { color: #dc2626; background: #fee2e2; }.holiday-card h3 { margin: 0 0 8px; font-size: 10px; }.holiday-item, .no-holidays { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 6px; background: #fff7ed; color: #9a3412; font-size: 8px; margin-top: 5px; }.no-holidays { color: #166534; background: var(--green-soft); }.tool-help { margin-top: 18px; padding: 17px 20px; display: flex; align-items: center; gap: 13px; border: 1px solid #bfdbfe; border-radius: 12px; background: var(--blue-soft); }.tool-help > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--primary); }.tool-help div { flex: 1; }.tool-help b { font-size: 11px; }.tool-help p { margin: 0; color: #64748b; font-size: 9px; }.tool-help a { color: var(--primary); font-size: 10px; font-weight: 800; }

.site-footer { color: #cbd5e1; background: #0f172a; }.footer-grid { width: min(1180px, calc(100% - 40px)); margin: auto; padding: 47px 0 37px; display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 45px; }.brand--footer { color: white; }.footer-brand p { max-width: 350px; color: #94a3b8; font-size: 12px; }.site-footer h3 { margin: 0 0 13px; color: white; font-size: 13px; }.site-footer div > a:not(.brand) { display: block; margin: 7px 0; color: #94a3b8; font-size: 11px; }.site-footer a:hover { color: white !important; }.footer-bottom { width: min(1180px, calc(100% - 40px)); margin: auto; padding: 17px 0; display: flex; justify-content: space-between; border-top: 1px solid #243044; color: #64748b; font-size: 10px; }

@media (max-width: 1000px) {
  .site-nav { gap: 14px; }.site-nav a { font-size: 11px; }
  .critical-layout, .workday-layout { grid-template-columns: 1fr; }.workday-layout .settings-panel, .workday-layout .result-panel { grid-column: 1; grid-row: auto; }
  .article-layout { grid-template-columns: 1fr; }.article-aside { position: static; grid-template-columns: repeat(3, 1fr); }
  .dep-help { grid-template-columns: repeat(2, 1fr); }
  .marketplace-toolbar { grid-template-columns: 1fr 1fr; }.market-search { grid-column: 1/-1; }.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }.template-detail-grid { grid-template-columns: 1fr; }.template-purchase { position: static; }
}
@media (max-width: 760px) {
  .container, .site-header__inner { width: min(100% - 24px, 1180px); }
  .site-header { height: 60px; }.mobile-menu { display: block; margin-inline-start: auto; }.site-nav { display: none; position: absolute; top: 59px; right: 12px; left: 12px; padding: 15px; flex-direction: column; align-items: stretch; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: var(--shadow); }.site-nav.is-open { display: flex; }.site-nav a { padding: 7px; }.header-actions { display: none; }
  .page-hero { padding: 50px 0; }.page-hero h1 { font-size: 31px; }.page-hero--article h1 { font-size: 27px; }
  .learn-grid, .tool-index-grid { grid-template-columns: 1fr; }.article-aside { grid-template-columns: 1fr; }.article-cta, .next-reading .container, .tool-help { align-items: stretch; flex-direction: column; }.tip-grid { grid-template-columns: 1fr; }
  .marketplace-toolbar { margin-top: -46px; grid-template-columns: 1fr; }.market-search { grid-column: auto; }.cards { grid-template-columns: 1fr; }.marketplace-heading { align-items: start; flex-direction: column; gap: 8px; }.template-detail-hero { align-items: start; flex-direction: column; padding: 23px; }.template-detail-hero h1 { font-size: 23px; }.phase-list { grid-template-columns: 1fr; }
  .critical-layout, .workday-layout { display: flex; flex-direction: column; }.critical-layout > *, .workday-layout > * { width: 100%; min-width: 0; }.form-grid, .mode-switch { grid-template-columns: 1fr; }.stat-grid--three { grid-template-columns: 1fr; }.stat-grid--three .stat-card { min-height: 60px; }.dep-help { display: none; }.result-panel { min-height: 360px; }.empty-result { min-height: 355px; }.jalali-picker { width: min(290px, calc(100vw - 50px)); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }.footer-brand { grid-column: 1/-1; }.footer-bottom { flex-direction: column; gap: 4px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Main-site design alignment (ganttchart.ir is the single source of truth).
   The central header/footer come from /_includes.js + /styles.css; the rules
   below re-theme this page-content stylesheet to the main (dark) palette so
   generated pages are not a parallel design system.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --primary:#10b981; --primary-dark:#059669; --green:#10b981;
  --ink:#e2e8f0; --muted:#94a3b8; --line:#1e293b; --soft:#0b1220;
  --blue-soft:rgba(16,185,129,.12); --green-soft:rgba(16,185,129,.12);
  --shadow:0 12px 30px rgba(0,0,0,.45);
}
body{background:#020617;color:var(--ink);}
.site-main{padding-top:72px;}
.page-hero{background:linear-gradient(180deg,#04121f 0,#020617 62%);border-bottom:1px solid var(--line);}
.page-hero h1{color:#f1f5f9;}
.page-hero p{color:var(--muted);}
.eyebrow,.free-pill{color:#34d399;background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.25);}
.breadcrumb{color:#64748b;}
.section-heading h2,.marketplace-heading h2,.template-detail h1,.template-detail h2,
.template-copy h2,.panel-heading h2,.article-card h2,.next-reading h2{color:#f1f5f9;}
.card,.learn-card,.tool-index-card,.panel,.article-card,.aside-card,.template-purchase,
.template-facts>div,.stat-grid>div,.range-card,.holiday-card,.notice-box,.info-box,
.tip-grid>div,.steps li,.marketplace-toolbar,.next-reading,.article-lead,.dep-help>div,
.tool-help,.mode-card,.marketplace-highlights span{background:#0b1220;border-color:var(--line);color:var(--ink);}
.marketplace-toolbar input,.marketplace-toolbar select,.field input,.field select,
.text-entry textarea,.stepper,.editor-table input,.editor-table select{
  background:#0b1220;color:var(--ink);border-color:var(--line);
}
.editor-table,.result-table,.table-wrap{border-color:var(--line);}
.editor-table th,.result-table th{background:#0f172a;color:#cbd5e1;}
.learn-card p,.tool-index-card p,.card .muted,.muted,.section-heading p,
.marketplace-heading p,.card>p{color:var(--muted);}
.card a,.learn-card__link,.tool-index-card b,.marketplace-heading>a,.template-card__footer a{color:#34d399;}
.btn,.primary-btn{background:var(--primary);color:#04211a;border-color:transparent;}
.btn--outline,.outline-btn,.ghost-btn{background:transparent;color:#a7f3d0;border-color:rgba(16,185,129,.35);}
.tab.is-active{background:rgba(16,185,129,.15);color:#6ee7b7;border-color:rgba(16,185,129,.4);}
input,select,textarea{color:var(--ink);}
.green-text{color:#34d399;}


/* ══ Shared Tool components (Tools Platform) ══ */
.tool-grid{display:grid;grid-template-columns:1fr;gap:20px;margin:22px 0 10px}
@media(min-width:980px){.tool-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.check-row{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0;color:#cbd5e1;font-size:.9rem}
.check-row label{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.advanced-block{margin-top:14px;border:1px dashed rgba(148,163,184,.3);border-radius:12px;padding:12px 14px}
.advanced-block summary{cursor:pointer;color:#a7f3d0;font-weight:600}
.advanced-block .form-grid.one{grid-template-columns:1fr}
.faq-list{display:grid;gap:10px}
.faq-item{background:#0b1220;border:1px solid var(--line);border-radius:12px;padding:0}
.faq-item summary{cursor:pointer;padding:14px 16px;font-weight:600;color:#e2e8f0;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item div{padding:0 16px 14px;color:var(--muted);line-height:1.9}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:10px}
.rel-chip{display:block;background:#0b1220;border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:#a7f3d0;text-decoration:none;font-size:.9rem}
.rel-chip:hover{border-color:rgba(16,185,129,.4)}
.premium-strip{display:flex;align-items:center;gap:14px;background:linear-gradient(145deg,rgba(16,185,129,.08),rgba(16,185,129,.02));border:1px solid rgba(16,185,129,.2);border-radius:14px;padding:16px}
.premium-strip span{font-size:1.4rem}
.premium-strip b{color:#e2e8f0}
.premium-strip p{margin:4px 0 0;color:var(--muted);font-size:.88rem}
.premium-strip a{margin-right:auto;color:#34d399;white-space:nowrap}
.paid-pill{display:inline-block;background:rgba(245,158,11,.15);color:#fbbf24;border-radius:999px;padding:2px 10px;font-size:.72rem}
.stepper input[type=number]{width:88px}
.tool-content h2{color:#f1f5f9;margin-top:1.6rem}
.tool-content p,.tool-content li{color:var(--muted);line-height:2}
.tool-content a{color:#34d399}
.tool-related h2,.tool-related h3{color:#f1f5f9}


/* ══ WBS builder ══ */
.wbs-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.wbs-tree{list-style:none;margin:0;padding:0;background:#0b1220;border:1px solid var(--line);border-radius:12px;min-height:120px}
.wbs-node{padding:10px 14px;border-bottom:1px solid rgba(148,163,184,.08);cursor:pointer;color:#e2e8f0}
.wbs-node:hover{background:rgba(16,185,129,.06)}
.wbs-node.is-selected{background:rgba(16,185,129,.14);border-right:3px solid #34d399}
.tool-content code{background:rgba(148,163,184,.15);padding:2px 6px;border-radius:6px;direction:ltr;display:inline-block}

/* ══ Risk matrix / RACI ══ */
.rm-matrix{display:grid;gap:4px;margin:10px 0}
.rm-row{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.rm-cell{display:flex;align-items:center;justify-content:center;height:44px;border-radius:8px;font-weight:700}
.rm-high{background:#ef4444;color:#fff}.rm-mid{background:#f59e0b;color:#3b2600}.rm-low{background:#10b981;color:#04211a}
.raci-cell{min-width:64px}