/* MisahaTech - حزمة بلوكات المحتوى التقني (الموقع + المحرر) */
.mt-dcard, .mt-rev, .mt-leak, .mt-ostabs, .mt-steps, .mt-yt, .mt-fb, .mt-tldr, .mt-faq {
    --k-p: var(--clr-primary, #00dda2);
    --k-prgb: var(--clr-primary-rgb, 0, 221, 162);
    --k-pdk: var(--clr-primary-dk, #007a62);
    --k-bg: var(--clr-white, #fff);
    --k-soft: var(--clr-light, #f5f7fa);
    --k-bd: var(--clr-border, #e4e8ee);
    --k-tx: var(--clr-text, #2d2d2d);
    --k-ti: var(--clr-dark, #22263a);
    --k-mu: var(--clr-muted, #666);
    --k-red: #e5484d;
    --k-redrgb: 229, 72, 77;
    --k-amb: #f5a524;
    --k-ambrgb: 245, 165, 36;
    margin: 1.8em 0 !important;
    direction: rtl;
    color: var(--k-tx);
    line-height: 1.8
}

[data-theme=dark] :is(.mt-dcard, .mt-rev, .mt-leak, .mt-ostabs, .mt-steps, .mt-yt, .mt-fb, .mt-tldr, .mt-faq) {
    --k-bg: var(--dm-bg2, #1c2030);
    --k-soft: var(--dm-bg3, #262b3d);
    --k-bd: var(--dm-border, #2e3447);
    --k-tx: #c8cad6;
    --k-ti: #e2e4ed;
    --k-mu: #8b90a8;
    --k-pdk: var(--k-p)
}

/* قوائم داخلية: إلغاء نقاط/أرقام قوائم المقال */
.mt-kit-list,
.article-body .mt-kit-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important
}

.mt-kit-list > li,
.article-body .mt-kit-list > li {
    padding: 0 !important;
    margin: 0;
    counter-increment: none
}

.article-body .mt-kit-list > li::before,
.article-body .mt-kit-list > li::after {
    content: none !important;
    display: none !important
}

/* آخر فقرة داخل المحتوى الحر لا تحتاج هامشاً سفلياً */
:is(.mt-step__body, .mt-ostab, .mt-faq__a) > :last-child {
    margin-bottom: 0 !important
}

/* ======================= 1) بطاقة الجهاز ======================= */
.mt-dcard {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--k-bd);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(var(--k-prgb), .07), transparent 60%), var(--k-bg)
}

.mt-dcard__im {
    position: relative;
    width: 150px;
    aspect-ratio: 3/4;
    border-radius: 14px;
    background: var(--k-soft);
    display: grid;
    place-items: center;
    overflow: hidden
}

.mt-dcard__im img,
.article-body .mt-dcard__im img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    margin: 0 !important;
    border-radius: 0
}

.mt-dcard__tag { font-size: .75rem; font-weight: 800; color: var(--k-pdk) }
.mt-dcard__name { font-size: 1.3rem; font-weight: 900; line-height: 1.4; color: var(--k-ti) }
.mt-dcard__meta { font-size: .84rem; color: var(--k-mu); margin-bottom: 10px }

.mt-dcard__specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.mt-dcard__spec {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--k-bg);
    border: 1px solid var(--k-bd);
    font-size: .78rem;
    color: var(--k-mu);
    min-width: 0
}

.mt-dcard__spec i { font-style: normal; font-size: 1.15rem; flex: 0 0 auto }
.mt-dcard__spec b { display: block; color: var(--k-ti); font-size: .88rem; line-height: 1.35; unicode-bidi: plaintext }
.mt-dcard__spec span { min-width: 0; overflow-wrap: anywhere }

.mt-dcard__btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px }

.mt-dcard__btn,
.article-body a.mt-dcard__btn,
.article-body a.mt-dcard__btn:hover {
    display: inline-block;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 800;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    border: 1px solid var(--k-p) !important;
    background: var(--k-p);
    color: #06261d
}

.mt-dcard__btn--o,
.article-body a.mt-dcard__btn--o {
    background: transparent;
    border-color: var(--k-bd) !important;
    color: var(--k-ti)
}

.article-body a.mt-dcard__btn:hover { filter: brightness(1.05); background: var(--k-p); color: #06261d }

/* ======================= 2) ملخص المراجعة ======================= */
.mt-rev {
    border: 1px solid var(--k-bd);
    border-radius: 16px;
    overflow: hidden;
    background: var(--k-bg)
}

.mt-rev__top {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    align-items: center;
    padding: 18px
}

.mt-rev__ring {
    width: 130px;
    height: 130px;
    margin: auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--k-p) calc(var(--s, 0) * 1%), var(--k-soft) 0)
}

.mt-rev__ring > div {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: var(--k-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15
}

.mt-rev__ring strong { font-size: 2rem; font-weight: 900; color: var(--k-ti); direction: ltr }
.mt-rev__ring small { font-size: .75rem; color: var(--k-mu); margin-top: 4px }

.mt-rev__subs { display: grid; gap: 7px }

.mt-rev__sub {
    display: grid;
    grid-template-columns: minmax(70px, 110px) 1fr 34px;
    gap: 10px;
    align-items: center;
    font-size: .86rem
}

.mt-rev__bar { height: 8px; border-radius: 6px; background: var(--k-soft); overflow: hidden }
.mt-rev__bar i { display: block; height: 100%; border-radius: 6px; background: var(--k-p) }
.mt-rev__sub em { font-style: normal; font-weight: 800; color: var(--k-ti); text-align: left; direction: ltr }

.mt-rev__pc { display: grid; grid-template-columns: 1fr 1fr }
.mt-rev__pc > div { padding: 14px 18px }
.mt-rev__pro { background: rgba(var(--k-prgb), .08) }
.mt-rev__con { background: rgba(var(--k-redrgb), .06) }
.mt-rev__h { font-weight: 900; color: var(--k-ti); margin-bottom: 4px; font-size: .95rem }
.mt-rev__list li { font-size: .88rem; padding: 2px 0 !important }
.mt-rev__pro .mt-rev__list li::before { content: "✓ " !important; display: inline !important; position: static !important; background: none !important; width: auto !important; height: auto !important; color: var(--k-pdk); font-weight: 900 }
.mt-rev__con .mt-rev__list li::before { content: "✕ " !important; display: inline !important; position: static !important; background: none !important; width: auto !important; height: auto !important; color: var(--k-red); font-weight: 900 }

.mt-rev__verdict { padding: 12px 18px; border-top: 1px solid var(--k-bd); font-size: .92rem }
.mt-rev__verdict::before { content: "الحكم النهائي: "; font-weight: 900; color: var(--k-pdk) }

/* ======================= 3) بطاقة تسريب ======================= */
.mt-leak {
    --lk: var(--k-amb);
    --lkrgb: var(--k-ambrgb);
    border: 1px solid rgba(var(--lkrgb), .5);
    border-radius: 14px;
    overflow: hidden;
    background: var(--k-bg)
}

.mt-leak--official { --lk: var(--k-p); --lkrgb: var(--k-prgb) }
.mt-leak--rumor { --lk: #8b90a8; --lkrgb: 139, 144, 168 }

.mt-leak__h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 16px;
    background: repeating-linear-gradient(-45deg, rgba(var(--lkrgb), .16) 0 12px, rgba(var(--lkrgb), .07) 12px 24px)
}

.mt-leak__badge { font-size: .78rem; font-weight: 800; padding: 2px 10px; border-radius: 20px; background: var(--lk); color: #2b1d00 }
.mt-leak--official .mt-leak__badge { color: #06261d }
.mt-leak--rumor .mt-leak__badge { color: #fff }
.mt-leak__h small { color: var(--k-mu); font-size: .78rem }

.mt-leak__b { padding: 14px 16px }
.mt-leak__t { font-weight: 900; color: var(--k-ti); font-size: 1.05rem; line-height: 1.5 }
.mt-leak__list { margin: 8px 0 10px !important }
.mt-leak__list li { font-size: .92rem; padding: 2px 0 !important }
.mt-leak .mt-leak__list li::before { content: "◆ " !important; display: inline !important; position: static !important; background: none !important; width: auto !important; height: auto !important; color: var(--lk); font-size: .7rem }

.mt-leak__meter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .82rem;
    padding-top: 10px;
    border-top: 1px dashed var(--k-bd)
}

.mt-leak__bars { display: inline-flex; gap: 4px }
.mt-leak__bars i { width: 22px; height: 8px; border-radius: 4px; background: var(--k-soft) }
.mt-leak__bars i.on { background: var(--lk) }
.mt-leak__meter b { color: var(--k-ti) }
.mt-leak__src { margin-inline-start: auto; color: var(--k-mu) }

/* ======================= 4) تبويبات حسب النظام ======================= */
.mt-ostabs {
    border: 1px solid var(--k-bd);
    border-radius: 14px;
    overflow: hidden;
    background: var(--k-bg)
}

.mt-ostabs__list {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--k-soft);
    border-bottom: 1px solid var(--k-bd)
}

.mt-ostabs__list::-webkit-scrollbar { display: none }

.mt-ostabs__tab {
    flex: 1 0 auto;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    padding: 11px 16px;
    font: inherit;
    font-weight: 800;
    font-size: .9rem;
    color: var(--k-mu);
    white-space: nowrap;
    cursor: pointer
}

.mt-ostabs__tab:hover { color: var(--k-ti) }
.mt-ostabs__tab.is-on { color: var(--k-ti); background: var(--k-bg); border-bottom-color: var(--k-p) }
.mt-ostabs__tab:focus-visible { outline: 2px solid var(--k-p); outline-offset: -3px }

.mt-ostab { padding: 16px 18px }
.mt-ostab + .mt-ostab { border-top: 1px solid var(--k-bd) }
.mt-ostabs.is-js .mt-ostab + .mt-ostab { border-top: 0 }
.mt-ostab__title { font-weight: 900; color: var(--k-ti); margin-bottom: 8px }
.mt-ostabs.is-js .mt-ostab__title { display: none }
.mt-ostab[hidden] { display: none }

/* ======================= 5) خطوات مرقّمة ======================= */
.mt-steps__list { counter-reset: mtstep }

.mt-step {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding-bottom: 20px;
    counter-increment: mtstep
}

.mt-step::before {
    content: "";
    position: absolute;
    right: 19px;
    top: 42px;
    bottom: 2px;
    width: 2px;
    background: var(--k-bd)
}

.mt-step:last-child { padding-bottom: 4px }
.mt-step:last-child::before { display: none }

.mt-step__num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
    background: var(--k-soft);
    color: var(--k-ti);
    border: 2px solid var(--k-bd);
    transition: background .2s, border-color .2s;
    position: relative;
    z-index: 1
}

.mt-step__num::before { content: counter(mtstep) }
.mt-step.is-done .mt-step__num { background: var(--k-p); border-color: var(--k-p); color: #06261d }
.mt-step.is-done .mt-step__num::before { content: "✓" }

.mt-step__body { min-width: 0; padding-top: 6px }
.mt-step__title { font-size: 1.05rem; font-weight: 900; line-height: 1.5; color: var(--k-ti); margin-bottom: 4px }
.mt-step__body img { border-radius: 10px }

.mt-step__chk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    border: 1px solid var(--k-bd);
    background: var(--k-bg);
    color: var(--k-ti);
    border-radius: 20px;
    padding: 3px 14px;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer
}

.mt-step.is-done .mt-step__chk { background: rgba(var(--k-prgb), .14); border-color: var(--k-p); color: var(--k-pdk) }

.mt-steps__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: .85rem;
    font-weight: 800;
    color: var(--k-ti)
}

.mt-steps__bar { flex: 1; height: 8px; border-radius: 6px; background: var(--k-soft); overflow: hidden }
.mt-steps__bar i { display: block; height: 100%; width: 0; background: var(--k-p); border-radius: 6px; transition: width .3s }
.mt-steps__n { direction: ltr; min-width: 38px; text-align: left }

.mt-steps__done { display: none; margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: rgba(var(--k-prgb), .14); font-weight: 800; color: var(--k-ti); text-align: center }
.mt-steps__done.is-on { display: block }

/* ======================= 6) يوتيوب خفيف ======================= */
.mt-yt {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--k-bd);
    background: var(--k-bg)
}

.mt-yt__v,
.article-body a.mt-yt__v,
.article-body a.mt-yt__v:hover {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    background: #0e1320;
    color: #fff;
    overflow: hidden;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-decoration: none
}

.mt-yt__v img,
.article-body .mt-yt__v img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
    border-radius: 0
}

.mt-yt__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .65), transparent 40%, transparent 70%, rgba(0, 0, 0, .35)) }

