@font-face {
    font-family: Vazirmatn;
    src: url("../fonts/vazirmatn.woff2") format("woff2");
    font-display: swap;
    font-weight: 100 900;
}

:root {
    color-scheme: light;
    --ink: #171025;
    --muted: #5a5270;
    --blue: #6b2fd6;
    --blue-dark: #5420b0;
    --gold: #f0b429;
    --gold-soft: #ffe6a3;
    --canvas: #f7f4fb;
    --white: #fff;
    --line: #e4dcf2;
    --light-blue: #f1e9ff;
    --hero-line: #3a2a58;
    --gutter: clamp(1rem, 4vw, 2rem);
    background: var(--canvas);
    color: var(--ink);
    font: 16px / 1.75 Vazirmatn, Tahoma, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { display: flex; flex-direction: column; margin: 0; min-block-size: 100vh; }
main { flex: 1; }
a { color: inherit; }
button, input { font: inherit; }
a, button, input { touch-action: manipulation; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.4; overflow-wrap: anywhere; text-wrap: pretty; }
p { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
[id] { scroll-margin-block-start: 1rem; }

.shell {
    inline-size: min(100% - 2 * var(--gutter), 69rem);
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    z-index: 1;
    inset-block-start: .5rem;
    inset-inline-start: var(--gutter);
    padding: .55rem .9rem;
    background: var(--white);
    border-radius: .5rem;
    transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.site-header { background: var(--white); border-block-end: 1px solid var(--line); }
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: 4.35rem;
    flex-wrap: wrap;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    min-block-size: 44px;
    text-decoration: none;
    font-weight: 750;
}
.brand:hover { color: var(--blue); }
.brand-logo, .hero-logo, .footer-logo {
    display: block;
    border-radius: .55rem;
    object-fit: contain;
    background: #050505;
}
.brand-logo { inline-size: 2.5rem; block-size: 2.5rem; }
.brand-text { white-space: nowrap; }
.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .7rem;
}
.nav-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    padding: .35rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--blue-dark);
    font-size: .9rem;
    font-weight: 650;
    text-decoration: none;
}
.nav-link:hover,
.nav-link:focus-visible {
    border-color: var(--blue);
    background: var(--light-blue);
}
.nav-link--external {
    border-color: transparent;
    background: linear-gradient(135deg, #6b2fd6, #8a45ef);
    color: #fff;
}
.nav-link--external:hover,
.nav-link--external:focus-visible {
    background: linear-gradient(135deg, #5420b0, #6b2fd6);
    color: #fff;
}

.home, .detail { padding-block: clamp(1.4rem, 4vw, 3rem) 3.5rem; }
.search-panel {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: clamp(1.4rem, 5vw, 3.8rem);
    border-radius: 1.05rem;
    background:
        radial-gradient(circle at 18% 20%, rgba(240, 180, 41, .18), transparent 28%),
        radial-gradient(circle at 85% 10%, rgba(138, 69, 239, .28), transparent 32%),
        linear-gradient(160deg, #12081f 0%, #1c1033 55%, #241342 100%);
    color: var(--white);
}

.search-panel::before,
.search-panel::after {
    position: absolute;
    z-index: -1;
    display: block;
    border: 1px solid var(--hero-line);
    border-radius: 2rem;
    content: "";
    pointer-events: none;
}

.search-panel::before {
    inset-block-start: -6.2rem;
    inset-inline-end: -2rem;
    inline-size: 17rem;
    block-size: 21rem;
    transform: rotate(-24deg);
    box-shadow: 0 0 0 1.45rem #202c42, 0 0 0 1.5rem var(--hero-line);
}

.search-panel::after {
    inset-block-end: -8.8rem;
    inset-inline-end: 5.5rem;
    inline-size: 12.5rem;
    block-size: 18rem;
    transform: rotate(-24deg);
}

.search-panel-content {
    max-inline-size: 42rem;
    margin-inline: auto;
    text-align: center;
}
.hero-logo {
    inline-size: 4.5rem;
    block-size: 4.5rem;
    margin: 0 auto .9rem;
    border: 1px solid rgba(255, 255, 255, .12);
}
.search-kicker {
    margin-block-end: .55rem;
    color: var(--gold-soft);
    font-size: .92rem;
    font-weight: 650;
}
.search-panel h1 { margin-block-end: .55rem; font-size: clamp(1.85rem, 5vw, 3rem); font-weight: 825; }
.search-lead {
    max-inline-size: 36rem;
    margin-inline: auto;
    margin-block-end: 1.15rem;
    color: #e4d9fb;
    font-size: clamp(.98rem, 2.4vw, 1.08rem);
    line-height: 1.7;
}
.search-panel label { display: inline-block; margin-block-end: .65rem; color: #efe6ff; font-weight: 650; }
#faq-search-form { position: relative; }
.search-box-wrap {
    position: relative;
    z-index: 2;
    max-inline-size: 36rem;
    margin-inline: auto;
}
.faq-suggest {
    position: absolute;
    z-index: 5;
    inset-inline: 0;
    inset-block-start: calc(100% + .35rem);
    max-block-size: min(18rem, 50vh);
    overflow: auto;
    border: 1px solid #40557a;
    border-radius: .75rem;
    background: #121a2b;
    box-shadow: 0 .6rem 1.4rem rgba(8, 12, 24, .35);
    text-align: right;
}
.faq-suggest__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    width: 100%;
    margin: 0;
    padding: .7rem .9rem;
    border: 0;
    border-block-end: 1px solid rgba(255, 255, 255, .08);
    background: transparent;
    color: #f3f6ff;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}
.faq-suggest__item:last-child { border-block-end: 0; }
.faq-suggest__item:hover,
.faq-suggest__item.is-active,
.faq-suggest__item:focus-visible {
    background: rgba(164, 192, 255, .16);
    outline: none;
}
.faq-suggest__title {
    font-size: .95rem;
    font-weight: 650;
    line-height: 1.45;
}
.faq-suggest__meta {
    color: #9eb6e0;
    font-size: .8rem;
    line-height: 1.4;
}
.search-pulse {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: .9rem;
    pointer-events: none;
}
.search-pulse::before,
.search-pulse::after {
    position: absolute;
    inset: -0.4rem;
    border: 2px solid rgba(240, 180, 41, .55);
    border-radius: 1.05rem;
    content: "";
    animation: search-heartbeat 1.7s ease-out infinite;
}
.search-pulse::after {
    border-color: rgba(138, 69, 239, .5);
    animation-delay: .85s;
}
@keyframes search-heartbeat {
    0% { transform: scale(1); opacity: .75; }
    55% { transform: scale(1.08); opacity: 0; }
    100% { transform: scale(1.08); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .search-pulse::before,
    .search-pulse::after { animation: none; opacity: .35; }
}
.search-hint {
    margin-block-start: .85rem;
    color: #cbb9ef;
    font-size: .88rem;
    line-height: 1.55;
}
.search-examples {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .45rem;
    margin-block-start: 1rem;
}
.search-examples-label {
    color: #9eb6e0;
    font-size: .86rem;
    font-weight: 650;
}
.example-chip {
    display: inline-flex;
    align-items: center;
    min-block-size: 36px;
    padding: .28rem .75rem;
    border: 1px solid #40557a;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #e8effc;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.example-chip:hover,
.example-chip:focus-visible {
    border-color: #8eb0ff;
    background: rgba(164, 192, 255, .16);
}
.example-chip--quiet {
    border-color: var(--line);
    background: var(--white);
    color: var(--blue-dark);
}
.example-chip--quiet:hover,
.example-chip--quiet:focus-visible {
    border-color: var(--blue);
    background: var(--light-blue);
}
.search-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem .9rem;
    margin: 1.15rem 0 0;
    padding: 0;
    list-style: none;
    color: #d5c6f2;
    font-size: .86rem;
}
.search-steps li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.search-steps li::before {
    display: inline-grid;
    place-items: center;
    inline-size: 1.2rem;
    aspect-ratio: 1;
    border-radius: 999px;
    background: rgba(164, 192, 255, .18);
    color: #dce7fb;
    font-size: .72rem;
    font-weight: 700;
    content: counter(step);
    counter-increment: step;
}
.search-steps { counter-reset: step; }
.search-steps strong { color: #fff; font-weight: 700; }
.results-intro {
    margin-block: -.35rem 1rem;
    color: var(--muted);
    font-size: .95rem;
}
.state-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-block-start: .85rem;
}
@media (prefers-reduced-motion: reduce) {
    .example-chip { transition: none; }
}
.search-box {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-inline-size: 0;
    padding: .35rem;
    padding-inline-start: 1.1rem;
    border-radius: .72rem;
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 10px 30px rgba(18, 8, 31, .28);
}

.search-box:focus-within { outline: 3px solid #a4c0ff; outline-offset: 4px; }
.search-box input {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 44px;
    padding: .25rem 0;
    border: 0;
    background: transparent;
    color: var(--ink);
}
.search-box input:focus-visible { outline: none; }
.search-box input:placeholder-shown { direction: rtl; text-align: right; }
.search-box input::placeholder { color: var(--muted); }

.search-box button {
    flex: none;
    min-block-size: 44px;
    padding-inline: clamp(.7rem, 2vw, 1.35rem);
    border: 1px solid transparent;
    border-radius: .5rem;
    background: linear-gradient(135deg, #6b2fd6, #8a45ef 55%, #f0b429);
    color: var(--white);
    font-weight: 700;
}
.search-box button:hover { filter: brightness(1.05); }
.search-box button:focus-visible { outline-offset: 2px; }
.search-icon {
    position: relative;
    display: inline-block;
    flex: none;
    inline-size: .82rem;
    block-size: .82rem;
    margin-inline-end: .2rem;
    border: 2px solid var(--muted);
    border-radius: 100%;
}
.search-icon::after {
    position: absolute;
    inset-block-end: -.22rem;
    inset-inline-end: -.31rem;
    inline-size: .38rem;
    block-size: 2px;
    border-radius: 2px;
    background: var(--muted);
    content: "";
    transform: rotate(-45deg);
}

.results { margin-block-start: clamp(1.5rem, 4vw, 2.75rem); }
.results h2, .answers > h2, .question-files h2 {
    margin-block-end: 1rem;
    font-size: clamp(1.2rem, 3vw, 1.55rem);
    font-weight: 750;
}
.question-list, .attachments { margin: 0; padding: 0; list-style: none; }
.question-list {
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--white);
}
.question-list > li + li { border-block-start: 1px solid var(--line); }
.question-list > li:first-child .question-link { border-start-start-radius: .9rem; border-start-end-radius: .9rem; }
.question-list > li:last-child .question-link { border-end-start-radius: .9rem; border-end-end-radius: .9rem; }

.question-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: 4rem;
    padding: clamp(.85rem, 2.5vw, 1.3rem) clamp(.9rem, 2.5vw, 1.55rem);
    text-decoration: none;
}
.question-link:hover { background: #f0f4ff; }
.question-link:focus-visible { position: relative; z-index: 1; outline-offset: -3px; }
.question-link:hover h3, .question-link:focus-visible h3 { color: var(--blue); }
.question-copy { min-inline-size: 0; }
.category { color: var(--blue-dark); font-size: .875rem; font-weight: 650; overflow-wrap: anywhere; }
.question-copy h3 { font-size: clamp(1.02rem, 2vw, 1.2rem); font-weight: 730; }
.question-copy p {
    display: -webkit-box;
    max-inline-size: 70ch;
    overflow: hidden;
    margin-block-start: .2rem;
    color: var(--muted);
    font-size: .94rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.chevron {
    flex: none;
    inline-size: .58rem;
    block-size: .58rem;
    margin-inline: .12rem;
    border-block-end: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    color: var(--blue);
    transform: rotate(45deg);
}
.chevron-back { transform: rotate(225deg); }
.pagination { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: 1rem; }
.pagination a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-block-size: 44px;
    padding: .3rem .8rem;
    border: 1px solid var(--line);
    border-radius: .55rem;
    background: var(--white);
    color: var(--blue-dark);
    font-size: .95rem;
    font-weight: 650;
    text-decoration: none;
}
.pagination a:hover, .attachment:hover { border-color: var(--blue); background: var(--light-blue); }

.detail { max-inline-size: 53rem; }
.back-link, .text-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-block-size: 44px;
    color: var(--blue-dark);
    font-weight: 650;
    text-underline-offset: .21em;
}
.back-link { text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.text-link:hover { color: var(--blue); text-decoration-thickness: 2px; }
.question-header { padding-block: .8rem 1.4rem; border-block-end: 1px solid var(--line); }
.question-header h1 { margin-block-start: .3rem; font-size: clamp(1.65rem, 4.7vw, 2.65rem); font-weight: 800; }
.question-body {
    margin-block-start: .85rem;
    font-size: clamp(1rem, 2.4vw, 1.12rem);
    line-height: 1.8;
    color: var(--muted);
    white-space: pre-wrap;
}
.detail-guide {
    max-inline-size: 42rem;
    margin-block-start: .45rem;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.55;
}
.share-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-block-start: 1rem;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-block-size: 40px;
    padding: .35rem .75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    font-size: .86rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}
.share-btn svg { flex: none; }
.share-btn:hover { filter: brightness(1.03); }
.share-btn--copy { color: var(--blue-dark); }
.share-btn--copy.is-copied { border-color: #16a34a; color: #15803d; background: #f0fdf4; }
.share-btn--telegram { color: #229ed9; border-color: #bfe7f8; background: #f2fbff; }
.share-btn--bale { color: #0f8a5f; border-color: #b7e6d2; background: #f1fbf6; }
.share-btn--whatsapp { color: #128c7e; border-color: #b6e5d9; background: #f1fbf8; }
.share-btn--eitaa { color: #e67e22; border-color: #f5d0a9; background: #fff8f0; }
.answers, .question-files { margin-block-start: 1.5rem; }
.answer, .state {
    padding: clamp(1rem, 3vw, 1.75rem);
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--white);
}
.answer + .answer { margin-block-start: .9rem; }
.answer:target { border-color: var(--blue); }
.answer h3 { margin-block-end: .65rem; font-size: 1rem; }
.answer-text { font-size: 1.02rem; line-height: 1.95; overflow-wrap: anywhere; }
.answer-text:not(.answer-html) { white-space: pre-wrap; }
.answer-html p { margin: 0 0 .75rem; }
.answer-html img,
.answer-html video {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: .55rem;
    margin-block: .55rem;
}
.answer-html table {
    width: 100%;
    border-collapse: collapse;
    margin-block: .75rem;
    font-size: .95rem;
}
.answer-html th,
.answer-html td {
    border: 1px solid var(--line);
    padding: .45rem .6rem;
}
.answer-html a { color: var(--blue); font-weight: 650; }
.vote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .55rem 1rem;
    margin-block-start: 1.1rem;
    padding-block-start: .85rem;
    border-block-start: 1px solid var(--line);
}
.vote-prompt { font-size: .9rem; color: var(--muted); }
.vote-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.vote-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-block-size: 44px;
    padding: .35rem .9rem;
    border: 1px solid transparent;
    border-radius: .65rem;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
}
.vote-btn--like {
    background: #ecfdf3;
    border-color: #86efac;
    color: #15803d;
}
.vote-btn--like:hover { background: #dcfce7; }
.vote-btn--dislike {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}
.vote-btn--dislike:hover { background: #fee2e2; }
.tally { font-variant-numeric: tabular-nums; opacity: .85; }

.related { margin-block-start: 2rem; }
.related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-block-end: .85rem;
}
.related-head h2 {
    margin: 0;
    font-size: clamp(1.1rem, 2.6vw, 1.35rem);
    font-weight: 750;
}
.related-nav { display: flex; gap: .35rem; }
.related-nav-btn {
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--blue-dark);
    cursor: pointer;
}
.related-nav-btn:hover { background: var(--light-blue); }
.related-track {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-block-end: .4rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.related-track:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.related-card {
    flex: 0 0 min(78%, 17.5rem);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-block-size: 8.5rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--white);
    text-decoration: none;
    scroll-snap-align: start;
    box-shadow: 0 6px 18px rgba(23, 16, 37, .04);
}
.related-card:hover { border-color: #c4b0ef; background: #fbf8ff; }
.related-card__cat {
    color: var(--blue-dark);
    font-size: .78rem;
    font-weight: 650;
}
.related-card__title {
    color: var(--ink);
    font-size: .98rem;
    font-weight: 750;
    line-height: 1.45;
}
.related-card__summary {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: .86rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.attachments { display: grid; gap: .55rem; margin-block-start: .9rem; }
.attachments video, .attachments audio { display: block; max-inline-size: 100%; margin-block-end: .35rem; }
.attachments video { inline-size: min(100%, 38rem); aspect-ratio: 16 / 9; border-radius: .55rem; background: var(--ink); }
.attachments audio { min-block-size: 44px; }
.attachment {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    max-inline-size: 100%;
    min-block-size: 44px;
    padding: .45rem .8rem;
    border: 1px solid var(--line);
    border-radius: .55rem;
    background: var(--white);
    color: var(--blue-dark);
    font-weight: 650;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.attachment small { display: block; color: var(--muted); font-weight: 400; }
.download-icon { display: grid; flex: none; place-items: center; inline-size: 1.8rem; aspect-ratio: 1; border-radius: .35rem; background: var(--light-blue); }
.notice { margin-block-start: 1rem; padding: .75rem 1rem; border-radius: .55rem; background: var(--light-blue); color: var(--blue-dark); }
.answer-notice { margin-block: 0 .75rem; }
.state .muted { color: var(--muted); margin-block-start: .15rem; }
.error h1 { margin-block-end: .5rem; font-size: clamp(1.5rem, 4vw, 2.25rem); }
.error a + a { margin-inline-start: .8rem; }
.site-footer { padding-block: 1.25rem; border-block-start: 1px solid var(--line); color: var(--muted); font-size: .87rem; }
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    text-align: center;
}
.footer-logo { inline-size: 1.75rem; block-size: 1.75rem; flex: none; }
.footer-copy a {
    color: var(--blue-dark);
    font-weight: 650;
    text-decoration: none;
}
.footer-copy a:hover { text-decoration: underline; }

@media (max-width: 38rem) {
    .search-panel::before { inset-inline-end: -10rem; }
    .search-panel::after { display: none; }
}

@media (max-width: 24rem) {
    .search-box { gap: .35rem; padding-inline-start: .6rem; }
    .search-icon { display: none; }
}