/* =====================================================================
   AI – Prompt Lernen (Page CSS)
   Scope: body.page-ai-prompt-lernen …
   نکته: فقط برای همین صفحه؛ بدون اثر روی هدر/فوتر یا صفحات دیگر.
   ===================================================================== */

/* ------------------- Root (Scoped Vars) ------------------- */
body.page-ai-prompt-lernen {
  --pl-bg: #121216;
  --pl-surface: rgba(255,255,255,0.06);
  --pl-surface-2: rgba(255,255,255,0.08);
  --pl-border: rgba(255,255,255,0.12);
  --pl-text: #ffffff;
  --pl-text-dim: rgba(255,255,255,0.72);
  --pl-muted: rgba(255,255,255,0.56);

  --pl-accent-a: #9B5BFF;
  --pl-accent-b: #C77DFF;
  --pl-accent-c: #6AE6FF;
  --pl-accent-grad: linear-gradient(135deg, var(--pl-accent-a) 0%, var(--pl-accent-b) 55%, var(--pl-accent-c) 100%);

  --pl-shadow: 0 12px 36px rgba(0,0,0,.35);
  --pl-glow: 0 0 28px rgba(155,91,255,.28), 0 0 48px rgba(108,217,255,.12);

  --pl-radius-lg: 20px;
  --pl-radius-md: 16px;
  --pl-radius-sm: 12px;

  --pl-space-xxl: clamp(72px, 8vw, 120px);
  --pl-space-xl: clamp(56px, 6.6vw, 96px);
  --pl-space-lg: clamp(36px, 4.8vw, 64px);
  --pl-space-md: clamp(22px, 2.8vw, 32px);
  --pl-space-sm: 14px;
  --pl-space-xs: 8px;

  --pl-grid-gap: clamp(18px, 3vw, 28px);
  }

/* ------------------- Page Base ------------------- */
body.page-ai-prompt-lernen {
  background:
    radial-gradient(1200px 600px at 72% -10%, rgba(155,91,255,.20), transparent 60%),
    radial-gradient(900px 520px at 10% 10%, rgba(106,230,255,.12), transparent 60%),
    var(--pl-bg);
  color: var(--pl-text);
}

.page-ai-prompt-lernen .section {
  padding: var(--pl-space-xl) 0;
  position: relative;
  z-index: 1;
}

.page-ai-prompt-lernen .container {
  width: min(92%, var(--pl-maxw));
  margin: 0 auto;
}

/* ---------- Titles / Text ---------- */
.page-ai-prompt-lernen .h1,
.page-ai-prompt-lernen .h2,
.page-ai-prompt-lernen .section_title {
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.page-ai-prompt-lernen .h1,
.page-ai-prompt-lernen .section.ai-hero .section_title {
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  font-weight: 900;
  background: var(--pl-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: var(--pl-glow);
}

.page-ai-prompt-lernen .h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
}

.page-ai-prompt-lernen .text--md,
.page-ai-prompt-lernen .section_subtitle {
  color: var(--pl-text-dim);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
}

/* ------------------- HERO ------------------- */
.page-ai-prompt-lernen .ai-hero {
  padding-top: calc(var(--pl-space-xl) + 24px); /* فاصله ایمن از هدر ثابت */
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(155,91,255,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 40%);
  border-bottom: 1px solid var(--pl-border);
}

.page-ai-prompt-lernen .section_header {
  margin-bottom: var(--pl-space-lg);
}

/* Local in-page nav (anchor tabs) */
.page-ai-prompt-lernen .ai-localnav {
  margin-top: var(--pl-space-md);
  border: 1px solid var(--pl-border);
  background: linear-gradient(180deg, var(--pl-surface), rgba(255,255,255,0.04));
  border-radius: var(--pl-radius-lg);
  box-shadow: var(--pl-shadow);
  overflow: hidden;
}
.page-ai-prompt-lernen .ai-localnav_list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 0;
}
.page-ai-prompt-lernen .ai-localnav_link {
  display: block;
  text-align: center;
  padding: 14px 10px;
  color: var(--pl-text-dim);
  text-decoration: none;
  border-right: 1px solid var(--pl-border);
  transition: transform .2s ease, color .2s ease, background-color .2s ease;
}
.page-ai-prompt-lernen .ai-localnav_link:last-child { border-right: 0; }
.page-ai-prompt-lernen .ai-localnav_link:hover,
.page-ai-prompt-lernen .ai-localnav_link:focus-visible {
  color: var(--pl-text);
  background: rgba(155,91,255,.08);
  transform: translateY(-1px);
  outline: none;
}

/* Quick cards under hero */
.page-ai-prompt-lernen .ai-cards {
  margin-top: var(--pl-space-lg);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pl-grid-gap);
}
.page-ai-prompt-lernen .ai-card {
  background: linear-gradient(160deg, var(--pl-surface), var(--pl-surface-2));
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-lg);
  padding: 18px 18px 20px;
  box-shadow: var(--pl-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.page-ai-prompt-lernen .ai-card h3 {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  margin: 6px 0 8px;
}
.page-ai-prompt-lernen .ai-card p {
  color: var(--pl-text-dim);
  margin-bottom: 14px;
}
.page-ai-prompt-lernen .ai-card .btn { width: 100%; }
.page-ai-prompt-lernen .ai-card:hover {
  transform: translateY(-3px);
  border-color: rgba(155,91,255,.45);
  box-shadow: var(--pl-glow);
}

/* ------------------- Filters ------------------- */
.page-ai-prompt-lernen .ai-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-space-sm) var(--pl-space-md);
  align-items: flex-end;
  margin-bottom: var(--pl-space-md);
}
.page-ai-prompt-lernen .filter {
  display: grid;
  gap: 6px;
  min-width: 180px;
}
.page-ai-prompt-lernen .filter_label {
  font-size: .92rem;
  color: var(--pl-muted);
}
.page-ai-prompt-lernen select.form-control {
  background: var(--pl-surface);
  color: var(--pl-text);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-sm);
  padding: 10px 12px;
  outline: none;
}

/* ------------------- Tool Grids ------------------- */
.page-ai-prompt-lernen .ai-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--pl-grid-gap);
}

.page-ai-prompt-lernen .tool-card {
  background: linear-gradient(160deg, var(--pl-surface), rgba(255,255,255,0.04));
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-lg);
  padding: 18px;
  box-shadow: var(--pl-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.page-ai-prompt-lernen .tool-card:hover {
  transform: translateY(-4px);
  border-color: rgba(106,230,255,.38);
  box-shadow: var(--pl-glow);
}
.page-ai-prompt-lernen .tool-card__header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 10px;
}
.page-ai-prompt-lernen .tool-card__title { font-weight: 800; }
.page-ai-prompt-lernen .tool-card__company { color: var(--pl-muted); font-size: .92rem; }
.page-ai-prompt-lernen .tool-card__desc { color: var(--pl-text-dim); margin: 6px 0 12px; }

.page-ai-prompt-lernen .tool-specs {
  display: grid; gap: 8px; margin: 8px 0 12px;
}
.page-ai-prompt-lernen .tool-specs dt { color: var(--pl-muted); font-size: .85rem; }
.page-ai-prompt-lernen .tool-specs dd { margin: 0; font-weight: 600; }

.page-ai-prompt-lernen .features { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.page-ai-prompt-lernen .tag {
  display: inline-block;
  font-size: .8rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(155,91,255,.14);
  border: 1px solid rgba(155,91,255,.28);
  color: #e9dbff;
}

.page-ai-prompt-lernen .tool-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.page-ai-prompt-lernen .btn--sm { padding: 8px 12px; font-size: .92rem; }

/* ------------------- Tables (Comparisons) ------------------- */
.page-ai-prompt-lernen .ai-table {
  margin-top: var(--pl-space-md);
  background: linear-gradient(180deg, var(--pl-surface), rgba(255,255,255,0.05));
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-lg);
  overflow: hidden;
  box-shadow: var(--pl-shadow);
}
.page-ai-prompt-lernen .ai-table .table_title {
  padding: 14px 18px;
  margin: 0;
  font-weight: 800;
  border-bottom: 1px solid var(--pl-border);
  background: linear-gradient(180deg, rgba(155,91,255,.15), rgba(155,91,255,.03));
}
.page-ai-prompt-lernen .table {
  width: 100%; border-collapse: collapse;
}
.page-ai-prompt-lernen .table th,
.page-ai-prompt-lernen .table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--pl-border);
}
.page-ai-prompt-lernen .table thead th {
  font-weight: 700; text-align: left; color: var(--pl-text);
  background: rgba(255,255,255,0.02);
}
.page-ai-prompt-lernen .table tbody tr:hover {
  background: rgba(155,91,255,.06);
}

