/* ===============================================
   آیولب — پلتفرم کاریابی تخصصی آزمایشگاه
   Design System — Minimal / Lab-inspired
   =============================================== */

:root {
  --teal-900: #0f3d3e;
  --teal-800: #115e59;
  --teal-700: #0f766e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-100: #ccfbf1;
  --teal-50:  #f0fdfa;
  --navy-900: #0f172a;
  --navy-800: #1e293b;
  --navy-600: #475569;
  --navy-500: #64748b;
  --navy-400: #94a3b8;
  --navy-200: #e2e8f0;
  --navy-100: #f1f5f9;
  --navy-50:  #f8fafc;
  --amber-500:#f59e0b;
  --amber-100:#fef3c7;
  --rose-500: #f43f5e;
  --rose-100: #ffe4e6;
  --violet-500:#8b5cf6;
  --violet-100:#ede9fe;
  --sky-500:  #0ea5e9;
  --sky-100:  #e0f2fe;
  --white: #ffffff;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 6px 24px -6px rgba(15, 61, 62, .12);
  --shadow-lg: 0 16px 48px -12px rgba(15, 61, 62, .18);
  --font: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  direction: rtl;
  color: var(--navy-800);
  background: var(--white);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--radius-sm);
  font-size: 14.5px; font-weight: 600; border: none;
  transition: all .2s ease; white-space: nowrap;
}
.btn-primary { background: var(--teal-600); color: #fff; }
.btn-primary:hover { background: var(--teal-700); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--teal-700); border: 1.5px solid var(--teal-600); }
.btn-outline:hover { background: var(--teal-50); }
.btn-ghost { background: transparent; color: var(--navy-600); }
.btn-ghost:hover { color: var(--teal-700); background: var(--teal-50); }
.btn-dark { background: var(--navy-900); color: #fff; }
.btn-dark:hover { background: var(--navy-800); }
.btn-amber { background: var(--amber-500); color: var(--navy-900); }
.btn-amber:hover { filter: brightness(1.06); }
.btn-lg { padding: 13px 30px; font-size: 16px; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-danger { background: var(--rose-100); color: var(--rose-500); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--navy-100);
}
.site-header .container { max-width: 1280px; }
.header-inner { display: flex; align-items: center; gap: 14px; height: 66px; min-width: 0; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; color: var(--navy-900); flex-shrink: 0; }
.logo .logo-mark { width: 32px; height: 32px; }
.logo span b { color: var(--teal-600); }
.main-nav { display: flex; gap: 2px; flex: 1; justify-content: center; min-width: 0; }
.main-nav .nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 13px; border-radius: 9px; font-size: 14px; font-weight: 500;
  color: var(--navy-600); transition: all .15s; white-space: nowrap;
  background: none; border: none; font-family: inherit;
}
.main-nav .nav-link:hover, .main-nav .nav-link.active,
.nav-group.active > .nav-link, .nav-group.open > .nav-link { color: var(--teal-700); background: var(--teal-50); }
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.header-actions .btn { font-size: 13px; padding: 9px 15px; }
.menu-toggle { display: none; background: none; border: none; padding: 6px; }
.menu-toggle svg { width: 26px; height: 26px; stroke: var(--navy-800); }

/* messages icon + dropdown */
.msg-wrap { position: relative; }
.icon-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy-50); border: 1px solid var(--navy-100);
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.icon-btn:hover { background: var(--teal-50); border-color: var(--teal-100); }
.icon-btn svg { width: 18px; height: 18px; stroke: var(--navy-600); }
.badge-count {
  position: absolute; top: -5px; left: -5px; min-width: 18px; height: 18px;
  background: var(--rose-500); color: #fff; border-radius: 99px;
  font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.msg-menu {
  position: absolute; top: calc(100% + 12px); left: 0; width: 320px;
  background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); display: none; overflow: hidden; z-index: 150;
}
.msg-menu.open { display: block; }
.msg-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 18px; font-weight: 700; font-size: 14px; color: var(--navy-900);
  border-bottom: 1px solid var(--navy-100); background: var(--navy-50);
}
.msg-head a { font-size: 12px; font-weight: 600; color: var(--teal-700); }
.msg-item { padding: 12px 18px; border-bottom: 1px solid var(--navy-100); }
.msg-item:last-child { border-bottom: none; }
.msg-item.unread { background: var(--teal-50); }
.msg-item b { display: block; font-size: 13px; color: var(--navy-900); }
.msg-item p { font-size: 12.5px; color: var(--navy-600); margin-top: 3px; line-height: 1.9; }
.msg-item span { font-size: 11px; color: var(--navy-400); }

/* user chip */
.user-chip { position: relative; }
.user-chip > button {
  display: flex; align-items: center; gap: 9px; background: var(--teal-50);
  border: 1px solid var(--teal-100); border-radius: 99px; padding: 5px 14px 5px 7px;
  font-weight: 600; font-size: 14px; color: var(--teal-800);
}
.user-chip .avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--teal-600);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
}
.user-menu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 200px;
  background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; display: none;
}
.user-menu.open { display: block; }
.user-menu a, .user-menu button {
  display: block; width: 100%; text-align: right; padding: 9px 13px;
  border-radius: 8px; font-size: 14px; color: var(--navy-800); background: none; border: none;
}
.user-menu a:hover, .user-menu button:hover { background: var(--navy-50); }
.user-menu .danger { color: var(--rose-500); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--teal-50) 0%, #fff 100%);
  padding: 64px 0 80px; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.hero h1 { font-size: 40px; font-weight: 800; line-height: 1.5; color: var(--navy-900); }
.hero h1 em { font-style: normal; color: var(--teal-600); position: relative; }
.hero .sub { margin-top: 18px; font-size: 17px; color: var(--navy-500); max-width: 480px; }
.hero-art { display: flex; justify-content: center; }
.hero-art svg { width: 100%; max-width: 420px; filter: drop-shadow(0 24px 40px rgba(13,148,136,.18)); }

/* --- centered minimal hero (karboom-style) --- */
.hero-center { text-align: center; padding: 76px 0 96px; position: relative; }
.hero-center .hero-inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 2; }
.hero-center h1 { font-size: 42px; }
.hero-center .sub { margin: 18px auto 0; max-width: 560px; }
.hero-center .search-box { margin: 36px auto 0; max-width: 760px; }
.hero-center .hero-tags { justify-content: center; }
.hero-bg-art {
  position: absolute; bottom: -10px; pointer-events: none; z-index: 1;
  opacity: .5; width: 270px;
}
.hero-bg-art.right { right: 1.5%; }
.hero-bg-art.left { left: 1.5%; transform: scaleX(-1); opacity: .35; width: 220px; }

/* journey strip (start flow) */
.journey {
  margin-top: 38px; display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
}
.journey .j-step {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--navy-200); border-radius: 99px;
  padding: 8px 18px 8px 20px; font-size: 13.5px; font-weight: 600; color: var(--navy-600);
}
.journey .j-num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--teal-100);
  color: var(--teal-800); font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.journey .j-arrow { color: var(--teal-500); font-size: 18px; font-weight: 800; }
.journey .btn { margin-inline-start: 8px; }

/* search box */
.search-box {
  margin-top: 34px; background: #fff; border: 1px solid var(--navy-200);
  border-radius: 16px; box-shadow: var(--shadow-md);
  display: flex; align-items: stretch; overflow: hidden; max-width: 640px;
}
.search-box .field { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.search-box .field + .field { border-right: 1px solid var(--navy-100); }
.search-box .field svg { width: 19px; height: 19px; stroke: var(--navy-400); flex-shrink: 0; }
.search-box input, .search-box select {
  border: none; outline: none; width: 100%; padding: 15px 0; font-size: 14.5px; background: transparent; color: var(--navy-800);
}
.search-box .btn { border-radius: 0; padding: 0 28px; font-size: 15px; }
.hero-tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--navy-500); }
.hero-tags a {
  background: #fff; border: 1px solid var(--navy-200); border-radius: 99px;
  padding: 4px 13px; font-size: 12.5px; color: var(--navy-600); transition: all .15s;
}
.hero-tags a:hover { border-color: var(--teal-500); color: var(--teal-700); }

/* stats strip */
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: -38px; position: relative; z-index: 2; }
.stat-card {
  background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 14px;
}
.stat-card .ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-card .ic svg { width: 22px; height: 22px; }
.stat-card b { font-size: 21px; color: var(--navy-900); display: block; line-height: 1.4; }
.stat-card span { font-size: 13px; color: var(--navy-500); }

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section.alt { background: var(--navy-50); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; gap: 16px; }
.section-head h2 { font-size: 27px; font-weight: 800; color: var(--navy-900); }
.section-head p { color: var(--navy-500); margin-top: 6px; font-size: 15px; }
.section-head .more { color: var(--teal-700); font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.section-head .more:hover { gap: 9px; }

/* categories */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-card {
  background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius);
  padding: 24px 20px; text-align: center; transition: all .2s;
}
.cat-card:hover { border-color: var(--teal-500); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cat-card .ic { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.cat-card .ic svg { width: 26px; height: 26px; }
.cat-card b { display: block; font-size: 15.5px; color: var(--navy-900); }
.cat-card span { font-size: 12.5px; color: var(--navy-500); }

/* job cards */
.job-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.job-card {
  background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius);
  padding: 20px 22px; transition: all .2s; position: relative; display: block;
}
.job-card:hover { border-color: var(--teal-500); box-shadow: var(--shadow-md); }
.job-card .top { display: flex; gap: 14px; align-items: flex-start; }
.job-logo {
  width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; color: #fff;
}
.job-card h3 { font-size: 16.5px; font-weight: 700; color: var(--navy-900); }
.job-card .org { font-size: 13.5px; color: var(--navy-500); margin-top: 2px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.chip {
  font-size: 12px; padding: 3px 11px; border-radius: 99px;
  background: var(--navy-100); color: var(--navy-600); font-weight: 500;
}
.chip.teal { background: var(--teal-100); color: var(--teal-800); }
.chip.amber { background: var(--amber-100); color: #92400e; }
.chip.rose { background: var(--rose-100); color: #be123c; }
.chip.violet { background: var(--violet-100); color: #6d28d9; }
.chip.sky { background: var(--sky-100); color: #0369a1; }
.job-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--navy-100); }
.job-card .salary { font-weight: 700; font-size: 14px; color: var(--teal-700); }
.job-card .time { font-size: 12.5px; color: var(--navy-400); }
.badge-urgent {
  position: absolute; top: 16px; left: 16px; background: var(--rose-100); color: var(--rose-500);
  font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px;
}
.badge-featured {
  position: absolute; top: 16px; left: 16px; background: var(--amber-100); color: #92400e;
  font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px;
}

/* lab cards */
.lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lab-card {
  background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius);
  padding: 26px 22px; text-align: center; transition: all .2s; display: block;
}
.lab-card:hover { border-color: var(--teal-500); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.lab-card .job-logo { margin: 0 auto 14px; width: 62px; height: 62px; font-size: 23px; border-radius: 16px; }
.lab-card h3 { font-size: 16px; color: var(--navy-900); }
.lab-card p { font-size: 13px; color: var(--navy-500); margin-top: 4px; }
.lab-card .open-jobs { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--teal-700); background: var(--teal-50); border-radius: 99px; padding: 4px 14px; }

/* how it works */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step-card { text-align: center; padding: 10px 18px; }
.step-card .num {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--teal-600); color: #fff; font-size: 22px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -6px rgba(13,148,136,.5);
}
.step-card h3 { font-size: 17px; color: var(--navy-900); margin-bottom: 8px; }
.step-card p { font-size: 14px; color: var(--navy-500); }

/* content cards (magazine/courses) */
.content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.content-card {
  background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius);
  overflow: hidden; transition: all .2s; display: block;
}
.content-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.content-card .thumb { height: 150px; display: flex; align-items: center; justify-content: center; }
.content-card .thumb svg { width: 56px; height: 56px; opacity: .9; }
.content-card .body { padding: 18px 20px 20px; }
.content-card .cat { font-size: 12px; font-weight: 700; color: var(--teal-700); }
.content-card h3 { font-size: 15.5px; color: var(--navy-900); margin-top: 6px; line-height: 1.7; }
.content-card .meta { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12.5px; color: var(--navy-400); }
.content-card .price { font-weight: 700; color: var(--teal-700); font-size: 14px; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--teal-800), var(--teal-600));
  border-radius: 22px; padding: 52px 48px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; left: -60px; top: -60px; width: 240px; height: 240px;
  border-radius: 50%; background: rgba(255,255,255,.07);
}
.cta-band h2 { font-size: 26px; font-weight: 800; }
.cta-band p { margin-top: 8px; opacity: .85; font-size: 15px; max-width: 520px; }
.cta-band .btn { background: #fff; color: var(--teal-800); flex-shrink: 0; }
.cta-band .btn:hover { transform: translateY(-2px); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: var(--navy-400); margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding: 56px 0 40px; }
.site-footer .logo { color: #fff; margin-bottom: 14px; }
.site-footer p { font-size: 13.5px; line-height: 2; }
.site-footer h4 { color: #fff; font-size: 15px; margin-bottom: 16px; }
.site-footer ul li { margin-bottom: 9px; }
.site-footer ul a { font-size: 13.5px; transition: color .15s; }
.site-footer ul a:hover { color: var(--teal-500); }
.footer-bottom { border-top: 1px solid var(--navy-800); padding: 18px 0; font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---------- Page header (inner pages) ---------- */
.page-head { background: linear-gradient(180deg, var(--teal-50), #fff); padding: 44px 0 36px; border-bottom: 1px solid var(--navy-100); }
.page-head h1 { font-size: 28px; font-weight: 800; color: var(--navy-900); }
.page-head p { color: var(--navy-500); margin-top: 8px; font-size: 15px; }
.breadcrumb { font-size: 12.5px; color: var(--navy-400); margin-bottom: 10px; }
.breadcrumb a:hover { color: var(--teal-700); }

/* ---------- Listing layout (jobs page) ---------- */
.listing-layout { display: grid; grid-template-columns: 285px 1fr; gap: 26px; padding: 40px 0 72px; align-items: start; }
.filters {
  background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius);
  padding: 22px; position: sticky; top: 88px;
}
.filters h3 { font-size: 16px; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; }
.filters h3 button { background: none; border: none; color: var(--rose-500); font-size: 12.5px; font-weight: 600; }
.filter-group { margin-bottom: 20px; }
.filter-group > label { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy-800); margin-bottom: 9px; }
.filter-group select, .filter-group input[type="text"] {
  width: 100%; padding: 9px 12px; border: 1px solid var(--navy-200); border-radius: var(--radius-sm);
  font-size: 13.5px; outline: none; background: #fff;
}
.filter-group select:focus, .filter-group input:focus { border-color: var(--teal-500); }
.check-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--navy-600); margin-bottom: 7px; cursor: pointer; }
.check-item input { accent-color: var(--teal-600); width: 16px; height: 16px; }
.listing-main .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.listing-main .toolbar .count { font-size: 14px; color: var(--navy-500); }
.listing-main .toolbar .count b { color: var(--teal-700); }
.listing-main .toolbar select { padding: 8px 12px; border: 1px solid var(--navy-200); border-radius: var(--radius-sm); font-size: 13px; }
.job-list { display: flex; flex-direction: column; gap: 14px; }
.empty-state { text-align: center; padding: 70px 20px; color: var(--navy-400); }
.empty-state svg { width: 64px; height: 64px; margin: 0 auto 18px; stroke: var(--navy-200); }
.empty-state b { display: block; font-size: 17px; color: var(--navy-600); margin-bottom: 6px; }

/* ---------- Job detail ---------- */
.detail-layout { display: grid; grid-template-columns: 1fr 330px; gap: 26px; padding: 40px 0 72px; align-items: start; }
.panel { background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius); padding: 26px; }
.panel + .panel { margin-top: 18px; }
.panel h2 { font-size: 18px; margin-bottom: 14px; color: var(--navy-900); }
.panel h3 { font-size: 15.5px; margin: 18px 0 8px; color: var(--navy-900); }
.panel p, .panel li { font-size: 14.5px; color: var(--navy-600); }
.panel ul.bullets li { position: relative; padding-right: 20px; margin-bottom: 7px; }
.panel ul.bullets li::before {
  content: ""; position: absolute; right: 0; top: 11px; width: 8px; height: 8px;
  border-radius: 2px; background: var(--teal-500); transform: rotate(45deg);
}
.side-card { background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius); padding: 24px; position: sticky; top: 88px; }
.side-card .row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--navy-100); font-size: 13.5px; }
.side-card .row:last-of-type { border: none; }
.side-card .row span { color: var(--navy-500); }
.side-card .row b { color: var(--navy-800); font-weight: 600; }
.match-ring { display: flex; align-items: center; gap: 14px; background: var(--teal-50); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 16px; }
.match-ring .ring { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: var(--teal-800); background: conic-gradient(var(--teal-500) calc(var(--p) * 1%), var(--teal-100) 0); position: relative; }
.match-ring .ring::before { content: ""; position: absolute; inset: 6px; background: var(--teal-50); border-radius: 50%; }
.match-ring .ring i { position: relative; font-style: normal; }
.match-ring small { font-size: 12.5px; color: var(--navy-500); display: block; }
.match-ring b { font-size: 13.5px; color: var(--navy-900); }

