/* ============ صفحه‌ی پروژه‌ی نهایی ============
   بیشترِ کلاس‌ها از lesson.css می‌آیند (.lsec .mini-box .callout .chip .disclosure)
   اینجا فقط چیزهایی هست که مخصوص همین صفحه‌اند. */

.fp-hero {
  background:
    radial-gradient(1000px 340px at 85% -35%, rgba(245,165,36,.20), transparent 62%),
    radial-gradient(900px 340px at 10% -25%, rgba(139,92,246,.20), transparent 60%),
    var(--surface);
}
.fp-hero .fp-intro { margin-top: var(--sp-4); max-width: 68ch; }
.fp-hero .fp-intro p { color: var(--text-soft); margin-bottom: var(--sp-2); }

.fp-stats {
  display: flex; gap: var(--sp-6); flex-wrap: wrap;
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.fp-stats div b {
  display: block; font-size: var(--fs-xl); font-weight: 900;
  color: var(--brand-600); line-height: 1.2;
}
.fp-stats div span { font-size: var(--fs-xs); color: var(--text-mute); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fp-stats div b { color: var(--brand-300); }
}
:root[data-theme="dark"] .fp-stats div b { color: var(--brand-300); }

.fp-body { padding-top: var(--sp-7); min-width: 0; }

/* ---------- قانون پنج ابزار ---------- */
.fp-rule {
  font-size: var(--fs-md);
  background: var(--info-bg);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--brand-500);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}

.tool-grid {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-block: var(--sp-4);
}
.tool {
  display: block;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 9px 13px;
}
.tool b { display: block; font-size: var(--fs-sm); font-weight: 800; }
.tool i { font-style: normal; font-size: .72rem; color: var(--text-mute); }

/* ---------- ایده‌ی خودم ---------- */
.own-idea {
  position: relative;
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  background:
    radial-gradient(700px 260px at 90% -40%, rgba(245,165,36,.30), transparent 60%),
    linear-gradient(135deg, #232a5e, #14172a 68%);
  color: #eef0fb;
  box-shadow: var(--sh-lg);
}
.own-idea .oi-badge {
  display: inline-block;
  background: var(--accent-500); color: #2a1c02;
  font-weight: 800; font-size: var(--fs-sm);
  padding: 5px 14px; border-radius: var(--r-full);
  margin-bottom: var(--sp-3);
}
.own-idea h3 { color: #fff; font-size: clamp(1.2rem, 3.6vw, 1.7rem); margin-top: 0; margin-bottom: var(--sp-3); }
.own-idea .oi-text p { color: #cfd3ee; line-height: 1.95; margin-bottom: var(--sp-2); }
.own-idea .oi-text strong { color: #fff; }
.own-idea code { background: rgba(255,255,255,.12); color: #ffd9a1; border-color: transparent; }

.oi-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--sp-5);
}
.oi-box {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.oi-box h4 { color: var(--accent-400); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.oi-box ul, .oi-box ol { padding-inline-start: 1.3em; margin: 0; font-size: var(--fs-sm); color: #cfd3ee; }
.oi-box li { margin-bottom: 7px; line-height: 1.85; }
.oi-box strong { color: #fff; }

/* ---------- سطح‌ها ---------- */
.tier { margin-block: var(--sp-7); scroll-margin-top: calc(var(--header-h) + 20px); }
.tier-head {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; margin-bottom: var(--sp-2);
}
.tier-head .tier-em { font-size: 26px; line-height: 1; }
.tier-head h3 { margin: 0; font-size: var(--fs-lg); }
.tier-blurb { color: var(--text-soft); font-size: var(--fs-sm); max-width: 70ch; }

.proj-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  margin-top: var(--sp-4);
}
.proj {
  display: flex; flex-direction: column;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  transition: transform .15s, box-shadow .18s, border-color .18s;
  min-width: 0;
}
.proj:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--brand-300); }
.proj-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.proj-em {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 21px;
  background: var(--surface-3);
}
.proj-top h4 { margin: 0; font-size: var(--fs-md); line-height: 1.5; min-width: 0; }
.proj-desc { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.85; flex: 1; }
.proj-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-block: var(--sp-3); }
.proj-skills span {
  font-size: .72rem; font-weight: 600;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-mute);
  border: 1px solid var(--border);
}
.proj .disclosure { margin-block: 0; }
ol.proj-steps { padding-inline-start: 1.3em; margin: 0; font-size: var(--fs-sm); }
ol.proj-steps li { margin-bottom: 7px; line-height: 1.85; }

/* ---------- چک‌لیست ---------- */
.check-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-block: var(--sp-4);
}
ul.check-list { list-style: none; padding-inline-start: 0; }
ul.check-list li { position: relative; padding-inline-start: 1.5em; line-height: 1.85; }
ul.check-list li::before {
  content: '☐';
  position: absolute; inset-inline-start: 0;
  color: var(--text-mute); font-weight: 900;
}

/* ---------- پایان ---------- */
.fp-closing {
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  background:
    radial-gradient(700px 260px at 50% -50%, rgba(16,185,129,.28), transparent 62%),
    var(--surface-2);
  border: 1px solid var(--border);
}
.fp-closing h2 { font-size: clamp(1.3rem, 4vw, 2rem); margin-bottom: var(--sp-4); }
.fp-closing p { color: var(--text-soft); max-width: 62ch; margin-inline: auto; margin-bottom: var(--sp-3); }
.fp-cta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-5); }

@media (max-width: 600px) {
  .own-idea { padding: var(--sp-6) var(--sp-4) var(--sp-5); }
  .fp-closing { padding: var(--sp-7) var(--sp-4); }
  .fp-cta .btn { width: 100%; }
  .fp-stats { gap: var(--sp-4); }
}