/* ------------------- Techniques ------------------- */
.page-ai-prompt-lernen .techniques-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--pl-grid-gap);
}
.page-ai-prompt-lernen .technique-card {
  background: linear-gradient(160deg, var(--pl-surface), rgba(255,255,255,0.05));
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-lg);
  padding: 18px;
  box-shadow: var(--pl-shadow);
}
.page-ai-prompt-lernen .technique-card__title { font-weight: 800; margin-bottom: 8px; }
.page-ai-prompt-lernen .technique-card__desc { color: var(--pl-text-dim); }
.page-ai-prompt-lernen .example-box {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--pl-radius-sm);
  background: #0f1014; border: 1px solid var(--pl-border); overflow: auto;
}

/* ------------------- Tutorials ------------------- */
.page-ai-prompt-lernen .tutorials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--pl-grid-gap);
}
.page-ai-prompt-lernen .tutorial-card {
  background: linear-gradient(160deg, var(--pl-surface), rgba(255,255,255,0.05));
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-lg);
  padding: 18px;
  box-shadow: var(--pl-shadow);
  display: grid; gap: 10px;
}
.page-ai-prompt-lernen .tutorial-card__title { font-weight: 800; }
.page-ai-prompt-lernen .tutorial-card__meta {
  display: flex; gap: 12px; color: var(--pl-muted); font-size: .92rem;
}
.page-ai-prompt-lernen .tutorial-card__desc { color: var(--pl-text-dim); }

/* ------------------- Practice Lab ------------------- */
.page-ai-prompt-lernen .practice-lab {
  background: linear-gradient(160deg, var(--pl-surface), rgba(255,255,255,0.05));
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-lg);
  box-shadow: var(--pl-shadow);
  padding: clamp(16px, 3vw, 24px);
}
.page-ai-prompt-lernen .prompt-builder {
  display: grid; gap: var(--pl-space-md);
}
.page-ai-prompt-lernen .form-group { display: grid; gap: 8px; }
.page-ai-prompt-lernen .form-label { font-weight: 600; color: var(--pl-text); }
.page-ai-prompt-lernen .form-control {
  width: 100%;
  background: var(--pl-surface);
  color: var(--pl-text);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-sm);
  padding: 12px 14px;
  outline: none;
}
.page-ai-prompt-lernen .prompt-output {
  min-height: 68px;
  display: grid; align-items: center;
  background: #0f1014;
  border: 1px dashed rgba(155,91,255,.45);
  border-radius: var(--pl-radius-md);
  padding: 12px 14px;
  color: #eedeff;
  box-shadow: inset 0 0 24px rgba(155,91,255,.10);
}
.page-ai-prompt-lernen .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------- Buttons (minor tweaks only) ------------------- */
.page-ai-prompt-lernen .btn {
  border-radius: 999px;
  border: 1px solid rgba(155,91,255,.55);
  background: linear-gradient(135deg, rgba(155,91,255,.25), rgba(106,230,255,.18));
  color: #fff;
  box-shadow: var(--pl-glow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-ai-prompt-lernen .btn:hover,
.page-ai-prompt-lernen .btn:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(155,91,255,.85);
  box-shadow: 0 0 0 4px rgba(155,91,255,.18), var(--pl-glow);
  outline: none;
}
.page-ai-prompt-lernen .btn--outline {
  background: transparent;
  border-color: rgba(255,255,255,.28);
  box-shadow: none;
}

/* ------------------- Responsive ------------------- */
@media (max-width: 1080px) {
  .page-ai-prompt-lernen .ai-cards { grid-template-columns: repeat(2, 1fr); }
  .page-ai-prompt-lernen .ai-localnav_list { grid-template-columns: repeat(3, 1fr); }
  .page-ai-prompt-lernen .ai-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-ai-prompt-lernen .techniques-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-ai-prompt-lernen .tutorials-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .page-ai-prompt-lernen .ai-cards { grid-template-columns: 1fr; }
  .page-ai-prompt-lernen .ai-localnav_list { grid-template-columns: repeat(2, 1fr); }
  .page-ai-prompt-lernen .ai-grid { grid-template-columns: 1fr; }
  .page-ai-prompt-lernen .techniques-grid { grid-template-columns: 1fr; }
  .page-ai-prompt-lernen .tutorials-grid { grid-template-columns: 1fr; }
}

/* ------------------- A11y & Motion Prefs ------------------- */
.page-ai-prompt-lernen .ai-localnav_link:focus-visible,
.page-ai-prompt-lernen .tool-card:focus-within {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(106,230,255,.35), var(--pl-glow);
  border-color: rgba(106,230,255,.65);
}

@media (prefers-reduced-motion: reduce) {
  .page-ai-prompt-lernen .ai-card,
  .page-ai-prompt-lernen .tool-card,
  .page-ai-prompt-lernen .btn { transition: none !important; }
}

/* ------------------- Utilities (scoped) ------------------- */
.page-ai-prompt-lernen .divider {
  display: block; width: 84px; height: 4px; margin: 16px 0;
  background: var(--pl-accent-grad); border-radius: 4px;
}


/* ==== HERO H1 ==== */
.page-ai-prompt-lernen .ai-hero .section_title {
  font-size: clamp(2.5rem, 5vw, 3.6rem);
  font-weight: 900;
  text-align: center;
  margin-bottom: 18px;
  background: var(--pl-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: var(--pl-glow);
}

.page-ai-prompt-lernen .ai-hero .divider {
  margin: 0 auto var(--pl-space-md);
}
.page-ai-prompt-lernen .ai-hero .section_subtitle {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.5;
}

/* H1: گرادیان نئون مشابه KI Lösungen */
.page-ai-prompt-lernen .ai-hero .section_title {
  background: linear-gradient(135deg, #9bd7ff 0%, #58b9ff 42%, #9B5BFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow:
    0 0 10px rgba(88,185,255,.35),
    0 0 26px rgba(155,91,255,.28);
}

/* فقط برای اسامی ابزارها */
.page-ai-prompt-lernen .section_subtitle .ai-tool {
  font-weight: 700;
  color: #58b9ff;   /* آبی روشن - می‌تونی به #9B5BFF (بنفش) یا هر رنگ ثابت دیگه عوض کنی */
}
/* ==== Cards Section (4er Grid) ==== */
.page-ai-prompt-lernen .ai-cards-section {
  padding: var(--pl-space-xl) 0;
}

.page-ai-prompt-lernen .ai-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pl-grid-gap);
}

/* کارت‌ها */
.page-ai-prompt-lernen .ai-card {
  background: linear-gradient(160deg, var(--pl-surface), var(--pl-surface-2));
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-lg);
  padding: 22px 20px;
  box-shadow: var(--pl-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.page-ai-prompt-lernen .ai-card:hover {
  transform: translateY(-4px);
  border-color: rgba(155,91,255,.45);
  box-shadow: var(--pl-glow);
}

/* تیتر کارت */
.page-ai-prompt-lernen .ai-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-ai-prompt-lernen .ai-card h3 .icon {
  font-size: 1.2em;
}

/* متن کارت */
.page-ai-prompt-lernen .ai-card p {
  color: var(--pl-text-dim);
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 16px;
}

/* دکمه کارت */
.page-ai-prompt-lernen .ai-card .btn {
  align-self: flex-start;
}

/* ریسپانسیو */
@media (max-width: 1080px) {
  .page-ai-prompt-lernen .ai-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .page-ai-prompt-lernen .ai-cards-grid {
    grid-template-columns: 1fr;
  }
}
/* لینک‌های لوکال ناو */
.page-ai-prompt-lernen .ai-localnav_link {
  display: block;
  text-align: center;
  padding: 14px 10px;
  color: #fff;           /* سفید ساده */
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

/* جداکننده بین آیتم‌ها */
.page-ai-prompt-lernen .ai-localnav_list li {
  position: relative;
}
.page-ai-prompt-lernen .ai-localnav_list li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: rgba(255,255,255,0.25); /* خط نازک نیمه‌شفاف */
}

/* hover effect کوچک */
.page-ai-prompt-lernen .ai-localnav_link:hover {
  background: rgba(155,91,255,0.15);
  border-radius: 6px;
}


/* ==== Quick Cards: faint blue frame ==== */
.page-ai-prompt-lernen .ai-cards .ai-card{
  /* پس‌زمینه خیلی ملایم با تُن آبی */
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(88,185,255,.10), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(155,91,255,.08), transparent 55%),
    linear-gradient(160deg, var(--pl-surface), var(--pl-surface-2));
  /* قاب آبی کم‌رنگ */
  border: 1px solid rgba(88,185,255,.28);
  border-radius: var(--pl-radius-lg);
  /* هاله‌ی خیلی ظریف دور قاب */
  box-shadow:
    0 10px 26px rgba(0,0,0,.25),
    0 0 0 1px rgba(88,185,255,.15),
    inset 0 0 0 1px rgba(255,255,255,.05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

/* هوور: قاب کمی آبی‌تر و نور ملایم‌تر */
.page-ai-prompt-lernen .ai-cards .ai-card:hover{
  transform: translateY(-3px);
  border-color: rgba(88,185,255,.45);
  box-shadow:
    0 14px 34px rgba(0,0,0,.32),
    0 0 0 1px rgba(88,185,255,.25),
    0 0 22px rgba(88,185,255,.20);
}

/* تیتر و متن داخل Quick cards */
.page-ai-prompt-lernen .ai-cards .ai-card h3{
  color:#fff;
  letter-spacing:.2px;
}
.page-ai-prompt-lernen .ai-cards .ai-card p{
  color: var(--pl-text-dim);
}

/* دکمه‌ی داخل Quick cards: هماهنگ با قاب آبی */
.page-ai-prompt-lernen .ai-cards .ai-card .btn{
  border-color: rgba(88,185,255,.55);
  background: linear-gradient(135deg, rgba(88,185,255,.22), rgba(155,91,255,.18));
}
.page-ai-prompt-lernen .ai-cards .ai-card .btn:hover{
  border-color: rgba(88,185,255,.85);
  box-shadow: 0 0 0 4px rgba(88,185,255,.18), var(--pl-glow);
}






/* ===== HEADER OFFSET برای اسکرول با انکر ===== */
.page-ai-prompt-lernen #video-tools{
  scroll-margin-top: calc(var(--pl-sticky-top, 96px) + 18px) !important;
}
/* === Fix: remove bottom line under hero === */
.page-ai-prompt-lernen .ai-hero{
  border-bottom: 0 !important;
  box-shadow: none !important; /* اگه سایه‌ای هم دیده میشه */
}
/* === tighten gap between hero and section nav === */
.page-ai-prompt-lernen .ai-hero {
  margin-bottom: 0 !important;   /* هیرو فاصله نده */
  padding-bottom: 0px;          /* فقط یه کمی نفس داشته باشه */
}

.page-ai-prompt-lernen .ai-filters {
  margin-top: 20px;             /* بکشون بالا */
}


/* === tighten spacing for localnav under hero === */
.page-ai-prompt-lernen #ai-localnav.section {
  padding-top: 0 !important;   /* فاصله اضافه بالا حذف */
  margin-top: -10px;           /* اگه خواستی بچسبه به Hero */
}
/* === bring quickcards closer to localnav === */
.page-ai-prompt-lernen #ai-quickcards.section {
  padding-top: 20px !important;   /* فاصله بالا کم شد */
  margin-top: -10px;              /* بیار نزدیک‌تر به Localnav */
}
.page-ai-prompt-lernen #ai-quickcards .ai-card:hover{
  box-shadow: 0 14px 32px rgba(0,0,0,.14);
  transform: translateY(-2px);
}
/* === Video-Tools section header === */
.page-ai-prompt-lernen #video-tools .section_header {
  text-align: center;              /* وسط‌چین کل هدر */
  margin-bottom: 2rem;             /* فاصله پایین */
}