.mt-yt__t {
    position: absolute;
    top: 12px;
    right: 16px;
    left: 16px;
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1.5;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .6)
}

.mt-yt__t small { display: block; font-weight: 500; font-size: .8rem; opacity: .85 }

.mt-yt__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
    border-radius: 14px;
    background: #f00;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
    transition: transform .2s
}

.mt-yt__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    border-left: 18px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent
}

.mt-yt__v:hover .mt-yt__play { transform: translate(-50%, -50%) scale(1.08) }
.mt-yt__dur { position: absolute; bottom: 10px; left: 10px; background: rgba(0, 0, 0, .78); font-size: .75rem; padding: 1px 6px; border-radius: 4px; direction: ltr }

.mt-yt__frame { display: block; width: 100%; aspect-ratio: 16/9; border: 0; background: #000 }

.mt-yt__chh { padding: 8px 16px; font-size: .8rem; font-weight: 800; color: var(--k-mu); background: var(--k-soft); border-top: 1px solid var(--k-bd) }
.mt-yt__ch li { border-top: 1px solid var(--k-bd) }

.mt-yt__ch a,
.article-body .mt-yt__ch a,
.article-body .mt-yt__ch a:hover {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 9px 16px !important;
    color: var(--k-tx);
    text-decoration: none;
    border: 0 !important;
    border-radius: 0 !important;
    background: none;
    font-size: .92rem
}

.article-body .mt-yt__ch a:hover { background: var(--k-soft); color: var(--k-ti) }
.mt-yt__ch time { font-weight: 800; color: var(--k-pdk); direction: ltr; min-width: 46px; text-align: center; font-size: .85rem; background: rgba(var(--k-prgb), .12); border-radius: 6px; padding: 0 6px }
.mt-yt__ch li.is-on a { background: rgba(var(--k-prgb), .1); font-weight: 800; color: var(--k-ti) }

/* ======================= 7) هل نجح الحل؟ ======================= */
.mt-fb {
    border: 1px solid var(--k-bd);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    background: var(--k-bg)
}

.mt-fb__q { font-size: 1.05rem; font-weight: 900; color: var(--k-ti) }
.mt-fb__btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 6px }