/* ---------- Auth pages ---------- */
.auth-wrap { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 1fr 1fr; }
.auth-art {
  background: linear-gradient(160deg, var(--teal-800), var(--teal-600));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px; color: #fff; text-align: center;
}
.auth-art svg { width: 250px; margin-bottom: 30px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.2)); }
.auth-art h2 { font-size: 24px; font-weight: 800; }
.auth-art p { margin-top: 10px; opacity: .85; max-width: 380px; font-size: 14.5px; }
.auth-form-wrap { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-form { width: 100%; max-width: 400px; }
.auth-form h1 { font-size: 24px; font-weight: 800; color: var(--navy-900); margin-bottom: 6px; }
.auth-form .sub { color: var(--navy-500); font-size: 14px; margin-bottom: 26px; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: var(--navy-800); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--navy-200); border-radius: var(--radius-sm);
  font-size: 14px; outline: none; transition: border .15s; background: #fff;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--teal-500); }
.form-field .hint { font-size: 12px; color: var(--navy-400); margin-top: 5px; }
.role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.role-switch button {
  padding: 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--navy-200);
  background: #fff; font-size: 14px; font-weight: 600; color: var(--navy-600); transition: all .15s;
}
.role-switch button.active { border-color: var(--teal-600); background: var(--teal-50); color: var(--teal-800); }
.auth-form .alt-link { text-align: center; margin-top: 20px; font-size: 13.5px; color: var(--navy-500); }
.auth-form .alt-link a { color: var(--teal-700); font-weight: 700; }
.demo-note {
  background: var(--amber-100); border: 1px solid #fde68a; color: #92400e;
  font-size: 12.5px; border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 20px; line-height: 1.9;
}

/* ---------- Dashboard ---------- */
.dash-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 32px 0 64px; align-items: start; }
.dash-side { background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius); padding: 18px; position: sticky; top: 88px; }
.dash-profile { text-align: center; padding: 14px 8px 18px; border-bottom: 1px solid var(--navy-100); margin-bottom: 12px; }
.dash-profile .avatar {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--teal-600); color: #fff; font-size: 26px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.dash-profile b { display: block; font-size: 16px; color: var(--navy-900); }
.dash-profile span { font-size: 12.5px; color: var(--navy-500); }
.otw-toggle {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--teal-50); border: 1px solid var(--teal-100); border-radius: 99px;
  padding: 5px 14px; font-size: 12.5px; font-weight: 700; color: var(--teal-800); cursor: pointer;
}
.otw-toggle .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-100); }
.otw-toggle.off { background: var(--navy-100); border-color: var(--navy-200); color: var(--navy-500); }
.otw-toggle.off .dot { background: var(--navy-400); box-shadow: none; }
.dash-nav a, .dash-nav button {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 13px;
  border-radius: var(--radius-sm); font-size: 14px; color: var(--navy-600);
  background: none; border: none; text-align: right; transition: all .15s;
}
.dash-nav a svg, .dash-nav button svg { width: 19px; height: 19px; stroke: currentColor; flex-shrink: 0; }
.dash-nav a:hover, .dash-nav a.active { background: var(--teal-50); color: var(--teal-800); font-weight: 600; }
.dash-nav .danger { color: var(--rose-500); }
.dash-nav .danger:hover { background: var(--rose-100); }

.dash-main > section { display: none; }
.dash-main > section.active { display: block; }
.dash-title { font-size: 21px; font-weight: 800; color: var(--navy-900); margin-bottom: 18px; }
.dash-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.dash-stat { background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius); padding: 18px 20px; }
.dash-stat b { font-size: 24px; color: var(--navy-900); display: block; }
.dash-stat span { font-size: 12.5px; color: var(--navy-500); }
.dash-stat .trend { font-size: 11.5px; color: var(--teal-600); font-weight: 700; }