.page-ai-prompt-lernen #video-tools .section_title {
  font-size: clamp(2rem, 5vw, 2.8rem); /* بزرگ‌تر از حالت عادی */
  font-weight: 800;                    /* ضخیم‌تر */
  color: #fff;                         /* مطمئن بشه رو مشکی خواناست */
}

.page-ai-prompt-lernen #video-tools .section_subtitle {
  max-width: 70ch;                     /* متن محدود و خوانا */
  margin-left: auto;
  margin-right: auto;
}
/* =========================
   VIDEO-TOOLS — Filters (3 columns, clean)
   ========================= */
.page-ai-prompt-lernen #video-tools .ai-filters{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* سه ستون مساوی */
  gap: 28px;
  align-items: start;                    /* شروع از بالا */
  padding: 28px;
  margin-top: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);    /* قاب مات شیک */
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.25) inset,
              0 10px 28px rgba(0,0,0,.12);
}

/* هر ستون فیلتر به صورت کارت مستقل */
.page-ai-prompt-lernen #video-tools .ai-filters .filter{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 16px 18px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
}

/* تیتر ستون */
.page-ai-prompt-lernen #video-tools .filter_label{
  font-size: 0.95rem;
  font-weight: 700;
  color: #f2f2f2;
  letter-spacing: .2px;
}

/* خود سلکت‌ها یکدست و پهن */
.page-ai-prompt-lernen #video-tools .form-control{
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
}

.page-ai-prompt-lernen #video-tools .form-control:focus{
  border-color: rgba(155,91,255,.6);
  box-shadow: 0 0 0 6px rgba(155,91,255,.15);
}

/* ریسپانسیو */
@media (max-width: 992px){
  .page-ai-prompt-lernen #video-tools .ai-filters{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px){
  .page-ai-prompt-lernen #video-tools .ai-filters{
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }
  .page-ai-prompt-lernen #video-tools .ai-filters .filter{ padding: 14px; }
}
/* ===============================
   VIDEO-TOOLS — Polished Selects
   =============================== */
.page-ai-prompt-lernen #video-tools .ai-filters .filter{
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.18);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  backdrop-filter: blur(4px);
}

.page-ai-prompt-lernen #video-tools .ai-filters .filter:hover{
  border-color: rgba(155,91,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.24);
}

/* Label */
.page-ai-prompt-lernen #video-tools .filter_label{
  font-size: .95rem; font-weight: 800; letter-spacing: .2px;
  color: #f4f4f4;
}

/* Native select – luxury style, no layout jumps */
.page-ai-prompt-lernen #video-tools .form-control{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 52px;
  padding: 0 48px 0 16px; /* فضا برای فلش */
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    rgba(24,24,24,.35);
  color: #fff;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .12s ease;
  will-change: transform, box-shadow; /* جلوگیری از فِلَش */
}

.page-ai-prompt-lernen #video-tools .form-control:hover{
  border-color: rgba(155,91,255,.5);
}

.page-ai-prompt-lernen #video-tools .form-control:focus{
  outline: none;
  border-color: rgba(155,91,255,.8);
  box-shadow: 0 0 0 6px rgba(155,91,255,.18), inset 0 2px 6px rgba(0,0,0,.25);
  transform: translateY(-1px);
}

/* فلش سفارشی (CSS-only) */
.page-ai-prompt-lernen #video-tools .filter::after{
  content: "";
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px;
  border-right: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
  transform-origin: 50% 40%;
  rotate: 45deg;
  pointer-events: none;
  opacity: .9;
  transition: transform .18s ease, opacity .18s ease;
}

/* وقتی Select فوکوس/باز است فلش کمی می‌چرخد */
.page-ai-prompt-lernen #video-tools .form-control:focus + .dummy,
.page-ai-prompt-lernen #video-tools .form-control:focus ~ *{
  /* هیچ‌کاری نمی‌کنیم؛ فقط برای Specificity */
}
.page-ai-prompt-lernen #video-tools .form-control:focus-visible ~ .arrow{}

/* Hack کوچک: وقتی والد فوکوس گرفت فلش را بچرخانیم */
.page-ai-prompt-lernen #video-tools .filter:focus-within::after{
  rotate: 225deg; opacity: 1;
}

/* Dropdown list (قابل‌اعتمادترین تنظیمات بومی) */
.page-ai-prompt-lernen #video-tools .form-control option{
  background-color: #141414;  /* پس‌زمینه لیست */
  color: #f1f1f1;
}

/* WebKit scrollbar برای لیست بازشونده (Chrome/Edge) */
.page-ai-prompt-lernen #video-tools .form-control::-webkit-scrollbar{
  width: 10px;
}
.page-ai-prompt-lernen #video-tools .form-control::-webkit-scrollbar-track{
  background: #0f0f0f;
}
.page-ai-prompt-lernen #video-tools .form-control::-webkit-scrollbar-thumb{
  background: #2a2a2a;
  border-radius: 10px;
  border: 2px solid #0f0f0f;
}
.page-ai-prompt-lernen #video-tools .form-control::-webkit-scrollbar-thumb:hover{
  background: #3a3a3a;
}