.mt-fb__btn {
    border: 1px solid var(--k-bd);
    background: var(--k-bg);
    color: var(--k-ti);
    font: inherit;
    font-weight: 800;
    padding: 7px 22px;
    border-radius: 30px;
    cursor: pointer;
    transition: border-color .2s, background .2s
}

.mt-fb__btn:hover { border-color: var(--k-p); background: rgba(var(--k-prgb), .08) }
.mt-fb__stat { font-size: .8rem; color: var(--k-mu) }
.mt-fb__stat b { color: var(--k-pdk) }
.mt-fb__res { display: none }
.mt-fb.is-voted .mt-fb__ask { display: none }
.mt-fb.is-yes .mt-fb__res--y, .mt-fb.is-no .mt-fb__res--n { display: block }
.mt-fb__ok { font-size: 1.02rem; font-weight: 800; color: var(--k-ti); margin: 0 !important }
.mt-fb__sub { font-size: .82rem; color: var(--k-mu); margin: 4px 0 0 !important }

.mt-fb__note textarea {
    width: 100%;
    min-height: 74px;
    margin: 10px 0;
    border: 1px solid var(--k-bd);
    border-radius: 10px;
    padding: 8px 10px;
    font: inherit;
    font-size: .9rem;
    background: var(--k-soft);
    color: var(--k-tx);
    resize: vertical
}