.table-wrap { background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius); overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
table.data th { text-align: right; padding: 13px 18px; background: var(--navy-50); color: var(--navy-500); font-weight: 600; font-size: 12.5px; border-bottom: 1px solid var(--navy-100); }
table.data td { padding: 13px 18px; border-bottom: 1px solid var(--navy-100); color: var(--navy-800); }
table.data tr:last-child td { border-bottom: none; }
.status { font-size: 11.5px; font-weight: 700; padding: 3px 11px; border-radius: 99px; white-space: nowrap; }
.status.review { background: var(--sky-100); color: #0369a1; }
.status.interview { background: var(--violet-100); color: #6d28d9; }
.status.accepted { background: var(--teal-100); color: var(--teal-800); }
.status.rejected { background: var(--rose-100); color: #be123c; }
.status.active { background: var(--teal-100); color: var(--teal-800); }
.status.expired { background: var(--navy-100); color: var(--navy-500); }
.status.pending { background: var(--amber-100); color: #92400e; }

/* progress bar */
.progress-card { background: linear-gradient(135deg, var(--teal-700), var(--teal-500)); color: #fff; border-radius: var(--radius); padding: 22px 24px; margin-bottom: 22px; }
.progress-card .bar { height: 9px; background: rgba(255,255,255,.25); border-radius: 99px; margin: 14px 0 8px; overflow: hidden; }
.progress-card .bar i { display: block; height: 100%; background: #fff; border-radius: 99px; }
.progress-card small { opacity: .9; font-size: 12.5px; }

/* skill tags editor */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list .tag {
  background: var(--teal-50); border: 1px solid var(--teal-100); color: var(--teal-800);
  font-size: 13px; padding: 5px 14px; border-radius: 99px; display: flex; align-items: center; gap: 7px;
}
.tag-list .tag button { background: none; border: none; color: var(--rose-500); font-size: 15px; line-height: 1; }

/* form grid */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .full { grid-column: 1 / -1; }

/* ---------- Magazine / community ---------- */
.feed-layout { display: grid; grid-template-columns: 1fr 320px; gap: 26px; padding: 40px 0 72px; align-items: start; }
.post-card { background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 16px; }
.post-card .author { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.post-card .author .avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; }
.post-card .author b { font-size: 14.5px; color: var(--navy-900); display: block; }
.post-card .author span { font-size: 12px; color: var(--navy-400); }
.post-card .body p { font-size: 14.5px; color: var(--navy-600); }
.post-card .actions { display: flex; gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--navy-100); }
.post-card .actions button {
  background: none; border: none; display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--navy-500); transition: color .15s;
}
.post-card .actions button:hover { color: var(--teal-700); }
.post-card .actions button svg { width: 17px; height: 17px; stroke: currentColor; }
.post-card .actions button.liked { color: var(--rose-500); }

/* pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.price-card { background: #fff; border: 1.5px solid var(--navy-100); border-radius: var(--radius); padding: 30px 26px; text-align: center; position: relative; transition: all .2s; }
.price-card.featured { border-color: var(--teal-600); box-shadow: var(--shadow-lg); }
.price-card .plan-badge { position: absolute; top: -13px; right: 50%; transform: translateX(50%); background: var(--teal-600); color: #fff; font-size: 11.5px; font-weight: 700; padding: 4px 16px; border-radius: 99px; }
.price-card h3 { font-size: 17px; color: var(--navy-900); }
.price-card .price { font-size: 30px; font-weight: 800; color: var(--teal-700); margin: 14px 0 2px; }
.price-card .per { font-size: 12.5px; color: var(--navy-400); margin-bottom: 20px; }
.price-card ul { text-align: right; margin-bottom: 24px; }
.price-card ul li { font-size: 13.5px; color: var(--navy-600); padding: 7px 24px 7px 0; position: relative; }
.price-card ul li::before { content: "✓"; position: absolute; right: 0; color: var(--teal-600); font-weight: 800; }

/* toast */
.toast {
  position: fixed; bottom: 26px; right: 50%; transform: translateX(50%) translateY(80px);
  background: var(--navy-900); color: #fff; padding: 13px 26px; border-radius: 99px;
  font-size: 14px; box-shadow: var(--shadow-lg); opacity: 0; transition: all .3s; z-index: 999; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(50%) translateY(0); }

/* modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px);
}
.modal-backdrop.open { display: flex; }
.modal { background: #fff; border-radius: 18px; max-width: 460px; width: 100%; padding: 30px; position: relative; max-height: 88vh; overflow-y: auto; }
.modal .close { position: absolute; top: 16px; left: 16px; background: var(--navy-100); border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; color: var(--navy-600); }
.modal h3 { font-size: 19px; color: var(--navy-900); margin-bottom: 18px; }

/* ---------- Responsive ---------- */
/* منوی موبایل در بخش «بازبینی کلی» انتهای فایل تعریف شده است (breakpoint: 1080px) */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero .sub { margin-inline: auto; }
  .search-box { margin-inline: auto; }
  .hero-tags { justify-content: center; }
  .hero-art { display: none; }
  .hero-bg-art { display: none; }
  .hero-center h1 { font-size: 32px; }
  .cat-grid, .dash-cards { grid-template-columns: repeat(2, 1fr); }
  .lab-grid, .content-grid, .steps-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .listing-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .detail-layout, .feed-layout { grid-template-columns: 1fr; }
  .side-card { position: static; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .dash-layout { grid-template-columns: 1fr; }
  .dash-side { position: static; }
}
@media (max-width: 720px) {
  .header-actions .btn-outline { display: none; }
  .hero h1 { font-size: 29px; }
  .hero-center h1 { font-size: 27px; }
  .journey .j-arrow { display: none; }
  .journey { flex-direction: column; }
  .search-box { flex-direction: column; }
  .search-box .field + .field { border-right: none; border-top: 1px solid var(--navy-100); }
  .search-box .btn { padding: 14px; }
  .job-grid { grid-template-columns: 1fr; }
  .cat-grid, .lab-grid, .content-grid, .steps-grid, .pricing-grid, .dash-cards, .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-band { flex-direction: column; text-align: center; padding: 40px 26px; }
  .section { padding: 52px 0; }
}

/* ===============================================
   ==========  افزوده‌های نسخه ۲  ================
   نقشه، چندزبانه، فیلتر پیشرفته، آزمون، خودارزیابی،
   رتبه‌بندی، FAQ، هشدار شغلی، عمودی‌های برند
   =============================================== */

/* ---------- نوار عمودی‌های برند ---------- */
.vertical-bar { background: var(--teal-900); color: #94a3b8; font-size: 11.5px; }
.vertical-bar .container { max-width: 1280px; display: flex; align-items: center; gap: 2px; padding: 0 20px; height: 32px; overflow-x: auto; scrollbar-width: none; }
.vertical-bar .container::-webkit-scrollbar { display: none; }
.vb-label { color: #64748b; font-weight: 600; margin-inline-end: 10px; white-space: nowrap; letter-spacing: .2px; }
.vb-item { color: #cbd5e1; text-decoration: none; padding: 3px 10px; border-radius: 14px; white-space: nowrap; transition: .18s; }
.vb-item.active { background: var(--vc); color: #fff; font-weight: 700; }
.vb-item.soon { color: #64748b; }
.vb-item.soon::after { content: "·"; margin-inline-start: 5px; color: #475569; }
.vb-item.soon:last-child::after { content: ""; }
.vb-item.soon:hover { color: #cbd5e1; }

/* ---------- سوییچ زبان ---------- */
.lang-wrap { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 5px; padding: 0 10px; width: auto !important; }
.lang-flag { font-size: 15px; }
.lang-code { font-size: 11.5px; font-weight: 700; color: var(--navy-600); }
.lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; background: #fff; border: 1px solid var(--navy-200);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md); min-width: 150px; padding: 6px; display: none; z-index: 60; }
.lang-menu.open { display: block; }
.lang-menu button { width: 100%; text-align: start; background: none; border: none; font: inherit; font-size: 13.5px;
  padding: 9px 11px; border-radius: 7px; cursor: pointer; display: flex; gap: 8px; align-items: center; color: var(--navy-800); }
.lang-menu button:hover { background: var(--navy-100); }
.lang-menu button.active { background: var(--teal-50); color: var(--teal-700); font-weight: 700; }

/* ---------- نقشه ---------- */
.map-box { height: 520px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--navy-200); background: var(--navy-100); z-index: 1; }
.map-box.small { height: 220px; }
.map-box.picker { height: 400px; margin-top: 12px; }
.split-view { display: grid; grid-template-columns: 1fr 340px; gap: 18px; }
.map-side { max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-inline-end: 4px; }
.ms-item { display: flex; gap: 10px; text-align: start; background: #fff; border: 1px solid var(--navy-200); border-radius: var(--radius-sm);
  padding: 12px; cursor: pointer; font: inherit; transition: .16s; }
.ms-item:hover { border-color: var(--teal-500); box-shadow: var(--shadow-sm); transform: translateX(-2px); }
.ms-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.ms-body b { display: block; font-size: 13.5px; color: var(--navy-800); }
.ms-body > span { font-size: 12px; color: var(--navy-500); }
.ms-meta { font-size: 11.5px; color: var(--navy-500); margin-top: 5px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.ms-meta i { color: var(--navy-300); font-style: normal; }
.ms-empty { padding: 24px; text-align: center; color: var(--navy-400); font-size: 13px; }
.map-fallback { padding: 40px; text-align: center; color: var(--navy-500); font-size: 14px; }
.map-fallback b { display: block; font-size: 16px; color: var(--navy-800); margin-bottom: 8px; }
.map-note { margin-top: 16px; font-size: 12.5px; color: var(--navy-500); background: var(--navy-50);
  border: 1px dashed var(--navy-200); border-radius: var(--radius-sm); padding: 12px 16px; line-height: 2; }
.map-note code { background: var(--navy-100); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.map-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.coord { font-size: 12.5px; color: var(--navy-500); margin-inline-start: auto; }
.addr { font-size: 12.5px; color: var(--navy-500); margin-top: 10px; line-height: 1.9; }

/* پین سفارشی */
.aio-pin { width: 34px; height: 34px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0,0,0,.3); border: 2.5px solid #fff; }
.aio-pin span { transform: rotate(45deg); color: #fff; font-weight: 800; font-size: 13px; font-family: var(--font); }
.map-pop { font-family: var(--font); min-width: 190px; text-align: right; direction: rtl; }
.map-pop b { display: block; font-size: 14px; color: var(--navy-900); margin-bottom: 3px; }
.mp-type { font-size: 12px; color: var(--navy-500); }
.mp-row { display: flex; gap: 8px; font-size: 12px; color: var(--navy-600); margin-top: 6px; flex-wrap: wrap; }
.mp-star { color: var(--amber-500); font-weight: 700; }
.mp-btn { display: block; margin-top: 10px; background: var(--teal-600); color: #fff !important; text-align: center;
  padding: 7px; border-radius: 7px; text-decoration: none; font-size: 12.5px; font-weight: 700; }

/* تیزر نقشه در صفحه اصلی */
.map-teaser { display: block; position: relative; height: 220px; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(135deg, #ecfeff, #f0fdfa 60%, #e0f2fe); border: 1px solid var(--navy-200); text-decoration: none; }
.mt-pins { position: absolute; inset: 0; }
.mt-pin { position: absolute; width: 30px; height: 30px; border-radius: 50%;
  color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center;
  border: 2.5px solid #fff; box-shadow: 0 3px 8px rgba(15,61,62,.25); }
.mt-cta { position: absolute; inset-block-end: 0; inset-inline: 0; background: linear-gradient(transparent, rgba(15,61,62,.9));
  padding: 26px 22px 18px; color: #fff; }
.mt-cta b { display: block; font-size: 17px; }
.mt-cta span { font-size: 13px; opacity: .9; }

/* ---------- تب نمای فهرست/نقشه ---------- */
.view-tabs { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.vt { background: #fff; border: 1px solid var(--navy-200); border-radius: 20px; padding: 8px 16px; font: inherit;
  font-size: 13.5px; cursor: pointer; color: var(--navy-600); transition: .16s; }
.vt.active { background: var(--teal-600); border-color: var(--teal-600); color: #fff; font-weight: 700; }
.vt-count { font-size: 13px; color: var(--navy-500); margin-inline-start: 8px; }
.vt-add { margin-inline-start: auto; }

.lab-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.lab-filters input, .lab-filters select { padding: 10px 14px; border: 1px solid var(--navy-200); border-radius: var(--radius-sm);
  font: inherit; font-size: 13.5px; outline: none; background: #fff; color: var(--navy-800); }
.lab-filters input { flex: 1; min-width: 180px; }
.lab-filters input:focus, .lab-filters select:focus { border-color: var(--teal-500); }
.check-item.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* ---------- ستاره و امتیاز ---------- */
.stars { display: inline-flex; gap: 1px; direction: ltr; }
.stars .st { color: var(--navy-200); font-size: 13px; }
.stars .st.on { color: var(--amber-500); }
.stars .st.half { background: linear-gradient(to left, var(--amber-500) 50%, var(--navy-200) 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars.sm .st { font-size: 11px; }
.stars.lg .st { font-size: 20px; }

.lc-rate { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--navy-500); margin-top: 6px; }
.lc-rate b { color: var(--navy-800); }
.lc-salary { font-size: 12.5px; color: var(--navy-600); margin-top: 4px; }
.lc-salary b { color: var(--teal-700); }

/* ---------- فیلترهای سریع و پنل پیشرفته ---------- */
.quick-filters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.qf { background: #fff; border: 1px solid var(--navy-200); border-radius: 20px; padding: 7px 14px; font: inherit;
  font-size: 12.5px; color: var(--navy-600); text-decoration: none; cursor: pointer; transition: .16s; }
.qf:hover { border-color: var(--teal-500); color: var(--teal-700); background: var(--teal-50); }

.adv-panel { background: #fff; border: 1px solid var(--navy-200); border-radius: var(--radius); padding: 20px;
  margin-top: 16px; box-shadow: var(--shadow-md); text-align: start; }
.adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.af label { display: block; font-size: 12px; color: var(--navy-500); margin-bottom: 5px; font-weight: 600; }
.af select { width: 100%; padding: 9px 11px; border: 1px solid var(--navy-200); border-radius: 8px; font: inherit; font-size: 13px; outline: none; }
.adv-foot { display: flex; gap: 16px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--navy-100); flex-wrap: wrap; }
.adv-foot .btn { margin-inline-start: auto; }

/* ---------- چیپ فیلترهای فعال ---------- */
.active-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.a-chip { background: var(--teal-50); border: 1px solid var(--teal-100); color: var(--teal-700); border-radius: 16px;
  padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.a-chip:hover { background: var(--teal-100); }
.a-chip.clear { background: var(--rose-100); border-color: #fecdd3; color: #be123c; }

.filter-group.acc summary { font-size: 13px; font-weight: 700; color: var(--navy-800); cursor: pointer; padding: 4px 0; list-style: none; }
.filter-group.acc summary::-webkit-details-marker { display: none; }
.filter-group.acc summary::after { content: "▾"; float: left; color: var(--navy-400); }
.filter-group.acc[open] summary::after { content: "▴"; }
.filter-group .sep { height: 1px; background: var(--navy-100); margin: 8px 0; }
.scroll-box { max-height: 190px; overflow-y: auto; }
.tb-right { display: flex; gap: 8px; align-items: center; }
.chip.remote { background: var(--sky-100); color: #0369a1; }

/* ---------- بلوک هشدار شغلی ---------- */
.alert-band { background: linear-gradient(120deg, var(--teal-900), var(--teal-700)); border-radius: var(--radius);
  padding: 34px 32px; color: #fff; display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: center; }
.ab-text { display: flex; gap: 16px; }
.ab-ic { font-size: 34px; }
.alert-band h2 { font-size: 22px; margin-bottom: 8px; }
.alert-band p { font-size: 14px; opacity: .92; line-height: 2; }
.ab-form { display: flex; flex-direction: column; gap: 10px; background: rgba(255,255,255,.1); padding: 18px; border-radius: var(--radius-sm); }
.ab-form select { padding: 11px 14px; border: none; border-radius: 8px; font: inherit; font-size: 13.5px; outline: none; }

.alert-item { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--navy-100); flex-wrap: wrap; }
.alert-item:last-child { border-bottom: none; }
.ai-ic { font-size: 20px; }
.ai-body { flex: 1; min-width: 200px; }
.ai-body b { font-size: 14px; color: var(--navy-800); }
.ai-meta { display: flex; gap: 12px; font-size: 12px; color: var(--navy-500); margin-top: 4px; flex-wrap: wrap; }
.ai-match { color: var(--teal-700); font-weight: 700; }
.empty-inline { padding: 22px; text-align: center; color: var(--navy-400); font-size: 13.5px; background: var(--navy-50); border-radius: var(--radius-sm); }
.channels { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- چک‌لیست بعد از ثبت‌نام ---------- */
.onboard-card { background: linear-gradient(120deg, #ecfeff, #f0fdfa); border: 1px solid var(--teal-100);
  border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.onboard-card.all-done { background: linear-gradient(120deg, #d1fae5, #f0fdfa); }
.ob-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ob-head b { font-size: 16px; color: var(--navy-900); display: block; }
.ob-head span { font-size: 12.5px; color: var(--navy-500); }
.ob-ring { width: 54px; height: 54px; border-radius: 50%; background: var(--teal-600); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.ob-steps { display: flex; flex-direction: column; gap: 9px; }
.ob-step { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: var(--radius-sm); padding: 13px 15px; }
.ob-step.done { opacity: .72; }
.ob-num { width: 27px; height: 27px; border-radius: 50%; background: var(--navy-100); color: var(--navy-600);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.ob-step.done .ob-num { background: var(--teal-600); color: #fff; }
.ob-body { flex: 1; }
.ob-body b { font-size: 14px; color: var(--navy-800); }
.ob-body p { font-size: 12.5px; color: var(--navy-500); margin-top: 2px; line-height: 1.8; }
.ob-tag { font-size: 12px; color: var(--teal-700); font-weight: 700; }
.dash-sub { font-size: 13.5px; color: var(--navy-500); line-height: 2; margin-bottom: 18px; }

/* ---------- آزمون ---------- */
.exam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.exam-card { background: #fff; border: 1px solid var(--navy-200); border-radius: var(--radius); padding: 20px;
  display: flex; flex-direction: column; gap: 12px; border-top: 4px solid var(--ec); }
.ex-top { display: flex; gap: 12px; align-items: flex-start; }
.ex-badge { width: 46px; height: 46px; border-radius: 12px; background: var(--ebg); display: flex;
  align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.ex-badge.big { width: 64px; height: 64px; font-size: 30px; background: var(--teal-50); }
.ex-top h3 { font-size: 15px; color: var(--navy-900); line-height: 1.6; }
.ex-by { font-size: 12px; color: var(--navy-500); margin-top: 3px; }
.ex-passed { font-size: 11.5px; background: #d1fae5; color: #047857; padding: 3px 9px; border-radius: 12px; font-weight: 700; align-self: flex-start; }
.ex-desc { font-size: 13px; color: var(--navy-600); line-height: 2; flex: 1; }
.ex-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.ex-meta span { font-size: 11.5px; background: var(--navy-100); color: var(--navy-600); padding: 4px 9px; border-radius: 12px; }
.ex-level { background: var(--ebg) !important; color: var(--ec) !important; font-weight: 700; }
.ex-stats { display: flex; gap: 14px; font-size: 12px; color: var(--navy-500); }

.exam-wrap, .test-wrap, .assess-wrap { max-width: 860px; margin: 34px auto 60px; padding: 0 24px; }
.assess-wrap { max-width: 960px; }
.exam-panel { background: #fff; border: 1px solid var(--navy-200); border-radius: var(--radius); padding: 26px; margin-bottom: 18px; }
.ep-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.ep-head h1 { font-size: 21px; color: var(--navy-900); }
.ep-desc { font-size: 14px; color: var(--navy-600); line-height: 2.1; }
.ep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0; }
.ep-grid > div { background: var(--navy-50); border-radius: var(--radius-sm); padding: 14px; text-align: center; }
.ep-grid b { display: block; font-size: 19px; color: var(--teal-700); }
.ep-grid span { font-size: 11.5px; color: var(--navy-500); }
.ep-rules { background: var(--amber-100); border-radius: var(--radius-sm); padding: 16px 20px; margin-bottom: 20px; }
.ep-rules b { font-size: 14px; color: #92400e; }
.ep-rules ul, .ep-rules-list { margin: 8px 20px 0; font-size: 13px; color: var(--navy-700); line-height: 2.2; }
.ep-rules-list { margin: 12px 20px 20px; color: var(--navy-600); }

.exam-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.eb-left { flex: 1; }
.eb-q { font-size: 13px; color: var(--navy-500); }
.eb-progress { height: 6px; background: var(--navy-100); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.eb-progress i { display: block; height: 100%; background: var(--teal-600); transition: .3s; }
.eb-timer { font-size: 20px; font-weight: 800; color: var(--teal-700); background: var(--teal-50);
  padding: 8px 16px; border-radius: var(--radius-sm); direction: ltr; }
.eb-timer.warn { color: #be123c; background: var(--rose-100); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.q-nav { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 18px; }
.qn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--navy-200); background: #fff;
  font: inherit; font-size: 12px; cursor: pointer; color: var(--navy-500); }
.qn.done { background: var(--teal-50); border-color: var(--teal-500); color: var(--teal-700); }
.qn.cur { background: var(--teal-600); border-color: var(--teal-600); color: #fff; font-weight: 700; }
.q-box h2 { font-size: 17px; color: var(--navy-900); line-height: 2; margin-bottom: 18px; }
.q-options { display: flex; flex-direction: column; gap: 10px; }
.q-opt { display: flex; gap: 11px; align-items: center; border: 1.5px solid var(--navy-200); border-radius: var(--radius-sm);
  padding: 14px 16px; cursor: pointer; font-size: 14px; color: var(--navy-700); transition: .16s; }
.q-opt:hover { border-color: var(--teal-500); background: var(--teal-50); }
.q-opt.sel { border-color: var(--teal-600); background: var(--teal-50); font-weight: 600; }
.q-opt input { display: none; }
.q-key { width: 24px; height: 24px; border-radius: 50%; background: var(--navy-100); color: var(--navy-600);
  display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.q-opt.sel .q-key { background: var(--teal-600); color: #fff; }
.q-actions { display: flex; gap: 10px; margin-top: 22px; justify-content: flex-end; flex-wrap: wrap; }

.rh { text-align: center; padding: 20px 0 10px; }
.rh-icon { font-size: 54px; }
.rh h1 { font-size: 26px; margin: 10px 0; color: var(--navy-900); }
.rh p { font-size: 15px; color: var(--navy-600); }
.rh.pass h1 { color: var(--teal-700); }
.rh-note { font-size: 13px !important; color: var(--navy-500) !important; margin-top: 14px; line-height: 2.1; }
.cert-strip { background: linear-gradient(120deg, var(--teal-50), #ecfeff); border: 1.5px dashed var(--teal-500);
  border-radius: var(--radius); padding: 18px; margin: 20px 0; }
.cert-strip b { display: block; font-size: 16px; color: var(--teal-800); }
.cert-strip span { font-size: 13px; color: var(--navy-600); display: block; margin-top: 5px; }
.cert-strip small { font-size: 11.5px; color: var(--navy-400); display: block; margin-top: 7px; }
.res-breakdown h2 { font-size: 17px; margin: 26px 0 14px; }
.rb-item { border-inline-start: 3px solid var(--navy-200); padding: 12px 14px; margin-bottom: 10px; background: var(--navy-50); border-radius: var(--radius-sm); }
.rb-item.ok { border-color: #10b981; }
.rb-item.no { border-color: var(--rose-500); }
.rb-q { font-size: 13.5px; color: var(--navy-800); line-height: 1.9; }
.rb-q span { display: inline-flex; width: 20px; height: 20px; background: var(--navy-200); border-radius: 50%;
  align-items: center; justify-content: center; font-size: 11px; margin-left: 6px; }
.rb-a { display: flex; gap: 14px; font-size: 12.5px; margin-top: 6px; flex-wrap: wrap; }
.rb-yours { color: var(--navy-500); }
.rb-right { color: #047857; font-weight: 700; }
.res-actions { display: flex; gap: 10px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cert-card { background: linear-gradient(150deg, #fff, var(--teal-50)); border: 1px solid var(--teal-100);
  border-radius: var(--radius); padding: 18px; text-align: center; }
.cc-badge { font-size: 30px; }
.cert-card b { display: block; font-size: 13.5px; color: var(--navy-900); margin: 8px 0; line-height: 1.7; }
.cc-score { display: block; font-size: 13px; color: var(--teal-700); font-weight: 700; }
.cc-code, .cc-date { display: block; font-size: 11px; color: var(--navy-400); margin-top: 3px; }

/* سازنده آزمون */
.q-count { font-size: 12px; background: var(--navy-100); color: var(--navy-600); padding: 3px 10px; border-radius: 12px; font-weight: 400; }
.eb-q { border: 1px solid var(--navy-200); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 12px; background: var(--navy-50); }
.ebq-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ebq-text { width: 100%; padding: 11px 14px; border: 1px solid var(--navy-200); border-radius: 8px; font: inherit; font-size: 14px; outline: none; }
.ebq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ebq-opt { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--navy-200); border-radius: 8px; padding: 8px 11px; }
.ebq-opt input[type=text] { flex: 1; border: none; outline: none; font: inherit; font-size: 13px; }
.ebq-hint { display: block; font-size: 11.5px; color: var(--navy-400); margin-top: 8px; }

/* ---------- MBTI ---------- */
.mbti-others { background: var(--navy-50); border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 18px; font-size: 13px; }
.mbti-others b { display: block; margin-bottom: 8px; color: var(--navy-700); }
.mbti-others span { display: inline-block; background: #fff; border: 1px solid var(--navy-200); border-radius: 14px;
  padding: 4px 11px; font-size: 12px; color: var(--navy-500); margin: 0 0 6px 6px; }
.mbti-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mbti-opt { background: #fff; border: 1.5px solid var(--navy-200); border-radius: var(--radius); padding: 22px 18px;
  font: inherit; font-size: 14.5px; color: var(--navy-700); cursor: pointer; line-height: 1.9; transition: .16s; text-align: start; }
.mbti-opt:hover { border-color: var(--teal-500); background: var(--teal-50); transform: translateY(-2px); }
.mbti-opt.sel { border-color: var(--teal-600); background: var(--teal-50); font-weight: 600; }
.prev-note { margin-top: 14px; font-size: 13px; color: var(--navy-500); text-align: center; }
.mbti-hero { text-align: center; padding: 14px 0 26px; }
.mh-type { font-size: 46px; font-weight: 800; color: var(--teal-600); letter-spacing: 4px; direction: ltr; }
.mbti-hero h1 { font-size: 24px; margin: 6px 0; }
.mbti-hero p { font-size: 14.5px; color: var(--navy-500); }
.mbti-bars { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 26px; }
.mb-row { display: grid; grid-template-columns: 110px 1fr 110px; gap: 12px; align-items: center; font-size: 12.5px; color: var(--navy-600); }
.mb-l { text-align: start; } .mb-r { text-align: end; }
.mb-track { position: relative; height: 26px; background: var(--navy-100); border-radius: 13px; overflow: hidden; }
.mb-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal-500), var(--teal-600)); }
.mb-track b { position: absolute; top: 4px; font-size: 12px; color: var(--navy-700); }
.mbti-fit h2 { font-size: 17px; margin-bottom: 12px; }
.fit-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.fit-chips span { background: var(--teal-50); color: var(--teal-700); border-radius: 14px; padding: 5px 12px; font-size: 12.5px; }
.fit-jobs h3 { font-size: 15px; margin: 20px 0 12px; }
.mbti-privacy { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--navy-100); }
.mbti-mini { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.mm-type { font-size: 26px; font-weight: 800; color: var(--teal-600); background: var(--teal-50);
  padding: 12px 16px; border-radius: var(--radius-sm); direction: ltr; }
.mbti-mini p { font-size: 13px; color: var(--navy-500); margin: 3px 0 7px; }

/* ---------- خودارزیابی ---------- */
.assess-tests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.at-card { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--navy-200);
  border-radius: var(--radius); padding: 16px; text-decoration: none; transition: .16s; }
.at-card:hover { border-color: var(--teal-500); box-shadow: var(--shadow-sm); }
.at-card.soon { opacity: .65; }
.at-ic { font-size: 26px; }
.at-card b { display: block; font-size: 14px; color: var(--navy-900); }
.at-card small { font-size: 11.5px; color: var(--navy-500); }
.at-go { margin-inline-start: auto; font-size: 12px; color: var(--teal-700); font-weight: 700; white-space: nowrap; }
.level-legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
.ll { font-size: 11.5px; background: var(--navy-50); border: 1px solid var(--navy-200); border-radius: 14px; padding: 5px 11px; color: var(--navy-600); }
.ll b { color: var(--teal-700); }
.assess-group h2 { display: flex; align-items: center; gap: 10px; }
.ag-ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.ag-ic svg { width: 18px; height: 18px; }
.assess-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--navy-100); }
.assess-row:last-child { border-bottom: none; }
.ar-label { font-size: 13.5px; color: var(--navy-700); line-height: 1.8; }
.ar-scale { display: flex; gap: 5px; }
.ar-dot { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--navy-200); background: #fff;
  font: inherit; font-size: 12px; color: var(--navy-400); cursor: pointer; transition: .14s; }
.ar-dot:hover { border-color: var(--teal-500); }
.ar-dot.on { background: var(--gc, var(--teal-600)); border-color: var(--gc, var(--teal-600)); color: #fff; font-weight: 700; }
.assess-submit { display: flex; gap: 14px; align-items: center; justify-content: flex-end; margin: 20px 0 40px; flex-wrap: wrap; }
#progress-note { font-size: 13px; color: var(--navy-500); }
.assess-hero { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.ah-score { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.ring { width: 120px; height: 120px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--navy-100); stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--teal-600); stroke-width: 10; stroke-linecap: round; transition: 1s; }
.ah-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ah-num b { font-size: 24px; color: var(--navy-900); }
.ah-num span { font-size: 11.5px; color: var(--navy-500); }
.ah-body h1 { font-size: 22px; margin-bottom: 6px; }
.ah-tags { margin-top: 12px; font-size: 13px; color: var(--navy-600); line-height: 2.1; }
.skill-bars { display: flex; flex-direction: column; gap: 11px; }
.sb-row { display: grid; grid-template-columns: 180px 1fr 46px; gap: 12px; align-items: center; }
.sb-name { font-size: 13px; color: var(--navy-600); }
.sb-track { height: 10px; background: var(--navy-100); border-radius: 5px; overflow: hidden; }
.sb-track i { display: block; height: 100%; border-radius: 5px; transition: .6s; }
.sb-val { font-size: 12.5px; color: var(--navy-700); text-align: end; }
.gap-list { display: flex; flex-direction: column; gap: 11px; }
.gap-item { display: flex; gap: 12px; align-items: flex-start; background: var(--navy-50); border-radius: var(--radius-sm); padding: 14px 16px; }
.gap-ic { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.gap-item b { font-size: 13.5px; color: var(--navy-800); }
.gap-item p { font-size: 12.5px; color: var(--navy-500); margin-top: 3px; line-height: 1.9; }
.next-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ns { background: var(--teal-50); border-radius: var(--radius-sm); padding: 15px 17px; text-decoration: none; transition: .16s; }
.ns:hover { background: var(--teal-100); }
.ns b { display: block; font-size: 14px; color: var(--teal-800); }
.ns span { font-size: 12.5px; color: var(--navy-600); }
.assess-mini { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.assess-mini .skill-bars { flex: 1; min-width: 260px; }
.am-score b { font-size: 28px; color: var(--teal-700); display: block; }
.am-score span { font-size: 12px; color: var(--navy-500); }

/* ---------- رتبه‌بندی ---------- */
.rank-method { background: var(--navy-50); border: 1px dashed var(--navy-200); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 18px; }
.rank-method b { font-size: 14px; color: var(--navy-800); }
.rank-method p { font-size: 12.5px; color: var(--navy-500); line-height: 2.1; margin-top: 6px; }
.rank-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--navy-200); border-radius: var(--radius); }
.rank-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 1000px; }
.rank-table th { background: var(--navy-50); color: var(--navy-500); font-size: 12px; font-weight: 600;
  padding: 13px 10px; text-align: center; border-bottom: 1px solid var(--navy-200); white-space: nowrap; }
.rank-table td { padding: 13px 10px; text-align: center; border-bottom: 1px solid var(--navy-100); color: var(--navy-600); }
.rank-table tr:last-child td { border-bottom: none; }
.rank-table tr:hover td { background: var(--teal-50); }
.rank-table .rk { font-size: 17px; width: 56px; }
.rank-table .rl { text-align: start; min-width: 250px; }
.rank-table .rl a { display: flex; gap: 9px; align-items: center; text-decoration: none; color: var(--navy-800); }
.rank-table .rl b { font-size: 13.5px; }
.job-logo.sm { width: 30px; height: 30px; font-size: 13px; border-radius: 8px; }
.low-data { font-style: normal; font-size: 10.5px; background: var(--amber-100); color: #92400e; padding: 2px 7px; border-radius: 10px; }
.tiny-chip { font-size: 11px; background: var(--navy-100); color: var(--navy-600); padding: 3px 9px; border-radius: 11px; white-space: nowrap; }
.rank-table .score b { display: block; font-size: 15px; color: var(--teal-700); }
.rank-table td.hl { background: var(--teal-50); font-weight: 700; color: var(--teal-800); }
.rank-note { margin-top: 14px; font-size: 13px; color: var(--navy-500); text-align: center; }

.rating-block { display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: center; margin-bottom: 18px; }
.rb-total { text-align: center; background: var(--navy-50); border-radius: var(--radius); padding: 18px; }
.rb-total > b { font-size: 38px; color: var(--navy-900); display: block; }
.rb-total > span { display: block; font-size: 12px; color: var(--navy-500); margin-top: 5px; }
.rb-rank { color: var(--teal-700) !important; font-weight: 600; }
.rb-bars { display: flex; flex-direction: column; gap: 9px; }
.rbar { display: grid; grid-template-columns: 130px 1fr 34px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--navy-600); }
.rbar-track { height: 8px; background: var(--navy-100); border-radius: 4px; overflow: hidden; }
.rbar-track i { display: block; height: 100%; background: var(--amber-500); border-radius: 4px; }
.review { border-bottom: 1px solid var(--navy-100); padding: 16px 0; }
.review:last-child { border-bottom: none; }
.rv-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.rv-head b { font-size: 13.5px; color: var(--navy-800); display: block; }
.rv-head span { font-size: 11.5px; color: var(--navy-400); }
.review p { font-size: 13.5px; color: var(--navy-600); line-height: 2.1; }
.rv-tags { display: flex; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.rv-tags span { font-size: 12px; border-radius: 12px; padding: 4px 11px; }
.rv-tags .pro { background: #d1fae5; color: #047857; }
.rv-tags .con { background: var(--rose-100); color: #be123c; }

/* کارت میانگین حقوق */
.salary-card { background: linear-gradient(140deg, var(--teal-800), var(--teal-600)); color: #fff; border: none; }
.sc-label { font-size: 12.5px; opacity: .85; }
.sc-val { margin: 6px 0; }
.sc-val b { font-size: 32px; }
.sc-val span { font-size: 12.5px; opacity: .85; }
.sc-cmp { font-size: 12.5px; }
.sc-cmp .up { color: #a7f3d0; } .sc-cmp .down { color: #fecdd3; }
.salary-card small { display: block; font-size: 11px; opacity: .75; margin-top: 8px; }
.salary-panel .salary-preview { background: var(--navy-50); border-radius: var(--radius-sm); padding: 13px 16px;
  font-size: 13.5px; color: var(--navy-600); margin-top: 6px; }
.salary-preview.on { background: var(--teal-50); }
.salary-preview i { font-style: normal; display: block; margin-top: 4px; font-size: 12.5px; }
.salary-preview .up { color: #047857; } .salary-preview .down { color: #be123c; }
.salary-note { font-size: 12px; color: var(--navy-500); line-height: 2; margin-top: 12px;
  background: var(--amber-100); border-radius: var(--radius-sm); padding: 12px 15px; }
.chips-pick { display: flex; gap: 7px; flex-wrap: wrap; }
.cp { background: #fff; border: 1px solid var(--navy-200); border-radius: 16px; padding: 6px 13px;
  font: inherit; font-size: 12.5px; color: var(--navy-600); cursor: pointer; transition: .14s; }
.cp.on { background: var(--teal-600); border-color: var(--teal-600); color: #fff; font-weight: 600; }

/* ---------- مودال ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: center;
  justify-content: center; z-index: 200; padding: 20px; }
.modal { background: #fff; border-radius: var(--radius); padding: 26px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; }
.modal h2 { font-size: 19px; margin-bottom: 18px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.rate-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; font-size: 13px; color: var(--navy-600); }
.rate-stars { display: flex; direction: ltr; }
.rate-stars button { background: none; border: none; font-size: 22px; color: var(--navy-200); cursor: pointer; padding: 0 2px; }
.rate-stars button.on { color: var(--amber-500); }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: 260px 1fr; gap: 26px; margin: 34px auto 60px; }
.faq-side input { width: 100%; padding: 11px 14px; border: 1px solid var(--navy-200); border-radius: var(--radius-sm);
  font: inherit; font-size: 13.5px; outline: none; margin-bottom: 14px; }
.faq-side nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 90px; }
.faq-side nav a { display: flex; justify-content: space-between; padding: 10px 13px; border-radius: 8px;
  text-decoration: none; color: var(--navy-600); font-size: 13.5px; }
.faq-side nav a:hover { background: var(--teal-50); color: var(--teal-700); }
.faq-side nav a span { font-size: 11.5px; color: var(--navy-400); }
.faq-help { background: var(--navy-50); border-radius: var(--radius); padding: 18px; margin-top: 18px; }
.faq-help b { font-size: 13.5px; }
.faq-help p { font-size: 12.5px; color: var(--navy-500); line-height: 1.9; margin: 6px 0 12px; }
.faq-block { margin-bottom: 30px; }
.faq-block h2 { font-size: 19px; margin-bottom: 14px; color: var(--navy-900); }
.faq-item { background: #fff; border: 1px solid var(--navy-200); border-radius: var(--radius-sm); margin-bottom: 9px; }
.faq-item summary { padding: 15px 18px; font-size: 14.5px; font-weight: 600; color: var(--navy-800);
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--teal-600); font-size: 19px; flex-shrink: 0; }
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { border-bottom: 1px solid var(--navy-100); }
.fa-body { padding: 15px 18px; font-size: 13.5px; color: var(--navy-600); line-height: 2.2; }
.faq-home { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }

/* ---------- نقش‌ها در ثبت‌نام ---------- */
.role-switch.three { display: grid; grid-template-columns: repeat(3, 1fr); }
.role-hint { font-size: 12.5px; color: var(--navy-500); line-height: 1.9; background: var(--navy-50);
  border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 16px; }

/* ---------- فوتر: اپلیکیشن و نمادها ---------- */
.footer-trust { grid-column: span 1; }
.app-badges, .trust-badges { display: flex; flex-direction: column; gap: 8px; }
.trust-badges { margin-top: 12px; }
.app-badge, .enamad { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); padding: 9px 12px; text-decoration: none; transition: .16s; }
.app-badge:hover, .enamad:hover { background: rgba(255,255,255,.12); }
.app-badge span, .en-mark { font-size: 19px; }
.en-mark { width: 30px; height: 30px; border-radius: 7px; background: #fff; color: var(--teal-800);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.app-badge b, .enamad b { display: block; font-size: 12.5px; color: #e2e8f0; }
.app-badge small, .enamad small { font-size: 10.5px; color: #94a3b8; }

/* ---------- ریسپانسیو افزوده‌ها ---------- */
@media (max-width: 1100px) {
  .split-view { grid-template-columns: 1fr; }
  .map-side { max-height: 300px; }
  .adv-grid { grid-template-columns: repeat(3, 1fr); }
  .exam-grid, .assess-tests { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(3, 1fr); }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-side nav { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .alert-band { grid-template-columns: 1fr; }
  .rating-block { grid-template-columns: 1fr; }
  .ep-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-home { grid-template-columns: 1fr; }
  .next-steps { grid-template-columns: 1fr; }
  .assess-row { grid-template-columns: 1fr; }
  .sb-row { grid-template-columns: 120px 1fr 40px; }
}
@media (max-width: 720px) {
  .adv-grid, .exam-grid, .assess-tests, .cert-grid, .mbti-opts, .ebq-opts { grid-template-columns: 1fr; }
  .mb-row { grid-template-columns: 80px 1fr 80px; font-size: 11px; }
  .vertical-bar .container { gap: 4px; padding: 6px 16px; }
  .vb-item { padding: 3px 8px; font-size: 11.5px; }
  .map-box { height: 380px; }
  .view-tabs .vt-add { margin-inline-start: 0; width: 100%; }
  .rate-row { grid-template-columns: 1fr; }
}

/* ===============================================
   ==========  بازبینی کلی (Revision)  ===========
   منوی گروه‌بندی‌شده، کارت لیستی آگهی، نظم اندازه‌ها
   =============================================== */

/* ---------- جلوگیری از اسکرول افقی در کل سایت ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
.container { width: 100%; }
/* فقط جایی که واقعاً لازم است اجازه کوچک‌شدن flex-item را می‌دهیم
   (min-width سراسری باعث بریده‌شدن متن‌ها می‌شود) */
.header-inner, .main-nav, .listing-main, .dash-main, .ms-body, .ai-body, .ob-body, .nm-txt { min-width: 0; }

/* ---------- منوی کشویی هدر ---------- */
.nav-group { position: relative; }
.nav-group > .nav-link { cursor: pointer; }
.ng-caret { width: 13px; height: 13px; transition: transform .2s; opacity: .6; }
.nav-group.open .ng-caret { transform: rotate(180deg); }
.nav-menu {
  /* left فیزیکی (نه inset-inline-start): در RTL ترکیب right:50% با translateX(-50%) منو را یک نیم‌عرض از زیر دکمه دور می‌کرد
     و مسیر موس از دکمه تا منو از فضای خالی می‌گذشت و منو بسته می‌شد */
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px);
  background: #fff; border: 1px solid var(--navy-200); border-radius: 13px; box-shadow: var(--shadow-lg);
  padding: 8px; min-width: 300px; z-index: 90;
  opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s, visibility .16s;
}
.nav-group:hover .nav-menu, .nav-group.open .nav-menu, .nav-group:focus-within .nav-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* پل نامرئی روی فاصله‌ی بین دکمه و منو تا هاور قطع نشود */
.nav-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-group.open > .nav-link .ng-caret, .nav-group:hover > .nav-link .ng-caret { transform: rotate(180deg); opacity: 1; }
.nav-menu a { display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px; border-radius: 9px; transition: .14s; }
.nav-menu a:hover { background: var(--teal-50); }
.nav-menu a.on { background: var(--teal-50); }
.nm-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--navy-50); color: var(--teal-700);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nm-ic svg { width: 17px; height: 17px; }
.nav-menu a:hover .nm-ic, .nav-menu a.on .nm-ic { background: var(--teal-100); }
.nm-txt b { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy-900); line-height: 1.6; }
.nm-txt small { display: block; font-size: 11.5px; color: var(--navy-400); line-height: 1.6; }

/* ---------- کارت آگهی در نمای فهرستی ---------- */
.job-list .job-card {
  display: grid; grid-template-columns: 1fr 200px; gap: 4px 22px;
  align-items: center; padding: 20px 24px;
}
.job-list .job-card > .top { grid-column: 1; grid-row: 1; }
.job-list .job-card > .job-meta { grid-column: 1; grid-row: 2; margin-top: 11px; }
.job-list .job-card > .foot {
  grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 7px; margin: 0; padding: 4px 22px 4px 0; height: 100%;
  border-top: none; border-inline-start: 1px dashed var(--navy-200);
}
.job-list .job-card > .foot .salary { font-size: 15px; }
.job-list .job-card > .foot::after {
  content: "مشاهده آگهی ←"; font-size: 12px; color: var(--teal-600); font-weight: 600; opacity: 0; transition: .18s;
}
.job-list .job-card:hover > .foot::after { opacity: 1; }
.job-list .job-card h3 { font-size: 17px; }

/* ---------- ساید‌بار فیلترها ---------- */
.filters { align-self: start; }
.filters h3 { display: flex; justify-content: space-between; align-items: center; }
.filter-group { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--navy-100); }
.filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-group > label { display: block; font-size: 12.5px; font-weight: 700; color: var(--navy-800); margin-bottom: 8px; }
.filter-group select, .filter-group > input[type=text] {
  width: 100%; padding: 9px 12px; border: 1px solid var(--navy-200); border-radius: 8px;
  font: inherit; font-size: 13.5px; outline: none; background: #fff; color: var(--navy-800);
}
.filter-group select:focus, .filter-group > input[type=text]:focus { border-color: var(--teal-500); }
.filter-group.acc { padding-bottom: 0; }
.filter-group.acc summary { padding: 9px 10px; margin: 0 -10px; border-radius: 8px; font-size: 13px; }
.filter-group.acc summary:hover { background: var(--navy-50); }
.filter-group.acc[open] summary { margin-bottom: 8px; }
.filter-group.acc > div { padding-bottom: 12px; }
.filters .check-item { margin-bottom: 8px; line-height: 1.6; }
.filters .check-item:last-child { margin-bottom: 0; }
.scroll-box { max-height: 200px; overflow-y: auto; padding-inline-end: 6px; }
.scroll-box::-webkit-scrollbar { width: 5px; }
.scroll-box::-webkit-scrollbar-thumb { background: var(--navy-200); border-radius: 3px; }

/* ---------- ریتم عمودی و اندازه‌های یکدست ---------- */
.page-head h1 { font-size: 27px; line-height: 1.6; }
.page-head p { font-size: 14.5px; }
.section-head h2 { font-size: 22px; }
.section-head p { font-size: 14px; }
.dash-title { font-size: 22px; }
.panel h2 { font-size: 17px; }
.exam-panel h1 { font-size: 22px; }
.toast { z-index: 300; }

/* ---------- منوی موبایل ---------- */
@media (max-width: 1080px) {
  .main-nav {
    position: absolute; top: 100%; inset-inline: 0; background: #fff; flex-direction: column;
    padding: 10px; border-bottom: 1px solid var(--navy-200); box-shadow: var(--shadow-md);
    display: none; gap: 3px; max-height: 78vh; overflow-y: auto;
  }
  .main-nav.open { display: flex; }
  .main-nav .nav-link { width: 100%; justify-content: space-between; font-size: 15px; padding: 12px 14px; }
  .menu-toggle { display: block; }
  .nav-menu {
    position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none;
    border: none; border-inline-start: 2px solid var(--teal-100); border-radius: 0;
    min-width: 0; margin: 2px 14px 8px; padding: 0; display: none;
  }
  .nav-group.open .nav-menu { display: block; transform: none; }
  .nav-group:hover .nav-menu { opacity: 1; }
  .nav-group:not(.open):hover .nav-menu, .nav-group:not(.open):focus-within .nav-menu { display: none; }
  .header-inner { height: 60px; }
}
@media (max-width: 900px) {
  .job-list .job-card { grid-template-columns: 1fr; }
  .job-list .job-card > .foot {
    grid-column: 1; grid-row: 3; flex-direction: row; align-items: center; justify-content: space-between;
    width: 100%; padding: 13px 0 0; margin-top: 14px;
    border-inline-start: none; border-top: 1px dashed var(--navy-200);
  }
  .job-list .job-card > .foot::after { display: none; }
}
@media (max-width: 860px) {
  .hdr-login { display: none; }
  .header-actions .btn { font-size: 12.5px; padding: 8px 12px; }
}
@media (max-width: 620px) {
  /* دکمه‌های ورود از نوار بالا به داخل منو منتقل می‌شوند (حذف نمی‌شوند) */
  .header-actions .btn { display: none; }
  .header-actions { gap: 5px; }
  .logo { font-size: 17px; }
  .logo .logo-mark { width: 28px; height: 28px; }
  .icon-btn { width: 34px; height: 34px; }
  .lang-btn { padding: 0 9px; }
  .page-head h1 { font-size: 21px; }
  .section-head h2 { font-size: 19px; }
  .hero-center h1 { font-size: 25px; }
  .container { padding: 0 14px; }
}

/* دکمه‌های ورود داخل منوی موبایل */
.nav-cta { display: none; }
@media (max-width: 1080px) {
  .nav-cta { display: flex; flex-direction: column; gap: 8px; padding: 12px 6px 4px; margin-top: 8px; border-top: 1px solid var(--navy-100); }
  .nav-cta .btn { display: inline-flex !important; }
}
/* نوار نشانه‌ها و ایموجی‌ها */
.ab-ic { line-height: 1; display: inline-flex; align-items: center; }
.icon-btn { overflow: visible; }

/* ---------- جلوگیری از فشار min-content روی ستون‌های گرید در عرض کم ---------- */
body { overflow-wrap: break-word; }
.detail-layout > *, .listing-layout > *, .dash-layout > *, .faq-layout > *,
.split-view > *, .auth-wrap > *, .feed-layout > * { min-width: 0; }
.panel, .side-card { min-width: 0; }
@media (max-width: 620px) {
  .panel, .side-card, .exam-panel { padding: 18px 16px; }
  .page-head { padding: 22px 0 20px; }
}

/* ---------- گریدهای فرم با تعداد ستون مشخص (به‌جای style این‌لاین، تا ریسپانسیو بماند) ---------- */
.form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .form-grid.cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .form-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .form-grid.cols-4, .form-grid.cols-2 { grid-template-columns: 1fr; } }

/* ---------- جعبه جستجوی صفحه اصلی: چهار فیلد بدون بریدگی متن ---------- */
.hero-center .hero-inner { max-width: 940px; }
.hero-center .search-box { max-width: 940px; }
.search-box .field { min-width: 0; }
.search-box .field:first-child { flex: 1.9; }
.search-box .field:not(:first-child) { flex: 1.05; }
.search-box .field select { text-overflow: ellipsis; }
.search-box .btn { flex-shrink: 0; }

/* ---------- فیلترهای سریع: دو ردیف مرتب ---------- */
.quick-filters { max-width: 880px; margin-inline: auto; row-gap: 9px; }
.qf { padding: 7px 13px; font-size: 12.5px; line-height: 1.5; }

/* ---------- طرح لبه هیرو داخل هیرو بماند ---------- */
.hero-center { overflow: hidden; }
.hero-bg-art { opacity: .38; }
.hero-bg-art.left { opacity: .26; }

/* ---------- نشان «فوری/ویژه» در نمای فهرستی کنار عنوان ---------- */
.job-list .job-card > .badge-urgent,
.job-list .job-card > .badge-featured {
  position: static; grid-column: 1; grid-row: 1; align-self: start;
  justify-self: start; margin-bottom: 0; order: -1;
}
.job-list .job-card {
  grid-template-areas: "badge  side" "top side" "meta side";
  grid-template-rows: auto auto auto; row-gap: 0;
}
.job-list .job-card > .badge-urgent, .job-list .job-card > .badge-featured { grid-area: badge; margin-bottom: 9px; }
.job-list .job-card > .top { grid-area: top; }
.job-list .job-card > .job-meta { grid-area: meta; }
.job-list .job-card > .foot { grid-area: side; }

/* ---------- دکمه زبان: کد زبان به‌جای ایموجی پرچم (ایموجی پرچم روی ویندوز رندر نمی‌شود) ---------- */
.lang-btn { width: auto !important; gap: 6px; padding: 0 11px; }
.lang-btn svg { width: 16px; height: 16px; stroke: var(--navy-500); }
.lang-code { font-size: 12px; font-weight: 700; color: var(--navy-600); letter-spacing: .3px; }
.lm-code { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 20px;
  background: var(--navy-100); border-radius: 5px; font-size: 10.5px; font-weight: 800; color: var(--navy-600); }
.lang-menu button.active .lm-code { background: var(--teal-100); color: var(--teal-800); }
@media (max-width: 620px) { .lang-btn { padding: 0 8px; } .lang-btn svg { display: none; } }

/* ---------- نوار فیلتر صفحات نقشه و رتبه‌بندی: چیدمان شبکه‌ای مرتب ---------- */
.lab-filters {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  background: #fff; border: 1px solid var(--navy-200); border-radius: var(--radius);
  padding: 14px; margin-bottom: 18px; align-items: center;
}
.lab-filters input, .lab-filters select { width: 100%; min-width: 0; }
.lab-filters .check-item.inline { justify-content: flex-start; margin: 0; white-space: nowrap; }
.lab-filters .btn { width: 100%; }
@media (max-width: 1100px) { .lab-filters { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .lab-filters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .lab-filters { grid-template-columns: 1fr; } }

/* ---------- کلاس‌های کمکی که در مارک‌آپ استفاده شده‌اند ---------- */
.steps-grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .steps-grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .steps-grid.four { grid-template-columns: 1fr; } }
.steps-grid.four .step-card a { display: inline-block; margin-top: 10px; font-size: 12.5px;
  color: var(--teal-700); font-weight: 600; }
.steps-grid.four .step-card a:hover { text-decoration: underline; }

.assess-intro p { font-size: 14px; color: var(--navy-600); line-height: 2.1; }
.faq-main { min-width: 0; }
.res-hero { margin-bottom: 8px; }
.rh.fail h1 { color: var(--navy-700); }
.rh.fail .btn { margin-top: 16px; }
.hdr-emp { white-space: nowrap; }
.enamad.samandehi .en-mark { background: var(--teal-100); color: var(--teal-800); }

/* ---------- فیلترها روی موبایل: جمع‌شونده تا نتایج بالا بیایند ---------- */
.filters .f-toggle { display: none; }
@media (max-width: 980px) {
  .filters { padding: 0; border-radius: var(--radius); }
  .filters h3 {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0; padding: 15px 18px; cursor: pointer; user-select: none;
  }
  .filters .f-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
    color: var(--teal-700); font-weight: 600; margin-inline-start: auto; }
  .filters .f-toggle::after { content: "▾"; transition: transform .2s; }
  .filters.open .f-toggle::after { transform: rotate(180deg); }
  .filters .f-body { display: none; padding: 0 18px 18px; }
  .filters.open .f-body { display: block; }
  .filters h3 > button { order: 3; }
}

/* ---------- کارت آگهی در موبایل: تک‌ستونی (باید بعد از تعریف grid-template-areas بیاید) ---------- */
@media (max-width: 900px) {
  .job-list .job-card {
    grid-template-columns: 1fr;
    grid-template-areas: "badge" "top" "meta" "side";
    grid-template-rows: auto auto auto auto;
  }
  .job-list .job-card > .foot {
    flex-direction: row; align-items: center; justify-content: space-between;
    width: 100%; padding: 13px 0 0; margin-top: 14px; height: auto;
    border-inline-start: none; border-top: 1px dashed var(--navy-200);
  }
  .job-list .job-card > .foot::after { display: none; }
  .job-list .job-card h3 { font-size: 15.5px; }
}

/* ---------- هایلایت فیلد ناقص در فرم‌ها ---------- */
.field-error { border-color: var(--rose-500) !important; box-shadow: 0 0 0 3px rgba(244,63,94,.14); animation: fieldShake .3s; }
@keyframes fieldShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
select:disabled { background: var(--navy-50); color: var(--navy-400); cursor: not-allowed; }

/* ===============================================
   لایه ۴ — خدمات، تعرفه، گزارش‌ها و تبلیغات
   (افزوده‌ی مدل درآمدی؛ هیچ استایل قبلی بازنویسی نشده)
   =============================================== */

/* ---------- تب انتخاب نوع مشتری ---------- */
.payer-tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.payer-tab {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 99px;
  border: 1.5px solid var(--navy-200); background: #fff; color: var(--navy-600);
  font-size: 14px; font-weight: 700; transition: all .18s;
}
.payer-tab svg { width: 18px; height: 18px; }
.payer-tab:hover { border-color: var(--teal-500); color: var(--teal-700); }
.payer-tab.on { background: var(--teal-600); border-color: var(--teal-600); color: #fff; box-shadow: var(--shadow-md); }
.payer-tab .cnt { font-size: 12px; opacity: .75; }

/* ---------- گروه خدمات ---------- */
.svc-group { margin-bottom: 44px; scroll-margin-top: 90px; }
.svc-group-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.svc-group-head .gh-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
.svc-group-head .gh-ic svg { width: 24px; height: 24px; }
.svc-group-head h2 { font-size: 20px; color: var(--navy-900); margin-bottom: 3px; }
.svc-group-head p { font-size: 13.5px; color: var(--navy-500); line-height: 1.75; }

/* ---------- کارت خدمت ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; align-items: stretch; }
.svc-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1.5px solid var(--navy-100); border-radius: var(--radius);
  padding: 22px 20px; transition: all .2s;
}
.svc-card:hover { border-color: var(--teal-500); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.svc-card.featured { border-color: var(--teal-600); box-shadow: var(--shadow-md); }
.svc-badge {
  position: absolute; top: -12px; inset-inline-start: 18px; background: var(--teal-600); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 13px; border-radius: 99px; white-space: nowrap;
}
.svc-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }
.svc-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.svc-ic svg { width: 21px; height: 21px; }
.svc-ttl { flex: 1; min-width: 0; }
.svc-ttl h3 { font-size: 15.5px; color: var(--navy-900); line-height: 1.55; margin-bottom: 2px; }
.svc-stream { font-size: 11.5px; color: var(--navy-400); }
.svc-code {
  font-size: 11px; font-weight: 700; color: var(--navy-400); background: var(--navy-50);
  border: 1px solid var(--navy-100); border-radius: 7px; padding: 2px 7px; flex-shrink: 0;
  font-family: "Segoe UI", Tahoma, sans-serif; letter-spacing: .3px;
}
.svc-code.sm { font-size: 10.5px; }
.svc-desc { font-size: 13px; color: var(--navy-600); line-height: 1.85; margin-bottom: 14px; }
.svc-feats { margin-bottom: 16px; }
.svc-feats li { font-size: 12.8px; color: var(--navy-600); padding: 5px 21px 5px 0; position: relative; line-height: 1.7; }
.svc-feats li::before { content: "✓"; position: absolute; right: 0; top: 5px; color: var(--teal-600); font-weight: 800; }
.svc-price { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--navy-200); }
.svc-price b { font-size: 21px; font-weight: 800; color: var(--teal-700); display: block; line-height: 1.5; }
.svc-price.free b { color: var(--teal-600); }
.svc-unit { font-size: 12px; color: var(--navy-400); }
.svc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 12px; }
.chip.sm { font-size: 11px; padding: 3px 9px; background: var(--navy-50); color: var(--navy-500); border-radius: 7px; }
.chip.sm.warn { background: var(--amber-100); color: #92400e; }
.svc-note { font-size: 11.5px; color: var(--amber-500); margin-bottom: 12px; line-height: 1.7; }
.free-txt { color: var(--teal-600); }

/* ---------- جدول تعرفه ---------- */
.price-table-wrap { overflow-x: auto; border: 1.5px solid var(--navy-100); border-radius: var(--radius); background: #fff; }
.price-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.price-table th, .price-table td { padding: 13px 14px; text-align: right; font-size: 13px; border-bottom: 1px solid var(--navy-100); vertical-align: middle; }
.price-table thead th { background: var(--navy-50); color: var(--navy-600); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:hover { background: var(--teal-50); }
.price-table .muted { color: var(--navy-400); font-size: 12px; line-height: 1.7; }
.price-table .ta-c { text-align: center; white-space: nowrap; }
.price-table td b { color: var(--navy-900); }

/* ---------- بنر تبلیغاتی (تأمین‌کننده) ---------- */
.ad-slot {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin: 22px 0;
  border: 1.5px dashed var(--violet-500); border-radius: var(--radius);
  background: linear-gradient(135deg, var(--violet-100), #fff);
}
.ad-slot .ad-tag {
  font-size: 10.5px; font-weight: 700; color: var(--violet-500); border: 1px solid var(--violet-500);
  border-radius: 6px; padding: 2px 7px; flex-shrink: 0;
}
.ad-slot .ad-body { flex: 1; min-width: 0; }
.ad-slot .ad-body b { font-size: 14.5px; color: var(--navy-900); display: block; margin-bottom: 3px; }
.ad-slot .ad-body span { font-size: 12.5px; color: var(--navy-500); }

/* ---------- کارت گزارش بازار کار ---------- */
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.report-card { background: #fff; border: 1.5px solid var(--navy-100); border-radius: var(--radius); padding: 24px 22px; transition: all .2s; }
.report-card:hover { border-color: var(--amber-500); box-shadow: var(--shadow-md); }
.report-card .rc-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--amber-100); color: var(--amber-500); display: grid; place-items: center; margin-bottom: 14px; }
.report-card .rc-ic svg { width: 23px; height: 23px; }
.report-card h3 { font-size: 16px; color: var(--navy-900); margin-bottom: 8px; }
.report-card p { font-size: 13px; color: var(--navy-600); line-height: 1.85; margin-bottom: 14px; }

/* ---------- سفارش‌های من (داشبورد) ---------- */
.order-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1.5px solid var(--navy-100); border-radius: var(--radius-sm); margin-bottom: 10px; background: #fff;
}
.order-item .oi-code { font-size: 11px; font-weight: 700; color: var(--teal-700); background: var(--teal-50); border-radius: 6px; padding: 3px 8px; flex-shrink: 0; }
.order-item .oi-body { flex: 1; min-width: 0; }
.order-item .oi-body b { font-size: 14px; color: var(--navy-900); display: block; }
.order-item .oi-body small { font-size: 12px; color: var(--navy-400); }
.order-item .oi-price { font-size: 14px; font-weight: 800; color: var(--teal-700); white-space: nowrap; }

/* ---------- جعبه مقایسه اشتراک ---------- */
.plan-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }

/* ---------- stats-strip بدون کشش منفی (خارج از هیرو) ---------- */
.stats-strip.flat { margin-top: 0; }

/* ---------- عنوان فرعی داخل بخش ---------- */
.sub-head {
  font-size: 16px; color: var(--navy-900); margin-bottom: 14px; padding-inline-start: 12px;
  border-inline-start: 3px solid var(--teal-600); line-height: 1.6;
}

/* ---------- انتخاب نقش: چهار گزینه ---------- */
.role-switch.four { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 620px) { .role-switch.four { grid-template-columns: repeat(2, 1fr); } }

/* ---------- ریسپانسیو لایه ۴ ---------- */
@media (max-width: 720px) {
  .svc-grid { grid-template-columns: 1fr; }
  .payer-tab { padding: 9px 15px; font-size: 13px; }
  .svc-group-head { gap: 11px; }
  .svc-group-head h2 { font-size: 17.5px; }
  .ad-slot { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ===============================================
   لایه ۵ — آکادمی آیولب (کاتالوگ دوره، جزئیات، یادگیری، مسیر تخصصی)
   الگوی بصری الهام‌گرفته از پلتفرم‌های آموزش آنلاین؛ هیچ استایل قبلی بازنویسی نشده
   =============================================== */

/* ---------- هیرو آکادمی ---------- */
.academy-hero { background: linear-gradient(135deg, var(--teal-900) 0%, var(--teal-700) 60%, #0e7490 100%); color: #fff; padding: 56px 0 64px; position: relative; overflow: hidden; }
.academy-hero::after { content: ""; position: absolute; inset-inline-end: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: rgba(255,255,255,.06); }
.academy-hero .ah-kicker { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border-radius: 99px; padding: 5px 14px; font-size: 12.5px; font-weight: 700; margin-bottom: 16px; }
.academy-hero h1 { font-size: 36px; font-weight: 800; line-height: 1.5; max-width: 720px; }
.academy-hero p.lead { font-size: 15.5px; opacity: .9; max-width: 600px; margin-top: 12px; line-height: 2; }
.academy-search { margin-top: 26px; display: flex; max-width: 640px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
.academy-search input { flex: 1; border: none; outline: none; padding: 15px 18px; font: inherit; font-size: 14.5px; color: var(--navy-800); min-width: 0; }
.academy-search .btn { border-radius: 0; padding: 0 26px; }
.academy-trend { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 12.5px; opacity: .92; }
.academy-trend a { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 99px; padding: 4px 12px; font-size: 12px; transition: .15s; }
.academy-trend a:hover { background: rgba(255,255,255,.24); }
.academy-hero .stats-strip { margin-top: 34px; }
.academy-hero .stat-card { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); box-shadow: none; }
.academy-hero .stat-card b, .academy-hero .stat-card span { color: #fff; }
.academy-hero .stat-card .ic { background: rgba(255,255,255,.16) !important; color: #fff !important; }

/* ---------- نوار دسته‌ها ---------- */
.cat-chips { display: flex; gap: 8px; overflow-x: auto; padding: 18px 0 6px; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; background: #fff; border: 1px solid var(--navy-200); border-radius: 99px; padding: 8px 15px; font-size: 13px; color: var(--navy-600); font-weight: 600; transition: .15s; cursor: pointer; font-family: inherit; }
.cat-chip svg { width: 15px; height: 15px; }
.cat-chip:hover { border-color: var(--teal-500); color: var(--teal-700); }
.cat-chip.on { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }

/* ---------- کارت دوره ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.course-grid.four { grid-template-columns: repeat(4, 1fr); }
.course-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius); overflow: hidden; transition: all .2s; min-width: 0; }
.course-card:hover { border-color: var(--teal-500); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cc-thumb { position: relative; height: 128px; display: flex; align-items: center; justify-content: center; }
.cc-thumb > svg { width: 52px; height: 52px; opacity: .85; }
.crs-tag { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--navy-900); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.crs-tag.hot { background: var(--amber-500); color: var(--navy-900); }
.crs-tag.new { background: var(--sky-500); }
.crs-free { position: absolute; top: 12px; inset-inline-end: 12px; background: #fff; color: var(--teal-700); font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--teal-100); }
.cc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.crs-prov { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--navy-500); font-weight: 600; }
.crs-prov i { width: 22px; height: 22px; border-radius: 6px; color: #fff; font-style: normal; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.course-card h3 { font-size: 15px; color: var(--navy-900); line-height: 1.65; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-skills { font-size: 12px; color: var(--navy-500); line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-skills b { color: var(--navy-700); font-weight: 600; }
.crs-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--navy-700); }
.crs-rating b { color: var(--navy-900); }
.crs-rating small { color: var(--navy-400); font-size: 11.5px; }
.cc-rating { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--navy-400); gap: 8px; flex-wrap: wrap; }
.cc-meta { font-size: 12px; color: var(--navy-500); margin-top: auto; padding-top: 6px; }
.cc-price { font-size: 15px; font-weight: 800; color: var(--navy-900); display: flex; gap: 8px; align-items: baseline; }
.cc-price.free { color: var(--teal-700); }
.cc-price s { font-size: 12px; color: var(--navy-400); font-weight: 500; }
.cc-progress { height: 6px; background: var(--navy-100); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.cc-progress i { display: block; height: 100%; background: var(--teal-600); border-radius: 3px; transition: .4s; }
.cc-pct { font-size: 11.5px; color: var(--teal-700); font-weight: 700; }

/* ---------- کارت مسیر یادگیری ---------- */
.path-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.path-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1.5px solid var(--navy-100); border-top: 4px solid var(--pc); border-radius: var(--radius); padding: 20px; transition: .2s; min-width: 0; }
.path-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--pc); }
.pc-head { display: flex; justify-content: space-between; align-items: center; }
.pc-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--pbg); color: var(--pc); display: grid; place-items: center; }
.pc-ic svg { width: 21px; height: 21px; }
.pc-kind { font-size: 11px; font-weight: 700; color: var(--pc); background: var(--pbg); border-radius: 99px; padding: 3px 10px; }
.path-card h3 { font-size: 16.5px; color: var(--navy-900); line-height: 1.6; }
.path-card p { font-size: 13px; color: var(--navy-600); line-height: 1.9; }
.pc-courses { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.pc-courses span { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--navy-700); }
.pc-courses b { width: 20px; height: 20px; border-radius: 50%; background: var(--pbg); color: var(--pc); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pc-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--navy-500); margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--navy-100); align-items: center; }
.pc-role { font-size: 12.5px; font-weight: 700; color: var(--pc); }

/* ---------- کاتالوگ: سایدبار + نتایج ---------- */
.catalog-layout { display: grid; grid-template-columns: 270px 1fr; gap: 26px; align-items: start; }
.catalog-layout > * { min-width: 0; }
.crs-filters { position: sticky; top: 88px; }
.crs-filters .filter-group.acc summary { font-size: 13.5px; }
.crs-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.crs-toolbar .count { font-size: 14px; color: var(--navy-500); }
.crs-toolbar .count b { color: var(--teal-700); }
.crs-toolbar select { padding: 8px 12px; border: 1px solid var(--navy-200); border-radius: var(--radius-sm); font: inherit; font-size: 13px; background: #fff; }
.rating-pick label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--navy-600); margin-bottom: 6px; cursor: pointer; }
.rating-pick input { accent-color: var(--teal-600); }

/* ---------- مدرسان ---------- */
.instr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.instr-card { background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius); padding: 20px 18px; text-align: center; transition: .2s; }
.instr-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.instr-card .avatar { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 10px; color: #fff; font-size: 24px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.instr-card b { display: block; font-size: 14.5px; color: var(--navy-900); }
.instr-card span { display: block; font-size: 12px; color: var(--navy-500); line-height: 1.8; }
.instr-card .im { display: flex; justify-content: center; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--navy-500); }

/* ---------- صفحه جزئیات دوره ---------- */
.crs-hero { background: linear-gradient(180deg, var(--teal-50), #fff); border-bottom: 1px solid var(--navy-100); padding: 30px 0 28px; }
.crs-hero .breadcrumb { margin-bottom: 12px; }
.crs-hero h1 { font-size: 28px; line-height: 1.55; color: var(--navy-900); margin: 8px 0 8px; max-width: 760px; }
.crs-hero .crs-sub { font-size: 15px; color: var(--navy-600); line-height: 1.9; max-width: 720px; }
.crs-hero .crs-by { margin-top: 12px; font-size: 13.5px; color: var(--navy-600); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crs-hero .crs-by b { color: var(--navy-900); }
.crs-hero .crs-by .av { width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.crs-stats { display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border: 1px solid var(--navy-200); border-radius: var(--radius); margin-top: 22px; box-shadow: var(--shadow-sm); }
.crs-stats > div { padding: 14px 16px; border-inline-start: 1px solid var(--navy-100); }
.crs-stats > div:first-child { border: none; }
.crs-stats b { display: block; font-size: 15px; color: var(--navy-900); }
.crs-stats span { font-size: 12px; color: var(--navy-500); }
.crs-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--navy-200); margin: 26px 0 22px; overflow-x: auto; scrollbar-width: none; }
.crs-tabs a { padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--navy-500); border-bottom: 2px solid transparent; white-space: nowrap; }
.crs-tabs a:hover, .crs-tabs a.on { color: var(--teal-700); border-color: var(--teal-600); }
.outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.outcomes li { position: relative; padding-inline-start: 26px; font-size: 14px; color: var(--navy-700); line-height: 1.9; }
.outcomes li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 2px; color: var(--teal-600); font-weight: 800; }
.skill-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.skill-chips span { background: var(--navy-50); border: 1px solid var(--navy-200); border-radius: 99px; padding: 5px 13px; font-size: 12.5px; color: var(--navy-700); }
.details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.details-grid > div { display: flex; gap: 10px; align-items: flex-start; background: var(--navy-50); border-radius: var(--radius-sm); padding: 13px 14px; }
.details-grid .dg-ic { width: 32px; height: 32px; border-radius: 9px; background: #fff; display: grid; place-items: center; flex-shrink: 0; color: var(--teal-700); }
.details-grid .dg-ic svg { width: 17px; height: 17px; }
.details-grid b { display: block; font-size: 13.5px; color: var(--navy-900); }
.details-grid span { font-size: 12px; color: var(--navy-500); }

/* سرفصل ماژولی */
.syllabus-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.syllabus-head p { font-size: 13px; color: var(--navy-500); }
.mod { border: 1px solid var(--navy-200); border-radius: var(--radius-sm); margin-bottom: 10px; background: #fff; }
.mod summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.mod summary::-webkit-details-marker { display: none; }
.mod summary .mn { width: 30px; height: 30px; border-radius: 50%; background: var(--teal-50); color: var(--teal-800); font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mod summary .mt { flex: 1; min-width: 0; }
.mod summary .mt b { display: block; font-size: 14.5px; color: var(--navy-900); }
.mod summary .mt small { font-size: 12px; color: var(--navy-500); }
.mod summary .caret { color: var(--navy-400); transition: .2s; }
.mod[open] summary .caret { transform: rotate(180deg); }
.mod[open] summary { border-bottom: 1px solid var(--navy-100); }
.lesson { display: flex; align-items: center; gap: 11px; padding: 10px 16px 10px 18px; font-size: 13.5px; color: var(--navy-700); border-bottom: 1px dashed var(--navy-100); }
.lesson:last-child { border-bottom: none; }
.lesson .li { width: 26px; height: 26px; border-radius: 7px; background: var(--navy-50); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--navy-600); }
.lesson .lt { flex: 1; min-width: 0; }
.lesson .ld { font-size: 12px; color: var(--navy-400); white-space: nowrap; }
.lesson.done .li { background: var(--teal-100); color: var(--teal-800); }
.lesson.done .lt { color: var(--navy-400); text-decoration: line-through; }
.lesson.cur { background: var(--teal-50); }
.lesson.cur .lt { color: var(--teal-800); font-weight: 700; }

/* مدرس و ارائه‌دهنده در صفحه دوره */
.instr-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--navy-100); }
.instr-row:last-child { border-bottom: none; }
.instr-row .avatar { width: 52px; height: 52px; border-radius: 50%; color: #fff; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.instr-row b { display: block; font-size: 14.5px; color: var(--navy-900); }
.instr-row span { font-size: 12.5px; color: var(--navy-500); display: block; }
.instr-row p { font-size: 13px; color: var(--navy-600); margin-top: 4px; line-height: 1.9; }
.instr-row .im { display: flex; gap: 12px; font-size: 12px; color: var(--navy-500); margin-top: 6px; }
.prov-box { display: flex; gap: 14px; align-items: center; background: var(--navy-50); border-radius: var(--radius-sm); padding: 14px 16px; }
.prov-box .pl { width: 50px; height: 50px; border-radius: 12px; color: #fff; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.prov-box b { display: block; font-size: 14.5px; color: var(--navy-900); }
.prov-box p { font-size: 12.5px; color: var(--navy-600); line-height: 1.8; margin-top: 2px; }

/* نظرات */
.rev-summary { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; margin-bottom: 18px; }
.rev-summary .big { text-align: center; }
.rev-summary .big b { font-size: 40px; color: var(--navy-900); display: block; line-height: 1.2; }
.rev-summary .big span { font-size: 12px; color: var(--navy-500); display: block; margin-top: 4px; }
.rev-bars { display: flex; flex-direction: column; gap: 6px; }
.rev-bars > div { display: grid; grid-template-columns: 52px 1fr 40px; gap: 10px; align-items: center; font-size: 12px; color: var(--navy-600); }
.rev-bars i { display: block; height: 8px; background: var(--navy-100); border-radius: 4px; overflow: hidden; }
.rev-bars i b { display: block; height: 100%; background: var(--amber-500); }

/* سایدبار خرید/ثبت‌نام */
.enroll-card { position: sticky; top: 88px; background: #fff; border: 1.5px solid var(--navy-200); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-md); }
.enroll-card .ec-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.enroll-card .ec-price b { font-size: 26px; color: var(--navy-900); }
.enroll-card .ec-price b.free { color: var(--teal-700); }
.enroll-card .ec-price s { color: var(--navy-400); font-size: 13px; }
.enroll-card .ec-off { font-size: 11.5px; color: #be123c; background: var(--rose-100); border-radius: 99px; padding: 2px 9px; font-weight: 700; }
.enroll-card .ec-note { font-size: 12px; color: var(--navy-500); margin-bottom: 14px; line-height: 1.8; }
.enroll-card .btn + .btn { margin-top: 8px; }
.ec-list { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--navy-200); }
.ec-list li { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--navy-600); padding: 5px 0; }
.ec-list li svg { width: 15px; height: 15px; stroke: var(--teal-600); flex-shrink: 0; }
.ec-path { margin-top: 14px; background: var(--teal-50); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 12.5px; color: var(--navy-700); line-height: 1.9; }
.ec-path a { color: var(--teal-700); font-weight: 700; }
.ec-progress { margin: 4px 0 12px; }
.ec-progress .bar { height: 8px; background: var(--navy-100); border-radius: 4px; overflow: hidden; }
.ec-progress .bar i { display: block; height: 100%; background: var(--teal-600); }
.ec-progress small { font-size: 12px; color: var(--teal-700); font-weight: 700; display: block; margin-top: 5px; }
.ec-seats { font-size: 12px; color: #92400e; background: var(--amber-100); border-radius: 8px; padding: 7px 10px; margin-bottom: 12px; }

/* ---------- صفحه یادگیری (Player) ---------- */
.learn-top { background: var(--navy-900); color: #fff; padding: 12px 0; }
.learn-top .container { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.learn-top .lt-title { flex: 1; min-width: 200px; font-size: 14.5px; font-weight: 700; }
.learn-top .lt-title small { display: block; font-size: 11.5px; opacity: .7; font-weight: 400; }
.learn-top .lt-prog { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.learn-top .lt-prog .bar { width: 160px; height: 7px; background: rgba(255,255,255,.2); border-radius: 4px; overflow: hidden; }
.learn-top .lt-prog .bar i { display: block; height: 100%; background: var(--teal-500); }
.learn-top .btn { background: rgba(255,255,255,.12); color: #fff; }
.learn-layout { display: grid; grid-template-columns: 320px 1fr; gap: 22px; padding: 22px 0 60px; align-items: start; }
.learn-layout > * { min-width: 0; }
.learn-side { background: #fff; border: 1px solid var(--navy-200); border-radius: var(--radius); overflow: hidden; position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; }
.learn-side .ls-head { padding: 14px 16px; border-bottom: 1px solid var(--navy-100); font-size: 13.5px; font-weight: 700; color: var(--navy-900); background: var(--navy-50); }
.learn-side .mod { border: none; border-bottom: 1px solid var(--navy-100); border-radius: 0; margin: 0; }
.learn-side .lesson { cursor: pointer; padding-inline-start: 22px; }
.learn-side .lesson:hover { background: var(--teal-50); }
.learn-main .lesson-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.learn-main .lesson-head small { display: block; font-size: 12.5px; color: var(--navy-500); margin-bottom: 4px; }
.learn-main .lesson-head h1 { font-size: 22px; color: var(--navy-900); line-height: 1.5; }
.video-box { background: linear-gradient(135deg, var(--navy-900), var(--teal-900)); border-radius: var(--radius); aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: 10px; margin-bottom: 18px; }
.video-box .play { width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.5); display: grid; place-items: center; font-size: 26px; }
.video-box span { font-size: 13px; opacity: .8; }
.reading-box { background: #fff; border: 1px solid var(--navy-200); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; font-size: 14.5px; color: var(--navy-700); line-height: 2.1; }
.reading-box h3 { font-size: 16px; color: var(--navy-900); margin: 14px 0 6px; }
.quiz-box, .lab-box { background: #fff; border: 1px solid var(--navy-200); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; }
.quiz-box h3, .lab-box h3 { font-size: 16.5px; color: var(--navy-900); margin-bottom: 8px; }
.quiz-box p, .lab-box p { font-size: 13.5px; color: var(--navy-600); line-height: 1.9; }
.lab-steps { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.lab-steps label { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--navy-700); background: var(--navy-50); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.lab-steps input { accent-color: var(--teal-600); width: 16px; height: 16px; }
.qz-q { margin-top: 14px; padding: 14px; border: 1px solid var(--navy-200); border-radius: var(--radius-sm); }
.qz-q b { display: block; font-size: 14px; color: var(--navy-900); margin-bottom: 8px; }
.qz-q label { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--navy-700); padding: 5px 0; cursor: pointer; }
.qz-q input { accent-color: var(--teal-600); }
.qz-result { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 700; }
.qz-result.ok { background: #d1fae5; color: #047857; }
.qz-result.no { background: var(--rose-100); color: #be123c; }
.learn-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.learn-actions .grow { flex: 1; }
.learn-done { background: linear-gradient(120deg, var(--teal-50), #ecfeff); border: 1.5px dashed var(--teal-500); border-radius: var(--radius); padding: 22px; text-align: center; margin-bottom: 18px; }
.learn-done b { display: block; font-size: 18px; color: var(--teal-800); }
.learn-done p { font-size: 13.5px; color: var(--navy-600); margin: 6px 0 12px; }

/* ---------- صفحه مسیر یادگیری ---------- */
.path-hero { background: linear-gradient(135deg, var(--pbg, var(--teal-50)), #fff 70%); border-bottom: 1px solid var(--navy-100); padding: 34px 0 30px; }
.path-hero .pc-kind { font-size: 12px; }
.path-hero h1 { font-size: 28px; color: var(--navy-900); margin: 10px 0 8px; line-height: 1.5; }
.path-hero p { font-size: 15px; color: var(--navy-600); max-width: 720px; line-height: 1.9; }
.path-steps { display: flex; flex-direction: column; gap: 0; position: relative; }
.path-step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding-bottom: 22px; position: relative; }
.path-step::before { content: ""; position: absolute; inset-inline-start: 21px; top: 44px; bottom: 0; width: 2px; background: var(--navy-200); }
.path-step:last-child::before { display: none; }
.path-step .ps-num { width: 44px; height: 44px; border-radius: 50%; background: var(--pc, var(--teal-600)); color: #fff; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.path-step .ps-num.done { background: #059669; }
.path-step .ps-card { background: #fff; border: 1px solid var(--navy-200); border-radius: var(--radius); padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; }
.path-step .ps-card h3 { font-size: 15.5px; color: var(--navy-900); line-height: 1.6; }
.path-step .ps-card p { font-size: 12.5px; color: var(--navy-500); margin-top: 3px; }
.path-step .ps-card .ps-meta { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--navy-500); align-items: center; }

/* ---------- داشبورد: دوره‌های من ---------- */
.my-course { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px dashed var(--navy-100); }
.my-course:last-child { border-bottom: none; }
.my-course .mc-ic { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; }
.my-course .mc-ic svg { width: 26px; height: 26px; }
.my-course b { display: block; font-size: 14.5px; color: var(--navy-900); }
.my-course small { font-size: 12px; color: var(--navy-500); display: block; margin: 2px 0 6px; }
.my-course .cc-progress { max-width: 320px; }

/* ---------- کارت CTA سازمانی ---------- */
.biz-band { background: var(--navy-900); color: #fff; border-radius: 22px; padding: 44px 46px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; }
.biz-band h2 { font-size: 24px; margin-bottom: 8px; }
.biz-band p { font-size: 14.5px; opacity: .85; line-height: 2; }
.biz-band ul { display: grid; gap: 8px; }
.biz-band li { display: flex; gap: 9px; font-size: 13.5px; align-items: flex-start; }
.biz-band li::before { content: "✓"; color: var(--teal-500); font-weight: 800; }
.biz-band .btn { margin-top: 16px; }

/* ---------- ریسپانسیو لایه ۵ ---------- */
@media (max-width: 1100px) {
  .course-grid.four { grid-template-columns: repeat(3, 1fr); }
  .instr-grid { grid-template-columns: repeat(2, 1fr); }
  .crs-stats { grid-template-columns: repeat(3, 1fr); }
  .crs-stats > div:nth-child(4) { border-inline-start: none; }
}
@media (max-width: 980px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .crs-filters { position: static; }
  .learn-layout { grid-template-columns: 1fr; }
  .learn-side { position: static; max-height: none; }
  .biz-band { grid-template-columns: 1fr; padding: 34px 26px; }
  .enroll-card { position: static; }
}
@media (max-width: 720px) {
  .academy-hero { padding: 40px 0 46px; }
  .academy-hero h1 { font-size: 26px; }
  .academy-search { flex-direction: column; }
  .academy-search .btn { padding: 14px; }
  .course-grid, .course-grid.four, .path-grid, .instr-grid { grid-template-columns: 1fr; }
  .outcomes, .details-grid { grid-template-columns: 1fr; }
  .crs-stats { grid-template-columns: repeat(2, 1fr); }
  .crs-stats > div:nth-child(odd) { border-inline-start: none; }
  .crs-hero h1 { font-size: 22px; }
  .rev-summary { grid-template-columns: 1fr; }
  .path-step .ps-card { grid-template-columns: 1fr; }
  .my-course { grid-template-columns: 1fr; }
  .my-course .mc-ic { display: none; }
  .learn-top .lt-prog .bar { width: 100px; }
}

/* ===============================================
   لایه ۶ — سازنده دوره (course-builder.html)
   =============================================== */
.builder-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; padding: 28px 0 60px; align-items: start; }
.builder-layout > * { min-width: 0; }
.stepper { display: flex; gap: 6px; background: #fff; border: 1px solid var(--navy-200); border-radius: var(--radius); padding: 8px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.stepper button { flex: 1; min-width: 130px; display: flex; align-items: center; gap: 9px; background: none; border: none; font: inherit; font-size: 13px; color: var(--navy-500); padding: 9px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: .15s; }
.stepper button i { width: 26px; height: 26px; border-radius: 50%; background: var(--navy-100); color: var(--navy-600); font-style: normal; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stepper button.on { background: var(--teal-50); color: var(--teal-800); font-weight: 700; }
.stepper button.on i { background: var(--teal-600); color: #fff; }
.stepper button.done i { background: #d1fae5; color: #047857; }
.b-step { display: none; }
.b-step.active { display: block; }
.b-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.b-actions .grow { flex: 1; }
.list-edit { display: flex; flex-direction: column; gap: 8px; }
.list-edit .le-row { display: flex; gap: 8px; align-items: center; }
.list-edit .le-row input { flex: 1; padding: 9px 12px; border: 1.5px solid var(--navy-200); border-radius: 8px; font: inherit; font-size: 13.5px; outline: none; min-width: 0; }
.list-edit .le-row input:focus { border-color: var(--teal-500); }
.list-edit .le-row button { background: var(--navy-100); border: none; width: 30px; height: 30px; border-radius: 8px; color: var(--rose-500); font-size: 15px; cursor: pointer; flex-shrink: 0; }
.list-edit .le-add { align-self: flex-start; }
.chip-input { display: flex; flex-wrap: wrap; gap: 6px; border: 1.5px solid var(--navy-200); border-radius: var(--radius-sm); padding: 7px 9px; background: #fff; }
.chip-input span { background: var(--teal-50); color: var(--teal-800); border: 1px solid var(--teal-100); border-radius: 99px; padding: 3px 10px; font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; }
.chip-input span button { background: none; border: none; color: var(--rose-500); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.chip-input input { flex: 1; min-width: 140px; border: none; outline: none; font: inherit; font-size: 13.5px; padding: 4px; }
.instr-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.instr-pick label { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--navy-200); border-radius: var(--radius-sm); padding: 9px 11px; cursor: pointer; font-size: 13px; color: var(--navy-700); transition: .14s; }
.instr-pick label:has(input:checked) { border-color: var(--teal-600); background: var(--teal-50); }
.instr-pick label input { accent-color: var(--teal-600); }
.instr-pick .av { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.instr-pick small { display: block; font-size: 11.5px; color: var(--navy-400); }
/* ویرایشگر سرفصل */
.b-mod { border: 1.5px solid var(--navy-200); border-radius: var(--radius); background: var(--navy-50); padding: 14px; margin-bottom: 12px; }
.b-mod-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.b-mod-head .mn { width: 30px; height: 30px; border-radius: 50%; background: var(--teal-600); color: #fff; font-weight: 800; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.b-mod-head input { flex: 1; padding: 9px 12px; border: 1.5px solid var(--navy-200); border-radius: 8px; font: inherit; font-size: 14px; font-weight: 700; outline: none; min-width: 0; background: #fff; }
.b-mod-head .mh { font-size: 12px; color: var(--navy-500); white-space: nowrap; }
.b-lesson { display: grid; grid-template-columns: 26px 1fr 130px 80px 30px; gap: 7px; align-items: center; margin-bottom: 7px; }
.b-lesson .li { width: 26px; height: 26px; border-radius: 7px; background: #fff; border: 1px solid var(--navy-200); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--navy-600); }
.b-lesson input, .b-lesson select { padding: 8px 10px; border: 1.5px solid var(--navy-200); border-radius: 8px; font: inherit; font-size: 13px; outline: none; background: #fff; min-width: 0; }
.b-lesson input:focus, .b-lesson select:focus { border-color: var(--teal-500); }
.b-lesson button { background: none; border: none; color: var(--rose-500); font-size: 15px; cursor: pointer; }
.b-mod-foot { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.b-mod-foot .btn-danger { margin-inline-start: auto; }
/* پیش‌نمایش */
.b-preview { position: sticky; top: 88px; }
.b-preview .panel { padding: 18px; }
.b-preview h2 { font-size: 15px; }
.b-preview .course-card { pointer-events: none; }
.b-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.b-stats div { background: var(--navy-50); border-radius: 9px; padding: 9px 11px; }
.b-stats b { display: block; font-size: 15px; color: var(--navy-900); }
.b-stats span { font-size: 11.5px; color: var(--navy-500); }
.b-check { margin-top: 12px; }
.b-check li { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 4px 0; color: var(--navy-600); }
.b-check li.ok { color: #047857; }
.b-check li.no { color: #be123c; }
.b-check li::before { content: "•"; }
.b-check li.ok::before { content: "✓"; font-weight: 800; }
.b-check li.no::before { content: "✕"; font-weight: 800; }
.status-pill { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.status-pill.draft { background: var(--navy-100); color: var(--navy-600); }
.status-pill.pending { background: var(--amber-100); color: #92400e; }
.status-pill.published { background: var(--teal-100); color: var(--teal-800); }
.created-row { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; padding: 13px 0; border-bottom: 1px dashed var(--navy-100); }
.created-row:last-child { border-bottom: none; }
.created-row b { font-size: 14.5px; color: var(--navy-900); display: block; }
.created-row small { font-size: 12px; color: var(--navy-500); }
.created-row .cr-act { display: flex; gap: 6px; flex-wrap: wrap; }
.create-cta { display: flex; align-items: center; gap: 14px; background: linear-gradient(120deg, var(--teal-50), #fff); border: 1.5px dashed var(--teal-500); border-radius: var(--radius); padding: 16px 18px; margin-top: 18px; flex-wrap: wrap; }
.create-cta .cc-txt { flex: 1; min-width: 220px; }
.create-cta b { display: block; font-size: 14.5px; color: var(--navy-900); }
.create-cta span { font-size: 12.5px; color: var(--navy-500); }
.draft-banner { background: var(--amber-100); color: #92400e; border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13px; margin-bottom: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.draft-banner a { color: #92400e; font-weight: 700; text-decoration: underline; }
@media (max-width: 980px) { .builder-layout { grid-template-columns: 1fr; } .b-preview { position: static; } }
@media (max-width: 720px) { .b-lesson { grid-template-columns: 26px 1fr 30px; } .b-lesson select, .b-lesson input[type=number] { grid-column: 2; } .instr-pick { grid-template-columns: 1fr; } }