/* Remove default IE arrow (برای سازگاری) */
.page-ai-prompt-lernen #video-tools .form-control::-ms-expand{
  display: none;
}

/* حالت کنتراست کمتر برای کاربرانی که motion کم می‌خوان */
@media (prefers-reduced-motion: reduce){
  .page-ai-prompt-lernen #video-tools .form-control,
  .page-ai-prompt-lernen #video-tools .filter,
  .page-ai-prompt-lernen #video-tools .filter::after{
    transition: none;
  }
}


/* --- stable wrapper to avoid layout jumps --- */
.page-ai-prompt-lernen #video-tools .select-wrap{
  position: relative;
}
.page-ai-prompt-lernen #video-tools .select-wrap .form-control{
  width: 100%; height: 52px; padding-right: 44px; /* جا برای فلش */
}

/* custom arrow (element-based: پایدارتر از ::after) */
.page-ai-prompt-lernen #video-tools .select-arrow{
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%) rotate(45deg);
  width: 10px; height: 10px;
  border-right: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
  opacity: .9; pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.page-ai-prompt-lernen #video-tools .select-wrap:focus-within .select-arrow{
  transform: translateY(-50%) rotate(225deg);
  opacity: 1;
}

/* سه ستون مستقل با شروع تایتل از بالا (که قبلاً گذاشتیم) */
.page-ai-prompt-lernen #video-tools .ai-filters{
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 28px; align-items: start; padding: 28px;
  border-radius: 18px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.page-ai-prompt-lernen #video-tools .ai-filters .filter{
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px; background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
}

/* ریسپانسیو */
@media (max-width: 992px){
  .page-ai-prompt-lernen #video-tools .ai-filters{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .page-ai-prompt-lernen #video-tools .ai-filters{ grid-template-columns: 1fr; gap: 16px; padding: 18px; }
}
/* --- REMOVE any old pseudo-arrow on filter (جلوگیری از فلشِ دوم) --- */
.page-ai-prompt-lernen #video-tools .ai-filters .filter::after{
  content: none !important;
}

/* --- Hide native select arrows across browsers --- */
.page-ai-prompt-lernen #video-tools .select-wrap .form-control{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;    /* کروم/اِج */
  background-color: rgba(24,24,24,.35);
  padding-right: 44px;                   /* جا برای فلش سفارشی */
  line-height: 1;                        /* جلوگیری از جابه‌جایی عمودی متن */
}
/* IE/قدیمی‌ها */
.page-ai-prompt-lernen #video-tools .select-wrap .form-control::-ms-expand{
  display: none;
}
/* Firefox قدیمی */
.page-ai-prompt-lernen #video-tools .select-wrap .form-control::-moz-focus-inner{
  border: 0; padding: 0; margin: 0;
}

/* --- Our only arrow (element-based) --- */
.page-ai-prompt-lernen #video-tools .select-wrap{
  position: relative;
}
.page-ai-prompt-lernen #video-tools .select-arrow{
  position: absolute; right: 16px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none; opacity: .9;
  transition: transform .18s ease, opacity .18s ease;
}
/* وقتی فوکوس می‌گیریم، فقط همین فلش می‌چرخد */
.page-ai-prompt-lernen #video-tools .select-wrap:focus-within .select-arrow{
  transform: translateY(-50%) rotate(225deg);
  opacity: 1;
}

/* --- Consistent dropdown list look (option panel) --- */
.page-ai-prompt-lernen #video-tools .select-wrap .form-control option{
  background-color: #141414;
  color: #f1f1f1;
}
/* --- Dropdowns باید رو محتوا بیاد و قطع/clip نشه --- */
.page-ai-prompt-lernen #video-tools .ai-filters{
  overflow: visible !important;       /* والد اصلی: اجازه خروج پنل */
}

.page-ai-prompt-lernen #video-tools .ai-filters .filter{
  overflow: visible !important;       /* هر ستون کارت */
  position: relative;                 /* برای z-index کنترل‌شده */
  z-index: 1;
}

.page-ai-prompt-lernen #video-tools .select-wrap{
  position: relative;
  z-index: 2;                         /* پایه */
}
/* زمانی که Select فوکوس/باز است، بیار جلوی همه تا قطع نشود */
.page-ai-prompt-lernen #video-tools .select-wrap:focus-within{
  z-index: 9999;                      /* dropdown روی همه دیده شود */
}

/* خود select پایدار و بدون پرش */
.page-ai-prompt-lernen #video-tools .select-wrap .form-control{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  padding-right: 44px;                /* جا برای فلش سفارشی */
  line-height: 1.2;                   /* از بهم‌ریختگی baseline جلوگیری می‌کند */
  overflow: hidden;                   /* محتوا هنگام بسته بودن مخفی باشد */
}

/* فقط یک فلش سفارشی داشته باشیم */
.page-ai-prompt-lernen #video-tools .ai-filters .filter::after{ content: none !important; }
.page-ai-prompt-lernen #video-tools .select-arrow{
  position: absolute; right: 16px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none; opacity: .9;
  transition: transform .18s ease, opacity .18s ease;
}
.page-ai-prompt-lernen #video-tools .select-wrap:focus-within .select-arrow{
  transform: translateY(-50%) rotate(225deg);
  opacity: 1;
}

/* جلوگیری از ماسک شدن زیر گوشه‌های گرد قاب بزرگ */
.page-ai-prompt-lernen #video-tools .ai-filters{
  -webkit-mask-image: none; mask-image: none; /* اگر جایی ماسک/clip تعریف شده بود */
}