.mt-fb__send { border: 0; background: var(--k-p); color: #06261d; font: inherit; font-weight: 800; padding: 6px 20px; border-radius: 20px; cursor: pointer }
.mt-fb__send[disabled] { opacity: .5 }

/* ======================= 8) الخلاصة السريعة ======================= */
.mt-tldr {
    position: relative;
    margin-top: 2.2em !important;
    padding: 18px 18px 14px;
    border-radius: 14px;
    background: linear-gradient(to left, rgba(var(--k-prgb), .14), rgba(var(--k-prgb), .04));
    border: 1px solid rgba(var(--k-prgb), .35)
}

.mt-tldr__lb {
    position: absolute;
    top: -12px;
    right: 16px;
    background: var(--k-p);
    color: #06261d;
    font-size: .78rem;
    font-weight: 900;
    padding: 1px 12px;
    border-radius: 20px
}

.mt-tldr__text { font-size: .97rem; color: var(--k-ti) }
.mt-tldr__meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-size: .8rem; color: var(--k-mu) }

.mt-tldr__a,
.article-body a.mt-tldr__a,
.article-body a.mt-tldr__a:hover {
    color: var(--k-pdk);
    font-weight: 800;
    text-decoration: none;
    border: 0 !important;
    padding: 0 !important;
    background: none !important;
    margin-inline-start: auto
}

