@charset "UTF-8"; /* ===================================================================



   TestKav Skills — Marketplace  (marketplace.css)



   دقیقاً مطابق market-preview.html : ناوبری + intro/جستجو + فیلتر چک‌باکسی



   + لیست سه‌ستونه + کارت. نیازمند skills.css. کلاس‌ها sk-mkt-.



   =================================================================== */
.sk-mkt-body {
    background: var(--sk-surface)
}

.sk-mkt-wrap {
    max-width: 1280px;
    margin-inline:auto;padding-inline:clamp(16px,3.2vw,44px);width: 100%
}

/* ---------- ناوبری ---------- */
.sk-mkt-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--sk-surface);
    border-bottom: 1px solid var(--sk-line)
}

.sk-mkt-headin {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 72px
}

.sk-mkt-brand {
    display: flex;
    align-items: center;
    gap: 11px
}

.sk-mkt-brand .mk {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--sk-charcoal);
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.sk-mkt-brand .mk svg {
    width: 23px;
    height: 23px
}

.sk-mkt-brand strong {
    font-size: 18px;
    font-weight: 700;
    display: block;
    line-height: 1.15;
    letter-spacing: -.3px
}

.sk-mkt-brand small {
    font-size: 11px;
    color: var(--sk-ink-faint);
    font-weight: 600;
    letter-spacing: .02em;
    margin-top: -2px;
    display: block
}

.sk-mkt-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-start:14px}

.sk-mkt-nav .nav-ic {
    display: none
}

.sk-mkt-nav a {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--sk-ink-soft);
    padding: 9px 14px;
    border-radius: var(--sk-r-md);
    transition: .15s
}

.sk-mkt-nav a:hover {
    background: var(--sk-surface-2);
    color: var(--sk-ink)
}

.sk-mkt-nav a.is-active {
    color: var(--sk-ink);
    font-weight: 700
}

.sk-mkt-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-inline-start:auto}

.sk-mkt-menu-btn {
    display: none
}

.teach-area {
    margin-top: 20px;
    font-size: .75em;
    font-weight: 400;
    border-right: 3px solid var(--tk-amber);
    padding-right: 5px;
    height: 12px;
    display: flex;
    align-items: center;
}

/* ---------- پیام‌ها ---------- */
.sk-mkt-msgs {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.sk-mkt-msg {
    padding: 13px 16px;
    border-radius: var(--sk-r-md);
    font-size: 13.5px;
    font-weight: 600;
    border: 1px solid var(--sk-line)
}

.sk-mkt-msg.success {
    background: var(--sk-ok-soft);
    color: var(--sk-ok)
}

.sk-mkt-msg.error,.sk-mkt-msg.danger {
    background: var(--sk-danger-soft);
    color: var(--sk-danger)
}

/* ---------- intro (به‌جای هیرو) ---------- */
.sk-mkt-intro {
    position: relative;
    background: var(--sk-surface);
    border-bottom: 1px solid var(--sk-line);
    overflow: hidden
}

.sk-mkt-intro-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none
}

.sk-mkt-intro-bg .dots {
    position: absolute;
    inset: -2px;
    background-image: radial-gradient(rgba(24,26,29,.09) 1.5px,transparent 1.5px);
    background-size: 25px 25px;
    -webkit-mask-image: linear-gradient(to bottom,#000,transparent 82%);
    mask-image: linear-gradient(to bottom,#000,transparent 82%)
}

.sk-mkt-intro-bg .glow {
    position: absolute;
    top: -150px;
    inset-inline-end: -90px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle,var(--sk-amber-soft),transparent 66%);
    opacity: .85
}

.sk-mkt-intro-bg .rings {
    position: absolute;
    top: -34%;
    inset-inline-end: -5%;
    width: 540px;
    height: 540px;
    opacity: .5
}

.sk-mkt-intro-bg .rings i {
    position: absolute;
    inset: 0;
    margin: auto;
    border: 1.4px solid rgba(24,26,29,.08);
    border-radius: 50%
}

.sk-mkt-intro-bg .rings i:nth-child(1) {
    width: 28%;
    height: 28%
}

.sk-mkt-intro-bg .rings i:nth-child(2) {
    width: 52%;
    height: 52%
}

.sk-mkt-intro-bg .rings i:nth-child(3) {
    width: 76%;
    height: 76%
}

.sk-mkt-intro-bg .rings i:nth-child(4) {
    width: 100%;
    height: 100%
}

[data-theme="dark"] .sk-mkt-intro-bg .dots {
    background-image: radial-gradient(rgba(255,255,255,.085) 1.5px,transparent 1.5px)
}

[data-theme="dark"] .sk-mkt-intro-bg .rings i {
    border-color: rgba(255,255,255,.07)
}

.sk-mkt-intro>.sk-mkt-wrap {
    position: relative;
    z-index: 1
}

.sk-mkt-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sk-ink-faint);
    font-weight: 600;
    padding-top: 18px
}

.sk-mkt-crumb .sep {
    opacity: .5
}

.sk-mkt-crumb .cur {
    color: var(--sk-ink)
}

.sk-mkt-intro-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 14px 0 14px
}

.sk-mkt-intro h1 {
    font-size: clamp(25px,2.9vw,34px);
    font-weight: 800;
    letter-spacing: -.4px;
    line-height: 1.35;
    margin-bottom: 9px
}

.sk-mkt-intro p {
    font-size: 14px;
    color: var(--sk-ink-soft);
    font-weight: 450;
    max-width: c60h;
    line-height: 1.95
}

.sk-mkt-intro p b {
    color: var(--sk-ink);
    font-weight: 700
}

.sk-mkt-search {
    display: flex;
    gap: 8px;
    background: var(--sk-surface);
    border: 1.5px solid var(--sk-line-strong);
    border-radius: var(--sk-r-pill);
    padding: 7px;
    min-width: min(440px,42vw)
}

.sk-mkt-search:focus-within {
    border-color: var(--sk-amber)
}

.sk-mkt-search .ic {
    display: grid;
    place-items: center;
    width: 40px;
    color: var(--sk-ink-faint);
    flex-shrink: 0
}

.sk-mkt-search input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    box-shadow: none;
    padding: 0 6px;
    font-size: 14.5px;
    color: var(--sk-ink);
    min-width: 0;
    font-family: inherit;
    direction: rtl;
    text-align: right
}

.sk-mkt-search input::placeholder {
    color: var(--sk-ink-faint)
}

/* ---------- چیدمان لیست ---------- */
.sk-mkt-layout {
    display: grid;
    grid-template-columns: 265px 1fr;
    gap: 24px;
    padding-block:24px 60px;
    align-items: start
}

.sk-mkt-results {
    min-width: 0
}

.sk-mkt-rhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap
}

.sk-mkt-rhead .count {
    font-size: 14px;
    font-weight: 400;
    color: var(--sk-ink-soft)
}

.sk-mkt-rhead .count b {
    color: var(--sk-ink);
    font-weight: 700
}

.sk-mkt-rtools {
    display: flex;
    align-items: center;
    gap: 10px
}

.sk-mkt-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--sk-surface);
    border: 1px solid var(--sk-line-strong);
    border-radius: var(--sk-r-md);
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 600
}

.sk-mkt-sort svg {
    width: 15px;
    height: 15px;
    color: var(--sk-ink-faint)
}

.sk-mkt-sort select {
    border: none;
    background: none;
    font-family: inherit;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--sk-ink);
    outline: none;
    cursor: pointer
}

.sk-mkt-qbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap
}

.sk-mkt-qfilters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.sk-mkt-qbtn {
    font-size: 12.5px;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: var(--sk-r-pill);
    border: 1px solid var(--sk-line);
    background: var(--sk-surface);
    color: var(--sk-ink-soft);
    cursor: pointer;
    transition: .16s var(--sk-ease);
    font-family: inherit
}

.sk-mkt-qbtn:hover {
    border-color: var(--sk-line-strong);
    color: var(--sk-ink);
    background: var(--sk-surface-2)
}

.sk-mkt-qbtn.active {
    background: var(--sk-amber-soft);
    border-color: var(--sk-amber);
    color: var(--sk-amber-deep);
    font-weight: 600
}

.sk-mkt-count {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--sk-ink-soft);
    white-space: nowrap
}

.sk-mkt-count b {
    color: var(--sk-ink);
    font-weight: 700
}

.sk-mkt-mfilter {
    display: none
}

/* ---------- فیلتر چک‌باکسی (مطابق توافق) ---------- */
.sk-mkt-filter {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sk-line-strong) transparent
}

.sk-mkt-filter::-webkit-scrollbar {
    width: 8px
}

.sk-mkt-filter::-webkit-scrollbar-track {
    background: transparent
}

.sk-mkt-filter::-webkit-scrollbar-thumb {
    background: var(--sk-line-strong);
    border-radius: 99px;
    border: 2.5px solid var(--sk-surface);
    background-clip: padding-box
}

.sk-mkt-filter:hover::-webkit-scrollbar-thumb {
    background: var(--sk-ink-faint);
    background-clip: padding-box
}

.sk-mkt-panel {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20,24,33,.03)
}

.sk-mkt-panel-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px 14px;
    border-bottom: 1px solid var(--sk-line)
}

.sk-mkt-panel-h b {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.2px
}

.sk-mkt-panel-h b svg {
    width: 16px;
    height: 16px;
    color: var(--sk-ink)
}

.sk-mkt-panel-h .clr {
    font-size: 12px;
    font-weight: 600;
    color: var(--sk-ink-faint);
    transition: .15s
}

.sk-mkt-panel-h .clr:hover {
    color: var(--sk-amber-deep)
}

.sk-mkt-fgroup {
    padding: 15px 16px;
    border-bottom: 1px solid var(--sk-line)
}

.sk-mkt-fgroup:last-child {
    border-bottom: none
}

.sk-mkt-fgroup>.t {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sk-ink);
    margin-bottom: 10px;
    letter-spacing: -.1px
}

.sk-mkt-fgroup>.t .dep {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--sk-amber-deep);
    background: var(--sk-amber-soft);
    padding: 2px 7px;
    border-radius: 6px;
    margin-inline-start:auto;letter-spacing: 0
}

.sk-mkt-fsearch {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--sk-surface-2);
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 0 10px;
    height: 33px;
    margin-bottom: 8px;
    transition: .15s
}

.sk-mkt-fsearch:focus-within {
    background: var(--sk-surface);
    border-color: var(--sk-line-strong)
}

.sk-mkt-fsearch svg {
    width: 14px;
    height: 14px;
    color: var(--sk-ink-faint);
    flex-shrink: 0
}

.sk-mkt-fsearch input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--sk-ink);
    min-width: 0;
    direction: rtl;
    text-align: right
}

.sk-mkt-fsearch input::placeholder {
    color: var(--sk-ink-faint)
}

.sk-mkt-cbset {
    display: flex;
    flex-direction: column;
    max-height: 192px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    margin-inline:-16px}

/* اسکرول مینیمالِ لیست‌های داخل گروه فیلتر — باریک‌تر و کم‌رنگ‌تر از اسکرول خود ساید فیلتر (8px / line-strong)



   overscroll-behavior:contain هم جلوی زنجیره‌شدن اسکرول گروه با اسکرول فیلتر را می‌گیرد. */
.sk-mkt-cbset {
    overscroll-behavior: contain;
    scrollbar-color: var(--sk-line) transparent
}

.sk-mkt-cbset::-webkit-scrollbar {
    width: 6px
}

.sk-mkt-cbset::-webkit-scrollbar-track {
    background: transparent
}

.sk-mkt-cbset::-webkit-scrollbar-thumb {
    background: var(--sk-line);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 999px
}

.sk-mkt-cbset:hover::-webkit-scrollbar-thumb,.sk-mkt-cbset:focus-within::-webkit-scrollbar-thumb {
    background: var(--sk-line-strong);
    border: 2px solid transparent;
    background-clip: content-box
}

.sk-mkt-fcheck.hide,.sk-mkt-fnone {
    display: none
}

.sk-mkt-fnone.show {
    display: block;
    font-size: 11.5px;
    color: var(--sk-ink-faint);
    padding: 10px 16px;
    text-align: center
}

.sk-mkt-fcheck {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 400;
    color: var(--sk-ink-soft);
    cursor: pointer;
    transition: background .12s
}

.sk-mkt-fcheck:hover {
    background: var(--sk-surface-2);
    color: var(--sk-ink)
}

.sk-mkt-fcheck .box {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 1.5px solid var(--sk-line-strong);
    display: grid;
    place-items: center;
    transition: .15s;
    flex-shrink: 0;
    margin-top: 1px
}

.sk-mkt-fcheck .box svg {
    width: 11px;
    height: 11px;
    color: #181a1d;
    opacity: 0;
    transform: scale(.6);
    transition: .15s var(--sk-ease)
}

.sk-mkt-fcheck input {
    display: none
}

.sk-mkt-fcheck input:checked+.box {
    background: var(--sk-amber);
    border-color: var(--sk-amber)
}

.sk-mkt-fcheck input:checked+.box svg {
    opacity: 1;
    transform: scale(1)
}

.sk-mkt-fcheck input:checked~.nm {
    color: var(--sk-ink);
    font-weight: 600
}

.sk-mkt-fcheck .nm {
    flex: 1;
    line-height: 1.5
}

.sk-mkt-fcheck .c {
    font-size: 11px;
    color: var(--sk-ink-faint);
    font-weight: 600
}

.sk-mkt-flevels {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.sk-mkt-flevels label {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 35px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid var(--sk-line);
    background: var(--sk-surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sk-ink-soft);
    transition: .16s var(--sk-ease);
    cursor: pointer
}

.sk-mkt-flevels .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0
}

.sk-mkt-flevels .c {
    margin-inline-start:auto;font-size: 11px;
    color: var(--sk-ink-faint);
    font-weight: 600
}

.sk-mkt-flevels label:hover {
    border-color: var(--sk-line-strong);
    background: var(--sk-surface-2)
}

.sk-mkt-flevels input {
    display: none
}

.sk-mkt-flevels input:checked+label {
    border-color: var(--sk-charcoal);
    background: var(--sk-surface-2);
    color: var(--sk-ink);
    font-weight: 600
}

.sk-mkt-ftoggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600
}

.sk-mkt-switch {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    display: inline-block
}

.sk-mkt-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2
}

.sk-mkt-switch .sl {
    position: absolute;
    inset: 0;
    background: var(--sk-surface-3);
    border-radius: 999px;
    transition: .2s
}

.sk-mkt-switch .sl::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    inset-inline-start: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .2s var(--sk-ease);
    box-shadow: 0 1px 3px rgba(0,0,0,.2)
}

.sk-mkt-switch input:checked+.sl {
    background: var(--sk-amber)
}

.sk-mkt-switch input:checked+.sl::before {
    transform: translateX(-18px)
}

.sk-mkt-fseg {
    display: flex;
    gap: 6px
}

.sk-mkt-fseg input {
    display: none
}

.sk-mkt-fseg label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--sk-line);
    background: var(--sk-surface);
    font-size: 12px;
    font-weight: 500;
    color: var(--sk-ink-soft);
    cursor: pointer;
    transition: .16s var(--sk-ease)
}

.sk-mkt-fseg label:hover {
    border-color: var(--sk-line-strong);
    background: var(--sk-surface-2)
}

.sk-mkt-fseg input:checked+label {
    background: var(--sk-amber-soft);
    border-color: var(--sk-amber);
    color: var(--sk-amber-deep);
    font-weight: 600
}

.sk-mkt-frange {
    display: flex;
    gap: 8px
}

.sk-mkt-frange input,.sk-mkt-frange select {
    flex: 1;
    border: 1px solid var(--sk-line);
    border-radius: 9px;
    background: var(--sk-surface-2);
    padding: 9px 11px;
    font-size: 12.5px;
    color: var(--sk-ink);
    outline: none;
    min-width: 0;
    font-family: inherit;
    transition: .15s;
    cursor: pointer
}

.sk-mkt-frange select:focus,.sk-mkt-frange input:focus {
    border-color: var(--sk-line-strong);
    background: var(--sk-surface)
}

.sk-mkt-fmore>summary {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sk-ink-soft);
    cursor: pointer;
    padding: 14px 16px;
    list-style: none;
    border-bottom: 1px solid var(--sk-line);
    display: flex;
    align-items: center
}

.sk-mkt-fmore>summary::-webkit-details-marker {
    display: none
}

.sk-mkt-fmore>summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-inline-start:auto;border-right: 2px solid var(--sk-ink-faint);
    border-bottom: 2px solid var(--sk-ink-faint);
    transform: rotate(45deg);
    transition: .2s;
    position: relative;
    top: -2px
}

.sk-mkt-fmore[open]>summary::after {
    transform: rotate(-135deg);
    top: 1px
}

.sk-mkt-fbtns {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

/* ---------- گرید سه‌ستونه ---------- */
.sk-mkt-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    align-items: stretch
}

/* ---------- کارت محصول (مطابق فایل توافق‌شده) ---------- */
.sk-mkt-card {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: .2s var(--sk-ease)
}

.sk-mkt-card:hover {
    border-color: var(--sk-line-strong);
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(20,24,33,.10)
}

.sk-mkt-cover {
    position: relative;
    aspect-ratio: 16 / 8;
    overflow: hidden;
    display: block
}

.sk-mkt-cover .ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--sk-surface-2);
    background-image: radial-gradient(rgba(26,28,31,.06) 1.2px,transparent 1.2px);
    background-size: 16px 16px
}

.sk-mkt-cover .ph svg {
    width: 44px;
    height: 44px;
    color: var(--sk-ink-faint);
    opacity: .5
}

.sk-mkt-cover .img {
    position: absolute;
    inset: 0
}

.sk-mkt-cover .img.g1 {
    background: linear-gradient(135deg,#ffc218,#e9ad00 60%,#181a1d)
}

.sk-mkt-cover .img.g2 {
    background: linear-gradient(135deg,#2b6cb0,#1a365d)
}

.sk-mkt-cover .img.g3 {
    background: linear-gradient(135deg,#2f855a,#1c4532)
}

.sk-mkt-cover .img.g4 {
    background: linear-gradient(135deg,#6b46c1,#322659)
}

.sk-mkt-cover .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sk-mkt-cover .img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 80% 0,rgba(255,255,255,.22),transparent 60%)
}

.sk-mkt-cover .scrim {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(to top,rgba(10,11,13,.5),transparent 45%); */
}

.sk-mkt-cover .tags {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    z-index: 2
}

.sk-mkt-cover .tag {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--sk-r-pill)
}

.sk-mkt-cover .tag-exam {
    background: rgba(255,194,24,.92);
    color: #181a1d
}

.sk-mkt-cover .tag-course {
    background: rgba(24,26,29,.82);
    color: #fff
}

.sk-mkt-cover .tag-free {
    background: rgba(31,157,87,.92);
    color: #fff
}

.sk-mkt-cover .fav {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgb(214 4 4 / 58%);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    color: #ffffff;
    transition: .2s;
    z-index: 2;
    border: none
}

.sk-mkt-cover .fav:hover {
    color: var(--sk-amber-deep)
}

.sk-mkt-cover .fav svg {
    width: 16px;
    height: 16px
}

.sk-mkt-card-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.sk-mkt-card-body h3 {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.sk-mkt-card-body h3 a {
    color: inherit
}

/* توضیح یک‌خطی زیر عنوان کارت — برگرفته از توضیحات کامل آزمون (card_excerpt) */
.sk-mkt-card-body .sk-mkt-card-desc {
    margin: -9px 0 13px;
    font-size: 12px;
    line-height: 1.9;
    color: var(--sk-ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sk-mkt-measures {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--sk-ink-soft);
    margin-bottom: 8px
}

.sk-mkt-measures svg {
    width: 14px;
    height: 14px;
    color: var(--sk-amber-deep);
    flex-shrink: 0
}

.sk-mkt-measures .lbl {
    color: var(--sk-ink-faint)
}

.sk-mkt-measures .sk {
    color: var(--sk-ink);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sk-mkt-chips2 {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 13px
}

.sk-mkt-chips2 .chip2-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 11px
}

.sk-mkt-chips2 .chip2-icon {
    width: 17px;
    height: 17px;
    background: none;
    border: none;
    display: grid;
    place-items: center;
    color: var(--sk-ink-faint);
    flex-shrink: 0
}

.sk-mkt-chips2 .chip2-icon svg {
    width: 15px;
    height: 15px
}

.sk-mkt-chips2 .chip2-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sk-ink-faint);
    white-space: nowrap;
    flex-shrink: 0;
    width: 46px
}

.sk-mkt-chips2 .chip2-list {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center
}

.sk-mkt-chips2 .chip2-list span {
    font-size: 10.5px;
    font-weight: 400;
    color: var(--sk-ink-soft);
    background: var(--sk-surface-2);
    border-radius: 6px;
    padding: 2px 9px;
    white-space: nowrap
}

.sk-mkt-chips2 .chip2-list i {
    display: none
}

.sk-mkt-level {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px
}

.sk-mkt-level .name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap
}

.sk-mkt-level .bars {
    display: flex;
    gap: 3px
}

.sk-mkt-level .bars i {
    width: 14px;
    height: 5px;
    border-radius: 999px;
    background: var(--sk-surface-3)
}

.sk-mkt-level.beg .name {
    color: var(--sk-beg)
}

.sk-mkt-level.beg .bars i:nth-child(-n+1) {
    background: var(--sk-beg)
}

.sk-mkt-level.inter .name {
    color: var(--sk-inter)
}

.sk-mkt-level.inter .bars i:nth-child(-n+2) {
    background: var(--sk-inter)
}

.sk-mkt-level.adv .name {
    color: var(--sk-adv)
}

.sk-mkt-level.adv .bars i:nth-child(-n+3) {
    background: var(--sk-adv)
}

.sk-mkt-level.exp .name {
    color: var(--sk-ink)
}

.sk-mkt-level.exp .bars i {
    background: var(--sk-charcoal)
}

.sk-mkt-level.all .name {
    color: var(--sk-ink-soft)
}

.sk-mkt-level.all .bars i {
    background: var(--sk-amber)
}

.sk-mkt-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--sk-ink-soft);
    font-weight: 400;
    padding-top: 12px;
    border-top: 1px solid var(--sk-line);
    margin-top: auto
}

.sk-mkt-meta .m {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap
}

.sk-mkt-meta .m svg {
    width: 13px;
    height: 13px;
    color: var(--sk-ink-faint)
}

.sk-mkt-meta .rate {
    color: var(--sk-ink);
    font-weight: 700
}

.sk-mkt-meta .rate svg {
    color: var(--sk-amber)
}

.sk-mkt-card-foot {
    display: flex;
    align-items: flex-end;  /* v14.21: دکمه روی خط کف؛ قیمتِ حراجِ دوخطی به بالا رشد می‌کند */
    justify-content: space-between;
    margin-top: auto;       /* v14.21: سنجاق فوتر به کف کارت — جای «مشاهده» در همهٔ کارت‌های یک ردیف ثابت می‌شود */
    padding-top: 12px
}

.sk-mkt-price {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.3px
}

.sk-mkt-price small {
    font-size: 11px;
    color: var(--sk-ink-faint);
    font-weight: 600;
    margin-inline-start:1px}

.sk-mkt-price.free {
    color: var(--sk-ok)
}

.sk-mkt-empty {
    grid-column: 1/-1;
    padding: 50px;
    text-align: center;
    color: var(--sk-ink-faint);
    font-size: 14px;
    border: 1px dashed var(--sk-line-strong);
    border-radius: var(--sk-r-lg)
}

.sk-mkt-loadmore {
    display: block;
    margin: 24px auto 0
}

/* ---------- فوتر ---------- */
.sk-mkt-footer {
    border-top: 1px solid var(--sk-line);
    padding: 24px 0;
    margin-top: 20px;
    color: var(--sk-ink-faint);
    font-size: 13px;
    font-weight: 500
}

.sk-mkt-foot-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}

.sk-mkt-foot-nav {
    display: flex;
    align-items: center;
    gap: 18px
}

.sk-mkt-foot-nav a {
    color: var(--sk-ink-soft);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.sk-mkt-foot-nav a:hover {
    color: var(--sk-amber-deep)
}

.sk-mkt-foot-nav svg {
    width: 16px;
    height: 16px
}

/* ---------- ریسپانسیو ---------- */
.sk-mkt-body {
    overflow-x: clip
}

.sk-mkt-overlay {
    display: none
}

@media(max-width: 1180px) {
    .sk-mkt-cards {
        grid-template-columns:repeat(2,1fr)
    }
}

@media(max-width: 1024px) {
    .sk-mkt-layout {
        grid-template-columns:1fr
    }

    .sk-mkt-filter {
        position: fixed;
        top: 0;
        inset-inline-start: 0;
        height: 100dvh;
        max-height: none;
        width: min(340px,90vw);
        z-index: 60;
        transform: translateX(100%);
        transition: transform .28s var(--sk-ease);
        background: var(--sk-bg);
        padding: 16px;
        overflow-y: auto;
        box-shadow: none
    }

    .sk-mkt-filter.open,.sk-mkt-filter.is-open {
        transform: translateX(0);
        box-shadow: -18px 0 60px rgba(15,23,42,.22)
    }

    .sk-mkt-mfilter {
        display: inline-flex
    }

    .sk-mkt-overlay.show {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15,18,23,.45);
        z-index: 59
    }

    .sk-mkt-nav {
        display: none;
        position: absolute;
        top: 72px;
        inset-inline: 0;
        background: var(--sk-surface);
        border-top: 1px solid var(--sk-line);
        border-bottom: 1px solid var(--sk-line);
        box-shadow: 0 20px 44px rgba(15,23,42,.13);
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        gap: 2px;
        margin-inline-start:0;z-index: 45
    }

    .sk-mkt-nav.open {
        display: flex
    }

    .sk-mkt-nav a,.sk-mkt-nav .sk-mkt-nav-link {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        border-radius: 12px;
        width: 100%;
        justify-content: flex-start;
        font-size: 14px;
        font-weight: 600;
        color: var(--sk-ink)
    }

    .sk-mkt-nav a:hover,.sk-mkt-nav .sk-mkt-nav-link:hover {
        background: var(--sk-surface-2)
    }

    .sk-mkt-nav .nav-ic {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        flex-shrink: 0;
        margin-inline-end:11px}

    .sk-mkt-nav .nav-ic svg {
        width: 19px;
        height: 19px
    }

    .sk-mkt-nav-item,.sk-mkt-nav-dd {
        display: block;
        width: 100%;
        position: static
    }

    .sk-mkt-mega {
        display: none!important
    }

    .sk-mkt-nav-link .chev {
        display: none
    }

    .sk-mkt-menu-btn {
        display: grid
    }
}

@media(max-width: 820px) {
    .sk-mkt-qfilters {
        flex-wrap:nowrap;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch
    }

    .sk-mkt-qfilters::-webkit-scrollbar {
        display: none
    }

    .sk-mkt-qbtn {
        white-space: nowrap;
        flex-shrink: 0
    }
}

@media(max-width: 760px) {
    .sk-mkt-intro-grid {
        flex-direction: column;
        align-items: stretch
    }

    .sk-mkt-search {
        min-width: 0
    }

    .sk-mkt-headin {
        gap: 12px
    }

    .sk-mkt-brand small {
        display: none
    }
}

@media(max-width: 520px) {
    .sk-mkt-actions .sk-btn--ghost {
        display:none
    }

    .sk-mkt-qbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px
    }

    .sk-mkt-rtools {
        justify-content: space-between
    }
}

/* ---------- Refactor: category landing + Ajax axis filters ---------- */
.sk-mkt-home-note {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--sk-amber-line);
    background: var(--sk-amber-soft);
    border-radius: var(--sk-r-lg);
    font-size: 13.5px;
    color: var(--sk-ink-soft);
    line-height: 1.9
}

.sk-mkt-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 30px 0 16px
}

.sk-mkt-section-head h2 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    color: var(--sk-ink)
}

.sk-mkt-section-head p {
    font-size: 13.5px;
    color: var(--sk-ink-faint);
    line-height: 1.8;
    margin: 4px 0 0
}

.sk-mkt-fcheck.sk-mkt-filter-extra {
    display: none
}

.sk-mkt-fgroup.is-expanded .sk-mkt-fcheck.sk-mkt-filter-extra {
    display: flex
}

.sk-mkt-fcheck.hide {
    display: none!important
}

.sk-mkt-morebtn {
    margin-top: 8px;
    width: 100%;
    height: 32px;
    border: 1px dashed var(--sk-line-strong);
    border-radius: 9px;
    background: var(--sk-surface-2);
    color: var(--sk-ink-soft);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .15s
}

.sk-mkt-morebtn:hover {
    border-color: var(--sk-amber);
    color: var(--sk-ink);
    background: var(--sk-amber-soft)
}

.sk-mkt-morebtn[hidden] {
    display: none!important
}

.sk-mkt-cbset.no-scroll {
    max-height: none;
    overflow: visible
}

.sk-mkt-loading {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s
}

.sk-mkt-loadmore.hide {
    display: none!important
}

.sk-mkt-fgroup[data-fg="job"] .dep,.sk-mkt-fgroup[data-fg="skill"] .dep {
    white-space: nowrap
}

.sk-mkt-fgroup.is-expanded .sk-mkt-cbset {
    max-height: none;
    overflow: visible
}

/* ---------- 2026-06: Exams dropdown + category imagery ---------- */
.sk-mkt-nav-item {
    position: relative;
    display: flex;
    align-items: center
}

.sk-mkt-nav-link {
    display: inline-flex!important;
    align-items: center;
    gap: 6px
}

.sk-mkt-nav-link .chev {
    width: 14px;
    height: 14px;
    opacity: .65;
    transition: .18s
}

.sk-mkt-nav-dd:hover .chev,.sk-mkt-nav-dd:focus-within .chev {
    transform: rotate(180deg)
}

.sk-mkt-mega {
    position: absolute;
    top: calc(100% + 12px);
    inset-inline-start: 0;
    width: min(690px,calc(100vw - 48px));
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(17,24,39,.16);
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .18s var(--sk-ease);
    z-index: 90;
    pointer-events: none
}

.sk-mkt-nav-dd:hover .sk-mkt-mega,.sk-mkt-nav-dd:focus-within .sk-mkt-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto
}

.sk-mkt-mega::before {
    content: "";
    position: absolute;
    top: -13px;
    inset-inline-start: 22px;
    width: 24px;
    height: 24px;
    background: var(--sk-surface);
    border-inline-start:1px solid var(--sk-line);border-top: 1px solid var(--sk-line);
    transform: rotate(45deg)
}

.sk-mkt-mega-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 4px 12px;
    border-bottom: 1px solid var(--sk-line);
    margin-bottom: 10px
}

.sk-mkt-mega-head b {
    font-size: 13.5px;
    font-weight: 900;
    color: var(--sk-ink)
}

.sk-mkt-mega-head span {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sk-ink-faint)
}

.sk-mkt-mega-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    max-height: 380px;
    overflow: auto;
    scrollbar-width: thin
}

.sk-mkt-mega-card {
    display: flex!important;
    align-items: center;
    gap: 10px;
    padding: 9px!important;
    border: 1px solid var(--sk-line);
    border-radius: 14px;
    background: var(--sk-surface-2);
    min-width: 0;
    color: var(--sk-ink-soft)!important;
    transition: .15s
}

.sk-mkt-mega-card:hover {
    background: var(--sk-amber-soft)!important;
    border-color: var(--sk-amber-line);
    color: var(--sk-ink)!important;
    transform: translateY(-1px)
}

.sk-mkt-mega-thumb {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--sk-surface);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--sk-line)
}

.sk-mkt-mega-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sk-mkt-mega-thumb svg {
    width: 19px;
    height: 19px;
    color: var(--sk-amber-deep)
}

.sk-mkt-mega-thumb .txt {
    font-size: 18px;
    line-height: 1
}

.sk-mkt-mega-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.sk-mkt-mega-copy b {
    font-size: 12.5px;
    font-weight: 850;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sk-mkt-mega-copy small {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sk-ink-faint)
}

.sk-mkt-mega-all {
    position: relative;
    z-index: 1;
    display: flex!important;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 9px!important;
    border-radius: 12px;
    background: var(--sk-amber);
    color: #181a1d!important;
    font-size: 12.5px!important;
    font-weight: 900!important
}

.sk-mkt-mega-empty {
    grid-column: 1/-1;
    font-size: 12px;
    color: var(--sk-ink-faint);
    padding: 16px;
    text-align: center;
    border: 1px dashed var(--sk-line-strong);
    border-radius: 12px
}

.sk-mkt-tax-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px
}

.sk-mkt-tax-card {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 20px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: .22s var(--sk-ease);
    overflow: hidden
}

.sk-mkt-tax-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 45px rgba(20,24,33,.09);
    border-color: var(--sk-line-strong)
}

.sk-mkt-tax-visual {
    display: block;
    position: relative;
    aspect-ratio: 16/6;
    border-radius: 16px;
    background: linear-gradient(135deg,var(--sk-amber-soft),var(--sk-surface-2));
    overflow: hidden;
    border: 1px solid var(--sk-line)
}

.sk-mkt-tax-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s var(--sk-ease)
}

.sk-mkt-tax-card:hover .sk-mkt-tax-visual img {
    transform: scale(1.04)
}

.sk-mkt-tax-visual-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--sk-amber-deep);
    background: radial-gradient(circle at 75% 0,rgba(255,194,24,.34),transparent 42%),var(--sk-surface-2)
}

.sk-mkt-tax-visual-fallback svg {
    width: 42px;
    height: 42px;
    opacity: .9
}

.sk-mkt-tax-visual-fallback .txt {
    font-size: 34px
}

.sk-mkt-tax-head {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--sk-ink)
}

.sk-mkt-tax-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--sk-amber-soft);
    display: grid;
    place-items: center;
    color: var(--sk-amber-deep);
    font-size: 19px;
    flex-shrink: 0;
    display: none;
}

.sk-mkt-tax-icon svg {
    width: 20px;
    height: 20px
}

.sk-mkt-tax-head h3 {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    margin: 0;
    margin-top: 10px;
}

.sk-mkt-tax-head small {
    display: block;
    font-size: 13px;
    color: var(--sk-ink-faint);
    font-weight: 350;
    margin-top: 5px
}

.sk-mkt-tax-card p {
    font-size: 12.8px;
    line-height: 1.85;
    color: var(--sk-ink-soft);
    font-weight: 400;
    margin: 0;
    /* به خواست مالک: زیرمتن دقیقاً یک خط — نه بیشتر */
    min-height: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sk-mkt-tax-counts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.sk-mkt-tax-counts span {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--sk-ink);
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    border-radius: 999px;
    padding: 5px 9px
}

.sk-mkt-axis-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    border-top: 1px solid var(--sk-line);
    padding-top: 10px;
    margin-top: 2px
}

.sk-mkt-axis-preview-group {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 6px;
    align-items: center
}

.sk-mkt-axis-preview-title {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 900;
    color: var(--sk-ink-faint);
    margin-bottom: 1px
}

.sk-mkt-axis-preview-title svg {
    width: 13px;
    height: 13px;
    color: var(--sk-amber-deep)
}

.sk-mkt-axis-mini {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 5px;
    border: 1px solid var(--sk-line);
    border-radius: 11px;
    background: var(--sk-surface-2);
    font-size: 11.3px;
    font-weight: 600;
    color: var(--sk-ink-soft);
    transition: .15s
}

.sk-mkt-axis-mini:hover {
    background: var(--sk-amber-soft);
    border-color: var(--sk-amber-line);
    color: var(--sk-ink)
}

.sk-mkt-axis-mini .mini-img {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--sk-surface);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0
}

.sk-mkt-axis-mini .mini-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sk-mkt-axis-mini .mini-img svg {
    width: 13px;
    height: 13px;
    color: var(--sk-amber-deep)
}

.sk-mkt-axis-mini .mini-img .txt {
    font-size: 13px
}

.sk-mkt-axis-mini>span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sk-mkt-chips2 .chip2-group.cat .chip2-icon {
    color: var(--sk-amber-deep)
}

.sk-mkt-chips2 .chip2-group.cat .chip2-list span {
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep);
    font-weight: 500
}

.sk-mkt-card-body .sk-mkt-chips2 .chip2-list span:nth-of-type(n+3) {
    display: none
}

.sk-mkt-chips-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 1px 0 13px;
    align-self: flex-start;
    padding: 5px 11px;
    border: 1px solid var(--sk-line);
    border-radius: 9px;
    background: var(--sk-surface);
    color: var(--sk-amber-deep);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: .15s
}

.sk-mkt-chips-more:hover {
    background: var(--sk-amber-soft);
    border-color: var(--sk-amber-line)
}

.sk-mkt-chips-more svg {
    width: 14px;
    height: 14px
}

.sk-mkt-cmodal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px
}

.sk-mkt-cmodal[hidden] {
    display: none
}

.sk-mkt-cmodal-ov {
    position: absolute;
    inset: 0;
    background: rgba(15,18,23,.5)
}

.sk-mkt-cmodal-box {
    position: relative;
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(15,23,42,.28);
    width: min(440px,100%);
    max-height: 86vh;
    overflow: auto;
    padding: 18px
}

.sk-mkt-cmodal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sk-line)
}

.sk-mkt-cmodal-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.65;
    color: var(--sk-ink);
    margin: 0
}

.sk-mkt-cmodal-x {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--sk-line);
    background: var(--sk-surface-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--sk-ink-soft)
}

.sk-mkt-cmodal-x:hover {
    background: var(--sk-surface-3);
    color: var(--sk-ink)
}

.sk-mkt-cmodal-x svg {
    width: 16px;
    height: 16px
}

.sk-mkt-cmodal-body .sk-mkt-chips2 {
    margin-bottom: 0;
    gap: 13px
}

.sk-mkt-cmodal-body .chip2-group {
    align-items: flex-start
}

.sk-mkt-cmodal-body .chip2-list span {
    font-size: 12px
}

.sk-mkt-cmodal-body .chip2-label {
    padding-top: 3px
}

.sk-mkt-meta {
    flex-wrap: wrap;
    gap: 8px 12px
}

.sk-mkt-meta .sales svg {
    color: var(--sk-amber-deep)
}

@media(max-width: 1180px) {
    .sk-mkt-tax-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .sk-mkt-mega-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width: 760px) {
    .sk-mkt-nav-item {
        display:block
    }

    .sk-mkt-nav-link {
        justify-content: space-between;
        width: 100%
    }

    .sk-mkt-mega {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 16px;
        margin: 2px 0 8px;
        padding: 10px;
        pointer-events: auto;
        max-height: 52vh;
        overflow: auto
    }

    .sk-mkt-mega::before {
        display: none
    }

    .sk-mkt-mega-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px
    }

    .sk-mkt-mega-grid {
        grid-template-columns: 1fr 1fr;
        max-height: none;
        overflow: visible
    }

    .sk-mkt-mega-card {
        padding: 8px!important
    }

    .sk-mkt-mega-copy small {
        display: none
    }

    .sk-mkt-tax-grid {
        grid-template-columns: 1fr
    }

    .sk-mkt-axis-preview-group {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width: 520px) {
    .sk-mkt-mega-grid {
        grid-template-columns:1fr
    }

    .sk-mkt-tax-card {
        padding: 12px
    }

    .sk-mkt-axis-preview-group {
        grid-template-columns: 1fr
    }
}

/* ════════════════════ صفحهٔ جزئیات (آزمون/دوره) ════════════════════ */
.sk-mkt-detail {
    padding-block:20px 72px}

.skill-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--sk-ink-faint);
    margin-bottom: 22px;
    line-height: 1.7
}

.skill-breadcrumbs a {
    color: var(--sk-ink-soft);
    font-weight: 500;
    transition: color .15s
}

.skill-breadcrumbs a:hover {
    color: var(--sk-amber-deep)
}

.skill-breadcrumbs span {
    color: var(--sk-ink-faint);
    opacity: .55
}

.sk-mkt-dt-top {
    display: grid;
    grid-template-columns: minmax(0,1fr) 338px;
    grid-template-areas: "head buy" "body buy";
    column-gap: 32px;
    align-items: start
}

.sk-mkt-dt-headcol {
    grid-area: head;
    min-width: 0
}

.sk-mkt-dt-bodycol {
    grid-area: body;
    min-width: 0
}

.sk-mkt-dt-buy {
    grid-area: buy
}

.sk-mkt-dt-cover {
    position: relative;
    aspect-ratio: 16/6.4;
    max-height: 300px;
    border-radius: var(--sk-r-lg);
    overflow: hidden;
    border: 1px solid var(--sk-line);
    background: linear-gradient(135deg,#fff4d4,#ffe49e);
    margin-bottom: 20px
}

.sk-mkt-dt-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.sk-mkt-dt-cover.ph-on {
    display: grid;
    place-items: center
}

.sk-mkt-dt-cover .ph {
    color: rgba(176,134,16,.55)
}

.sk-mkt-dt-cover .ph svg {
    width: 64px;
    height: 64px
}

.sk-mkt-dt-cover .tags {
    position: absolute;
    top: 13px;
    inset-inline-start: 13px;
    display: flex;
    gap: 7px
}

.sk-mkt-dt-cover .tag {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 8px
}

.sk-mkt-dt-cover .tag.tag-exam {
    background: rgba(24,26,29,.82);
    color: #fff
}

.sk-mkt-dt-cover .tag.tag-free {
    background: var(--sk-amber);
    color: #181a1d
}

[data-theme="dark"] .sk-mkt-dt-cover {
    background: linear-gradient(135deg,#2a2410,#3a3015)
}

[data-theme="dark"] .sk-mkt-dt-cover .ph {
    color: rgba(233,173,0,.4)
}

.sk-mkt-dt-title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.55;
    color: var(--sk-ink);
    margin: 0 0 13px
}

.sk-mkt-dt-lead {
    font-size: 14.5px;
    line-height: 2;
    color: var(--sk-ink-soft);
    margin: 0 0 20px;
    font-weight: 500
}

.sk-mkt-dt-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

.sk-mkt-dt-stats .stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--sk-line);
    border-radius: 10px;
    background: var(--sk-surface);
    font-size: 12.5px;
    color: var(--sk-ink-soft);
    font-weight: 600
}

.sk-mkt-dt-stats .stat svg {
    width: 16px;
    height: 16px;
    color: var(--sk-ink-faint);
    flex-shrink: 0
}

.sk-mkt-dt-stats .stat b {
    color: var(--sk-ink);
    font-weight: 800
}

.sk-mkt-dt-stats .stat.rate svg {
    color: var(--sk-amber)
}

.sk-mkt-dt-section,.sk-mkt-detail .detail-section {
    border-top: 1px solid var(--sk-line);
    padding-top: 26px;
    margin-top: 28px
}

.sk-mkt-dt-section h2,.sk-mkt-detail .detail-section h2 {
    font-size: 17px;
    font-weight: 800;
    color: var(--sk-ink);
    margin: 0 0 15px;
    display: flex;
    align-items: center;
    gap: 10px
}

.sk-mkt-dt-section h2::before,.sk-mkt-detail .detail-section h2::before {
    content: "";
    width: 4px;
    height: 19px;
    border-radius: 3px;
    background: var(--sk-amber);
    flex-shrink: 0
}

.sk-mkt-dt-prose {
    font-size: 14px;
    line-height: 2.05;
    color: var(--sk-ink-soft);
    font-weight: 500
}

.sk-mkt-dt-prose p {
    margin: 0 0 12px
}

.sk-mkt-dt-useful {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0
}

.sk-mkt-dt-useful li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--sk-ink);
    font-weight: 500
}

.sk-mkt-dt-useful li svg {
    width: 21px;
    height: 21px;
    color: var(--sk-amber-deep);
    flex-shrink: 0;
    margin-top: 1px
}

.sk-mkt-dt-specs {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1px;
    background: var(--sk-line);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    overflow: hidden
}

.sk-mkt-dt-specs > div {
    background: var(--sk-surface);
    padding: 14px 17px;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.sk-mkt-dt-specs b {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sk-ink-faint)
}

.sk-mkt-dt-specs span {
    font-size: 13.5px;
    color: var(--sk-ink);
    font-weight: 600;
    line-height: 1.7
}

.sk-mkt-dt-specs a {
    color: var(--sk-amber-deep);
    font-weight: 600
}

.sk-mkt-dt-specs a:hover {
    text-decoration: underline
}

.sk-mkt-dt-buy {
    position: sticky;
    top: 86px;
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    background: var(--sk-surface);
    padding: 21px
}

.sk-mkt-dt-buy .price {
    font-size: 26px;
    font-weight: 800;
    color: var(--sk-ink);
    display: flex;
    align-items: baseline;
    gap: 6px
}

.sk-mkt-dt-buy .price small {
    font-size: 14px;
    font-weight: 600;
    color: var(--sk-ink-soft)
}

.sk-mkt-dt-buy .price.free {
    color: var(--sk-beg)
}

.sk-mkt-dt-buy .buy-note {
    font-size: 12px;
    color: var(--sk-ink-faint);
    margin: 4px 0 17px;
    font-weight: 500
}

.sk-mkt-dt-buy .acts {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.sk-mkt-dt-buy .acts form {
    margin: 0
}

.sk-mkt-dt-buy .acts .sk-btn {
    width: 100%
}

.sk-mkt-dt-buy .qinfo {
    display: flex;
    flex-direction: column;
    gap: 13px;
    border-top: 1px solid var(--sk-line);
    margin-top: 18px;
    padding-top: 17px
}

.sk-mkt-dt-buy .qi {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--sk-ink-soft);
    font-weight: 500
}

.sk-mkt-dt-buy .qi svg {
    width: 18px;
    height: 18px;
    color: var(--sk-amber-deep);
    flex-shrink: 0
}

.sk-mkt-dt-buy .qi b {
    color: var(--sk-ink);
    font-weight: 700;
    margin-inline-start:auto}

.related-list {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(218px,1fr));
    gap: 12px
}

.related-card {
    display: block;
    border: 1px solid var(--sk-line);
    border-radius: 13px;
    padding: 14px 16px;
    background: var(--sk-surface);
    transition: .15s
}

.related-card:hover {
    border-color: var(--sk-amber-line);
    background: var(--sk-amber-soft);
    transform: translateY(-2px)
}

.related-card span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--sk-amber-deep);
    margin-bottom: 6px
}

.related-card b {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sk-ink);
    line-height: 1.65;
    margin-bottom: 8px
}

.related-card small {
    font-size: 12.5px;
    color: var(--sk-ink-soft);
    font-weight: 600
}

.sk-mkt-detail .engagement-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px
}

.sk-mkt-detail .engagement-summary > div {
    flex: 1;
    min-width: 130px;
    border: 1px solid var(--sk-line);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    background: var(--sk-surface-2)
}

.sk-mkt-detail .engagement-summary b {
    display: block;
    font-size: 21px;
    font-weight: 800;
    color: var(--sk-ink)
}

.sk-mkt-detail .engagement-summary span {
    font-size: 11.5px;
    color: var(--sk-ink-faint);
    font-weight: 600
}

.sk-mkt-detail .engagement-form-card {
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    padding: 18px;
    margin-bottom: 18px;
    background: var(--sk-surface)
}

.sk-mkt-detail .engagement-form-card h3 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sk-ink);
    margin: 0 0 14px
}

.sk-mkt-detail .engagement-grid {
    display: grid;
    gap: 11px;
    margin: 11px 0
}

.sk-mkt-detail .engagement-form input[type=text],.sk-mkt-detail .engagement-form textarea,.sk-mkt-detail .engagement-form select {
    width: 100%;
    border: 1px solid var(--sk-line);
    border-radius: 10px;
    padding: 10px 13px;
    font-family: inherit;
    font-size: 13px;
    background: var(--sk-surface);
    color: var(--sk-ink)
}

.sk-mkt-detail .engagement-form textarea {
    min-height: 90px;
    resize: vertical
}

.sk-mkt-detail .engagement-hint {
    font-size: 12px;
    color: var(--sk-ink-faint);
    margin: 8px 0 0
}

.sk-mkt-detail .engagement-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 6px
}

.sk-mkt-detail .engagement-item {
    border: 1px solid var(--sk-line);
    border-radius: 13px;
    padding: 15px 17px;
    background: var(--sk-surface)
}

.sk-mkt-detail .engagement-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 9px;
    font-size: 12.5px;
    color: var(--sk-ink-soft);
    font-weight: 600
}

.sk-mkt-detail .engagement-item-head b {
    color: var(--sk-ink);
    font-weight: 700
}

.sk-mkt-detail .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--sk-r-sm);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: .15s;
    text-decoration: none
}

.sk-mkt-detail .btn.primary {
    background: var(--sk-amber);
    color: #181a1d
}

.sk-mkt-detail .btn.primary:hover {
    background: var(--sk-amber-deep)
}

.sk-mkt-detail .btn.ghost {
    background: var(--sk-surface);
    border-color: var(--sk-line-strong);
    color: var(--sk-ink)
}

.sk-mkt-detail .btn.ghost:hover {
    background: var(--sk-surface-2)
}

.sk-mkt-detail .btn.tiny {
    height: 30px;
    padding: 0 11px;
    font-size: 12px;
    font-weight: 600
}

.sk-mkt-detail .btn.light {
    background: var(--sk-surface-2);
    color: var(--sk-ink-soft);
    border-color: var(--sk-line)
}

@media (max-width: 920px) {
    .sk-mkt-dt-top {
        grid-template-columns:1fr;
        grid-template-areas: "head" "buy" "body";
        row-gap: 4px
    }

    .sk-mkt-dt-buy {
        position: static;
        margin-bottom: 8px
    }

    .sk-mkt-dt-title {
        font-size: 22px
    }

    .sk-mkt-dt-cover {
        aspect-ratio: 16/8;
        max-height: 240px
    }
}

@media (max-width: 560px) {
    .sk-mkt-dt-specs {
        grid-template-columns:1fr
    }

    .sk-mkt-dt-stats .stat {
        font-size: 12px;
        padding: 7px 11px
    }

    .sk-mkt-dt-buy .price {
        font-size: 23px
    }
}

/* ============ صفحهٔ جزئیات محصول (Product Detail — pd) ============ */
.sk-mkt-pd .dlayout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    grid-template-areas: "lead buy" "body buy";
    column-gap: 48px;
    align-items: start;
    padding: 8px 0 64px
}

.sk-mkt-pd .lead-col {
    grid-area: lead;
    min-width: 0
}

.sk-mkt-pd .body-col {
    grid-area: body;
    min-width: 0
}

.sk-mkt-pd .buy {
    grid-area: buy
}

.sk-mkt-pd .skill-breadcrumbs {
    margin: 22px 0 2px
}

.sk-mkt-pd .buy .cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sk-mkt-pd .card .cv img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sk-mkt-pd .badges {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 18px
}

.sk-mkt-pd .bdg {
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--sk-line);
    background: var(--sk-surface);
    color: var(--sk-ink-soft)
}

.sk-mkt-pd .bdg-course {
    background: var(--sk-charcoal);
    color: #fff;
    border-color: var(--sk-charcoal)
}

.sk-mkt-pd .bdg-count {
    color: var(--sk-amber-deep);
    border-color: var(--sk-amber-line);
    background: var(--sk-amber-soft)
}

.sk-mkt-pd h1.title {
    font-size: clamp(26px,3.4vw,34px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.4px;
    margin-bottom: 18px
}

.sk-mkt-pd .measures {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--sk-amber-soft);
    border: 1px solid var(--sk-amber-line);
    border-radius: 12px;
    padding: 15px 18px;
    margin: 4px 0 16px
}

.sk-mkt-pd .measures .ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--sk-amber);
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.sk-mkt-pd .measures .ic svg {
    width: 22px;
    height: 22px;
    color: #181a1d
}

.sk-mkt-pd .measures .tx {
    flex: 1;
    min-width: 0
}

.sk-mkt-pd .measures .tx span {
    font-size: 12.5px;
    color: var(--sk-ink-soft);
    font-weight: 500;
    display: block;
    margin-bottom: 1px
}

.sk-mkt-pd .measures .tx b {
    font-size: 17px;
    font-weight: 700;
    color: var(--sk-ink)
}

.sk-mkt-pd .measures .lv {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

.sk-mkt-pd .measures .lv .name {
    font-size: 13px;
    font-weight: 600
}

.sk-mkt-pd .taxo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--sk-ink-soft);
    font-weight: 500;
    margin-bottom: 11px;
    display: none;
}

.sk-mkt-pd .taxo a {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.sk-mkt-pd .taxo a:hover {
    color: var(--sk-ink)
}

.sk-mkt-pd .taxo .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sk-amber)
}

.sk-mkt-pd .taxo .sep {
    color: var(--sk-ink-faint)
}

.sk-mkt-pd .taxo .sep svg {
    width: 15px;
    height: 15px
}

.sk-mkt-pd .taxo .last {
    color: var(--sk-ink);
    font-weight: 600
}

.sk-mkt-pd .also {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px
}

.sk-mkt-pd .also .lbl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sk-ink);
    font-weight: 600
}

.sk-mkt-pd .also .lbl svg {
    width: 16px;
    height: 16px;
    color: var(--sk-ink-soft)
}

.sk-mkt-pd .also .tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sk-ink);
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    border-radius: 8px;
    padding: 5px 11px;
    transition: .15s
}

.sk-mkt-pd .also .tag:hover {
    border-color: var(--sk-ink-faint)
}

.sk-mkt-pd .also .tag svg {
    width: 13px;
    height: 13px;
    color: var(--sk-ink-faint)
}

.sk-mkt-pd .lead {
    font-size: 15.5px;
    color: var(--sk-ink-soft);
    line-height: 2;
    margin: 2px 0 16px
}

.sk-mkt-pd .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding: 2px 0 16px;
    border-bottom: 1px solid var(--sk-line);
    font-size: 13.5px;
    color: var(--sk-ink-soft);
    font-weight: 500
}

.sk-mkt-pd .meta .m {
    display: inline-flex;
    align-items: center;
    gap: 7px
}

.sk-mkt-pd .meta .m svg {
    width: 17px;
    height: 17px;
    color: var(--sk-ink-soft)
}

.sk-mkt-pd .meta .m b {
    color: var(--sk-ink);
    font-weight: 600
}

.sk-mkt-pd .meta .m.rate svg {
    color: var(--sk-amber)
}

.sk-mkt-pd .provider {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0
}

.sk-mkt-pd .provider .av {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: linear-gradient(135deg,#6b46c1,#322659);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    flex-shrink: 0
}

.sk-mkt-pd .provider .nm b {
    font-size: 14.5px;
    font-weight: 600;
    display: block
}

.sk-mkt-pd .provider .nm span {
    font-size: 12.5px;
    color: var(--sk-ink-faint);
    font-weight: 500
}

.sk-mkt-pd .provider .go {
    margin-inline-start:auto}

.sk-mkt-pd .sec {
    padding-top: 34px;
    margin-top: 34px;
    border-top: 1px solid var(--sk-line)
}

.sk-mkt-pd .sec:first-of-type {
    margin-top: 32px;
    padding-top: 32px
}

.sk-mkt-pd .sec-h {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px
}

.sk-mkt-pd .sec-h h2 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.3px
}

.sk-mkt-pd .sec-h .acc {
    width: 5px;
    height: 18px;
    background: var(--sk-amber);
    border-radius: 3px;
    align-self: center
}

.sk-mkt-pd .sec-sub {
    font-size: 13.5px;
    color: var(--sk-ink-faint);
    font-weight: 500;
    margin-bottom: 20px;
    padding-inline-start:15px}

.sk-mkt-pd .path {
    margin-top: 4px
}

.sk-mkt-pd .prow {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px 0;
    border-bottom: 1px solid var(--sk-line)
}

.sk-mkt-pd .prow:last-child {
    border-bottom: none
}

.sk-mkt-pd .pn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--sk-line);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--sk-ink-faint);
    flex-shrink: 0;
    background: var(--sk-surface)
}

.sk-mkt-pd .prow.free .pn {
    background: var(--sk-amber);
    border-color: var(--sk-amber);
    color: #181a1d
}

.sk-mkt-pd .pmain {
    flex: 1;
    min-width: 0
}

.sk-mkt-pd .pmain h4 {
    font-size: 15.5px;
    font-weight: 600;
    margin-bottom: 4px
}

.sk-mkt-pd .pinfo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--sk-ink-soft);
    font-weight: 400
}

.sk-mkt-pd .pinfo .sk {
    color: var(--sk-ink);
    font-weight: 600
}

.sk-mkt-pd .pinfo .lv {
    font-weight: 400
}

.sk-mkt-pd .pinfo .lv.beg {
    color: var(--sk-beg)
}

.sk-mkt-pd .pinfo .lv.inter {
    color: var(--sk-inter)
}

.sk-mkt-pd .pinfo .lv.adv {
    color: var(--sk-adv)
}

.sk-mkt-pd .pinfo .d {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sk-ink-faint);
    opacity: .6
}

.sk-mkt-pd .pstatus {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px
}

.sk-mkt-pd .pstatus.free {
    background: rgba(31,157,87,.12);
    color: var(--sk-beg);
}

.sk-mkt-pd .pstatus.lock {
    color: var(--sk-ink-faint);
    background: var(--sk-surface-2)
}

.sk-mkt-pd .pstatus.lock svg {
    width: 12px;
    height: 12px
}

.sk-mkt-pd .measured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
    margin-top: 6px
}

.sk-mkt-pd .mitem {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14.5px;
    font-weight: 500
}

.sk-mkt-pd .mitem .ck {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--sk-amber);
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.sk-mkt-pd .mitem .ck svg {
    width: 14px;
    height: 14px;
    color: #181a1d
}

.sk-mkt-pd .audience {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 4px
}

.sk-mkt-pd .aud {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--sk-line);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600
}

.sk-mkt-pd .aud svg {
    width: 17px;
    height: 17px;
    color: var(--sk-amber-deep)
}

.sk-mkt-pd .cert {
    display: flex;
    gap: 16px;
    align-items: center;
    background: var(--sk-amber-soft);
    border-radius: 15px;
    padding: 20px 22px;
    margin-top: 6px
}

.sk-mkt-pd .cert .ic {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: var(--sk-amber);
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.sk-mkt-pd .cert .ic svg {
    width: 28px;
    height: 28px;
    color: #181a1d
}

.sk-mkt-pd .cert b {
    font-size: 15.5px;
    font-weight: 600;
    display: block;
    margin-bottom: 3px
}

.sk-mkt-pd .cert p {
    font-size: 13.5px;
    color: var(--sk-ink-soft);
    line-height: 1.8
}

.sk-mkt-pd .rev-top {
    display: flex;
    gap: 36px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap
}

.sk-mkt-pd .rev-score {
    text-align: center;
    flex-shrink: 0
}

.sk-mkt-pd .rev-score .big {
    font-size: 46px;
    font-weight: 800;
    line-height: 1
}

.sk-mkt-pd .rev-score .stars {
    color: var(--sk-amber);
    font-size: 15px;
    margin: 7px 0 3px
}

.sk-mkt-pd .rev-score small {
    font-size: 12px;
    color: var(--sk-ink-faint);
    font-weight: 500
}

.sk-mkt-pd .rev-bars {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sk-mkt-pd .rev-bar {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 12px;
    color: var(--sk-ink-soft);
    font-weight: 600
}

.sk-mkt-pd .rev-bar .t {
    width: 28px
}

.sk-mkt-pd .rev-bar .track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--sk-surface-3);
    overflow: hidden
}

.sk-mkt-pd .rev-bar .fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--sk-amber)
}

.sk-mkt-pd .rev-bar .p {
    width: 34px;
    text-align: left;
    color: var(--sk-ink-faint)
}

.sk-mkt-pd .review {
    padding: 18px 0;
    border-bottom: 1px solid var(--sk-line)
}

.sk-mkt-pd .review .h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px
}

.sk-mkt-pd .review .av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sk-surface-3);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--sk-ink-soft)
}

.sk-mkt-pd .review .nm {
    font-size: 14px;
    font-weight: 600
}

.sk-mkt-pd .review .st {
    margin-inline-start:auto;color: var(--sk-amber);
    font-size: 13px
}

.sk-mkt-pd .review p {
    font-size: 14px;
    color: var(--sk-ink-soft);
    line-height: 1.85
}

.sk-mkt-pd .morev {
    margin-top: 14px
}

.sk-mkt-pd .buy {
    position: sticky;
    top: 80px
}

.sk-mkt-pd .buy-card {
    border: 1px solid var(--sk-line);
    border-radius: 15px;
    overflow: hidden;
    background: var(--sk-surface)
}

.sk-mkt-pd .buy .cover {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden
}

.sk-mkt-pd .buy .cover .img {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,#ffc218,#e9ad00 55%,#181a1d)
}

.sk-mkt-pd .buy .cover .img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 80% 0,rgba(255,255,255,.25),transparent 60%)
}

.sk-mkt-pd .buy .cover .badge {
    position: absolute;
    top: 11px;
    inset-inline-end: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(10,11,13,.55);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    z-index: 3
}

.sk-mkt-pd .buy .cover .badge svg {
    width: 14px;
    height: 14px
}

.sk-mkt-pd .buy-body {
    padding: 20px
}

.sk-mkt-pd .save {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sk-beg);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px
}

.sk-mkt-pd .save svg {
    width: 17px;
    height: 17px
}

.sk-mkt-pd .price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 9px;
    margin-bottom: 3px
}

.sk-mkt-pd .price-row .p {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.5px
}

.sk-mkt-pd .price-row .u {
    font-size: 13px;
    color: var(--sk-ink-faint);
    font-weight: 600
}

.sk-mkt-pd .price-row .old {
    font-size: 14px;
    color: var(--sk-ink-faint);
    text-decoration: line-through;
    margin-inline-start:auto}

.sk-mkt-pd .buy-note {
    font-size: 12px;
    color: var(--sk-ink-faint);
    font-weight: 500;
    margin-bottom: 16px;
    line-height: 1.7;
    text-align: center
}

.sk-mkt-pd .buy .btn {
    margin-bottom: 9px
}

.sk-mkt-pd .facts {
    margin-top: 10px;
    border-top: 1px solid var(--sk-line);
    padding-top: 6px
}

.sk-mkt-pd .fact {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    font-size: 13.5px;
    border-bottom: 1px solid var(--sk-line)
}

.sk-mkt-pd .fact:last-child {
    border-bottom: none
}

.sk-mkt-pd .fact svg {
    width: 17px;
    height: 17px;
    color: var(--sk-ink-faint)
}

.sk-mkt-pd .fact .k {
    color: var(--sk-ink-soft);
    font-weight: 500
}

.sk-mkt-pd .fact .v {
    margin-inline-start:auto;font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px
}

.sk-mkt-pd .trust {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-size: 12px;
    color: var(--sk-ink-faint);
    font-weight: 500;
    margin-top: 16px
}

.sk-mkt-pd .trust svg {
    width: 14px;
    height: 14px
}

.sk-mkt-pd .related {
    border-top: 1px solid var(--sk-line);
    padding-top: 44px;
    margin-top: 8px
}

.sk-mkt-pd .related .sec-h {
    margin-bottom: 22px
}

.sk-mkt-pd .rel-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.sk-mkt-pd .card {
    border: 1px solid var(--sk-line);
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: .18s var(--sk-ease);
    background: var(--sk-surface)
}

.sk-mkt-pd .card:hover {
    border-color: var(--sk-ink-faint)
}

.sk-mkt-pd .card .cv {
    aspect-ratio: 16/9;
    position: relative
}

.sk-mkt-pd .card .cv .img {
    position: absolute;
    inset: 0
}

.sk-mkt-pd .card .cv .g1 {
    background: linear-gradient(135deg,#ffc218,#e9ad00 60%,#181a1d)
}

.sk-mkt-pd .card .cv .g3 {
    background: linear-gradient(135deg,#2f855a,#1c4532)
}

.sk-mkt-pd .card .cv .ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--sk-surface-2);
    background-image: radial-gradient(rgba(21,23,26,.05) 1.2px,transparent 1.2px);
    background-size: 15px 15px
}

.sk-mkt-pd .card .cv .ph svg {
    width: 36px;
    height: 36px;
    color: var(--sk-ink-faint);
    opacity: .6
}

.sk-mkt-pd .card .cv .t {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    font-size: 10.5px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(10,11,13,.55);
    color: #fff;
    backdrop-filter: blur(6px)
}

.sk-mkt-pd .card-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.sk-mkt-pd .card h3 {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 9px
}

.sk-mkt-pd .card .ms {
    font-size: 12px;
    color: var(--sk-ink-soft);
    margin-bottom: 13px
}

.sk-mkt-pd .card .ms b {
    color: var(--sk-ink);
    font-weight: 600
}

.sk-mkt-pd .card .ft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 13px;
    border-top: 1px solid var(--sk-line);
    margin-top: auto;
    font-size: 12.5px
}

.sk-mkt-pd .card .ft .pr {
    font-weight: 700
}

.sk-mkt-pd .card .ft .rt {
    color: var(--sk-ink);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px
}

.sk-mkt-pd .card .ft .rt svg {
    width: 13px;
    height: 13px;
    color: var(--sk-amber)
}

.sk-mkt-pd .mobuy {
    display: none
}

/* نوار سطح سطح‌محور */
.sk-mkt-pd .bars {
    display: flex;
    gap: 3px;
    flex-shrink: 0
}

.sk-mkt-pd .bars i {
    width: 14px;
    height: 6px;
    border-radius: 999px;
    background: var(--sk-surface-3)
}

.sk-mkt-pd .bars.beg i:nth-child(-n+1) {
    background: var(--sk-beg)
}

.sk-mkt-pd .bars.inter i:nth-child(-n+2) {
    background: var(--sk-inter)
}

.sk-mkt-pd .bars.adv i:nth-child(-n+3) {
    background: var(--sk-adv)
}

.sk-mkt-pd .bars.exp i {
    background: var(--sk-charcoal)
}

.sk-mkt-pd .fact .bars i {
    width: 11px;
    height: 4px
}

.sk-mkt-pd .engage-reset {
    padding-block:0}

.sk-mkt-pd .buy .sk-btn {
    width: 100%
}

.sk-mkt-pd .pstatus.free {
    transition: .15s
}

.sk-mkt-pd .pstatus.free:hover {
    filter: brightness(.95)
}

.sk-mkt-pd .mobuy .p small {
    font-size: 12px;
    font-weight: 600;
    color: var(--sk-ink-soft)
}

.sk-mkt-pd .measures .lv.beg .name {
    color: var(--sk-beg)
}

.sk-mkt-pd .measures .lv.inter .name {
    color: var(--sk-inter)
}

.sk-mkt-pd .measures .lv.adv .name {
    color: var(--sk-adv)
}

.sk-mkt-pd .measures .lv.exp .name {
    color: var(--sk-ink)
}

.sk-mkt-pd .card .cv .ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--sk-surface-2);
    background-image: radial-gradient(rgba(21,23,26,.05) 1.2px,transparent 1.2px);
    background-size: 15px 15px
}

.sk-mkt-pd .card .cv .ph svg {
    width: 34px;
    height: 34px;
    color: var(--sk-ink-faint);
    opacity: .6
}

.sk-mkt-pd .card .cv .img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center
}

@media(max-width: 960px) {
    .sk-mkt-pd .dlayout {
        grid-template-columns:1fr;
        grid-template-areas: "lead" "buy" "body";
        column-gap: 0
    }

    .sk-mkt-pd .buy {
        position: static;
        margin: 6px 0 26px
    }

    .sk-mkt-pd .rel-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width: 720px) {
    .sk-mkt-pd .measured,.sk-mkt-pd .rel-grid {
        grid-template-columns:1fr
    }

    .sk-mkt-pd .meta {
        gap: 8px 16px
    }

    .sk-mkt-pd .measures .lv {
        display: none
    }

    .sk-mkt-pd .mobuy {
        display: flex;
        position: sticky;
        bottom: 0;
        z-index: 50;
        background: var(--sk-surface);
        border-top: 1px solid var(--sk-line);
        padding: 12px;
        gap: 12px;
        align-items: center
    }

    .sk-mkt-pd .mobuy .p {
        font-weight: 800;
        font-size: 18px
    }

    .sk-mkt-pd .mobuy .sk-btn {
        flex: 1
    }
}

/* ───── صفحهٔ آزمون تکی (exam_detail) ───── */
.sk-mkt-pd .bdg-exam {
    color: var(--sk-amber-deep);
    border-color: var(--sk-amber-line);
    background: var(--sk-amber-soft)
}

.sk-mkt-pd .bdg-free {
    color: var(--sk-beg);
    border-color: rgba(31,157,87,.3);
    background: rgba(31,157,87,.12)
}

.sk-mkt-pd .buy .cover .play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center
}

.sk-mkt-pd .buy .cover .play span {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: grid;
    place-items: center;
    box-shadow: 0 6px 20px rgba(0,0,0,.2)
}

.sk-mkt-pd .buy .cover .play span svg {
    width: 22px;
    height: 22px;
    color: #181a1d;
    margin-inline-start:3px}

.sk-mkt-pd .buy .cover .ff {
    position: absolute;
    top: 11px;
    inset-inline-end: 11px;
    background: rgba(31,157,87,.92);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    z-index: 2
}

.sk-mkt-pd .topics {
    margin-top: 4px
}

.sk-mkt-pd .topic {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid var(--sk-line)
}

.sk-mkt-pd .topic .pn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--sk-amber-soft);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--sk-ink);
    flex-shrink: 0;
    border: 1px solid rgba(226,169,0,.25)
}

.sk-mkt-pd .topic:last-child {
    border-bottom: none
}

.sk-mkt-pd .topic .tx {
    flex: 1;
    min-width: 0
}

.sk-mkt-pd .topic .tx b {
    font-size: 14.5px;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
    color: var(--sk-ink)
}

.sk-mkt-pd .topic .tx span {
    font-size: 13px;
    color: var(--sk-ink-soft)
}

.sk-mkt-pd .topic .wt {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    width: 150px
}

.sk-mkt-pd .topic .wt .bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--sk-surface-3);
    overflow: hidden
}

.sk-mkt-pd .topic .wt .bar i {
    display: block;
    height: 100%;
    background: var(--sk-amber);
    border-radius: 999px
}

.sk-mkt-pd .topic .wt .pct {
    font-size: 13px;
    font-weight: 700;
    width: 36px;
    text-align: left;
    color: var(--sk-ink)
}

.sk-mkt-pd .rules {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px 30px;
    margin-top: 8px
}

.sk-mkt-pd .rule {
    display: flex;
    align-items: center;
    gap: 13px
}

.sk-mkt-pd .rule .ic {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--sk-surface-2);
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.sk-mkt-pd .rule .ic svg {
    width: 20px;
    height: 20px;
    color: var(--sk-ink-soft)
}

.sk-mkt-pd .rule .tx b {
    font-size: 15px;
    font-weight: 700;
    display: block;
    line-height: 1.45;
    color: var(--sk-ink)
}

.sk-mkt-pd .rule .tx span {
    font-size: 12.5px;
    color: var(--sk-ink-faint);
    font-weight: 500
}

@media(max-width: 720px) {
    .sk-mkt-pd .rules {
        grid-template-columns:1fr 1fr
    }

    .sk-mkt-pd .topic {
        gap: 12px
    }

    .sk-mkt-pd .topic .wt {
        width: 104px
    }
}

@media(max-width: 460px) {
    .sk-mkt-pd .rules {
        grid-template-columns:1fr
    }
}

/* تفاوت‌های مخصوص صفحهٔ آزمون (مطابق exam-detail-preview، نه course) */
.sk-mkt-pd--exam .provider .av {
    border-radius: 50%;
    background: linear-gradient(135deg,#2b6cb0,#1a365d)
}

.sk-mkt-pd--exam .buy .cover .img {
    background: linear-gradient(135deg,#2b6cb0,#1a365d)
}

.sk-mkt-pd--exam .sec-h {
    align-items: center
}

/* Demo/UI fix: product detail engagement, rating and review section */
.sk-mkt-pd .engage-reset {
    margin-top: 18px
}

.sk-mkt-pd .engagement-box {
    display: block
}

.sk-mkt-pd .engagement-rev-top {
    margin: 4px 0 22px;
    align-items: center
}

.sk-mkt-pd .engagement-rating-card {
    border: 1px solid var(--sk-line);
    border-radius: 16px;
    background: var(--sk-surface);
    padding: 18px 20px;
    margin: 8px 0 26px;
    box-shadow: 0 8px 24px rgba(10,11,13,.035)
}

.sk-mkt-pd .engagement-rating-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px
}

.sk-mkt-pd .engagement-rating-head h3,.sk-mkt-pd .engagement-list h3,.sk-mkt-pd .engagement-qa-block h3 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.25px;
    color: var(--sk-ink);
    margin: 0 0 6px
}

.sk-mkt-pd .engagement-rating-head p {
    font-size: 13px;
    color: var(--sk-ink-faint);
    font-weight: 500;
    line-height: 1.9;
    margin: 0
}

.sk-mkt-pd .engagement-state-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border-radius: 999px;
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    color: var(--sk-ink-soft);
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 11px
}

.sk-mkt-pd .engagement-state-badge.status-published {
    background: rgba(31,157,87,.11);
    color: var(--sk-beg);
    border-color: rgba(31,157,87,.22)
}

.sk-mkt-pd .engagement-state-badge.status-pending {
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep);
    border-color: var(--sk-amber-line)
}

.sk-mkt-pd .engagement-rating-form {
    display: block
}

.sk-mkt-pd .engagement-score-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px
}

.sk-mkt-pd .engagement-score-label {
    font-size: 13.5px;
    color: var(--sk-ink);
    font-weight: 700
}

.sk-mkt-pd .engagement-score-options {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap
}

.sk-mkt-pd .engagement-star-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--sk-line);
    border-radius: 999px;
    padding: 7px 11px;
    background: var(--sk-surface-2);
    cursor: pointer;
    transition: .15s;
    user-select: none
}

.sk-mkt-pd .engagement-star-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.sk-mkt-pd .engagement-star-option .star {
    font-size: 18px;
    line-height: 1;
    color: var(--sk-amber)
}

.sk-mkt-pd .engagement-star-option small {
    font-size: 11px;
    color: var(--sk-ink-soft);
    font-weight: 700
}

.sk-mkt-pd .engagement-star-option:hover,.sk-mkt-pd .engagement-star-option:has(input:checked) {
    border-color: var(--sk-amber-line);
    background: var(--sk-amber-soft);
    transform: translateY(-1px)
}

.sk-mkt-pd .engagement-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
    margin: 11px 0
}

.sk-mkt-pd .engagement-grid--thread {
    grid-template-columns: 160px minmax(0,1fr)
}

.sk-mkt-pd .engagement-form input[type=text],.sk-mkt-pd .engagement-form textarea,.sk-mkt-pd .engagement-form select {
    width: 100%;
    border: 1px solid var(--sk-line);
    border-radius: 12px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 13.5px;
    background: var(--sk-surface);
    color: var(--sk-ink);
    outline: 0;
    transition: .15s
}

.sk-mkt-pd .engagement-form textarea {
    min-height: 104px;
    resize: vertical;
    line-height: 1.9
}

.sk-mkt-pd .engagement-form input[type=text]:focus,.sk-mkt-pd .engagement-form textarea:focus,.sk-mkt-pd .engagement-form select:focus {
    border-color: var(--sk-amber-line);
    box-shadow: 0 0 0 4px rgba(255,194,24,.13)
}

.sk-mkt-pd .engagement-form .btn {
    margin-top: 12px
}

.sk-mkt-pd .engagement-login-note,.sk-mkt-pd .engagement-access-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-radius: 14px;
    background: var(--sk-amber-soft);
    border: 1px solid var(--sk-amber-line);
    padding: 15px 16px
}

.sk-mkt-pd .engagement-login-note span,.sk-mkt-pd .engagement-access-note span {
    font-size: 13.5px;
    color: var(--sk-ink-soft);
    line-height: 1.8
}

.sk-mkt-pd .engagement-access-note {
    align-items: flex-start;
    flex-direction: column
}

.sk-mkt-pd .engagement-access-note b {
    font-size: 14.5px;
    color: var(--sk-ink)
}

.sk-mkt-pd .engagement-review-list {
    margin-top: 8px
}

.sk-mkt-pd .engagement-review-list h3,.sk-mkt-pd .engagement-qa-block h3 {
    margin: 18px 0 10px
}

.sk-mkt-pd .engagement-public-review h4 {
    display: none
}

.sk-mkt-pd .engagement-public-review .inline-report {
    margin-top: 8px
}

.sk-mkt-pd .engagement-public-review .inline-report button {
    border: 0;
    background: transparent;
    color: var(--sk-ink-faint);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer
}

.sk-mkt-pd .engagement-empty {
    border: 1px dashed var(--sk-line);
    border-radius: 14px;
    padding: 15px 17px;
    background: var(--sk-surface-2)
}

.sk-mkt-pd .engagement-qa-block {
    border-top: 1px solid var(--sk-line);
    margin-top: 26px;
    padding-top: 20px
}

.sk-mkt-pd .engagement-thread-form {
    border: 1px solid var(--sk-line);
    border-radius: 16px;
    padding: 16px;
    background: var(--sk-surface-2);
    margin-bottom: 15px
}

.sk-mkt-pd .engagement-thread-list {
    display: grid;
    gap: 10px
}

.sk-mkt-pd .engagement-thread-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--sk-line);
    border-radius: 13px;
    background: var(--sk-surface);
    padding: 14px 16px
}

.sk-mkt-pd .engagement-thread-main {
    min-width: 0
}

.sk-mkt-pd .engagement-thread-main b {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sk-ink);
    margin-bottom: 3px
}

.sk-mkt-pd .engagement-thread-main span {
    font-size: 12px;
    color: var(--sk-ink-faint);
    font-weight: 600
}

@media(max-width: 720px) {
    .sk-mkt-pd .engagement-rev-top {
        gap:20px
    }

    .sk-mkt-pd .engagement-rating-head {
        display: block
    }

    .sk-mkt-pd .engagement-grid--thread {
        grid-template-columns: 1fr
    }

    .sk-mkt-pd .engagement-login-note {
        align-items: flex-start;
        flex-direction: column
    }

    .sk-mkt-pd .engagement-thread-item {
        align-items: flex-start;
        flex-direction: column
    }

    .sk-mkt-pd .engagement-thread-item .btn {
        width: 100%
    }

    .sk-mkt-pd .engagement-score-options {
        flex-direction: row-reverse;
        gap: 6px
    }

    .sk-mkt-pd .engagement-star-option {
        padding: 7px 9px
    }
}

/* ════════ صفحهٔ پروفایل (طراح / آموزشگاه) — هماهنگ با .sk-mkt-pd ════════ */
.sk-mkt-pd--profile .prof-hero {
    margin-bottom: 30px
}

.sk-mkt-pd--profile .prof-banner {
    position: relative;
    height: 172px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: -44px
}

.sk-mkt-pd--profile .prof-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.sk-mkt-pd--profile .prof-banner-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.34))
}

.sk-mkt-pd--profile .prof-head {
    display: flex;
    align-items: flex-end;
    gap: 20px
}

.sk-mkt-pd--profile .prof-head.has-banner {
    position: relative;
    padding-inline:6px}

.sk-mkt-pd--profile .prof-av {
    width: 94px;
    height: 94px;
    border-radius: 24px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(135deg,#2b6cb0,#1a365d);
    overflow: hidden
}

.sk-mkt-pd--profile .prof-head.has-banner .prof-av {
    border: 3px solid var(--sk-surface)
}

.sk-mkt-pd--profile .prof-av img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sk-mkt-pd--profile .prof-id {
    flex: 1;
    min-width: 0;
    padding-bottom: 3px
}

.sk-mkt-pd--profile .prof-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sk-info);
    background: var(--sk-info-soft);
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 10px
}

.sk-mkt-pd--profile .prof-role svg {
    width: 14px;
    height: 14px
}

.sk-mkt-pd--profile .prof-id h1.title {
    margin-bottom: 7px
}

.sk-mkt-pd--profile .prof-headline {
    font-size: 15px;
    color: var(--sk-ink-soft);
    line-height: 1.6;
    margin-bottom: 13px;
    max-width: 60ch
}

.sk-mkt-pd--profile .prof-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 20px
}

.sk-mkt-pd--profile .prof-stats .m {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--sk-ink-soft)
}

.sk-mkt-pd--profile .prof-stats .m svg {
    width: 16px;
    height: 16px;
    color: var(--sk-ink-faint)
}

.sk-mkt-pd--profile .prof-stats .m b {
    color: var(--sk-ink);
    font-weight: 600
}

.sk-mkt-pd--profile .prof-stats .m.rate svg {
    color: var(--sk-amber-deep)
}

.sk-mkt-pd--profile .prof-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    flex-shrink: 0;
    padding-bottom: 3px
}

.sk-mkt-pd--profile .prof-social {
    display: flex;
    gap: 8px
}

.sk-mkt-pd--profile .prof-social a {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--sk-line);
    display: grid;
    place-items: center;
    color: var(--sk-ink-soft);
    transition: .15s
}

.sk-mkt-pd--profile .prof-social a:hover {
    border-color: var(--sk-ink-faint);
    color: var(--sk-ink);
    background: var(--sk-surface-2)
}

.sk-mkt-pd--profile .prof-social a svg {
    width: 18px;
    height: 18px
}

.sk-mkt-pd--profile .prof-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 30px;
    align-items: start
}

.sk-mkt-pd--profile .prof-main {
    min-width: 0
}

.sk-mkt-pd--profile .prof-aside {
    position: sticky;
    top: 80px
}

.sk-mkt-pd--profile .prof-card {
    border: 1px solid var(--sk-line);
    border-radius: 15px;
    background: var(--sk-surface);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px
}

.sk-mkt-pd--profile .pb {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.sk-mkt-pd--profile .pb+.pb {
    padding-top: 18px;
    border-top: 1px solid var(--sk-line)
}

.sk-mkt-pd--profile .pb-h {
    font-size: 12px;
    font-weight: 700;
    color: var(--sk-ink-faint);
    letter-spacing: .2px
}

.sk-mkt-pd--profile .pb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.sk-mkt-pd--profile .pb-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sk-ink);
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    border-radius: 8px;
    padding: 5px 10px
}

.sk-mkt-pd--profile .pb-tag svg {
    width: 20px;
    height: 20px;
    color: var(--sk-ok);
    flex-shrink: 0
}

.sk-mkt-pd--profile .pb-tag--soft {
    color: var(--sk-ink-soft)
}

.sk-mkt-pd--profile .pb-text {
    font-size: 13px;
    color: var(--sk-ink-soft);
    line-height: 1.8
}

.sk-mkt-pd--profile .prof-timeline {
    display: flex;
    flex-direction: column
}

.sk-mkt-pd--profile .tl-item {
    display: flex;
    gap: 14px;
    padding-bottom: 18px;
    position: relative
}

.sk-mkt-pd--profile .tl-item:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 5.5px;
    top: 15px;
    bottom: 0;
    width: 1.5px;
    background: var(--sk-line)
}

.sk-mkt-pd--profile .tl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sk-amber);
    flex-shrink: 0;
    margin-top: 4px;
    box-shadow: 0 0 0 3px var(--sk-amber-soft)
}

.sk-mkt-pd--profile .tl-body {
    flex: 1;
    min-width: 0
}

.sk-mkt-pd--profile .tl-body b {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sk-ink)
}

.sk-mkt-pd--profile .tl-org {
    display: block;
    font-size: 13px;
    color: var(--sk-info);
    margin-top: 2px
}

.sk-mkt-pd--profile .tl-body p {
    font-size: 15px;
    color: var(--sk-ink-soft);
    line-height: 1.8;
    margin-top: 5px
}

.sk-mkt-pd--profile .prof-ach {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.sk-mkt-pd--profile .ach {
    display: flex;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--sk-line);
    border-radius: 12px;
    background: var(--sk-surface)
}

.sk-mkt-pd--profile .ach-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--sk-amber-soft);
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.sk-mkt-pd--profile .ach-ic svg {
    width: 18px;
    height: 18px
}

.sk-mkt-pd--profile .ach-tx b {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sk-ink)
}

.sk-mkt-pd--profile .ach-tx span {
    display: block;
    font-size: 12.5px;
    color: var(--sk-ink-soft);
    line-height: 1.7;
    margin-top: 3px
}

@media(max-width: 860px) {
    .sk-mkt-pd--profile .prof-layout {
        grid-template-columns:1fr
    }

    .sk-mkt-pd--profile .prof-aside {
        position: static;
        order: -1
    }

    .sk-mkt-pd--profile .prof-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px
    }

    .sk-mkt-pd--profile .prof-actions {
        flex-direction: row;
        align-items: center;
        align-self: stretch;
        justify-content: space-between
    }

    .sk-mkt-pd--profile .prof-ach {
        grid-template-columns: 1fr
    }

    .sk-mkt-pd--profile .prof-banner {
        height: 140px;
        margin-bottom: -38px
    }
}

/* ── تمایز آموزشگاه (آواتار/نقش بنفش، مطابق تم دوره) + تماس و مشخصات ── */
.sk-mkt-pd--institute .prof-av {
    background: linear-gradient(135deg,#6b46c1,#322659)
}

.sk-mkt-pd--institute .prof-role {
    color: #6b46c1;
    background: rgba(107,70,193,.1)
}

.sk-mkt-pd--profile .prof-contact {
    display: flex;
    flex-direction: column;
    gap: 11px
}

.sk-mkt-pd--profile .ct {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--sk-ink-soft);
    line-height: 1.7
}

.sk-mkt-pd--profile .ct svg {
    width: 16px;
    height: 16px;
    color: var(--sk-ink-faint);
    flex-shrink: 0;
    margin-top: 2px
}

.sk-mkt-pd--profile .ct a {
    color: var(--sk-info);
    word-break: break-all
}

.sk-mkt-pd--profile .ct a:hover {
    color: var(--sk-amber-deep)
}

.sk-mkt-pd--profile .prof-meta-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.sk-mkt-pd--profile .ml {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
    align-items: baseline
}

.sk-mkt-pd--profile .ml-k {
    color: var(--sk-ink-faint);
    flex-shrink: 0
}

.sk-mkt-pd--profile .ml-v {
    color: var(--sk-ink);
    font-weight: 500;
    text-align: left
}

/* ════════ صفحهٔ مهارت (skill_node_detail) — برچسب نوع، آمار، چیپ‌های زیرشاخه ════════ */
.sk-mkt-intro--node .sk-mkt-eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--sk-amber-deep);
    background: var(--sk-amber-soft);
    border: 1px solid var(--sk-amber-line);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
    letter-spacing: .2px
}

.sk-mkt-intro--node .sk-mkt-entitle {
    display: block;
    font-size: 13.5px;
    color: var(--sk-ink-faint);
    font-weight: 500;
    margin: -3px 0 10px;
    direction: ltr;
    text-align: right
}

.sk-mkt-nodestats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-top: 18px
}

.sk-mkt-nodestats span {
    font-size: 13.5px;
    color: var(--sk-ink-soft)
}

.sk-mkt-nodestats b {
    color: var(--sk-ink);
    font-weight: 700
}

.sk-mkt-nodecat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sk-ink);
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    border-radius: 999px;
    padding: 5px 13px;
    transition: .15s
}

.sk-mkt-nodecat:hover {
    border-color: var(--sk-ink-faint)
}

.sk-mkt-nodecat svg {
    width: 14px;
    height: 14px;
    color: var(--sk-ink-faint)
}

.sk-mkt-subnodes {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding-block:22px 2px}

.sk-mkt-subnodes .sn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px
}

.sk-mkt-subnodes .sn-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sk-ink-faint);
    flex-shrink: 0;
    min-width: 104px
}

.sk-mkt-subnodes .sn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.sk-mkt-subnodes .sn-chips a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sk-ink);
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 9px;
    padding: 6px 12px;
    transition: .15s
}

.sk-mkt-subnodes .sn-chips a:hover {
    border-color: var(--sk-amber);
    background: var(--sk-amber-soft)
}

.sk-mkt-subnodes .sn-chips a span {
    font-size: 11px;
    font-weight: 700;
    color: var(--sk-ink-faint);
    background: var(--sk-surface-2);
    border-radius: 999px;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center
}

@media(max-width: 600px) {
    .sk-mkt-subnodes .sn-label {
        min-width:0;
        width: 100%
    }
}

/* ════════ فهرست طراح‌ها / آموزشگاه‌ها (designer_list / institute_list) ════════ */
.sk-mkt-provwrap {
    padding-block:26px 54px}

.sk-mkt-provhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap
}

.sk-mkt-clearq {
    font-size: 12.5px;
    color: var(--sk-ink-faint);
    border: 1px solid var(--sk-line);
    border-radius: 999px;
    padding: 4px 12px;
    transition: .15s
}

.sk-mkt-clearq:hover {
    color: var(--sk-ink);
    border-color: var(--sk-ink-faint)
}

.sk-mkt-provgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(288px,1fr));
    gap: 16px
}

.sk-mkt-provcard {
    display: flex;
    flex-direction: column;
    gap: 13px;
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 15px;
    padding: 20px;
    transition: border-color .16s,box-shadow .16s,transform .16s;
    padding-bottom: 15px;
}

.sk-mkt-provcard:hover {
    border-color: var(--sk-ink-faint);
    box-shadow: 0 6px 22px rgba(24,26,29,.06);
    transform: translateY(-2px)
}

.sk-mkt-provcard .pc-top {
    display: flex;
    gap: 13px;
    align-items: center
}

.sk-mkt-provcard .pc-av {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    border-radius: 50%;
    overflow: hidden;
    line-height: 1
}

.sk-mkt-provcard .pc-av img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sk-mkt-provgrid--institute .pc-av {
    background: linear-gradient(135deg,#6b46c1,#322659);
    border-radius: 15px
}

.sk-mkt-provcard .pc-id {
    min-width: 0
}

/* نام تا دو خط می‌شکند و ارتفاع سربرگ برای همه کارت‌ها یکسان می‌ماند
   تا نام‌های کوتاه و بلند، ردیف را نامرتب نکنند. */
.sk-mkt-provcard .pc-id h3 {
    min-height: 2.6em
}

.sk-mkt-provcard .pc-id h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--sk-ink);
    margin: 0 0 3px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.sk-mkt-provcard .pc-id p {
    font-size: 12.5px;
    color: var(--sk-ink-soft);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.sk-mkt-provcard .pc-bio {
    font-size: 12.5px;
    color: var(--sk-ink-faint);
    line-height: 1.75;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.sk-mkt-provcard .pc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    padding-top: 13px;
    border-top: 1px solid var(--sk-line);
    margin-top: auto
}

.sk-mkt-provcard .pc-m {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--sk-ink-soft)
}

.sk-mkt-provcard .pc-m svg {
    width: 14px;
    height: 14px;
    color: var(--sk-ink-faint)
}

.sk-mkt-provcard .pc-m.rate {
    color: var(--sk-ink);
    font-weight: 600
}

.sk-mkt-provcard .pc-m.rate svg {
    color: var(--sk-amber-deep)
}

.sk-mkt-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 52px 20px;
    color: var(--sk-ink-faint);
    font-size: 14px;
    background: var(--sk-surface);
    border: 1px dashed var(--sk-line);
    border-radius: 14px
}

@media(max-width: 560px) {
    .sk-mkt-provgrid {
        grid-template-columns:1fr
    }
}

/* ════════════════ جریان خرید (commerce: cart / checkout / payment / order) ════════════════ */
.sk-cmrc {
    padding-block:30px 58px}

.sk-cmrc.is-narrow {
    max-width: 640px;
    margin-inline:auto}

.sk-cmrc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 22px
}

.sk-cmrc-eyebrow {
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    color: var(--sk-amber-deep);
    background: var(--sk-amber-soft);
    border: 1px solid var(--sk-amber-line);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 11px
}

.sk-cmrc-head h1 {
    font-size: clamp(23px,2.6vw,30px);
    font-weight: 800;
    letter-spacing: -.3px;
    margin: 0 0 7px;
    line-height: 1.3
}

.sk-cmrc-head p {
    font-size: 14px;
    color: var(--sk-ink-soft);
    line-height: 1.7;
    margin: 0;
    max-width: 60ch
}

.sk-cmrc-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 20px;
    align-items: start
}

@media(max-width: 880px) {
    .sk-cmrc-grid {
        grid-template-columns:1fr
    }
}

.sk-cmrc-card {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 16px;
    padding: 4px 22px
}

.sk-cmrc-card.is-pad {
    padding: 24px
}

.sk-cmrc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--sk-line)
}

.sk-cmrc-row:last-child {
    border-bottom: 0
}

.sk-cmrc-row-main {
    min-width: 0
}

.sk-cmrc-pill {
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    color: var(--sk-ink-soft);
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    border-radius: 999px;
    padding: 2px 10px;
    margin-bottom: 8px
}

.sk-cmrc-row-main h3 {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--sk-ink);
    margin: 0 0 5px;
    line-height: 1.4
}

.sk-cmrc-row-main p {
    font-size: 12.5px;
    color: var(--sk-ink-faint);
    line-height: 1.65;
    margin: 0
}

.sk-cmrc-row-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0
}

.sk-cmrc-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--sk-ink);
    white-space: nowrap
}

.sk-cmrc-price.is-free {
    color: var(--sk-ok)
}

.sk-cmrc-x {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--sk-ink-faint);
    border: 1px solid var(--sk-line);
    border-radius: 9px;
    padding: 5px 11px;
    background: none;
    cursor: pointer;
    font-family: inherit;
    transition: .15s
}

.sk-cmrc-x:hover {
    color: var(--sk-danger);
    border-color: var(--sk-danger-line);
    background: var(--sk-danger-soft)
}

.sk-cmrc-x svg {
    width: 14px;
    height: 14px
}

.sk-cmrc-sum {
    position: sticky;
    top: 84px;
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 16px;
    padding: 22px
}

.sk-cmrc-sum h2 {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 14px
}

.sk-cmrc-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    color: var(--sk-ink-soft);
    padding: 9px 0
}

.sk-cmrc-line b {
    color: var(--sk-ink);
    font-weight: 700
}

.sk-cmrc-line.is-total {
    border-top: 1px solid var(--sk-line);
    margin-top: 6px;
    padding-top: 15px;
    font-size: 15px;
    color: var(--sk-ink)
}

.sk-cmrc-line.is-total b {
    font-size: 18px;
    font-weight: 900;
    color: var(--sk-amber-deep)
}

.sk-cmrc-sum .sk-btn {
    width: 100%;
    margin-top: 16px
}

.sk-cmrc-note {
    font-size: 11.5px;
    color: var(--sk-ink-faint);
    line-height: 1.7;
    margin-top: 13px;
    text-align: center
}

.sk-cmrc-center {
    text-align: center;
    padding: 42px 28px 36px
}

.sk-cmrc-ic {
    width: 66px;
    height: 66px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--sk-ok-soft);
    color: var(--sk-ok)
}

.sk-cmrc-ic svg {
    width: 32px;
    height: 32px
}

.sk-cmrc-ic.is-pay {
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep)
}

.sk-cmrc-center h1 {
    font-size: 23px;
    font-weight: 800;
    margin: 0 0 10px
}

.sk-cmrc-center>p {
    font-size: 14px;
    color: var(--sk-ink-soft);
    line-height: 1.8;
    margin: 0 auto 6px;
    max-width: 46ch
}

.sk-cmrc-code {
    display: inline-block;
    font-weight: 800;
    color: var(--sk-ink);
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    border-radius: 8px;
    padding: 2px 11px;
    direction: ltr
}

.sk-cmrc-amount {
    font-size: 30px;
    font-weight: 900;
    color: var(--sk-amber-deep);
    margin: 16px 0 4px
}

.sk-cmrc-amount small {
    font-size: 14px;
    font-weight: 600;
    color: var(--sk-ink-soft)
}

.sk-cmrc-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px
}

.sk-cmrc-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--sk-ink-faint);
    font-size: 14px;
    line-height: 1.8
}

.sk-cmrc-empty svg {
    width: 46px;
    height: 46px;
    color: var(--sk-line);
    margin-bottom: 8px
}

.sk-cmrc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sk-ink-soft);
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    padding: 5px 13px;
    border-radius: 999px
}

.sk-cmrc-form p {
    margin: 0 0 4px
}

.sk-cmrc-form label {
    font-size: 13.5px;
    color: var(--sk-ink-soft);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer
}

.sk-cmrc-form input[type=checkbox] {
    width: 17px;
    height: 17px;
    accent-color: var(--sk-amber-deep)
}

/* دکمهٔ danger سراسری (قبلاً وجود نداشت) */
.sk-btn.sk-btn--danger {
    background: var(--sk-danger);
    color: #fff;
    border-color: transparent
}

.sk-btn.sk-btn--danger:hover {
    filter: brightness(.94)
}

/* ── کارت دستهٔ سبک‌شدهٔ صفحهٔ /exams/ (جایگزین مینی‌کارت‌های سنگین) ── */
.sk-mkt-tax-card {
    justify-content: flex-start
}

.sk-mkt-tax-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.sk-mkt-tax-chips a {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--sk-ink-soft);
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    border-radius: 8px;
    padding: 5px 11px;
    transition: .15s
}

.sk-mkt-tax-chips a:hover {
    border-color: var(--sk-amber);
    color: var(--sk-ink);
    background: var(--sk-amber-soft)
}

.sk-mkt-tax-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sk-ink);
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    border-radius: 12px;
    padding: 11px;
    transition: .16s
}

.sk-mkt-tax-cta:hover {
    background: var(--sk-amber);
    border-color: var(--sk-amber);
    color: #181a1d
}

.sk-mkt-tax-cta svg {
    width: 16px;
    height: 16px
}

/* ── برقِ متحرک روی عکس cover (هر چند ثانیه یک‌بار رد می‌شود) ── */
.sk-mkt-pd .buy .cover::after {
    content: "";
    position: absolute;
    top: -25%;
    height: 150%;
    width: 34%;
    left: -50%;
    background: linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 2;
    animation: sk-cover-shine 4.5s ease-in-out infinite
}

@keyframes sk-cover-shine {
    0% {
        left: -50%
    }

    15% {
        left: 130%
    }

    100% {
        left: 130%
    }
}

@media (prefers-reduced-motion:reduce) {
    .sk-mkt-pd .buy .cover::after {
        animation: none;
        opacity: 0
    }
}

/* =====================================================================



   Free sample test (/exams/free-test/…) — mirrors the REAL exam page.



   AzarMehr · flat · exam-style question cards & options.  EVERYTHING is



   scoped to .freetest so the PUBLIC marketplace header stays untouched.



   ===================================================================== */
@font-face {
    font-family: 'AzarMehr';
    font-style: normal;
    font-weight: 100 950;
    font-display: swap;
    src: url(../../fonts/azarmehr/AzarMehr.woff2?v=fontfix-20260711T152337Z) format('woff2')
}

/* صفحات عمومی (قبل از لاگین): بدنه و اجزای مارکت‌پلیس با AzarMehr —



   عناوین h1–h6 از قانون سراسری testkav-ds.css فونت Pinar می‌گیرند. */
body.sk-mkt-body {
    --sk-font: 'AzarMehr','PinarSK','Pinar','Vazirmatn',Tahoma,system-ui,sans-serif
}

.freetest {
    --sk-font: 'AzarMehr','PinarSK','Pinar','Vazirmatn',Tahoma,system-ui,sans-serif;
    --sk-r-sm: 6px;
    --sk-r-md: 9px;
    --sk-r-lg: 11px;
    width: min(880px,calc(100% - 32px));
    margin: 34px auto 60px;
    color: var(--sk-ink)
}

.freetest,.freetest input,.freetest select,.freetest textarea,.freetest button {
    font-family: var(--sk-font)
}

.freetest *,.freetest *::before,.freetest *::after {
    box-shadow: none!important
}

.freetest h1,.freetest h2,.freetest h3 {
    color: var(--sk-ink);
    letter-spacing: -.02em;
    line-height: 1.35
}

.freetest p {
    color: var(--sk-ink-soft);
    line-height: 1.95;
    margin: 0
}

/* intro (same heading language as the exam pages) */
.freetest__hero {
    margin-bottom: 20px
}

.freetest__kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--sk-r-pill);
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep);
    font-weight: 580;
    font-size: 12px;
    border: 1px solid var(--sk-amber-line)
}

.freetest__kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sk-amber)
}

.freetest__hero h1 {
    margin: 15px 0 10px;
    font-size: clamp(24px,3.2vw,33px);
    font-weight: 680
}

.freetest__hero p {
    font-size: 15px;
    max-width: 62ch
}

.freetest__meta {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

/* pills — identical to the exam */
.freetest .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--sk-r-pill);
    background: var(--sk-surface-2);
    color: var(--sk-ink-soft);
    font-weight: 580;
    font-size: 12px;
    border: 1px solid var(--sk-line)
}

.freetest .pill.gold {
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep);
    border-color: var(--sk-amber-line)
}

/* question card — auto height (unlike the exam's 70vh single-question panel) */
.freetest__form {
    display: grid;
    gap: 16px
}

.freetest-q {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    padding: 24px 26px
}

.freetest-q__head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px
}

.freetest-q__body {
    font-size: 16.5px;
    line-height: 2;
    color: var(--sk-ink);
    font-weight: 600;
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-md);
    padding: 18px 20px;
    margin-bottom: 18px;
    text-align: start
}

.freetest-q__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sk-r-sm);
    margin-top: 8px
}

/* options — EXACT copy of the exam .option-item (checkbox on the trailing edge) */
@counter-style opt-fa {
    system: fixed;
    symbols: "الف" "ب" "ج" "د" "ه" "و" "ز" "ح" "ط" "ی";
    suffix: ""
}

.freetest .option-list {
    counter-reset: opt;
    display: grid;
    gap: 11px
}

.freetest .option-item {
    counter-increment: opt;
    position: relative;
    display: flex;
    gap: 14px;
    align-items: center;
    background: var(--sk-surface);
    border: 1.5px solid var(--sk-line);
    border-radius: var(--sk-r-md);
    padding: 14px 18px;
    cursor: pointer;
    transition: border-color .16s var(--sk-ease),background .16s var(--sk-ease);
    min-height: 58px;
    color: var(--sk-ink)
}

.freetest .option-item input {
    position: absolute!important;
    opacity: 0!important;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0
}

.freetest .option-item::before {
    content: counter(opt,opt-fa);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--sk-surface-2);
    border: 1.5px solid var(--sk-line-strong);
    color: var(--sk-ink-soft);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    transition: .16s var(--sk-ease)
}

.freetest .option-item span {
    flex: 1;
    min-width: 0;
    line-height: 1.8;
    text-align: start;
    font-weight: 500;
    font-size: 15px
}

.freetest .option-item img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sk-r-sm);
    vertical-align: middle
}

.freetest .option-item::after {
    content: none
}

.freetest .option-item:hover {
    border-color: var(--sk-amber-line);
    background: var(--sk-surface-2)
}

.freetest .option-item:hover::before {
    border-color: var(--sk-amber-line);
    color: var(--sk-ink)
}

.freetest .option-item:has(input:checked) {
    border-color: var(--sk-amber);
    background: var(--sk-amber-soft)
}

.freetest .option-item:has(input:checked)::before {
    content: "";
    background-color: var(--sk-amber);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
    background-size: 19px;
    background-position: center;
    background-repeat: no-repeat;
    border-color: var(--sk-amber)
}

.freetest .option-item:has(input:checked) span {
    font-weight: 700
}

/* descriptive answer */
.freetest textarea {
    width: 100%;
    border: 1.5px solid var(--sk-line-strong);
    border-radius: var(--sk-r-md);
    padding: 15px;
    font-size: 15px;
    line-height: 1.9;
    box-sizing: border-box;
    resize: vertical;
    background: var(--sk-surface);
    color: var(--sk-ink);
    text-align: start
}

.freetest textarea:focus {
    outline: 0;
    border-color: var(--sk-amber)
}

.freetest textarea::placeholder {
    color: var(--sk-ink-faint)
}

/* submit — the exam .btn.primary.large */
.freetest__actions {
    margin-top: 22px;
    display: flex;
    justify-content: flex-end
}

.freetest .btn,.freetest__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--sk-r-md);
    padding: 14px 26px;
    font-weight: 680;
    font-size: 15px;
    cursor: pointer;
    transition: .18s ease;
    white-space: nowrap;
    background: var(--sk-amber);
    color: #1a1306
}

.freetest .btn:hover,.freetest__submit:hover {
    filter: brightness(1.03)
}

@media(max-width: 600px) {
    .freetest-q {
        padding:20px 18px
    }

    .freetest__actions {
        justify-content: stretch
    }

    .freetest .btn,.freetest__submit {
        width: 100%
    }
}

/* ---- free-test RESULT page — mirrors the exam result look (scoped, header-safe) ---- */
.freetest-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg,var(--sk-surface) 0%,var(--sk-surface) 55%,var(--sk-amber-soft) 100%);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    padding: 30px 32px;
    margin-bottom: 16px
}

.freetest-hero>div {
    position: relative;
    z-index: 1
}

.freetest-hero h1 {
    margin: 12px 0 8px;
    font-size: clamp(22px,3vw,30px);
    font-weight: 680
}

.freetest-hero p {
    font-size: 14.5px;
    max-width: 60ch
}

.freetest-score-badge {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    gap: 3px;
    min-width: 124px;
    padding: 18px 22px;
    border-radius: var(--sk-r-md);
    background: var(--sk-amber-soft);
    border: 1px solid var(--sk-amber-line)
}

.freetest-score-badge strong {
    font-size: 30px;
    font-weight: 700;
    color: var(--sk-amber-deep);
    line-height: 1
}

.freetest-score-badge span {
    font-size: 11.5px;
    color: var(--sk-ink-soft);
    font-weight: 580
}

.freetest-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-bottom: 22px
}

.freetest-metrics .metric {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-md);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.freetest-metrics .metric span {
    color: var(--sk-ink-soft);
    font-weight: 580;
    font-size: 13px
}

.freetest-metrics .metric strong {
    font-size: 26px;
    font-weight: 700;
    color: var(--sk-ink);
    line-height: 1
}

.freetest-metrics .metric small {
    color: var(--sk-ink-faint);
    font-weight: 500;
    font-size: 12px
}

.freetest-review {
    margin-top: 4px
}

.freetest-review__head {
    margin-bottom: 14px
}

.freetest-review__head h2 {
    margin: 10px 0 0;
    font-size: 19px;
    font-weight: 680;
    color: var(--sk-ink)
}

.freetest-rev {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    padding: 22px 24px;
    margin-bottom: 12px;
    border-inline-start:3px solid var(--sk-line-strong)}

.freetest-rev.ok {
    border-inline-start-color: var(--sk-ok)
}

.freetest-rev.bad {
    border-inline-start-color:var(--sk-danger)}

.freetest-rev.neutral {
    border-inline-start-color: var(--sk-amber)
}

.freetest-rev__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap
}

.freetest-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--sk-r-pill);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent
}

.freetest-tag.ok {
    background: var(--sk-ok-soft);
    color: var(--sk-ok);
    border-color: var(--sk-ok-line)
}

.freetest-tag.bad {
    background: var(--sk-danger-soft);
    color: var(--sk-danger);
    border-color: var(--sk-danger-line)
}

.freetest-tag.neutral {
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep);
    border-color: var(--sk-amber-line)
}

.freetest-answer {
    margin-top: 12px;
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-md);
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--sk-ink)
}

.freetest-answer span {
    color: var(--sk-ink-soft);
    font-weight: 580;
    font-size: 12px;
    display: block;
    margin-bottom: 4px
}

.freetest-explain {
    margin-top: 12px;
    background: var(--sk-amber-soft);
    border: 1px solid var(--sk-amber-line);
    border-radius: var(--sk-r-md);
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--sk-ink)
}

.freetest-explain strong {
    color: var(--sk-amber-deep)
}

.freetest__actions--split {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px
}

.freetest .btn.ghost {
    background: var(--sk-surface-2);
    color: var(--sk-ink);
    border: 1px solid var(--sk-line)
}

@media(max-width: 640px) {
    .freetest-hero {
        flex-direction:column;
        align-items: flex-start
    }

    .freetest-metrics {
        grid-template-columns: 1fr
    }
}

/* Provider directory refinements: instructors/institutes */
.provider-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 26px;
    padding: 16px 18px;
    border: 1px solid var(--sk-amber-line);
    background: linear-gradient(135deg,var(--sk-amber-soft),rgba(255,255,255,.72));
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(208,154,20,.06)
}

.provider-cta b {
    display: block;
    font-size: 15px;
    font-weight: 900;
    color: var(--sk-ink);
    margin-bottom: 4px
}

.provider-cta span {
    font-size: 13px;
    color: var(--sk-ink-soft);
    line-height: 1.8
}

.sk-mkt-provider-layout {
    grid-template-columns: 300px 1fr
}


.sk-mkt-provider-layout .sk-input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--sk-line-strong);
    border-radius: 12px;
    background: var(--sk-surface);
    padding: 0 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--sk-ink)
}

.sk-mkt-provider-layout input.sk-input {
    height: 42px
}

.sk-mkt-provider-layout select.sk-input {
    cursor: pointer
}

.sk-mkt-provider-layout .pc-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: -2px
}

.sk-mkt-provider-layout .pc-tags span {
    font-size: 10px;
    font-weight: 400;
    color: var(--sk-ink-soft);
    background: var(--sk-surface-2);
    border-radius: 999px;
    padding: 3px 9px
}

.sk-mkt-provider-layout .pc-av svg {
    width: 28px;
    height: 28px;
    color: rgba(255,255,255,.9)
}

.sk-mkt-provider-layout .sk-mkt-provcard {
    min-height: 220px
}

.sk-mkt-filter .sk-mkt-fbox {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 16px;
    overflow: hidden
}

.sk-mkt-filter .sk-mkt-fhead {
    padding: 14px 16px;
    border-bottom: 1px solid var(--sk-line);
    display: flex;
    align-items: center;
    justify-content: space-between
}

.sk-mkt-filter .sk-mkt-fhead b {
    font-size: 15px;
    font-weight: 900;
    color: var(--sk-ink)
}

.sk-mkt-filter .sk-mkt-fhead a {
    font-size: 12px;
    font-weight: 800;
    color: var(--sk-amber-deep)
}

.sk-mkt-filter .sk-mkt-fgroup {
    padding: 13px 16px;
    border-bottom: 1px solid var(--sk-line)
}

.sk-mkt-filter .sk-mkt-fgroup:last-of-type {
    border-bottom: none
}

.sk-mkt-filter .sk-mkt-fgroup h3 {
    font-size: 12.5px;
    font-weight: 900;
    color: var(--sk-ink);
    margin: 0 0 9px
}

.sk-mkt-filter .sk-mkt-cbset.no-scroll {
    max-height: none;
    overflow: visible
}

@media(max-width: 760px) {
    .provider-cta {
        align-items:stretch;
        flex-direction: column
    }

    .provider-cta .sk-btn {
        width: 100%;
        justify-content: center
    }

    .sk-mkt-provider-layout {
        grid-template-columns: 1fr
    }
}

.prof-doc-list {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.prof-doc-item {
    border: 1px solid var(--sk-line);
    background: var(--sk-surface-2);
    border-radius: 12px;
    padding: 11px
}

.prof-doc-item b {
    display: block;
    font-size: 12.5px;
    font-weight: 900;
    color: var(--sk-ink);
    line-height: 1.6
}

.prof-doc-item span,.prof-doc-item small {
    display: block;
    font-size: 11.5px;
    color: var(--sk-ink-soft);
    line-height: 1.7
}

.prof-doc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 7px
}

.prof-doc-actions a {
    font-size: 11.5px;
    font-weight: 900;
    color: var(--sk-amber-deep);
    background: var(--sk-amber-soft);
    border: 1px solid var(--sk-amber-line);
    border-radius: 999px;
    padding: 3px 9px
}

.prof-av svg {
    width: 36px;
    height: 36px;
    color: rgba(255,255,255,.88)
}

/* ============================================================================



   2026-07 — /exams/ HOME REDESIGN v5



   (intro hero + live category search + structure card + taxonomy card polish)



   Overrides earlier rules on purpose; keep this section last in the file.



   ============================================================================ */
/* ---- intro hero ---- */
.sk-mkt-intro--home .sk-mkt-intro-grid {
    display: none
}

.sk-mkt-hero2 {
    display: grid;
    grid-template-columns: minmax(0,1fr) 330px;
    gap: 44px;
    align-items: center;
    padding: 20px 0 40px
}

.sk-mkt-eyebrow2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sk-amber-deep);
    background: var(--sk-amber-soft);
    border: 1px solid var(--sk-amber-line);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px
}

.sk-mkt-eyebrow2 i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sk-amber);
    animation: skPulse 2.4s var(--sk-ease) infinite
}

@keyframes skPulse {
    0%,100% {
        transform: scale(1);
        opacity: 1
    }

    50% {
        transform: scale(1.6);
        opacity: .5
    }
}

.sk-mkt-intro--home h1 {
    font-size: 38px;
    font-weight: 950;
    letter-spacing: -4px;
    line-height: 1.3
}

.sk-mkt-intro--home .sk-mkt-hero2-copy>p {
    font-size: 15px;
    color: var(--sk-ink-soft);
    font-weight: 400;
    max-width: 58ch;
    line-height: 1.95;
    margin-bottom: 24px
}

.sk-mkt-intro--home .sk-mkt-hero2-copy>p b {
    color: var(--sk-ink);
    font-weight: 700
}

/* ---- live category search ---- */
.sk-mkt-hsearch {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    height: 58px;
    padding: 0 18px;
    background: var(--sk-surface);
    border: 1px solid var(--sk-line-strong);
    border-radius: 999px;
    box-shadow: 0 18px 44px rgba(20,24,33,.08);
    transition: .2s var(--sk-ease)
}

.sk-mkt-hsearch:focus-within {
    border-color: var(--sk-amber);
    box-shadow: 0 18px 44px rgba(20,24,33,.08),0 0 0 4px var(--sk-amber-soft)
}

.sk-mkt-hsearch .mag {
    width: 20px;
    height: 20px;
    color: var(--sk-ink-faint);
    flex-shrink: 0
}

.sk-mkt-hsearch:focus-within .mag {
    color: var(--sk-amber-deep)
}

.sk-mkt-hsearch input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    height: 100%;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--sk-ink)
}

.sk-mkt-hsearch input::placeholder {
    color: var(--sk-ink-faint)
}

.sk-mkt-hsearch input::-webkit-search-cancel-button {
    display: none
}

.sk-mkt-hsearch .clear {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--sk-ink-faint);
    background: var(--sk-surface-2);
    transition: .15s
}

.sk-mkt-hsearch .clear:hover {
    color: var(--sk-ink);
    background: var(--sk-surface-3)
}

.sk-mkt-hsearch .clear svg {
    width: 13px;
    height: 13px
}

.sk-mkt-hsearch .cnt {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    color: var(--sk-ink);
    background: var(--sk-amber);
    border-radius: 999px;
    padding: 6px 13px;
    white-space: nowrap
}

/* ---- structure mini-map ---- */
.sk-mkt-structure {
    position: relative;
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 22px 55px rgba(20,24,33,.07)
}

.sk-mkt-structure .tt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 900;
    color: var(--sk-ink);
    margin-bottom: 14px
}

.sk-mkt-structure .tt::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--sk-amber);
    border-radius: 2px
}

.sk-mkt-structure .node {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sk-ink);
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    border-radius: 12px;
    padding: 9px 12px
}

.sk-mkt-structure .node .ic {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--sk-amber-soft);
    display: grid;
    place-items: center;
    color: var(--sk-amber-deep);
    flex-shrink: 0
}

.sk-mkt-structure .node .ic svg {
    width: 15px;
    height: 15px
}

.sk-mkt-structure .node.root {
    background: var(--sk-charcoal);
    color: #fff;
    border-color: transparent
}

.sk-mkt-structure .node.root .ic {
    background: rgba(255,194,24,.18);
    color: var(--sk-amber)
}

.sk-mkt-structure .branches {
    position: relative;
    margin: 10px 0 0;
    padding-inline-start:22px;display: flex;
    flex-direction: column;
    gap: 8px
}

.sk-mkt-structure .branches::before {
    content: "";
    position: absolute;
    inset-inline-start: 10px;
    top: -6px;
    bottom: 16px;
    width: 2px;
    border-inline-start:2px dashed var(--sk-line-strong)}

.sk-mkt-structure .branches .node {
    position: relative
}

.sk-mkt-structure .branches .node::before {
    content: "";
    position: absolute;
    inset-inline-start: -12px;
    top: 50%;
    width: 12px;
    height: 2px;
    border-top: 2px dashed var(--sk-line-strong)
}

.sk-mkt-structure small {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--sk-ink-faint);
    margin-top: 12px;
    line-height: 1.8
}

/* ---- taxonomy card polish ---- */
.sk-mkt-tax-card {
    padding: 12px 12px 14px;
    gap: 11px
}

.sk-mkt-tax-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 60px rgba(20,24,33,.12);
    border-color: var(--sk-amber-line)
}

.sk-mkt-tax-visual {
    aspect-ratio: 16/9;
    border-radius: 14px;
    isolation: isolate
}

.sk-mkt-tax-visual img {
    transition: transform .55s var(--sk-ease),filter .55s var(--sk-ease)
}

.sk-mkt-tax-card:hover .sk-mkt-tax-visual img {
    transform: scale(1.07);
    filter: saturate(1.12) brightness(1.03)
}

/* light sweep */
.sk-mkt-tax-visual .sheen {
    position: absolute;
    top: -8%;
    bottom: -8%;
    width: 36%;
    inset-inline-start: -55%;
    z-index: 1;
    background: linear-gradient(105deg,transparent 0%,rgba(255,255,255,.38) 50%,transparent 100%);
    transform: skewX(-16deg);
    pointer-events: none;
    transition: inset-inline-start .05s
}

.sk-mkt-tax-card:hover .sk-mkt-tax-visual .sheen {
    inset-inline-start: 135%;
    transition: inset-inline-start .75s var(--sk-ease) .05s
}

/* bottom overlay + enter chip */
.sk-mkt-tax-visual .ov {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(to top,rgba(16,18,21,.72) 0%,rgba(16,18,21,.28) 38%,transparent 62%);
    opacity: 0;
    transition: opacity .3s var(--sk-ease)
}

.sk-mkt-tax-visual .ov .go {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--sk-amber);
    color: #181a1d;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transform: translateY(10px);
    transition: transform .32s var(--sk-ease) .04s
}

.sk-mkt-tax-visual .ov .go svg {
    width: 17px;
    height: 17px
}

.sk-mkt-tax-visual .ov b {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    transform: translateY(10px);
    transition: transform .32s var(--sk-ease) .09s;
    text-shadow: 0 2px 10px rgba(0,0,0,.35)
}

.sk-mkt-tax-card:hover .sk-mkt-tax-visual .ov {
    opacity: 1
}

.sk-mkt-tax-card:hover .sk-mkt-tax-visual .ov .go, .sk-mkt-tax-card:hover .sk-mkt-tax-visual .ov b {
    transform: translateY(0)
}

.sk-mkt-tax-visual-fallback .txt {
    font-size: 44px
}

.sk-mkt-tax-visual-fallback svg {
    width: 52px;
    height: 52px
}

/* stats strip replaces old counts/chips */
.sk-mkt-tax-counts,.sk-mkt-tax-chips {
    display: none
}

.sk-mkt-tax-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 2px
}

.sk-mkt-tax-stats span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sk-ink-soft)
}

.sk-mkt-tax-stats span svg {
    width: 16px;
    height: 16px;
    color: var(--sk-amber-deep)
}

.sk-mkt-tax-stats span b {
    font-size: 15px;
    font-weight: 900;
    color: var(--sk-ink);
    }

.sk-mkt-tax-stats .dv {
    width: 1px;
    height: 16px;
    background: var(--sk-line-strong)
}

.sk-mkt-tax-cta:hover {
    background: var(--sk-amber);
    border-color: var(--sk-amber);
    color: #181a1d
}

.sk-mkt-tax-cta svg {
    transition: transform .2s var(--sk-ease)
}

.sk-mkt-tax-cta:hover svg {
    transform: translateX(-3px)
}

/* no-result state for live search */
.sk-mkt-tax-nores {
    margin-top: 18px;
    text-align: center;
    padding: 44px 20px;
    border: 1px dashed var(--sk-line-strong);
    border-radius: 18px;
    color: var(--sk-ink-soft)
}

.sk-mkt-tax-nores svg {
    width: 34px;
    height: 34px;
    margin: 0 auto 12px;
    color: var(--sk-ink-faint)
}

.sk-mkt-tax-nores b {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--sk-ink);
    margin-bottom: 4px
}

.sk-mkt-tax-nores span {
    font-size: 13px;
    font-weight: 500
}

/* ---- responsive ---- */
@media(max-width: 1080px) {
    .sk-mkt-hero2 {
        grid-template-columns:minmax(0,1fr) 300px;
        gap: 30px
    }
}

@media(max-width: 900px) {
    .sk-mkt-hero2 {
        grid-template-columns:1fr;
        gap: 22px;
        padding-bottom: 30px
    }

    .sk-mkt-structure {
        max-width: 560px
    }

    .sk-mkt-hsearch {
        max-width: none
    }
}

@media(max-width: 520px) {
    .sk-mkt-hsearch {
        height:52px;
        padding: 0 14px
    }

    .sk-mkt-hsearch .cnt {
        display: none
    }

    .sk-mkt-intro--home h1 {
        font-size: 24px
    }
}

@media(prefers-reduced-motion:reduce) {
    .sk-mkt-tax-visual .sheen {
        display: none
    }

    .sk-mkt-tax-visual img {
        transition: none
    }

    .sk-mkt-eyebrow2 i {
        animation: none
    }
}

/* ============================================================================



   2026-07 — CATEGORY PAGE & PRODUCT CARD REDESIGN v6



   (breathing room above footer · glass cover tags · card hover · chips2 rail ·



    node intro polish — same height)



   ============================================================================ */
/* content never touches the shared footer */
.sk-mkt-body #tk-main {
    padding-bottom: 64px
}

/* ---- product card: cover ---- */
.sk-mkt-cover {
    isolation: isolate
}

.sk-mkt-cover .img img {
    transition: transform .55s var(--sk-ease),filter .55s var(--sk-ease);
    /* padding: 15px; */
    /* border-radius: 80px; */
}

.sk-mkt-card:hover .sk-mkt-cover .img img {
    transform: scale(1.06);
    filter: saturate(1.1) brightness(1.03)
}

.sk-mkt-cover .scrim {
    background: #eeeeee00;
}

/* light sweep on hover */
.sk-mkt-cover::before {
    content: "";
    position: absolute;
    top: -8%;
    bottom: -8%;
    width: 34%;
    inset-inline-start: -52%;
    z-index: 3;
    background: linear-gradient(105deg,transparent 0%,rgba(255,255,255,.32) 50%,transparent 100%);
    transform: skewX(-16deg);
    pointer-events: none;
    transition: inset-inline-start .05s
}

.sk-mkt-card:hover .sk-mkt-cover::before {
    inset-inline-start: 130%;
    transition: inset-inline-start .8s var(--sk-ease) .05s
}

/* glass tags — smaller & lighter so the artwork stays visible */
.sk-mkt-cover .tags {
    top: 8px;
    inset-inline-end: 8px;
    gap: 5px
}

.sk-mkt-cover .tag {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    letter-spacing: .1px;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 2px 10px rgba(0,0,0,.14)
}

.sk-mkt-cover .tag-exam {
    background: rgba(255,194,24,.78);
    color: #181a1d
}

.sk-mkt-cover .tag-course {
    background: rgba(16,18,21,.5);
    color: #fff
}

.sk-mkt-cover .tag-free {
    background: rgba(31,157,87,.72);
    color: #fff
}

.sk-mkt-cover .fav {
    top: 8px;
    inset-inline-start: 8px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    /* background: rgba(255,255,255,.6); */
    /* backdrop-filter: blur(10px); */
    -webkit-backdrop-filter: blur(10px);
    /* border: 1px solid rgba(255,255,255,.35); */
}

.sk-mkt-cover .fav svg {
    width: 10px;
    height: 10px;
}

.sk-mkt-cover .fav:hover {
    background: #fff;
    transform: scale(1.08)
}

/* ---- product card: frame & body ---- */
.sk-mkt-card {
    border-radius: 8px;
}

.sk-mkt-card:hover {
    transform: translateY(-4px);
    border-color: var(--sk-amber-line);
    box-shadow: 0 24px 55px rgba(20,24,33,.12)
}

.sk-mkt-card-body h3 {
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 15px;
}

.sk-mkt-card-body h3 a {
    transition: color .2s var(--sk-ease)
}

.sk-mkt-card:hover .sk-mkt-card-body h3 a {
    color: var(--sk-amber-deep)
}

/* ---- chips2 → taxonomy rail (echoes the structure mini-map) ---- */
.sk-mkt-chips2 {
    position: relative;
    gap: 8px;
    margin-bottom: 13px;
    padding-inline-start:9px}

.sk-mkt-chips2::before {
    content: "";
    position: absolute;
    inset-inline-start: 9px;
    top: 10px;
    bottom: 10px;
    border-inline-start:2px dashed var(--sk-line-strong)}

.sk-mkt-chips2 .chip2-group {
    gap: 7px
}

.sk-mkt-chips2 .chip2-icon {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 7px;
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    color: var(--sk-ink-faint);
    margin-inline-start:-10px}

.sk-mkt-chips2 .chip2-icon svg {
    width: 12px;
    height: 12px
}

.sk-mkt-chips2 .chip2-label {
    width: auto;
    font-size: 10px;
    font-weight: 700;
    color: var(--sk-ink-faint)
}

.sk-mkt-chips2 .chip2-label::after {
    content: ":"
}

.sk-mkt-chips2 .chip2-list {
    gap: 0 2px
}

.sk-mkt-chips2 .chip2-list span {
    background: none;
    border-radius: 0;
    padding: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--sk-ink-soft)
}

.sk-mkt-chips2 .chip2-list i {
    display: inline;
    font-style: normal;
    font-size: 11px;
    color: var(--sk-ink-faint);
    margin-inline-end:2px}

.sk-mkt-chips2 .chip2-group.cat .chip2-icon {
    background: var(--sk-amber-soft);
    border-color: var(--sk-amber-line);
    color: var(--sk-amber-deep)
}

.sk-mkt-chips2 .chip2-group.cat .chip2-list span {
    background: none;
    color: var(--sk-amber-deep);
    font-weight: 700
}

/* "همه مشخصات" → quiet text action (scoped above .sk-body button) */
.sk-mkt-card-body .sk-mkt-chips-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: -6px 0 12px;
    padding: 0;
    width: fit-content;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--sk-amber-deep);
    cursor: pointer;
    font-family: inherit
}

.sk-mkt-card-body .sk-mkt-chips-more:hover {
    background: none;
    color: var(--sk-amber-press,#cf9a00)
}

.sk-mkt-card-body .sk-mkt-chips-more svg {
    width: 13px;
    height: 13px;
    transition: transform .18s var(--sk-ease)
}

.sk-mkt-card-body .sk-mkt-chips-more:hover svg {
    transform: translateX(-3px)
}

/* level bars: a touch more presence */
.sk-mkt-level .bars i {
    width: 16px;
    height: 5px
}

/* ---- node intro polish (same height) ---- */
.sk-mkt-intro-grid {
    align-items: center
}

.sk-mkt-intro p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.sk-mkt-search {
    padding: 6px;
    border-width: 1px;
    box-shadow: 0 16px 40px rgba(20,24,33,.07);
    transition: .2s var(--sk-ease)
}

.sk-mkt-search:focus-within {
    border-color: var(--sk-amber);
    box-shadow: 0 16px 40px rgba(20,24,33,.07),0 0 0 4px var(--sk-amber-soft)
}

.sk-mkt-search:focus-within .ic {
    color: var(--sk-amber-deep)
}

.sk-mkt-search .sk-btn {
    border-radius: var(--sk-r-pill)
}

@media(prefers-reduced-motion:reduce) {
    .sk-mkt-cover::before {
        display: none
    }

    .sk-mkt-cover .img img {
        transition: none
    }
}

/* qbar on narrow screens: stacked, sort pills swipeable (fixes 390px overflow) */
@media(max-width: 640px) {
    .sk-mkt-qbar {
        flex-direction:column;
        align-items: stretch;
        gap: 10px
    }

    .sk-mkt-qfilters {
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch
    }

    .sk-mkt-qfilters::-webkit-scrollbar {
        display: none
    }

    .sk-mkt-qbtn {
        flex-shrink: 0
    }

    .sk-mkt-rtools {
        justify-content: space-between
    }
}

/* ============================================================================



   2026-07 — PRODUCT CARD "SELL" PASS v7



   Calm hierarchy: category eyebrow → title → one soft taxline → level →



   social proof → price/CTA. Replaces the chips2 rail (markup removed).



   ============================================================================ */
/* category eyebrow above the title */
.sk-mkt-card-body .sk-mkt-cat-eyebrow {
    display: none;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--sk-ink);
    letter-spacing: .1px;
    transition: .15s;
    font-weight: 500;
}

.sk-mkt-card-body .sk-mkt-cat-eyebrow i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sk-amber)
}

.sk-mkt-card-body .sk-mkt-cat-eyebrow:hover {
    color: var(--sk-ink)
}

.sk-mkt-card-body {
    padding: 16px
}

.sk-mkt-card-body h3 {
    font-size: 14.5px;
    margin-bottom: 15px;
}

/* one calm line of feather-weight pills — icon tells the axis, no labels */
.sk-mkt-taxline {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 13px
}

.sk-mkt-taxline .t {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--sk-ink-soft);
    background: var(--sk-surface-2);
    border-radius: 8px;
    padding: 4px 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sk-mkt-taxline .t svg {
    width: 11px;
    height: 11px;
    color: var(--sk-ink-faint);
    flex-shrink: 0
}

.sk-mkt-taxline button.t {
    border: none;
    cursor: pointer;
    font-family: inherit
}

.sk-mkt-card-body .sk-mkt-taxline .t-more {
    background: rgb(24 24 24 / 0%);
    color: var(--tk-ink);
    font-weight: 500;
    border: none;
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 10.5px;
    gap: 4px;
    border: .5px solid #333;
}

.sk-mkt-card-body .sk-mkt-taxline .t-more svg {
    color: #000000;
    transition: transform .18s var(--sk-ease)
}

.sk-mkt-card-body .sk-mkt-taxline .t-more:hover {
    background: var(--sk-amber);
    color: #181a1d
}

.sk-mkt-card-body .sk-mkt-taxline .t-more:hover svg {
    color: #181a1d;
    transform: translateX(-2px)
}

/* taxline inside the specs modal: roomier */
.sk-mkt-cmodal-body .sk-mkt-taxline {
    gap: 8px;
    margin: 0
}

.sk-mkt-cmodal-body .sk-mkt-taxline .t {
    font-size: 12.5px;
    padding: 7px 12px;
    border-radius: 10px
}

.sk-mkt-cmodal-body .sk-mkt-taxline .t svg {
    width: 14px;
    height: 14px
}

.sk-mkt-cmodal-body .sk-mkt-taxline .t-more {
    display: none
}

/* tighter trust block: level + proof read as one unit */
.sk-mkt-level {
    margin-bottom: 0;
    padding-bottom: 12px
}

.sk-mkt-level .name {
    font-size: 11.5px
}

.sk-mkt-meta {
    gap: 14px
}

.sk-mkt-meta .rate {
    font-size: 13px
}

.sk-mkt-meta .rate svg {
    width: 15px;
    height: 15px
}

/* price & CTA sell the click */
.sk-mkt-price {
    font-size: 19px;
    font-weight: 900
}

.sk-mkt-card:hover .sk-mkt-card-foot .sk-btn--primary {
    box-shadow: 0 10px 22px rgba(255,194,24,.38);
    transform: translateY(-1px)
}

.sk-mkt-card-foot .sk-btn--primary {
    transition: .2s var(--sk-ease)
}

/* ---- specs modal: the real taxonomy tree (root category → branches) ---- */
.sk-mkt-specs-view .spec-root {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sk-charcoal);
    color: #fff;
    border-radius: 14px;
    padding: 12px 14px
}

.sk-mkt-specs-view .spec-root .ic {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255,194,24,.18);
    display: grid;
    place-items: center;
    color: var(--sk-amber);
    flex-shrink: 0
}

.sk-mkt-specs-view .spec-root .ic svg {
    width: 17px;
    height: 17px
}

.sk-mkt-specs-view .spec-root small {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,.55)
}

.sk-mkt-specs-view .spec-root b {
    font-size: 14.5px;
    font-weight: 800;
    margin-inline-start:auto}

.sk-mkt-specs-view .spec-branches {
    position: relative;
    margin-top: 12px;
    padding-inline-start:24px; display: flex;
    flex-direction: column;
    gap: 14px
}

.sk-mkt-specs-view .spec-branches::before {
    content: "";
    position: absolute;
    inset-inline-start: 11px;
    top: -10px;
    bottom: 14px;
    border-inline-start:2px dashed var(--sk-line-strong)}

.sk-mkt-specs-view .spec-group {
    position: relative
}

.sk-mkt-specs-view .spec-group::before {
    content: "";
    position: absolute;
    inset-inline-start: -13px;
    top: 13px;
    width: 13px;
    border-top: 2px dashed var(--sk-line-strong)
}

.sk-mkt-specs-view .g-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--sk-ink);
    margin-bottom: 8px
}

.sk-mkt-specs-view .g-head .ic {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: var(--sk-amber-soft);
    border: 1px solid var(--sk-amber-line);
    display: grid;
    place-items: center;
    color: var(--sk-amber-deep);
    flex-shrink: 0
}

.sk-mkt-specs-view .g-head .ic svg {
    width: 14px;
    height: 14px
}

.sk-mkt-specs-view .g-items {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.sk-mkt-specs-view .g-items span {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sk-ink-soft);
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    border-radius: 9px;
    padding: 6px 12px
}

/* ============================================================================



   2026-07 — PRODUCT DETAIL v9 · EDITORIAL LUXE



   White canvas · oversized type · hairlines · a single amber accent ·



   zero boxes, zero effects — craft over decoration. Scoped to .pd-v8.



   ============================================================================ */
/* ---------- page & grid ---------- */
.pd-v8 .dlayout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 344px;
    grid-template-areas: "lead buy" "body buy";
    column-gap: 64px;
    align-items: start;
    padding: 0 0 88px
}

.pd-v8 .lead-col {
    grid-area: lead;
    position: relative;
    padding: 36px 0 8px;
    min-width: 0
}

.pd-v8 .body-col {
    grid-area: body;
    padding-top: 8px;
    min-width: 0
}

.pd-v8 .buy {
    grid-area: buy;
    margin-top: 56px;
    z-index: 30
}

.pd-v8 .pd-fx {
    display: none
}

.pd-v8 .sec {
    scroll-margin-top: 118px
}

/* ---------- editorial head ---------- */
.pd-v8 .lead-col .skill-breadcrumbs {
    margin: 0 0 26px;
    font-size: 12px;
    letter-spacing: .2px
}

.pd-v8 .badges {
    gap: 0 10px;
    margin-bottom: 20px;
    align-items: baseline
}

.pd-v8 .bdg {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--sk-ink-faint)
}

.pd-v8 .bdg+.bdg::before {
    content: "·";
    margin-inline-end:10px;color: var(--sk-line-strong)
}

.pd-v8 .bdg-exam,.pd-v8 .bdg-course {
    color: var(--sk-amber-deep);
    font-weight: 800
}

.pd-v8 .bdg-free {
    color: var(--sk-ok);
    font-weight: 600
}

.pd-v8 .bdg-count {
    color: var(--sk-ink);
    font-weight: 700
}

.pd-v8 h1.title {
    font-size: clamp(25px,2.9vw,31px);
    font-weight: 900;
    letter-spacing: -.5px;
    line-height: 1.42;
    color: var(--sk-ink);
    margin-bottom: 16px
}

/* byline: designer · institute — plain, tiny avatars */
.pd-v8 .provider--rich,.pd-v8 .provider--stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px 26px;
    flex-wrap: wrap;
    padding: 12px 0 26px;
}

.pd-v8 .provider-card,.pd-v8 .provider-line {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    color: inherit;
    text-decoration: none
}

.pd-v8 .provider-card .av,.pd-v8 .provider-line .av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--sk-charcoal);
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    flex-shrink: 0
}

.pd-v8 .provider-card .av img,.pd-v8 .provider-line .av img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pd-v8 .provider-card--institute .av,.pd-v8 .provider-line .av {
    border-radius: 8px
}

.pd-v8 .provider-card--designer .av {
    border-radius: 50%
}

.pd-v8 .provider-card .nm,.pd-v8 .provider-line .nm {
    display: flex;
    align-items: baseline;
    gap: 6px
}

.pd-v8 .provider-label,.pd-v8 .provider-card .nm span,.pd-v8 .provider-line .nm span {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sk-ink-faint)
}

.pd-v8 .provider-card .nm span,.pd-v8 .provider-line .nm span {
    display: none
}

.pd-v8 .provider-card .nm b,.pd-v8 .provider-line .nm b,.pd-v8 .provider-line .nm b a {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sk-ink)
}

.pd-v8 a.provider-card:hover .nm b,.pd-v8 .provider-line .nm b a:hover {
    color: var(--sk-amber-deep)
}

.pd-v8 .provider-line .go {
    display: none
}

/* meta: one airy hairline-separated row */
.pd-v8 .meta {
    gap: 14px 0;
    padding: 26px 0;
    border-block:1px solid var(--sk-line-2);border-bottom: 1px solid var(--sk-line-2);
    font-weight: 400
}

.pd-v8 .meta .m {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 22px;
    gap: 8px;
    font-size: 13.5px;
    color: var(--sk-ink-faint)
}

.pd-v8 .meta .m:first-child {
    padding-inline-start:0}

.pd-v8 .meta .m+.m {
    border-inline-start:1px solid var(--sk-line-2)}

.pd-v8 .meta .m svg {
    width: 17px;
    height: 17px;
    color: var(--sk-ink-faint)
}

.pd-v8 .meta .m b {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--sk-ink)
}

.pd-v8 .meta .m.rate svg {
    color: var(--sk-amber)
}

/* the single accent: measured skill with a bold amber underline */
.pd-v8 .measures {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    width: fit-content;
    max-width: 100%;
    padding: 26px 0 2px;
    margin: 0;
    gap: 12px
}

.pd-v8 .measures .lv {
    margin-inline-start:14px}

.pd-v8 .measures .ic {
    width: 24px;
    height: 24px;
    background: none;
    border-radius: 0;
    box-shadow: none
}

.pd-v8 .measures .ic svg {
    width: 24px;
    height: 24px
}

.pd-v8 .measures .ic svg * {
    stroke: var(--sk-amber-deep)!important
}

.pd-v8 .measures .tx {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap
}

.pd-v8 .measures .tx span {
    color: var(--sk-ink-faint);
    font-weight: 500;
    font-size: 14px;
    margin: 0
}

.pd-v8 .measures .tx b {
    color: var(--sk-ink);
    font-weight: 900;
    font-size: 21px;
    letter-spacing: -.3px;
    border-bottom: 3px solid var(--sk-amber);
    padding-bottom: 2px
}

.pd-v8 .measures .lv .name {
    font-weight: 700
}

.pd-v8 .measures .bars i {
    background: var(--sk-surface-3)
}

.pd-v8 .measures .bars.beg i:nth-child(-n+1),.pd-v8 .measures .bars.inter i:nth-child(-n+2), .pd-v8 .measures .bars.adv i:nth-child(-n+3) {
    background: var(--sk-amber)
}

.pd-v8 .measures .bars.exp i {
    background: var(--sk-charcoal)
}

.pd-v8 .lead {
    font-size: 16px;
    line-height: 2.15;
    color: var(--sk-ink-soft);
    max-width: 62ch;
    margin: 22px 0 20px
}

/* skills/tools: text, not chips */
.pd-v8 .also {
    gap: 6px 8px;
    margin-bottom: 6px
}

.pd-v8 .also .lbl {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sk-ink)
}

.pd-v8 .also .lbl svg {
    width: 15px;
    height: 15px;
    /* color:var(--sk-amber-deep); */
}

.pd-v8 .also .tag {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sk-ink-soft)
}

.pd-v8 .also .tag:hover {
    color: var(--sk-amber-deep)
}

.pd-v8 .also .tag+.tag::before {
    content: "،";
    margin-inline-end:6px;color: var(--sk-ink-faint)
}

/* ---------- buy: one quiet luxurious card ---------- */
.pd-v8 .buy {
    position: sticky;
    top: 84px
}

.pd-v8 .buy-card {
    border: none;
    border-radius: 24px;
    background: var(--sk-surface);
    box-shadow: 0 2px 6px rgba(24,26,29,.04),0 44px 90px -24px rgba(24,26,29,.16)
}

.pd-v8 .buy .cover {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 24px 24px 0 0
}

.pd-v8 .buy .cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(12,13,16,.28),transparent 42%)
}

.pd-v8 .buy .cover .badge {
    top: 12px;
    inset-inline-end: 12px;
    font-size: 11px;
    padding: 5px 12px;
    background: rgba(12,13,16,.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18)
}

.pd-v8 .buy-body {
    padding: 22px 24px 24px
}

.pd-v8 .price-row {
    margin-bottom: 6px
}

.pd-v8 .price-row .p {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -.6px
}

.pd-v8 .price-row .p small {
    font-weight: 500
}

.pd-v8 .price-row .u {
    font-size: 13px;
    font-weight: 500
}

.pd-v8 .buy-note {
    font-size: 12px;
    margin-bottom: 20px
}

.pd-v8 .buy .sk-btn--primary {
    height: 54px;
    font-size: 15.5px;
    font-weight: 800;
    border-radius: 999px;
    box-shadow: none;
    transition: .2s var(--sk-ease)
}

.pd-v8 .buy .sk-btn--primary:hover {
    background: var(--sk-amber-deep);
    transform: none
}

.pd-v8 .buy .sk-btn--ghost {
    height: 48px;
    border-radius: 999px;
    gap: 8px;
    border-color: var(--sk-line-strong);
    margin-top: 12px;
}

.pd-v8 .facts {
    margin-top: 16px;
    border-top: 1px solid var(--sk-line-2);
    padding-top: 8px
}

.pd-v8 .fact {
    border-bottom: 1px solid var(--sk-line-2);
    padding: 13px 0;
    font-size: 13.5px
}

.pd-v8 .fact svg {
    color: var(--sk-ink-faint)
}

.pd-v8 .fact .k {
    font-weight: 400;
    color: var(--sk-ink-faint)
}

.pd-v8 .fact .v {
    font-weight: 700
}

.pd-v8 .trust {
    background: none;
    border-radius: 0;
    padding: 0;
    margin-top: 18px;
    gap: 7px;
    font-size: 12px
}

.pd-v8 .trust svg {
    color: var(--sk-ok)
}

/* ---------- section nav: refined underline tabs ---------- */
.pd-secnav {
    position: sticky;
    top: 61px;
    z-index: 40;
    margin-bottom: 34px;
    background: var(--sk-surface);
    border-bottom: 1px solid var(--sk-line-2)
}

.pd-v8 .pd-secnav + .sec {
    margin-top: 0;
    padding-top: 0;
    border-top: none
}

.pd-secnav-in {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    width: auto;
    max-width: none
}

.pd-secnav-in::-webkit-scrollbar {
    display: none
}

.pd-secnav-in a {
    position: relative;
    padding: 15px 0;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--sk-ink-faint);
    white-space: nowrap;
    transition: color .18s;
    background: none;
    box-shadow: none
}

.pd-secnav-in a:hover {
    color: var(--sk-ink);
    background: none
}

.pd-secnav-in a.on {
    color: var(--sk-ink);
    font-weight: 800;
    background: none;
    box-shadow: none
}

.pd-secnav-in a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 2.5px;
    background: var(--sk-amber);
    transform: scaleX(0);
    transition: transform .22s var(--sk-ease)
}

.pd-secnav-in a.on::after {
    transform: scaleX(1)
}

/* ---------- sections: editorial rhythm ---------- */
.pd-v8 .sec {
    padding-top: 52px;
    margin-top: 52px;
    border-top: 1px solid var(--sk-line-2)
}

.pd-v8 .body-col .sec:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none
}

.pd-v8 .sec-h {
    margin-bottom: 8px
}

.pd-v8 .sec-h h2 {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.4px
}

.pd-v8 .sec-h .acc {
    width: 22px;
    height: 3px;
    background: var(--sk-amber);
    border-radius: 2px;
    align-self: center
}

.pd-v8 .sec-sub {
    margin-bottom: 26px;
    padding-inline-start:0;font-size: 14px
}

.pd-v8 .sk-mkt-dt-prose {
    font-size: 14px;
    line-height: 2.15;
    color: var(--sk-ink-soft);
    max-width: 85ch;
    font-weight: 400;
}

/* syllabus: quiet gauges */
.pd-v8 .topics {
    border: none;
    border-radius: 0;
    background: none
}

.pd-v8 .topic {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--sk-line-2)
}

.pd-v8 .topic:last-child {
    border-bottom: none
}

.pd-v8 .topic .pn {
    width: auto;
    height: auto;
    border: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--sk-ink-faint);
    flex-shrink: 0;
    min-width: 22px;
    text-align: center
}

.pd-v8 .topic .tx {
    flex: 1;
    min-width: 0
}

.pd-v8 .topic .tx b {
    display: block;
    font-size: 15.5px;
    font-weight: 800;
    margin-bottom: 3px
}

.pd-v8 .topic .tx span {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--sk-ink-faint);
    line-height: 1.9
}

.pd-v8 .topic .wt {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 230px;
    flex-shrink: 0
}

.pd-v8 .topic .wt .bar {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: var(--sk-surface-3);
    overflow: hidden
}

.pd-v8 .topic .wt .bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--sk-amber)
}

.pd-v8 .topic .wt .pct {
    min-width: 40px;
    text-align: start;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--sk-ink);
    background: none;
    border-radius: 0;
    padding: 0
}

/* audience: dotted editorial list */
.pd-v8 .audience {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 14px 40px;
    margin-top: 10px
}

.pd-v8 .aud {
    border: none;
    border-radius: 0;
    padding: 2px 0;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    background: none;
    box-shadow: none
}

.pd-v8 .aud svg {
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--sk-amber-deep);
    flex-shrink: 0
}

.pd-v8 .aud:hover {
    transform: none;
    box-shadow: none
}

/* rules: definition rows */
.pd-v8 .rules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
    margin-top: 6px
}

.pd-v8 .rule {
    display: flex;
    align-items: center;
    gap: 14px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 16px 0;
    background: none;
    border-bottom: 1px solid var(--sk-line-2)
}

.pd-v8 .rule:hover {
    transform: none;
    box-shadow: none
}

.pd-v8 .rule .ic {
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: none;
    color: var(--sk-ink-faint);
    flex-shrink: 0
}

.pd-v8 .rule .ic svg {
    width: 20px;
    height: 20px
}

.pd-v8 .rule .tx {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1;
    justify-content: space-between
}

.pd-v8 .rule .tx b {
    font-size: 15.5px;
    font-weight: 800;
    order: 2
}

.pd-v8 .rule .tx span {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--sk-ink-faint);
    order: 1
}

/* certificate: framed quote */
.pd-v8 .cert {
    background: none;
    border: none;
    border-inline-start:3px solid var(--sk-amber);border-radius: 0;
    padding: 4px 22px 4px 0;
    margin-top: 10px;
    gap: 16px
}

.pd-v8 .cert::before {
    display: none
}

.pd-v8 .cert .ic {
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: none;
    box-shadow: none
}

.pd-v8 .cert .ic svg * {
    stroke: var(--sk-amber-deep)!important
}

.pd-v8 .cert b {
    color: var(--sk-ink);
    font-size: 16px;
    font-weight: 800
}

.pd-v8 .cert p {
    color: var(--sk-ink-faint)
}

/* course path & related: quiet */
.pd-v8 .path {
    border: none;
    border-radius: 0;
    background: none
}

.pd-v8 .prow {
    padding: 18px 0;
    border-bottom: 1px solid var(--sk-line-2)
}

.pd-v8 .pn {
    border-radius: 50%
}

.pd-v8 .card {
    border-radius: 18px;
    border-color: var(--sk-line)
}

.pd-v8 .card .cv {
    overflow: hidden
}

.pd-v8 .card .cv img {
    transition: transform .45s var(--sk-ease)
}

.pd-v8 .card:hover {
    border-color: var(--sk-line-strong);
    box-shadow: 0 24px 50px -18px rgba(24,26,29,.14)
}

.pd-v8 .card:hover .cv img {
    transform: scale(1.04)
}

.pd-v8 .mobuy {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: color-mix(in srgb,var(--sk-surface) 90%,transparent);
    box-shadow: 0 -8px 26px rgba(15,18,25,.07)
}

/* ---------- responsive ---------- */
@media(max-width: 1180px) {
    .pd-v8 .dlayout {
        column-gap:44px
    }
}

@media(max-width: 960px) {
    .pd-v8 .dlayout {
        grid-template-columns:1fr;
        grid-template-areas: "lead" "buy" "body";
        column-gap: 0
    }

    .pd-v8 .lead-col {
        padding-top: 26px
    }

    .pd-v8 .buy {
        margin-top: 18px;
        position: static
    }

    .pd-v8 .rules {
        grid-template-columns: 1fr;
        gap: 0
    }

    .pd-v8 .sec {
        scroll-margin-top: 112px
    }
}

@media(max-width: 720px) {
    .pd-v8 h1.title {
        font-size:28px
    }

    .pd-v8 .meta .m {
        padding: 0 14px
    }

    .pd-v8 .topic {
        flex-wrap: wrap
    }

    .pd-v8 .topic .wt {
        width: 100%;
        padding-inline-start:42px}

    .pd-secnav-in {
        gap: 18px
    }

    .pd-v8 .measures .lv {
        display: none
    }
}

/* ============================================================================



   2026-07 — PD v9.1 · MOTION & INFOGRAPHIC PASS



   Counters, level ring, animated weight bars, icon chips everywhere,



   lighter type scale, tuned rhythm. (Homepage DNA on the product page.)



   ============================================================================ */
/* type scale: heavy → confident */
.pd-v8 h1.title {
    font-weight: 800
}

.pd-v8 .sec-h h2 {
    font-weight: 800;
    font-size: 22px
}

.pd-v8 .price-row .p {
    font-weight: 800
}

.pd-v8 .measures .tx b {
    font-weight: 800
}

.pd-v8 .meta .m b {
    font-weight: 700
}

.pd-v8 .fact .v {
    font-weight: 700
}

.pd-v8 .topic .tx b {
    font-weight: 700
}

.pd-v8 .rule .tx b {
    font-weight: 800
}

.pd-v8 .bdg-exam,.pd-v8 .bdg-course {
    font-weight: 700
}

/* meta → animated stat blocks */
.pd-v8 .meta {
    gap: 10px 34px;
    padding: 24px 0;
    border-block:none;border-bottom: 1px solid var(--sk-line-2)
}

.pd-v8 .meta .m {
    padding: 0;
    border: none!important;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    font-size: 11.5px;
    color: var(--sk-ink-faint)
}

.pd-v8 .meta .m svg {
    width: 36px;
    height: 36px;
    padding: 9px;
    border-radius: 12px;
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep)
}

.pd-v8 .meta .m b {
    font-size: 19px;
    letter-spacing: -.3px;
    margin-inline-end:2px}

.pd-v8 .meta .m.rate svg {
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep)
}

/* level ring (scoped size + colors) */
.pd-v8 .measures {
    padding: 28px 0 6px;
    gap: 16px
}

.pd-v8 .measures .tk-ring {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: none;
}

.pd-v8 .measures .tk-ring svg {
    width: 64px;
    height: 64px
}

.pd-v8 .measures .tk-ring circle {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round
}

.pd-v8 .measures .tk-ring .track {
    stroke: var(--sk-surface-3)
}

.pd-v8 .measures .tk-ring .ring-fill {
    stroke: var(--sk-amber)
}

.pd-v8 .measures .tk-ring .c b {
    font-size: 15px;
    font-weight: 800;
    color: var(--sk-ink)
}

.pd-v8 .measures .tk-ring .c b::after {
    content: "٪";
    font-size: 10px;
    font-weight: 600;
    color: var(--sk-ink-faint);
    margin-inline-start:1px}

.pd-v8 .measures .lv .bars {
    display: none
}

.pd-v8 .measures .lv .name {
    font-size: 13px;
    font-weight: 600;
    color: var(--sk-ink-faint);
    background: var(--sk-surface-2);
    padding: 6px 12px;
    border-radius: 999px
}

.pd-v8 .measures .tx b {
    font-size: 20px
}

/* skills/tools rows with icon chips */
.pd-v8 .also {
    gap: 8px 10px;
    margin-bottom: 9px;
    align-items: center
}

.pd-v8 .also .lbl {
    gap: 8px
}

.pd-v8 .also .lbl svg {
    width: 26px;
    height: 26px;
    padding: 6px;
    border-radius: 8px;
    /* background:var(--sk-amber-soft); */
    /* color:var(--sk-amber-deep); */
}

/* syllabus: bars animate from zero */
.pd-v8 .topic .wt .bar i {
    width: 0;
    transition: width .9s var(--sk-ease)
}

.pd-v8 .topic .pn {
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    min-width: 0;
    font-size: 13px;
    display: grid;
    place-items: center
}

/* audience & rules: icon-chip tiles, soft & alive */
.pd-v8 .aud {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 14px;
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 600;
    gap: 11px;
    transition: .2s var(--sk-ease)
}

.pd-v8 .aud svg {
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 10px;
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep)
}

.pd-v8 .aud:hover {
    transform: translateY(-2px);
    border-color: var(--sk-amber-line);
    box-shadow: 0 12px 28px rgba(20,24,33,.07)
}

.pd-v8 .rules {
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    gap: 12px
}

.pd-v8 .rule {
    border: 1px solid var(--sk-line);
    border-radius: 15px;
    background: var(--sk-surface);
    padding: 14px 16px;
    border-bottom: 1px solid var(--sk-line)
}

.pd-v8 .rule:hover {
    transform: translateY(-2px);
    border-color: var(--sk-amber-line);
    box-shadow: 0 12px 28px rgba(20,24,33,.07)
}

.pd-v8 .rule .ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep)
}

.pd-v8 .rule .ic svg {
    width: 19px;
    height: 19px
}

.pd-v8 .rule .tx {
    display: block
}

.pd-v8 .rule .tx b {
    display: block;
    font-size: 15.5px;
    order: 0
}

.pd-v8 .rule .tx span {
    font-size: 11.5px;
    order: 0
}

/* rhythm */
.pd-v8 .lead-col {
    padding: 34px 0 10px
}

.pd-v8 .sec {
    padding-top: 28px;
    margin-top: 56px;
    border-top: none
}

.pd-v8 .sec-h {
    margin-bottom: 6px
}

.pd-v8 .lead {
    margin: 20px 0 18px
}

/* ---- v9.2 · designed text + lighter weights (everything but the title) ---- */
/* overline badges: icon + text, no boxes */
.pd-v8 .bdg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500
}

.pd-v8 .bdg svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0
}

.pd-v8 .bdg-exam,.pd-v8 .bdg-course {
    font-weight: 700
}

.pd-v8 .bdg-free {
    font-weight: 500
}

.pd-v8 .bdg-count {
    font-weight: 600
}

/* skill/tool items: light designed chips */
.pd-v8 .also .tag {
    background: var(--sk-surface-2);
    border: none;
    box-shadow: none;
    padding: 5px 12px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--sk-ink-soft);
    transition: .18s var(--sk-ease)
}

.pd-v8 .also .tag+.tag::before {
    content: none;
    margin: 0
}

.pd-v8 .also .tag:hover {
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep);
    transform: translateY(-1px)
}

/* secnav tabs with icons */
.pd-secnav-in a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 500
}

.pd-secnav-in a svg {
    width:20px;
    height:20px;
    color: var(--sk-ink-faint);
    transition: color .18s
}

.pd-secnav-in a.on {
    font-weight: 700
}

.pd-secnav-in a.on svg,.pd-secnav-in a:hover svg {
    color: var(--sk-amber-deep)
}

/* weight pass: title stays 800, everything else steps down */
.pd-v8 .sec-h h2 {
    font-weight: 700
}

.pd-v8 .price-row .p {
    font-weight: 700
}

.pd-v8 .measures .tx b {
    font-weight: 700
}

.pd-v8 .meta .m b {
    font-weight: 700
}

.pd-v8 .provider-card .nm b,.pd-v8 .provider-line .nm b,.pd-v8 .provider-line .nm b a {
    font-weight: 500;
}

.pd-v8 .fact .v {
    font-weight: 600
}

.pd-v8 .topic .tx b {
    font-weight: 600
}

.pd-v8 .topic .wt .pct {
    font-weight: 700
}

.pd-v8 .rule .tx b {
    font-weight: 700
}

.pd-v8 .aud {
    font-weight: 500
}

.pd-v8 .measures .tk-ring .c b {
    font-weight: 700
}

.pd-v8 .measures .lv .name {
    font-weight: 500
}

.pd-v8 .buy .sk-btn--primary {
    font-weight: 700
}

.pd-v8 .cert b {
    font-weight: 700
}

.pd-v8 .sk-mkt-chips-more,.pd-v8 .pd-secnav-in a.on {
    font-weight: 700
}

/* gentle hover on stat blocks */
.pd-v8 .meta .m {
    transition: transform .2s var(--sk-ease)
}

.pd-v8 .meta .m:hover {
    transform: translateY(-2px)
}

.pd-v8 .meta .m:hover svg {
    background: var(--sk-amber);
    color: #181a1d
}

.pd-v8 .meta .m svg {
    transition: .2s var(--sk-ease)
}

.pd-v8 .provider-card .av,.pd-v8 .provider-line .av {
    font-weight: 700
}

.pd-v8 .topic .pn {
    font-weight: 700
}

/* ---- v9.3 · reference-language pass (orbit hero object, engage row,



        banded stat strip, pill+line overline, title swash, gradient CTA) ---- */
/* overline: first badge = soft pill with dot, then a thin runway line */
.pd-v8 .badges {
    align-items: center
}

.pd-v8 .badges .bdg:first-child {
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep);
    padding: 7px 14px;
    border-radius: 7px;
    font-weight: 700
}

.pd-v8 .badges .bdg:first-child svg {
    width: 13px;
    height: 13px
}

.pd-v8 .badges::after {
    content: "";
    flex: 1;
    min-width: 40px;
    height: 1px;
    background: var(--sk-line-strong);
    opacity: .6;
    margin-inline-start:6px}

/* title swash (the marker stroke under the title start) */
.pd-v8 h1.title {
    position: relative;
    padding-bottom: 14px
}

.pd-v8 h1.title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -12px;
    width: 216px;
    height: 15px;
    background: linear-gradient(100deg,#e9a90c,#ffeaa8 28%,#f6c64f 46%,#d99a12 68%,#ffe08c 88%,#e9a90c);
    background-size: 240% 100%;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'><path d='M238 6 C200 0 156 16 110 9 C76 4 38 12 3 9 L3 10.5 C40 14 78 7 112 12 C158 19 202 4 238 11 Z' fill='black'/><circle cx='229' cy='3.2' r='2.3' fill='black'/><circle cx='13' cy='15.6' r='1.5' fill='black'/></svg>") no-repeat 100% 50% / 100% 100%;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'><path d='M238 6 C200 0 156 16 110 9 C76 4 38 12 3 9 L3 10.5 C40 14 78 7 112 12 C158 19 202 4 238 11 Z' fill='black'/><circle cx='229' cy='3.2' r='2.3' fill='black'/><circle cx='13' cy='15.6' r='1.5' fill='black'/></svg>") no-repeat 100% 50% / 100% 100%;
    filter: drop-shadow(0 3px 9px rgba(255,194,24,.38));
}

/* engage row: rating + verified purchases */
.pd-v8 .pd-engage {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 2px 0 22px
}

.pd-v8 .eg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 15px;
    font-size: 12.5px
}

.pd-v8 .eg-rate {
    background: var(--sk-surface);
    box-shadow: 0 6px 18px rgba(20,24,33,.07);
    color: var(--sk-ink-faint)
}

.pd-v8 .eg-rate i {
    color: var(--sk-amber);
    font-size: 13px;
    letter-spacing: 2px;
    font-style: normal
}

.pd-v8 .eg-rate b {
    font-size: 15px;
    font-weight: 700;
    color: var(--sk-ink)
}

.pd-v8 .eg-buys {
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep);
    font-weight: 500
}

.pd-v8 .eg-buys svg {
    width: 17px;
    height: 17px
}

.pd-v8 .eg-buys b {
    font-weight: 700
}

/* stat strip: banded four-up (big number / label) */
.pd-v8 .meta {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    gap: 0;
    padding: 0;
    border: 1px solid var(--sk-line);
    border-radius: 18px;
    background: var(--sk-surface);
    overflow: hidden
}

.pd-v8 .meta .m {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 18px 10px 15px;
    border-inline-start:1px solid var(--sk-line-2)}

.pd-v8 .meta .m: first-child {
    border-inline-start:none
}

.pd-v8 .meta .m:hover {
    transform: none
}

.pd-v8 .meta .m svg {
    width: 34px;
    height: 34px;
    padding: 8px
}

.pd-v8 .meta .m b {
    font-size: 21px;
    margin: 0
}

.pd-v8 .meta .m.rate b {
    font-size: 19px
}

/* gradient CTA with icon */
.pd-v8 .buy .sk-btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: linear-gradient(105deg,var(--sk-amber),#f2a91c 85%);
    box-shadow: 0 14px 30px rgba(255,178,24,.35)
}

.pd-v8 .buy .sk-btn--primary:hover {
    background: linear-gradient(105deg,var(--sk-amber-deep),var(--sk-amber));
    transform: translateY(-1px)
}

/* the hero object: orbit + floating seals around the buy card */
.pd-v8 .buy {
    position: sticky;
    top: 84px
}

.pd-v8 .buy::before {
    content: "";
    position: absolute;
    inset: -46px -52px auto auto;
    width: 250px;
    height: 250px;
    border: 1.5px dashed var(--sk-amber-line);
    border-radius: 50%;
    z-index: -1;
    -webkit-mask-image: linear-gradient(200deg,#000 45%,transparent 78%);
    mask-image: linear-gradient(200deg,#000 45%,transparent 78%)
}

.pd-v8 .buy::after {
    content: "✓";
    position: absolute;
    top: -16px;
    inset-inline-start: -14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--sk-amber),var(--sk-amber-deep));
    color: #181a1d;
    font-size: 19px;
    font-weight: 700;
    display: grid;
    place-items: center;
    box-shadow: 0 12px 26px rgba(255,178,24,.4);
    z-index: 2
}

.pd-v8 .buy-card::before {
    content: "★";
    position: absolute;
    bottom: 118px;
    inset-inline-end: -15px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sk-surface);
    color: var(--sk-amber-deep);
    font-size: 15px;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 22px rgba(20,24,33,.14);
    z-index: 2
}

.pd-v8 .buy-card {
    position: relative;
    overflow: visible
}

.pd-v8 .buy-card .cover {
    border-radius: 24px 24px 0 0
}

.pd-v8 .buy-card .buy-body {
    background: var(--sk-surface);
    border-radius: 0 0 24px 24px
}

/* description start bar */
.pd-v8 .lead {
    position: relative;
    padding-inline-start:16px;display: none;
}

.pd-v8 .lead::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 3px;
    background: var(--sk-amber)
}

@media(max-width: 960px) {
    .pd-v8 .buy::before,.pd-v8 .buy::after,.pd-v8 .buy-card::before {
        display:none
    }

    .pd-v8 .meta {
        grid-template-columns: 1fr 1fr
    }

    .pd-v8 .meta .m:nth-child(odd) {
        border-inline-start:none}
}

.pd-v8 .meta .m+.m {
    border-inline-start:1px solid var(--sk-line-2)!important}

@media(max-width: 960px) {
    .pd-v8 .meta .m:nth-child(odd) {
        border-inline-start:none!important
    }
}

/* ---- v9.4 · lighting, compact stats, clear ring, tidy price, perks, nav polish ---- */
/* ambient lighting: warm washes behind head and card */
.pd-v8 {
    position: relative;
    isolation: isolate
}

.pd-v8::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 620px;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(720px 340px at 88% -60px,rgba(255,194,24,.12),transparent 62%), radial-gradient(560px 320px at 6% 30px,rgba(255,170,40,.08),transparent 60%)
}

[data-theme="dark"] .pd-v8::before {
    opacity: .5
}

/* stat strip: compact horizontal cells (icon beside number/label) */
.pd-v8 .meta .m {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: start;
    gap: 12px;
    padding: 15px 18px
}

.pd-v8 .meta .m>* {
    margin: 0
}

.pd-v8 .meta .m svg {
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 12px;
    flex-shrink: 0
}

.pd-v8 .meta .m b {
    font-size: 18px;
    display: block;
    line-height: 1.25
}

.pd-v8 .meta .m {
    font-size: 11.5px;
    line-height: 1.6
}

/* star float: sits on the cover/body seam, never mid-card */
.pd-v8 .buy-card::before {
    content: none
}

.pd-v8 .buy-body {
    position: relative
}

.pd-v8 .buy-body::before {
    content: "★";
    position: absolute;
    top: -17px;
    inset-inline-end: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sk-surface);
    color: var(--sk-amber-deep);
    font-size: 15px;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 22px rgba(20,24,33,.16);
    z-index: 2
}

/* ring: labelled difficulty + explicit level */
.pd-v8 .measures .tk-ring .c {
    gap: 0
}

.pd-v8 .measures .tk-ring .c b {
    font-size: 13.5px
}

.pd-v8 .measures .tk-ring .c span {
    font-size: 8.5px;
    font-weight: 500;
    color: var(--sk-ink-faint);
    margin-top: 1px
}

.pd-v8 .measures .lv .name::before {
    content: "سطح "
}

/* tidy price + trust perks */
.pd-v8 .price-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-bottom: 8px
}

.pd-v8 .price-box .old {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sk-ink-faint);
    text-decoration: line-through;
    text-decoration-color: rgba(214,69,69,.6);
    text-decoration-thickness: 1.5px
}

.pd-v8 .price-box .now {
    display: flex;
    align-items: baseline;
    gap: 7px
}

.pd-v8 .price-box .now b {
    font-size: 31px;
    font-weight: 950;
    letter-spacing: -.6px;
}

.pd-v8 .price-box .now span {
    font-size: 13px;
    font-weight: 500;
    color: var(--sk-ink-faint)
}

.pd-v8 .price-box .now.free b {
    color: var(--sk-ok)
}

.pd-v8 .buy-note {
    margin-bottom: 10px
}

.pd-v8 .buy-perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 10px;
    list-style: none;
    margin: 0 0 18px;
    padding: 12px 14px;
    background: var(--sk-surface-2);
    border-radius: 13px
}

.pd-v8 .buy-perks li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--sk-ink-soft)
}

.pd-v8 .buy-perks li svg {
    width: 14px;
    height: 14px;
    color: var(--sk-ok);
    flex-shrink: 0
}

/* secnav: tidier icon rhythm */
.pd-secnav-in {
    gap: 20px
}

.pd-secnav-in a {
    padding: 14px 2px;
    gap: 6px;
    font-size: 13.5px
}

.pd-secnav-in a svg {
    width:20px;
    height:20px;
    opacity: .75
}

.pd-secnav-in a.on svg,.pd-secnav-in a:hover svg {
    opacity: 1
}

/* ---- v9.5 · stable numbers, centered stat cells, crafted icon chips ---- */
/* counters reserve width → no micro reflow while counting */
.pd-v8 b[data-count] {
    display: inline-block;
    min-width: 1.9ch;
    text-align: center;
    }

.pd-v8 .meta .m:hover svg {
    background: none;
    color: var(--sk-amber-deep)
}

/* crafted icon-chip recipe (skills/tools labels, rules, audience, seals) */
.pd-v8 .also .lbl svg,.pd-v8 .rule .ic,.pd-v8 .aud svg {
    /* background:linear-gradient(145deg,#fff 8%,var(--sk-amber-soft) 92%); */
    /* border:1px solid rgba(233,173,0,.3); */
    /* box-shadow:0 3px 10px rgba(255,194,24,.16); */
}

[data-theme="dark"] .pd-v8 .also .lbl svg,[data-theme="dark"] .pd-v8 .rule .ic,[data-theme="dark"] .pd-v8 .aud svg {
    background: linear-gradient(145deg,var(--sk-surface-2),rgba(255,194,24,.14))
}

.pd-v8 .also .lbl svg {
    width: 28px;
    height: 28px;
    padding: 6.5px;
    border-radius: 9px
}

.pd-v8 .rule .ic {
    border-radius: 13px
}

.pd-v8 .rule .ic svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8
}

.pd-v8 .aud svg {
    border-radius: 11px
}

.pd-v8 .eg-buys svg {
    width: 18px;
    height: 18px
}

/* ---- v9.5 · stat cells centered & breathable · richer icon chips everywhere ---- */
.pd-v8 .meta .m {
    justify-content: center;
    gap: 13px;
    padding: 17px 12px;
    min-height: 78px
}

.pd-v8 .meta .m svg {
    width: 42px;
    height: 42px;
    padding: 10px;
    border-radius: 13px
}

/* the icon recipe: warm gradient chip + inner ring + thicker strokes */
.pd-v8 :is(.meta .m, .also .lbl) > svg, .pd-v8 :is(.rule, .aud) .ic ~ *, /* noop guard */
.pd-v8 .rule .ic, .pd-v8 .aud > svg {
}

.pd-v8 .meta .m svg, .pd-v8 .rule .ic, .pd-v8 .aud > svg, .pd-v8 .also .lbl svg {
    /* background:linear-gradient(150deg,#fff5d6 0%,var(--sk-amber-soft) 70%); */
    /* box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),0 5px 14px rgba(233,173,0,.16); */
    /* color:var(--sk-amber-deep); */
}

[data-theme="dark"] .pd-v8 .meta .m svg, [data-theme="dark"] .pd-v8 .rule .ic, [data-theme="dark"] .pd-v8 .aud > svg, [data-theme="dark"] .pd-v8 .also .lbl svg {
    background: linear-gradient(150deg,rgba(255,194,24,.22),rgba(255,194,24,.1));
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.08),0 5px 14px rgba(0,0,0,.25);
    color: var(--sk-amber)
}

.pd-v8 .meta .m svg [stroke], .pd-v8 .rule .ic svg [stroke], .pd-v8 .aud > svg [stroke], .pd-v8 .also .lbl svg [stroke], .pd-v8 .badges .bdg svg [stroke] {
    stroke-width: 2.2
}

.pd-v8 .rule .ic {
    border-radius: 13px
}

.pd-v8 .aud > svg {
    border-radius: 11px
}

/* stat strip: 4 roomy cells (rating lives in the engage pill above) */
.pd-v8 .meta .m.rate {
    display: none
}

.pd-v8 .meta {
    grid-template-columns: repeat(auto-fit,minmax(160px,1fr))
}

.pd-v8 .meta .m {
    gap: 12px;
    padding: 16px 14px
}

.pd-v8 .meta .m svg {
    width: 40px;
    height: 40px;
    padding: 9px
}

/* ============================================================================



   v9.6 · MOBILE PASS — content first, buy card as closing summary,



   sticky purchase bar across all mobile, tuned spacing rhythm.



   ============================================================================ */
@media(max-width: 960px) {
    /* reading order: head → body → buy summary; sticky bar carries the CTA */ .pd-v8 .dlayout {
        grid-template-areas:"lead" "body" "buy";
        padding-bottom: 96px
    }

    .pd-v8 .buy {
        margin-top: 34px
    }

    .pd-v8 .buy .cover {
        aspect-ratio: 16/8
    }

    .pd-v8 .mobuy {
        display: flex;
        position: sticky;
        bottom: 0;
        z-index: 50;
        gap: 12px;
        align-items: center;
        padding: 11px 14px;
        border-top: 1px solid var(--sk-line)
    }

    .pd-v8 .mobuy .p {
        font-weight: 800;
        font-size: 17px
    }

    .pd-v8 .mobuy .sk-btn {
        flex: 1;
        height: 46px;
        border-radius: 999px;
        font-weight: 700
    }
}

@media(max-width: 720px) {
    .pd-v8 .lead-col {
        padding:20px 0 4px
    }

    .pd-v8 .lead-col .skill-breadcrumbs {
        margin: 0 0 16px
    }

    .pd-v8 .badges {
        margin-bottom: 14px;
        gap: 6px
    }

    .pd-v8 h1.title {
        font-size: 23px;
        line-height: 1.5;
        margin-bottom: 12px;
        padding-bottom: 12px
    }

    .pd-v8 h1.title::after {
        width: 164px;
        height: 12px;
        bottom: -10px
    }

    .pd-v8 .provider--rich,.pd-v8 .provider--stack {
        padding: 14px 0 4px;
        gap: 8px 18px
    }

    .pd-v8 .pd-engage {
        padding: 2px 0 16px;
        gap: 8px
    }

    .pd-v8 .eg {
        padding: 7px 12px;
        font-size: 11.5px
    }

    .pd-v8 .meta {
        grid-template-columns: 1fr 1fr;
        border-radius: 16px
    }

    .pd-v8 .meta .m {
        gap: 10px;
        padding: 13px 10px;
        min-height: 64px;
        font-size: 11px
    }

    .pd-v8 .meta .m svg {
        width: 36px;
        height: 36px;
        padding: 8px
    }

    .pd-v8 .meta .m b {
        font-size: 16px
    }

    .pd-v8 .measures {
        padding: 22px 0 0;
        gap: 12px
    }

    .pd-v8 .measures .tk-ring,.pd-v8 .measures .tk-ring svg {
        width: 56px;
        height: 56px
    }

    .pd-v8 .measures .tx b {
        font-size: 17px
    }

    .pd-v8 .lead {
        margin: 16px 0 14px;
        padding-inline-start:13px;font-size: 14.5px;
        line-height: 2
    }

    .pd-v8 .also {
        gap: 6px 8px
    }

    .pd-v8 .also .lbl svg {
        width: 24px;
        height: 24px;
        padding: 5px
    }

    .pd-secnav {
        margin-bottom: 20px
    }

    .pd-v8 .sec {
        margin-top: 40px;
        padding-top: 20px
    }

    .pd-v8 .sec-h h2 {
        font-size: 19px
    }

    .pd-v8 .buy-body {
        padding: 18px 16px 18px
    }

    .pd-v8 .price-box .now b {
        font-size: 27px
    }

    .pd-v8 .buy-perks li {
        font-size: 11px
    }
}

/* ---- v9.7 · honest level display, clean discount, refined measures/also, alive effects ---- */
/* all-levels variant: icon chip instead of a percentage */
.pd-v8 .measures .msr-ic {
    width: 30px;
    height: 30px;
    border-radius: 16px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    /* background:linear-gradient(150deg,#fff5d6 0%,var(--sk-amber-soft) 70%); */
    /* box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),0 5px 14px rgba(233,173,0,.16); */
    color: var(--tk-ink);
    display: none;
}

.pd-v8 .measures .msr-ic svg {
    width: 26px;
    height: 26px
}

.pd-v8 .measures .msr-ic svg [stroke] {
    stroke-width: 2.2
}

/* measures: label over skill, hairline divider before the level pill */
.pd-v8 .measures {
    gap: 16px;
    padding: 26px 0 4px
}

.pd-v8 .measures .tx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px
}

.pd-v8 .measures .tx span {
    font-size: 12px
}

.pd-v8 .measures .tx b {
    font-size: 21px
}

.pd-v8 .measures .lv {
    position: relative;
    padding-inline-start:18px;margin-inline-start:4px}

.pd-v8 .measures:hover .tx b {
    border-bottom-color: var(--sk-amber-deep)
}

.pd-v8 .measures .tx b {
    transition: border-color .2s var(--sk-ease)
}

/* skills/tools: dotted chips, calmer label */
.pd-v8 .also .lbl {
    font-weight: 600
}

.pd-v8 .also .tag {
    display: inline-flex;
    align-items: center;
    gap: 7px
}

.pd-v8 .also .tag::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sk-amber);
    flex-shrink: 0
}

.pd-v8 .also+.also {
    margin-top: 2px
}

/* discount: old price + computed %off chip on one tidy line */
.pd-v8 .price-box {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    row-gap: 5px
}

.pd-v8 .price-box .old {
    font-size: 12.5px
}

.pd-v8 .price-box .off {
    font-size: 11px;
    font-weight: 700;
    color: #c94f4f;
    background: rgba(214,69,69,.1);
    padding: 4px 10px;
    border-radius: 999px
}

.pd-v8 .price-box .now {
    width: 100%;
    justify-content: center
}

/* effects: slow orbit, CTA shine, cover zoom, seal pop, swash draw-in */
@keyframes pd-orbit {
    to {
        transform: rotate(360deg)
    }
}

.pd-v8 .buy::before {
    animation: pd-orbit 48s linear infinite
}

.pd-v8 .buy .sk-btn--primary {
    position: relative;
    overflow: hidden
}

.pd-v8 .buy .sk-btn--primary::after {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    width: 34%;
    inset-inline-start: -60%;
    background: linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
    transform: skewX(-18deg)
}

.pd-v8 .buy .sk-btn--primary:hover::after {
    inset-inline-start: 140%;
    transition: inset-inline-start .7s ease .05s
}

.pd-v8 .buy .cover img {
    transition: transform .6s var(--sk-ease)
}

.pd-v8 .buy-card:hover .cover img {
    transform: scale(1.05)
}

.pd-v8 .buy::after {
    transition: transform .25s var(--sk-ease)
}

.pd-v8 .buy:hover::after {
    transform: scale(1.1) rotate(10deg)
}

@keyframes pd-swash {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

.pd-v8 h1.title::after {
    transform-origin: 100% 50%;
    animation: pd-swash .8s .25s var(--sk-ease) both,pdGoldFlow 7s linear 1.2s infinite
}

@media(prefers-reduced-motion:reduce) {
    .pd-v8 .buy::before,.pd-v8 h1.title::after {
        animation: none
    }

    .pd-v8 .buy .sk-btn--primary::after {
        display: none
    }
}

/* ============================================================================



   v9.8 · MEASUREMENT PASSPORT — the whole zone recomposed:



   floating stat cards · one warm panel (skill + level spectrum + skills/tools)



   ============================================================================ */
/* engage pill: crafted */
.pd-v8 .eg-buys {
    background: var(--sk-surface);
    box-shadow: 0 6px 18px rgba(20,24,33,.07);
    color: var(--sk-ink-soft);
    font-weight: 500;
    padding: 7px 15px 7px 8px;
    gap: 9px
}

.pd-v8 .eg-buys svg {
    width: 26px;
    height: 26px;
    padding: 5px;
    border-radius: 8px;
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep)
}

.pd-v8 .eg-buys b {
    color: var(--sk-ink)
}

/* stat strip → four floating cards */
.pd-v8 .meta {
    border: none;
    background: none;
    overflow: visible;
    border-radius: 0;
    gap: 12px
}

.pd-v8 .meta .m {
    background: var(--sk-surface);
    border: none!important;
    border-radius: 16px;
    box-shadow: 0 8px 26px rgba(20,24,33,.07);
    padding: 15px 12px;
    min-height: 74px;
    transition: transform .2s var(--sk-ease),box-shadow .2s var(--sk-ease)
}

.pd-v8 .meta .m:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(20,24,33,.1)
}

.pd-v8 .meta .m:last-child b {
    font-size: 14px;
    line-height: 1.5
}

/* the passport panel */
.pd-v8 .msr-panel {
    margin: 24px 0 6px;
    padding: 20px 22px 16px;
    border-radius: 20px;
    background: linear-gradient(170deg,#fffdf4 0%,var(--sk-surface) 60%);
    border: 1px solid rgba(233,173,0,.16);
    box-shadow: 0 16px 46px rgba(233,173,0,.09);
    display: flex;
    flex-direction: column;
    gap: 13px
}

[data-theme="dark"] .pd-v8 .msr-panel {
    background: linear-gradient(170deg,rgba(255,194,24,.07),var(--sk-surface) 60%);
    border-color: rgba(255,194,24,.2);
    box-shadow: 0 16px 46px rgba(0,0,0,.25)
}

.pd-v8 .msr-panel .measures {
    padding: 0 0 15px;
    margin: 0;
    border-bottom: 1px dashed rgba(233,173,0,.3)
}

.pd-v8 .msr-panel .also {
    margin-bottom: 0
}

.pd-v8 .msr-panel .also .lbl svg {
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 6px;
}

.pd-v8 .msr-panel .also .tag {
    background: var(--sk-surface);
    box-shadow: 0 4px 12px rgba(20,24,33,.06);
}

[data-theme="dark"] .pd-v8 .msr-panel .also .tag {
    background: var(--sk-surface-2);
    box-shadow: none
}

/* level display: name over a 4-segment bar; «همه سطوح» = spectrum */
.pd-v8 .measures .lv {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding-inline-start:18px;margin-inline-start:2px}

.pd-v8 .measures .lv .name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sk-ink);
    background: none;
    padding: 0;
    border-radius: 0
}

.pd-v8 .measures .lv .name::before {
    content: "سطح ";
    font-weight: 500;
    color: var(--sk-ink-faint)
}

.pd-v8 .measures .lv .bars {
    display: flex!important;
    gap: 3px
}

.pd-v8 .measures .lv .bars i {
    width: 17px;
    height: 6px;
    border-radius: 999px;
    background: var(--sk-surface-3)
}

.pd-v8 .measures .lv .bars.beg i:nth-child(-n+1), .pd-v8 .measures .lv .bars.inter i:nth-child(-n+2), .pd-v8 .measures .lv .bars.adv i:nth-child(-n+3) {
    background: var(--sk-amber)
}

.pd-v8 .measures .lv .bars.exp i {
    background: var(--sk-amber-deep)
}

.pd-v8 .measures .lv .bars.all i:nth-child(1) {
    background: var(--sk-beg)
}

.pd-v8 .measures .lv .bars.all i:nth-child(2) {
    background: var(--sk-inter)
}

.pd-v8 .measures .lv .bars.all i:nth-child(3) {
    background: var(--sk-adv)
}

.pd-v8 .measures .lv .bars.all i:nth-child(4) {
    background: var(--sk-amber-deep)
}

.pd-v8 .measures .lv.all .name::before {
    content: "مناسب "
}

@media(max-width: 720px) {
    .pd-v8 .msr-panel {
        padding:16px 15px 12px
    }

    .pd-v8 .measures .lv {
        padding-inline-start:14px}
}

/* spectrum: four distinct golden steps (light → deep) */
.pd-v8 .measures .lv .bars.all i:nth-child(1) {
    background: #ffdf8f
}

.pd-v8 .measures .lv .bars.all i:nth-child(2) {
    background: var(--sk-amber)
}

.pd-v8 .measures .lv .bars.all i:nth-child(3) {
    background: #f0a400
}

.pd-v8 .measures .lv .bars.all i:nth-child(4) {
    background: #c97e00
}

/* ---- v9.9 · one minimal engage line (rating + plain stats), encoding-proof symbols ---- */
/* symbols as escapes → immune to server charset issues */
.pd-v8 .buy::after {
    content: "\2713"
}

.pd-v8 .buy-body::before {
    content: "\2605"
}

.pd-v8 .bdg+.bdg::before {
    content: "\00B7"
}

/* «خرید موفق» retired — participants already tell the story */
.pd-v8 .eg-buys {
    display: none!important
}

/* meta joins the engage line: text-only, hairline-separated */
.pd-v8 .pd-engage {
    padding: 4px 0 14px;
    gap: 12px;
    align-items: center
}

.pd-v8 .pd-engage .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible
}

.pd-v8 .pd-engage .meta .m {
    background: none!important;
    box-shadow: none!important;
    border: none!important;
    border-radius: 0;
    padding: 2px 18px;
    min-height: 0;
    flex-direction: row;
    gap: 7px;
    font-size: 13px;
    color: var(--sk-ink-faint);
    transition: none
}

.pd-v8 .pd-engage .meta .m:hover {
    transform: none;
    box-shadow: none!important
}

.pd-v8 .pd-engage .meta .m svg {
    display: none
}

.pd-v8 .pd-engage .meta .m b {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sk-ink);
    margin: 0
}

.pd-v8 .pd-engage .meta .m:last-child b {
    font-size: 13.5px
}

.pd-v8 .pd-engage .meta .m:first-child {
    padding-inline-start:0}

.pd-v8 .pd-engage .meta .m:last-child {
    padding-inline-end:0}

.pd-v8 .pd-engage .meta .m+.m {
    border-inline-start:1px solid var(--sk-line-strong)!important}

.pd-v8 .eg-rate {
    flex-shrink: 0
}

@media(max-width: 720px) {
    .pd-v8 .pd-engage {
        padding:2px 0 18px;
        gap: 10px
    }

    .pd-v8 .pd-engage .meta .m {
        padding: 2px 12px;
        font-size: 12px
    }

    .pd-v8 .pd-engage .meta .m b {
        font-size: 13.5px
    }
}

/* items flow beside the rating pill on one wrapping line */
.pd-v8 .pd-engage .meta {
    display: contents
}

.pd-v8 .pd-engage .meta .m {
    padding: 2px 16px
}

/* ============================================================================



   v10 · TABBED SECTIONS — click shows the panel in place, no scrolling.



   Reviews always live below the tabs. Passport panel flattens inside its tab.



   ============================================================================ */
.pd-v8 .pd-tabpanel {
    display: none
}

.pd-v8 .pd-tabpanel.act {
    display: block;
    margin-top: 14px;
    padding-top: 10px;
    border-top: none;
    animation: pd-tab-in .28s var(--sk-ease)
}

@keyframes pd-tab-in {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media(prefers-reduced-motion:reduce) {
    .pd-v8 .pd-tabpanel.act {
        animation: none
    }
}

/* the passport, flattened inside its tab: no chrome, just content */
.pd-v8 .sec .msr-panel {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 6px 0 0;
    margin: 0;
    gap: 14px
}

[data-theme="dark"] .pd-v8 .sec .msr-panel {
    background: none;
    border: none;
    box-shadow: none
}

.pd-v8 .sec .msr-panel .measures {
    padding-top: 4px
}

/* reviews keep their home below the tab area */
.pd-v8 #sec-reviews {
    margin-top: 56px;
    padding-top: 34px;
    border-top: 1px solid var(--sk-line-2)
}

/* engage stats: simple bare icons — no chip, no shadow, no border */
.pd-v8 .pd-engage .meta .m svg {
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 0;
    background: none!important;
    box-shadow: none!important;
    color: #363636;
    opacity: .9;
    flex-shrink: 0
}

.pd-v8 .pd-engage .meta .m svg [stroke] {
    stroke-width: 2
}

@media(max-width: 720px) {
    .pd-v8 .pd-tabpanel.act {
        margin-top:10px
    }

    .pd-v8 #sec-reviews {
        margin-top: 44px;
        padding-top: 26px
    }
}

/* ---- v10.1 · passport merged into the prose tab (flat), reviews/related below via scroll ---- */
/* panel flattened inside توضیحات/دربارهٔ دوره */
.pd-v8 .sec .msr-panel {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 22px 0 0;
    margin: 22px 0 0;
    gap: 14px;
    border-top: 1px dashed var(--sk-line-strong);
}

[data-theme="dark"] .pd-v8 .sec .msr-panel {
    background: none;
    border: none;
    box-shadow: none;
    border-top: 1px dashed var(--sk-line-strong)
}

.pd-v8 .sec .msr-panel .measures {
    padding-top: 2px
}

/* reviews & related always sit below the tab strip */
.pd-v8 #sec-reviews,.pd-v8 #sec-related {
    display: block;
    margin-top: 15px;
    padding-top: 80px;
    border-top: 1px solid var(--sk-line-2)
}

@media(max-width: 720px) {
    .pd-v8 .sec .msr-panel {
        padding-top:18px;
        margin-top: 18px
    }

    .pd-v8 #sec-reviews,.pd-v8 #sec-related {
        margin-top: 44px;
        padding-top: 26px
    }
}

/* ---- user sync · measured skill name in brand green ---- */
.pd-v8 .measures .tx b {
    color: #22C55E
}

[data-theme="dark"] .pd-v8 .measures .tx b {
    color: #4ade80
}

/* ============================================================================



   v11 · DESIGNER / INSTITUTE PROFILE — redesigned to match the detail page.



   Clean card-based hero, no heavy dark banner, gradient icon chips, warm light.



   ============================================================================ */
.sk-mkt-pd--profile {
    position: relative;
    isolation: isolate
}

.sk-mkt-pd--profile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 520px;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(720px 320px at 88% -40px,rgba(255,194,24,.12),transparent 62%), radial-gradient(560px 300px at 6% 20px,rgba(255,170,40,.07),transparent 60%)
}

[data-theme="dark"] .sk-mkt-pd--profile::before {
    opacity: .5
}

/* HERO as one clean rounded card (banner becomes a soft cover strip, not full-bleed dark) */
.sk-mkt-pd--profile .prof-hero {
    margin: 26px 0 30px
}

.sk-mkt-pd--profile .prof-head {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px;
    padding: 24px 26px;
    border-radius: 22px;
    background: var(--sk-surface);
    border: none;
    box-shadow: 0 18px 50px rgba(20,24,33,.08);
    overflow: hidden
}

/* subtle amber cover wash inside the card instead of a giant photo */
.sk-mkt-pd--profile .prof-head::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(120deg,var(--sk-amber-soft),transparent 55%);
    opacity: .6
}

.sk-mkt-pd--profile .prof-head>* {
    position: relative;
    z-index: 1
}

/* if a banner image exists, show it as a thin textured header band above the card */
.sk-mkt-pd--profile .prof-banner {
    position: relative;
    height: 120px;
    border-radius: 22px 22px 0 0;
    overflow: hidden;
    margin: 0 0 -22px;
    box-shadow: none
}

.sk-mkt-pd--profile .prof-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.05)
}

.sk-mkt-pd--profile .prof-banner-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(15,18,25,.05),rgba(15,18,25,.35))
}

.sk-mkt-pd--profile .prof-head.has-banner {
    border-radius: 0 0 22px 22px;
    padding-top: 30px
}

.sk-mkt-pd--profile .prof-av {
    width: 104px;
    height: 104px;
    border-radius: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 34px;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(135deg,var(--sk-amber),var(--sk-amber-deep));
    box-shadow: 0 14px 34px rgba(233,173,0,.34)
}

.sk-mkt-pd--profile .prof-head.has-banner .prof-av {
    border: 4px solid var(--sk-surface)
}

.sk-mkt-pd--profile .prof-av img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sk-mkt-pd--profile .prof-av svg {
    width: 46px;
    height: 46px
}

.sk-mkt-pd--profile .prof-id {
    min-width: 0
}

.sk-mkt-pd--profile .prof-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sk-amber-deep);
    background: var(--sk-amber-soft);
    padding: 5px 13px;
    border-radius: 999px;
    margin-bottom: 11px
}

.sk-mkt-pd--profile .prof-role svg {
    width: 14px;
    height: 14px
}

.sk-mkt-pd--profile .prof-id h1.title {
    font-size: clamp(24px,2.6vw,32px);
    font-weight: 800;
    letter-spacing: -.5px;
    margin-bottom: 8px
}

.sk-mkt-pd--profile .prof-headline {
    font-size: 14.5px;
    color: var(--sk-ink-soft);
    line-height: 1.7;
    margin-bottom: 14px;
    max-width: 56ch
}

.sk-mkt-pd--profile .prof-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.sk-mkt-pd--profile .prof-stats .m {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    color: var(--sk-ink-faint);
    background: var(--sk-surface);
    box-shadow: 0 6px 18px rgba(20,24,33,.07);
    padding: 8px 14px 8px 15px;
    border-radius: 13px
}

.sk-mkt-pd--profile .prof-stats .m svg {
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 10px;
    background: linear-gradient(150deg,#fff5d6,var(--sk-amber-soft));
    color: var(--sk-amber-deep);
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85)
}

.sk-mkt-pd--profile .prof-stats .m svg [stroke] {
    stroke-width: 2.2
}

.sk-mkt-pd--profile .prof-stats .m b {
    color: var(--sk-ink);
    font-weight: 800;
    font-size: 16px
}

.sk-mkt-pd--profile .prof-stats .m.rate svg {
    color: var(--sk-amber-deep)
}

.sk-mkt-pd--profile .prof-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    flex-shrink: 0
}

.sk-mkt-pd--profile .prof-actions .sk-btn--ghost {
    border-radius: 999px;
    border-color: var(--sk-line-strong)
}

.sk-mkt-pd--profile .prof-social {
    display: flex;
    gap: 8px
}

.sk-mkt-pd--profile .prof-social a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: var(--sk-surface);
    box-shadow: 0 5px 14px rgba(20,24,33,.08);
    display: grid;
    place-items: center;
    color: var(--sk-ink-soft);
    transition: .18s var(--sk-ease)
}

.sk-mkt-pd--profile .prof-social a:hover {
    color: var(--sk-amber-deep);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(20,24,33,.12)
}

.sk-mkt-pd--profile .prof-social a svg {
    width: 18px;
    height: 18px
}

/* section headers to match detail page */
.sk-mkt-pd--profile .sec {
    padding-top: 30px;
    margin-top: 34px
}

.sk-mkt-pd--profile .sec-h h2 {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.3px
}

.sk-mkt-pd--profile .sk-mkt-dt-prose {
    font-size: 15px;
    line-height: 2.05;
    color: var(--sk-ink-soft);
    max-width: 68ch
}

/* feature cards: gradient check chip + text (kills the bare "۱ ۱ ۱") */
.sk-mkt-pd--profile .prof-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
    gap: 12px
}

.sk-mkt-pd--profile .prof-feature-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 15px 16px;
    border-radius: 15px;
    background: var(--sk-surface);
    box-shadow: 0 8px 24px rgba(20,24,33,.06);
    transition: .2s var(--sk-ease)
}

.sk-mkt-pd--profile .prof-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(20,24,33,.1)
}

.sk-mkt-pd--profile .feat-ic {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(150deg,#fff5d6,var(--sk-amber-soft));
    color: var(--sk-amber-deep);
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85)
}

.sk-mkt-pd--profile .feat-ic svg {
    width: 19px;
    height: 19px
}

.sk-mkt-pd--profile .feat-ic svg [stroke] {
    stroke-width: 2.4
}

.sk-mkt-pd--profile .prof-feature-card b {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--sk-ink);
    margin-bottom: 3px
}

.sk-mkt-pd--profile .prof-feature-card p {
    font-size: 12.5px;
    color: var(--sk-ink-soft);
    line-height: 1.7
}

/* achievement / feature chips with gradient icon */
.sk-mkt-pd--profile .ach {
    border: none;
    border-radius: 14px;
    background: var(--sk-surface);
    box-shadow: 0 8px 24px rgba(20,24,33,.06);
    padding: 14px 15px;
    transition: .2s var(--sk-ease)
}

.sk-mkt-pd--profile .ach:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(20,24,33,.1)
}

.sk-mkt-pd--profile .ach-ic {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(150deg,#fff5d6,var(--sk-amber-soft));
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85)
}

.sk-mkt-pd--profile .ach-ic svg [stroke] {
    stroke: var(--sk-amber-deep)!important;
    stroke-width: 2.2
}

.sk-mkt-pd--profile .ach-ic b {
    color: var(--sk-amber-deep);
    font-weight: 800
}

/* two-col info & timeline polish */
.sk-mkt-pd--profile .prof-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.sk-mkt-pd--profile .prof-info-box {
    border: none;
    border-radius: 15px;
    background: var(--sk-surface);
    box-shadow: 0 8px 24px rgba(20,24,33,.06);
    padding: 16px 18px
}

.sk-mkt-pd--profile .prof-info-box b {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--sk-ink)
}

.sk-mkt-pd--profile .prof-info-box p {
    font-size: 13px;
    color: var(--sk-ink-soft);
    line-height: 1.85
}

.sk-mkt-pd--profile .tl-dot {
    background: linear-gradient(135deg,var(--sk-amber),var(--sk-amber-deep));
    box-shadow: 0 0 0 3px var(--sk-amber-soft)
}

/* ASIDE card → warm passport-style panel */
.sk-mkt-pd--profile .prof-aside {
    position: sticky;
    top: 80px
}

.sk-mkt-pd--profile .prof-card {
    border: 1px solid rgba(233,173,0,.16);
    border-radius: 20px;
    background: linear-gradient(170deg,#fffdf4 0%,var(--sk-surface) 55%);
    box-shadow: 0 16px 46px rgba(233,173,0,.09);
    padding: 20px;
    gap: 18px
}

[data-theme="dark"] .sk-mkt-pd--profile .prof-card {
    background: linear-gradient(170deg,rgba(255,194,24,.07),var(--sk-surface) 55%);
    border-color: rgba(255,194,24,.2);
    box-shadow: 0 16px 46px rgba(0,0,0,.25)
}

.sk-mkt-pd--profile .pb+.pb {
    border-top: 1px dashed rgba(233,173,0,.3)
}

.sk-mkt-pd--profile .pb-h {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--sk-amber-deep);
    letter-spacing: .3px
}

.sk-mkt-pd--profile .pb-tag {
    border: none;
    background: var(--sk-surface);
    box-shadow: 0 4px 12px rgba(20,24,33,.06);
    border-radius: 10px;
    font-weight: 600
}

[data-theme="dark"] .sk-mkt-pd--profile .pb-tag {
    background: var(--sk-surface-2);
    box-shadow: none
}

.sk-mkt-pd--profile .pb-tag--soft {
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep);
    box-shadow: none
}

.sk-mkt-pd--profile .prof-doc-item {
    border: none;
    background: var(--sk-surface);
    box-shadow: 0 6px 18px rgba(20,24,33,.06);
    border-radius: 13px;
    padding: 14px
}

[data-theme="dark"] .sk-mkt-pd--profile .prof-doc-item {
    background: var(--sk-surface-2);
    box-shadow: none
}

.sk-mkt-pd--profile .prof-doc-item b {
    font-size: 14px;
    font-weight: 800
}

.sk-mkt-pd--profile .prof-doc-actions a {
    color: var(--sk-amber-deep);
    font-weight: 700
}

@media(max-width: 860px) {
    .sk-mkt-pd--profile .prof-head {
        grid-template-columns:1fr;
        text-align: center;
        justify-items: center;
        gap: 16px;
        padding: 22px 18px
    }

    .sk-mkt-pd--profile .prof-head::before {
        background: linear-gradient(180deg,var(--sk-amber-soft),transparent 45%)
    }

    .sk-mkt-pd--profile .prof-headline {
        margin-inline:auto}

    .sk-mkt-pd--profile .prof-stats {
        justify-content: center
    }

    .sk-mkt-pd--profile .prof-actions {
        align-items: center
    }

    .sk-mkt-pd--profile .prof-banner {
        height: 100px;
        margin-bottom: -22px
    }

    .sk-mkt-pd--profile .prof-two-col {
        grid-template-columns: 1fr
    }
}

/* ============================================================================



   v11.1 · PROFILE HERO — compact identity bar, sparse-data-proof.



   Banner killed for good; one tight row that never collapses into whitespace.



   ============================================================================ */
.sk-mkt-pd--profile .prof-banner {
    display: none!important
}

.sk-mkt-pd--profile .prof-head, .sk-mkt-pd--profile .prof-head.has-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    padding: 18px 22px;
    border-radius: 18px;
    margin: 0
}

.sk-mkt-pd--profile .prof-hero {
    margin: 20px 0 28px
}

.sk-mkt-pd--profile .prof-head::before {
    background: linear-gradient(115deg,var(--sk-amber-soft),transparent 45%);
    opacity: .55
}

.sk-mkt-pd--profile .prof-av, .sk-mkt-pd--profile .prof-head.has-banner .prof-av {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    border: none;
    font-size: 26px;
    box-shadow: 0 10px 26px rgba(233,173,0,.3)
}

.sk-mkt-pd--profile .prof-av svg {
    width: 36px;
    height: 36px
}

.sk-mkt-pd--profile .prof-id {
    flex: 1;
    min-width: 240px;
    padding: 0
}

.sk-mkt-pd--profile .prof-role {
    margin-bottom: 8px;
    padding: 4px 12px
}

.sk-mkt-pd--profile .prof-id h1.title {
    font-size: clamp(21px,2.2vw,26px);
    margin-bottom: 5px;
    padding-bottom: 0
}

.sk-mkt-pd--profile .prof-id h1.title::after {
    display: none
}

.sk-mkt-pd--profile .prof-headline {
    font-size: 13px;
    margin-bottom: 10px;
    max-width: 52ch
}

.sk-mkt-pd--profile .prof-stats {
    gap: 8px
}

.sk-mkt-pd--profile .prof-stats .m {
    padding: 6px 12px 6px 13px;
    border-radius: 11px;
    font-size: 11.5px
}

.sk-mkt-pd--profile .prof-stats .m svg {
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 8px
}

.sk-mkt-pd--profile .prof-stats .m b {
    font-size: 14px
}

/* actions: one inline row, hugging the end — never a stretched column */
.sk-mkt-pd--profile .prof-actions {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-inline-start:auto;padding: 0;
    align-self: center
}

.sk-mkt-pd--profile .prof-social {
    gap: 7px
}

.sk-mkt-pd--profile .prof-social a {
    width: 36px;
    height: 36px;
    border-radius: 11px
}

.sk-mkt-pd--profile .prof-social a svg {
    width: 16px;
    height: 16px
}

@media(max-width: 860px) {
    .sk-mkt-pd--profile .prof-head, .sk-mkt-pd--profile .prof-head.has-banner {
        flex-direction:column;
        text-align: center;
        gap: 12px;
        padding: 20px 16px
    }

    .sk-mkt-pd--profile .prof-id {
        min-width: 0
    }

    .sk-mkt-pd--profile .prof-headline {
        margin-inline:auto}

    .sk-mkt-pd--profile .prof-actions {
        margin-inline-start:0;flex-wrap: wrap;
        justify-content: center
    }
}

/* ============================================================================



   v11.2 · PROFILE — FLAT. No ambient light, no shadows, no gradients.



   Depth only via 1px hairlines. Per explicit request.



   ============================================================================ */
/* kill the ambient wash */
.sk-mkt-pd--profile::before {
    content: none!important
}

/* hero: flat card */
.sk-mkt-pd--profile .prof-head, .sk-mkt-pd--profile .prof-head.has-banner {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    box-shadow: none;
    padding: 16px 20px
}

.sk-mkt-pd--profile .prof-head::before {
    content: none!important
}

.sk-mkt-pd--profile .prof-av {
    background: var(--sk-amber);
    box-shadow: none;
    color: #181a1d
}

.sk-mkt-pd--profile .prof-stats .m {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    box-shadow: none
}

.sk-mkt-pd--profile .prof-stats .m svg {
    background: var(--sk-amber-soft);
    box-shadow: none
}

.sk-mkt-pd--profile .prof-social a {
    border: 1px solid var(--sk-line);
    box-shadow: none;
    background: var(--sk-surface)
}

.sk-mkt-pd--profile .prof-social a:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--sk-amber-line);
    color: var(--sk-amber-deep)
}

/* body cards: flat */
.sk-mkt-pd--profile .prof-feature-card {
    border: 1px solid var(--sk-line);
    box-shadow: none
}

.sk-mkt-pd--profile .prof-feature-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--sk-amber-line)
}

.sk-mkt-pd--profile .feat-ic {
    background: var(--sk-amber-soft);
    box-shadow: none
}

.sk-mkt-pd--profile .ach {
    border: 1px solid var(--sk-line);
    box-shadow: none
}

.sk-mkt-pd--profile .ach:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--sk-amber-line)
}

.sk-mkt-pd--profile .ach-ic {
    background: var(--sk-amber-soft);
    box-shadow: none
}

.sk-mkt-pd--profile .prof-info-box {
    border: 1px solid var(--sk-line);
    box-shadow: none
}

.sk-mkt-pd--profile .tl-dot {
    background: var(--sk-amber);
    box-shadow: 0 0 0 3px var(--sk-amber-soft)
}

/* aside: flat panel */
.sk-mkt-pd--profile .prof-card {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    box-shadow: none
}

[data-theme="dark"] .sk-mkt-pd--profile .prof-card {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    box-shadow: none
}

.sk-mkt-pd--profile .pb+.pb {
    border-top: 1px solid var(--sk-line)
}

.sk-mkt-pd--profile .pb-tag {
    border: 1px solid var(--sk-line);
    box-shadow: none;
    background: var(--sk-surface)
}

[data-theme="dark"] .sk-mkt-pd--profile .pb-tag {
    background: var(--sk-surface-2)
}

.sk-mkt-pd--profile .prof-doc-item {
    border: 1px solid var(--sk-line);
    box-shadow: none;
    background: var(--sk-surface)
}

/* ============================================================================



   v11.3 · PROFILE — premium-flat: SemiBold type scale, 18px headings,



   round avatar, proper flat buttons, satisfaction ring + counters (infographic).



   ============================================================================ */
/* type: 600 everywhere except the name */
.sk-mkt-pd--profile .sec-h h2 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.2px
}

.sk-mkt-pd--profile .prof-stats .m b {
    font-weight: 600;
    font-size: 15px
}

.sk-mkt-pd--profile .prof-feature-card b {
    font-weight: 600;
    font-size: 13.5px
}

.sk-mkt-pd--profile .prof-feature-card p {
    font-size: 12px
}

.sk-mkt-pd--profile .ach-tx b {
    font-weight: 600;
    font-size: 13.5px
}

.sk-mkt-pd--profile .tl-body b {
    font-weight: 600;
    font-size: 14px
}

.sk-mkt-pd--profile .prof-doc-item b {
    font-weight: 600
}

.sk-mkt-pd--profile .pb-h {
    font-weight: 600
}

.sk-mkt-pd--profile .pb-tag {
    font-weight: 500
}

.sk-mkt-pd--profile .prof-role {
    font-weight: 600
}

.sk-mkt-pd--profile .prof-info-box b {
    font-weight: 600
}

.sk-mkt-pd--profile .sk-mkt-dt-prose {
    font-size: 14px;
    line-height: 2.05
}

/* round profile photo */
.sk-mkt-pd--profile .prof-av, .sk-mkt-pd--profile .prof-head.has-banner .prof-av {
    border-radius: 50%
}

/* buttons: proper flat */
.sk-mkt-pd--profile .prof-actions .sk-btn--ghost {
    border-radius: 11px;
    height: 38px;
    font-weight: 600;
    border: 1px solid var(--sk-line-strong);
    background: var(--sk-surface)
}

.sk-mkt-pd--profile .prof-actions .sk-btn--ghost:hover {
    border-color: var(--sk-amber);
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep)
}

.sk-mkt-pd--profile .prof-doc-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px
}

.sk-mkt-pd--profile .prof-doc-actions a {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 9px;
    border: none;
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep);
    font-weight: 600;
    font-size: 12px;
    transition: .15s var(--sk-ease)
}

.sk-mkt-pd--profile .prof-doc-actions a:hover {
    background: var(--sk-amber);
    color: #181a1d
}

/* satisfaction ring: flat infographic */
.sk-mkt-pd--profile .m-ring {
    padding: 6px 12px 6px 14px;
    gap: 11px
}

.sk-mkt-pd--profile .m-ring .tk-ring {
    position: relative;
    width: 50px;
    height: 50px;
    flex-shrink: 0
}

.sk-mkt-pd--profile .m-ring .tk-ring svg {
    width: 50px;
    height: 50px;
    display: block
}

.sk-mkt-pd--profile .m-ring circle {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round
}

.sk-mkt-pd--profile .m-ring .track {
    stroke: var(--sk-surface-3)
}

.sk-mkt-pd--profile .m-ring .ring-fill {
    stroke: var(--sk-amber)
}

.sk-mkt-pd--profile .m-ring .c {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1
}

.sk-mkt-pd--profile .m-ring .c b {
    font-size: 12px;
    font-weight: 600;
    color: var(--sk-ink)
}

.sk-mkt-pd--profile .m-ring .c b::after {
    content: "٪";
    font-size: 8px;
    font-weight: 500;
    color: var(--sk-ink-faint)
}

.sk-mkt-pd--profile .m-ring .c span {
    font-size: 7.5px;
    font-weight: 500;
    color: var(--sk-ink-faint);
    margin-top: 1px
}

.sk-mkt-pd--profile .rlab {
    display: flex;
    flex-direction: column;
    line-height: 1.55
}

.sk-mkt-pd--profile .rlab b {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sk-ink)
}

.sk-mkt-pd--profile .rlab small {
    font-size: 10.5px;
    color: var(--sk-ink-faint)
}

/* ============================================================================



   v11.4 · PROFILE — structural redesign (flat): split hero with vertical



   divider, sections as flat cards (mass, not floaty hairlines),



   breathing sec-h, neutral doc buttons.



   ============================================================================ */
/* hero: identity | divider | stats-board + actions */
.sk-mkt-pd--profile .prof-head, .sk-mkt-pd--profile .prof-head.has-banner {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden
}

.sk-mkt-pd--profile .prof-idwrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px
}

.sk-mkt-pd--profile .prof-id {
    flex: 1;
    min-width: 0
}

.sk-mkt-pd--profile .prof-headline {
    margin-bottom: 0
}

.sk-mkt-pd--profile .prof-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 18px 22px;
    border-inline-start:1px solid var(--sk-line);background: var(--sk-surface-2);
    flex-shrink: 0;
    min-width: 300px
}

[data-theme="dark"] .sk-mkt-pd--profile .prof-side {
    background: var(--sk-surface-2)
}

.sk-mkt-pd--profile .prof-side .prof-stats {
    gap: 8px;
    justify-content: flex-start
}

.sk-mkt-pd--profile .prof-side .prof-actions {
    margin: 0;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap
}

.sk-mkt-pd--profile .prof-side .prof-social {
    gap: 6px
}

.sk-mkt-pd--profile .prof-side .prof-social a {
    width: 32px;
    height: 32px;
    border-radius: 9px
}

.sk-mkt-pd--profile .prof-side .prof-social a svg {
    width: 14px;
    height: 14px
}

.sk-mkt-pd--profile .prof-side .sk-btn--ghost {
    height: 34px;
    font-size: 12px;
    padding-inline:13px}

/* sections → flat cards with mass */
.sk-mkt-pd--profile .prof-main .sec {
    border: 1px solid var(--sk-line);
    border-radius: 16px;
    background: var(--sk-surface);
    padding: 18px 20px;
    margin-top: 16px
}

.sk-mkt-pd--profile .prof-main .sec:first-child {
    margin-top: 0
}

.sk-mkt-pd--profile .sec-h {
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sk-line)
}

.sk-mkt-pd--profile .sk-mkt-dt-prose {
    max-width: none
}

.sk-mkt-pd--profile .prof-feature-grid {
    grid-template-columns: repeat(auto-fill,minmax(210px,1fr))
}

.sk-mkt-pd--profile .prof-ach {
    grid-template-columns: repeat(auto-fill,minmax(210px,1fr))
}

.sk-mkt-pd--profile .prof-layout {
    gap: 22px
}

.sk-mkt-pd--profile .prof-hero {
    margin: 18px 0 22px
}

/* doc buttons: neutral, not yellow */
.sk-mkt-pd--profile .prof-doc-actions a {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line-strong);
    color: var(--sk-ink-soft)
}

.sk-mkt-pd--profile .prof-doc-actions a:hover {
    background: var(--sk-surface-2);
    border-color: var(--sk-ink-faint);
    color: var(--sk-ink)
}

@media(max-width: 860px) {
    .sk-mkt-pd--profile .prof-head, .sk-mkt-pd--profile .prof-head.has-banner {
        flex-direction:column
    }

    .sk-mkt-pd--profile .prof-idwrap {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px 16px
    }

    .sk-mkt-pd--profile .prof-side {
        border-inline-start:none;border-top: 1px solid var(--sk-line);
        min-width: 0;
        align-items: center
    }

    .sk-mkt-pd--profile .prof-side .prof-stats, .sk-mkt-pd--profile .prof-side .prof-actions {
        justify-content: center
    }
}

/* ============================================================================



   v11.5 · PROFILE — de-nesting redesign: one card layer only.



   Inner boxes → clean checklist rows; side panel unboxed & sparse-proof;



   icon chips can never wrap text (svg-only).



   ============================================================================ */
/* side: no gray box — just the vertical hairline; survives empty data */
.sk-mkt-pd--profile .prof-side {
    background: none;
    min-width: 270px;
    gap: 16px
}

[data-theme="dark"] .sk-mkt-pd--profile .prof-side {
    background: none
}

.sk-mkt-pd--profile .prof-side .prof-stats {
    flex-wrap: wrap
}

/* features → borderless checklist (no card-in-card) */
.sk-mkt-pd--profile .prof-feature-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px 30px
}

.sk-mkt-pd--profile .prof-feature-card {
    border: none;
    border-radius: 0;
    padding: 10px 0;
    background: none;
    align-items: flex-start
}

.sk-mkt-pd--profile .prof-feature-card:hover {
    border: none;
    background: none
}

.sk-mkt-pd--profile .feat-ic {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    margin-top: 2px
}

.sk-mkt-pd--profile .feat-ic svg {
    width: 15px;
    height: 15px
}

.sk-mkt-pd--profile .prof-feature-card b {
    font-size: 13.5px;
    line-height: 1.7
}

.sk-mkt-pd--profile .prof-feature-card p {
    line-height: 1.85
}

/* specialised features (ach) → same checklist language; labels can never render */
.sk-mkt-pd--profile .prof-ach {
    grid-template-columns: 1fr 1fr;
    gap: 4px 30px
}

.sk-mkt-pd--profile .ach {
    border: none;
    border-radius: 0;
    padding: 10px 0;
    background: none;
    align-items: flex-start
}

.sk-mkt-pd--profile .ach:hover {
    border: none;
    background: none
}

.sk-mkt-pd--profile .ach-ic {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    margin-top: 2px;
    color: var(--sk-amber-deep)
}

.sk-mkt-pd--profile .ach-ic svg {
    width: 15px;
    height: 15px
}

.sk-mkt-pd--profile .ach-ic b {
    display: none
}

.sk-mkt-pd--profile .ach-tx b {
    line-height: 1.7
}

.sk-mkt-pd--profile .ach-tx span {
    line-height: 1.85
}

/* services/methodology → two borderless columns with a vertical divider */
.sk-mkt-pd--profile .prof-two-col {
    gap: 0 34px
}

.sk-mkt-pd--profile .prof-info-box {
    border: none;
    border-radius: 0;
    padding: 2px 0;
    background: none
}

.sk-mkt-pd--profile .prof-info-box+.prof-info-box {
    border-inline-start:1px solid var(--sk-line);padding-inline-start: 34px
}

.sk-mkt-pd--profile .prof-info-box b {
    color: var(--sk-amber-deep);
    font-size: 12.5px;
    font-weight: 600
}

.sk-mkt-pd--profile .prof-info-box p {
    font-size: 13.5px
}

/* aside doc card: one soft layer, no border-in-border */
.sk-mkt-pd--profile .prof-doc-item {
    border: none;
    background: var(--sk-surface-2)
}

[data-theme="dark"] .sk-mkt-pd--profile .prof-doc-item {
    background: var(--sk-surface-2)
}

@media(max-width: 860px) {
    .sk-mkt-pd--profile .prof-feature-grid,.sk-mkt-pd--profile .prof-ach {
        grid-template-columns:1fr;
        gap: 2px
    }

    .sk-mkt-pd--profile .prof-two-col {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .sk-mkt-pd--profile .prof-info-box+.prof-info-box {
        border-inline-start:none;padding-inline-start:0; border-top: 1px solid var(--sk-line);
        padding-top: 16px
    }

    .sk-mkt-pd--profile .prof-side {
        background: none
    }
}

/* ============================================================================



   v12 · DESIGNER LANDING — one striking opening act, then story sections.



   Light theme, flat, amber. Scoped to .prof-land (single column, no sidebar).



   ============================================================================ */
/* ---- ACT 1 · full-stage hero ---- */
.prof-land .land-hero {
    min-height: min(74vh,620px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 34px 0 10px;
    position: relative
}

.prof-land .land-av {
    position: relative;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffc21800;
    color: #181a1d;
    overflow: visible;
    margin-bottom: 4px
}

.prof-land .land-av img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 1
}

.prof-land .land-av svg {
    width: 52px;
    height: 52px;
    position: relative;
    z-index: 1
}

.prof-land .land-av::before {
    content: "";
    position: absolute;
    inset: -26px;
    border: 1.5px dashed var(--sk-amber-line);
    border-radius: 50%;
    animation: pd-orbit 46s linear infinite
}

.prof-land .land-av::after {
    content: "";
    position: absolute;
    top: -8px;
    inset-inline-end: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--sk-amber)
}

.prof-land .prof-role {
    margin: 2px 0 0
}

.prof-land .land-name {
    font-size: clamp(32px,4.6vw,50px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.35;
    color: var(--sk-ink);
    margin: 0
}

.prof-land .land-headline {
    font-size: 15px;
    color: var(--sk-ink-soft);
    line-height: 1.9;
    max-width: 58ch;
    margin: 0
}

.prof-land .land-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: center
}

.prof-land .prof-social {
    display: flex;
    gap: 7px
}

.prof-land .prof-social a {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    border: 1px solid var(--sk-line);
    background: var(--sk-surface);
    display: grid;
    place-items: center;
    color: var(--sk-ink-soft);
    transition: .15s
}

.prof-land .prof-social a:hover {
    border-color: var(--sk-amber-line);
    color: var(--sk-amber-deep)
}

.prof-land .prof-social a svg {
    width: 16px;
    height: 16px
}

/* the numbers band — like the reference footer strip, light version */
.prof-land .land-band {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 26px;
    border-block:1px solid var(--sk-line)}

.prof-land .land-band .cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 20px 44px;
    min-width: 150px
}

.prof-land .land-band .cell+.cell {
    border-inline-start:1px solid var(--sk-line)}

.prof-land .land-band b {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: var(--sk-ink);
    
    line-height: 1
}

.prof-land .land-band span {
    font-size: 12px;
    font-weight: 500;
    color: var(--sk-ink-faint)
}

.prof-land .land-scroll {
    margin-top: 26px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--sk-line-strong);
    display: grid;
    place-items: center;
    color: var(--sk-ink-faint);
    animation: land-bounce 2.2s var(--sk-ease) infinite
}

.prof-land .land-scroll svg {
    width: 17px;
    height: 17px
}

.prof-land .land-scroll:hover {
    color: var(--sk-amber-deep);
    border-color: var(--sk-amber-line)
}

@keyframes land-bounce {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(7px)
    }
}

/* ---- wave dividers (the golden thread) ---- */
.wavecut {
    position: relative;
    height: 64px;
    margin: 8px 0
}

.wavecut svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.wavecut svg path {
    stroke: var(--sk-amber-line);
    stroke-width: 1.6;
    fill: none
}

.wavecut i {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(50%,-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sk-amber);
    box-shadow: 0 0 0 7px var(--sk-amber-soft)
}

/* ---- story sections ---- */
.prof-land .land-sec {
    padding: 44px 0 40px
}

.prof-land .land-sec-h {
    text-align: center;
    margin-bottom: 28px
}

.prof-land .land-eyebrow {
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    color: var(--sk-amber-deep);
    background: var(--sk-amber-soft);
    border: 1px solid var(--sk-amber-line);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 12px
}

.prof-land .land-sec-h h2 {
    font-size: clamp(21px,2.4vw,26px);
    font-weight: 600;
    letter-spacing: -.3px;
    color: var(--sk-ink);
    margin: 0
}

.prof-land .land-prose {
    max-width: 72ch;
    margin-inline:auto;text-align: center;
    font-size: 14.5px
}

.prof-land .land-history {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px dashed var(--sk-line-strong);
    text-align: start
}

.prof-land .land-meta {
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 20px
}

.prof-land .land-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sk-ink-soft)
}

.prof-land .land-meta svg {
    width: 16px;
    height: 16px;
    color: var(--sk-amber-deep)
}

.prof-land .land-checklist {
    max-width: 940px;
    margin-inline:auto}

.prof-land .land-narrow {
    max-width: 760px;
    margin-inline:auto}

.prof-land .land-tags {
    justify-content: center;
    max-width: 860px;
    margin-inline:auto;
    margin-top: 15px}

.prof-land .land-note {
    font-size: 13px;
    color: var(--sk-ink-soft);
    line-height: 1.9;
    text-align: center;
    max-width: 70ch;
    margin: 16px auto 0
}

.prof-land .land-docs {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
    gap: 12px;
    max-width: 940px;
    margin: 20px auto 0
}

.prof-land .sk-mkt-cards {
    margin-top: 6px
}

@media(prefers-reduced-motion:reduce) {
    .prof-land .land-av::before {
        animation: none
    }

    .prof-land .land-scroll {
        animation: none
    }
}

@media(max-width: 860px) {
    .prof-land .land-hero {
        min-height:0;
        padding: 26px 0 6px
    }

    .prof-land .land-name {
        font-size: 30px
    }

    .prof-land .land-band {
        border-block:none;border-top: 1px solid var(--sk-line);
        width: 100%
    }

    .prof-land .land-band .cell {
        flex: 1 1 45%;
        min-width: 0;
        padding: 16px 8px;
        border-top: 1px solid var(--sk-line)
    }

    .prof-land .land-band .cell+.cell {
        border-inline-start:none}

    .prof-land .land-band .cell:nth-child(-n+2) {
        border-top: none
    }

    .prof-land .land-band .cell:nth-child(even) {
        border-inline-start:1px solid var(--sk-line)}

    .prof-land .land-band b {
        font-size: 24px
    }

    .prof-land .land-sec {
        padding: 34px 0 30px
    }

    .wavecut {
        height: 48px
    }
}

/* ============================================================================



   v12.1 · LANDING polish — exam-themed hero texture w/ low light, heavier



   section titles, luxe gold eyebrows, doc visuals, condensed 4-up works grid.



   ============================================================================ */
/* ---- hero: answer-sheet texture + a low, warm light ---- */
.prof-land .land-hero::before {
    content: "";
    position: absolute;
    inset: -30px -60px 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(640px 300px at 50% 4%, var(--sk-amber-soft), transparent 72%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'%3E%3Crect x='20' y='24' width='22' height='22' rx='6' fill='none' stroke='rgba(24,26,29,.055)' stroke-width='2'/%3E%3Cpath d='m25 35 5 5 9-11' fill='none' stroke='rgba(233,173,0,.16)' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='118' cy='54' r='10' fill='none' stroke='rgba(24,26,29,.05)' stroke-width='2'/%3E%3Ccircle cx='118' cy='54' r='3.5' fill='rgba(233,173,0,.12)'/%3E%3Ccircle cx='58' cy='126' r='4' fill='rgba(24,26,29,.045)'/%3E%3Cpath d='M138 118h16M138 126h11' stroke='rgba(24,26,29,.05)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat;
    background-size: auto,170px 170px;
    -webkit-mask-image: linear-gradient(#000 55%,transparent 96%);
    mask-image: linear-gradient(#000 55%,transparent 96%)
}

[data-theme="dark"] .prof-land .land-hero::before {
    opacity: .5
}

/* section titles: heavier */
.prof-land .land-sec-h h2 {
    font-weight: 800
}

/* eyebrow: luxe gold — solid amber, ink text */
.prof-land .land-eyebrow {
    background: var(--sk-amber);
    border: none;
    color: #181a1d;
    font-weight: 700
}

/* ---- doc cards: credential image, or a large gray certificate icon ---- */
.prof-land .land-docs .prof-doc-item {
    padding: 12px 12px 14px
}

.prof-land .doc-visual {
    position: relative;
    min-height: 216px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--sk-surface);
    display: grid;
    place-items: center;
    margin-bottom: 11px
}

.prof-land .doc-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.prof-land .doc-visual svg {
    width: 46px;
    height: 46px;
    color: var(--sk-ink-faint)
}

[data-theme="dark"] .prof-land .doc-visual {
    background: var(--sk-surface-3)
}

/* ---- works: 4 per row, condensed cards ---- */
.prof-land .sk-mkt-cards {
    grid-template-columns: repeat(4,1fr);
    gap: 14px
}

.prof-land .sk-mkt-card-body {
    padding: 13px
}

.prof-land .sk-mkt-card-body h3 {
    font-size: 13.5px;
    margin-bottom: 9px;
}

.prof-land .sk-mkt-taxline,.prof-land .sk-mkt-chips-more,.prof-land .sk-mkt-measures, .prof-land .sk-mkt-chips2 {
    display: none!important
}

.prof-land .sk-mkt-level {
    padding-bottom: 9px
}

.prof-land .sk-mkt-meta {
    padding-top: 9px;
    gap: 10px;
    font-size: 11.5px
}

.prof-land .sk-mkt-meta .m svg {
    width: 12px;
    height: 12px
}

.prof-land .sk-mkt-card-foot {
    margin-top: 9px
}

.prof-land .sk-mkt-price {
    font-size: 16px
}

.prof-land .sk-mkt-card-foot .sk-btn {
    height: 34px;
    font-size: 12px;
    padding-inline:12px}

@media(max-width: 1180px) {
    .prof-land .sk-mkt-cards {
        grid-template-columns:repeat(3,1fr)
    }
}

@media(max-width: 900px) {
    .prof-land .sk-mkt-cards {
        grid-template-columns:repeat(2,1fr)
    }
}

@media(max-width: 560px) {
    .prof-land .sk-mkt-cards {
        grid-template-columns:1fr
    }
}

/* clip decorative bleed (hero texture) */
.sk-mkt-pd--profile.prof-land {
    overflow: clip
}

/* ============================================================================



   v12.2 · LANDING refinements — texture starts at the very top (no white gap),



   visible socials, ink role pill, larger prose, big bare black check icons.



   ============================================================================ */
/* texture belongs to the SECTION now: begins right under the site header */
.prof-land .land-hero::before {
    content: none
}

.sk-mkt-pd--profile.prof-land {
    position: relative
}

.sk-mkt-pd--profile.prof-land::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: min(92vh,780px);
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(640px 300px at 50% 60px, var(--sk-amber-soft), transparent 72%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'%3E%3Crect x='20' y='24' width='22' height='22' rx='6' fill='none' stroke='rgba(24,26,29,.055)' stroke-width='2'/%3E%3Cpath d='m25 35 5 5 9-11' fill='none' stroke='rgba(233,173,0,.16)' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='118' cy='54' r='10' fill='none' stroke='rgba(24,26,29,.05)' stroke-width='2'/%3E%3Ccircle cx='118' cy='54' r='3.5' fill='rgba(233,173,0,.12)'/%3E%3Ccircle cx='58' cy='126' r='4' fill='rgba(24,26,29,.045)'/%3E%3Cpath d='M138 118h16M138 126h11' stroke='rgba(24,26,29,.05)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat;
    background-size: auto,170px 170px;
    -webkit-mask-image: linear-gradient(#000 58%,transparent 97%);
    mask-image: linear-gradient(#000 58%,transparent 97%)
}

[data-theme="dark"] .sk-mkt-pd--profile.prof-land::before {
    opacity: .5
}

.prof-land>.sk-mkt-wrap,.prof-land>.wavecut {
    position: relative;
    z-index: 1
}

/* socials: clearly visible, luxe hover */
.prof-land .prof-social a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1.5px solid var(--sk-line-strong);
    color: var(--sk-ink)
}

.prof-land .prof-social a svg {
    width: 17px;
    height: 17px
}

.prof-land .prof-social a:hover {
    background: var(--sk-amber);
    border-color: var(--sk-amber);
    color: #181a1d
}

/* «طراح آزمون» pill: ink text, not faint */
.prof-land .prof-role {
    color: var(--sk-ink);
    font-weight: 700;
    border-color: var(--sk-amber-line)
}

.prof-land .prof-role svg {
    color: var(--sk-amber-deep)
}

/* درباره: larger, comfortable reading */
.prof-land .land-prose {
    font-size: 16px;
    line-height: 2.15
}

.prof-land .land-headline {
    font-size: 16px
}

.prof-land .prof-feature-card b {
    font-size: 14.5px
}

.prof-land .prof-feature-card p {
    font-size: 13px
}

.prof-land .ach-tx b {
    font-size: 14.5px
}

.prof-land .ach-tx span {
    font-size: 13px
}

.prof-land .prof-info-box p {
    font-size: 14.5px
}

.prof-land .land-note {
    font-size: 14px
}

/* check icons: bigger, bare, black */
.prof-land .ach-ic,.prof-land .feat-ic {
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin-top: 0;
    color: var(--sk-ink)
}

.prof-land .ach-ic svg,.prof-land .feat-ic svg {
    width: 26px;
    height: 26px
}

.prof-land .ach-ic svg [stroke],.prof-land .feat-ic svg [stroke] {
    stroke-width: 2.2
}

[data-theme="dark"] .prof-land .ach-ic,[data-theme="dark"] .prof-land .feat-ic {
    color: var(--sk-ink)
}

/* ============================================================================



   v12.3 · HERO effects that actually show — layered texture (diagonal lines +



   exam pattern + warm light), orbit satellites, satisfaction-ring infographic.



   ============================================================================ */
/* texture v2: visible-but-gentle, three layers, painted under everything */
.sk-mkt-pd--profile.prof-land::before {
    z-index: -1;
    background: radial-gradient(660px 320px at 50% 56px, rgba(255,194,24,.16), transparent 70%), repeating-linear-gradient(135deg, rgba(21,23,26,.05) 0 1.5px, transparent 1.5px 18px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Crect x='18' y='20' width='22' height='22' rx='6' fill='none' stroke='rgba(21,23,26,.10)' stroke-width='2'/%3E%3Cpath d='m23 31 5 5 9-11' fill='none' stroke='rgba(233,173,0,.26)' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='106' cy='48' r='10' fill='none' stroke='rgba(21,23,26,.09)' stroke-width='2'/%3E%3Ccircle cx='106' cy='48' r='3.5' fill='rgba(233,173,0,.2)'/%3E%3Ccircle cx='50' cy='112' r='4' fill='rgba(21,23,26,.08)'/%3E%3Cpath d='M120 104h16M120 112h11' stroke='rgba(21,23,26,.09)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat;
    background-size: auto,auto,150px 150px;
    -webkit-mask-image: linear-gradient(#000 55%,transparent 96%);
    mask-image: linear-gradient(#000 55%,transparent 96%)
}

/* orbit satellites: little icon moons riding the dashed ring */
.prof-land .land-av .sat {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sk-surface);
    border: 1.5px solid var(--sk-amber-line);
    display: grid;
    place-items: center;
    color: var(--sk-ink);
    z-index: 2
}

.prof-land .land-av .sat svg {
    width: 16px;
    height: 16px
}

.prof-land .land-av .sat1 {
    top: -34px;
    inset-inline-start: -26px
}

.prof-land .land-av .sat2 {
    bottom: -30px;
    inset-inline-end: -32px
}

/* satisfaction ring cell in the numbers band */
.prof-land .land-band .cell-ring {
    gap: 9px
}

.prof-land .cell-ring .tk-ring {
    position: relative;
    width: 72px;
    height: 72px
}

.prof-land .cell-ring .tk-ring svg {
    width: 72px;
    height: 72px;
    display: block
}

.prof-land .cell-ring circle {
    fill: none;
    stroke-width: 6.5;
    stroke-linecap: round
}

.prof-land .cell-ring .track {
    stroke: var(--sk-surface-3)
}

.prof-land .cell-ring .ring-fill {
    stroke: var(--sk-amber)
}

.prof-land .cell-ring .c {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05
}

.prof-land .cell-ring .c b {
    font-size: 16px;
    font-weight: 700;
    color: var(--sk-ink)
}

.prof-land .cell-ring .c b::after {
    content: "٪";
    font-size: 9px;
    font-weight: 500;
    color: var(--sk-ink-faint)
}

.prof-land .cell-ring .c span {
    font-size: 8px;
    font-weight: 500;
    color: var(--sk-ink-faint);
    margin-top: 2px
}

@media(max-width: 860px) {
    .prof-land .land-av .sat1 {
        top:-28px;
        inset-inline-start: -20px
    }

    .prof-land .land-av .sat2 {
        bottom: -24px;
        inset-inline-end: -24px
    }
}

/* ============================================================================



   v12.4 · texture on a REAL element (site-proof) + band back to big numbers.



   Light, clearly visible, never fights the reading.



   ============================================================================ */
.sk-mkt-pd--profile.prof-land::before {
    content: none!important
}

.prof-land .land-tex {
    position: absolute;
    inset: 0 0 auto;
    height: min(92vh,780px);
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(680px 330px at 50% 56px, rgba(255,194,24,.15), transparent 70%), repeating-linear-gradient(135deg, rgba(21,23,26,.045) 0 1.5px, transparent 1.5px 20px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Crect x='26' y='30' width='34' height='34' rx='9' fill='none' stroke='rgba(21,23,26,.10)' stroke-width='2.4'/%3E%3Cpath d='m34 47 8 8 14-17' fill='none' stroke='rgba(233,173,0,.30)' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='158' cy='70' r='15' fill='none' stroke='rgba(21,23,26,.09)' stroke-width='2.4'/%3E%3Ccircle cx='158' cy='70' r='5' fill='rgba(233,173,0,.22)'/%3E%3Ccircle cx='72' cy='168' r='6' fill='rgba(21,23,26,.08)'/%3E%3Cpath d='M170 152h26M170 164h17' stroke='rgba(21,23,26,.09)' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat;
    background-size: auto,auto,220px 220px;
    -webkit-mask-image: linear-gradient(#000 55%,transparent 97%);
    mask-image: linear-gradient(#000 55%,transparent 97%)
}

[data-theme="dark"] .prof-land .land-tex {
    opacity: .45
}

/* ---- v12.5 · texture calmed: soft light, no diagonals, sparse quiet motifs ---- */
.prof-land .land-tex {
    background: radial-gradient(560px 260px at 50% 48px, rgba(255,194,24,.07), transparent 68%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Crect x='30' y='36' width='30' height='30' rx='8' fill='none' stroke='rgba(21,23,26,.055)' stroke-width='2.2'/%3E%3Cpath d='m37 51 7 7 12-15' fill='none' stroke='rgba(233,173,0,.14)' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='186' cy='84' r='13' fill='none' stroke='rgba(21,23,26,.05)' stroke-width='2.2'/%3E%3Ccircle cx='88' cy='198' r='5' fill='rgba(21,23,26,.045)'/%3E%3Cpath d='M198 178h24M198 189h15' stroke='rgba(21,23,26,.05)' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat;
    background-size: auto,260px 260px
}

/* ---- v12.6 · texture reaches the header no matter what outer spacing exists ---- */
.sk-mkt-pd--profile.prof-land {
    overflow: visible
}

.prof-land .land-tex {
    top: -160px;
    height: calc(min(92vh,780px) + 160px)
}

/* ---- v12.7 · no texture. clean hero on plain canvas. ---- */
.prof-land .land-tex {
    display: none!important
}

/* ============================================================================



   v12.8 · BREADCRUMBS standardized — one look everywhere.



   Typography & rhythm of the approved detail page, applied site-wide.



   ============================================================================ */
.skill-breadcrumbs {
    font-size: 12px;
    letter-spacing: .2px;
    margin: 22px 0 26px
}

.sk-mkt-pd .skill-breadcrumbs {
    margin: 22px 0 26px
}

@media(max-width: 720px) {
    .skill-breadcrumbs,.sk-mkt-pd .skill-breadcrumbs {
        margin:16px 0 18px
    }
}

/* ---- v12.9 · bigger avatar, role pill breathes below the orbit, students cell fits ---- */
.prof-land .land-av {
    width: 148px;
    height: 148px
}

.prof-land .land-av svg {
    width: 58px;
    height: 58px
}

.prof-land .land-av::before {
    inset: -26px
}

.prof-land .prof-role {
    margin-top: 20px
}

.prof-land .land-band .cell {
    padding: 20px 34px;
    min-width: 132px
}

/* ============================================================================



   v13 · STORY SECTIONS DRESSED — shapes, ornaments, iconed cards, hover life.



   Flat language, single card layer, amber accents.



   ============================================================================ */
.sk-mkt-pd--profile.prof-land {
    overflow: clip
}

.prof-land .land-sec {
    position: relative
}

/* corner shapes: dashed ring + soft glow blob, alternating sides */
.prof-land .land-sec::before {
    content: "";
    position: absolute;
    top: 4px;
    inset-inline-end: -80px;
    width: 210px;
    height: 210px;
    border: 1.6px dashed var(--sk-amber-line);
    border-radius: 50%;
    z-index: -1
}

.prof-land .land-sec::after {
    content: "";
    position: absolute;
    bottom: 12px;
    inset-inline-start: -70px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(closest-side,var(--sk-amber-soft),transparent 72%);
    z-index: -1
}

.prof-land .land-sec:nth-of-type(even)::before {
    inset-inline-end: auto;
    inset-inline-start: -80px
}

.prof-land .land-sec:nth-of-type(even)::after {
    inset-inline-start: auto;
    inset-inline-end: -70px
}

/* golden underline ornament for section titles */
.prof-land .land-sec-h h2 {
    position: relative;
    padding-bottom: 16px
}

.prof-land .land-sec-h h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 50%;
    transform: translateX(50%);
    width: 52px;
    height: 4px;
    border-radius: 99px;
    background: var(--sk-amber)
}

/* checklists → single-layer flat cards, framed black check, hover lift */
.prof-land .prof-feature-grid,.prof-land .prof-ach {
    gap: 12px
}

.prof-land .prof-feature-card,.prof-land .ach {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 14px;
    padding: 15px 16px;
    transition: border-color .2s var(--sk-ease),transform .2s var(--sk-ease);
    align-items: center}

.prof-land .prof-feature-card:hover,.prof-land .ach:hover {
    border-color: var(--sk-amber);
    transform: translateY(-3px);
    background: var(--sk-surface);
    border: 1px solid var(--sk-amber);
}

.prof-land .feat-ic,.prof-land .ach-ic {
    width: 40px;
    height: 40px;
    border: 1.6px solid var(--sk-line-strong);
    border-radius: 12px;
    background: none;
    color: var(--sk-ink)
}

.prof-land .feat-ic svg,.prof-land .ach-ic svg {
    width: 20px;
    height: 20px
}

/* service columns → iconed flat cards */
.prof-land .prof-two-col {
    gap: 14px
}

.prof-land .prof-info-box,.prof-land .prof-info-box+.prof-info-box {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 14px;
    padding: 18px 20px
}

.prof-land .ib-ic {
    width: 38px;
    height: 38px;
    border: 1.6px solid var(--sk-line-strong);
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: var(--sk-amber-deep);
    margin-bottom: 11px
}

.prof-land .ib-ic svg {
    width: 19px;
    height: 19px
}

/* timeline: golden org pill */
.prof-land .tl-org {
    display: inline-block;
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep);
    padding: 3px 11px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 12px;
    margin-top: 5px
}

/* tags: pill silhouette */
.prof-land .land-tags .pb-tag {
    border-radius: 99px;
    padding: 7px 15px
}

@media(max-width: 860px) {
    .prof-land .land-sec::before,.prof-land .land-sec::after {
        width:130px;
        height: 130px;
        inset-inline-end: -60px;
        inset-inline-start: auto
    }

    .prof-land .land-sec::after {
        inset-inline-start: -60px;
        inset-inline-end: auto
    }
}

/* ============================================================================



   v13.1 · INSTITUTE landing — same architecture, violet identity + contact rows.



   ============================================================================ */
.sk-mkt-pd--institute.prof-land {
    --in: #6b46c1;
    --in-soft: rgba(107,70,193,.1);
    --in-line: rgba(107,70,193,.38)
}

.sk-mkt-pd--institute.prof-land .land-av {
    background: #6b46c100;
    color: #fff
}

.sk-mkt-pd--institute.prof-land .land-av::before {
    border-color: var(--in-line)
}

.sk-mkt-pd--institute.prof-land .land-av::after {
    background: var(--in)
}

.sk-mkt-pd--institute.prof-land .land-av .sat {
    border-color: var(--in-line)
}

.sk-mkt-pd--institute.prof-land .prof-role {
    background: var(--in-soft);
    border-color: var(--in-line)
}

.sk-mkt-pd--institute.prof-land .prof-role svg {
    color: var(--in)
}

.sk-mkt-pd--institute.prof-land .land-eyebrow {
    background: var(--in);
    color: #fff
}

.sk-mkt-pd--institute.prof-land .land-sec-h h2::after {
    background: var(--in)
}

.sk-mkt-pd--institute.prof-land .land-sec::before {
    border-color: var(--in-line)
}

.sk-mkt-pd--institute.prof-land .land-sec::after {
    background: radial-gradient(closest-side,var(--in-soft),transparent 72%)
}

.sk-mkt-pd--institute.prof-land .tl-org {
    background: var(--in-soft);
    color: var(--in)
}

.sk-mkt-pd--institute.prof-land .ib-ic {
    color: var(--in)
}

.sk-mkt-pd--institute.prof-land .prof-social a:hover {
    background: var(--in);
    border-color: var(--in);
    color: #fff
}

.sk-mkt-pd--institute.prof-land .land-meta svg {
    color: var(--in)
}

/* contact rows */
.prof-land .land-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 12px;
    max-width: 940px;
    margin-inline:auto}

.prof-land .lc {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 14px;
    padding: 15px 16px
}

.prof-land .lc-ic {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1.6px solid var(--sk-line-strong);
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--sk-ink)
}

.prof-land .lc-ic svg {
    width: 19px;
    height: 19px
}

.prof-land .lc b {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--sk-ink-faint);
    margin-bottom: 4px
}

.prof-land .lc p {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sk-ink);
    line-height: 1.9
}

.sk-mkt-pd--institute.prof-land .lc-ic {
    color: var(--in)
}

/* ---- v13.2 · institute team grid ---- */
.prof-land .land-team {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(190px,1fr));
    gap: 12px;
    max-width: 940px;
    margin-inline:auto}

.prof-land .tm {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 16px;
    padding: 20px 14px 16px;
    transition: border-color .2s var(--sk-ease),transform .2s var(--sk-ease)
}

.prof-land .tm:hover {
    transform: translateY(-3px)
}

.sk-mkt-pd--institute.prof-land .tm:hover {
    border-color: var(--in)
}

.prof-land .tm-av {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--sk-amber);
    color: #181a1d
}

.sk-mkt-pd--institute.prof-land .tm-av {
    background: var(--in-soft);
    color: var(--in)
}

.prof-land .tm-av img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.prof-land .tm-av svg {
    width: 30px;
    height: 30px
}

.prof-land .tm>b {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--sk-ink)
}

.prof-land .tm-role {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--sk-ink-faint)
}

.sk-mkt-pd--institute.prof-land .tm-role {
    color: var(--in)
}

.prof-land .tm-rate {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--sk-ink-soft)
}

.prof-land .tm-rate svg {
    width: 14px;
    height: 14px;
    color: var(--sk-amber-deep)
}

.prof-land .tm-rate b {
    font-weight: 600;
    color: var(--sk-ink)
}

.prof-land .tm-rate small {
    font-size: 10.5px;
    color: var(--sk-ink-faint)
}

/* ============================================================================



   v13.3 · providers list — exam-style filter panel, 3-per-row grid, dark CTA fix.



   ============================================================================ */
/* 3 designers per row */
.sk-mkt-provgrid {
    grid-template-columns: repeat(auto-fill,minmax(270px,1fr))
}

@media(max-width: 1100px) {
    .sk-mkt-provgrid {
        grid-template-columns:repeat(auto-fill,minmax(270px,1fr))
    }
}

@media(max-width: 560px) {
    .sk-mkt-provgrid {
        grid-template-columns:1fr
    }
}

/* provider CTA in dark theme: no light slab */
[data-theme="dark"] .provider-cta {
    background: linear-gradient(135deg,var(--sk-amber-soft),var(--sk-surface-2));
    border-color: var(--sk-amber-line);
    box-shadow: none
}

[data-theme="dark"] .provider-cta b {
    color: var(--sk-ink)
}

[data-theme="dark"] .provider-cta span {
    color: var(--sk-ink-soft)
}

/* ---- v13.4 · dashed corner rings removed from story sections (glow blobs stay) ---- */
.prof-land .land-sec::before {
    content: none!important
}

/* ============================================================================



   v14 · EXAM PAGE — trust row: rating + participants boxed side by side,



   remaining metas boxed on the row below; bigger round provider avatars;



   Black-weight title. User manual edits untouched.



   ============================================================================ */
/* title: heaviest Pinar face */
.pd-v8 h1.title {
    font-weight: 800;
}

/* participants box: same silhouette as the rating box */
.pd-v8 .eg-part {
    background: var(--sk-surface);
    box-shadow: 0 6px 18px rgba(20,24,33,.07);
    color: var(--sk-ink-faint)
}

.pd-v8 .eg-part svg {
    width: 20px;
    height: 20px;
    color: #363636
}

[data-theme="dark"] .pd-v8 .eg-part svg {
    color: var(--sk-ink-soft)
}

.pd-v8 .eg-part b {
    font-size: 15px;
    font-weight: 700;
    color: var(--sk-ink)
}

[data-theme="dark"] .pd-v8 .eg-rate,[data-theme="dark"] .pd-v8 .eg-part {
    background: var(--sk-surface-2);
    box-shadow: none
}

/* metas drop to their own row, each in the same boxed design */
.pd-v8 .pd-engage {
    flex-wrap: wrap
}

.pd-v8 .pd-engage .meta {
    flex-basis: 100%;
    gap: 10px;
    flex-wrap: wrap
}

.pd-v8 .pd-engage .meta .m {
    background: var(--sk-surface);
    border-radius: 999px;
    padding: 8px 15px;
    box-shadow: 0 6px 18px rgba(20,24,33,.07)
}

[data-theme="dark"] .pd-v8 .pd-engage .meta .m {
    background: var(--sk-surface-2);
    box-shadow: none
}

.pd-v8 .pd-engage .meta .m b {
    font-size: 14px
}

/* provider avatars: bigger + fully round (designer & institute) */
.pd-v8 .provider .av, .pd-v8 .provider-card--institute .av, .pd-v8 .provider-line .av {
    width: 58px;
    height: 58px;
    border-radius: 50%
}

.pd-v8 .provider .av img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover
}

.pd-v8 .provider-card .nm b {
    font-size: 15px
}

/* v14.1 · metas boxed: outranks the earlier bare-meta !important rule (new explicit request) */
.pd-v8 .pd-engage .meta .m {
    background: var(--sk-surface)!important;
    box-shadow: 0 6px 18px rgba(20,24,33,.07)!important
}

[data-theme="dark"] .pd-v8 .pd-engage .meta .m {
    background: var(--sk-surface-2)!important;
    box-shadow: none!important
}

/* ---- v14.2 · row 2 metas: simple & bare, hairline separators (per request) ---- */
.pd-v8 .pd-engage .meta .m {
    background: none!important;
    box-shadow: none!important;
    border-radius: 0!important;
    padding: 2px 18px!important
}

.pd-v8 .pd-engage .meta .m:first-of-type {
    padding-inline-start:0!important}

.pd-v8 .pd-engage .meta .m+.m {
    border-inline-start:1px solid var(--sk-line)}

.pd-v8 .pd-engage .meta .m.rate {
    display: none!important
}

[data-theme="dark"] .pd-v8 .pd-engage .meta .m {
    background: none!important
}

.pd-v8 .pd-engage .meta .m+.m {
    border-inline-start:1px solid var(--sk-line)!important}

/* v14.3 · the real fix: legacy display:contents dissolved the meta box — restore it so row-2 works */ .pd-v8 .pd-engage .meta {
    display: flex!important;
    flex-basis: 100%!important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0
}

/* ---- v14.4 · provider avatars a touch smaller ---- */
.pd-v8 .provider .av, .pd-v8 .provider-card--institute .av, .pd-v8 .provider-line .av {
    width: 50px;
    height: 50px
}

/* ============================================================================



   v15 · FREE TEST — take & result, in the site's standard design language.



   Flat, Pinar type scale, amber accents, standard buttons & breadcrumbs.



   ============================================================================ */
.ft-page {
    padding-bottom: 56px
}

.ft-hero {
    max-width: 820px;
    margin: 6px auto 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px
}

.ft-eyebrow {
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    color: #181a1d;
    background: var(--sk-amber);
    padding: 5px 14px;
    border-radius: 999px
}

.ft-hero h1 {
    font-size: clamp(24px,3vw,32px);
    font-weight: 900;
    letter-spacing: -.5px;
    line-height: 1.5;
    color: var(--sk-ink);
    margin: 0
}

.ft-lead {
    font-size: 15px;
    line-height: 2.05;
    color: var(--sk-ink-soft);
    margin: 0;
    max-width: 64ch
}

.ft-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sk-ink);
    border: 1px solid var(--sk-line-strong);
    border-radius: 999px;
    padding: 8px 16px;
    background: var(--sk-surface)
}

.ft-count svg {
    width: 16px;
    height: 16px;
    color: var(--sk-amber-deep)
}

.ft-form {
    max-width: 820px;
    margin-inline:auto;display: flex;
    flex-direction: column;
    gap: 16px
}

.ft-q {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 16px;
    padding: 18px 20px
}

.ft-q-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.ft-qnum {
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    color: var(--sk-amber-deep);
    background: var(--sk-amber-soft);
    border: 1px solid var(--sk-amber-line);
    padding: 4px 12px;
    border-radius: 999px
}

.ft-qtype {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sk-ink-faint);
    border: 1px solid var(--sk-line);
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--sk-surface)
}

.ft-q-body {
    font-size: 15px;
    font-weight: 600;
    line-height: 2;
    color: var(--sk-ink);
    margin-bottom: 14px
}

.ft-q-body p {
    margin: 0
}

.ft-opts {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.ft-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--sk-line);
    border-radius: 12px;
    background: var(--sk-surface);
    cursor: pointer;
    transition: border-color .16s var(--sk-ease),background .16s var(--sk-ease)
}

.ft-opt:hover {
    border-color: var(--sk-amber-line)
}

.ft-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.ft-opt .mark {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 3px;
    border: 2px solid var(--sk-line-strong);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: .16s
}

.ft-opt input[type="checkbox"]+.mark {
    border-radius: 6px
}

.ft-opt .mark::after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #181a1d;
    transform: scale(0);
    transition: .16s
}

.ft-opt input[type="checkbox"]+.mark::after {
    border-radius: 2.5px
}

.ft-opt input:checked+.mark {
    background: var(--sk-amber);
    border-color: var(--sk-amber)
}

.ft-opt input:checked+.mark::after {
    transform: scale(1)
}

.ft-opt:has(input:checked) {
    border-color: var(--sk-amber);
    background: var(--sk-amber-soft)
}

.ft-opt .tx {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.95;
    color: var(--sk-ink)
}

.ft-opt .tx p {
    margin: 0
}

.ft-textarea {
    width: 100%;
    border: 1px solid var(--sk-line-strong);
    border-radius: 12px;
    background: var(--sk-surface);
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    line-height: 2;
    color: var(--sk-ink);
    resize: vertical;
    min-height: 130px
}

.ft-textarea:focus {
    outline: none;
    border-color: var(--sk-amber)
}

.ft-actions {
    display: flex;
    justify-content: center;
    margin-top: 8px
}

.ft-actions--split {
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap
}

.ft-submit {
    height: 48px;
    padding-inline:26px;font-size: 14.5px;
    font-weight: 700;
    gap: 9px
}

/* ---- result ---- */
.ft-hero--result {
    flex-direction: row;
    text-align: start;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 960px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(560px 230px at 88% -50%, rgba(255,194,24,.18), transparent 62%),
        radial-gradient(430px 210px at -8% 130%, rgba(255,194,24,.09), transparent 60%),
        var(--sk-surface);
    border: 1px solid var(--sk-amber-line,#f0ddaa);
    border-radius: 20px;
    padding: 26px 28px;
    box-shadow: 0 20px 46px -24px rgba(20,24,33,.2)
}

/* نوار طلایی ظریف بالای کارت نتیجه */
.ft-hero--result::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 4px;
    background: linear-gradient(90deg,var(--sk-amber),#ffe08a 42%,rgba(255,194,24,0) 88%)
}

.ft-hero--result .ft-hero-tx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0
}

.ft-score {
    --ft-pct: 0;
    flex-shrink: 0;
    position: relative;
    width: 134px;
    height: 134px;
    border-radius: 50%;
    border: 0;
    background: conic-gradient(var(--sk-amber) calc(var(--ft-pct)*1%), var(--sk-surface-3,#edeff3) 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 12px 28px -14px rgba(214,158,17,.6)
}

/* دیسک داخلی حلقه پیشرفت امتیاز */
.ft-score::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--sk-surface);
    box-shadow: inset 0 0 0 1px var(--sk-line)
}

.ft-score b {
    position: relative;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--sk-ink);
    }

.ft-score span {
    position: relative;
    font-size: 11px;
    font-weight: 700;
    color: var(--sk-ink-faint)
}

.ft-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    max-width: 960px;
    margin: 0 auto 30px
}

.ft-metric {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center
}

.ft-metric span {
    font-size: 12px;
    font-weight: 600;
    color: var(--sk-ink-faint)
}

.ft-metric b {
    font-size: 24px;
    font-weight: 800;
    color: var(--sk-ink);
    }

.ft-metric small {
    font-size: 11px;
    color: var(--sk-ink-faint)
}

.ft-review {
    max-width: 960px;
    margin-inline:auto}

.ft-review-head {
    text-align: center;
    margin: 34px 0 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px
}

.ft-review-head h2 {
    font-size: 21px;
    font-weight: 800;
    color: var(--sk-ink);
    margin: 0
}

.ft-rev {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-inline-start:4px solid var(--sk-line-strong); border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 12px
}

.ft-rev.ok {
    border-inline-start-color:#22C55E}

.ft-rev.bad {
    border-inline-start-color:#ef4444}

.ft-tag {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px
}

.ft-tag.ok {
    background: rgba(34,197,94,.12);
    color: #15803d
}

.ft-tag.bad {
    background: rgba(239,68,68,.1);
    color: #dc2626
}

.ft-tag.neutral {
    background: var(--sk-surface-2);
    color: var(--sk-ink-soft)
}

.ft-answer {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--sk-surface-2);
    border-radius: 11px;
    font-size: 13.5px;
    line-height: 1.95
}

.ft-answer>span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--sk-ink-faint);
    margin-bottom: 6px
}

.ft-explain {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 2;
    color: var(--sk-ink-soft)
}

.ft-explain b {
    color: var(--sk-amber-deep)
}

[data-theme="dark"] .ft-rev.ok {
    border-inline-start-color:#4ade80}

[data-theme="dark"] .ft-tag.ok {
    color: #4ade80
}

@media(max-width: 760px) {
    .ft-hero--result {
        flex-direction:column;
        text-align: center
    }

    .ft-hero--result .ft-hero-tx {
        align-items: center
    }

    .ft-metrics {
        grid-template-columns: 1fr
    }
}

/* ============================================================================



   v16 · PUBLIC ROLE REQUESTS — designer/institute request + done, standard flat.



   ============================================================================ */
.rq-page {
    padding-bottom: 64px
}

.rq-hero {
    max-width: 760px;
    margin: 6px auto 26px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px
}

.rq-eyebrow {
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    color: #181a1d;
    background: var(--sk-amber);
    padding: 5px 14px;
    border-radius: 999px
}

.rq-hero h1 {
    font-size: clamp(24px,3vw,32px);
    font-weight: 900;
    letter-spacing: -.5px;
    line-height: 1.5;
    color: var(--sk-ink);
    margin: 0
}

.rq-lead {
    font-size: 14.5px;
    line-height: 2.05;
    color: var(--sk-ink-soft);
    margin: 0;
    max-width: 62ch
}

.rq-card {
    max-width: 720px;
    margin-inline:auto;background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 18px;
    padding: 26px 26px 22px
}

.rq-form .sk-field {
    margin-bottom: 16px
}

.rq-form .sk-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sk-ink);
    margin-bottom: 8px
}

.rq-form .sk-field input,.rq-form .sk-field select,.rq-form .sk-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--sk-line-strong);
    border-radius: 12px;
    background: var(--sk-surface);
    padding: 11px 14px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.9;
    color: var(--sk-ink)
}

.rq-form .sk-field textarea {
    min-height: 120px;
    resize: vertical
}

.rq-form .sk-field input:focus,.rq-form .sk-field select:focus,.rq-form .sk-field textarea:focus {
    outline: none;
    border-color: var(--sk-amber)
}

.rq-form .sk-field small {
    display: block;
    margin-top: 7px;
    font-size: 11.5px;
    line-height: 1.9;
    color: var(--sk-ink-faint)
}

.rq-submit {
    width: 100%;
    height: 48px;
    font-size: 14.5px;
    font-weight: 700;
    margin-top: 6px
}

.rq-note {
    margin: 14px 0 0;
    text-align: center;
    font-size: 11.5px;
    color: var(--sk-ink-faint)
}

.rq-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px
}

.rq-message {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.9;
    border-radius: 12px;
    padding: 11px 14px;
    background: var(--sk-surface-2);
    color: var(--sk-ink)
}

.rq-message.success {
    background: rgba(34,197,94,.1);
    color: #15803d
}

.rq-message.error {
    background: rgba(239,68,68,.09);
    color: #dc2626
}

[data-theme="dark"] .rq-message.success {
    color: #4ade80
}

.rq-done .rq-done-box {
    max-width: 560px;
    margin: 8vh auto 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 20px;
    padding: 44px 30px 38px
}

.rq-done-ic {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(34,197,94,.12);
    color: #16a34a
}

.rq-done-ic svg {
    width: 38px;
    height: 38px
}

.rq-done h1 {
    font-size: clamp(22px,2.6vw,28px);
    font-weight: 900;
    color: var(--sk-ink);
    margin: 0
}

.rq-done-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px
}

[data-theme="dark"] .rq-done-ic {
    color: #4ade80
}

@media(max-width: 560px) {
    .rq-card {
        padding:20px 16px 18px
    }
}

.rq-form .sk-field input:focus,.rq-form .sk-field select:focus,.rq-form .sk-field textarea:focus {
    border-color: var(--sk-amber)!important;
    box-shadow: none!important
}

/* 2026-07 — split marketplace filters: specialized first, global/general second */
.sk-mkt-fgroup.is-searching .sk-mkt-fcheck.sk-mkt-filter-extra:not(.hide) {
    display: flex
}

.sk-mkt-axis-split {
    gap: 10px;
    margin-inline:-16px;padding-inline:0;max-height: 192px;
    overflow-y: auto;
    overflow-x: hidden
}

.sk-mkt-axis-section {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0 0 4px
}

.sk-mkt-axis-section.is-general {
    display: none
}

.sk-mkt-fgroup.is-expanded .sk-mkt-axis-section.is-general, .sk-mkt-fgroup.is-searching .sk-mkt-axis-section.is-general {
    display: flex
}

.sk-mkt-axis-section-title {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 16px 2px;
    padding: 7px 10px;
    border: 1px solid var(--sk-line);
    border-radius: 10px;
    background: var(--sk-surface);
    color: var(--sk-ink-soft);
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: -.01em
}

.sk-mkt-axis-section-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0
}

.sk-mkt-fgroup.is-expanded .sk-mkt-cbset.sk-mkt-axis-split {
    max-height: none;
    overflow: visible;
    gap: 14px
}

.sk-mkt-fgroup.is-expanded .sk-mkt-axis-section-list {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--sk-line) transparent;
    border: 1px solid var(--sk-line);
    border-radius: 12px;
    background: var(--sk-surface)
}

.sk-mkt-fgroup.is-expanded .sk-mkt-axis-section-list::-webkit-scrollbar {
    width: 6px
}

.sk-mkt-fgroup.is-expanded .sk-mkt-axis-section-list::-webkit-scrollbar-track {
    background: transparent
}

.sk-mkt-fgroup.is-expanded .sk-mkt-axis-section-list::-webkit-scrollbar-thumb {
    background: var(--sk-line);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 999px
}

.sk-mkt-fgroup.is-expanded .sk-mkt-axis-section-list:hover::-webkit-scrollbar-thumb {
    background: var(--sk-line-strong);
    border: 2px solid transparent;
    background-clip: content-box
}

.sk-mkt-fgroup.is-expanded .sk-mkt-axis-section-list .sk-mkt-fcheck {
    margin-inline:0}

@media(max-width: 760px) {
    .sk-mkt-fgroup.is-expanded .sk-mkt-axis-section-list {
        max-height:320px
    }

    .sk-mkt-axis-section-title {
        font-size: 11px
    }
}

/* Main category logo used only inside the public exam detail header cover. */
.sk-mkt-pd .buy .cover .cat-logo-cover {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(95% 85% at 75% 8%,rgba(255,194,24,.34),transparent 58%),linear-gradient(135deg,#202329,#111317);
    overflow: hidden
}

.sk-mkt-pd .buy .cover .cat-logo-cover::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    backdrop-filter: blur(4px)
}

.sk-mkt-pd .buy .cover .cat-logo-cover img {
    position: relative!important;
    inset: auto!important;
    width: min(58%,190px)!important;
    height: auto!important;
    max-height: 64%!important;
    object-fit: contain!important;
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.32));
    z-index: 1
}

@media(max-width: 640px) {
    .sk-mkt-pd .buy .cover .cat-logo-cover img {
        width:min(48%,170px)!important;
        max-height: 58%!important
    }
}

/* ============================================================================



   v17 · DETAIL TAG WEIGHTS + CRUMB STANDARD — general skills/tools get a



   lighter chip than specialized ones; last breadcrumb item is always heavy.



   ============================================================================ */
.sk-mkt-pd .also--lite .tag {
    background: transparent;
    border: 1px solid transparent;
    color: var(--sk-ink-soft);
    font-weight: 500;
    font-size: 12px;
    padding: 5px 10px
}

.sk-mkt-pd .also--lite .tag:hover {
    border-color: var(--sk-line-strong);
    color: var(--sk-ink)
}

.sk-mkt-pd .also--lite .lbl {
    color: var(--sk-ink-faint)
}

.sk-mkt-pd .also:not(.also--lite) .tag {
    font-weight: 600
}

/* breadcrumbs: the last node is the current page — heavy, ink, everywhere */
.skill-breadcrumbs > a:last-child {
    color: var(--sk-ink);
    font-weight: 700
}

.skill-breadcrumbs > a:last-child:hover {
    color: var(--sk-amber-deep)
}

.skill-breadcrumbs .cur {
    color: var(--sk-ink);
    font-weight: 700
}

.sk-mkt-crumb .cur {
    font-weight: 700
}

/* v17.1 — general tags: pure text with dot separators; crumbs unified with list */
.sk-mkt-pd .also--lite .tag {
    background: transparent!important;
    border: 0!important;
    padding: 0!important;
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sk-ink-soft);
    box-shadow: none!important
}

.sk-mkt-pd .also--lite .tag:hover {
    color: var(--sk-ink)
}

.sk-mkt-pd .also--lite .tag:not(:last-child)::after {
    content: "·";
    margin-inline-start:9px; color: var(--sk-ink-faint);
    font-weight: 400
}

.skill-breadcrumbs {
    font-size: 13px
}

.skill-breadcrumbs a {
    font-weight: 600;
    color: var(--sk-ink-faint)
}

.skill-breadcrumbs a:hover {
    color: var(--sk-amber-deep)
}

.sk-mkt-pd .skill-breadcrumbs {
    margin: 18px 0 2px
}

.pd-v8 .lead-col .skill-breadcrumbs {
    font-size: 13px;
    letter-spacing: 0;
    margin: 18px 0 26px
}

.sk-mkt-pd .also--lite .tag+.tag::before {
    content: none
}

/* ============================================================================



   v18 · DOMAIN PROFILE GRID — jobs/skills/tools rows become an aligned



   definition grid: fixed label column with icon tile, content column that



   stays aligned across wraps, hairline row separators. CSS-only.



   ============================================================================ */
.pd-v8 .msr-panel .also {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    margin: 0;
    padding: 13px 0 3px;
    padding-inline-start:196px;
    min-height: 46px;
    border-top: 1px solid var(--sk-line);
}

.pd-v8 .msr-panel .also .lbl {
    position: absolute;
    inset-inline-start: 0;
    top: 15px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sk-ink)
}

.pd-v8 .msr-panel .also .lbl svg {
    width: 32px;
    height: 32px;
    padding: 8px;
    box-sizing: border-box;
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep);
    border-radius: 10px
}

/* specialized chips: flat, bordered, calm */
.pd-v8 .msr-panel .also:not(.also--lite) .tag {
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    box-shadow: none;
    border-radius: 10px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sk-ink);
    transition: border-color .15s,color .15s
}

.pd-v8 .msr-panel .also:not(.also--lite) .tag:hover {
    border-color: var(--sk-amber);
    color: var(--sk-ink)
}

[data-theme="dark"] .pd-v8 .msr-panel .also:not(.also--lite) .tag {
    background: var(--sk-surface-2)
}

/* general rows: muted label tile, plain-text tokens sit on the same column */
.pd-v8 .msr-panel .also--lite {
    padding-top: 11px;
    min-height: 40px
}

.pd-v8 .msr-panel .also--lite .lbl {
    color: var(--sk-ink-soft);
    top: 13px
}

.pd-v8 .msr-panel .also--lite .lbl svg {
    background: var(--sk-surface-2);
    color: var(--sk-ink-faint)
}

.pd-v8 .msr-panel .also--lite .tag {
    line-height: 1.9;
    align-self: center
}

@media (max-width: 700px) {
    .pd-v8 .msr-panel .also {
        padding-inline-start:0;
        padding-top: 52px
    }

    .pd-v8 .msr-panel .also .lbl {
        top: 13px
    }
}

/* v18.1 — polish pass: flush lead-col, locked start-alignment, airier rows,



   group divider, bigger primary buttons */
.pd-v8 .lead-col {
    padding-top: 0
}

@media (max-width: 1100px) {
    .pd-v8 .lead-col {
        padding-top:0
    }
}

.pd-v8 .msr-panel .also {
    justify-content: flex-start;
    padding: 15px 0 5px;
    padding-inline-start:200px;min-height: 50px
}

.pd-v8 .msr-panel .also .lbl {
    font-size: 13.5px;
    top: 17px
}

.pd-v8 .msr-panel .also .lbl svg {
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 11px
}

.pd-v8 .msr-panel .also:not(.also--lite) .tag {
    font-size: 13px;
    padding: 7px 14px
}

.pd-v8 .msr-panel .also--lite {
    padding-top: 13px;
    min-height: 44px
}

.pd-v8 .msr-panel .also--lite .lbl {
    top: 15px
}

.pd-v8 .msr-panel .also--lite .tag {
    font-size: 13px
}

/* stronger breath between specialized and general groups */
.pd-v8 .msr-panel .also:not(.also--lite) + .also--lite {
    margin-top: 8px;
    border-top-color: var(--sk-line-strong)
}

@media (max-width: 700px) {
    .pd-v8 .msr-panel .also {
        padding-inline-start:0;
        padding-top: 56px;
        justify-content: flex-start
    }
}

.sk-btn.sk-btn--primary {
    font-size: 15px;
    font-weight: 700;
    height: 44px
}

/* v18.2 — image icons for the profile rows: bare icons (no bg/border/shadow),



   dark-mode inversion; buy button font raised */
.pd-v8 .msr-panel .also .lbl img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    background: none!important;
    border: 0!important;
    box-shadow: none!important;
    border-radius: 0!important;
    padding: 0!important
}

.pd-v8 .msr-panel .also--lite .lbl img {
    opacity: .62
}

[data-theme="dark"] .pd-v8 .msr-panel .also .lbl img {
    filter: invert(1) brightness(1.05)
}

.pd-v8 .buy .sk-btn--primary {
    font-size: 17px;
    font-weight: 800
}

/* v18.3 — chip identity per category: solid pills with an inline glyph that



   inherits text color (briefcase / badge / wrench); exact buy-button rule */
.pd-v8 .msr-panel .also:not(.also--lite) .tag {
    border: 0 !important;
    background: var(--sk-surface-2);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sk-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .16s, color .16s;
}

.pd-v8 .msr-panel .also:not(.also--lite) .tag:hover {
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep)
}

[data-theme="dark"] .pd-v8 .msr-panel .also:not(.also--lite) .tag {
    background: rgba(255,255,255,.07)
}

[data-theme="dark"] .pd-v8 .msr-panel .also:not(.also--lite) .tag:hover {
    background: var(--sk-amber-soft)
}

.pd-v8 .msr-panel .also--jobs .tag::before, .pd-v8 .msr-panel .also--skl .tag::before, .pd-v8 .msr-panel .also--tools .tag::before {
    content: "";
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background: currentColor;
    opacity: .75;
    -webkit-mask: var(--tag-glyph) center/contain no-repeat;
    mask: var(--tag-glyph) center/contain no-repeat
}

.pd-v8 .msr-panel .also--jobs .tag {
    --tag-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%207V6a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v1M4%2012h16M6%207h12a2%202%200%200%201%202%202v8a3%203%200%200%201-3%203H7a3%203%200%200%201-3-3V9a2%202%200%200%201%202-2Z%22/%3E%3C/svg%3E")
}

.pd-v8 .msr-panel .also--skl .tag {
    --tag-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%202%202.4%202.1%203.2-.3%201%203%202.9%201.4-1%203%201%203-2.9%201.4-1%203-3.2-.3L12%2021l-2.4-2.1-3.2.3-1-3L2.5%2014.9l1-3-1-3%202.9-1.3%201-3%203.2.3Z%22/%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4.5%22/%3E%3C/svg%3E")
}

.pd-v8 .msr-panel .also--tools .tag {
    --tag-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4.5%204.5%200%200%200%205.6%205.6l-8.6%208.6a2.3%202.3%200%200%201-3.2%200l-2.4-2.4a2.3%202.3%200%200%201%200-3.2l8.6-8.6Z%22/%3E%3Cpath%20d%3D%22M17%203l4%204%22/%3E%3C/svg%3E")
}

.pd-v8 .buy .sk-btn--primary {
    font-size: 14px !important;
    font-weight: 800;
}

/* v18.4 — measures header: full-width with a stretching measurement ruler



   bridging the domain to the level pill (fills the empty side) */
.pd-v8 .msr-panel .measures {
    width: 100%;
    max-width: none;
    align-items: center
}

.pd-v8 .msr-panel .measures .tx {
    flex: 0 0 auto
}

.pd-v8 .msr-panel .measures .tx span {
    font-size: 12px;
    margin-bottom: 3px
}

.pd-v8 .msr-panel .measures .tx b {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -.3px
}

.pd-v8 .msr-panel .measures .lv {
    order: 3;
    margin-inline-start:0;flex-shrink: 0;
    border: 1px solid var(--sk-line);
    border-radius: 999px;
    padding: 9px 15px;
    background: var(--sk-surface)
}

@media (max-width: 700px) {
    .pd-v8 .msr-panel .measures {
        flex-wrap:wrap
    }

    .pd-v8 .msr-panel .measures .lv {
        margin-inline-start:auto}
}

/* ============================================================================



   v19 · HERO POLISH — measures per spec (no ruler, no dashed border), meta



   breathing room in both detail pages, tighter provider gap, card-like



   provider lines on courses, ghost pills for general tags, airier sec-h.



   ============================================================================ */
.pd-v8 .msr-panel .measures {
    padding: 0 0 15px;
    margin: 0;
    border-bottom: 0;
}

.pd-v8 .msr-panel .measures .lv {
    margin-inline-start:auto}

.pd-v8 .pd-engage .meta {
    margin-top: 16px;
    padding-top: 18px
}

.pd-v8 .provider--rich,.pd-v8 .provider--stack {
    padding-bottom: 2px;
    margin-bottom: 0
}

.pd-v8 .provider--stack .provider-line .nm {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.pd-v8 .provider--stack .provider-line .nm b {
    font-size: 14px
}

.pd-v8 .provider--stack .provider-line .nm>span {
    font-size: 11px;
    color: var(--sk-ink-faint)
}

/* general tags: quiet ghost pills — clearly secondary to the specialized ones */
.sk-mkt-pd .also--lite .tag {
    background: transparent!important;
    border: 1px solid var(--sk-line)!important;
    border-radius: 999px!important;
    padding: 5px 12px!important;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--sk-ink-soft)
}

.sk-mkt-pd .also--lite .tag::after {
    content: none!important
}

.sk-mkt-pd .also--lite .tag:hover {
    border-color: var(--sk-line-strong)!important;
    color: var(--sk-ink)
}

.sk-mkt-pd .sec-h {
    margin-bottom: 18px
}

.pd-v8 .msr-panel .also--lite .tag {
    font-size: 11.5px;
    font-weight: 500
}

/* v19.1 — engage breathing room; course provider = plain single-exam look;



   measures becomes a soft banner (no dead空 space) */
.pd-v8 .pd-engage {
    margin-top: 16px
}

.pd-v8 .provider--stack .provider-line {
    background: transparent;
    border: 0;
    padding: 2px 0;
    gap: 12px
}

.pd-v8 .provider--stack .provider-line .go {
    display: none
}

.pd-v8 .provider--stack .provider-line .nm .provider-label {
    font-size: 11px;
    color: var(--sk-ink-faint);
    font-weight: 600
}

.pd-v8 .provider--stack .provider-line .nm b,.pd-v8 .provider--stack .provider-line .nm b a {
    font-size: 15px;
    font-weight: 800;
    color: var(--sk-ink)
}

.pd-v8 .provider--stack .provider-line .nm>span {
    font-size: 11.5px;
    color: var(--sk-ink-faint)
}

/* v19.2 — course provider = single-exam inline model (label + name on one



   line, no sub-caption); measures back to clean spec with a refined level



   meter unit that closes the row */
.pd-v8 .provider--stack .provider-line .nm {
    flex-direction: row;
    align-items: baseline;
    gap: 8px
}

.pd-v8 .provider--stack .provider-line .nm .provider-label {
    font-size: 13px
}

.pd-v8 .provider--stack .provider-line .nm b, .pd-v8 .provider--stack .provider-line .nm b a {
    font-size: 15px;
    font-weight: 600
}

.pd-v8 .provider--stack .provider-line .nm>span {
    display: none
}

.pd-v8 .msr-panel .measures {
    background: transparent;
    border-radius: 0;
    padding: 0 0 15px;
    margin: 0;
    border-bottom: 0
}

[data-theme="dark"] .pd-v8 .msr-panel .measures .lv {
    background: var(--sk-surface-2)
}

/* v19.3 — level unit: borderless, docked at the start next to the domain */
.pd-v8 .msr-panel .measures {
    gap: 16px 30px;
    justify-content: flex-start
}

/* ============================================================================



   v20 · LEVEL LADDER — replaces the old level pill: a 4-rung progress ladder



   that fills up to the exam's level (all = every rung). Borderless, docked at



   the row start beside the domain. Semantic caption «سطح آزمون» (no "مناسب").



   ============================================================================ */
.pd-v8 .msr-panel .measures {
    gap: 14px 34px;
    justify-content: flex-start;
    align-items: center
}

.lvlad {
    display: inline-flex;
    flex-direction: column;
    gap: 9px;
    margin-inline-start:auto}

.lvlad-head {
    display: flex;
    align-items: baseline;
    gap: 7px
}

.lvlad-k {
    font-size: 11px;
    font-weight: 600;
    color: var(--sk-ink-faint)
}

.lvlad-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--sk-ink)
}

.lvlad-track {
    display: inline-flex;
    gap: 7px
}

.lvlad .rung {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px
}

.lvlad .rung i {
    width: 34px;
    height: 6px;
    border-radius: 999px;
    background: var(--sk-line-strong);
    transition: background .3s var(--sk-ease)
}

.lvlad .rung em {
    font-style: normal;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--sk-ink-faint);
    white-space: nowrap;
    transition: color .3s
}

/* fill rungs up to the level */
.lvlad--inter .r1 i,.lvlad--inter .r2 i, .lvlad--adv .r1 i,.lvlad--adv .r2 i,.lvlad--adv .r3 i, .lvlad--exp .r1 i,.lvlad--exp .r2 i,.lvlad--exp .r3 i,.lvlad--exp .r4 i, .lvlad--beg .r1 i, .lvlad--all .r1 i,.lvlad--all .r2 i,.lvlad--all .r3 i,.lvlad--all .r4 i {
    background: var(--sk-amber)
}

.lvlad--inter .r1 em,.lvlad--inter .r2 em, .lvlad--adv .r1 em,.lvlad--adv .r2 em,.lvlad--adv .r3 em, .lvlad--exp .rung em, .lvlad--beg .r1 em, .lvlad--all .rung em {
    color: var(--sk-ink-soft)
}

/* the current rung gets a subtle emphasis */
.lvlad--beg .r1 i,.lvlad--inter .r2 i,.lvlad--adv .r3 i,.lvlad--exp .r4 i {
    height: 8px;
    box-shadow: 0 3px 8px -3px var(--sk-amber-press)
}

/* "all levels": show a single wide "همه سطوح" bar instead of graded rungs */
.lvlad--all .lvlad-track {
    position: relative
}

[data-theme="dark"] .lvlad .rung i {
    background: var(--sk-line-2)
}

[data-theme="dark"] .lvlad--inter .r1 i,[data-theme="dark"] .lvlad--inter .r2 i, [data-theme="dark"] .lvlad--adv .r1 i,[data-theme="dark"] .lvlad--adv .r2 i,[data-theme="dark"] .lvlad--adv .r3 i, [data-theme="dark"] .lvlad--exp .r1 i,[data-theme="dark"] .lvlad--exp .r2 i,[data-theme="dark"] .lvlad--exp .r3 i,[data-theme="dark"] .lvlad--exp .r4 i, [data-theme="dark"] .lvlad--beg .r1 i, [data-theme="dark"] .lvlad--all .r1 i,[data-theme="dark"] .lvlad--all .r2 i,[data-theme="dark"] .lvlad--all .r3 i,[data-theme="dark"] .lvlad--all .r4 i {
    background: var(--sk-amber)
}

@media (max-width: 600px) {
    .lvlad {
        margin-inline-start:0
    }

    .lvlad .rung i {
        width: 26px
    }

    .lvlad .rung em {
        font-size: 8.5px
    }
}

/* v20.1 — dock level ladder beside the domain (no auto-push-left) with a



   vertical hairline divider between them */
.lvlad {
    margin-inline-start:0;position: relative;
    padding-inline-start:30px}

.lvlad::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 42px;
    background: var(--sk-line-strong)
}

/* =====================================================================



   PDP PREMIUM POLISH v1 — صفحه جزئیات آزمون (pd-v8)



   ۱) ستاره امتیاز کسری  ۲) حذف ستاره تزئینی کارت خرید (تیک برند می‌ماند)



   ۳) رنگ برند برای حوزه به جای سبز  ۴) نقطه یکدست روی همه چیپ‌ها



   ۵) ریتم عمودی جمع‌تر هیرو



   ===================================================================== */
.pd-v8 .eg-rate .stars {
    position: relative;
    display: inline-block;
    line-height: 1
}

.pd-v8 .eg-rate .stars i {
    font-style: normal;
    font-size: 18px;
    letter-spacing: 2px
}

.pd-v8 .eg-rate .stars .base {
    color: var(--sk-line-strong)
}

.pd-v8 .eg-rate .stars .fill {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: var(--rf,100%);
    overflow: hidden;
    white-space: nowrap;
    color: var(--sk-amber)
}

.pd-v8 .buy-body::before {
    content: none
}

.pd-v8 .measures .tx b {
    color: var(--sk-ink)
}

[data-theme="dark"] .pd-v8 .measures .tx b {
    color: var(--sk-ink)
}

.pd-v8 .also .tag+.tag::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sk-amber);
    margin-inline-end:0;flex-shrink: 0
}

.pd-v8 .lead-col .skill-breadcrumbs {
    margin-bottom: 16px
}

.pd-v8 .provider--rich,.pd-v8 .provider--stack {
    padding-top: 10px
}

.pd-v8 .pd-engage {
    padding: 2px 0 8px
}

.pd-v8 .pd-secnav {
    margin-bottom: 26px
}

/* =====================================================================



   PDP PREMIUM POLISH v2.1



   ۱) مهر تأیید برند (سپر کهربایی + تیک زغالی) روی آواتار طراح/لوگوی آموزشگاه



      — عمداً نه دایرهٔ سبز (الگوی اینستاگرام/X) و نه ستارهٔ اسکالوپ‌دار (نشان X)



   ۲) buy-perks: دوستونهٔ فشرده، هر آیتم تک‌خط (متن بلند در تمپلیت کوتاه شد)



   ===================================================================== */
.pd-v8 a.provider-card .av {
    overflow: visible;
    position: relative
}

.pd-v8 a.provider-card .av img {
    border-radius: inherit
}

.pd-v8 .provider-card .av .vrf {
    position: absolute;
    bottom: -5px;
    inset-inline-end: 1px;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6 4.2 4.8v6.4c0 4.9 3.3 8.6 7.8 10.6 4.5-2 7.8-5.7 7.8-10.6V4.8L12 1.6z' fill='%23ffc218'/%3E%3Cpath d='M8.4 12.2l2.4 2.4 4.8-5' fill='none' stroke='%23181a1d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(24,26,29,.30))
}

.pd-v8 .buy-perks {
    grid-template-columns: 1fr 1fr;
    gap: 7px 10px
}

.pd-v8 .buy-perks li {
    white-space: nowrap;
    min-width: 0;
    font-size: 11.5px
}

/* =====================================================================



   FILTER PAGE-FLOW v1



   دسکتاپ: ساید فیلتر دیگر اسکرول داخلی ندارد و با اسکرول خود صفحه دیده می‌شود



   (درایور موبایل ≤1024px مثل قبل اسکرول خودش را دارد)



   گروه‌ها بلندتر شدند و اسکرول داخلی‌شان از قبل هم سبک‌تر/باریک‌تر (≈۲px) شد



   ===================================================================== */
@media(min-width: 1025px) {
    .sk-mkt-filter {
        position:static;
        max-height: none;
        overflow: visible
    }
}

.sk-mkt-cbset {
    max-height: 264px
}

.sk-mkt-cbset::-webkit-scrollbar, .sk-mkt-fgroup.is-expanded .sk-mkt-axis-section-list::-webkit-scrollbar {
    width: 5px
}

.sk-mkt-cbset::-webkit-scrollbar-thumb, .sk-mkt-fgroup.is-expanded .sk-mkt-axis-section-list::-webkit-scrollbar-thumb {
    background: var(--sk-line);
    border: 1.5px solid transparent;
    background-clip: content-box;
    border-radius: 999px
}

.sk-mkt-cbset:hover::-webkit-scrollbar-thumb,.sk-mkt-cbset:focus-within::-webkit-scrollbar-thumb, .sk-mkt-fgroup.is-expanded .sk-mkt-axis-section-list:hover::-webkit-scrollbar-thumb {
    background: var(--sk-line-strong);
    border: 1.5px solid transparent;
    background-clip: content-box
}

/* ===== CARD CHIP PNG + CTA POLISH — آیکون PNG هم‌خانوادهٔ PDP در چیپ‌ها + دکمهٔ مشاهدهٔ جمع‌وجور ===== */
.sk-mkt-taxline .t img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0
}

.sk-mkt-cmodal-body .sk-mkt-taxline .t img {
    width: 16px;
    height: 16px
}

.sk-mkt-card-foot .sk-btn--sm {
    font-size: 12.5px;
    padding: 8px 18px;
    min-height: 0;
    line-height: 1.6;
    border-radius: 11px
}

/* ===== PDP AVATAR + CTA SPACING — لوگوی پیش‌فرض وسط دایره، تست رایگان یک‌خطی، فاصلهٔ دکمه‌ها ===== */
.provider-card .av,.provider .av {
    overflow: hidden
}

.av img.av-ph {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 9px;
    background: #f1f2f4;
    border-radius: inherit;
    box-sizing: border-box;
    display: block
}

.pstatus {
    white-space: nowrap
}

.buy-body>.sk-btn+.sk-btn,.buy-body>form+.sk-btn,.buy-body>.sk-btn+form,.buy-body>form+form {
    margin-top: 10px
}

/* ===== PDP VRF IMAGE + SIZES — نشان تأیید تصویری، آواتار ۴۳، دکمهٔ کوتاه‌تر ===== */
.pd-v8 .provider .av,.pd-v8 .provider-card--institute .av,.pd-v8 .provider-line .av {
    width: 43px;
    height: 43px
}

.pd-v8 .provider-line .av {
    position: relative
}

.pd-v8 .provider-card .av .vrf,.pd-v8 .provider-line .av .vrf {
    position: absolute;
    bottom: -5px;
    inset-inline-end: -2px;
    width: 19px;
    height: 19px;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    background: url('../img/verified.png?v=blue2') center/contain no-repeat
}

.pd-v8 .provider-card .av .vrf::before,.pd-v8 .provider-card .av .vrf::after, .pd-v8 .provider-line .av .vrf::before,.pd-v8 .provider-line .av .vrf::after {
    content: none
}

.sk-mkt-card-foot .sk-btn--sm {
    padding: 6px 15px;
    font-size: 12px;
    line-height: 1.6;
    border-radius: 10px
}

/* ===== VRF BESIDE NAME + مقادیر کارفرما ===== */
.pd-v8 a.provider-card .av img {
    border-radius: inherit;
    opacity: .7
}

.av img.av-ph {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 9px;
    background: #ececec8a;
    border-radius: inherit;
    box-sizing: border-box;
    display: block
}

.pd-v8 .provider-card .av,.pd-v8 .provider-line .av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    flex-shrink: 0
}

.sk-mkt-cover .tag-course {
    background: rgb(48 48 48 / 78%);
    color: #fff
}

/* نشان تأیید: کنار نام، نه روی آواتار */
.pd-v8 .nm .vrf,.pd-v8 .provider-line .vrf {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3.5px;
    margin-inline-start:5px;position: static;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    background: url('../img/verified.png?v=blue2') center/contain no-repeat
}

.pd-v8 .provider-card .av .vrf,.pd-v8 .provider-line .av .vrf {
    display: none
}

/* ===== CTA/H3/AV v43 — مقادیر کارفرما + شفافیت مشروط آواتار ===== */
.sk-btn.sk-btn--primary {
    height: 35px
}

.sk-mkt-card-body h3 {
    font-size: 14.5px;
    margin-bottom: 15px;
}

.pd-v8 .provider-card .av,.pd-v8 .provider-line .av {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    flex-shrink: 0
}

/* عکس واقعی: کاملاً شفاف؛ فقط لوگوی پیش‌فرض کم‌رنگ */
.pd-v8 a.provider-card .av img {
    border-radius: inherit;
    opacity: 1
}

.pd-v8 .provider-line .av img {
    border-radius: inherit;
    opacity: 1
}

.pd-v8 a.provider-card .av img.av-ph, .pd-v8 .provider-card .av img.av-ph, .pd-v8 .provider-line .av img.av-ph {
    opacity: .7
}

/* ===== CMODAL ICON PNG — آیکون پاپ‌آپ بدون پس‌زمینه، مشکی ===== */
.sk-mkt-specs-view .spec-root .ic,.sk-mkt-cmodal-box .spec-sec .ic {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0
}

.sk-mkt-cmodal-box .ic img,.sk-mkt-specs-view .ic img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block
}

/* ===== G-HEAD IC v46 — طبق طراحی کارفرما: بدون پس‌زمینه/قاب/رنگ ===== */
.sk-mkt-specs-view .g-head .ic {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: none;
    border: none;
    display: grid;
    place-items: center;
    color: inherit;
    flex-shrink: 0
}

/* ===== DARK ICON LEGIBILITY — در تم شب، آیکون‌های PNG معکوس می‌شوند تا دیده شوند ===== */
[data-theme="dark"] .sk-mkt-taxline .t img, [data-theme="dark"] .sk-mkt-cmodal-box .ic img, [data-theme="dark"] .sk-mkt-specs-view .ic img, [data-theme="dark"] .pd-v8 .also .lbl img {
    filter: invert(1) brightness(1.4);
    opacity: .9
}

/* ===== DARK LEVEL BARS — سطح آزمون در تم شب خوانا ===== */
[data-theme="dark"] .sk-mkt-level .bars i {
    background: rgba(255,255,255,.16)
}

[data-theme="dark"] .sk-mkt-level.beg .bars i:nth-child(-n+1) {
    background: var(--sk-beg)
}

[data-theme="dark"] .sk-mkt-level.inter .bars i:nth-child(-n+2) {
    background: var(--sk-inter)
}

[data-theme="dark"] .sk-mkt-level.adv .bars i:nth-child(-n+3) {
    background: var(--sk-adv)
}

[data-theme="dark"] .sk-mkt-level.exp .bars i {
    background: var(--sk-amber)
}

[data-theme="dark"] .sk-mkt-level.exp .name {
    color: var(--sk-ink)
}

[data-theme="dark"] .sk-mkt-level.all .bars i {
    background: var(--sk-amber)
}

/* ===== FREE TEST WIZARD — تک‌سوال، حس آزمون واقعی ===== */
.ft-form.ft-wizard .ft-q {
    display: none
}

.ft-form.ft-wizard .ft-q.act {
    display: block;
    animation: ftqin .24s ease
}

@keyframes ftqin {
    from {
        opacity: 0;
        transform: translateY(7px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.ft-prog {
    height: 4px;
    background: var(--sk-surface-3);
    border-radius: 999px;
    overflow: hidden;
    margin: 2px 0 16px;
    direction: rtl
}

.ft-prog i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--sk-amber);
    transition: width .25s ease
}

.ft-form:not(.ft-wizard) .ft-prev,.ft-form:not(.ft-wizard) .ft-next {
    display: none
}

.ft-wiznav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.ft-wiznav .ft-prev[disabled] {
    opacity: .45;
    pointer-events: none
}

/* جهت متن: فارسی راست، انگلیسی چپ */
.ft-q-body,.ft-opt .tx {
    unicode-bidi: plaintext;
    text-align: start
}

/* تصاویر داخل سوال: مهارشده، قاب‌دار، وسط‌چین */
.ft-q-body img {
    display: block;
    max-width: 100%;
    max-height: 340px;
    width: auto;
    margin: 14px auto 6px;
    border-radius: 12px;
    border: 1px solid var(--sk-line);
    object-fit: contain;
    background: #fff;
    padding: 4px
}

[data-theme="dark"] .ft-q-body img {
    background: var(--sk-surface-2);
    border-color: var(--sk-line)
}

/* نتیجه: فاصله از مسیر بردکرامب */
.ft-hero--result {
    margin-top: 18px
}

/* ===== FT REVIEW OPTS + تصاویر گزینه‌ها + هم‌قدی دکمه‌ها ===== */
/* تصویر داخل گزینه‌ها (صفحهٔ تست و مرور): قاب‌دار و مهارشده */
.ft-opt .tx img,.ft-rev-opt .tx img,.ft-answer img {
    display: block;
    max-width: min(440px,100%);
    max-height: 220px;
    width: auto;
    margin: 10px auto 4px;
    border-radius: 10px;
    border: 1px solid var(--sk-line);
    object-fit: contain;
    background: #fff;
    padding: 4px
}

[data-theme="dark"] .ft-opt .tx img,[data-theme="dark"] .ft-rev-opt .tx img {
    background: var(--sk-surface-2)
}

/* دکمه‌های قبلی/بعدی/پایان: هم‌قد */
.ft-wiznav .sk-btn {
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px
}

/* مرور گزینه‌ها در نتیجه */
.ft-rev-opts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px
}

.ft-rev-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--sk-line);
    border-radius: 10px;
    font-size: 13px;
    background: var(--sk-surface);
    unicode-bidi: plaintext;
    text-align: start
}

.ft-rev-opt .tx {
    flex: 1;
    min-width: 0
}

.ft-rev-opt em {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: 999px
}

.ft-rev-opt.is-right {
    border-color: #bfe3cd;
    background: #f2faf5
}

.ft-rev-opt.is-right em.ok {
    background: rgb(31 157 87);
    color: #fff
}

.ft-rev-opt.is-wrong {
    border-color: #f0c4c4;
    background: #fdf3f3
}

.ft-rev-opt.is-wrong em.bad {
    background: #d64545;
    color: #fff
}

[data-theme="dark"] .ft-rev-opt {
    background: var(--sk-surface)
}

[data-theme="dark"] .ft-rev-opt.is-right {
    background: rgba(46,160,90,.12);
    border-color: rgba(46,160,90,.45)
}

[data-theme="dark"] .ft-rev-opt.is-wrong {
    background: rgba(214,69,69,.12);
    border-color: rgba(214,69,69,.45)
}

/* ===== FT UNIFORM IMAGES — همهٔ تصاویر سوال و گزینه: هم‌سایز، قاب ۱۶:۹، وسط‌چین ===== */
.ft-q-body img,.ft-opt .tx img,.ft-rev-opt .tx img,.ft-answer img {
    display: block;
    width: min(560px,100%);
    aspect-ratio: 16/9;
    height: auto;
    object-fit: cover;
    margin: 14px auto 6px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--sk-line);
    background: var(--sk-surface-2)
}

/* ===== FT IMAGES CATCH-ALL — هر تصویری در کارت سوال/مرور، هر جا که باشد: هم‌سایز و وسط ===== */
.ft-q img,.ft-rev img,.ft-answer img {
    display: block;
    width: min(560px,100%);
    aspect-ratio: 16/9;
    height: auto;
    object-fit: cover;
    margin: 14px auto 6px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--sk-line);
    background: var(--sk-surface-2)
}

/* ===== FT REVIEW IMAGES — در مرور پاسخ‌ها تصویر کامل و بدون کراپ نمایش داده می‌شود
   (قاب یکنواخت ۱۶:۹ فقط برای حین آزمون می‌ماند) ===== */
.ft-rev img,
.ft-rev .ft-q-body img,
.ft-rev .ft-rev-opt .tx img {
    width: auto;
    max-width: min(560px,100%);
    aspect-ratio: auto;
    height: auto;
    max-height: 440px
}

/* ===== FT OPT FLEX FIX — tx کل عرض را بگیرد تا تصویر واقعاً وسط کارت بیفتد ===== */
.ft-opt {
    align-items: flex-start
}

.ft-opt .tx {
    flex: 1 1 auto;
    min-width: 0;
    display: block
}

.ft-rev-opt .tx {
    flex: 1 1 auto;
    min-width: 0;
    display: block
}

/* ===== TAX SQUARE IMAGES — تصاویر ۵۰۰/۵۱۲ دسته‌بندی: کامل و وسط، بدون کراپ ===== */
.sk-mkt-tax-visual img {
    object-fit: contain;
    padding: 12px
}

.sk-mkt-tax-card:hover .sk-mkt-tax-visual img {
    transform: scale(1.03)
}

/* ===== TAX HOVER NO SHADE — بدون سایهٔ مشکی؛ لیبل پیل مستقل می‌گیرد ===== */
.sk-mkt-tax-visual .ov {
    background: none
}

.sk-mkt-tax-visual .ov b {
    background: rgba(255,255,255,.94);
    color: #1c1e22;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    box-shadow: 0 10px 24px -12px rgba(0,0,0,.28)
}

[data-theme="dark"] .sk-mkt-tax-visual .ov b {
    background: rgba(23,24,28,.92);
    color: #fff;
    border: 1px solid rgba(255,255,255,.14)
}

/* ===== TAX DARK NO GLOW — در تم شب هالهٔ زرد پس‌زمینهٔ تصویر حذف ===== */
[data-theme="dark"] .sk-mkt-tax-visual {
    background: var(--sk-surface-2)
}

[data-theme="dark"] .sk-mkt-tax-visual-fallback {
    background: var(--sk-surface-2)
}

/* ===== ENGV2 — تعاملات نسخه ۲: انتخاب کانال پرسش، سه‌تب پاسخ‌ها و نشان گفتگوی خصوصی ===== */
.engagement-channel-pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px
}

.engagement-channel-opt {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid var(--sk-line);
    border-radius: 13px;
    padding: 11px 13px;
    cursor: pointer;
    background: var(--sk-surface);
    transition: border-color .15s,background .15s
}

.engagement-channel-opt input {
    margin-top: 3px;
    accent-color: var(--sk-amber)
}

.engagement-channel-opt span {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.engagement-channel-opt b {
    font-size: 13px;
    color: var(--sk-ink)
}

.engagement-channel-opt small {
    font-size: 11.5px;
    color: var(--sk-ink-faint);
    line-height: 1.7
}

.engagement-channel-opt:has(input:checked) {
    border-color: var(--sk-amber);
    background: var(--sk-amber-soft)
}

.engagement-pill-private {
    background: var(--sk-amber-soft);
    border-color: var(--sk-amber)!important;
    color: var(--sk-amber-deep)
}

.engagement-question-card {
    border: 1px solid var(--sk-line);
    border-inline-start:3px solid var(--sk-amber);border-radius: 13px;
    padding: 15px 17px;
    background: var(--sk-surface);
    margin-bottom: 12px
}

.engagement-answer-tabs {
    margin-top: 4px
}

.engagement-anstab-bar {
    display: flex;
    gap: 4px;
    background: var(--sk-surface);
    border: 1px solid var(--sk-line);
    border-radius: 13px;
    padding: 5px;
    overflow-x: auto
}

.engagement-anstab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sk-ink-soft);
    border-radius: 9px;
    padding: 9px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s,color .14s
}

.engagement-anstab i {
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    background: var(--sk-surface-3);
    border-radius: 999px;
    padding: 2px 8px;
    color: var(--sk-ink-soft)
}

.engagement-anstab:hover {
    background: var(--sk-surface-2)
}

.engagement-anstab.is-active {
    background: var(--sk-amber);
    color: #181a1d
}

.engagement-anstab.is-active i {
    background: rgba(0,0,0,.14);
    color: #181a1d
}

.engagement-anspanel {
    display: none;
    padding-top: 12px
}

.engagement-anspanel.is-active {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.engagement-reply-blocked {
    border: 1px dashed var(--sk-line-strong);
    border-radius: 12px;
    padding: 12px 15px;
    margin-top: 14px
}

@media(max-width: 640px) {
    .engagement-channel-pick {
        grid-template-columns:1fr
    }
}

/* ===== EQA — پرسش‌وپاسخ مینیمال و درجا در صفحه محصول (بدون رفتن به صفحه دیگر) ===== */
.eqa__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px
}

.eqa__head h3 {
    margin: 0
}

.eqa__count {
    font-size: 12px;
    color: var(--sk-ink-faint);
    font-weight: 600
}

.eqa-ask {
    border: 1px solid var(--sk-line);
    border-radius: 12px;
    background: var(--sk-surface);
    margin-bottom: 14px;
    overflow: hidden
}

.eqa-ask__trigger {
    list-style: none;
    cursor: pointer;
    padding: 12px 15px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sk-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none
}

.eqa-ask__trigger::-webkit-details-marker {
    display: none
}

.eqa-ask__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep);
    font-size: 15px;
    line-height: 1
}

.eqa-ask[open] .eqa-ask__trigger {
    border-bottom: 1px solid var(--sk-line)
}

.eqa-ask__form {
    padding: 14px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.eqa-ask__form input[type=text],.eqa-ask__form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--sk-line);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    font-size: 13px;
    background: var(--sk-surface-2);
    color: var(--sk-ink)
}

.eqa-ask__form textarea {
    min-height: 74px;
    resize: vertical;
    line-height: 1.9
}

.eqa-ask__form input:focus,.eqa-ask__form textarea:focus {
    outline: none;
    border-color: var(--sk-amber);
    background: var(--sk-surface)
}

.eqa-chan {
    display: flex;
    gap: 8px
}

.eqa-chan__opt {
    flex: 1;
    position: relative;
    cursor: pointer
}

.eqa-chan__opt input {
    position: absolute;
    opacity: 0
}

.eqa-chan__opt span {
    display: block;
    text-align: center;
    border: 1px solid var(--sk-line);
    border-radius: 9px;
    padding: 7px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sk-ink-soft);
    transition: all .13s
}

.eqa-chan__opt input:checked+span {
    border-color: var(--sk-amber);
    background: var(--sk-amber-soft);
    color: var(--sk-amber-deep)
}

.eqa-ask__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px
}

.eqa-hint {
    font-size: 11.5px;
    color: var(--sk-ink-faint);
    margin: 0
}

.eqa-hint--pad {
    padding: 8px 2px
}

.eqa-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.eqa-item {
    border: 1px solid var(--sk-line);
    border-radius: 12px;
    background: var(--sk-surface);
    overflow: hidden;
    transition: border-color .13s
}

.eqa-item[open] {
    border-color: var(--sk-line-strong)
}

.eqa-item__row {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    user-select: none
}

.eqa-item__row::-webkit-details-marker {
    display: none
}

.eqa-item__row:hover {
    background: var(--sk-surface-2)
}

.eqa-item__q {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}

.eqa-item__q b {
    font-size: 13.5px;
    color: var(--sk-ink);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

.eqa-item__q small {
    font-size: 11px;
    color: var(--sk-ink-faint)
}

.eqa-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto
}

.eqa-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--sk-ink-soft);
    background: var(--sk-surface-3);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap
}

.eqa-badge--ok {
    color: var(--sk-ok);
    background: color-mix(in srgb,var(--sk-ok) 12%,transparent)
}

.eqa-item__ac {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: var(--sk-amber-deep);
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px
}

.eqa-item__chev {
    color: var(--sk-ink-faint);
    font-size: 12px;
    transition: transform .18s
}

.eqa-item[open] .eqa-item__chev {
    transform: rotate(180deg)
}

.eqa-item__body {
    padding: 4px 15px 14px;
    border-top: 1px solid var(--sk-line);
    display: flex;
    flex-direction: column;
    gap: 9px
}

.eqa-msg {
    background: var(--sk-surface-2);
    border: 1px solid var(--sk-line);
    border-radius: 10px;
    padding: 9px 12px
}

.eqa-msg--q {
    background: var(--sk-surface);
    border-inline-start:2px solid var(--sk-ink-faint)}

.eqa-msg--designer {
    background: var(--sk-amber-soft);
    border-color: var(--sk-amber)
}

.eqa-msg__h {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px
}

.eqa-msg__h b {
    font-size: 12px;
    color: var(--sk-ink);
    font-weight: 700
}

.eqa-msg__tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--sk-amber-deep);
    background: rgba(0,0,0,.05);
    border-radius: 999px;
    padding: 1px 7px
}

.eqa-msg__h time {
    font-size: 10.5px;
    color: var(--sk-ink-faint);
    margin-inline-start:auto}

.eqa-msg p {
    margin: 0;
    font-size: 12.5px;
    color: var(--sk-ink-soft);
    line-height: 1.9;
    word-break: break-word
}

.eqa-reply {
    display: flex;
    gap: 8px;
    margin-top: 2px
}

.eqa-reply__input {
    flex: 1;
    border: 1px solid var(--sk-line);
    border-radius: 9px;
    padding: 8px 12px;
    font: inherit;
    font-size: 12.5px;
    background: var(--sk-surface-2);
    color: var(--sk-ink)
}

.eqa-reply__input:focus {
    outline: none;
    border-color: var(--sk-amber);
    background: var(--sk-surface)
}

.eqa-reply__login {
    font-size: 12px;
    color: var(--sk-amber-deep);
    font-weight: 600;
    text-decoration: none;
    padding: 6px 2px
}

.eqa-reply__login:hover {
    text-decoration: underline
}

.eqa-empty {
    font-size: 12.5px;
    color: var(--sk-ink-faint);
    text-align: center;
    padding: 18px 0;
    margin: 0
}

.btn.tiny {
    padding: 7px 14px;
    font-size: 12.5px
}

/* ===== DEV NOTICE + SOON BADGE — حالت خالی دسته‌ها و نشان «به‌زودی» ===== */
.sk-mkt-devnote {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 52px 22px;
    border: 1.5px dashed var(--tk-line-strong,#d8dbe1);
    border-radius: 18px;
    background: var(--tk-surface,#fff)
}

.sk-mkt-devnote .ic {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(242,178,27,.13);
    border: 1px solid rgba(242,178,27,.35);
    color: #b45309;
    margin-bottom: 6px
}

.sk-mkt-devnote .ic svg {
    width: 28px;
    height: 28px
}

.sk-mkt-devnote b {
    font-size: 16px;
    font-weight: 800;
    color: var(--tk-ink,#111827)
}

.sk-mkt-devnote p {
    font-size: 13px;
    color: var(--tk-ink-soft,#5b6472);
    line-height: 2;
    max-width: 420px;
    margin: 0
}

.sk-mkt-devnote .cta {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f2b21b;
    color: #1a1405;
    font-weight: 800;
    font-size: 13px;
    border-radius: 12px;
    padding: 11px 20px;
    text-decoration: none;
    transition: filter .15s
}

.sk-mkt-devnote .cta:hover {
    filter: brightness(.96)
}

.tax-soon {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 3;
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    color: #666666;
    background: #fff;
    border: 1px solid rgb(150 150 150 / 55%);
    border-radius: 999px;
    padding: 3px 11px;
    line-height: 1.6;
    box-shadow: 0 3px 10px rgba(17,24,39,.10)
}

/* ===== ATTENDANCE MODE CHIP — نحوه برگزاری در هدر آموزشگاه ===== */
.land-hero .prof-mode {
    margin-inline-start:8px;color: var(--sk-amber-deep);
    background: var(--sk-amber-soft)
}

.land-hero .prof-mode svg {
    width: 14px;
    height: 14px
}

/* ===== FEATURE CARD HOVER — «ویژگی‌ها و مزیت‌ها» در جزئیات طراح و آموزشگاه ===== */
.prof-feature-card {
    transition: transform .18s var(--sk-ease,ease),border-color .18s,box-shadow .18s,background .18s
}

.prof-feature-card .feat-ic {
    transition: background .18s,color .18s,transform .18s
}

.prof-feature-card:hover {
    transform: translateY(-3px);
    border-color: var(--sk-amber);
    box-shadow: 0 12px 30px rgba(17,24,39,.09)
}

.prof-feature-card:hover .feat-ic {
    background: var(--sk-amber);
    color: #1a1405;
    transform: scale(1.06);
    border: 1px solid var(--sk-amber);
}

/* ============================================================================
   CERT PAPER v1 — بافت گواهینامه برای کارت مدارک (.prof-doc-item)
   کاغذ عاجی + نقش حکاکی‌شدهٔ ظریف (مهر نقطه‌چین و قوس‌های گوشه) + قاب داخلی
   دوخطی + مثلث‌های کهربایی چهارگوشه — همان زبان گوشه‌های گواهی‌های واقعی.
   ============================================================================ */
.sk-mkt-pd--profile .prof-doc-item {
    position: relative;
    border: 1px solid rgba(233,173,0,.30);
    border-radius: 12px;
    background-color: #fdfcf6;
    background-image:
      linear-gradient(135deg, rgba(233,173,0,.20) 11px, transparent 11.6px),
      linear-gradient(225deg, rgba(233,173,0,.20) 11px, transparent 11.6px),
      linear-gradient(45deg,  rgba(233,173,0,.20) 11px, transparent 11.6px),
      linear-gradient(315deg, rgba(233,173,0,.20) 11px, transparent 11.6px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Ccircle cx='70' cy='70' r='30' fill='none' stroke='rgba(24,26,29,.05)' stroke-width='1.6' stroke-dasharray='2.5 5'/%3E%3Ccircle cx='70' cy='70' r='21' fill='none' stroke='rgba(233,173,0,.10)' stroke-width='1.4'/%3E%3Ccircle cx='70' cy='70' r='2.4' fill='rgba(233,173,0,.16)'/%3E%3Cpath d='M10 30c12-12 22-17 36-19M130 110c-12 12-22 17-36 19' fill='none' stroke='rgba(24,26,29,.05)' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat;
    background-position: top left, top right, bottom left, bottom right, center;
    background-size: 26px 26px,26px 26px,26px 26px,26px 26px,140px 140px;
    box-shadow: none;
    transition: border-color .2s var(--sk-ease),transform .2s var(--sk-ease)
}
.sk-mkt-pd--profile .prof-doc-item::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(233,173,0,.34);
    border-radius: 8px;
    pointer-events: none
}
.sk-mkt-pd--profile .prof-doc-item:hover {
    border-color: rgba(233,173,0,.55);
    transform: translateY(-2px)
}
.sk-mkt-pd--profile .prof-doc-item > * {
    position: relative;
    z-index: 1
}
/* تصویر گواهی: سوارشده روی کاغذ با قاب مویی */
.sk-mkt-pd--profile .prof-doc-item .doc-visual {
    border: 1px solid var(--sk-line);
    background: #fff
}
/* تم تاریک */
[data-theme="dark"] .sk-mkt-pd--profile .prof-doc-item {
    background-color: var(--sk-surface-2);
    background-image:
      linear-gradient(135deg, rgba(255,194,24,.16) 11px, transparent 11.6px),
      linear-gradient(225deg, rgba(255,194,24,.16) 11px, transparent 11.6px),
      linear-gradient(45deg,  rgba(255,194,24,.16) 11px, transparent 11.6px),
      linear-gradient(315deg, rgba(255,194,24,.16) 11px, transparent 11.6px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Ccircle cx='70' cy='70' r='30' fill='none' stroke='rgba(255,255,255,.06)' stroke-width='1.6' stroke-dasharray='2.5 5'/%3E%3Ccircle cx='70' cy='70' r='21' fill='none' stroke='rgba(255,194,24,.14)' stroke-width='1.4'/%3E%3Ccircle cx='70' cy='70' r='2.4' fill='rgba(255,194,24,.18)'/%3E%3Cpath d='M10 30c12-12 22-17 36-19M130 110c-12 12-22 17-36 19' fill='none' stroke='rgba(255,255,255,.06)' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    border-color: rgba(255,194,24,.28)
}
[data-theme="dark"] .sk-mkt-pd--profile .prof-doc-item::before {
    border-color: rgba(255,194,24,.30)
}
[data-theme="dark"] .sk-mkt-pd--profile .prof-doc-item .doc-visual {
    background: var(--sk-surface-3)
}
@media (prefers-reduced-motion:reduce) {
    .sk-mkt-pd--profile .prof-doc-item {transition: none}
    .sk-mkt-pd--profile .prof-doc-item:hover {transform: none}
}

/* ============================================================================
   LAND CANVAS v2 — بوم گرادیانی صفحات جزئیات طراح/آموزشگاه
   این‌بار روی بک‌گراند خود body (پایین‌ترین لایهٔ صفحه): از y=0 سند و حتی از
   پشت هدر رنگ می‌شود، پس هر فاصله‌ای میان هدر و main هم باشد، از پشتش همین
   بوم دیده می‌شود و هیچ نوار سفیدی نمی‌ماند. هدر با سطح خودش روی بوم می‌نشیند
   و گرادیان دقیقاً از لبهٔ زیر آن آغاز به دیده‌شدن می‌کند. هیچ عنصر و
   pseudo جدیدی هم اضافه نمی‌شود.
   ============================================================================ */
.sk-mkt-body:has(.sk-mkt-pd--profile.prof-land) {
    background-color: var(--sk-surface);
    background-image:
      radial-gradient(880px 430px at 50% -20px, rgba(255,194,24,.18), transparent 62%),
      radial-gradient(560px 320px at 8% 260px, rgba(255,158,27,.07), transparent 60%),
      radial-gradient(560px 320px at 92% 310px, rgba(255,214,92,.10), transparent 60%),
      linear-gradient(180deg, #fffdf5 0%, #fff9ec 30%, rgba(255,255,255,0) 100%);
    background-repeat: no-repeat;
    background-size: auto, auto, auto, 100% min(100vh, 940px)
}
/* آموزشگاه: همان بوم با هویت بنفش */
.sk-mkt-body:has(.sk-mkt-pd--institute.prof-land) {
    background-image:
      radial-gradient(880px 430px at 50% -20px, rgba(107,70,193,.13), transparent 62%),
      radial-gradient(560px 320px at 8% 260px, rgba(139,108,216,.06), transparent 60%),
      radial-gradient(560px 320px at 92% 310px, rgba(168,140,235,.08), transparent 60%),
      linear-gradient(180deg, #fcfbff 0%, #f8f6ff 30%, rgba(255,255,255,0) 100%)
}
/* تم تاریک: نور کم‌جان، بدون شیب کرم */
[data-theme="dark"] .sk-mkt-body:has(.sk-mkt-pd--profile.prof-land) {
    background-image:
      radial-gradient(880px 430px at 50% -20px, rgba(255,194,24,.10), transparent 62%),
      radial-gradient(560px 320px at 8% 260px, rgba(255,194,24,.045), transparent 60%),
      radial-gradient(560px 320px at 92% 310px, rgba(255,194,24,.05), transparent 60%);
    background-size: auto, auto, auto
}
[data-theme="dark"] .sk-mkt-body:has(.sk-mkt-pd--institute.prof-land) {
    background-image:
      radial-gradient(880px 430px at 50% -20px, rgba(139,108,216,.13), transparent 62%),
      radial-gradient(560px 320px at 8% 260px, rgba(139,108,216,.05), transparent 60%),
      radial-gradient(560px 320px at 92% 310px, rgba(139,108,216,.06), transparent 60%);
    background-size: auto, auto, auto
}
@media (max-width: 860px) {
    .sk-mkt-body:has(.sk-mkt-pd--profile.prof-land) {
        background-size: auto, auto, auto, 100% min(78vh, 640px)
    }
}

/* ============================================================================
   FILTER SCROLL-CHAIN FIX + WEIGHT PASS — صفحات فهرست آزمون/طراحان/آموزشگاه
   ۱) قفل اسکرول: لیست‌های داخل گروه فیلتر overscroll-behavior:contain داشتند؛
      مرورگر چرخ ماوس را روی آن‌ها — حتی وقتی اسکرول ندارند — مصرف می‌کرد و به
      صفحه نمی‌رساند. با auto، اگر لیست جا داشته باشد خودش اسکرول می‌شود و در
      غیر این صورت (یا در انتهای لیست) اسکرول به صفحه زنجیر می‌شود.
      در موبایل، مهار روی خود کشوی فیلتر می‌ماند تا پشت صفحه تکان نخورد.
   ۲) وزن فونت بخش فیلتر یک پله بالاتر (طبق درخواست: خیلی کم).
   ============================================================================ */
.sk-mkt-cbset,
.sk-mkt-axis-split,
.sk-mkt-fgroup.is-expanded .sk-mkt-axis-section-list {
    overscroll-behavior: auto
}
@media (max-width: 1024px) {
    .sk-mkt-filter {
        overscroll-behavior: contain
    }
}
/* وزن‌ها */
.sk-mkt-fcheck {
    font-weight: 500
}
.sk-mkt-fcheck input:checked~.nm {
    font-weight: 700
}
.sk-mkt-fgroup>.t {
    font-weight: 700
}
.sk-mkt-flevels label {
    font-weight: 600
}
.sk-mkt-fseg label {
    font-weight: 600
}
.sk-mkt-fsearch input {
    font-weight: 500
}
.sk-mkt-ftoggle {
    font-weight: 700
}

/* Dropdown cloze runtime — Phase 2-B */
.dropdown-cloze-control{display:inline-flex;max-width:100%;margin:.2rem .24rem;vertical-align:middle}
.dropdown-cloze-select{max-width:100%;min-width:11rem;min-height:42px;border:1px solid var(--sk-line-strong);border-radius:9px;padding:7px 34px 7px 10px;background:var(--sk-surface);color:var(--sk-ink);font:inherit;line-height:1.45;cursor:pointer}
.dropdown-cloze-select:focus{outline:0;border-color:var(--sk-amber-deep);box-shadow:0 0 0 4px var(--sk-amber-soft)}
.dropdown-cloze-select:disabled{cursor:default;background:var(--sk-surface-2);color:var(--sk-ink-soft);opacity:1}
.dropdown-cloze-runtime-note{margin-top:14px;padding:12px 14px;border:1px solid var(--sk-amber-line);border-radius:9px;background:var(--sk-amber-soft);color:var(--sk-ink-soft);font-size:13px;line-height:1.9}
.dropdown-cloze-runtime-note.is-saved{border-color:var(--sk-line);background:var(--sk-surface-2)}
.dropdown-cloze-review{display:grid;gap:9px;margin-top:14px}
.dropdown-cloze-review__row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;border:1px solid var(--sk-line);border-radius:9px;background:var(--sk-surface-2)}
.dropdown-cloze-review__row span{color:var(--sk-ink-soft);font-size:12px;font-weight:650}
.dropdown-cloze-review__row strong{color:var(--sk-ink);font-size:13px;text-align:start}
.dropdown-cloze-review__row span small,.dropdown-cloze-review__row strong small,.dropdown-cloze-review__row strong em{display:block;margin-top:3px;font-size:11px;line-height:1.7;font-style:normal}
.dropdown-cloze-review__row strong em{color:var(--sk-danger)}
.dropdown-cloze-review__row.is-correct{border-color:var(--sk-ok);background:var(--sk-ok-soft)}
.dropdown-cloze-review__row.is-incorrect{border-color:var(--sk-danger)}
.dropdown-cloze-review__row.is-unanswered{border-style:dashed}
@media(max-width:560px){.dropdown-cloze-control{display:flex;width:100%;margin:.4rem 0}.dropdown-cloze-select{width:100%;min-width:0}.dropdown-cloze-review__row{align-items:flex-start;flex-direction:column;gap:5px}}
/* Phase 3: accessible two-column matching runtime and review. */
.matching-runtime{display:grid;gap:12px;margin-top:16px}
.matching-runtime__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;color:var(--sk-ink-soft);font-size:12px;font-weight:750}
.matching-runtime__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;padding:12px;border:1px solid var(--sk-line);border-radius:10px;background:var(--sk-surface-2)}
.matching-runtime__source{font-weight:700;line-height:1.9;color:var(--sk-ink)}
.matching-runtime__source small{display:block;color:var(--sk-ink-soft);font-size:11px;font-weight:500}
.matching-runtime__select{width:100%;min-height:42px;border:1px solid var(--sk-line-strong);border-radius:9px;padding:7px 34px 7px 10px;background:var(--sk-surface);color:var(--sk-ink);font:inherit;line-height:1.45}
.matching-runtime__select:focus{outline:0;border-color:var(--sk-amber-deep);box-shadow:0 0 0 4px var(--sk-amber-soft)}
.matching-runtime__select:disabled{cursor:default;background:var(--sk-surface-2);color:var(--sk-ink-soft);opacity:1}
.matching-review{display:grid;gap:9px;margin-top:14px}
.matching-review__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center;padding:11px 13px;border:1px solid var(--sk-line);border-radius:9px;background:var(--sk-surface-2)}
.matching-review__row span{color:var(--sk-ink-soft);font-size:12px;font-weight:650}
.matching-review__row strong{color:var(--sk-ink);font-size:13px;text-align:start}
.matching-review__row span small,.matching-review__row strong small,.matching-review__row strong em{display:block;margin-top:3px;font-size:11px;line-height:1.7;font-style:normal}
.matching-review__row strong em{color:var(--sk-danger)}
.matching-review__row.is-correct{border-color:var(--sk-ok);background:var(--sk-ok-soft)}
.matching-review__row.is-incorrect{border-color:var(--sk-danger)}
.matching-review__row.is-unanswered{border-style:dashed}
@media(max-width:680px){.matching-runtime__head{display:none}.matching-runtime__row,.matching-review__row{grid-template-columns:1fr;gap:7px}.matching-runtime__row{padding:10px}}
/* Phase 6: situational judgement (SJT) and rubric-guided descriptive questions. */
.sjt-runtime{display:grid;gap:14px;margin-top:16px}.sjt-runtime__instruction{padding:11px 13px;border:1px solid var(--sk-info-soft,#dbeafe);border-radius:12px;background:var(--sk-info-soft,#eff6ff);color:var(--sk-ink-soft,#475467);font-size:13px;line-height:1.9}.sjt-runtime__actions{display:grid;gap:10px}.sjt-runtime__action{border:1px solid var(--sk-line,#e4e7ec);border-radius:14px;background:var(--sk-surface,#fff);padding:12px 14px;transition:border-color .18s,box-shadow .18s,background .18s}.sjt-runtime__action:hover{border-color:var(--sk-line-strong,#c7cdd8)}.sjt-runtime__action.is-selected{border-color:var(--sk-primary,#3157d5);box-shadow:0 0 0 3px rgba(49,87,213,.10)}.sjt-runtime__action.is-correct{border-color:var(--sk-ok,#12b76a);background:var(--sk-ok-soft,#ecfdf3)}.sjt-runtime__action.is-incorrect{border-color:var(--sk-danger,#d92d20)}.sjt-runtime__action>label{display:flex;align-items:flex-start;gap:10px;cursor:pointer}.sjt-runtime__action>label>input{margin-top:6px;flex:0 0 auto}.sjt-runtime__action>label>select{min-width:76px;min-height:40px;border:1px solid var(--sk-line-strong,#d0d5dd);border-radius:10px;background:var(--sk-surface,#fff);padding:6px 9px;font:inherit;color:var(--sk-ink,#101828)}.sjt-runtime__action>label>select:focus{outline:0;border-color:var(--sk-primary,#3157d5);box-shadow:0 0 0 3px rgba(49,87,213,.12)}.sjt-runtime__text{min-width:0;flex:1;font-weight:720;line-height:1.9;color:var(--sk-ink,#101828)}.sjt-runtime__feedback{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--sk-line,#e4e7ec);font-size:12px}.sjt-runtime__feedback.status-correct strong{color:var(--sk-ok,#067647)}.sjt-runtime__feedback.status-partial strong{color:var(--sk-warning,#b54708)}.sjt-runtime__feedback.status-incorrect strong{color:var(--sk-danger,#b42318)}.sjt-runtime__rationale{margin:9px 0 0;padding:10px 12px;border-radius:10px;background:var(--sk-surface-2,#f9fafb);color:var(--sk-ink-soft,#475467);font-size:12px;line-height:1.85}.sjt-competencies{display:grid;gap:8px;margin-top:14px}.sjt-competencies__row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(120px,2fr) auto;gap:10px;align-items:center;padding:9px 11px;border:1px solid var(--sk-line,#e4e7ec);border-radius:11px}.sjt-competencies__bar{height:8px;border-radius:999px;background:var(--sk-surface-2,#eaecf0);overflow:hidden}.sjt-competencies__bar i{display:block;height:100%;border-radius:inherit;background:var(--sk-primary,#3157d5)}
.rubric-guide{display:grid;gap:10px;margin:16px 0}.rubric-guide>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:var(--sk-primary-soft,#eef4ff)}.rubric-guide>header strong{color:var(--sk-ink,#101828)}.rubric-guide>header small{color:var(--sk-ink-soft,#475467);line-height:1.7}.rubric-guide__criterion{border:1px solid var(--sk-line,#e4e7ec);border-radius:12px;background:var(--sk-surface,#fff);overflow:hidden}.rubric-guide__criterion summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;cursor:pointer;font-weight:800}.rubric-guide__criterion>p{margin:0;padding:0 14px 12px;color:var(--sk-ink-soft,#475467);line-height:1.85}.rubric-guide__levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:0 14px 14px}.rubric-guide__levels>div{display:grid;gap:4px;padding:10px;border:1px solid var(--sk-line,#e4e7ec);border-radius:10px;background:var(--sk-surface-2,#f9fafb)}.rubric-guide__levels span{color:var(--sk-ink-soft,#475467);font-size:12px;line-height:1.7}
.rubric-grading{display:grid;gap:14px;margin-top:14px}.rubric-grading__head,.rubric-grading__criterion-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.rubric-grading__head small{display:block;margin-top:4px;color:var(--sk-ink-soft,#475467)}.rubric-grading__criterion{padding:14px;border:1px solid var(--sk-line,#e4e7ec);border-radius:14px;background:var(--sk-surface-2,#f9fafb)}.rubric-grading__criterion-head p{margin:5px 0 0;color:var(--sk-ink-soft,#475467);font-size:12px;line-height:1.75}.rubric-grading__criterion-head>span{white-space:nowrap;font-weight:850;color:var(--sk-primary,#3157d5)}.rubric-grading__levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin:12px 0}.rubric-grading__level{display:block;cursor:pointer}.rubric-grading__level input{position:absolute;opacity:0;pointer-events:none}.rubric-grading__level>span{display:grid;gap:4px;height:100%;padding:11px;border:1px solid var(--sk-line,#d0d5dd);border-radius:11px;background:var(--sk-surface,#fff);transition:border-color .18s,box-shadow .18s}.rubric-grading__level input:focus-visible+span{outline:3px solid rgba(49,87,213,.18)}.rubric-grading__level input:checked+span,.rubric-grading__level.is-selected>span{border-color:var(--sk-primary,#3157d5);box-shadow:0 0 0 3px rgba(49,87,213,.10)}.rubric-grading__level b{color:var(--sk-primary,#3157d5);font-size:11px}.rubric-grading__level small{color:var(--sk-ink-soft,#475467);line-height:1.7}.rubric-grading__overall,.rubric-grading__reason{display:grid;gap:7px}.rubric-grading__reason>span b{color:var(--sk-danger,#d92d20)}.rubric-review{display:grid;gap:10px;margin-top:14px}.rubric-review__row{padding:11px 13px;border:1px solid var(--sk-line,#e4e7ec);border-radius:11px;background:var(--sk-surface-2,#f9fafb)}.rubric-review__row header{display:flex;justify-content:space-between;gap:10px}.rubric-review__row p{margin:7px 0 0;color:var(--sk-ink-soft,#475467);line-height:1.75}.rubric-review__overall{padding:11px 13px;border-inline-start:3px solid var(--sk-primary,#3157d5);background:var(--sk-primary-soft,#eef4ff);border-radius:10px}
@media(max-width:680px){.sjt-runtime__action>label{align-items:flex-start}.sjt-runtime__action>label>select{min-width:64px}.sjt-competencies__row{grid-template-columns:1fr auto}.sjt-competencies__bar{grid-column:1/-1}.rubric-guide>header,.rubric-grading__head,.rubric-grading__criterion-head{flex-direction:column}.rubric-guide__levels,.rubric-grading__levels{grid-template-columns:1fr}}


/* موبایل: مسیر راهنما نمایش داده نشود */
@media (max-width:768px){
  .skill-breadcrumbs{display:none!important}
  .skill-breadcrumbs + .land-hero{margin-top:32px}
  .land-hero{padding-top:52px}
}

/* لودینگ AJAX فهرست */
.sk-mkt-provgrid.sk-mkt-loading{opacity:.45;pointer-events:none;transition:opacity .2s ease}
@media (max-width:900px){
  .sk-mkt-filter{margin-bottom:16px}
}

/* ============================================================================
   LAND SCROLL FX v1 — جلوه‌های اسکرول صفحات جزئیات طراح/آموزشگاه
   ============================================================================ */
@media (prefers-reduced-motion: no-preference){
  .prof-land [data-reveal]{opacity:0;transform:translateY(46px);filter:blur(7px);
    transition:opacity .85s cubic-bezier(.22,.61,.2,1),transform .85s cubic-bezier(.22,.61,.2,1),filter .7s ease;
    will-change:opacity,transform,filter}
  .prof-land [data-reveal].in{opacity:1;transform:none;filter:none;will-change:auto}
  .prof-land [data-reveal="zoom"]{transform:translateY(26px) scale(.93)}
  .prof-land [data-reveal="left"]{transform:translateX(-44px)}
  .prof-land [data-reveal="right"]{transform:translateX(44px)}
  .prof-land .land-sec[data-reveal]{transform:translateY(66px)}
  .prof-land .land-sec[data-reveal].in{transform:none}
  /* استاگر فرزندان: ظهور پلکانی */
  .prof-land [data-stagger]>*{opacity:0;transform:translateY(24px);
    transition:opacity .6s cubic-bezier(.22,.61,.2,1),transform .6s cubic-bezier(.22,.61,.2,1)}
  .prof-land [data-stagger].in>*,
  .prof-land [data-reveal].in [data-stagger]>*{opacity:1;transform:none}
  .prof-land [data-stagger].in>*:nth-child(1){transition-delay:.06s}
  .prof-land [data-stagger].in>*:nth-child(2){transition-delay:.13s}
  .prof-land [data-stagger].in>*:nth-child(3){transition-delay:.2s}
  .prof-land [data-stagger].in>*:nth-child(4){transition-delay:.27s}
  .prof-land [data-stagger].in>*:nth-child(5){transition-delay:.34s}
  .prof-land [data-stagger].in>*:nth-child(6){transition-delay:.41s}
  .prof-land [data-stagger].in>*:nth-child(7){transition-delay:.48s}
  .prof-land [data-stagger].in>*:nth-child(8){transition-delay:.55s}
  .prof-land [data-stagger].in>*:nth-child(9){transition-delay:.62s}
  .prof-land [data-stagger].in>*:nth-child(10){transition-delay:.69s}
  .prof-land [data-stagger].in>*:nth-child(n+11){transition-delay:.76s}
  /* استاگر داخل سکشنِ ریویل‌شده (کانتینر خودش data-reveal ندارد) */
  .prof-land .land-sec.in [data-stagger]>*{opacity:1;transform:none}
  .prof-land .land-sec.in [data-stagger]>*:nth-child(1){transition-delay:.14s}
  .prof-land .land-sec.in [data-stagger]>*:nth-child(2){transition-delay:.22s}
  .prof-land .land-sec.in [data-stagger]>*:nth-child(3){transition-delay:.3s}
  .prof-land .land-sec.in [data-stagger]>*:nth-child(4){transition-delay:.38s}
  .prof-land .land-sec.in [data-stagger]>*:nth-child(5){transition-delay:.46s}
  .prof-land .land-sec.in [data-stagger]>*:nth-child(6){transition-delay:.54s}
  .prof-land .land-sec.in [data-stagger]>*:nth-child(n+7){transition-delay:.62s}
  /* پارالاکس هیرو: آواتار و مدار با اسکرول نرم پایین می‌آیند */
  .prof-land .land-hero .land-av{transform:translateY(calc(var(--par,0)*.14px)) scale(calc(1 - var(--par,0)*.00022));
    transition:none;will-change:transform}
}
@media (prefers-reduced-motion: reduce){
  .prof-land [data-reveal],.prof-land [data-stagger]>*{opacity:1!important;transform:none!important;translate:none!important;rotate:none!important;filter:none!important}
}

/* ============================================================================
   LAND FX v2 — هیروی سنجاق‌شده، اسلاید سکشن روی هیرو، تایتل ماسک‌شده، مارکی، پروگرس
   (فعال فقط وقتی JS کلاس fx2 را اضافه کند) 
   ============================================================================ */
@media (prefers-reduced-motion: no-preference){
  .prof-land.fx2 .land-hero{position:sticky;top:0;z-index:0;
    transform:scale(calc(1 - var(--hp,0)*.06)) translateY(calc(var(--hp,0)*-14px));
    transform-origin:top center;will-change:transform;
    filter:blur(calc(var(--hp,0)*2.5px))}
  .prof-land.fx2 .land-hero>*:not(.land-band){opacity:calc(1 - var(--hp,0)*.6)}
  .prof-land.fx2 .land-sec{position:relative;z-index:2}
  .prof-land.fx2 .land-hero + .land-sec{border-radius:30px 30px 0 0;margin-top:-26px;
    box-shadow:0 -34px 70px -42px rgba(15,18,24,.35)}
  /* تایتل سکشن: ماسک‌ریویل + خط رشد‌کننده */
  .prof-land.fx2 .land-sec-h{overflow:hidden;position:relative}
  .prof-land.fx2 .land-sec-h>*{transform:translateY(130%);
    transition:transform .95s cubic-bezier(.19,1,.22,1)}
  .prof-land.fx2 .land-sec.in .land-sec-h>*{transform:none}
  /* ورود سه‌بعدی کارت‌های پلکانی */
  .prof-land.fx2 [data-stagger]{perspective:900px}
  .prof-land.fx2 [data-stagger]>*{transform:translateY(30px) rotateX(9deg)}
  .prof-land.fx2 [data-stagger].in>*,
  .prof-land.fx2 .land-sec.in [data-stagger]>*{transform:none}
}
/* پروگرس‌بار اسکرول */
.fx2-progress{position:fixed;top:0;inset-inline-start:0;height:3px;z-index:999;
  width:calc(var(--prog,0)*1%);background:linear-gradient(90deg,var(--sk-amber,#ffc218),var(--sk-amber-deep,#e9ad00));
  border-radius:0 99px 99px 0;pointer-events:none;transition:none}

/* ============================================================================
   DARK ACT v2 — کل فضا تاریک می‌شود: وارونه‌سازی توکن‌ها + کارت کانونی
   ============================================================================ */
.prof-land{transition:background 1s ease}
.prof-land .land-sec{transition:background-color .9s ease,border-color .9s ease}
.prof-land .land-sec :is(h1,h2,h3,h4,p,li,span,b,strong,small,a,time){transition:color .7s ease,background-color .7s ease,border-color .7s ease}
.prof-land.dark-act{
  background:#0d0f13;
  --sk-surface:#14161c; --sk-surface-2:#1b1e26;
  --sk-ink:#f2f4f8; --sk-ink-soft:#c9cdd6; --sk-ink-faint:#8f95a3;
  --sk-line:#262a33; --sk-line-strong:#39404d;
  --tk-ink:#f2f4f8; --tk-ink-soft:#c9cdd6; --tk-ink-faint:#8f95a3;
  --tk-line:#262a33; --tk-surface-2:#1b1e26;
}
.prof-land.dark-act .land-sec :is(h1,h2,h3,h4){color:#f4f6fa!important}
.prof-land.dark-act .land-sec :is(p,li,time,small){color:rgba(230,233,240,.72)!important}
.prof-land.dark-act .land-sec :is(b,strong){color:#f4f6fa!important}
.prof-land.dark-act .land-sec [class*="pill"],
.prof-land.dark-act .land-sec [class*="chip"],
.prof-land.dark-act .land-checklist>*,
.prof-land.dark-act .prof-ach>*{background:rgba(255,255,255,.05)!important;
  border-color:rgba(255,255,255,.12)!important;color:#eef0f5!important}
/* کارت کانونی: عمیق‌تر از فضا + نقطهٔ نورانی + وایپ */
.prof-land .land-sec.land-sec--dark{position:relative;border-radius:30px;padding:clamp(28px,4.5vw,46px)}
.prof-land .land-sec.land-sec--dark{background:linear-gradient(175deg,#191d25 0%,#12151b 60%,#0f1218 100%);
  box-shadow:0 48px 110px -56px rgba(0,0,0,.8)}
.prof-land .land-sec.land-sec--dark::before{content:"";position:absolute;top:30px;inset-inline-start:38px;
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffd863,var(--sk-amber-deep,#e9ad00));
  box-shadow:0 0 26px rgba(255,194,24,.4)}
.prof-land .land-sec.land-sec--dark .prof-timeline>*,
.prof-land .land-sec.land-sec--dark [data-stagger]>*{background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);border-radius:16px}
.prof-land .land-sec.land-sec--dark .sk-btn{background:#fff!important;color:#14161a!important;border-color:#fff!important}


/* DARK ACT v2.1 — چیدمان فشردهٔ تایم‌لاین در کارت کانونی */
.prof-land .land-sec.land-sec--dark .land-sec-h{margin-bottom:26px}
.prof-land .land-sec.land-sec--dark .prof-timeline{display:flex;flex-direction:column;gap:12px;padding:0!important;margin-block:0;margin-inline:auto!important;max-width:720px;width:100%}
.prof-land .land-sec.land-sec--dark .prof-timeline::before,
.prof-land .land-sec.land-sec--dark .prof-timeline::after{content:none!important}
.prof-land .land-sec.land-sec--dark .tl-item{position:relative;display:flex;align-items:flex-start;gap:14px;
  background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.1)!important;
  border-radius:16px!important;padding:15px 18px!important;margin:0!important;min-height:0!important}
.prof-land .land-sec.land-sec--dark .tl-item::before,
.prof-land .land-sec.land-sec--dark .tl-item::after{content:none!important}
.prof-land .land-sec.land-sec--dark .tl-dot{position:static!important;flex-shrink:0;width:12px;height:12px;
  margin:6px 0 0!important;border-radius:50%;background:var(--sk-amber,#ffc218)!important;
  box-shadow:0 0 14px rgba(255,194,24,.5);border:0!important}
.prof-land .land-sec.land-sec--dark .tl-body{display:grid;gap:8px;min-width:0;padding:0!important;margin:0!important}
.prof-land .land-sec.land-sec--dark .tl-body b{margin:0;font-size:14.5px;line-height:1.7}
.prof-land .land-sec.land-sec--dark .tl-org{justify-self:start;margin:0!important;font-size:11.5px;font-weight:800;
  color:var(--sk-amber,#ffc218)!important;background:rgba(255,194,24,.1)!important;
  border:1px solid rgba(255,194,24,.35)!important;border-radius:999px;padding:4px 12px;line-height:1.7}
.prof-land .land-sec.land-sec--dark .tl-body p{margin:0;font-size:13px;line-height:1.95}

/* DARK ACT v2.2 — تکسچر، کوبیده‌شدن سکشن، ورود ویژهٔ آیتم‌ها */
.prof-land .land-sec.land-sec--dark{
  background:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px),
    radial-gradient(circle at 85% -10%, rgba(255,194,24,.09), transparent 46%),
    linear-gradient(175deg,#191d25 0%,#12151b 60%,#0f1218 100%);
  background-size:26px 26px, auto, auto}
@media (prefers-reduced-motion: no-preference){
  .prof-land.fx2 .land-sec.land-sec--dark[data-reveal]{opacity:0;transform:scale(1.07) translateY(-16px);filter:blur(10px);transition:none}
  .prof-land.fx2 .land-sec.land-sec--dark[data-reveal].in{animation:tk-slam .9s cubic-bezier(.22,.9,.32,1) both}
  @keyframes tk-slam{
    0%{opacity:0;transform:scale(1.07) translateY(-16px);filter:blur(10px)}
    55%{opacity:1;transform:scale(.986) translateY(5px);filter:blur(0)}
    76%{transform:scale(1.01) translateY(-2px)}
    100%{opacity:1;transform:none;filter:none}}
  /* آیتم‌ها: حالت اولیه نامرئی؛ ورود جانبی را موتور fx2 با WAAPI اجرا می‌کند */
  .prof-land .land-sec.land-sec--dark .tl-item{opacity:0}
  .prof-land .land-sec.land-sec--dark .tl-item.fx-done{opacity:1}
}

/* DARK FOCAL — متن‌ها و کارت تیم، مستقل از ambience (برای صفحهٔ آموزشگاه) */
.prof-land .land-sec.land-sec--dark{color:#eef0f4}
.prof-land .land-sec.land-sec--dark :is(h1,h2,h3,h4){color:#f4f6fa!important}
.prof-land .land-sec.land-sec--dark :is(p,li,time,small){color:rgba(230,233,240,.72)!important}
.prof-land .land-sec.land-sec--dark :is(b,strong){color:#f4f6fa!important}
.prof-land .land-sec.land-sec--dark .land-team .tm{background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);border-radius:18px}
.prof-land .land-sec.land-sec--dark .tm-rate{color:var(--sk-amber,#ffc218)!important}
.prof-land .land-sec.land-sec--dark .tm-rate small{color:rgba(230,233,240,.55)!important}
.prof-land .land-sec.land-sec--dark .tm-rate--none{color:rgba(230,233,240,.5)!important;font-size:12px}

/* ═══════════════ PD-CINEMA — صفحهٔ جزئیات آزمون، سبک سینمایی ═══════════════ */
.sk-mkt-pd.pd-cinema{background:var(--sk-surface,#fff)}

/* ——— هیرو ——— */
.pd-cinema .cine-hero{position:relative;color:#f3f4f7;overflow:hidden;
  display:flex;align-items:stretch;isolation:isolate;
  background:#101115}
.pd-cinema .cine-bg{position:absolute;top:0;bottom:0;left:0;width:65%;z-index:0;
  background-size:cover;background-position:center 28%;
  filter:saturate(1.05) brightness(.9);
  mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 97%)}
.pd-cinema .cine-bg--art{left:0;width:62%}
.pd-cinema .cine-bg--art{background:
  radial-gradient(640px 420px at 20% 40%, rgba(190,26,32,.4), transparent 62%),
  radial-gradient(520px 360px at 32% 82%, rgba(255,120,50,.14), transparent 60%),
  linear-gradient(108deg,#15070b 0%,#190a10 36%,#101116 66%,#0c0d11 100%)}
.pd-cinema .cine-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg, rgba(11,12,16,.92) 0%, rgba(11,12,16,.28) 26%, transparent 55%)}
.pd-cinema .cine-in{position:relative;z-index:2;width:100%;max-width:1220px;margin:0 auto;
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center}
.pd-cinema .cine-in > *{max-width:600px}

/* بردکرامب روی تیره */
.pd-cinema .cine-in .skill-breadcrumbs{margin:0 0 20px}
.pd-cinema .cine-in .skill-breadcrumbs a,
.pd-cinema .cine-in .skill-breadcrumbs span{color:rgba(233,235,240,.62)!important}
.pd-cinema .cine-in .skill-breadcrumbs a:hover{color:var(--sk-amber,#ffc218)!important}

/* چیپ‌ها */
.pd-cinema .cine-in .badges{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 20px}
.pd-cinema .cine-in .badges .bdg{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.17)!important;
  color:#e9ebf0!important;backdrop-filter:blur(5px);border-radius:999px;font-weight:750}
.pd-cinema .cine-in .badges .bdg svg{color:var(--sk-amber,#ffc218)}
.pd-cinema .cine-in .badges .bdg-free{border-color:rgba(72,187,120,.55)!important;color:#b8f2cf!important}
.pd-cinema .cine-in .badges .bdg-free svg{color:#4ade80}

/* تیتر */
.pd-cinema .cine-in h1.title{margin:0 0 20px;font-size:42px;line-height:1.55;font-weight:900;
  letter-spacing:-.4px;color:#fff!important;max-width:760px;
  text-shadow:0 2px 24px rgba(0,0,0,.45)}

/* عوامل: کارت طراح/آموزشگاه شیشه‌ای */
.pd-cinema .cine-in .provider{display:flex;flex-direction:column;gap:9px;margin:0 0 24px;border:0;padding:0;background:none}
.pd-cinema .cine-in .provider-card{background:transparent!important;border:0!important;box-shadow:none;
  padding:0!important;display:flex;align-items:center;gap:10px;border-radius:0}
.pd-cinema .cine-in .provider-card:hover b{color:var(--sk-amber,#ffc218)!important}
.pd-cinema .cine-in .provider-card .av{width:30px;height:30px;border-radius:50%;overflow:hidden;
  border:1px solid rgba(255,255,255,.28)!important;flex-shrink:0}
.pd-cinema .cine-in .provider-card .nm{display:flex;align-items:baseline;gap:8px}
.pd-cinema .cine-in .provider-card .provider-label{color:rgba(233,235,240,.5)!important;font-size:13px;font-weight:650}
.pd-cinema .cine-in .provider-card .provider-label::after{content:" :"}
.pd-cinema .cine-in .provider-card b{color:#fff!important;font-size:13.5px;transition:color .16s;font-weight:400 /* v14.22: سایز از 14.5 */}
.pd-cinema .cine-in .provider-card .nm > span{display:none}

/* امتیاز و متادیتا */
.pd-cinema .cine-in .pd-engage{margin:0 0 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pd-cinema .cine-in .eg{background:transparent!important;border:0!important;padding:0!important;
  color:#f0f1f5!important;display:inline-flex;align-items:baseline;gap:7px}
.pd-cinema .cine-in .eg + .eg::before{content:"";color:rgba(233,235,240,.35);margin-inline-end:14px}
.pd-cinema .cine-in .eg b{color:var(--sk-amber,#ffc218)!important}
.pd-cinema .cine-in .eg small{color:rgba(233,235,240,.6)!important}
.pd-cinema .cine-in .meta{margin-top:14px}
.pd-cinema .cine-in .meta .m{color:rgba(233,235,240,.82)!important}
.pd-cinema .cine-in .meta .m b{color:#fff!important}
.pd-cinema .cine-in .meta .m svg{color:var(--sk-amber,#ffc218)}

/* چکیده */
.pd-cinema .cine-in .lead{margin:0;max-width:640px;color:rgba(233,235,240,.78)!important;
  font-size:14px;line-height:2.15;background:none!important;border:0!important;padding:0!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;order:9}

/* ردیف CTA سینمایی */
.pd-cinema .cine-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:6px 0 26px}
.pd-cinema .cine-free{display:inline-flex;align-items:center;gap:9px;color:#7ee2a8;font-weight:900;font-size:18px}
.pd-cinema .cine-free::before{content:"";width:9px;height:9px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 14px rgba(74,222,128,.75)}
.pd-cinema .cine-price{display:inline-flex;align-items:baseline;gap:8px;color:#fff;font-weight:900;font-size:19px}
.pd-cinema .cine-price s{color:rgba(233,235,240,.45);font-size:13px;font-weight:650}
.pd-cinema .cine-price small{font-size:12px;color:rgba(233,235,240,.7);font-weight:700}
.pd-cinema .cine-btn{display:inline-flex;align-items:center;gap:5px;border-radius:8px; /* v14.10: از ۱۴ به ۸ */
  padding:15px 28px;font-size:15px;font-weight:850;text-decoration:none;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.pd-cinema .cine-btn--primary{background:linear-gradient(180deg,#ffd04a,var(--sk-amber,#ffc218));color:#221d0e;
  box-shadow:0 16px 36px -14px rgba(255,194,24,.55)}
.pd-cinema .cine-btn--primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(255,194,24,.65)}
.pd-cinema .cine-btn--glass{background:rgba(255,255,255,.09);color:#f3f4f7;
  border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(6px)}
.pd-cinema .cine-btn--glass:hover{background:rgba(255,255,255,.16)}
.pd-cinema .cine-btn--glass svg{width:15px;height:15px}

/* ——— شیت روشن سُرخورده ——— */
.pd-cinema .sk-mkt-wrap.cine-sheet{position:relative;z-index:6;background:var(--sk-canvas,#f6f5f1);
  border-radius:34px 34px 0 0;margin-top:-64px;padding-top:34px;
  box-shadow:0 -40px 80px -46px rgba(8,9,12,.6)}
.pd-cinema .sk-mkt-wrap.cine-sheet::before{content:"";position:absolute;top:12px;inset-inline-start:50%;
  transform:translateX(50%);width:56px;height:5px;border-radius:99px;background:#dcd9d2}

/* secnav → نوار تب */
.pd-cinema .pd-secnav{background:transparent;border:0;box-shadow:none;padding:0;margin-bottom:26px}
.pd-cinema .pd-secnav-in{border-bottom:1px solid var(--sk-line,#e9ebef);gap:16px;padding:0}
.pd-cinema .pd-secnav a{border:0!important;background:transparent!important;border-radius:0;
  padding:14px 4px 13px;border-bottom:3px solid transparent!important;color:var(--sk-ink-faint,#9aa1ad);font-weight:750}
.pd-cinema .pd-secnav a.act,.pd-cinema .pd-secnav a:hover{color:var(--sk-ink,#17181c);
  border-bottom-color:var(--sk-amber,#ffc218)!important}

/* ریسپانسیو */
@media (max-width:1080px){
  .pd-cinema .cine-in{padding:42px 20px 108px}
  .pd-cinema .cine-in h1.title{font-size:32px}
}
@media (max-width:640px){
  /* هیرو در موبایل بلندتر تا تصویر، حس سینمایی واقعی بدهد */
  .pd-cinema .cine-hero{min-height:82vh}
  .pd-cinema .cine-in{padding:34px 16px 96px}
  .pd-cinema .cine-in h1.title{font-size:18px}
  /* کارت‌های طراح/آموزشگاه در موبایل نمایش داده نمی‌شوند (جزئیات در تب‌های پایین هست) */
  .pd-cinema .cine-in .provider.provider--rich{display:none}
  /* دکمه‌ها: تمام‌عرض و زیر هم */
  .pd-cinema .cine-cta{gap:10px;flex-direction:column;align-items:stretch}
  .pd-cinema .cine-btn{padding:13px 20px;font-size:14px;flex:none;width:100%;justify-content:center}
  .pd-cinema .cine-free,.pd-cinema .cine-price{flex-basis:auto}
  /* متای دقیقه/سوال/زبان: یک ردیف آیکونی سفید زیر امتیاز و شرکت‌کننده */
  .pd-cinema .cine-in .meta{display:flex;flex-wrap:nowrap;gap:16px;color:#fff}
  .pd-cinema .cine-in .meta .m{display:inline-flex;align-items:center;gap:6px;color:#fff;white-space:nowrap}
  .pd-cinema .cine-in .meta .m svg{display:inline-block;width:16px;height:16px;color:#fff;flex:none}
  .pd-cinema .cine-in .meta .m b{color:#fff}
  .pd-cinema .cine-in .meta .egm-lbl{display:none}
  .pd-cinema .sk-mkt-wrap.cine-sheet{border-radius:24px 24px 0 0;margin-top:-52px}
}

/* آرام‌سازی نسخهٔ ۲ */
.pd-cinema .cine-in .skill-breadcrumbs{opacity:.75;font-size:12px}
.pd-cinema .cine-in .badges{margin-bottom:24px}
.pd-cinema .cine-in h1.title{margin-bottom:24px}
.pd-cinema .cine-in .meta{margin-top:12px}
.pd-cinema .cine-cta{margin: 14px 0 50px;}
@media (max-width:900px){
  .pd-cinema .cine-bg,.pd-cinema .cine-bg--art{width:100%;
    -webkit-mask-image:linear-gradient(0deg,transparent 8%,#000 45%);mask-image:linear-gradient(0deg,transparent 8%,#000 45%);
    height:46%;bottom:auto}
  .pd-cinema .cine-hero{min-height:0}
  .pd-cinema .cine-in{padding-top:46vw}
  .pd-cinema .cine-in > *{max-width:none}
}

/* ═══ CINE v3 — خلوت‌سازی و ترازها ═══ */
/* چیپ‌ها حذف (اطلاعاتشان در کارت خرید هست) */
.pd-cinema .cine-in .badges{display:none}
/* بردکرامب: مثل بقیهٔ صفحات، چسبیده به زیر هدر */
.pd-cinema .cine-in{padding-top:82px}
.pd-cinema .cine-in .skill-breadcrumbs{position:absolute;top:22px;inset-inline-start:28px;
  margin:0;opacity:.85;font-size:12.5px}
/* تیتر: تک‌خط داینامیک (JS اندازه را فیت می‌کند)، هرگز روی عکس نمی‌رود */
.pd-cinema .cine-in h1.title{font-size:clamp(24px,3vw,40px);width:100%;max-width:600px;
  white-space:nowrap;margin-bottom:22px}
/* عوامل: گرید هم‌تراز + رنگ خوانا */
.pd-cinema .cine-in .provider-card{display:grid!important;grid-template-columns:30px 1fr;
  align-items:center;gap:11px;margin:0!important;padding:0!important;width:auto}
.pd-cinema .cine-in .provider-card .av{width:30px;height:30px;margin:0;border-radius:50%;overflow:hidden}
.pd-cinema .cine-in .provider-card .av img{width:100%;height:100%;object-fit:cover;display:block}
.pd-cinema .cine-in .provider-card .nm{align-items:center}
.pd-cinema .cine-in .provider-card .provider-label{color:rgba(240,242,246,.82)!important;
  font-size:13.5px;text-shadow:0 1px 10px rgba(0,0,0,.55);font-weight:200}
.pd-cinema .cine-in .provider-card b{text-shadow:0 1px 12px rgba(0,0,0,.6)}
/* تگ رایگان/قیمت: سطر مستقل بالای دکمه‌ها */
.pd-cinema .cine-cta{row-gap:10px}
.pd-cinema .cine-free,.pd-cinema .cine-price{flex-basis:100%;order:-1;font-size:15px}
/* ستاره‌ها: پر شدن چپ→راست */
.pd-cinema .eg .stars{direction:ltr}
.pd-cinema .eg .stars .fill{left:0;right:auto}
/* نوار تب: پس‌زمینهٔ مشخص + استیکی */
.pd-cinema .pd-secnav{position:sticky;top:0;z-index:40;background:var(--sk-canvas,#f6f5f1);
  padding-top:6px;margin-top:-6px}
.pd-cinema .pd-secnav-in{background:var(--sk-canvas,#f6f5f1)}
@media (max-width:900px){
  .pd-cinema .cine-in{padding-top:calc(46vw + 40px)}
  .pd-cinema .cine-in .skill-breadcrumbs{position:static;margin-bottom:14px}
  .pd-cinema .cine-in h1.title{white-space:normal;font-size:clamp(21px,5.6vw,27px)}
}

.pd-cinema .cine-in .provider{align-items:flex-start!important}

/* ═══ CINE v4 — خوانایی، تراز، هدر شناور ═══ */
.pd-cinema .cine-in .eg{align-items:center!important}
.pd-cinema .cine-in .eg b{line-height:1}
.pd-cinema .cine-in .eg small{color:rgba(236,238,243,.72)!important;line-height:1}
.pd-cinema .cine-in .eg .stars{line-height:1;transform:translateY(1px)}
/* حلقهٔ سفید آواتارها حذف */
.pd-cinema .cine-in .provider-card .av{border:0!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);background:#141821}
.pd-cinema .cine-in .provider-card .av img{background:#141821}
/* تگ رایگان حذف */
.pd-cinema .cine-free{display:none!important}
/* هدر شناور روی تصویر (سبک فیلم‌نت) */
.pd-body-cinema{background:#0b0c10}
.pd-body-cinema .tk-public-header{position:absolute;top:0;inset-inline:0;z-index:80;
  background:linear-gradient(180deg,rgba(9,10,13,.62),rgba(9,10,13,0));
  border:0;box-shadow:none;backdrop-filter:blur(2px)}
.pd-body-cinema .tk-public-header .brand-logo--day{display:none!important}
.pd-body-cinema .tk-public-header .brand-logo--night{display:inline-block!important}
/* جای هدر در هیرو */
.pd-cinema .cine-hero{min-height:740px}
.pd-cinema .cine-in{padding-top:158px}
.pd-cinema .cine-in .skill-breadcrumbs{top: 80px;right: 0;}
@media (max-width:900px){
  .pd-body-cinema .tk-public-header{position:sticky;background:rgba(9,10,13,.85);backdrop-filter:blur(10px)}
  .pd-cinema .cine-in{padding-top:calc(46vw + 30px)}
}

/* ═══ CINE v5 ═══ */
.pd-cinema .sk-mkt-wrap.cine-sheet{background:var(--sk-surface,#fff);padding-top:18px}
.pd-cinema .pd-secnav{background:var(--sk-surface,#fff)}
.pd-cinema .pd-secnav-in{background:var(--sk-surface,#fff)}
.pd-cinema .cine-in .eg-part svg,
.pd-v8.pd-cinema .eg-part svg{color:var(--sk-amber,#ffc218)!important}
.pd-cinema .cine-hero{min-height:clamp(700px, 100svh, 1200px)}
@media (max-width:900px){
  .pd-cinema .cine-hero{min-height:0}
}

/* ═══ CINE v6 — هدر خوانا، موبایل ایمن ═══ */
/* هدر شناور: نوار تیرهٔ توپر؛ لینک‌ها و دکمه‌ها با پوشش کامل حالت‌ها */
.pd-body-cinema .tk-public-header{background:linear-gradient(180deg,rgba(9,10,13,.6),rgba(9,10,13,0));
  backdrop-filter:none;border:0;box-shadow:none}
.pd-body-cinema .tk-public-header .tk-public-nav-link,
.pd-body-cinema .tk-public-header .tk-public-links > a{color:#eef0f4}
.pd-body-cinema .tk-public-header .tk-public-nav-link:hover,
.pd-body-cinema .tk-public-header .tk-public-nav-dd:hover > .tk-public-nav-link,
.pd-body-cinema .tk-public-header .tk-public-nav-link[aria-expanded="true"],
.pd-body-cinema .tk-public-header .tk-public-links > a:hover{color:var(--sk-amber,#ffc218)}
/* حالت باز/hover تریگر کشویی روی هیروی تیره: فقط تغییر رنگ، بدون پس‌زمینه —
   هم‌رفتار با بقیهٔ آیتم‌های منو. */
.pd-body-cinema .tk-public-header .tk-public-links button.tk-public-nav-link:hover,
.pd-body-cinema .tk-public-header .tk-public-links button.tk-public-nav-link[aria-expanded="true"],
.pd-body-cinema .tk-public-header .tk-public-nav-dd.open > button.tk-public-nav-link{
  background:transparent;color:var(--sk-amber,#ffc218)}
.pd-body-cinema .tk-public-header.is-scrolled .tk-public-links button.tk-public-nav-link:hover,
.pd-body-cinema .tk-public-header.is-scrolled .tk-public-links button.tk-public-nav-link[aria-expanded="true"],
.pd-body-cinema .tk-public-header.is-scrolled .tk-public-nav-dd.open > button.tk-public-nav-link{
  background:transparent;color:var(--sk-amber,#ffc218)}
/* موبایل: تصویر نواری با محافظ متنی قوی — خوانا حتی روی کاور روشن */
@media (max-width:900px){
  .pd-cinema .cine-bg,.pd-cinema .cine-bg--art{width:100%;height:56vw;bottom:auto;
    -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 34%);
    mask-image:linear-gradient(0deg,transparent 0,#000 34%)}
  .pd-cinema .cine-scrim{background:linear-gradient(180deg,
    rgba(11,12,16,.22) 0, transparent 16vw, transparent 28vw,
    rgba(11,12,16,.88) 48vw, #0b0c10 57vw)}
  .pd-cinema .cine-in{padding-top:46vw}
  .pd-cinema .cine-in h1.title{text-shadow:0 2px 18px rgba(0,0,0,.85)}
}

/* secnav در موبایل: هرگز از قاب بیرون نمی‌زند (سینمایی و کلاسیک) */
@media (max-width:900px){
  .pd-v8 .pd-secnav{max-width:100%;overflow:hidden}
  .pd-v8 .pd-secnav-in{overflow-x:auto;max-width:100%;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .pd-v8 .pd-secnav-in::-webkit-scrollbar{display:none}
  .pd-v8 .pd-secnav-in a{flex:0 0 auto}
}

/* آیکن دکمه‌های هیرو */
.pd-cinema .cine-btn svg{width:17px;height:17px;flex-shrink:0}
@media (max-width:900px){
  .pd-cinema .cine-btn-x{display:none}
}

/* ============================================================================
   TK TITLE STYLE — فونت و رنگ سفارشی «عنوان» صفحه جزئیات آزمون/بسته آزمون
   متغیرها روی ریشه <section class="sk-mkt-pd"> ست می‌شوند:
     --tk-title-font  : خانواده فونت انتخابی طراح (اگر ست نشود → فونت فعلی سایت)
     --tk-title-color : رنگ انتخابی طراح (اگر ست نشود → سفید در سینمایی، تیره در کلاسیک)
   ============================================================================ */
.pd-v8 .lead-col h1.title,
.pd-v8 .cine-in h1.title{font-family:var(--tk-title-font,inherit)}
.pd-cinema .cine-in h1.title{color:var(--tk-title-color,#fff)!important}
.pd-v8 .lead-col h1.title{color:var(--tk-title-color,inherit)}

/* فرم CTA سینمایی (افزودن بسته آزمون به سبد به‌صورت POST) */
.pd-cinema .cine-cta .cine-cta-form{display:contents}
.pd-cinema .cine-cta button.cine-btn{font-family:inherit;cursor:pointer}

/* ═══ CINE v7 — پولیش صفحه جزئیات ═══ */

/* ۱) قیمت در هیرو حذف؛ قیمت در باکس خرید پایین صفحه نمایش داده می‌شود */
.pd-cinema .cine-cta .cine-price{display:none!important}

/* ۲) آواتار طراح/ارائه‌دهنده در هیروی سینمایی */
.pd-cinema .cine-in .provider-card .av{border:0!important;background:#141821;box-shadow:none}

/* ۳) دکمه‌های CTA موبایل: تک‌خطی و بدون شکستن متن */
.pd-cinema .cine-cta .cine-btn{white-space:nowrap}
@media (max-width:640px){
  .pd-cinema .cine-cta{gap:10px}
  .pd-cinema .cine-cta .cine-btn{flex:1 1 auto;min-width:calc(50% - 5px);padding:13px 12px;font-size:13.5px}
}
@media (max-width:380px){
  .pd-cinema .cine-cta .cine-btn{min-width:100%}
}

/* ۴) هدر: در حالت بالای صفحه شفاف/تیره روی هیرو، بعد از اسکرول دقیقاً مطابق تم سایت */
.pd-body-cinema .tk-public-header{position:sticky;top:0;margin-bottom:-74px}
@media (max-width:900px){
  .pd-body-cinema .tk-public-header{margin-bottom:0}
}
.pd-body-cinema .tk-public-header.is-scrolled{
  background:color-mix(in srgb,var(--tk-bg,#ffffff) 94%,transparent);
  backdrop-filter:blur(10px);
  border-color:var(--tk-line-strong,#d7dbe4);
  box-shadow:0 12px 34px rgba(17,24,39,.09)}
.pd-body-cinema .tk-public-header.is-scrolled .tk-public-nav-link,
.pd-body-cinema .tk-public-header.is-scrolled .tk-public-links > a{color:var(--tk-ink,#111827)}
.pd-body-cinema .tk-public-header.is-scrolled .tk-public-nav-link:hover,
.pd-body-cinema .tk-public-header.is-scrolled .tk-public-nav-dd:hover > .tk-public-nav-link,
.pd-body-cinema .tk-public-header.is-scrolled .tk-public-nav-link[aria-expanded="true"],
.pd-body-cinema .tk-public-header.is-scrolled .tk-public-links > a:hover{color:var(--sk-amber,#ffc218)}
/* لوگو بعد از اسکرول از تم روز/شب پیروی می‌کند */
.pd-body-cinema .tk-public-header.is-scrolled .brand-logo--day{display:block!important}
.pd-body-cinema .tk-public-header.is-scrolled .brand-logo--night{display:none!important}
[data-theme="dark"] .pd-body-cinema .tk-public-header.is-scrolled .brand-logo--day{display:none!important}
[data-theme="dark"] .pd-body-cinema .tk-public-header.is-scrolled .brand-logo--night{display:block!important}
/* تم شب: پس‌زمینه اسکرول‌شده هم خودکار تیره است چون از var(--tk-bg) می‌آید */

/* ۵) هدر هرگز از قاب بیرون نمی‌زند؛ در عرض‌های میانی منوی متنی جمع می‌شود (ناوبری پایین موبایل موجود است) */
.pd-body-cinema .tk-public-header{overflow-x:clip}
.pd-body-cinema .tk-public-nav{min-width:0;flex-wrap:nowrap}
@media (min-width:821px) and (max-width:1080px){
  .pd-body-cinema .tk-public-links{display:none}
}

/* ═══ CINE v8 — نرمال‌سازی اندازه هر فونت عنوان + فاصله بین کلمات ═══ */
/* zoom روی اندازه inline اسکریپت fit هم ضرب می‌شود و در کلاسیک/سینمایی یکسان عمل می‌کند */
.pd-v8 .lead-col h1.title,
.pd-v8 .cine-in h1.title{zoom:var(--tk-title-scale,1);word-spacing:var(--tk-title-wspace,normal)}

/* ═══ CINE v11 — اندازه و وزن سفارشی فونت عنوان ═══ */
/* اندازه از همان --tk-title-scale می‌آید (نرمال‌سازی فونت × درصد انتخابی طراح؛ ضرب سمت سرور).
   وزن فقط وقتی طراح انتخاب کند ست می‌شود؛ fallbackها دقیقاً وزن فعلی هر چیدمان‌اند تا رگرسیونی رخ ندهد. */
.pd-v8 .lead-col h1.title{font-weight:var(--tk-title-weight,800)}
.pd-cinema .cine-in h1.title{font-weight:var(--tk-title-weight,900)}

/* ═══ CINE v9 — افکت‌های بصری عنوان (تولیدشده از exam_builder/title_style.py) ═══ */
.tk-tfx-glow .lead-col h1.title,
.tk-tfx-glow .cine-in h1.title{text-shadow:0 0 10px color-mix(in srgb,currentColor 85%,transparent),0 0 26px color-mix(in srgb,rgb(255 255 255 / 65%) 55%,transparent),0 0 64px color-mix(in srgb,rgb(255 255 255 / 25%) 35%,transparent)}
.tk-tfx-neon .lead-col h1.title,
.tk-tfx-neon .cine-in h1.title{text-shadow:0 0 5px currentColor,0 0 16px currentColor,0 0 40px color-mix(in srgb,currentColor 75%,transparent),0 0 86px color-mix(in srgb,currentColor 45%,transparent)}
.tk-tfx-gold .lead-col h1.title,
.tk-tfx-gold .cine-in h1.title{background:linear-gradient(180deg,#fff3c4 0%,#ffd968 28%,#f5b016 52%,#c98a08 74%,#ffe9a8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 14px rgba(255,194,24,.35))}
.tk-tfx-shine .lead-col h1.title,
.tk-tfx-shine .cine-in h1.title{background:linear-gradient(100deg,currentColor 40%,#ffffff 50%,currentColor 60%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;animation:tkTfxShine 3.2s linear infinite}
.tk-tfx-outline .lead-col h1.title,
.tk-tfx-outline .cine-in h1.title{-webkit-text-stroke:1.5px currentColor;-webkit-text-fill-color:transparent;text-shadow:none}
.tk-tfx-shadow3d .lead-col h1.title,
.tk-tfx-shadow3d .cine-in h1.title{text-shadow:0 1px 0 rgba(0,0,0,.30),0 2px 0 rgba(0,0,0,.26),0 3px 0 rgba(0,0,0,.22),0 4px 0 rgba(0,0,0,.18),0 5px 0 rgba(0,0,0,.14),0 10px 8px rgba(0,0,0,.30),0 22px 34px rgba(0,0,0,.38)}
@keyframes tkTfxShine{0%{background-position:130% 0}100%{background-position:-90% 0}}
@media (prefers-reduced-motion:reduce){.tk-tfx-shine .lead-col h1.title,.tk-tfx-shine .cine-in h1.title{animation:none!important;-webkit-text-fill-color:currentColor;background:none}}

/* ═══ CINE v10 — افکت‌های جدید عنوان (تولیدشده از exam_builder/title_style.py) ═══ */
.tk-tfx-silver .lead-col h1.title,
.tk-tfx-silver .cine-in h1.title{background:linear-gradient(180deg,#ffffff 0%,#e9eef6 26%,#c3ccda 50%,#97a3b6 72%,#eef2f8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 12px rgba(148,163,184,.45))}
.tk-tfx-fire .lead-col h1.title,
.tk-tfx-fire .cine-in h1.title{background:linear-gradient(0deg,#8a1f02 0%,#e2540e 34%,#ff9a2e 66%,#ffd66e 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 4px 16px rgba(255,199,102,.45)) drop-shadow(0 0 26px rgba(226,84,14,.35))}
.tk-tfx-ocean .lead-col h1.title,
.tk-tfx-ocean .cine-in h1.title{background:linear-gradient(115deg,#38bdf8 0%,#6366f1 55%,#a855f7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 14px rgba(99,102,241,.4))}
.tk-tfx-rainbow .lead-col h1.title,
.tk-tfx-rainbow .cine-in h1.title{background:linear-gradient(90deg,#f43f5e,#f59e0b,#22c55e,#06b6d4,#6366f1,#a855f7,#f43f5e);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;animation:tkTfxRainbow 6s linear infinite}
.tk-tfx-pulse .lead-col h1.title,
.tk-tfx-pulse .cine-in h1.title{animation:tkTfxPulse 2.4s ease-in-out infinite}
.tk-tfx-emboss .lead-col h1.title,
.tk-tfx-emboss .cine-in h1.title{text-shadow:0 1px 0 rgba(255,255,255,.22),0 -1px 1px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.25)}
.tk-tfx-sticker .lead-col h1.title,
.tk-tfx-sticker .cine-in h1.title{-webkit-text-stroke:5px rgba(255,255,255,.92);paint-order:stroke fill;text-shadow:0 4px 0 rgba(17,24,39,.22),0 10px 22px rgba(17,24,39,.3)}
@keyframes tkTfxRainbow{0%{background-position:0% 0}100%{background-position:300% 0}}
@keyframes tkTfxPulse{0%,100%{text-shadow:0 0 6px color-mix(in srgb,currentColor 70%,transparent),0 0 18px color-mix(in srgb,currentColor 35%,transparent)}50%{text-shadow:0 0 14px currentColor,0 0 46px color-mix(in srgb,currentColor 65%,transparent)}}
@media (prefers-reduced-motion:reduce){
.tk-tfx-rainbow .lead-col h1.title,.tk-tfx-rainbow .cine-in h1.title{animation:none!important;-webkit-text-fill-color:currentColor;background:none}
.tk-tfx-pulse .lead-col h1.title,.tk-tfx-pulse .cine-in h1.title{animation:none!important;text-shadow:0 0 10px color-mix(in srgb,currentColor 60%,transparent)}
}

/* ═══ CINE v11 — افکت‌های میخکوب‌کننده عنوان (تولیدشده از exam_builder/title_style.py) ═══ */
.tk-tfx-glitch .lead-col h1.title,
.tk-tfx-glitch .cine-in h1.title{text-shadow:2px 0 0 rgba(0,255,255,.7),-2px 0 0 rgba(255,0,90,.7);animation:tkTfxGlitch 1.9s steps(1,end) infinite}
.tk-tfx-flicker .lead-col h1.title,
.tk-tfx-flicker .cine-in h1.title{animation:tkTfxFlicker 5s linear infinite}
.tk-tfx-spotlight .lead-col h1.title,
.tk-tfx-spotlight .cine-in h1.title{background:radial-gradient(closest-side,#ffffff 16%,color-mix(in srgb,currentColor 68%,#474c59) 62%);background-size:340% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;animation:tkTfxSpot 4.4s ease-in-out infinite alternate}
.tk-tfx-aurora .lead-col h1.title,
.tk-tfx-aurora .cine-in h1.title{background:linear-gradient(120deg,#22d3ee 0%,#818cf8 28%,#e879f9 52%,#34d399 78%,#22d3ee 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;animation:tkTfxAurora 9s ease-in-out infinite alternate}
.tk-tfx-float .lead-col h1.title,
.tk-tfx-float .cine-in h1.title{animation:tkTfxFloat 3.6s ease-in-out infinite}
.tk-tfx-focus .lead-col h1.title,
.tk-tfx-focus .cine-in h1.title{animation:tkTfxFocus 1s cubic-bezier(.22,.7,.25,1) both}
.tk-tfx-ice .lead-col h1.title,
.tk-tfx-ice .cine-in h1.title{background:linear-gradient(180deg,#f0fbff 0%,#c3ebff 32%,#7cc3ef 58%,#3f8fc9 82%,#eaf8ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 14px rgba(103,192,244,.5))}
.tk-tfx-retro .lead-col h1.title,
.tk-tfx-retro .cine-in h1.title{background:linear-gradient(180deg,#ff8ad4 0%,#ffb86b 44%,#ff5f9e 52%,#7a3cff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 18px rgba(255,110,199,.55)) drop-shadow(0 6px 26px rgba(122,60,255,.4))}
.tk-tfx-rosegold .lead-col h1.title,
.tk-tfx-rosegold .cine-in h1.title{background:linear-gradient(180deg,#ffe9e4 0%,#f6b3a4 34%,#dc8f7d 56%,#b76e79 80%,#ffd9d0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 12px rgba(214,140,128,.45))}
.tk-tfx-emerald .lead-col h1.title,
.tk-tfx-emerald .cine-in h1.title{background:linear-gradient(160deg,#a7f3d0 0%,#10b981 46%,#047857 82%,#d1fae5 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 14px rgba(16,185,129,.4))}
@keyframes tkTfxGlitch{0%,86%,100%{text-shadow:2px 0 0 rgba(0,255,255,.7),-2px 0 0 rgba(255,0,90,.7)}88%{text-shadow:-4px 0 0 rgba(0,255,255,.85),4px 0 0 rgba(255,0,90,.85)}90%{text-shadow:3px -2px 0 rgba(0,255,255,.8),-3px 2px 0 rgba(255,0,90,.8)}92%{text-shadow:-2px 2px 0 rgba(0,255,255,.8),2px -2px 0 rgba(255,0,90,.8)}94%{text-shadow:2px 0 0 rgba(0,255,255,.7),-2px 0 0 rgba(255,0,90,.7)}}
@keyframes tkTfxFlicker{0%,100%{opacity:1;text-shadow:0 0 6px currentColor,0 0 20px currentColor,0 0 48px color-mix(in srgb,currentColor 55%,transparent)}3%{opacity:.4;text-shadow:none}5%{opacity:1;text-shadow:0 0 6px currentColor,0 0 20px currentColor,0 0 48px color-mix(in srgb,currentColor 55%,transparent)}7%{opacity:.6;text-shadow:none}8%,64%{opacity:1;text-shadow:0 0 6px currentColor,0 0 20px currentColor,0 0 48px color-mix(in srgb,currentColor 55%,transparent)}65%{opacity:.75;text-shadow:0 0 4px currentColor}66%{opacity:1;text-shadow:0 0 6px currentColor,0 0 20px currentColor,0 0 48px color-mix(in srgb,currentColor 55%,transparent)}}
@keyframes tkTfxSpot{0%{background-position:-120% 0}100%{background-position:220% 0}}
@keyframes tkTfxAurora{0%{background-position:0% 0}100%{background-position:100% 0}}
@keyframes tkTfxFloat{0%,100%{transform:translateY(0);text-shadow:0 12px 26px rgba(0,0,0,.34)}50%{transform:translateY(-7px);text-shadow:0 24px 44px rgba(0,0,0,.42)}}
@keyframes tkTfxFocus{0%{opacity:0;filter:blur(14px);transform:translateY(12px)}100%{opacity:1;filter:blur(0);transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
.tk-tfx-spotlight .lead-col h1.title,.tk-tfx-spotlight .cine-in h1.title,.tk-tfx-aurora .lead-col h1.title,.tk-tfx-aurora .cine-in h1.title{animation:none!important;-webkit-text-fill-color:currentColor;background:none}
.tk-tfx-flicker .lead-col h1.title,.tk-tfx-flicker .cine-in h1.title{animation:none!important;text-shadow:0 0 10px color-mix(in srgb,currentColor 60%,transparent)}
.tk-tfx-glitch .lead-col h1.title,.tk-tfx-glitch .cine-in h1.title{animation:none!important}
.tk-tfx-float .lead-col h1.title,.tk-tfx-float .cine-in h1.title{animation:none!important;transform:none;text-shadow:0 12px 26px rgba(0,0,0,.34)}
.tk-tfx-focus .lead-col h1.title,.tk-tfx-focus .cine-in h1.title{animation:none!important;opacity:1;filter:none;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   CINE v12 · پولیش نهایی فاصله‌ها — هیروی «جزئیات آزمون» و «بسته آزمون»
   ───────────────────────────────────────────────────────────────────────────
   مسئله: فاصله‌های عمودی هیرو از لایه‌های مختلف فایل روی هم انباشته شده بودند
   (۲۲ / ۴۴ / ۵۰٫۵ / ۴۲ پیکسل) و هیچ مقیاس مشترکی نداشتند. مثلاً فاصلهٔ ردیف
   امتیاز تا ردیف «دقیقه/سوال/زبان» از جمع سه قانون جدا می‌آمد:
     row-gap:18px (خط ~۱۶۳۲۷) + margin-top:12px (خط ~۱۶۳۹۶) + padding-top:18px
     (قانون «v19 · HERO POLISH» در خط ~۱۴۳۲۹ که برای چیدمان کلاسیک نوشته شده).

   راه‌حل: مقیاس ۸ پیکسلی، متمرکز در همین یک بلوک. فاصله‌ها فقط با row-gap روی
   خود .cine-in کنترل می‌شوند و مارجین/پدینگ پراکندهٔ فرزندان صفر می‌شود.
   این بلوک انتهای فایل است، پس بدون !important بر لایه‌های قبلی غالب می‌شود.

   ریتم نهایی:  تیتر ←۲۴→ عوامل ←۲۴→ امتیاز ←۲۴→ متا ←۳۲→ دکمه‌ها
                (۸ پیکسل بین دو ردیف عوامل، چون یک واحد واحدند)
   ═══════════════════════════════════════════════════════════════════════════ */

.pd-cinema .cine-in{
  --cine-gap-tight: 8px;    /* داخل یک بلوک: ردیف‌های طراح/آموزشگاه */
  --cine-gap: 24px;         /* بین بلوک‌های اطلاعاتی هیرو */
  --cine-gap-cta: 8px;      /* پلهٔ اضافی قبل از دکمه‌ها → مجموعاً ۳۲px */
  --cine-pad-bottom: 136px; /* ۷۲px فاصلهٔ دیده‌شده تا کارت سفید + ۶۴px همپوشانی */

  row-gap: var(--cine-gap);

  /* لنگر پایین: پیش‌تر justify-content:center بود و کل بلوک با ارتفاع نمایشگر
     شناور می‌شد؛ فاصلهٔ دکمهٔ CTA تا کارت سفید بین ۴۲ تا ۱۳۱ پیکسل نوسان داشت.
     با flex-end + padding-bottom ثابت، این فاصله روی هر ارتفاعی ۷۲px می‌ماند. */
  justify-content: flex-end;
  padding-bottom: var(--cine-pad-bottom);
}

/* هم‌ترازی افقی با هدر: هدر از .pub-container با width:min(1240px,92vw) می‌آید،
   ولی هیرو max-width:1220px بدون padding داشت. در عرض‌های میانی محتوای هیرو از
   ستون هدر پهن‌تر می‌شد و لبه‌ها روی هم نمی‌افتادند. */
@media (min-width:901px){
  .pd-cinema .cine-in{
    width: min(1240px, 92vw);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }
}

/* موبایل: همپوشانی شیت ۵۲px است (نه ۶۴px)، پس فاصلهٔ دیده‌شده باز هم ۷۲px بماند */
@media (max-width:640px){
  .pd-cinema .cine-in{--cine-pad-bottom:124px}
}

/* ——— صفر کردن مارجین‌های انباشتهٔ فرزندان؛ فاصله فقط از row-gap ——— */
.pd-cinema .cine-in h1.title{margin:0}

.pd-cinema .cine-in .provider{
  margin: 0;
  padding: 0;
  row-gap: var(--cine-gap-tight);
}

.pd-cinema .cine-in .pd-engage{
  margin: 0;
  padding: 0;
  column-gap: 18px;
  row-gap: var(--cine-gap);
}

/* ردیف متا: خنثی‌سازی هر سه لایهٔ انباشته (margin-top، padding-top، border) */
.pd-cinema .cine-in .pd-engage .meta{
  margin: 0;
  padding: 0;
  border: 0;
  gap: 6px 0;
}

/* چکیده: پیش‌تر order:9 داشت و زیر دکمه‌ها می‌افتاد؛ با این تغییر بالای CTA
   می‌نشیند تا ترتیب خواندن طبیعی باشد و CTA همیشه آخرین عنصر هیرو بماند. */
.pd-cinema .cine-in .lead{margin:0;order:0}

.pd-cinema .cine-cta{margin:var(--cine-gap-cta) 0 0}

/* ═══ HEADER v2 · هم‌خوانی دکمه‌های آیکونی بی‌قاب با هدر شناور سینمایی ═══
   دکمه‌های آیکونی حالا پس‌زمینهٔ سفید ندارند، پس روی هیروی تیره باید رنگ
   روشن بگیرند؛ بعد از اسکرول دوباره به تم عادی سایت برمی‌گردند. */
.pd-body-cinema .tk-public-header .tk-iconbtn{color:#eef0f4}
.pd-body-cinema .tk-public-header .tk-iconbtn:hover{
  background:rgba(255,255,255,.13);color:var(--sk-amber,#ffc218)}
.pd-body-cinema .tk-public-header .tk-iconbtn.pub-cart:hover,
.pd-body-cinema .tk-cart-pop:hover .tk-iconbtn.pub-cart{
  background:transparent;color:var(--sk-amber,#ffc218)}
.pd-body-cinema .tk-public-header .tk-cart-count{border-color:#14161b}

.pd-body-cinema .tk-public-header.is-scrolled .tk-iconbtn{color:var(--tk-ink-soft)}
.pd-body-cinema .tk-public-header.is-scrolled .tk-iconbtn:hover{
  background:var(--tk-surface-2);color:var(--tk-ink)}
.pd-body-cinema .tk-public-header.is-scrolled .tk-iconbtn.pub-cart:hover,
.pd-body-cinema .tk-public-header.is-scrolled .tk-cart-pop:hover .tk-iconbtn.pub-cart{
  background:transparent;color:var(--tk-amber-deep)}
.pd-body-cinema .tk-public-header.is-scrolled .tk-cart-count{border-color:var(--tk-bg,#f6f5f1)}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO PRESETS · طرح‌های آمادهٔ پس‌زمینهٔ هیروی سینمایی
   ───────────────────────────────────────────────────────────────────────────
   وقتی طراح تصویر پس‌زمینه آپلود نکرده باشد، یکی از این پنج طرح نمایش داده
   می‌شود (پیش‌فرض: aurora). همه CSS خالص‌اند — نه فایل تصویری، نه درخواست شبکه،
   نه افت LCP؛ و در هر ابعادی تیز می‌مانند.

   ساختار هر طرح سه لایه است:
     ۱) بدنه‌ی .tk-hero-*      → گرادیان‌های رنگ و منابع نور
     ۲) ::before                → افکت اختصاصی طرح (پرتو نور، شبکه، بلوم)
     ۳) .cine-bg--preset::after → اسکریم خوانایی مشترک + وینیت
   ═══════════════════════════════════════════════════════════════════════════ */

/* برخلاف عکس (که ۶۲٪ عرض و ماسک محوشونده دارد)، طرح‌ها تمام‌عرض‌اند:
   وقتی عکسی در کار نیست، قاب‌بندی ۶۲٪ فقط یک لبهٔ بی‌دلیل می‌سازد. */
.pd-cinema .cine-bg--preset{
  left: 0;
  width: 100%;
  filter: none;
  -webkit-mask-image: none;
          mask-image: none;
  background-color: #07080c;
}

/* اسکریم خوانایی: متن هیرو سمت راست است (RTL)، پس همان سمت تیره‌تر می‌شود.
   وینیت ملایم هم لبه‌ها را جمع می‌کند تا طرح «تخت» به نظر نرسد. */
.pd-cinema .cine-bg--preset::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to left, rgba(6,7,10,.78) 0%, rgba(6,7,10,.42) 30%, rgba(6,7,10,.08) 58%, transparent 76%),
    radial-gradient(130% 100% at 50% 50%, transparent 52%, rgba(4,5,8,.55) 100%);
}
.pd-cinema .cine-bg--preset::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ─── ۱) شفق قطبی — نیلی عمیق با موج‌های فیروزه‌ای و بنفش (پیش‌فرض) ─── */
.pd-cinema .tk-hero-aurora{
  background-image:
    radial-gradient(1200px 620px at 18% 6%,  rgba(56,189,248,.30), transparent 62%),
    radial-gradient(980px 560px at 72% -6%,  rgba(167,139,250,.26), transparent 60%),
    radial-gradient(760px 520px at 44% 104%, rgba(16,185,129,.20), transparent 64%),
    conic-gradient(from 205deg at 30% -12%,  rgba(99,102,241,.26), rgba(14,165,233,.10) 28%, transparent 54%),
    linear-gradient(160deg, #0b1230 0%, #0d1a3a 34%, #0a1226 66%, #070a16 100%);
}
/* پرتوهای نور شفق: سه نوار مورب کم‌رنگ که از بالا فرو می‌ریزند */
.pd-cinema .tk-hero-aurora::before{
  background:
    linear-gradient(102deg, transparent 26%, rgba(125,211,252,.11) 33%, transparent 40%),
    linear-gradient(102deg, transparent 46%, rgba(196,181,253,.09) 52%, transparent 58%),
    linear-gradient(102deg, transparent 64%, rgba(94,234,212,.07) 69%, transparent 75%);
}

/* ─── ۲) شرارهٔ کهربا — زغالی گرم، هم‌رنگ هویت برند ─── */
.pd-cinema .tk-hero-ember{
  background-image:
    radial-gradient(900px 620px at 76% 92%,  rgba(255,138,26,.30), transparent 60%),
    radial-gradient(700px 480px at 90% 108%, rgba(255,194,24,.26), transparent 58%),
    radial-gradient(820px 560px at 20% 10%,  rgba(190,26,32,.24), transparent 62%),
    linear-gradient(155deg, #1a0d0a 0%, #150b0c 40%, #0e0a0c 72%, #08070a 100%);
}
/* بلوم گرم پایین‌راست، جایی که دکمهٔ کهربایی CTA می‌نشیند */
.pd-cinema .tk-hero-ember::before{
  background:
    radial-gradient(420px 300px at 82% 96%, rgba(255,194,24,.16), transparent 68%),
    linear-gradient(0deg, rgba(255,120,20,.07) 0%, transparent 34%);
}

/* ─── ۳) ژرفای نیلی — آبی اقیانوسی با نور سرد از بالا ─── */
.pd-cinema .tk-hero-abyss{
  background-image:
    radial-gradient(1100px 700px at 50% -14%, rgba(45,212,191,.30), transparent 58%),
    radial-gradient(760px 520px at 10% 88%,   rgba(13,148,136,.30), transparent 62%),
    radial-gradient(600px 420px at 86% 66%,   rgba(6,182,212,.22), transparent 60%),
    linear-gradient(180deg, #04141a 0%, #05201f 44%, #041318 76%, #020a0b 100%);
}
/* ستون نور از سطح آب + چند لایهٔ افقی خیلی کم‌رنگ (حس عمق) */
.pd-cinema .tk-hero-abyss::before{
  background:
    linear-gradient(96deg, transparent 38%, rgba(165,243,252,.09) 46%, transparent 54%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 2px, transparent 2px 90px);
}

/* ─── ۴) مخمل ارغوانی — نورافکن نرم، حال‌وهوای مجلسی ─── */
.pd-cinema .tk-hero-velvet{
  background-image:
    radial-gradient(760px 620px at 60% 2%,  rgba(244,114,182,.20), transparent 58%),
    radial-gradient(900px 640px at 20% 96%, rgba(126,34,206,.30), transparent 62%),
    radial-gradient(520px 520px at 80% 60%, rgba(217,70,239,.16), transparent 60%),
    linear-gradient(150deg, #1a0a24 0%, #21092c 38%, #130720 70%, #0a0412 100%);
}
/* مخروط نورافکن از بالا-وسط، مثل نور صحنه */
.pd-cinema .tk-hero-velvet::before{
  background:
    conic-gradient(from 168deg at 58% -8%, transparent 0deg, rgba(255,235,250,.09) 12deg, transparent 26deg),
    radial-gradient(300px 300px at 58% 4%, rgba(255,240,252,.10), transparent 70%);
}

/* ─── ۵) گرافیت مهندسی — شبکهٔ ظریف و یک لبهٔ نور کهربایی ─── */
.pd-cinema .tk-hero-graphite{
  background-image:
    radial-gradient(820px 560px at 82% 4%,  rgba(255,194,24,.15), transparent 58%),
    radial-gradient(900px 620px at 12% 100%, rgba(148,163,184,.13), transparent 62%),
    linear-gradient(165deg, #1b1e24 0%, #15181d 40%, #101216 72%, #0a0b0e 100%);
}
/* شبکهٔ ۶۴px با محوشدگی به سمت پایین تا کف تصویر شلوغ نشود */
.pd-cinema .tk-hero-graphite::before{
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.030) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.030) 0 1px, transparent 1px 64px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
}

/* موبایل: طرح‌ها نواری نمی‌شوند (مثل عکس)، چون خودشان اسکریم دارند و
   تمام‌قد بهتر دیده می‌شوند. اسکریم را کمی قوی‌تر می‌کنیم چون متن روی آن است. */
@media (max-width:900px){
  .pd-cinema .cine-bg--preset{height:100%;bottom:0;
    -webkit-mask-image:none;mask-image:none}
  .pd-cinema .cine-bg--preset::after{
    background:
      linear-gradient(180deg, rgba(6,7,10,.30) 0%, rgba(6,7,10,.55) 46%, rgba(6,7,10,.88) 100%),
      radial-gradient(130% 100% at 50% 50%, transparent 48%, rgba(4,5,8,.55) 100%)}
}


/* ─── ۶) سحابی — آسمان عمیق با غبار ستاره‌ای ─── */
.pd-cinema .tk-hero-nebula{
  background-image:
    radial-gradient(700px 560px at 24% 22%, rgba(236,72,153,.18), transparent 60%),
    radial-gradient(1050px 760px at 72% 60%, rgba(37,99,235,.40), transparent 64%),
    radial-gradient(620px 500px at 52% 6%,  rgba(34,211,238,.16), transparent 60%),
    linear-gradient(145deg, #050a1c 0%, #0a1130 44%, #070b1e 74%, #03050f 100%);
}
/* میدان ستاره: سه لایه نقطهٔ ریز با تراکم و روشنایی متفاوت (بدون فایل تصویری) */
.pd-cinema .tk-hero-nebula::before{
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 34% 62%, rgba(255,255,255,.60), transparent 100%),
    radial-gradient(1.6px 1.6px at 58% 28%, rgba(255,255,255,.90), transparent 100%),
    radial-gradient(1.1px 1.1px at 72% 74%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 36%, rgba(255,255,255,.75), transparent 100%),
    radial-gradient(1.0px 1.0px at 22% 84%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1.3px 1.3px at 46% 92%, rgba(255,255,255,.60), transparent 100%);
  background-size: 340px 300px;
  background-repeat: repeat;
}

/* ─── ۷) غروب کویری — افق نارنجی تا بنفش شب ─── */
.pd-cinema .tk-hero-sunset{
  background-image:
    linear-gradient(0deg, rgba(251,146,60,.55) 0%, rgba(249,115,22,.20) 30%, transparent 54%),
    radial-gradient(1100px 560px at 50% 106%, rgba(234,88,12,.42), transparent 68%),
    radial-gradient(820px 600px at 26% 0%,   rgba(88,28,135,.24), transparent 60%),
    linear-gradient(180deg, #1b0a24 0%, #3a1424 46%, #4a1a18 76%, #2a0d0a 100%);
}
/* نوار باریک افق، همان‌جا که خورشید تازه غروب کرده */
.pd-cinema .tk-hero-sunset::before{
  background:
    linear-gradient(0deg, rgba(255,196,120,.20) 0%, transparent 9%),
    radial-gradient(600px 120px at 50% 100%, rgba(255,214,150,.24), transparent 72%);
}

/* ─── ۸) زمرد شب — سبز عمیق با لبهٔ نور طلایی ─── */
.pd-cinema .tk-hero-emerald{
  background-image:
    radial-gradient(880px 620px at 20% 14%, rgba(16,185,129,.26), transparent 62%),
    radial-gradient(700px 500px at 86% 88%, rgba(250,204,21,.16), transparent 60%),
    radial-gradient(760px 560px at 58% 44%, rgba(5,150,105,.18), transparent 62%),
    linear-gradient(158deg, #04140f 0%, #06231a 44%, #041710 74%, #020b08 100%);
}
/* لبهٔ نور طلایی که از راست به داخل می‌تابد */
.pd-cinema .tk-hero-emerald::before{
  background:
    linear-gradient(to left, rgba(250,204,21,.13) 0%, transparent 22%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.015) 0 2px, transparent 2px 120px);
}

/* ─── ۹) یاقوت سرخ — زرشکی با نور جانبی دراماتیک ─── */
.pd-cinema .tk-hero-crimson{
  background-image:
    radial-gradient(820px 660px at 86% 20%, rgba(244,63,94,.26), transparent 60%),
    radial-gradient(920px 640px at 14% 92%, rgba(136,19,55,.34), transparent 62%),
    radial-gradient(560px 460px at 56% 52%, rgba(251,113,133,.11), transparent 60%),
    linear-gradient(152deg, #1b0511 0%, #2a0716 44%, #16040d 74%, #0c0208 100%);
}
/* تیغهٔ نور از راست بالا، مثل نور صحنهٔ تئاتر */
.pd-cinema .tk-hero-crimson::before{
  background:
    conic-gradient(from 196deg at 92% -6%, transparent 0deg, rgba(255,228,235,.10) 16deg, transparent 34deg),
    radial-gradient(340px 340px at 90% 6%, rgba(255,205,215,.10), transparent 70%);
}

/* ─── ۱۰) فولاد سرد — آبی‌خاکستری با تیغهٔ نور مورب ─── */
.pd-cinema .tk-hero-steel{
  background-image:
    radial-gradient(900px 620px at 78% 10%, rgba(148,163,184,.20), transparent 60%),
    radial-gradient(860px 640px at 16% 94%, rgba(51,65,85,.34), transparent 62%),
    linear-gradient(168deg, #111820 0%, #18212c 44%, #10161e 74%, #080b10 100%);
}
/* دو تیغهٔ نور موازی — مینیمال، بدون رنگ اضافه */
.pd-cinema .tk-hero-steel::before{
  background:
    linear-gradient(104deg, transparent 34%, rgba(226,232,240,.10) 42%, transparent 50%),
    linear-gradient(104deg, transparent 56%, rgba(226,232,240,.05) 61%, transparent 66%);
}

@media (prefers-reduced-motion: reduce){
  .pd-cinema .cine-bg--preset,
  .pd-cinema .cine-bg--preset::before{animation:none!important}
}

/* ═══ CINE XL — تعادل عنوان هیرو در نمایشگرهای بزرگ (فقط ≥1680px) ═══
   محافظه‌کارانه: فقط سقف اندازه عنوان از 40 به 54 پیکسل می‌رسد و جعبه تک‌خطی عنوان
   به همان نسبت عریض‌تر می‌شود تا عنوان‌های بلندتر بیرون نزنند یا کوچک نمانند.
   عرض ستون هیرو عمداً دست‌نخورده ماند: طبق بلاک «هم‌ترازی افقی با هدر»، ستون هیرو
   باید با ستون هدر (min(1240px,92vw)) هم‌لبه بماند. لپ‌تاپ و موبایل کاملاً بی‌تغییرند. */
@media (min-width:1680px){
  .pd-cinema .cine-in h1.title{font-size:clamp(24px,2.6vw,54px);max-width:760px}
}

/* ═══ CINE v13 — محو تمیز لبه تصویر هیرو (به سبک فیلم‌نت) ═══
   قبلاً خودِ تصویر با یک mask-image خطی ۲توقفی محو می‌شد؛ گرادیان خطی در فاصله
   طولانی روی زمینه تیره هم «لبه شروع» مرئی می‌سازد و هم نوارهای پله‌پله (banding).
   حالا مثل فیلم‌نت، عکس در دسکتاپ ماسک نمی‌شود و یک لایه روکشِ گرادیان نرم
   (ease-in-out با ۱۶ توقف) بین عکس و پس‌زمینه می‌نشیند و لبه راست عکس را بدون
   درز در #101115 حل می‌کند. روکش عمداً بیرون از .cine-bg است تا filter تصویر
   (brightness .9) رنگ انتهایی روکش را تغییر ندهد و با پس‌زمینه درز رنگی نیفتد.
   موبایل (≤900px) چیدمان و ماسک عمودی خودش را دارد و کاملاً دست‌نخورده است. */
@media (min-width:901px){
  .pd-cinema .cine-bg{-webkit-mask-image:none;mask-image:none}
  .pd-cinema .cine-hero::before{content:"";position:absolute;top:0;bottom:0;
    left:24%;width:42%;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,
      rgba(16,17,21,0) 0%,
      rgba(16,17,21,.013) 8.1%,
      rgba(16,17,21,.049) 15.5%,
      rgba(16,17,21,.104) 22.5%,
      rgba(16,17,21,.175) 29%,
      rgba(16,17,21,.259) 35.3%,
      rgba(16,17,21,.352) 41.2%,
      rgba(16,17,21,.45) 47.1%,
      rgba(16,17,21,.55) 52.9%,
      rgba(16,17,21,.648) 58.8%,
      rgba(16,17,21,.741) 64.7%,
      rgba(16,17,21,.825) 71%,
      rgba(16,17,21,.896) 77.5%,
      rgba(16,17,21,.951) 84.5%,
      rgba(16,17,21,.987) 91.9%,
      #101115 100%)}
  /* طرح‌های آماده (بدون عکس) تمام‌عرض‌اند و اسکریم اختصاصی خودشان را دارند */
  .pd-cinema .cine-hero:has(.cine-bg--preset)::before{content:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROF v3 — بازطراحی صفحه معرفی طراح: «موزاییک کارنامه»
   خوانایی بالاتر متن‌ها، آیکون‌های معنادار چرخشی از اسپرایت (pfi/pta/pac)،
   چهار رنگ‌مایه نرم، کارت نخست برجسته (lead)، گوشه‌تاخوردهٔ برگه، جفت متضاد
   روشن/جوهری برای خدمات/روش، و لایه دوم افکت‌های اسکرول روی سیستم fx2.
   فقط دامنه ‎.sk-mkt-pd--profile — صفحه آموزشگاه دست‌نخورده است.
   ═══════════════════════════════════════════════════════════════════════ */
.sk-mkt-pd--profile{
  --pfa-w:#fff3cf;--pfa-d:#8a5b06;
  --pfb-w:#e3f4ee;--pfb-d:#0c6b5e;
  --pfc-w:#e9edfd;--pfc-d:#4338ca;
  --pfd-w:#fdeaf0;--pfd-d:#b0234f;
}
.sk-mkt-pd--profile .hue-a{--fcw:var(--pfa-w);--fcd:var(--pfa-d)}
.sk-mkt-pd--profile .hue-b{--fcw:var(--pfb-w);--fcd:var(--pfb-d)}
.sk-mkt-pd--profile .hue-c{--fcw:var(--pfc-w);--fcd:var(--pfc-d)}
.sk-mkt-pd--profile .hue-d{--fcw:var(--pfd-w);--fcd:var(--pfd-d)}

/* ── خوانایی متن‌های بلند ── */
.sk-mkt-pd--profile .land-prose{font-size:16px;line-height:2.3;color:#2a3140;max-width:700px;margin-inline:auto;text-wrap:pretty}
.sk-mkt-pd--profile .land-sec-h h2{text-wrap:balance}
.sk-mkt-pd--profile .land-note{font-size:14.5px;line-height:2.15}

/* ── موزاییک ویژگی‌ها ── */
.sk-mkt-pd--profile .prof-feature-grid{grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.sk-mkt-pd--profile .prof-feature-card{position:relative;overflow:hidden;gap:14px;padding:19px 18px;border-radius:18px;
  border:1px solid var(--sk-line);box-shadow:0 10px 26px rgba(20,24,33,.05)}
.sk-mkt-pd--profile .prof-feature-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(20,24,33,.1);border-color:color-mix(in srgb,var(--fcd,#8a5b06) 26%,var(--sk-line))}
.sk-mkt-pd--profile .fc-tab{position:absolute;top:0;inset-inline-start:0;width:0;height:0;
  border-top:26px solid color-mix(in srgb,var(--fcd,#8a5b06) 16%,#fff);
  border-inline-end:26px solid transparent;pointer-events:none;transition:.25s var(--sk-ease)}
.sk-mkt-pd--profile .prof-feature-card:hover .fc-tab{border-top-color:color-mix(in srgb,var(--fcd,#8a5b06) 30%,#fff)}
.sk-mkt-pd--profile .feat-ic{width:47px;height:47px;border-radius:14px;background:var(--fcw,#fff3cf);color:var(--fcd,#8a5b06);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fcd,#8a5b06) 16%,transparent);transition:.3s var(--sk-ease)}
.sk-mkt-pd--profile .prof-feature-card:hover .feat-ic{transform:rotate(-7deg) scale(1.07)}
.sk-mkt-pd--profile .feat-ic svg{width:23px;height:23px}
.sk-mkt-pd--profile .feat-ic svg [stroke]{stroke-width:2}
.sk-mkt-pd--profile .prof-feature-card b{font-size:15.5px;font-weight:800;margin-bottom:6px;letter-spacing:-.2px}
.sk-mkt-pd--profile .prof-feature-card p{font-size:13.5px;line-height:2;color:#5b6373}
/* کارت نخست برجسته */
.sk-mkt-pd--profile .fc-lead{grid-column:span 2;padding:24px 22px;
  background:linear-gradient(140deg,#fffdf2,#fff 62%);border-color:#f0deA6}
.sk-mkt-pd--profile .fc-lead .feat-ic{width:56px;height:56px;border-radius:17px}
.sk-mkt-pd--profile .fc-lead .feat-ic svg{width:27px;height:27px}
.sk-mkt-pd--profile .fc-lead b{font-size:17.5px}
.sk-mkt-pd--profile .fc-lead p{font-size:14.5px;line-height:2.05}

/* ── جفت متضاد: خدمات (روشن) / روش (جوهری) ── */
.sk-mkt-pd--profile .prof-duo{gap:18px;align-items:stretch}
.sk-mkt-pd--profile .prof-duo .ib{position:relative;overflow:hidden;padding:28px 26px 30px;border-radius:22px;box-shadow:0 14px 34px rgba(20,24,33,.06)}
.sk-mkt-pd--profile .prof-duo .ib .ib-ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;margin-bottom:14px}
.sk-mkt-pd--profile .prof-duo .ib .ib-ic svg{width:24px;height:24px}
.sk-mkt-pd--profile .prof-duo .ib b{font-size:17px;font-weight:900;margin-bottom:10px}
.sk-mkt-pd--profile .prof-duo .ib p{position:relative;font-size:15px;line-height:2.25;max-width:56ch}
.sk-mkt-pd--profile .ib--light{background:linear-gradient(160deg,#fffef6,#fff 55%);border:1px solid #efe2b8}
.sk-mkt-pd--profile .ib--light .ib-ic{background:var(--pfa-w);color:var(--pfa-d);box-shadow:inset 0 0 0 1px rgba(138,91,6,.18)}
.sk-mkt-pd--profile .ib--light p{color:#3a4150}
.sk-mkt-pd--profile .ib--ink{background:linear-gradient(165deg,#171a22,#111318 70%);border:1px solid #272c39}
.sk-mkt-pd--profile .ib--ink b{color:#fff}
.sk-mkt-pd--profile .ib--ink p{color:#c9ceda}
.sk-mkt-pd--profile .ib--ink .ib-ic{background:rgba(255,194,24,.14);color:var(--sk-amber);box-shadow:inset 0 0 0 1px rgba(255,194,24,.28)}
.sk-mkt-pd--profile .ib-mark{position:absolute;bottom:-30px;inset-inline-end:-22px;width:160px;height:160px;opacity:.055;color:currentColor;pointer-events:none}
.sk-mkt-pd--profile .ib-mark svg{width:100%;height:100%}
.sk-mkt-pd--profile .ib--ink .ib-mark{opacity:.09;color:var(--sk-amber)}

/* ── لجر تمایز و دستاوردها ── */
.sk-mkt-pd--profile .ach{position:relative;gap:14px;padding:16px 20px 16px 16px;border-radius:16px;
  border:1px solid var(--sk-line);box-shadow:0 8px 22px rgba(20,24,33,.045)}
.sk-mkt-pd--profile .ach:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(20,24,33,.09);
  border-color:color-mix(in srgb,var(--fcd,#8a5b06) 24%,var(--sk-line))}
.sk-mkt-pd--profile .ach-bar{position:absolute;inset-inline-start:0;top:13px;bottom:13px;width:3.5px;border-radius:99px;background:var(--fcd,#c99a2e)}
.sk-mkt-pd--profile .ach .ach-ic{width:43px;height:43px;border-radius:13px;background:var(--fcw,#fff3cf);color:var(--fcd,#8a5b06);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fcd,#8a5b06) 15%,transparent)}
.sk-mkt-pd--profile .ach .ach-ic svg{width:21px;height:21px}
.sk-mkt-pd--profile .ach-tx b{font-size:15px;font-weight:800}
.sk-mkt-pd--profile .ach-tx span{font-size:13.5px;line-height:2;color:#5b6373}

/* ── لایه دوم افکت‌های اسکرول (فقط با fx2 = بدون reduced-motion) ── */
.prof-land.fx2 .rv-l[data-reveal]{transform:translateX(-46px) translateY(16px)}
.prof-land.fx2 .rv-r[data-reveal]{transform:translateX(46px) translateY(16px)}
.prof-land.fx2 .rv-l[data-reveal].in,.prof-land.fx2 .rv-r[data-reveal].in{transform:none}
.prof-land.fx2 .prof-feature-card .feat-ic,
.prof-land.fx2 .prof-duo .ib .ib-ic{opacity:0;transform:scale(.45) rotate(-16deg);transition:.55s .2s var(--sk-ease)}
.prof-land.fx2 .prof-feature-card.in .feat-ic,
.prof-land.fx2 .prof-duo .ib.in .ib-ic{opacity:1;transform:none}
.prof-land.fx2 .land-eyebrow{position:relative}
.prof-land.fx2 .land-eyebrow::after{content:"";position:absolute;inset-inline:10px;bottom:-3px;height:2px;border-radius:2px;
  background:var(--sk-amber);transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s .3s var(--sk-ease)}
.prof-land.fx2 .land-sec.in .land-eyebrow::after{transform:scaleX(1)}
.prof-land.fx2 .fc-lead::after{content:"";position:absolute;inset:-40% -20%;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%);transform:translateX(170%)}
.prof-land.fx2 .fc-lead.in::after{animation:pfShine 1.15s .55s both}
@keyframes pfShine{to{transform:translateX(-170%)}}
.prof-land.fx2 .ach .ach-bar{transform:scaleY(0);transform-origin:top;transition:transform .55s .22s var(--sk-ease)}
.prof-land.fx2 .ach.in .ach-bar{transform:scaleY(1)}
.prof-land.fx2 .ib--ink .ib-mark{animation:pfDrift 9s ease-in-out infinite alternate}
@keyframes pfDrift{from{transform:translateY(0) rotate(0deg)}to{transform:translateY(-15px) rotate(10deg)}}

/* ── واکنش‌گرا ── */
@media (max-width:760px){
  .sk-mkt-pd--profile .fc-lead{grid-column:auto;padding:20px 18px}
  .sk-mkt-pd--profile .fc-lead .feat-ic{width:48px;height:48px}
  .sk-mkt-pd--profile .fc-lead b{font-size:16px}
  .sk-mkt-pd--profile .prof-duo .ib{padding:22px 18px 24px}
  .sk-mkt-pd--profile .prof-duo .ib p{font-size:14.5px;line-height:2.15}
  .sk-mkt-pd--profile .land-prose{font-size:15px;line-height:2.2}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROF v4 — اصلاح بازخورد: حذف کامل آیکون‌ها، رفع دو باگ خوانایی رنگ،
   امضای تایپوگرافیک «ماژیک هایلایت» که هنگام اسکرول روی عنوان کشیده می‌شود،
   و «کاغذ خط‌دار» برای کارت روش طراحی. فقط دامنه صفحه طراح.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── رفع باگ ۱: رنگ متن بخش تیره (مسیر حرفه‌ای) که v3 ناخوانایش کرده بود ── */
.sk-mkt-pd--profile .land-sec--dark .land-prose,
.sk-mkt-pd--profile .land-sec--dark .land-history{color:#c9cfdd}

/* ── کارت‌های ویژگی: تایپ‌محور، بدون آیکون ── */
.sk-mkt-pd--profile .prof-feature-card{display:block;padding:20px 20px 18px}
.sk-mkt-pd--profile .prof-feature-card b{display:inline;font-size:16px;line-height:1.9;padding:2px 2px 3px;
  background-image:linear-gradient(to top,var(--fcw,#fff3cf) 0 44%,transparent 44%);
  background-repeat:no-repeat;background-size:100% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.sk-mkt-pd--profile .prof-feature-card p{margin-top:9px;font-size:13.8px;line-height:2.05;color:#525c6d}
.sk-mkt-pd--profile .prof-feature-card:hover{transform:translateY(-4px)}
/* تنوع بافت بدون تمپلیت: هر کارت سوم، شست‌وشوی نرم رنگ‌مایه خودش */
.sk-mkt-pd--profile .land-mosaic .prof-feature-card:nth-child(3n){
  background:linear-gradient(150deg,color-mix(in srgb,var(--fcw,#fff3cf) 46%,#fff),#fff 58%)}
/* کارت نخست برجسته */
.sk-mkt-pd--profile .fc-lead{padding:26px 24px 22px}
.sk-mkt-pd--profile .fc-lead b{font-size:19px;background-image:linear-gradient(to top,#ffe9a6 0 46%,transparent 46%)}
.sk-mkt-pd--profile .fc-lead p{font-size:14.5px;line-height:2.1;color:#3c4454}

/* ── لجر تمایز/دستاوردها: نوار رنگی بدون کاشی آیکون ── */
.sk-mkt-pd--profile .ach{padding:17px 22px 17px 18px}
.sk-mkt-pd--profile .ach-tx b{display:inline;font-size:15.5px;line-height:1.9;padding:1px 2px 2px;
  background-image:linear-gradient(to top,var(--fcw,#fff3cf) 0 40%,transparent 40%);
  background-repeat:no-repeat;background-size:100% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.sk-mkt-pd--profile .ach-tx span{display:block;margin-top:8px;font-size:13.8px;line-height:2.05;color:#525c6d}

/* ── رفع باگ ۲ + بازطراحی جفت خدمات/روش: هر دو روشن و کاملاً خوانا ──
   selectorهای سه‌کلاسه تا بر هر قانون قدیمی هم‌نام غلبه کنند */
.sk-mkt-pd--profile .prof-two-col .prof-info-box{padding:28px 26px 30px;border-radius:22px;
  box-shadow:0 14px 34px rgba(20,24,33,.06)}
.sk-mkt-pd--profile .prof-two-col .prof-info-box b{display:inline;font-size:17.5px;font-weight:900;
  color:#1c2230;line-height:1.9;padding:2px 3px 4px;background-repeat:no-repeat;background-size:100% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.sk-mkt-pd--profile .prof-two-col .prof-info-box p{margin-top:16px;font-size:15px;line-height:2.3;
  color:#333b4a;max-width:58ch}
.sk-mkt-pd--profile .prof-two-col .ib--clean{background:#fff;border:1px solid var(--sk-line)}
.sk-mkt-pd--profile .prof-two-col .ib--clean b{background-image:linear-gradient(to top,#ffe9a6 0 42%,transparent 42%)}
/* «کاغذ خط‌دار» — جنس برگه آزمون؛ خطوط بسیار کم‌رنگ زیر متن */
.sk-mkt-pd--profile .prof-two-col .ib--paper{border:1px solid #ecdfae;
  background:
    repeating-linear-gradient(to bottom,transparent 0 33px,rgba(138,91,6,.085) 33px 34px),
    linear-gradient(150deg,#fffdf3,#fffef9)}
.sk-mkt-pd--profile .prof-two-col .ib--paper b{background-image:linear-gradient(to top,var(--pfb-w) 0 42%,transparent 42%)}
.sk-mkt-pd--profile .prof-two-col .ib--paper p{line-height:34px}

/* ── افکت اسکرول جایگزین آیکون‌ها: کشیده‌شدن ماژیک هایلایت هنگام ورود ── */
.prof-land.fx2 .prof-feature-card b,
.prof-land.fx2 .ach-tx b,
.prof-land.fx2 .prof-two-col .prof-info-box b{background-size:0% 100%;
  background-position:100% 0;transition:background-size .7s .25s var(--sk-ease)}
.prof-land.fx2 .prof-feature-card.in b,
.prof-land.fx2 .ach.in .ach-tx b,
.prof-land.fx2 .prof-two-col .prof-info-box.in b{background-size:100% 100%}

/* پاک‌سازی افکت‌های آیکونی v3 که دیگر موضوعیت ندارند */
.prof-land.fx2 .prof-feature-card .feat-ic,
.prof-land.fx2 .prof-duo .ib .ib-ic{display:none}

@media (max-width:760px){
  .sk-mkt-pd--profile .fc-lead b{font-size:17px}
  .sk-mkt-pd--profile .prof-two-col .prof-info-box{padding:22px 18px 24px}
  .sk-mkt-pd--profile .prof-two-col .prof-info-box p{font-size:14.5px;line-height:2.2}
  .sk-mkt-pd--profile .prof-two-col .ib--paper p{line-height:32px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROF v5 — تنوع بخش‌به‌بخش + پشتیبانی کامل تم شب
   ماژیک هایلایت فقط برای موزاییک «ویژگی‌ها»؛ خدمات/روش: تیغه کهربایی و کاغذ
   خط‌دار با خط حاشیه دفترچه؛ «تمایز»: فقط نوار رنگی کناری؛ «دستاوردها»: تب
   گوشه + زیرخط کوتاه رنگی که با اسکرول کشیده می‌شود. همه رنگ‌ها متغیرمحور و
   دارای نسخه شب.
   ═══════════════════════════════════════════════════════════════════════ */
.sk-mkt-pd--profile{--pf-title:#1c2230;--pf-body:#525c6d;--pf-body-strong:#333b4a}
[data-theme="dark"] .sk-mkt-pd--profile{
  --pf-title:#eef1f7;--pf-body:#a8b1c1;--pf-body-strong:#c4cbd9;
  --pfa-w:rgba(255,194,24,.28);--pfa-d:#ffd763;
  --pfb-w:rgba(52,190,167,.24);--pfb-d:#7fe2d0;
  --pfc-w:rgba(132,143,247,.26);--pfc-d:#b6bdff;
  --pfd-w:rgba(246,118,161,.24);--pfd-d:#ff9fbf}

/* متن‌ها از متغیر → در هر دو تم خوانا */
.sk-mkt-pd--profile .prof-feature-card b{color:var(--pf-title)}
.sk-mkt-pd--profile .prof-feature-card p{color:var(--pf-body)}
.sk-mkt-pd--profile .fc-lead p{color:var(--pf-body-strong)}
.sk-mkt-pd--profile .ach-tx b{color:var(--pf-title)}
.sk-mkt-pd--profile .ach-tx span{color:var(--pf-body)}
.sk-mkt-pd--profile .land-sec:not(.land-sec--dark) .land-prose{color:var(--pf-body-strong)}

/* ── تم شب: موزاییک ── */
[data-theme="dark"] .sk-mkt-pd--profile .fc-lead{background:linear-gradient(140deg,#26200f,#181a21 62%);border-color:#4c401b}
[data-theme="dark"] .sk-mkt-pd--profile .fc-lead b{background-image:linear-gradient(to top,rgba(255,194,24,.32) 0 46%,transparent 46%)}
[data-theme="dark"] .sk-mkt-pd--profile .land-mosaic .prof-feature-card:nth-child(3n){
  background:linear-gradient(150deg,color-mix(in srgb,var(--fcd,#ffd763) 11%,var(--sk-surface)),var(--sk-surface) 58%)}
[data-theme="dark"] .sk-mkt-pd--profile .fc-tab{border-top-color:color-mix(in srgb,var(--fcd,#ffd763) 36%,#14161d)}
[data-theme="dark"] .sk-mkt-pd--profile .prof-feature-card:hover .fc-tab{border-top-color:color-mix(in srgb,var(--fcd,#ffd763) 52%,#14161d)}

/* ── خدمات/روش: بدون ماژیک؛ دو هویت مستقل ── */
.sk-mkt-pd--profile .prof-two-col .prof-info-box b{background-image:none;padding:0;color:var(--pf-title)}
.sk-mkt-pd--profile .prof-two-col .prof-info-box p{color:var(--pf-body-strong)}
.sk-mkt-pd--profile .prof-two-col .ib--clean{border-inline-start:5px solid var(--sk-amber)}
[data-theme="dark"] .sk-mkt-pd--profile .prof-two-col .ib--clean{background:var(--sk-surface);border-color:var(--sk-line);border-inline-start-color:var(--sk-amber)}
/* کاغذ خط‌دار + خط حاشیه دفترچه */
.sk-mkt-pd--profile .prof-two-col .ib--paper{position:relative}
.sk-mkt-pd--profile .prof-two-col .ib--paper::before{content:"";position:absolute;top:14px;bottom:14px;inset-inline-start:15px;width:1.5px;border-radius:2px;background:rgba(176,35,79,.30)}
[data-theme="dark"] .sk-mkt-pd--profile .prof-two-col .ib--paper{border-color:#4c401b;
  background:repeating-linear-gradient(to bottom,transparent 0 33px,rgba(255,215,99,.10) 33px 34px),linear-gradient(150deg,#201d10,#17181e)}
[data-theme="dark"] .sk-mkt-pd--profile .prof-two-col .ib--paper::before{background:rgba(255,159,191,.34)}

/* ── تمایز: فقط نوار کناری ── */
.sk-mkt-pd--profile .prof-ach--edge .ach-tx b{background-image:none;padding:0}
.sk-mkt-pd--profile .prof-ach--edge .ach-bar{width:4.5px}

/* ── دستاوردها: تب گوشه + زیرخط کوتاه ── */
.sk-mkt-pd--profile .prof-ach--tab .ach{overflow:hidden}
.sk-mkt-pd--profile .prof-ach--tab .ach-bar{display:none}
.sk-mkt-pd--profile .prof-ach--tab .ach::after{content:"";position:absolute;top:0;inset-inline-start:0;width:0;height:0;
  border-top:24px solid color-mix(in srgb,var(--fcd,#8a5b06) 18%,var(--sk-surface));border-inline-end:24px solid transparent}
[data-theme="dark"] .sk-mkt-pd--profile .prof-ach--tab .ach::after{border-top-color:color-mix(in srgb,var(--fcd,#ffd763) 30%,#14161d)}
.sk-mkt-pd--profile .prof-ach--tab .ach-tx b{background-image:none;padding:0 0 9px;position:relative;display:inline-block}
.sk-mkt-pd--profile .prof-ach--tab .ach-tx b::after{content:"";position:absolute;bottom:2px;inset-inline-start:0;width:46px;height:2.5px;border-radius:2px;background:var(--fcd,#c99a2e)}

/* ── افکت‌ها: ماژیک فقط موزاییک؛ زیرخط دستاوردها با اسکرول کشیده می‌شود ── */
.prof-land.fx2 .prof-ach--edge .ach-tx b,
.prof-land.fx2 .prof-ach--tab .ach-tx b,
.prof-land.fx2 .prof-two-col .prof-info-box b{background-size:auto;background-position:0 0;transition:none}
.prof-land.fx2 .prof-ach--tab .ach-tx b::after{width:0;transition:width .55s .28s var(--sk-ease)}
.prof-land.fx2 .prof-ach--tab .ach.in .ach-tx b::after{width:46px}

/* ═══ PD v13 — عنوان انگلیسی زیر تیتر، توضیح کوتاه هیرو، نشان خرید گروهی در secnav ═══ */
.pd-title-en{display:block;font-family:'TKTitlePinar','Pinar',sans-serif;direction:ltr;text-align:right;
  font-size:13px;font-weight:650;line-height:1.7;margin-top:0;letter-spacing:1px}
.pd-cinema .cine-in .pd-title-en{text-shadow:0 1px 10px rgba(0,0,0,.4)}
.pd-group p{font-size:14.5px;line-height:2.25;color:var(--sk-ink-soft,#5b6371);max-width:660px;margin:0 0 14px}
.pd-group p b{color:var(--sk-ink,#1c2230)}
.pd-group-tiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;max-width:680px;margin:0 0 18px}
.pd-group-tiers .row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 15px;
  border:1px solid var(--sk-line,#e5e7ee);border-radius:12px;font-size:13px;background:var(--sk-surface,#fff)}
.pd-group-tiers .row b{color:#8a5b06;white-space:nowrap}
.pd-group-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:12px;font-size:13.5px;
  font-weight:800;text-decoration:none;background:var(--sk-amber,#ffc218);color:#1c2230;
  box-shadow:0 8px 20px rgba(214,158,17,.28);transition:transform .16s,box-shadow .16s}
.pd-group-cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(214,158,17,.36)}
.pd-group-cta svg{width:16px;height:16px}
[data-theme="dark"] .pd-group-tiers .row b{color:var(--sk-amber)}
@media(max-width:640px){.pd-title-en{font-size:12px}}

@keyframes pdGoldFlow{0%{background-position:0% 0}100%{background-position:240% 0}}

/* ═══ TUD v1 — ۲۰ طرح انتخابی «زیرخط عنوان» صفحه جزئیات (پیش‌فرض بدون کلاس = قلم‌ضرب طلایی فعلی) ═══ */
.pd-v8.tk-tud-classic h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-2px;width:132px;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--sk-amber),rgba(255,194,24,.25));animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-fadeline h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-4px;width:210px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--sk-amber) 28% 72%,transparent);animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-double h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-8px;width:176px;height:9px;background:linear-gradient(var(--sk-amber),var(--sk-amber)) 100% 0/100% 3px no-repeat,linear-gradient(rgba(255,194,24,.55),rgba(255,194,24,.55)) 100% 100%/64% 2px no-repeat;animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-dashed h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-4px;width:198px;height:4px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--sk-amber) 0 16px,transparent 16px 27px);animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-dotted h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-6px;width:158px;height:7px;background:radial-gradient(circle 3.2px at 50% 50%,var(--sk-amber) 97%,transparent) 100% 0/18px 7px repeat-x;animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-wave h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-9px;width:206px;height:12px;background:linear-gradient(90deg,#e9a90c,#ffd968);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 14' preserveAspectRatio='none'><path d='M2 7 Q16 -1 30 7 T58 7 T86 7 T114 7 T142 7 T170 7 T198 7 T222 7' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/></svg>") no-repeat 100% 50% / 100% 100%;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 14' preserveAspectRatio='none'><path d='M2 7 Q16 -1 30 7 T58 7 T86 7 T114 7 T142 7 T170 7 T198 7 T222 7' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/></svg>") no-repeat 100% 50% / 100% 100%;animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-zigzag h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-9px;width:200px;height:12px;background:var(--sk-amber);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 14' preserveAspectRatio='none'><polyline points='2,11 20,3 38,11 56,3 74,11 92,3 110,11 128,3 146,11 164,3 182,11 200,3 220,11' stroke='black' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat 100% 50% / 100% 100%;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 14' preserveAspectRatio='none'><polyline points='2,11 20,3 38,11 56,3 74,11 92,3 110,11 128,3 146,11 164,3 182,11 200,3 220,11' stroke='black' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat 100% 50% / 100% 100%;animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-diamond h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-10px;width:206px;height:15px;background:linear-gradient(90deg,#d99a12,#ffde86,#d99a12);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 16'><rect x='0' y='7' width='92' height='2' rx='1' fill='black'/><rect x='132' y='7' width='92' height='2' rx='1' fill='black'/><rect x='105' y='1' width='14' height='14' transform='rotate(45 112 8)' fill='black'/></svg>") no-repeat 100% 50% / 100% 100%;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 16'><rect x='0' y='7' width='92' height='2' rx='1' fill='black'/><rect x='132' y='7' width='92' height='2' rx='1' fill='black'/><rect x='105' y='1' width='14' height='14' transform='rotate(45 112 8)' fill='black'/></svg>") no-repeat 100% 50% / 100% 100%;filter:drop-shadow(0 2px 6px rgba(255,194,24,.35));animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-arrowtip h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-6px;width:196px;height:9px;background:linear-gradient(90deg,rgba(255,194,24,.25),var(--sk-amber) 55%);clip-path:polygon(100% 0,100% 100%,9% 82%,0 50%,9% 18%);animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-inkbrush h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-12px;width:216px;height:15px;background:linear-gradient(100deg,#3b4150,#7c8494 38%,#242833 72%,#565e6e);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'><path d='M238 6 C200 0 156 16 110 9 C76 4 38 12 3 9 L3 10.5 C40 14 78 7 112 12 C158 19 202 4 238 11 Z' fill='black'/><circle cx='229' cy='3.2' r='2.3' fill='black'/><circle cx='13' cy='15.6' r='1.5' fill='black'/></svg>") no-repeat 100% 50% / 100% 100%;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'><path d='M238 6 C200 0 156 16 110 9 C76 4 38 12 3 9 L3 10.5 C40 14 78 7 112 12 C158 19 202 4 238 11 Z' fill='black'/><circle cx='229' cy='3.2' r='2.3' fill='black'/><circle cx='13' cy='15.6' r='1.5' fill='black'/></svg>") no-repeat 100% 50% / 100% 100%;filter:drop-shadow(0 2px 6px rgba(20,24,33,.45));animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-neonline h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-4px;width:172px;height:4px;border-radius:999px;background:#22d3ee;filter:drop-shadow(0 0 5px #22d3ee) drop-shadow(0 0 14px rgba(34,211,238,.75));animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-rainbow h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-4px;width:206px;height:6px;border-radius:999px;background:linear-gradient(90deg,#f43f5e,#f59e0b,#22c55e,#3b82f6,#a855f7,#f43f5e);background-size:220% 100%;animation:pd-swash .8s .25s var(--sk-ease) both,pdGoldFlow 6s linear 1.2s infinite}
.pd-v8.tk-tud-emerald h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-4px;width:176px;height:5px;border-radius:999px;background:linear-gradient(90deg,#0ea77a,#34d399);filter:drop-shadow(0 2px 8px rgba(16,185,129,.5));animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-rosegold h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-4px;width:182px;height:5px;border-radius:999px;background:linear-gradient(90deg,#e8909f,#f5c9a4 55%,#e8909f);filter:drop-shadow(0 2px 8px rgba(236,153,170,.45));animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-oceanline h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-9px;width:206px;height:12px;background:linear-gradient(90deg,#0284c7,#38bdf8);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 14' preserveAspectRatio='none'><path d='M2 7 Q16 -1 30 7 T58 7 T86 7 T114 7 T142 7 T170 7 T198 7 T222 7' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/></svg>") no-repeat 100% 50% / 100% 100%;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 14' preserveAspectRatio='none'><path d='M2 7 Q16 -1 30 7 T58 7 T86 7 T114 7 T142 7 T170 7 T198 7 T222 7' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/></svg>") no-repeat 100% 50% / 100% 100%;filter:drop-shadow(0 2px 8px rgba(56,189,248,.45));animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-stitch h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-8px;width:196px;height:9px;background:repeating-linear-gradient(90deg,var(--sk-amber) 0 11px,transparent 11px 20px) 100% 0/100% 2.4px no-repeat,repeating-linear-gradient(90deg,rgba(255,194,24,.6) 0 11px,transparent 11px 20px) calc(100% - 10px) 100%/100% 2.4px no-repeat;animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-bracket h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-9px;width:204px;height:13px;background:var(--sk-amber);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 14'><rect x='0' y='10' width='224' height='2.6' rx='1.3' fill='black'/><rect x='0' y='1' width='2.6' height='11' rx='1.3' fill='black'/><rect x='221.4' y='1' width='2.6' height='11' rx='1.3' fill='black'/></svg>") no-repeat 100% 50% / 100% 100%;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 14'><rect x='0' y='10' width='224' height='2.6' rx='1.3' fill='black'/><rect x='0' y='1' width='2.6' height='11' rx='1.3' fill='black'/><rect x='221.4' y='1' width='2.6' height='11' rx='1.3' fill='black'/></svg>") no-repeat 100% 50% / 100% 100%;animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-glowbar h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-3px;width:158px;height:6px;border-radius:999px;background:var(--sk-amber);animation:pd-swash .8s .25s var(--sk-ease) both,pdTudPulse 2.4s ease-in-out 1.3s infinite}
.pd-v8.tk-tud-sparkle h1.title::after{-webkit-mask:none;mask:none;filter:none;background-size:auto;clip-path:none;bottom:-9px;width:208px;height:16px;background:linear-gradient(90deg,#d99a12,#ffe08c,#d99a12);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 18'><rect x='20' y='8' width='184' height='2.4' rx='1.2' fill='black'/><path d='M9 2 L11 7 L16 9 L11 11 L9 16 L7 11 L2 9 L7 7 Z' fill='black'/><path d='M215 2 L217 7 L222 9 L217 11 L215 16 L213 11 L208 9 L213 7 Z' fill='black'/></svg>") no-repeat 100% 50% / 100% 100%;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 18'><rect x='20' y='8' width='184' height='2.4' rx='1.2' fill='black'/><path d='M9 2 L11 7 L16 9 L11 11 L9 16 L7 11 L2 9 L7 7 Z' fill='black'/><path d='M215 2 L217 7 L222 9 L217 11 L215 16 L213 11 L208 9 L213 7 Z' fill='black'/></svg>") no-repeat 100% 50% / 100% 100%;filter:drop-shadow(0 2px 7px rgba(255,194,24,.4));animation:pd-swash .8s .25s var(--sk-ease) both}
.pd-v8.tk-tud-none h1.title::after{display:none}
@keyframes pdTudPulse{0%,100%{filter:drop-shadow(0 0 4px rgba(255,194,24,.45))}50%{filter:drop-shadow(0 0 15px rgba(255,194,24,.95))}}
.pd-v8[class*="tk-tud-"] h1.title::after{max-width:72vw}
@media (prefers-reduced-motion:reduce){.pd-v8[class*="tk-tud-"] h1.title::after{animation:none}}

/* ═══ TFX v2 — ۱۵ افکت جدید عنوان + رنگ سفارشی زیرخط (tk-tudc) ═══ */
.tk-tfx-hologram .lead-col h1.title,.tk-tfx-hologram .cine-in h1.title{background:linear-gradient(115deg,#ff9de2,#8ab6ff 25%,#7ff7d4 50%,#ffd36e 75%,#ff9de2);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;animation:tkfxDrift 8s linear infinite;filter:drop-shadow(0 3px 16px rgba(178,160,255,.4))}
.tk-tfx-liquidgold .lead-col h1.title,.tk-tfx-liquidgold .cine-in h1.title{background:linear-gradient(120deg,#7a4d05,#ffd968 22%,#f5b016 45%,#fff3c4 60%,#c98a08 80%,#ffd968);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;animation:tkfxDrift 5.5s ease-in-out infinite alternate;filter:drop-shadow(0 4px 18px rgba(245,176,22,.5))}
.tk-tfx-chrome .lead-col h1.title,.tk-tfx-chrome .cine-in h1.title{background:linear-gradient(180deg,#fdfdfd,#c9d3dd 34%,#5e6b79 50%,#eef3f8 62%,#93a3b2 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 2px 10px rgba(96,116,136,.55))}
.tk-tfx-galaxy .lead-col h1.title,.tk-tfx-galaxy .cine-in h1.title{background:linear-gradient(130deg,#2a1a6e,#7b3fb8 28%,#3a63c8 55%,#183e8f 78%,#5a2fa0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 18px rgba(140,100,255,.55))}
.tk-tfx-sunset .lead-col h1.title,.tk-tfx-sunset .cine-in h1.title{background:linear-gradient(180deg,#ffd08a,#ff8f5e 45%,#e6486e 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 14px rgba(255,120,90,.45))}
.tk-tfx-foilcopper .lead-col h1.title,.tk-tfx-foilcopper .cine-in h1.title{background:linear-gradient(180deg,#ffe1cd,#e78a55 38%,#a34e22 58%,#ffcaa5 84%,#8d3f18);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 12px rgba(197,102,50,.5))}
.tk-tfx-prism .lead-col h1.title,.tk-tfx-prism .cine-in h1.title{text-shadow:2.5px 0 rgba(255,45,120,.6),-2.5px 0 rgba(0,190,255,.6),0 0 16px rgba(255,255,255,.18)}
.tk-tfx-mirror .lead-col h1.title,.tk-tfx-mirror .cine-in h1.title{-webkit-box-reflect:below -8px linear-gradient(transparent 50%,rgba(0,0,0,.28));text-shadow:0 2px 10px rgba(0,0,0,.25)}
.tk-tfx-candy .lead-col h1.title,.tk-tfx-candy .cine-in h1.title{background:repeating-linear-gradient(45deg,#ff5f8f 0 14px,#ffd1e0 14px 28px);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 10px rgba(255,95,143,.4))}
.tk-tfx-glassy .lead-col h1.title,.tk-tfx-glassy .cine-in h1.title{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(190,214,255,.55));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 6px 14px rgba(120,150,200,.35))}
.pd-classic .tk-tfx-glassy .lead-col h1.title,.pd-classic .tk-tfx-glassy .cine-in h1.title{background:linear-gradient(180deg,#5d708c,#b9c9e2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
.tk-tfx-duotone .lead-col h1.title,.tk-tfx-duotone .cine-in h1.title{background:linear-gradient(180deg,#ffd968 0 52%,#38bdf8 52% 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 10px rgba(56,120,220,.35))}
.tk-tfx-velvet .lead-col h1.title,.tk-tfx-velvet .cine-in h1.title{background:linear-gradient(180deg,#d8b4fe,#7c3aed 55%,#3b0764);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 16px rgba(140,80,240,.5))}
.tk-tfx-cutout .lead-col h1.title,.tk-tfx-cutout .cine-in h1.title{text-shadow:-4px 4px 0 var(--sk-amber,#ffc218),-8px 8px 0 rgba(0,0,0,.16)}
.tk-tfx-longshadow .lead-col h1.title,.tk-tfx-longshadow .cine-in h1.title{text-shadow:-1px 1px 0 rgba(0,0,0,.16),-2px 2px 0 rgba(0,0,0,.15),-3px 3px 0 rgba(0,0,0,.13),-4px 4px 0 rgba(0,0,0,.12),-5px 5px 0 rgba(0,0,0,.1),-6px 6px 0 rgba(0,0,0,.09),-7px 7px 0 rgba(0,0,0,.07),-8px 8px 0 rgba(0,0,0,.06),-9px 9px 0 rgba(0,0,0,.05),-10px 10px 0 rgba(0,0,0,.04)}
.tk-tfx-varsity .lead-col h1.title,.tk-tfx-varsity .cine-in h1.title{color:var(--sk-amber,#ffc218);-webkit-text-stroke:2px rgba(20,24,33,.92);text-shadow:-4px 4px 0 rgba(20,24,33,.92)}
@keyframes tkfxDrift{to{background-position:300% 50%}}
@media (prefers-reduced-motion:reduce){.tk-tfx-hologram .lead-col h1.title,.tk-tfx-hologram .cine-in h1.title,.tk-tfx-liquidgold .lead-col h1.title,.tk-tfx-liquidgold .cine-in h1.title{animation:none}}
/* رنگ سفارشی زیرخط: روی هر ۲۰ طرح (شکل/ماسک حفظ، فقط رنگ) */
.pd-v8.tk-tudc[class] h1.title::after{background:linear-gradient(100deg,color-mix(in srgb,var(--tk-tud-c,#f6c64f) 72%,#000 8%),var(--tk-tud-c,#f6c64f) 46%,color-mix(in srgb,var(--tk-tud-c,#f6c64f) 68%,#fff));filter:drop-shadow(0 3px 9px color-mix(in srgb,var(--tk-tud-c,#f6c64f) 55%,transparent))}

/* ═══ MKL v1 — پولیش صفحه لیست: دکمه/قیمت کوچک‌تر، بج‌های واضح تصویر، اینتروی حرفه‌ای ═══ */
.sk-mkt-card .sk-btn--sm{padding:7px 15px;font-size:12px;border-radius:10px}
.sk-mkt-price.free{font-size:11.5px;font-weight:400;color:#0f7a4f;background:#e7f6ee;padding:3px 12px;border-radius:999px;letter-spacing:0}
[data-theme="dark"] .sk-mkt-price.free{color:#5fe0a8;background:rgba(16,185,129,.14)}
/* بج‌های گوشه تصویر: شیشه تیره پرکنتراست + سبزِ عمیق برای تست رایگان */
.sk-mkt-cover .tag{
  font-size:9px;
  font-weight:500; /* v14.20: از 800 */
  padding:3px 8px; /* v14.20: از 5px 12px */
  letter-spacing:0;
  color:#fff;
  border:0!important; /* v14.20: بوردر و background حذف شدند؛ فقط شیشهٔ blur */
  backdrop-filter:blur(8px) saturate(150%);
  box-shadow:0 3px 10px rgba(0,0,0,.28);
  text-shadow:0 1px 2px rgba(0,0,0,.35)
  }
.sk-mkt-cover .tag.tag-free{background:linear-gradient(135deg,#128a53,#0d6e42);border-color:rgba(255,255,255,.34)}
.sk-mkt-cover .tag.tag-exam,.sk-mkt-cover .tag.tag-course{background:rgba(15,18,26,.66)}
/* اینترو: حرفه‌ای و جمع‌وجور (بدون تجمل) */
.sk-mkt-intro-grid > div:first-child{max-width:640px}
.sk-mkt-intro h1{position:relative;padding-bottom:12px;margin-bottom:10px}
.sk-mkt-intro h1::after{content:"";position:absolute;inset-inline-start:2px;bottom:0;width:46px;height: 4px;border-radius: 999px 0 0 999px;background:var(--sk-amber);right: 0;}
.sk-mkt-intro-grid > div:first-child p{color:var(--sk-ink-soft);font-size:14px;line-height:2.05;text-wrap:pretty;margin:0;font-weight: 400;margin-top:10px;}
.sk-mkt-intro .sk-mkt-search{align-self:flex-start;margin-top:8px;box-shadow:0 10px 26px rgba(20,24,33,.07)}
.sk-mkt-intro .sk-mkt-search:focus-within{border-color:var(--sk-amber);box-shadow:0 10px 26px rgba(214,158,17,.16)}
.sk-mkt-intro .sk-mkt-crumb{padding-top:14px}
.sk-mkt-intro-bg .glow{opacity:.55}
@media (max-width:760px){.sk-mkt-intro-grid{flex-direction:column;gap:14px}.sk-mkt-intro .sk-mkt-search{align-self:stretch;margin-top:2px}}

.sk-btn.sk-btn--primary{height:30px}

/* بدون زیرخط: فاصله عنوان با بخش زیرش جمع شود */
.pd-v8.tk-tud-none .cine-in h1.title{margin-bottom: -10px;padding-bottom:0} /* v14.15: از 2px به 0 */
.pd-v8.tk-tud-none .lead-col h1.title{margin-bottom:2px;padding-bottom:0}

/* ═══ XL v1 — نمایشگرهای بزرگ: تعادل صفحات عمومی و هیروی سینمایی؛ زیر ۱۸۰۰px بدون تغییر ═══ */
@media (min-width:1800px){
  .sk-mkt-wrap{max-width:1400px}
  .tk-public-header .pub-container{width:min(1400px,94vw);max-width:none}
  .pd-cinema .cine-in{max-width:1400px}
  .cine-bg{width:62%}
  .pd-cinema .cine-hero{min-height:clamp(620px,74svh,880px)}
}
@media (min-width:2200px){
  .sk-mkt-wrap{max-width:1520px}
  .tk-public-header .pub-container{width:min(1520px,94vw)}
  .pd-cinema .cine-in{max-width:1520px}
  .cine-bg{width:58%}
  .pd-cinema .cine-hero{min-height:clamp(620px,72svh,920px)}
}

/* بدون زیرخط: بلوک طراح بلافاصله زیر عنوان بنشیند */
.pd-v8.tk-tud-none .cine-in h1.title + .provider{margin-top:2px}
.pd-v8.tk-tud-none .lead-col h1.title + .provider{margin-top:2px}
.pd-v8.tk-tud-none .cine-in h1.title + .provider .provider-card{margin-top:0}


/* Dots policy: only the /exams/ hub keeps the dotted backdrop, and never on phones. */
@media(max-width:767px){.sk-mkt-intro-bg .dots{display:none}}
/* Softer ambient rings/glow so dot-free heroes read calm rather than empty. */
.sk-mkt-intro-bg .rings i{opacity:.55}
.sk-mkt-intro-bg .glow{opacity:.85}

/* فشرده‌سازی تیتر اینترو در صفحات لیستِ دسته/طراحان/آموزشگاه‌ها (هاب /exams/ مستثناست) */
.sk-mkt-intro--compact h1{font-size: 18px;}

/* پلاک عنوان در صفحات لیستِ طراحان / آموزشگاه‌ها / آزمون‌های یک دسته‌بندی.
   fit-content تا پلاک دور خودِ عنوان جمع شود، نه کل عرض ستون.
   در تم شب به‌جای سفیدِ #fafafa از لایه شفافِ روشن استفاده می‌شود تا متن روشن خوانا بماند. */
.sk-mkt-intro--compact h1{
  width:fit-content;
  max-width:100%;
  background: #3b3b3b;
  padding: 12px 10px 12px 35px!important;
  border-radius:1000px 0 0 20px;
  color: #fff;
  }
[data-theme="dark"] .sk-mkt-intro--compact h1{background:rgba(255,255,255,.055)}

/* هم‌ترازی بریک‌پوینت: فیلتر از ۱۰۲۴ به پایین کشویی (position:fixed) می‌شود،
   پس چیدمان هم باید از همان‌جا تک‌ستونی شود؛ وگرنه بین ۷۶۱ تا ۱۰۲۴ یک ستون
   ۳۰۰ پیکسلی خالی رزرو می‌ماند و کارت‌ها له می‌شوند. */
@media(max-width:1024px){.sk-mkt-provider-layout{grid-template-columns:1fr}}

/* در حالت ستونی (≤۷۶۰px) مقدار align-items:center که دیرتر در فایل تعریف شده،
   محور افقی می‌شود و عنوان/متن را وسط‌چین می‌کند؛ اینجا به stretch برمی‌گردد
   تا h1 دقیقاً زیر بردکرامب و چسبیده به لبه راست بنشیند. */
@media(max-width:760px){.sk-mkt-intro-grid{align-items:stretch}}

/* جایگاه سرچ‌بار زنده در هدر صفحات لیست (هم‌اندازه فرم جستجوی قبلی) */
.sk-mkt-introsearch{flex:0 1 min(460px,42%);min-width:0;align-self:center}
.sk-mkt-introsearch .mls{margin:0}
@media(max-width:900px){.sk-mkt-introsearch{flex:1 1 100%;align-self:stretch}}

/* گرید کارت‌های آزمون: دو ستون تا موبایل واقعی ادامه یابد (پیش‌تر از ۷۶۰px
   تک‌ستونی می‌شد و در تبلت/موبایل بزرگ فضای زیادی هدر می‌رفت). */
@media(max-width:560px){.sk-mkt-cards{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════════
   CINE v14 · ردیف اطلاعات یکدست هیروی سینمایی — به سبک سرویس‌های نمایش فیلم
   ───────────────────────────────────────────────────────────────────────────
   مسئله: زیرِ عنوان، سه سیستم رنگی ناهماهنگ کنار هم بود — اعداد و آیکون‌های
   کهربایی (ساعت/سند/کره)، ستاره‌های زرد امتیاز، تیک سبز تأیید — و اطلاعات در
   دو ردیف جدا (امتیاز/شرکت‌کننده + دقیقه/سوال/زبان) پخش می‌شد.

   راه‌حل (فقط دامنهٔ ‎.pd-cinema — چیدمان کلاسیک کاملاً دست‌نخورده):
     ۱) دو ردیف با display:contents روی ‎.meta در «یک ردیف واحد» ادغام می‌شوند:
        ۴٫۴ امتیاز (۲۷ نظر) │ ۴۷ شرکت‌کننده │ ۶۰ دقیقه │ ۲۵ سوال │ زبان فارسی
     ۲) تایپوگرافی واحد: مقدارها سفید/ضخیم، برچسب‌ها خاکستری روشن، جداکنندهٔ
        عمودی یک‌پیکسلی کم‌رنگ؛ نه آیکون، نه ستاره، نه رنگ کهربا.
     ۳) ستاره‌ها حذف؛ فقط عدد امتیاز می‌ماند (JS در سینمایی عدد-تنها می‌سازد و
        این‌جا هم به‌عنوان تور ایمنی ستاره‌های سروری «بسته آزمون» پنهان می‌شوند).
     ۴) v14.1: تیک تأیید (vrf) سبزِ استاندارد خودش را نگه می‌دارد؛ فیلتر تک‌رنگ
        اولیه حذف شد چون نشان اعتماد باید در کل سایت یک شکل باشد.
   عنوان و زیرخط آن (h1.title و ::after آن) عمداً هیچ تغییری نمی‌کنند.
   بلوک انتهای فایل است و طبق قرارداد فایل بر لایه‌های قبلی غالب می‌شود.
   ═══════════════════════════════════════════════════════════════════════════ */

.pd-cinema .cine-in{
  --cine-txt: #fff;         /* مقدارها */
  /* v14.3 · برچسب‌ها و جداکننده «مات» شدند، نه شفاف: رنگ‌های rgba اجازه می‌دادند
     نویز و دانه‌های روشنِ عکس پس‌زمینه از داخل خود حروف دیده شود و متن
     «دون‌دون» به نظر برسد. این‌ها معادل بصری همان شفاف‌های قبلی روی زمینهٔ
     تیرهٔ هیرو (#101115)اند؛ ظاهر رنگ تغییری نمی‌کند. */
  --cine-mut: #a8abb2;      /* ≈ rgba(233,235,240,.68) روی #101115 */
  --cine-div: #4a4c52;      /* ≈ rgba(233,235,240,.26) روی #101115 */
}

/* ── ۱) ادغام دو ردیف در یک ردیف واحد ── */
.pd-cinema .cine-in .pd-engage{
  column-gap: 0;              /* فاصله فقط از پدینگ آیتم‌ها می‌آید تا جداکننده وسط بنشیند */
  row-gap: 10px;              /* اگر شکست، خطوط جمع‌وجور بمانند (نه ۲۴px بین-بلوکی v12) */
  align-items: baseline;
  max-width: 720px;           /* سقف ۶۰۰px عمومی cine-in برای این ردیف تنگ است */
}
.pd-cinema .cine-in .pd-engage .meta{display:contents!important}

/* ── ۲) آیتم‌ها: تایپوگرافی و رنگ واحد + جداکنندهٔ عمودی ── */
.pd-cinema .cine-in .pd-engage :is(.eg, .meta .m){
  display: inline-flex;
  align-items: baseline!important;
  gap: 7px;
  white-space: nowrap;
  font-size: 12.5px;   /* v14.8 · یکدست ۱۲.۵ و وزن سبک‌تر برای ظرافت ردیف */
  font-weight: 300;
  line-height: 1.5;
  color: #ffffff !important;
  padding: 0 15px!important;
  border-inline-start: 1px solid var(--cine-div)!important;
  border-radius: 0!important;               /* .eg قرصی است (radius:999px)؛ بدون این،
                                               جداکنندهٔ یک‌طرفه روی انحنا «هلال» می‌شود */
  text-shadow: 0 1px 8px rgba(0,0,0,.45);   /* خوانایی روی لبهٔ تصویر */
}
/* آیتم نخستِ «دیده‌شدهٔ» ردیف: بدون جداکننده و چسبیده به لبهٔ متن.
   v14.6 · نکتهٔ specificity: قانون عمومی بالا به‌خاطر :is() برای «همهٔ» آیتم‌ها
   امتیاز (0,5,0) دارد (امتیاز :is برابر قوی‌ترین گزینهٔ داخل آن است، نه گزینهٔ
   match‌شده). پس سلکتور فرزند اول باید .eg صریح داشته باشد تا به همان (0,5,0)
   برسد و به‌عنوان قانونِ بعدی برنده شود؛ ‎> :first-child خالی (0,4,0) می‌باخت
   و جداکننده‌ای سرگردان ابتدای ردیف می‌ماند. چهار حالت پوشش داده می‌شود:
     ۱) حالت عادی → فرزند اول (.eg امتیاز — یا شرکت‌کننده اگر امتیاز رندر نشده)
     ۲) فرزند اول hidden → آیتم بعدی
     ۳) دو آیتم اول hidden → نخستین m از متا
     ۴) ردیف مستقیم با متا شروع شده (بستهٔ آزمون بدون امتیاز و شرکت‌کننده) → نخستین m */
.pd-cinema .cine-in .pd-engage > .eg:first-child,
.pd-cinema .cine-in .pd-engage > [hidden]:first-child + *,
.pd-cinema .cine-in .pd-engage > [hidden]:first-child + [hidden] + .meta .m:first-child,
.pd-cinema .cine-in .pd-engage > .meta:first-child .m:first-child{
  padding-inline-start: 0!important;
  border-inline-start: 0!important;
}
.pd-cinema .cine-in .pd-engage :is(.eg, .meta .m) b{
  color: var(--cine-txt)!important;
  font-size: 12.5px;   /* v14.8 · هم‌اندازه با برچسب‌ها؛ تمایز فقط از رنگ/وزن */
  font-weight: 700;
  line-height: 1.4;
}
.pd-cinema .cine-in .pd-engage :is(.eg, .meta .m) small{
  color: #ffffff !important;
  font-size: 12.5px;
  font-weight: 500;
  line-height: inherit;
}

/* ── ۳) حذف ستاره‌ها و آیکون‌ها از این ردیف ──
   .stars → ستاره‌های JS آزمون · .eg-rate > i → ستارهٔ سروری بستهٔ آزمون
   svg → ساعت/سند/کره/شرکت‌کننده (رنگ کهربایی‌شان با v5 هم دیگر موضوعیت ندارد) */
.pd-cinema .cine-in .pd-engage :is(.eg, .meta .m) svg,
.pd-cinema .cine-in .pd-engage .eg-rate .stars,
.pd-cinema .cine-in .pd-engage .eg-rate > i{display:none!important}
/* شبه‌جداکنندهٔ نامرئی قدیمی بین دو eg (خط ~۱۶۳۴۳) دیگر فاصلهٔ اضافه نسازد */
.pd-cinema .cine-in .eg + .eg::before{content:none}
/* آیتم hidden واقعاً پنهان شود؛ display اعلانی روی .eg صفت hidden را شکست می‌داد
   و «۰ شرکت‌کننده» پیش از لود JS دیده می‌شد */
.pd-cinema .cine-in .pd-engage [hidden]{display:none!important}

/* ── ۴) عوامل (طراح/آموزشگاه): هم‌رنگ با برچسب‌های ردیف اطلاعات ── */
.pd-cinema .cine-in .provider-card .provider-label{color:#ffffff!important;font-weight:400;font-size:13.5px}
/* تیک تأیید (vrf): عمداً دست‌نخورده و سبزِ استاندارد سایت می‌ماند —
   نشان اعتماد است و باید در همهٔ صفحات یک شکل دیده شود (v14.1) */

/* ── موبایل/تبلت (هم‌بریک‌پوینت با چیدمان عمودی هیرو): وقتی ردیف می‌شکند،
   جداکنندهٔ ابتدای خط دوم زشت می‌شود → فقط فاصله، بدون خط و پدینگ ── */
@media (max-width:900px){
  .pd-cinema .cine-in .pd-engage{column-gap:18px;row-gap:9px;max-width:none}
  .pd-cinema .cine-in .pd-engage :is(.eg, .meta .m){
    padding: 0!important;
    border-inline-start: 0!important;
  }
}

/* ── v14.2 · دکمهٔ ثانویهٔ هیرو (تست رایگان): بی‌بوردر به سبک سرویس‌های نمایش ──
   بوردر روشن حذف شد تا با CTA زرد رقابت بصری نکند و ردیف خلوت‌تر شود؛ در عوض
   fill از ۹٪ به ۱۴٪ رسید تا روی پس‌زمینه‌های تیرهٔ متغیرِ آپلودی گم نشود
   (الگوی رایج دکمهٔ ثانویهٔ استریمینگ: پرِ نیمه‌شفاف، بدون قاب).
   حذف بوردر ضمناً اختلاف ۲px ارتفاع با دکمهٔ اصلی را هم از بین می‌برد. */
.pd-cinema .cine-btn--glass{
  border: 0;
  background: rgba(255,255,255,.14);
}
.pd-cinema .cine-btn--glass:hover{background:rgba(255,255,255,.22)}

/* ── v14.4 · بردکرامب سینمایی: رفع دون‌دون‌شدن متن ──
   دو عامل هم‌زمان متن خرده‌نان را نیمه‌شفاف می‌کرد و می‌گذاشت دانه‌های روشنِ
   عکس پس‌زمینه از داخل حروف دیده شود: opacity:.85 روی خود کانتینر (لایهٔ v3)
   و رنگ rgba روی لینک‌ها. هر دو مات می‌شوند؛ رنگ، معادل بصری همان قبلی است
   و هاور کهربایی لایه‌های قبلی هم دست‌نخورده کار می‌کند. */
.pd-cinema .cine-in .skill-breadcrumbs{opacity:1}
.pd-cinema .cine-in .skill-breadcrumbs a,
.pd-cinema .cine-in .skill-breadcrumbs span{color:#9a9ca3!important}

/* ── v14.7 · (برگشت‌خورده در v14.10) عوامل در یک خط ──
   به درخواست بعدی، «طراح آزمون» و «آموزشگاه» دوباره هرکدام در ردیف خودشان‌اند؛
   قوانین این بلوک حذف شد تا چیدمان ستونی لایه‌های پایه (خط ~۱۶۳۲۷ به بعد:
   flex-direction:column + row-gap فشرده v12) عیناً برگردد. */

/* ── v14.9 · عوامل بدون عکس در هیرو + تبِ «طراح آزمون» در نوار تب ──
   عکس/لوگو از ردیف عوامل هیرو حذف می‌شود (فقط متن + تیک سبز می‌ماند). به‌جای
   آن، یک تبِ عادی «طراح آزمون» کنار «سرفصل‌ها» اضافه شده (شرط تمپلیت، فقط
   سینمایی) که پنلش همان کارت‌های عکس‌دار قبلی طراح و آموزشگاه است — با همان
   استایل‌های کلاسیک provider-card روی شیت روشن؛ خود تب هم استایل تب‌های عادی
   را می‌گیرد و CSS اختصاصی نمی‌خواهد. (چیپ آزمایشی v14.8 حذف شد.) */
.pd-cinema .cine-in .provider-card .av{display:none}
.pd-cinema .cine-in .provider-card{grid-template-columns:1fr}

/* چیدمان پنل عوامل: هر کارت در ردیف خودش (v14.11) */
.pd-v8 #sec-designer .pd-sec-provider{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin: 0;
  padding: 4px 0 0;
  border: 0;
  background: none;
}

/* ── v14.13 · (برگشت‌خورده به درخواست کاربر) ارتفاع 92svh، کن‌برنز و چکیدهٔ هیرو حذف شدند؛ رفتار همان قبل از این نسخه است. ── */


/* ── v14.22 · نشان تأیید (vrf) در صفحهٔ جزئیات: کهربایی برند (#ffc218) ──
   فقط در صفحات جزئیات آزمون/بسته (.pd-v8) از نسخهٔ کهربایی استفاده می‌شود؛
   بقیهٔ سایت همان آبی می‌ماند. سلکتور هم‌امتیاز با رول‌های پایه است و چون
   انتهای فایل است برنده می‌شود؛ position/size از shorthand پایه حفظ می‌شوند. */
.sk-mkt-pd.pd-v8 .vrf{background-image:url('../img/verified-amber.png?v=1')}

/* ═══ CINE v15 — موبایل (≤900px، هم‌بریک‌پوینت با چیدمان عمودی هیرو) ═══
   ۱) عنوان: در موبایل کاملاً یکنواخت — اندازه ثابت ۲۲px، وزن ثابت ۸۰۰، فونت راوی،
      رنگ سفید، بدون هیچ فیلتر/افکتی (tk-tfx-*) و بدون زیرخط (tk-tud-*) —
      مستقل از همه تنظیمات طراح (اندازه/وزن/فونت/رنگ/افکت/زیرخط/فاصله کلمات)
      و مستقل از اندازه inline اسکریپت fitCineTitle (exam-detail-deferred.js).
      TKTitleRavi همیشه از core/css/title-fonts.css روی این صفحه لود است؛
      فقط سایه خوانایی پایه v6 برای همه یکسان نگه داشته می‌شود.
   ۲) تصویر هیرو: بلندتر (۵۶vw → ۷۲vw)؛ اسکریم و padding-top محتوا با همان
      الگوی v6 هماهنگ شدند (هم‌پوشانی ۱۰vw محتوا با لبه محو تصویر حفظ است).
   ۳) دکمه‌های CTA: کوچک‌تر و همیشه کنار هم — قانون min-width:100% زیر ۳۸۰px
      (v7) را هم لغو می‌کند؛ در هیچ عرضی زیر هم نمی‌روند. */
@media (max-width:900px){
  .pd-v8.pd-cinema .cine-in h1.title{
    font-size:22px!important;
    font-family:'TKTitleRavi'!important;
    font-weight:800!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important; /* غلبه بر افکت‌های گرادیانی متن (gold/fire/...) */
    background:none!important;
    -webkit-text-stroke:0!important;        /* افکت outline */
    filter:none!important;
    animation:none!important;
    transform:none!important;
    opacity:1!important;
    text-shadow:0 2px 18px rgba(0,0,0,.85)!important;
    word-spacing:normal!important;
    white-space:normal!important;
    zoom:1!important;
  }
  /* زیرخط‌های تزیینی عنوان (tk-tud-*) در موبایل نمایش داده نمی‌شوند */
  .pd-v8.pd-cinema .cine-in h1.title::after{display:none!important}
  .pd-cinema .cine-bg,.pd-cinema .cine-bg--art{height:72vw}
  .pd-cinema .cine-scrim{background:linear-gradient(180deg,
    rgba(11,12,16,.22) 0, transparent 16vw, transparent 44vw,
    rgba(11,12,16,.88) 64vw, #0b0c10 73vw)}
  .pd-cinema .cine-in{padding-top:62vw}
  .pd-cinema .cine-cta{flex-wrap:nowrap;gap:8px}
  .pd-cinema .cine-cta .cine-btn{flex:1 1 0;min-width:0;padding:10px 10px;font-size:13px}
  .pd-cinema .cine-btn svg{width:15px;height:15px}
}


/* ═══ VRF-SEAL (pdx70) — تیک تأیید: مهر دندانه‌دار با تیک، هم‌رنگ متن کنارش (currentColor)
   نتیجه: کنار نام سفید روی هیرو سفید می‌شود و روی سطوح روشن، هم‌رنگ متن تیره. ═══ */
.sk-mkt-pd .vrf{background:currentColor!important;background-image:none!important;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/><path d='m9 12 2 2 4-4'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/><path d='m9 12 2 2 4-4'/></svg>") center/contain no-repeat}

/* ═══ MOBILE-FINAL (pdx70) — قواعد قطعی موبایل صفحه جزئیات؛ عمداً انتهای فایل تا بر هر لایهٔ
   هم‌نامِ قبلی (و هر واگرایی احتمالی نسخهٔ سرور) غلبه کند. ═══ */
@media (max-width:640px){
  /* تصویر آزمون در موبایل یک نوار بالایی با ارتفاع vw است (نه پس‌زمینه هیرو)؛
     اهرم درستِ بلندترشدن تصویر همین است + هم‌راستاسازی اسکریم و شروع محتوا. */
  .pd-cinema .cine-bg,.pd-cinema .cine-bg--art{height:112vw!important}
  .pd-cinema .cine-scrim{background:linear-gradient(180deg,rgba(11,12,16,.22) 0,transparent 22vw,transparent 76vw,rgba(11,12,16,.9) 102vw,#0b0c10 112vw)!important}
  .pd-cinema .cine-in{padding-top:100vw!important}
  .pd-cinema .cine-in h1.title{font-size:16px!important}
  .pd-cinema .cine-in .provider.provider--rich{display:none!important}
  /* دکمه‌ها: کانتینر تمام‌عرض + هر دکمه یک ردیف ۱۰۰٪ */
  .pd-cinema .cine-cta{width:100%!important;flex-direction:column!important;align-items:stretch!important;flex-wrap:nowrap!important;gap:10px!important}
  .pd-cinema .cine-btn{flex:none!important;width:100%!important;min-width:0!important;justify-content:center!important}
  .pd-cinema .cine-in .meta{display:flex!important;flex-wrap:nowrap!important;gap:12px!important;color:#fff!important}
  .pd-cinema .cine-in .meta .m{display:inline-flex!important;align-items:center!important;gap:6px!important;color:#fff!important;white-space:nowrap!important}
  .pd-cinema .cine-in .meta .m+.m::before{content:"|";color:rgba(255,255,255,.45);margin-inline-end:10px}
  .pd-cinema .cine-in .meta .m svg{display:inline-block!important;width:16px!important;height:16px!important;color:#fff!important;flex:none}
  .pd-cinema .cine-in .meta .m b{color:#fff!important}
  .pd-cinema .cine-in .meta .egm-lbl{display:none!important}
  /* نسخهٔ کلاس‌یکتا (ضد هر واگرایی): همان ردیف آیکونی سفید تک‌خطی */
  .pd-cinema .cine-meta-row{display:flex!important;flex-wrap:nowrap!important;gap:12px!important;color:#fff!important;margin-top:12px!important}
  .pd-cinema .cine-meta-row .m{display:inline-flex!important;align-items:center!important;gap:6px!important;color:#fff!important;white-space:nowrap!important}
  .pd-cinema .cine-meta-row .m svg{display:inline-block!important;width:16px!important;height:16px!important;color:#fff!important;flex:none}
  .pd-cinema .cine-meta-row .m b{color:#fff!important}
  .pd-cinema .cine-meta-row .egm-lbl{display:none!important}
  /* سلکتورهای قاطع (specificity 0,5,x): ردیفِ متا حتماً سطر مستقل تمام‌عرض و آیکون‌ها حتماً نمایان و سفید */
  .pd-v8.pd-cinema .cine-in .meta.cine-meta-row{display:flex!important;flex-basis:100%!important;width:100%!important;flex-wrap:nowrap!important;gap:12px!important;margin-top:12px!important;color:#fff!important}
  .pd-v8.pd-cinema .cine-in .meta.cine-meta-row .m{display:inline-flex!important;align-items:center!important;gap:6px!important;color:#fff!important;white-space:nowrap!important;background:none!important;padding:0!important;border:0!important}
  .pd-v8.pd-cinema .cine-in .meta.cine-meta-row .m svg{display:inline-block!important;width:16px!important;height:16px!important;color:#fff!important;flex:none!important;background:none!important;padding:0!important;border-radius:0!important;opacity:1!important;visibility:visible!important}
  .pd-v8.pd-cinema .cine-in .meta.cine-meta-row .m b{color:#fff!important}
}

/* ═══ فونت ثابت پینار برای تیترهای عمومی — مستقل از فونت انتخابی ادمین ═══
   تیترها از خانوادهٔ جداگانهٔ TKTitlePinar استفاده می‌کنند (ExtraBold تا ۸۰۰ و Black برای ۹۰۰).
   خانوادهٔ عمومی «Pinar» اینجا نباید با بازهٔ 100–800 دوباره تعریف شود: pinar.css همهٔ وزن‌های واقعی را دارد و
   آن بازه در فایرفاکس (که آخرین @font-face را ترجیح می‌دهد) هر متن پینار تا وزن ۸۰۰، از جمله منوی هدر، را
   ExtraBold نشان می‌داد؛ کروم آن را به‌کار نمی‌گرفت و برای همین فقط در فایرفاکس دیده می‌شد.
   تعریف ۹۰۰ همان‌طور می‌ماند تا ظاهر فعلی متن‌های Black در همهٔ مرورگرها تغییر نکند. */
@font-face{font-family:'TKTitlePinar';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('../../fonts/pinar/Pinar-ExtraBold.woff2?v=tk5') format('woff2')}
@font-face{font-family:'TKTitlePinar';font-style:normal;font-weight:900;font-display:swap;
  src:url('../../fonts/pinar/Pinar-Black.woff2?v=tk5') format('woff2')}
@font-face{font-family:'Pinar';font-style:normal;font-weight:900;font-display:swap;
  src:url('../../fonts/pinar/Pinar-Black.woff2?v=tk5') format('woff2')}
.sk-mkt-intro-grid h1,.sk-mkt-intro-grid h1 *{font-family:'TKTitlePinar','Pinar','Vazirmatn',Tahoma,sans-serif!important}
/* نام طراح/آموزشگاه در صفحات پروفایل عمومی: همیشه پینار */
.land-name,.land-name *{font-family:'TKTitlePinar','Pinar','Vazirmatn',Tahoma,sans-serif!important}
/* چیپ‌های «حوزه‌های تخصص» در پروفایل طراح/آموزشگاه: خوانا در تم روز */
.land-tags .pb-tag--soft{color:#7a5410;font-weight:650;border:1px solid color-mix(in srgb,#b77900 28%,transparent)}
[data-theme="dark"] .land-tags .pb-tag--soft{color:var(--sk-amber,#f2c96b);border-color:color-mix(in srgb,#f2c96b 30%,transparent)}