/* برای مرورگرهای قدیمی‌تر */
.page-ai-prompt-lernen #video-tools .select-wrap .form-control::-ms-expand{ display:none; }
/* ================== AI VIDEO-TOOLS (scoped) ================== */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__header{
  text-align:center; margin-bottom:24px;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__title{
  font-size:clamp(2rem,5vw,2.8rem); font-weight:800;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__subtitle{
  max-width:70ch; margin-inline:auto;
}

/* Filters container (3-column) */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__filters{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:28px; align-items:start;
  padding:28px; margin-top:8px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  overflow:visible !important; /* اجازه خروج dropdown */
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__filter{
  display:flex; flex-direction:column; gap:10px;
  padding:16px 18px; border-radius:14px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  position:relative; overflow:visible !important;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__label{
  font-size:.95rem; font-weight:800; color:#f3f3f3;
}

/* Select wrapper */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__select{
  position:relative; z-index:2; /* پایه */
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__select:focus-within{
  z-index:9999; /* هنگام بازشدن، روی همه بیاد */
}

/* Native select (فقط ردیف انتخاب) */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__select-el{
  display:block; width:100%; height:52px;
  padding:0 44px 0 16px; line-height:1.2;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)),
    rgba(24,24,24,.35);
  color:#fff; box-shadow:inset 0 2px 6px rgba(0,0,0,.25);
  overflow:hidden;                        /* گزینه‌ها تا بازشدن مخفی */
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  background-image:none !important;       /* فلش بومی حذف */
  transition:border-color .2s, box-shadow .2s, transform .12s;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__select-el:hover{
  border-color:rgba(155,91,255,.5);
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__select-el:focus{
  outline:none; border-color:rgba(155,91,255,.8);
  box-shadow:0 0 0 6px rgba(155,91,255,.18), inset 0 2px 6px rgba(0,0,0,.25);
  transform:translateY(-1px);
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__select-el::-ms-expand{ display:none; }

/* تنها فلش سفارشی */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__arrow{
  position:absolute; right:16px; top:50%;
  width:10px; height:10px; pointer-events:none;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform:translateY(-50%) rotate(45deg);
  opacity:.95; transition:transform .18s, opacity .18s;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__select:focus-within .vtools__arrow{
  transform:translateY(-50%) rotate(225deg); opacity:1;
}

/* ظاهر لیست گزینه‌ها داخل پنجره‌ی بومی */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__select-el option{
  background:#141414; color:#f1f1f1;
}

/* جمع‌کردن هر UI سفارشی کناری که بعضی پلاگین‌ها می‌سازند */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__filter select + ul,
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__filter select + div,
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__filter .nice-select,
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__filter .choices,
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__filter .dropdown{
  display:none !important; visibility:hidden !important; pointer-events:none !important;
}

/* Grid/Table spacing hooks */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__grid{ margin-top:28px; }
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table{ margin-top:24px; }
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table-title{ margin-bottom:12px; }

/* Responsive */
@media (max-width:992px){
  .page-ai-prompt-lernen #video-tools.ai-vtools .vtools__filters{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:640px){
  .page-ai-prompt-lernen #video-tools.ai-vtools .vtools__filters{
    grid-template-columns:1fr; gap:16px; padding:18px;
  }
  .page-ai-prompt-lernen #video-tools.ai-vtools .vtools__filter{ padding:14px; }
}

/* Reduce-motion accessibility */
@media (prefers-reduced-motion: reduce){
  .page-ai-prompt-lernen #video-tools.ai-vtools .vtools__select-el,
  .page-ai-prompt-lernen #video-tools.ai-vtools .vtools__arrow{ transition:none; }
}
/* ---- Performance & dark hint for native controls ---- */
.page-ai-prompt-lernen #video-tools.ai-vtools{
  color-scheme: dark;                 /* جلوی فِلَش سفید کوتاه را می‌گیرد */
}

/* select: انیمیشن‌های سبک + بدون حرکت */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__select-el{
  transition: border-color .12s ease-out, box-shadow .12s ease-out; /* دیگه transform نه */
  will-change: border-color, box-shadow;
  backface-visibility: hidden;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__select-el:focus{
  transform: none;                    /* حذف translateY که ریشه‌ی جابه‌جایی بود */
  outline: none;
}

/* فلش سفارشی: بدون چرخش، فقط محو/پررنگ شود */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__arrow{
  opacity: .8; transition: opacity .12s ease-out;
  transform: translateY(-50%) rotate(45deg); /* ثابت بماند */
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__select:focus-within .vtools__arrow{
  opacity: 1;
}

/* کاهش اثرات سنگین شیشه‌ای اگر جایی فعال شده باشد */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__filters,
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__filter{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* لیست گزینه‌ها تیره بماند (اگر مرورگر اجازه بده) */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__select-el option{
  background-color: #151515;
  color: #f1f1f1;
}

/* اگر هنوز حرکات ریز اذیت می‌کند، این را هم باز کن: */
/*
@media (prefers-reduced-motion: reduce){
  .page-ai-prompt-lernen #video-tools.ai-vtools .vtools__select-el,
  .page-ai-prompt-lernen #video-tools.ai-vtools .vtools__arrow{ transition:none; }
}
*/
/*******************************
 * AI VIDEO-TOOLS — Tool Cards
 * scope: #video-tools.ai-vtools
 *******************************/

/* گرید تمیز و ریسپانسیو */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
  margin-top: 28px;
}

/* کارت پایه */
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: 18px;
  background: radial-gradient(120% 120% at -10% -10%, rgba(155,91,255,.06), transparent 60%) ,
              rgba(18,18,18,.86);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 8px 24px rgba(0,0,0,.35);
  transition: transform .12s ease-out, box-shadow .12s ease-out, border-color .12s ease-out;
  min-height: 260px;
}

/* Hover/Focus */
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card:hover,
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card:focus-within{
  transform: translateY(-2px);
  border-color: rgba(155,91,255,.35);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 14px 36px rgba(0,0,0,.45),
    0 0 0 6px rgba(155,91,255,.10);
}

/* هدر کارت: عنوان چپ/کمپانی راست */
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card__header{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
}
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card__title{
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 900;
  letter-spacing: .3px;
  margin: 0;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card__company{
  font-size: .85rem;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
}

/* توضیح کوتاه */
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card__desc{
  margin: 2px 2px 0;
  color: rgba(255,255,255,.86);
}

/* مشخصات: dt/dd ستونی و تمیز */
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-specs{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 16px;
  margin-top: 6px;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-specs > div{
  display:flex; flex-direction:column; gap: 4px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-specs dt{
  font-size: .78rem; color: rgba(255,255,255,.62); font-weight: 700;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-specs dd{
  margin: 0; font-weight: 800; color: #fff;
}

/* تگ‌های ویژگی */
.page-ai-prompt-lernen #video-tools.ai-vtools .features{
  display:flex; flex-wrap:wrap; gap:10px; margin-top: 2px;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .tag{
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .85rem; font-weight: 700;
  background: rgba(155,91,255,.16);
  border: 1px solid rgba(155,91,255,.35);
  color: #d9c7ff;
}

/* اکشن‌ها پایین کارت ثابت بمانند */
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-actions{
  margin-top: auto; /* کارت‌ها هم‌قد می‌شوند */
  display:flex; flex-wrap:wrap; gap:10px;
}

/* دکمه‌ها */
.page-ai-prompt-lernen #video-tools.ai-vtools .btn{
  height: 40px; padding: 0 16px;
  border-radius: 999px; font-weight: 800;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .btn--primary{
  background: linear-gradient(180deg, #9b5bff, #7a40e6);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .btn--primary:hover{
  filter: brightness(1.05);
}
.page-ai-prompt-lernen #video-tools.ai-vtools .btn--outline{
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .btn--outline:hover{
  border-color: rgba(255,255,255,.45);
}

/* ریسپانسیو: وقتی کارت باریک شد، مشخصات یک‌ستونه */
@media (max-width: 460px){
  .page-ai-prompt-lernen #video-tools.ai-vtools .tool-specs{
    grid-template-columns: 1fr;
  }
}
/* Make tool titles slightly smaller so long names fit on one line */
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card__title{
  font-size: clamp(1.05rem, 1.45vw, 1.25rem); /* قبلش ~1.35rem بود */
  line-height: 1.1;
  letter-spacing: .2px; /* فشرده‌تر از قبل */
}

/* Header padding کمی کم‌تر تا ارتفاع کلی هم جمع شود */
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card__header{
  padding: 8px 12px;
}

/* شرکت سمت راست هم کمی جمع‌تر شود تا جا باز شود */
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card__company{
  font-size: .8rem;
}
/*******************************
 * VERGLEICH (VIDEO-TOOLS) — PRO TABLE
 * scope: #video-tools.ai-vtools
 *******************************/
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table{
  margin-top: 34px;
  background: radial-gradient(120% 120% at -20% -20%, rgba(155,91,255,.08), transparent 60%),
              rgba(14,14,14,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  overflow: hidden;         /* برای گردی گوشه‌ها */
}

/* عنوان جدول */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table-title{
  margin: 0;
  padding: 16px 20px 8px;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 900;
  letter-spacing: .3px;
}

/* ظرف اسکرول افقی برای موبایل */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table .table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* هدِر چسبان و براق */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table thead th{
  position: sticky; top: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color: #fff;
  text-align: left;
  font-weight: 800;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  z-index: 1;
  white-space: nowrap;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table thead th:first-child{
  border-top-left-radius: 12px;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table thead th:last-child{
  border-top-right-radius: 12px;
}

/* ردیف‌ها: خط جداکننده لطیف + حالت زیبرای خیلی کم */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table tbody tr{
  transition: background-color .12s ease-out, box-shadow .12s ease-out;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table tbody tr:nth-child(odd){
  background: rgba(255,255,255,.02);
}

/* سلول‌ها */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table td{
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: middle;
}

/* ستون اول: نام + شرکت */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table td:first-child{
  font-weight: 900;
  letter-spacing: .2px;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table td:first-child small{
  display: block;
  margin-top: 4px;
  font-weight: 600;
  color: rgba(255,255,255,.68);
}

/* Badges برای Resolution/Best for (خواناتر) */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table td:nth-child(3),
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table td:nth-child(5){
  font-weight: 700;
  color: #eaeaea;
}

/* Hover ردیف: هایلایت نرم */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table tbody tr:hover{
  background: rgba(155,91,255,.10);
  box-shadow: inset 0 0 0 9999px rgba(155,91,255,.04);
}

/* گردی پایین جدول */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table tbody tr:last-child td{
  border-bottom: 0;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table tbody tr:last-child td:first-child{
  border-bottom-left-radius: 12px;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table tbody tr:last-child td:last-child{
  border-bottom-right-radius: 12px;
}

/* اسکرول‌بار شیک برای افقی (وقتی صفحه باریک شد) */
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table{
  overflow-x: auto;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table::-webkit-scrollbar{
  height: 10px;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table::-webkit-scrollbar-track{
  background: #0f0f0f;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table::-webkit-scrollbar-thumb{
  background: #2a2a2a; border-radius: 10px; border: 2px solid #0f0f0f;
}

/* تراکم بهتر در موبایل */
@media (max-width: 640px){
  .page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table thead th,
  .page-ai-prompt-lernen #video-tools.ai-vtools .vtools__table td{
    padding: 12px 14px;
  }
}
/* ===== Brandable cards (scope: #video-tools.ai-vtools) ===== */
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card{
  /* پیش‌فرض‌ها */
  --accent: #9b5bff;
  --accent-2: #7a40e6;
  --chip-bg: color-mix(in srgb, var(--accent) 18%, transparent);
  --chip-border: color-mix(in srgb, var(--accent) 40%, transparent);
  border-color: color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,.08));
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 8px 24px rgba(0,0,0,.35);
}
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card__header{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent), rgba(255,255,255,.02));
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,.08));
}
.page-ai-prompt-lernen #video-tools.ai-vtools .tag{
  background: var(--chip-bg);
  border-color: var(--chip-border);
  color: color-mix(in srgb, white 92%, var(--accent) 8%);
}

/* Hover با رنگ برند */
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card:hover,
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card:focus-within{
  border-color: color-mix(in srgb, var(--accent) 45%, rgba(255,255,255,.35));
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 14px 36px rgba(0,0,0,.45),
    0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ===== Brand palettes ===== */
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card[data-brand="google"]{
  --accent: #1a73e8;    /* آبی گوگل */
  --accent-2: #34a853;  /* سبز گوگل (سایه دوم) */
}
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card[data-brand="openai"]{
  --accent: #10a37f;
  --accent-2: #0b8064;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card[data-brand="runway"]{
  --accent: #00ff87;
  --accent-2: #00e68a;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card[data-brand="kling"]{
  --accent: #ff6b6b;
  --accent-2: #ff3b3b;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card[data-brand="hailuo"]{
  --accent: #f59e0b;
  --accent-2: #ea7a00;
}
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card[data-brand="seedance"]{
  --accent: #ff3ea5;
  --accent-2: #ff1f7a;
}

/* دکمه‌ی اصلی هم با رنگ برند هماهنگ شود */
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card .btn--primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-color: color-mix(in srgb, var(--accent) 35%, rgba(255,255,255,.08));
}
.page-ai-prompt-lernen #video-tools.ai-vtools .tool-card .btn--primary:hover{
  filter: brightness(1.06);
}


/* ================== AI IMAGE-TOOLS (scoped) ================== */
.page-ai-prompt-lernen #image-tools.ai-itools{ color-scheme: dark; }

.page-ai-prompt-lernen #image-tools.ai-itools .itools__header{
  text-align:center; margin-bottom:24px;
}
.page-ai-prompt-lernen #image-tools.ai-itools .itools__title{
  font-size:clamp(2rem,5vw,2.8rem); font-weight:800;
}
.page-ai-prompt-lernen #image-tools.ai-itools .itools__subtitle{
  max-width:70ch; margin-inline:auto;
}

/* Filters container (2-column) – همون استایل ویدئو ولی دو ستونه */
.page-ai-prompt-lernen #image-tools.ai-itools .itools__filters{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:28px; align-items:start;
  padding:28px; margin-top:8px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  overflow:visible !important;
}
.page-ai-prompt-lernen #image-tools.ai-itools .itools__filter{
  display:flex; flex-direction:column; gap:10px;
  padding:16px 18px; border-radius:14px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  position:relative; overflow:visible !important;
}
.page-ai-prompt-lernen #image-tools.ai-itools .itools__label{
  font-size:.95rem; font-weight:800; color:#f3f3f3;
}

/* Select wrapper */
.page-ai-prompt-lernen #image-tools.ai-itools .itools__select{
  position:relative; z-index:2;
}
.page-ai-prompt-lernen #image-tools.ai-itools .itools__select:focus-within{
  z-index:9999;
}

/* Native select – سریع و بدون فلیکر */
.page-ai-prompt-lernen #image-tools.ai-itools .itools__select-el{
  display:block; width:100%; height:52px; line-height:1.2;
  padding:0 44px 0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)),
    rgba(24,24,24,.35);
  color:#fff; overflow:hidden;
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  background-image:none !important;
  transition:border-color .12s ease-out, box-shadow .12s ease-out; /* بدون transform */
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25);
}
.page-ai-prompt-lernen #image-tools.ai-itools .itools__select-el:hover{
  border-color:rgba(155,91,255,.5);
}
.page-ai-prompt-lernen #image-tools.ai-itools .itools__select-el:focus{
  outline:none; border-color:rgba(155,91,255,.8);
  box-shadow:0 0 0 6px rgba(155,91,255,.18), inset 0 2px 6px rgba(0,0,0,.25);
}
.page-ai-prompt-lernen #image-tools.ai-itools .itools__select-el::-ms-expand{ display:none; }