.article-body a.mt-tldr__a:hover { text-decoration: underline }

/* ======================= 9) أسئلة شائعة ======================= */
.mt-faq { border: 1px solid var(--k-bd); border-radius: 14px; overflow: hidden; background: var(--k-bg) }

.mt-faq__h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-weight: 900;
    color: var(--k-ti);
    background: var(--k-soft)
}

.mt-faq__all { border: 0; background: none; color: var(--k-pdk); font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer }
.mt-faq__item { border-top: 1px solid var(--k-bd) }
.mt-faq__h + .mt-faq__item { border-top: 1px solid var(--k-bd) }

.mt-faq__q {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    font-weight: 800;
    color: var(--k-ti);
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font-size: .95rem
}

.mt-faq__q::-webkit-details-marker { display: none }

.mt-faq__q::after {
    content: "+";
    flex: 0 0 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(var(--k-prgb), .14);
    color: var(--k-pdk);
    font-weight: 900;
    transition: transform .2s
}

.mt-faq__item[open] > .mt-faq__q { color: var(--k-pdk) }
.mt-faq__item[open] > .mt-faq__q::after { transform: rotate(45deg) }
.mt-faq__q:focus-visible { outline: 2px solid var(--k-p); outline-offset: -2px }
.mt-faq__a { padding: 0 16px 14px; font-size: .93rem }

/* ======================= الهاتف ======================= */
@media (max-width: 600px) {
    .mt-dcard, .mt-rev__top { grid-template-columns: 1fr }
    .mt-dcard__im { width: 120px; margin: 0 auto }
    .mt-dcard__specs { grid-template-columns: 1fr 1fr }
    .mt-rev__pc { grid-template-columns: 1fr }
    .mt-ostabs__tab { padding: 10px 12px; font-size: .84rem }
    .mt-ostab { padding: 14px }
    .mt-step { grid-template-columns: 34px 1fr; gap: 10px }
    .mt-step__num { width: 34px; height: 34px }
    .mt-step::before { right: 16px; top: 36px }
    .mt-yt__t { font-size: .95rem }
    .mt-tldr__a, .article-body a.mt-tldr__a { margin-inline-start: 0 }
}

@media (prefers-reduced-motion: reduce) {
    .mt-steps__bar i, .mt-yt__play, .mt-faq__q::after { transition: none }
}