.page-ai-prompt-lernen #image-tools.ai-itools .itools__arrow{
  position:absolute; right:16px; top:50%;
  width:10px; height:10px; pointer-events:none;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform:translateY(-50%) rotate(45deg);
  opacity:.9; transition:opacity .12s ease-out;
}
.page-ai-prompt-lernen #image-tools.ai-itools .itools__select:focus-within .itools__arrow{ opacity:1; }

.page-ai-prompt-lernen #image-tools.ai-itools .itools__select-el option{
  background:#141414; color:#f1f1f1;
}

/* جمع کردن هر UI سفارشی که کنار select ساخته می‌شود */
.page-ai-prompt-lernen #image-tools.ai-itools .itools__filter select + ul,
.page-ai-prompt-lernen #image-tools.ai-itools .itools__filter select + div,
.page-ai-prompt-lernen #image-tools.ai-itools .itools__filter .nice-select,
.page-ai-prompt-lernen #image-tools.ai-itools .itools__filter .choices,
.page-ai-prompt-lernen #image-tools.ai-itools .itools__filter .dropdown{
  display:none !important; visibility:hidden !important; pointer-events:none !important;
}

/* ===== Cards (reuse from video section) ===== */
.page-ai-prompt-lernen #image-tools.ai-itools .itools__grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr));
  gap:22px; margin-top:28px;
}

/* همون استایل کارت‌ها، فقط selector بخش image */
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:22px; border-radius:18px;
  background: radial-gradient(120% 120% at -10% -10%, rgba(155,91,255,.06), transparent 60%) , rgba(18,18,18,.86);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.35);
  transition: transform .12s ease-out, box-shadow .12s ease-out, border-color .12s ease-out;
  min-height: 240px;
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card:hover,
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card:focus-within{
  transform: translateY(-2px);
  border-color: rgba(155,91,255,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 14px 36px rgba(0,0,0,.45), 0 0 0 6px rgba(155,91,255,.10);
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card__header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card__title{ font-size: clamp(1.1rem,1.6vw,1.3rem); font-weight:900; margin:0; }
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card__company{ font-size:.85rem; color:rgba(255,255,255,.75); white-space:nowrap; }
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card__desc{ margin:2px 2px 0; color:rgba(255,255,255,.86); }
.page-ai-prompt-lernen #image-tools.ai-itools .tool-specs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px 16px; margin-top:6px;
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-specs > div{
  display:flex; flex-direction:column; gap:4px; padding:10px 12px;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px;
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-specs dt{ font-size:.78rem; color:rgba(255,255,255,.62); font-weight:700; }
.page-ai-prompt-lernen #image-tools.ai-itools .tool-specs dd{ margin:0; font-weight:800; color:#fff; }
.page-ai-prompt-lernen #image-tools.ai-itools .features{ display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; }
.page-ai-prompt-lernen #image-tools.ai-itools .tag{
  padding:8px 12px; border-radius:999px; font-size:.85rem; font-weight:700;
  background: rgba(155,91,255,.16); border:1px solid rgba(155,91,255,.35); color:#d9c7ff;
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-actions{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; }
.page-ai-prompt-lernen #image-tools.ai-itools .btn{ height:40px; padding:0 16px; border-radius:999px; font-weight:800; }
.page-ai-prompt-lernen #image-tools.ai-itools .btn--primary{
  background: linear-gradient(180deg, #9b5bff, #7a40e6); border:1px solid rgba(255,255,255,.08); color:#fff;
}
.page-ai-prompt-lernen #image-tools.ai-itools .btn--outline{
  background: transparent; border:1px solid rgba(255,255,255,.25); color:#fff;
}

/* ===== Vergleich Table (تصویر) – هم‌استایل ویدئو ===== */
.page-ai-prompt-lernen #image-tools.ai-itools .itools__table{
  margin-top:34px;
  background: radial-gradient(120% 120% at -20% -20%, rgba(155,91,255,.08), transparent 60%), rgba(14,14,14,.92);
  border:1px solid rgba(255,255,255,.10); border-radius:18px; box-shadow:0 12px 36px rgba(0,0,0,.35);
  overflow:hidden;
}
.page-ai-prompt-lernen #image-tools.ai-itools .itools__table-title{
  margin:0; padding:16px 20px 8px; font-size:clamp(1.1rem,1.6vw,1.35rem); font-weight:900; letter-spacing:.3px;
}
.page-ai-prompt-lernen #image-tools.ai-itools .itools__table .table{ width:100%; border-collapse:separate; border-spacing:0; }
.page-ai-prompt-lernen #image-tools.ai-itools .itools__table thead th{
  position:sticky; top:0; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color:#fff; text-align:left; font-weight:800; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.10); z-index:1; white-space:nowrap;
}
.page-ai-prompt-lernen #image-tools.ai-itools .itools__table tbody tr:nth-child(odd){ background:rgba(255,255,255,.02); }
.page-ai-prompt-lernen #image-tools.ai-itools .itools__table td{ padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:middle; }
.page-ai-prompt-lernen #image-tools.ai-itools .itools__table tbody tr:hover{
  background: rgba(155,91,255,.10);
  box-shadow: inset 0 0 0 9999px rgba(155,91,255,.04);
}
.page-ai-prompt-lernen #image-tools.ai-itools .itools__table{ overflow-x:auto; }
.page-ai-prompt-lernen #image-tools.ai-itools .itools__table::-webkit-scrollbar{ height:10px; }
.page-ai-prompt-lernen #image-tools.ai-itools .itools__table::-webkit-scrollbar-thumb{
  background:#2a2a2a; border-radius:10px; border:2px solid #0f0f0f;
}

/* Responsive tweaks */
@media (max-width: 640px){
  .page-ai-prompt-lernen #image-tools.ai-itools .itools__filters{ grid-template-columns:1fr; gap:16px; padding:18px; }
  .page-ai-prompt-lernen #image-tools.ai-itools .itools__filter{ padding:14px; }
  .page-ai-prompt-lernen #image-tools.ai-itools .itools__table thead th,
  .page-ai-prompt-lernen #image-tools.ai-itools .itools__table td{ padding:12px 14px; }
}
/* ===== Brandable cards for IMAGE-TOOLS (scope) ===== */
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card{
  /* default accent */
  --accent: #9b5bff;
  --accent-2: #7a40e6;
  --chip-bg: color-mix(in srgb, var(--accent) 18%, transparent);
  --chip-border: color-mix(in srgb, var(--accent) 40%, transparent);
  border-color: color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,.08));
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card__header{
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent), rgba(255,255,255,.02));
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,.08));
}
.page-ai-prompt-lernen #image-tools.ai-itools .tag{
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: color-mix(in srgb, white 92%, var(--accent) 8%);
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card:hover,
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card:focus-within{
  border-color: color-mix(in srgb, var(--accent) 45%, rgba(255,255,255,.35));
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 14px 36px rgba(0,0,0,.45),
    0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* primary button uses brand gradient */
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card .btn--primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-color: color-mix(in srgb, var(--accent) 35%, rgba(255,255,255,.08));
}

/* ===== Brand palettes (match your video section) ===== */
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card[data-brand="google"]{
  --accent:#1a73e8; --accent-2:#34a853;
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card[data-brand="openai"]{
  --accent:#10a37f; --accent-2:#0b8064;
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card[data-brand="runway"]{
  --accent:#00ff87; --accent-2:#00e68a;
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card[data-brand="kling"]{
  --accent:#ff6b6b; --accent-2:#ff3b3b;
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card[data-brand="hailuo"]{
  --accent:#f59e0b; --accent-2:#ea7a00;
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card[data-brand="seedance"]{
  --accent:#ff3ea5; --accent-2:#ff1f7a;
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card[data-brand="midjourney"]{
  --accent:#7f7fff; --accent-2:#5e5ee6;
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card[data-brand="stability"]{
  --accent:#00bcd4; --accent-2:#009fb3;
}
.page-ai-prompt-lernen #image-tools.ai-itools .tool-card[data-brand="grok"]{
  --accent:#ffcc00; --accent-2:#ffb300;
}
/* ===== Prompt-Techniken: no horizontal scroll, clean wrap ===== */
.page-ai-prompt-lernen #techniques.ai-techniques .section_header{
  text-align:left; margin-bottom:20px;
}

.page-ai-prompt-lernen #techniques.ai-techniques .techniques-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* خودکار فیت شود */
  gap: 22px;
}

/* کارت تکنیک */
.page-ai-prompt-lernen #techniques.ai-techniques .technique-card{
  background: rgba(18,18,18,.9);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

/* عنوان و توضیح */
.page-ai-prompt-lernen #techniques.ai-techniques .technique-card__title{
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 900; margin: 0 0 6px;
}
.page-ai-prompt-lernen #techniques.ai-techniques .technique-card__desc{
  color: rgba(255,255,255,.82);
  margin: 0 0 12px;
}

/* نمونه کد: رپ کامل، بدون اسکرول افقی */
.page-ai-prompt-lernen #techniques.ai-techniques .example-box{
  margin: 0; padding: 10px 12px;
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  overflow: hidden;                /* اسکرول مخفی */
}
.page-ai-prompt-lernen #techniques.ai-techniques .example-box code{
  display:block;
  white-space: pre-wrap;           /* بشکن و رپ کن */
  word-break: break-word;          /* کلمات طولانی هم بشکنند */
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .92rem;
  line-height: 1.45;
  color: #e9e9f2;
}

/* ریسپانسیو کوچک‌تر */
@media (max-width: 560px){
  .page-ai-prompt-lernen #techniques.ai-techniques .techniques-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* ===== Prompt-Techniken Colorful Cards ===== */
.page-ai-prompt-lernen #techniques.ai-techniques .technique-card{
  border: none;
  border-radius: 18px;
  padding: 18px;
  color: #fff;
  background: linear-gradient(145deg, #0d0d12, #14141c);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.page-ai-prompt-lernen #techniques.ai-techniques .technique-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}

/* کارت ۱ – آبی روشن */
.page-ai-prompt-lernen #techniques.ai-techniques .technique-card:nth-child(1){
  background: linear-gradient(145deg, #1a2c68, #243b88);
}
/* کارت ۲ – سورمه‌ای + بنفش */
.page-ai-prompt-lernen #techniques.ai-techniques .technique-card:nth-child(2){
  background: linear-gradient(145deg, #2b185d, #3d227e);
}
/* کارت ۳ – آبی نفتی */
.page-ai-prompt-lernen #techniques.ai-techniques .technique-card:nth-child(3){
  background: linear-gradient(145deg, #0c3d4a, #165a70);
}
/* کارت ۴ – آبی/سورمه تیره */
.page-ai-prompt-lernen #techniques.ai-techniques .technique-card:nth-child(4){
  background: linear-gradient(145deg, #121e3a, #1c2950);
}

/* عنوان‌ها رو واضح‌تر کنیم */
.page-ai-prompt-lernen #techniques.ai-techniques .technique-card__title{
  color:#fff; text-shadow:0 0 6px rgba(0,0,0,.5);
}
/* ===== AI Tutorials Section ===== */
.page-ai-prompt-lernen #tutorials.ai-tutorials {
  background: radial-gradient(circle at top, rgba(90,0,140,.15), transparent 70%);
  padding: clamp(60px,6vw,100px) 0;
  position: relative;
  z-index: 1;
}

/* Grid تنظیم */
.page-ai-prompt-lernen #tutorials.ai-tutorials .tutorials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 28px;
  margin-top: 40px;
}

/* کارت‌های تکی */
.page-ai-prompt-lernen #tutorials.ai-tutorials .tutorial-card {
  background: rgba(20,20,30,0.75);
  border: 1px solid rgba(150,80,255,0.25);
  border-radius: 20px;
  padding: 24px;
  color: #fff;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 25px rgba(150,80,255,0.25), inset 0 0 12px rgba(255,255,255,0.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.page-ai-prompt-lernen #tutorials.ai-tutorials .tutorial-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 0 40px rgba(150,80,255,.45), inset 0 0 14px rgba(255,255,255,.08);
}

/* عنوان */
.page-ai-prompt-lernen #tutorials.ai-tutorials .tutorial-card__title {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: #fff;
  text-shadow: 0 0 8px rgba(180,100,255,.6);
}

/* متا (زمان، سطح) */
.page-ai-prompt-lernen #tutorials.ai-tutorials .tutorial-card__meta {
  font-size: 0.9rem;
  margin-bottom: 12px;
  display: flex;
  gap: 16px;
  color: #bfbfff;
}

/* توضیح */
.page-ai-prompt-lernen #tutorials.ai-tutorials .tutorial-card__desc {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 16px;
  color: #e0e0f0;
}

/* دکمه‌ها */
.page-ai-prompt-lernen #tutorials.ai-tutorials .btn {
  border-radius: 50px;
  padding: 10px 20px;
  font-weight: 600;
  transition: all .25s ease;
}
.page-ai-prompt-lernen #tutorials.ai-tutorials .btn--primary {
  background: linear-gradient(135deg,#9b5bff,#7c3aed);
  box-shadow: 0 0 12px rgba(155,91,255,.5);
}
.page-ai-prompt-lernen #tutorials.ai-tutorials .btn--primary:hover {
  background: linear-gradient(135deg,#b67dff,#9b5bff);
  box-shadow: 0 0 20px rgba(155,91,255,.7);
}
.page-ai-prompt-lernen #tutorials.ai-tutorials .btn--outline {
  border: 1px solid #9b5bff;
  color: #9b5bff;
}
.page-ai-prompt-lernen #tutorials.ai-tutorials .btn--outline:hover {
  background: rgba(155,91,255,0.1);
}

/* ================= PRACTICE LAB — AI look (scoped) ================= */
.page-ai-prompt-lernen #practice.ai-practice { color-scheme: dark; }

.page-ai-prompt-lernen #practice.ai-practice .section_header{
  text-align:center; margin-bottom:28px;
}
.page-ai-prompt-lernen #practice.ai-practice .section_title{
  font-weight:900; font-size:clamp(2rem,5vw,2.6rem);
}
.page-ai-prompt-lernen #practice.ai-practice .section_subtitle{
  max-width:72ch; margin-inline:auto;
}

/* Glass card container */
.page-ai-prompt-lernen #practice.ai-practice .practice-lab{
  margin-top:16px;
  padding:26px;
  border-radius:22px;
  background: linear-gradient(180deg, rgba(155,91,255,.10), rgba(20,20,28,.78));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 0 18px rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
}

/* Form grid */
.page-ai-prompt-lernen #practice.ai-practice .prompt-builder{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:20px 24px;
}

/* Labels */
.page-ai-prompt-lernen #practice.ai-practice .form-label{
  display:block; margin-bottom:8px;
  font-weight:800; letter-spacing:.2px;
}

/* Inputs + Selects (native) */
.page-ai-prompt-lernen #practice.ai-practice .form-control{
  width:100%; height:52px; padding:0 48px 0 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    rgba(24,24,32,.55);
  color:#fff; line-height:1.2;
  -webkit-appearance:none!important; -moz-appearance:none!important; appearance:none!important;
  background-image:none!important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
  transition: border-color .12s ease-out, box-shadow .12s ease-out;
}
.page-ai-prompt-lernen #practice.ai-practice .form-control:hover{
  border-color: rgba(155,91,255,.5);
}
.page-ai-prompt-lernen #practice.ai-practice .form-control:focus{
  outline:none;
  border-color: rgba(155,91,255,.85);
  box-shadow: 0 0 0 6px rgba(155,91,255,.18), inset 0 2px 6px rgba(0,0,0,.25);
}

/* Custom arrow for selects */
.page-ai-prompt-lernen #practice.ai-practice select.form-control{
  position:relative;
}
.page-ai-prompt-lernen #practice.ai-practice .form-group{ position:relative; }
.page-ai-prompt-lernen #practice.ai-practice .form-group:has(select.form-control)::after{
  content:""; position:absolute; right:16px; top:42px; /* align to input middle */
  width:10px; height:10px; pointer-events:none;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform: translateY(-50%) rotate(45deg);
  opacity:.9; transition: opacity .1s ease-out;
}
@supports not(selector(:has(*))) {
  /* fallback: arrow inside the select line height */
  .page-ai-prompt-lernen #practice.ai-practice .form-group::after{ top: 50%; }
}
.page-ai-prompt-lernen #practice.ai-practice .form-control:focus + ._arrow{ opacity:1; }

/* Kill any custom dropdown UIs (choices, nice-select, etc.) */
.page-ai-prompt-lernen #practice.ai-practice .form-group select + ul,
.page-ai-prompt-lernen #practice.ai-practice .form-group select + div,
.page-ai-prompt-lernen #practice.ai-practice .form-group .nice-select,
.page-ai-prompt-lernen #practice.ai-practice .form-group .choices,
.page-ai-prompt-lernen #practice.ai-practice .form-group .dropdown,
.page-ai-prompt-lernen #practice.ai-practice .form-group .menu,
.page-ai-prompt-lernen #practice.ai-practice .form-group .options{
  display:none!important; visibility:hidden!important; pointer-events:none!important;
}

/* Prompt output (copy area) */
.page-ai-prompt-lernen #practice.ai-practice .prompt-output{
  min-height:96px; padding:14px 16px;
  border-radius:14px;
  background:#0f0f14;
  border:1px solid rgba(255,255,255,.14);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color:#e8e8f6; line-height:1.55; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
  box-shadow: inset 0 0 0 1px rgba(155,91,255,.06);
}

/* Actions row */
.page-ai-prompt-lernen #practice.ai-practice .actions{
  grid-column:1 / -1; margin-top:4px;
  display:flex; flex-wrap:wrap; gap:12px;
}

/* Buttons */
.page-ai-prompt-lernen #practice.ai-practice .btn{
  height:44px; padding:0 18px; border-radius:999px;
  font-weight:800; letter-spacing:.2px;
}
.page-ai-prompt-lernen #practice.ai-practice .btn.btn--primary{
  background: linear-gradient(180deg, #9b5bff, #7a40e6);
  border:1px solid rgba(255,255,255,.10); color:#fff;
  box-shadow: 0 0 12px rgba(155,91,255,.45);
}
.page-ai-prompt-lernen #practice.ai-practice .btn.btn--primary:hover{
  filter:brightness(1.07);
}
.page-ai-prompt-lernen #practice.ai-practice .btn.btn--secondary{
  background: rgba(255,255,255,.06); color:#fff;
  border:1px solid rgba(255,255,255,.22);
}
.page-ai-prompt-lernen #practice.ai-practice .btn.btn--outline{
  background: transparent; color:#fff;
  border:1px solid rgba(255,255,255,.26);
}
.page-ai-prompt-lernen #practice.ai-practice .btn.btn--outline:hover{
  border-color: rgba(255,255,255,.45);
}

/* Responsive */
@media (max-width: 860px){
  .page-ai-prompt-lernen #practice.ai-practice .prompt-builder{
    grid-template-columns: 1fr;
  }
}
/* ===== Prompt output: pop animation & invalid input ===== */
.page-ai-prompt-lernen #practice.ai-practice .prompt-output.pop{
  animation: popIn .36s ease;
  box-shadow: 0 0 0 2px rgba(155,91,255,.25), inset 0 0 0 1px rgba(155,91,255,.12);
}
@keyframes popIn{
  0%{ transform:scale(.98); opacity:.7; }
  60%{ transform:scale(1.01); opacity:1; }
  100%{ transform:scale(1); }
}
.page-ai-prompt-lernen #practice.ai-practice .form-control.is-invalid{
  border-color:#ff6b6b !important;
  box-shadow:0 0 0 6px rgba(255,107,107,.16) !important;
}

/* ===== Toasts (global, lightweight, AI glass) ===== */
#toastHost{
  position: fixed;
  z-index: 99999;
  inset: auto 24px 24px auto;  /* bottom-right */
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast{
  pointer-events: auto;
  padding: 12px 16px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  background: rgba(20,20,30,.78);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 20px rgba(155,91,255,.25);
  animation: toastIn .25s ease-out both;
}
.toast--success{ border-color: rgba(46,204,113,.45); box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 24px rgba(46,204,113,.32); }
.toast--info{    border-color: rgba(155,91,255,.45);  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 24px rgba(155,91,255,.32); }
.toast--warn{    border-color: rgba(255,107,107,.5);  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 24px rgba(255,107,107,.34); }

@keyframes toastIn{
  from{ transform: translateY(8px); opacity: 0; }
  to  { transform: translateY(0);  opacity: 1; }
}
.toast--hide{
  animation: toastOut .35s ease-in forwards;
}
@keyframes toastOut{
  to{ transform: translateY(8px); opacity: 0; }
}