/* فطرت‌گرام - ظاهر جدید (شیشه‌ای / Liquid Glass)
   بر اساس پروتوتایپ «فطرت‌گرام · ظاهر جدید PWA». این فایل پس از site.css و sidebar.css
   بارگذاری می‌شود و فقط ظاهر را override می‌کند. */

@font-face { font-family: 'Ravi'; src: url('/lib/fonts/ravi/Ravi-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Ravi'; src: url('/lib/fonts/ravi/Ravi-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Ravi'; src: url('/lib/fonts/ravi/Ravi-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Ravi'; src: url('/lib/fonts/ravi/Ravi-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Ravi'; src: url('/lib/fonts/ravi/Ravi-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

/* ارقام فارسی در همه جا: ارقام لاتین (0-9) با فونت FaNum ایران‌سنس به‌صورت ۰-۹ نمایش داده می‌شوند */
@font-face { font-family: 'FaDigits'; src: url('/lib/fonts/iransans-farsi-numerals-5.5-web/fonts/woff2/IRANSansWeb(FaNum).woff2') format('woff2'); font-weight: 400; unicode-range: U+0030-0039; font-display: swap; }
@font-face { font-family: 'FaDigits'; src: url('/lib/fonts/iransans-farsi-numerals-5.5-web/fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'); font-weight: 500 600; unicode-range: U+0030-0039; font-display: swap; }
@font-face { font-family: 'FaDigits'; src: url('/lib/fonts/iransans-farsi-numerals-5.5-web/fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'); font-weight: 700 900; unicode-range: U+0030-0039; font-display: swap; }

:root {
    --fg: #0f2242;
    --sub: #4b5e7e;
    --accent: #2560c9;
    --on: #ffffff;
    --ink: #0f2242;
    --ink-on: #ffffff;
    --surface: rgba(255,255,255,.62);
    --glass: rgba(255,255,255,.55);
    --glass-line: rgba(255,255,255,.65);
    --line: rgba(37,96,201,.14);
    --hl: inset 0 1px 0 rgba(255,255,255,.85);
    --shadow: 0 10px 30px rgba(37,96,201,.12);
    --danger: #c62828;
    --danger-bg: rgba(217,45,32,.1);
    color-scheme: light;
    --grad: radial-gradient(120% 55% at 100% 0%, #c6dcfd 0%, rgba(198,220,253,0) 60%),
            radial-gradient(90% 45% at 0% 45%, #d9e8ff 0%, rgba(217,232,255,0) 70%),
            linear-gradient(180deg, #f0f6ff 0%, #dce8fb 100%);
}

/* حالت تیره: خودکار از تنظیم سیستم، مگر کاربر دستی «روشن» را انتخاب کرده باشد؛ یا دستی «تیره» */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --fg: #eaf1ff;
        --sub: #a9b8d4;
        --accent: #7cb4ff;
        --on: #0a1530;
        --ink: #eaf1ff;
        --ink-on: #0a1530;
        --surface: rgba(255,255,255,.08);
        --glass: rgba(28,36,54,.55);
        --glass-line: rgba(255,255,255,.1);
        --line: rgba(255,255,255,.12);
        --hl: inset 0 1px 0 rgba(255,255,255,.08);
        --shadow: 0 10px 30px rgba(0,0,0,.35);
        --grad: radial-gradient(120% 55% at 100% 0%, #1e3f7d 0%, rgba(30,63,125,0) 60%),
                radial-gradient(90% 45% at 0% 50%, #15306a 0%, rgba(21,48,106,0) 70%),
                linear-gradient(180deg, #0c1832 0%, #0a1224 100%);
        --sk-base: rgba(255,255,255,.07);
        --sk-hi: rgba(255,255,255,.16);
        --danger: #ff8a80;
        --danger-bg: rgba(255,138,128,.12);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --fg: #eaf1ff;
    --sub: #a9b8d4;
    --accent: #7cb4ff;
    --on: #0a1530;
    --ink: #eaf1ff;
    --ink-on: #0a1530;
    --surface: rgba(255,255,255,.08);
    --glass: rgba(28,36,54,.55);
    --glass-line: rgba(255,255,255,.1);
    --line: rgba(255,255,255,.12);
    --hl: inset 0 1px 0 rgba(255,255,255,.08);
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --grad: radial-gradient(120% 55% at 100% 0%, #1e3f7d 0%, rgba(30,63,125,0) 60%),
        radial-gradient(90% 45% at 0% 50%, #15306a 0%, rgba(21,48,106,0) 70%),
        linear-gradient(180deg, #0c1832 0%, #0a1224 100%);
    --sk-base: rgba(255,255,255,.07);
    --sk-hi: rgba(255,255,255,.16);
    --danger: #ff8a80;
    --danger-bg: rgba(255,138,128,.12);
    color-scheme: dark;
}

/* ---------- پایه ---------- */
html { background: var(--grad); background-attachment: fixed; min-height: 100%; }

body,
body.b-channel,
body.b-white-692 {
    font-family: 'FaDigits', 'Ravi', 'IRANSans', system-ui, sans-serif !important;
    font-weight: 400;
    color: var(--fg);
    background: transparent !important;
}

h1, h2, h3, h4, h5, h6, .btn, button, input, select, textarea, label,
.popover, .tooltip, .modal, .dropdown-menu { font-family: inherit; }
.modal, .popover, .tooltip, .dropdown-menu, .jconfirm, .jconfirm-box { font-family: 'FaDigits', 'Ravi', 'IRANSans', system-ui, sans-serif !important; }
h1, h2, h3 { font-weight: 700; }
a { color: var(--accent); }
.text-muted, .text-secondary { color: var(--sub) !important; }

.glass-card,
post,
.modal-content,
.list-group-item {
    background: var(--glass);
    border: .5px solid var(--glass-line);
    box-shadow: var(--hl), var(--shadow);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
}

/* ---------- نوار بالا ---------- */
header .header {
    margin: 10px auto 0;
    height: 3.5rem;
    background: var(--glass);
    border: .5px solid var(--glass-line);
    border-radius: 28px;
    box-shadow: var(--hl), var(--shadow);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    width: calc(100% - 24px);
}

header .title {
    color: var(--fg);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.3px;
}

.menu, .header .menu { color: var(--fg); }

/* ---------- محتوا ---------- */
main { padding-top: 5.2rem; padding-bottom: 6.5rem; }

post {
    border-radius: 30px;
    background: var(--glass);
    padding: 14px 14px 4px;
    margin-bottom: 14px;
    color: var(--fg);
}

post h1, post h2 { font-weight: 700; line-height: 1.7; }
post img, post video, post .post-media { border-radius: 22px; }
post author img, div.comment img { border-radius: 50%; }
.post-tags a, .post-cats a, a.tag, .tag {
    background: var(--surface);
    border: .5px solid var(--glass-line);
    border-radius: 14px;
    color: var(--accent);
}

body.b-channel post { box-shadow: var(--hl), var(--shadow) !important; }
@media (max-width: 692px) {
    .fill post { box-shadow: var(--hl), var(--shadow) !important; }
}

/* ---------- نوار پایین (شناور و شیشه‌ای) ---------- */
footer { bottom: 12px; padding: 0 14px; pointer-events: none; }

footer .keys {
    pointer-events: auto;
    height: 4rem;
    padding: 0 6px;
    align-items: center;
    background: var(--glass);
    border: .5px solid var(--glass-line);
    border-radius: 32px;
    box-shadow: var(--hl), var(--shadow);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
}

footer keys { display: block; width: 100%; }
footer keys > div { display: flex; }

footer div:not(.keys) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; margin: 0; }
footer div:not(.keys) i { font-size: 1.35rem; color: var(--sub) !important; }
footer div:not(.keys) span { color: var(--sub) !important; font-size: .7rem !important; font-weight: 500 !important; }
footer div.active i, footer div.active span { color: var(--accent) !important; }
footer div.active span { font-weight: 700 !important; }

/* دکمه‌ی «ارسال محتوا» به‌صورت حباب برجسته */
footer keys > div.key-compose i {
    width: 52px; height: 52px; margin-top: -22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #fff !important;
    font-size: 1.35rem;
    background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 50%),
                linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff) 0%, var(--accent) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 8px 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
footer keys > div.key-compose span { color: var(--accent) !important; font-weight: 600 !important; }

/* ---------- منوی کناری ---------- */
.sidebar {
    background: var(--glass);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    border-left: .5px solid var(--glass-line);
}
.sidebar > div {
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent));
    border-radius: 0 0 28px 28px;
}
.sidebar .nav a { color: var(--fg); border-radius: 18px; }
.sidebar .nav a:hover { color: var(--accent); }

/* ---------- دکمه‌ها ---------- */
.btn { border-radius: 24px; font-weight: 600; min-height: 44px; }
.btn-info, .btn-primary {
    background: var(--accent);
    border: 0;
    color: var(--on);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn-info:hover, .btn-info:active, .btn-info:focus,
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background: color-mix(in srgb, var(--accent) 88%, #000);
    color: var(--on);
}
.btn-outline-info, .btn-outline-secondary, .btn-outline-primary, .btn-light, .btn-secondary {
    background: var(--surface);
    border: .5px solid var(--glass-line);
    color: var(--fg);
}
.btn-outline-info:hover, .btn-outline-info:active { background: var(--accent); color: var(--on); border-color: var(--accent); }

/* ---------- فرم‌ها ---------- */
.form-control, .form-select, input[type=text], input[type=password], input[type=tel],
input[type=email], input[type=search], input[type=url], textarea, select {
    background: var(--surface);
    border: .5px solid var(--line);
    border-radius: 18px;
    color: var(--fg);
    min-height: 48px;
}
textarea.form-control, textarea { padding: 12px 14px; line-height: 1.9; }
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
    background: var(--surface);
    color: var(--fg);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    outline: none;
}
::placeholder { color: var(--sub); opacity: .8; }

/* ---------- تب‌ها و صفحه‌بندی ---------- */
.nav-tabs, .nav-pills {
    background: var(--glass);
    border: .5px solid var(--glass-line) !important;
    border-radius: 24px;
    padding: 4px;
    box-shadow: var(--hl), var(--shadow);
}
.nav-tabs .nav-link, .nav-pills .nav-link { border: 0; border-radius: 19px; color: var(--sub); font-weight: 500; }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { background: var(--ink); color: var(--ink-on); font-weight: 700; }

.pagination .page-link { border-radius: 14px; border: .5px solid var(--glass-line); background: var(--surface); color: var(--fg); margin: 0 2px; }
.pagination .active .page-link { background: var(--accent); border-color: var(--accent); color: var(--on); }

/* ---------- پنجره‌های مودال ---------- */
.modal-content { border-radius: 28px; color: var(--fg); }
.modal-header, .modal-footer { border-color: var(--line); }
.modal-backdrop.show { opacity: .35; }
.list-group-item { border-radius: 18px !important; margin-bottom: 6px; color: var(--fg); }

/* ---------- نوار کانال‌ها در خانه ---------- */
.channel-bar { padding: 2px 4px 6px; overflow-x: auto; }
.channel-bar img { border: 2.5px solid color-mix(in srgb, var(--accent) 55%, #fff) !important; padding: 2px; background: var(--surface); }
.channel-bar img.border-danger { border-color: var(--accent) !important; }
.channel-bar .badge.bg-danger { background-color: var(--accent) !important; color: var(--on); }

/* ---------- خزنده‌ی کنتراست در حالت کاهش حرکت/شفافیت ---------- */
@media (prefers-reduced-transparency: reduce) {
    header .header, footer .keys, post, .sidebar, .modal-content, .nav-tabs, .nav-pills {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: color-mix(in srgb, var(--surface) 100%, #fff);
    }
}

/* ================= صفحه‌ی اول (فید) ================= */
.text-black, a.text-black { color: var(--fg) !important; }
.gray, .post-pub-info { color: var(--sub) !important; }

post author { display: block; overflow: hidden; padding-bottom: 2px; }
post author img { border: 0; box-shadow: 0 0 0 2px var(--glass-line); }
post author .name { font-weight: 700; font-size: .95rem; }
post author .float-start i { color: var(--sub); font-size: 1.3rem; padding: 8px; }

post h2 { font-size: 1.05rem; line-height: 1.8; padding: .5rem 0 0; }
.post-text { line-height: 1.9; color: var(--fg); }
.post-text .continue, .Reference { color: var(--accent); font-weight: 600; font-size: .85rem; }
.Reference { display: inline-block; margin-top: 4px; }

/* سرفصل‌ها: چیپ رنگی */
.post-cats { display: flex; flex-wrap: wrap; overflow: visible; white-space: normal; margin: 0; gap: 6px; padding: .5rem 0 0; }
.post-cats a.cat {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 0; border-radius: 10px; padding: 1px 10px; text-decoration: none;
}
.post-cats a.cat h3 { margin: 0; font-size: .75rem; font-weight: 600; color: var(--accent); }

/* هشتگ‌ها */
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: .5rem 0 0; }
.post-tags a.tag { padding: 3px 12px; text-decoration: none; }
.post-tags a.tag i { font-size: .7rem; }
.post-tags a.tag h4 { display: inline; margin: 0; font-size: .8rem; font-weight: 500; }

/* نوار کنش‌ها: لایک/دیس‌لایک/نظر/اشتراک به‌صورت قرص، ذخیره به‌صورت دایره‌ی تیره */
post .key { padding: .75rem 0; }
post .key .row { display: flex; flex-direction: row; align-items: center; margin: 0; gap: 6px; }
post .key .row > div { width: auto; padding: 0; max-width: none; }
post .key .row > .col-2 { flex: none; order: 2; margin-inline-start: auto; }
post .key .row > .col-10 { flex: 1; order: 1; display: flex; flex-direction: row; gap: 6px; align-items: center; }
post .key .row > .col-10 > div {
    float: none !important; display: flex; align-items: center; gap: 6px; direction: rtl;
    height: 40px; padding: 0 12px; border-radius: 20px;
    background: var(--surface); border: .5px solid var(--glass-line); color: var(--fg);
    font-size: .8rem; font-weight: 600; cursor: pointer;
}
post .key .row > .col-10 > div br { display: none; }
post .key .row > .col-10 > div i { font-size: 1.1rem; }
post .key .row > .col-10 > div span { color: var(--sub); }
post .key .row > .col-10 > div.on { background: color-mix(in srgb, #e0245e 12%, transparent); color: #d0234f; }
post .key .row > .col-10 > div.on span, post .key .row > .col-10 > div.on i { color: #d0234f; }
post .key .row > .col-2 i {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--ink); color: var(--ink-on); font-size: 1.05rem;
}
post .key .row > .col-2 i.on { background: var(--accent); color: var(--on); }

/* نوار کانال‌ها */
.channel-bar { gap: 4px; scrollbar-width: none; }
.channel-bar::-webkit-scrollbar { display: none; }
.channel-bar > div > i { box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 35%, transparent); border: 0 !important; background-color: var(--accent) !important; }
post:has(> .channel-bar), post.channel-bar-card { padding-bottom: 6px; }

/* خلاصه‌ی متن پست: برش تمیز در پایان خط (به‌جای برش وسط خط).
   Safari (همه‌ی مرورگرهای iPhone) line-clamp را این‌جا (متن پر از <br> داخل flex) اجرا نمی‌کند؛
   max-height سه خط همه‌جا متن را کوتاه نگه می‌دارد (lh: یک خط؛ em: جایگزین مرورگرهای قدیمی) */
p.caption { height: auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 5.7em; max-height: 3lh; }

/* ================= نسخه‌ی دسکتاپ: سه ستون ================= */
.dnav, .dside { display: none; }

@media (min-width: 1100px) {
    :root { --col: 640px; --gap: 24px; --nav-w: 250px; --side-w: 310px; }

    /* ستون وسط */
    main, post, header .header { max-width: var(--col) !important; }
    main { padding-top: 6.2rem; padding-bottom: 2rem; }
    header .header { margin-top: 24px; width: var(--col); height: 4rem; padding: 1.15rem 1.5rem; }
    header .header .menu { display: none; }
    header .title { margin: -4px 0 0; text-align: right !important; font-size: 1.5rem; }
    post { padding: 16px 18px 6px; }
    post h2 { font-size: 1.15rem; }
    .post-text { font-size: .95rem; }
    footer { display: none; }

    /* ستون راست: ناوبری */
    .dnav, .dside {
        display: flex; flex-direction: column; position: fixed; top: 24px; z-index: 6;
        max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: none;
    }
    .dnav {
        right: max(24px, calc(50% - var(--col) / 2 - var(--gap) - var(--nav-w)));
        width: var(--nav-w); gap: 4px; padding: 20px 12px; border-radius: 30px;
        background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow);
        -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    }
    .dnav a { cursor: pointer; text-decoration: none; color: var(--fg); }
    .dnav-brand { display: flex; align-items: center; gap: 10px; padding: 2px 10px 18px; font-size: 1.25rem; font-weight: 800; }
    .dnav-brand img { width: 44px; height: 44px; object-fit: contain; }
    .dnav nav { display: flex; flex-direction: column; gap: 4px; }
    .dnav-item { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 14px; border-radius: 24px; font-size: .95rem; font-weight: 500; }
    .dnav-item i { width: 22px; font-size: 1.2rem; text-align: center; color: var(--sub); }
    .dnav-item:hover { background: var(--surface); }
    .dnav-item.active { background: var(--ink); color: var(--ink-on); font-weight: 700; }
    .dnav-item.active i { color: var(--ink-on); }
    .dnav-compose {
        margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
        border-radius: 24px; background: var(--accent); color: var(--on) !important; font-weight: 700;
        box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
    }
    .dnav-compose:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
    .dnav-me {
        margin-top: 14px; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px;
        border-radius: 24px; background: var(--surface); border: .5px solid var(--glass-line);
    }
    .dnav-me img, .dnav-me > i {
        flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
        display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
        background: linear-gradient(135deg, var(--accent), #6d4fd6); color: #fff;
    }
    .dnav-me span:not(.av) { display: flex; flex-direction: column; min-width: 0; }
    /* کاربر بی‌عکس: حرف اول نام (Helper/Avatar) */
    .dnav-me > .av { width: 40px; height: 40px; font-size: 1.05rem; }
    .dnav-me b { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dnav-me small { font-size: .75rem; color: var(--sub); }

    /* ستون چپ: جستجو و پیوندها */
    .dside { left: max(24px, calc(50% - var(--col) / 2 - var(--gap) - var(--side-w))); width: var(--side-w); gap: 16px; }
    .dside-search { position: relative; margin: 0; }
    .dside-search i { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--sub); z-index: 1; pointer-events: none; }
    .dside-search input {
        width: 100%; height: 52px; border-radius: 26px; padding: 0 48px 0 18px; font-size: .9rem;
        background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow);
        -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    }
    .dside-card {
        display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 30px;
        background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow);
        -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    }
    .dside-card h2 { margin: 0 4px 4px; font-size: 1rem; font-weight: 700; }
    .dside-card a {
        display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; border-radius: 20px;
        background: var(--surface); border: .5px solid var(--glass-line); color: var(--fg); text-decoration: none;
        font-size: .88rem; font-weight: 600; cursor: pointer;
    }
    .dside-card a i {
        flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
    }
    .dside-card a:hover { border-color: var(--accent); }
    .dside-foot { margin: 0; padding: 0 8px; font-size: .75rem; line-height: 2; color: var(--sub); }
    .dside-foot a { color: var(--sub); text-decoration: none; margin-left: 10px; }
    .dside-foot a:hover { color: var(--accent); }

    /* نوار کانال‌ها و پیام شناور ساماندهی */
    .samandehi.home { display: none; }
}

/* عرض ۱۲۰۰ تا ۱۲۹۹: هر سه ستون (ناوبری | پست‌ها | منوی چپ) با ستون‌های باریک‌تر؛ مثل بورد دسکتاپ پروتوتایپ */
@media (min-width: 1200px) and (max-width: 1299px) {
    :root { --col: 600px; --nav-w: 230px; --side-w: 250px; }
}

/* عرض ۱۱۰۰ تا ۱۱۹۹: باز هم هر سه ستون، با ستون‌های باریک‌تر (ناوبری و منوی چپ فشرده‌تر) */
@media (min-width: 1100px) and (max-width: 1199px) {
    :root { --col: 544px; --nav-w: 210px; --side-w: 236px; --gap: 22px; }
    .dside-card a { font-size: .85rem; padding-inline: 10px; gap: 8px; }
    .dnav { padding: 16px 10px; }
    .dnav-brand { padding: 2px 8px 14px; font-size: 1.1rem; }
    .dnav-item { gap: 10px; padding: 0 10px; font-size: .9rem; }
}

/* ================= نزدیک‌تر به طرح: کارت پست ================= */
/* ردیف نویسنده: آواتار | نام + سرفصل | تاریخ | ⋯ */
post author { display: flex; align-items: center; gap: 10px; overflow: visible; }
post author > div { float: none !important; }
post author > div:nth-child(2) { flex: 1; min-width: 0; }
post author img { width: 44px !important; height: 44px !important; max-width: none !important; margin: 0 !important; display: block; object-fit: cover; }
post author .name { line-height: 1.5; margin: 0; font-size: .95rem; }
post author .post-cats { padding: 2px 0 0; gap: 4px; }
post author .post-cats a.cat { display: inline-flex; align-items: center; height: 22px; padding: 1px 10px 0; border-radius: 11px; margin: 0; white-space: nowrap; }
.post-tags a.tag { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 1px 12px 0; white-space: nowrap; }
.post-tags a.tag h4 { line-height: 1; }
post author .post-cats a.cat h3 { font-size: .7rem; line-height: 1; }
post author .author-meta .post-pub-info { margin: 0; font-size: .75rem; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.6; }
post author .author-meta .post-pub-info span:last-child { margin: 0; }
post author > .float-start { margin-inline-start: -6px; }

post h2 { margin: 12px 2px 4px; }
post .files, post .carousel, post img.d-block { border-radius: 22px; overflow: hidden; }

/* اشتراک‌گذاری: دایره در انتهای ردیف، کنار ذخیره */
post .key .row > .col-10 > div:has(.fa-share-alt) {
    margin-inline-start: auto; width: 40px; padding: 0; justify-content: center; border-radius: 50%;
}
post .key .row > .col-10 > div:has(.fa-share-alt) span { display: none; }
post .key .row > .col-2:empty { display: none; }

/* ================= دسکتاپ: جزئیات بیشتر ================= */
.dhead-greet, .dhead-compose { display: none; }

@media (min-width: 1100px) {
    /* سرتیتر بدون کادر، با عنوان بزرگ (مثل طرح) */
    header { position: absolute; }
    header .header {
        background: transparent; border: 0; box-shadow: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
        height: auto; padding: 4px 4px 0; display: flex; align-items: flex-start; gap: 8px;
    }
    header .header .title { flex: 1; margin: 0; padding: 0 !important; font-size: 2.1rem; line-height: 1.25; letter-spacing: -.5px; }
    body:has(.dhead-greet) header .header .title { display: none; }
    .dhead-greet { display: block; flex: 1; font-size: 2.1rem; line-height: 1.3; font-weight: 800; letter-spacing: -.5px; color: var(--fg); }
    .dhead-greet span { color: var(--sub); font-weight: 600; }
    .dhead-compose {
        display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; margin-top: 6px; border-radius: 23px;
        background: var(--accent); color: var(--on) !important; font-size: .9rem; font-weight: 700; cursor: pointer;
        text-decoration: none; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
    }
    header .addKey { position: relative; left: auto; top: auto; margin-top: 6px; font-size: inherit !important; }
    header .addKey .fa-bell {
        width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: var(--ink); color: var(--ink-on); font-size: 1.15rem !important; box-shadow: var(--shadow); cursor: pointer;
    }
    header .addKey .notify-badge {
        position: absolute; top: -1px; left: -1px; margin: 0; width: 14px; height: 14px;
        background: #d92d20; border: 2px solid var(--ink-on); border-radius: 50%;
    }
    .dnav-compose { display: none; }
    main { padding-top: 8.5rem; }

    /* نوار کانال‌ها: کارت‌های شیشه‌ای جدا */
    main > post:has(.channel-bar) { background: transparent; border: 0; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
    .channel-bar { gap: 12px; padding: 2px; }
    .channel-bar > div {
        flex: none; width: 96px; margin: 0 !important; padding: 12px 6px 4px; border-radius: 24px;
        background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow);
        -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); cursor: pointer;
    }
    .channel-bar > div img, .channel-bar > div > i { width: 54px !important; height: 54px !important; margin: 0 auto; }
    .channel-bar > div > i { display: flex; align-items: center; justify-content: center; padding: 0 !important; font-size: 1.3rem !important; }
    .channel-bar > div > div:last-child { font-size: .75rem !important; max-width: 84px !important; margin: 6px auto 4px !important; }

    /* پست‌ها در دسکتاپ کمی بزرگ‌تر */
    post { padding: 16px; }
    .post-text { font-size: .95rem; line-height: 2; }
    post .key .row > .col-10 > div { height: 42px; padding: 0 14px; border-radius: 21px; }
    post .key .row > .col-10 > div:has(.fa-share-alt) { width: 42px; padding: 0; }
    post .key .row > .col-2 i { width: 42px; height: 42px; }
}

/* ================= سرتیتر موبایل مطابق پروتوتایپ =================
   بدون کادر شیشه‌ای: لوگو + عنوان در راست، دکمه‌های دایره‌ای در چپ؛ همراه صفحه اسکرول می‌شود. */
.head-logo, .head-search { display: none; }

@media (max-width: 1099px) {
    header { position: absolute; }
    header .header {
        display: flex; align-items: center; gap: 8px;
        width: 100%; max-width: 680px; height: auto; margin: 0 auto; padding: 12px 16px 12px;
        background: transparent; border: 0; border-radius: 0; box-shadow: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    header .header .title {
        order: 2; margin: 0 0 0 auto !important; padding: 0 !important; text-align: right !important;
        font-size: 22px; font-weight: 800; letter-spacing: -.3px; line-height: 46px; overflow: hidden; text-overflow: ellipsis;
    }
    .head-logo { display: block; order: 1; width: 42px; height: 42px; object-fit: contain; margin-inline-end: 2px; }
    .header:not(.is-home) .title { font-size: 19px; }

    /* دکمه‌های دایره‌ای: جستجو و منو شیشه‌ای، زنگ تیره */
    .head-search, header .header .menu, header .addKey i {
        width: 46px; height: 46px; border-radius: 50%; flex: none;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.15rem !important; color: var(--fg); text-decoration: none; cursor: pointer;
        background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow);
        -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    }
    .head-search { order: 10; }
    header .header .menu { order: 11; padding: 0; }
    header .addKey { order: 12; position: relative; left: auto; top: auto; font-size: inherit !important; }
    header .addKey .fa-bell { background: var(--ink); color: var(--ink-on); border: 0; box-shadow: var(--shadow); }
    header .addKey .notify-badge {
        position: absolute; top: -1px; left: -1px; margin: 0; width: 14px; height: 14px;
        background: #d92d20; border: 2px solid var(--ink-on); border-radius: 50%;
    }

    main { padding-top: 70px; }
}

/* لوگو با رنگ برند: شکل لوگو به‌عنوان ماسک، رنگ از گرادیان آبی تأکید (در حالت تیره هم هماهنگ می‌شود) */
.brand-logo {
    display: block; flex: none; width: 42px; height: 42px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 65%, #5fb4ff) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 80%, #0a1f5c) 100%);
    -webkit-mask: url('/img/logo-glass.png') center / contain no-repeat;
    mask: url('/img/logo-glass.png') center / contain no-repeat;
}
.dnav-brand .brand-logo { width: 44px; height: 44px; }

/* ================= اسکلتون و شیمر (جایگزین لودرها) ================= */
:root { --sk-base: rgba(37,96,201,.08); --sk-hi: rgba(255,255,255,.75); }

.sk {
    display: block; position: relative; overflow: hidden;
    background: var(--sk-base); border-radius: 10px;
}
.sk::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, var(--sk-hi) 50%, transparent 80%);
    transform: translateX(100%);
    animation: sk-shimmer 1.4s ease-in-out infinite;
}
@keyframes sk-shimmer { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
    .sk::after { animation: none; opacity: 0; }
    .sk { animation: sk-pulse 1.6s ease-in-out infinite; }
}
@keyframes sk-pulse { 50% { opacity: .55; } }

.sk-wrap { display: flex; flex-direction: column; gap: 14px; width: 100%; text-align: right; }
.sk-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sk-line { height: 12px; }
.sk-thin { height: 9px; }
.sk-title { height: 16px; margin-top: 4px; }
.sk-pill { height: 20px; border-radius: 10px; }
.sk-circle { flex: none; border-radius: 50%; }
.sk-36 { width: 36px; height: 36px; } .sk-40 { width: 40px; height: 40px; } .sk-44 { width: 44px; height: 44px; }
.w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; }
.sk-wrap .w-50 { width: 50%; } .w-60 { width: 60%; } .sk-wrap .w-75 { width: 75%; } .w-90 { width: 90%; } .sk-wrap .w-100 { width: 100%; }

/* کارت پست */
.sk-post {
    display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 30px;
    background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow);
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    max-width: 720px; width: 100%; margin: 0 auto;
}
.sk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.sk-head .sk-col { gap: 7px; }
.sk-head > .sk-line { align-self: flex-start; margin-top: 6px; }
.sk-media { width: 100%; aspect-ratio: 16 / 10; border-radius: 22px; margin: 2px 0 4px; }
.sk-actions { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.sk-btn { width: 58px; height: 40px; border-radius: 20px; }
.sk-end { margin-inline-start: auto; }

/* نظر */
.sk-comment {
    display: flex; gap: 10px; padding: 12px 14px; border-radius: 24px;
    background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow);
}
.sk-reply { margin-right: 28px; }

/* ردیف فهرست، سرفصل، پیام */
.sk-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 22px; background: var(--surface); border: .5px solid var(--glass-line); }
.sk-tree { display: flex; flex-direction: column; gap: 10px; padding: 6px 4px; }
.sk-indent { margin-right: 22px; }
.sk-chat { display: flex; }
.sk-chat-end { justify-content: flex-end; }
.sk-bubble { width: 68%; height: 54px; border-radius: 20px 20px 6px 20px; }
.sk-chat-end .sk-bubble { width: 52%; border-radius: 20px 20px 20px 6px; }

/* لودرهای کوچک درون‌خطی (نسخه، فهرست گزارش، مجموعه‌ها) */
.sk-inline { display: inline-block; width: 64px; height: 12px; vertical-align: middle; }
.sk-stack { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.sk-stack .sk { height: 40px; border-radius: 16px; }

/* ---------- لودر ناوبری صفحه: نوار شیمر نازک بالای صفحه به‌جای چرخنده ---------- */
#Preloader { pointer-events: none; }
#Preloader .modal-dialog { position: fixed; top: 0; left: 0; right: 0; margin: 0; width: 100% !important; max-width: none; min-height: 0; transform: none !important; }
#Preloader .modal-content { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
#Preloader .modal-body { padding: 0; }
#Preloader .preloader {
    width: 100% !important; height: 3px !important; border-radius: 0; animation: none;
    background: linear-gradient(90deg, transparent, var(--accent), transparent) 0 0 / 40% 100% no-repeat,
                color-mix(in srgb, var(--accent) 18%, transparent);
    animation: sk-bar 1s ease-in-out infinite;
}
@keyframes sk-bar { from { background-position: -40% 0, 0 0; } to { background-position: 140% 0, 0 0; } }
body:has(#Preloader.show) .modal-backdrop { opacity: 0 !important; }

.loading .preloader {
    width: 160px !important; height: 6px !important; border-radius: 3px; animation: sk-bar 1s ease-in-out infinite;
    background: linear-gradient(90deg, transparent, var(--accent), transparent) 0 0 / 40% 100% no-repeat,
                color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ================= منوی همبرگر (کشوی راست) ================= */
.sidebar.smenu {
    top: 10px; bottom: 10px; right: 10px; min-height: 0; height: auto;
    width: min(340px, calc(100vw - 48px)); padding: 16px 14px 18px;
    display: flex; flex-direction: column; gap: 12px;
    border-radius: 32px; border: .5px solid var(--glass-line);
    background: color-mix(in srgb, var(--glass) 70%, transparent);
    box-shadow: var(--hl), 0 24px 60px rgba(10,30,80,.22);
    -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
    scrollbar-width: none; color: var(--fg); text-align: right;
}
.sidebar.smenu::-webkit-scrollbar { display: none; }
.sidebar.sidebar-right.smenu { transform: translate3d(calc(100% + 20px), 0, 0); }
.sidebar.sidebar-right.smenu.sidebar-open { transform: translate3d(0,0,0); z-index: 1050; }
.sidebar.smenu > div, .sidebar.smenu > nav, .sidebar.smenu > a { margin: 0; height: auto; padding: 0; background: none; color: inherit; z-index: auto; }

/* پرده‌ی پشت منو */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 1040; pointer-events: none;
    background: rgba(8,20,50,.28); opacity: 0; transition: opacity 300ms ease;
}
body:has(.sidebar-right.sidebar-open)::after { opacity: 1; }

/* بالا: لوگو + بستن */
.smenu-top { display: flex; align-items: center; gap: 10px; padding: 2px 4px 4px !important; font-size: 1.15rem; font-weight: 800; }
.smenu-top .brand-logo { width: 36px; height: 36px; }
.smenu-close {
    margin-inline-start: auto; width: 44px; height: 44px; border-radius: 50%; padding: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    background: var(--surface); border: .5px solid var(--glass-line); color: var(--fg);
}
.smenu-close:hover { background: var(--ink); color: var(--ink-on); }
.smenu-close i { padding: 0; margin: 0; font-size: inherit; }

/* کارت پروفایل */
.sidebar.smenu > a.smenu-profile {
    display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 14px !important; cursor: pointer;
    border-radius: 26px; text-decoration: none; color: var(--on) !important;
    background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.28) 0, rgba(255,255,255,0) 55%),
                linear-gradient(160deg, color-mix(in srgb, var(--accent) 72%, #6fb6ff), var(--accent) 60%, color-mix(in srgb, var(--accent) 78%, #0a1f5c));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 32%, transparent);
}
.smenu-profile img, .smenu-guest {
    flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,255,255,.7); background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff;
}
.smenu-profile > span:not(.smenu-guest):not(.av) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* کاربر بی‌عکس: حرف اول نام (Helper/Avatar) */
.smenu-profile > .av { width: 48px; height: 48px; font-size: 1.25rem; box-shadow: none; border: 2px solid rgba(255,255,255,.7); }
.smenu-profile b { margin: 0 !important; font-size: .98rem; font-weight: 700; line-height: 1.5; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smenu-profile small { font-size: .76rem; line-height: 1.5; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smenu-profile > i { font-size: .95rem; opacity: .85; }

/* گروه‌های گزینه */
.sidebar.smenu > nav.smenu-group {
    display: flex; flex-direction: column; padding: 6px !important; border-radius: 24px;
    background: var(--surface) !important; border: .5px solid var(--glass-line);
}
.smenu-group a {
    display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 4px 8px; border-radius: 18px;
    color: var(--fg); text-decoration: none; font-size: .9rem; font-weight: 500; cursor: pointer;
}
.smenu-group a + a:not(.d-none) { position: relative; }
.smenu-group a i {
    flex: none; width: 36px; height: 36px; border-radius: 50%; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
    background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
}
.smenu-group a:hover, .smenu-group a:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--fg); font-weight: 600; }
.smenu-group a.smenu-danger { color: var(--danger); }
.smenu-group a.smenu-danger i { background: var(--danger-bg); color: var(--danger); }
.smenu-group:not(:has(a:not(.d-none))) { display: none !important; }

/* پایین: نسخه و نماد */
.sidebar.smenu > .smenu-foot { margin-top: auto; display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; padding: 4px 6px 0 !important; }
.smenu-version { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--sub); }
.smenu-foot .samandehi { margin: 0 auto; }
.smenu-foot .samandehi img { max-height: 64px; border-radius: 12px; }

@media (min-width: 1100px) { .sidebar.smenu { top: 24px; bottom: 24px; right: 24px; } }

/* دسکتاپ: لوگو فقط در ستون ناوبری؛ لوگوی سرتیتر موبایل پنهان (.brand-logo آن را display:block می‌کرد) */
@media (min-width: 1100px) { header .head-logo { display: none; } }

/* ================= کلید حالت نمایش (خودکار / روشن / تیره) ================= */
.theme-switch {
    display: flex; gap: 2px; padding: 4px; border-radius: 22px;
    background: var(--surface); border: .5px solid var(--glass-line);
}
.theme-switch button {
    flex: 1; min-width: 0; height: 38px; padding: 0 6px; border: 0; border-radius: 18px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: transparent; color: var(--sub); font-size: .8rem; font-weight: 500; cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
}
.theme-switch button i, .theme-switch button .ts-sun { font-size: .95rem; }
.theme-switch button .ts-sun { flex: none; width: 1.05em; height: 1.05em; }
.theme-switch button:hover { color: var(--fg); }
.theme-switch button[aria-checked="true"] { background: var(--ink); color: var(--ink-on); font-weight: 700; box-shadow: var(--shadow); }
.theme-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* داخل منوی همبرگر */
.sidebar.smenu > .smenu-theme {
    display: flex; flex-direction: column; gap: 8px; padding: 12px !important; border-radius: 24px;
    background: var(--surface) !important; border: .5px solid var(--glass-line);
}
.smenu-theme-label { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 600; padding: 0 4px; }
.smenu-theme-label i { color: var(--accent); }
.smenu-theme .theme-switch { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* ستون ناوبری دسکتاپ: فقط آیکن */
.dnav-theme { margin-top: 12px; }
.dnav-theme button span { display: none; }
.dnav-theme button { height: 36px; }

/* جابه‌جایی نرم رنگ‌ها هنگام تغییر حالت */
html.theme-anim, html.theme-anim * { transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease !important; }

/* ================= صفحه‌های ورود / ثبت‌نام (body.auth-page) =================
   زمینه‌ی گرادیانی آبی تمام‌صفحه، تصویر سه‌بعدی، تیتر و برگه‌ی شیشه‌ای پایین (آرت‌بورد Login).
   کلاس‌ها عمومی‌اند تا صفحه‌های کد یک‌بارمصرف و رمز عبور هم از آن‌ها استفاده کنند. */
body.auth-page header, body.auth-page footer, body.auth-page .dnav, body.auth-page .dside { display: none !important; }
html:has(body.auth-page) {
    background: linear-gradient(var(--shade, transparent), var(--shade, transparent)),
                radial-gradient(90% 45% at 80% 8%, color-mix(in srgb, #5b97f7 90%, #fff) 0%, transparent 60%),
                radial-gradient(70% 40% at 0% 55%, color-mix(in srgb, #5b97f7 55%, transparent) 0%, transparent 70%),
                linear-gradient(170deg, #5b97f7 0%, #2560c9 42%, #163a8c 100%);
    background-attachment: fixed;
}
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]):has(body.auth-page) { --shade: rgba(4,10,30,.38); } }
html[data-theme="dark"]:has(body.auth-page) { --shade: rgba(4,10,30,.38); }

main.auth {
    position: relative; max-width: 440px; min-height: 100vh; min-height: 100dvh; margin: 0 auto;
    padding: 18px 12px 12px; display: flex; flex-direction: column; color: #fff;
}
.auth a { color: #fff; }
.auth a:focus-visible, .auth button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.auth-top { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.auth-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; }
.auth-brand img { width: 30px; height: 30px; object-fit: contain; }
.auth-ghost, .auth-btn-glass {
    background: rgba(255,255,255,.14); color: #fff !important; border: 1px solid rgba(255,255,255,.28);
}
.auth-ghost { height: 44px; padding: 0 16px; border-radius: 22px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; text-decoration: none; }

.auth-art { flex: none; height: 214px; margin-top: 6px; display: flex; justify-content: center; }
.auth-art svg { max-width: 100%; height: auto; }

.auth-hero { text-align: center; padding: 8px 12px 0; }
.auth-hero h1 { margin: 0; font-size: 32px; line-height: 1.45; font-weight: 500; color: #fff; }
.auth-hero h1 b { font-weight: 800; }
/* اندازه‌ها بر حسب em تا در هر اندازه‌ی تیتر همین تناسب بماند.
   جوهر حروف Ravi بالای جعبه‌ی خط می‌نشیند (سر «ط» و «گ» تا لبه‌ی بالا می‌رسد، پایین ~۰٫۱۶em خالی است)؛
   پس فاصله‌ی داخلی فقط بالا: با line-height 1.25 فاصله‌ی جوهر تا لبه بالا و پایین هر دو ~۰٫۱۶em می‌شود (اندازه‌گیری‌شده) */
.auth-mark {
    display: inline-block; background: #fff; color: #2560c9; font-weight: 800; line-height: 1.25;
    padding: .25em .32em 0; border-radius: .32em; box-shadow: 0 .16em .5em rgba(5,15,50,.2);
}
.auth-hero p { margin: 10px 0 0; font-size: 13px; line-height: 1.9; color: rgba(255,255,255,.86); }

/* برگه‌ی شیشه‌ای */
.auth-sheet {
    position: relative; margin-top: auto; padding: 44px 16px 16px; border-radius: 36px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 20px 50px rgba(5,15,50,.35);
    -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
}
main.auth > .auth-hero { margin-bottom: 52px; } /* جا برای دایره‌ی بالای برگه */
.auth-notch {
    position: absolute; top: -34px; left: 50%; margin-left: -34px; width: 68px; height: 68px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.55);
    background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.22)), color-mix(in srgb, #2560c9 55%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px rgba(5,15,50,.3);
    -webkit-backdrop-filter: blur(40px) saturate(170%); backdrop-filter: blur(40px) saturate(170%);
}
.auth-sheet h2 { margin: 0 0 14px; text-align: center; font-size: 20px; font-weight: 700; color: #fff; }

.auth-field { position: relative; }
.auth-field input, .auth-sheet input.auth-input {
    width: 100%; height: 56px; min-height: 56px; border-radius: 24px; padding: 0 18px 0 56px;
    border: 1px solid rgba(255,255,255,.3) !important; background: rgba(255,255,255,.14) !important;
    color: #fff !important; font-size: 16px; text-align: right;
}
.auth-field input::placeholder { color: rgba(255,255,255,.72); opacity: 1; }
.auth-field input:focus { outline: none; border-color: #fff !important; box-shadow: 0 0 0 3px rgba(255,255,255,.28) !important; }
.auth-clear {
    position: absolute; left: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: #fff; color: #2560c9; display: flex; align-items: center; justify-content: center;
}
.auth-clear[hidden] { display: none; }
.auth-error, .auth-error * { display: block; margin: 6px 8px 0; font-size: 12.5px; color: #ffe1e1 !important; font-weight: 600; }
.auth-error * { margin: 0; }
.auth-field input.input-validation-error { border-color: #ffb4b4 !important; box-shadow: 0 0 0 3px rgba(255,120,120,.3) !important; }
.auth-error:empty { display: none; }
.auth-hint { display: flex; align-items: center; gap: 8px; margin: 10px 6px 16px; font-size: 12.5px; color: rgba(255,255,255,.9); }
.auth-hint svg { opacity: .45; transition: opacity 200ms ease; }
.auth-hint.is-known svg { opacity: 1; }

.auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-btn {
    height: 56px; border-radius: 24px; display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit;
}
.auth-btn-white { background: #fff; color: #2560c9 !important; border: 0; font-size: 16px; font-weight: 800; box-shadow: 0 8px 20px rgba(5,15,50,.25); }
/* حروف Ravi بالای جعبه‌ی خط می‌نشینند؛ فلش کمی بالا می‌رود تا با متن دکمه هم‌تراز دیده شود */
.auth-btn > svg { flex: none; transform: translateY(-2px); }
.auth-btn-white:hover { background: #eef4ff; }
.auth-btn-glass:hover { background: rgba(255,255,255,.22); }
.auth-g { width: 24px; height: 24px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.auth-terms { margin: 14px 0 0; text-align: center; font-size: 11.5px; line-height: 1.9; color: rgba(255,255,255,.82); }
.auth-terms a { font-weight: 600; }

/* دسکتاپ: ستون وسط با کمی فاصله از بالا */
@media (min-width: 700px) {
    main.auth { padding-top: 32px; min-height: 0; }
    main.auth > .auth-sheet { margin-top: 0; }
}

/* تصویر صفحه‌ی اول ورود: کاشی لوگو آرام شناور است و سایه‌اش همراهش کوچک/بزرگ می‌شود */
.auth-art .art-float { animation: art-float 5.5s ease-in-out infinite; }
.auth-art .art-shadow { transform-box: fill-box; transform-origin: center; animation: art-shadow 5.5s ease-in-out infinite; }
@keyframes art-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes art-shadow { 0%, 100% { transform: scale(1); opacity: .2; } 50% { transform: scale(.86); opacity: .12; } }

/* کاشی لوگو بالای صفحه‌های دیگر ورود (تبلت و دسکتاپ؛ جایش را بلوک‌های پاسخ‌گو تعیین می‌کنند) — هم‌شکل تصویر صفحه‌ی اول */
main.auth:not(.auth-landing)::before {
    width: 112px; height: 112px; border-radius: 34px; animation: art-float 5.5s ease-in-out infinite;
    background: url('/img/logo-mark.png') center / 64% no-repeat,
                radial-gradient(120% 70% at 25% 0%, rgba(255,255,255,.3), rgba(255,255,255,0) 60%),
                linear-gradient(135deg, #7cb4ff, #3a78e0 55%, #1f4fb3);
    border: 1.5px solid rgba(255,255,255,.6);
    box-shadow: 0 0 0 12px rgba(255,255,255,.08), 0 22px 44px rgba(5,15,50,.32), inset 0 1px 0 rgba(255,255,255,.55);
}
@media (prefers-reduced-motion: reduce) {
    .auth-art .art-float, .auth-art .art-shadow, main.auth:not(.auth-landing)::before { animation: none; }
}

/* معرفی کوتاه کنار برگه‌ی ورود: فقط در دسکتاپ (پایین‌تر) نمایش داده می‌شود */
.auth-feats { display: none; }

/* صفحه‌ی اول ورود در گوشی و تبلت: بدون اسکرول. صفحه دقیقاً هم‌قد صفحه‌نمایش است و تصویر فقط فضای باقی‌مانده را
   می‌گیرد (حداکثر ۲۱۴، حداقل ۹۰ پیکسل)؛ در گوشی‌های کوتاه مثل iPhone SE تصویر کوچک می‌شود تا برگه‌ی ورود جا شود */
@media (max-width: 999px) {
    main.auth.auth-landing { height: 100vh; height: 100dvh; min-height: 0; }
    main.auth.auth-landing > .auth-art { flex: 1 1 214px; min-height: 90px; max-height: 214px; height: auto; }
    main.auth.auth-landing > .auth-art svg { height: 100%; width: auto; max-width: 100%; }
}
/* گوشی‌های خیلی کوتاه (مثلاً اندروید کوچک با نوار مرورگر): تیتر کوچک‌تر و بدون زیرتیتر تا باز هم اسکرول نخورد */
@media (max-width: 999px) and (max-height: 640px) {
    main.auth.auth-landing { padding-top: 12px; }
    main.auth.auth-landing > .auth-art { min-height: 64px; }
    main.auth.auth-landing .auth-hero h1 { font-size: 26px; }
    main.auth.auth-landing .auth-hero p { display: none; }
}

/* صفحه‌ی ورود/ثبت‌نام در دسکتاپ: دو ستون — تصویر، تیتر و معرفی در یک سو، برگه‌ی ورود در سوی دیگر */
@media (min-width: 1000px) {
    main.auth.auth-landing {
        /* !important: چیدمان عمومی دسکتاپ (≥۱۱۰۰) عرض main را با !important به ستون وسط (--col) محدود می‌کند */
        max-width: 1060px !important; width: 100%; min-height: 100vh; min-height: 100dvh; padding: 28px 40px 40px;
        display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 440px); column-gap: clamp(40px, 5vw, 72px);
        grid-template-areas: "top top" "art sheet" "hero sheet"; grid-template-rows: auto auto 1fr; align-content: center;
    }
    main.auth.auth-landing > .auth-top { grid-area: top; align-self: start; margin-bottom: 36px; }
    main.auth.auth-landing > .auth-art { grid-area: art; height: auto; margin: 0; justify-content: flex-start; position: relative; }
    /* درخشش ملایم پشت تصویر */
    main.auth.auth-landing > .auth-art::before {
        content: ""; position: absolute; inset: -12% 20% -6% -8%; z-index: -1; border-radius: 50%;
        background: radial-gradient(closest-side, rgba(255,255,255,.28), rgba(255,255,255,0)); filter: blur(8px);
    }
    main.auth.auth-landing > .auth-art svg { width: 400px; height: auto; }
    main.auth.auth-landing > .auth-hero { grid-area: hero; text-align: right; padding: 18px 0 0; margin: 0; }
    main.auth.auth-landing .auth-hero h1 { font-size: 46px; line-height: 1.4; }
    main.auth.auth-landing .auth-hero p { font-size: 15px; margin-top: 14px; }

    main.auth.auth-landing .auth-feats { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 28px 0 0; padding: 0; max-width: 460px; }
    .auth-feats li {
        display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 20px;
        background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
        -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    }
    .auth-feats li > span {
        flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
        background: rgba(255,255,255,.95); color: #2560c9; font-size: 1.05rem; box-shadow: 0 6px 16px rgba(5,15,50,.18);
    }
    .auth-feats b { display: block; font-size: 14px; font-weight: 700; color: #fff; }
    .auth-feats small { display: block; font-size: 12.5px; color: rgba(255,255,255,.8); }

    main.auth.auth-landing > .auth-sheet { grid-area: sheet; align-self: center; margin: 0; padding: 56px 26px 24px; border-radius: 40px; }
    main.auth.auth-landing .auth-sheet h2 { font-size: 22px; margin-bottom: 18px; }
}
/* لپ‌تاپ‌های کم‌ارتفاع: تصویر و فاصله‌ها کوچک‌تر تا همه‌چیز بدون اسکرول دیده شود */
@media (min-width: 1000px) and (max-height: 820px) {
    main.auth.auth-landing > .auth-top { margin-bottom: 12px; }
    main.auth.auth-landing > .auth-art svg { width: 300px; }
    main.auth.auth-landing .auth-hero h1 { font-size: 38px; }
    main.auth.auth-landing .auth-feats { gap: 8px; margin-top: 18px; }
    .auth-feats li { padding: 9px 14px; }
}

/* بقیه‌ی صفحه‌های ورود (رمز، کد تأیید، ثبت‌نام، بازیابی، رمز تازه) در دسکتاپ: هم‌زبان با صفحه‌ی اول ورود.
   نوار بالا تمام‌عرض؛ یک سو گوی لوگو و بلوک‌های توضیحی خود صفحه، سوی دیگر برگه‌ی فرم. فقط CSS، بدون تغییر markup */
@media (min-width: 1000px) {
    main.auth:not(.auth-landing) {
        /* !important: چیدمان عمومی دسکتاپ (≥۱۱۰۰) عرض main را با !important محدود می‌کند */
        max-width: 1000px !important; width: 100%; min-height: 100vh; min-height: 100dvh; padding: 28px 40px 40px;
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); column-gap: clamp(40px, 5vw, 72px);
        grid-auto-rows: min-content; align-content: center; row-gap: 0;
    }
    main.auth:not(.auth-landing) > * { grid-column: 1; min-width: 0; }
    main.auth:not(.auth-landing) > .auth-head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 40px; }
    main.auth:not(.auth-landing) > .auth-head h1 { font-size: 20px; }
    /* کاشی لوگو بالای ستون توضیحات (ظاهرش از قانون مشترک main.auth:not(.auth-landing)::before) */
    main.auth:not(.auth-landing)::before { content: ""; grid-column: 1; grid-row: 2; justify-self: start; margin: 0 4px 24px; }
    main.auth:not(.auth-landing) > .auth-sheet { grid-column: 2; grid-row: 2 / span 6; align-self: center; margin: 0; padding: 56px 26px 24px; border-radius: 40px; }
    main.auth:not(.auth-landing) .auth-sheet h2 { font-size: 22px; margin-bottom: 18px; }

    /* بلوک‌های ستون توضیحات: راست‌چین و کمی بزرگ‌تر */
    main.auth:not(.auth-landing) > .auth-card { margin: 0 0 14px; }
    main.auth:not(.auth-landing) > .auth-tips { margin: 0 0 14px; }
    main.auth:not(.auth-landing) > .auth-sent { margin: 0 4px 14px; text-align: right; font-size: 14.5px; }
    main.auth:not(.auth-landing) > .auth-hero-sm { padding: 0; text-align: right; }
    main.auth:not(.auth-landing) > .auth-hero-sm h1 { font-size: 36px; line-height: 1.5; }
    main.auth:not(.auth-landing) > .auth-hero-sm p { font-size: 15px; }
}

/* لپ‌تاپ‌های خیلی کم‌ارتفاع (۷۲۰ و کمتر): فاصله‌ی نوار بالا و تصویر صفحه‌ی اول کمتر */
@media (min-width: 1000px) and (max-height: 760px) {
    main.auth:not(.auth-landing) { padding-top: 18px; padding-bottom: 18px; }
    main.auth:not(.auth-landing) > .auth-head { margin-bottom: 20px; }
    main.auth:not(.auth-landing) > .auth-sheet { padding-top: 46px; }
    main.auth.auth-landing { padding-top: 18px; padding-bottom: 18px; }
}

/* ---------- ورود: رمز عبور و کد یک‌بارمصرف (آرت‌بوردهای Password و Verify) ---------- */
.auth-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.auth-head h1 { margin: 0; font-size: 18px; font-weight: 700; color: #fff; }
.auth-circle {
    width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #fff; color: #2560c9 !important; box-shadow: 0 8px 20px rgba(5,15,50,.25); text-decoration: none;
}

.auth-tabs {
    display: flex; margin: 18px 4px 0; padding: 5px; border-radius: 30px; background: #fff;
    box-shadow: 0 10px 24px rgba(5,15,50,.22);
}
.auth-tabs a {
    flex: 1; height: 48px; border-radius: 25px; display: flex; align-items: center; justify-content: center;
    color: #2560c9 !important; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.auth-tabs a[aria-current="page"] { background: linear-gradient(135deg, #5b97f7, #2560c9); color: #fff !important; font-weight: 700; cursor: default; }

.auth-card {
    margin: 14px 4px 0; padding: 12px 12px 12px 16px; border-radius: 28px; background: #fff; color: #0f2242;
    display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 24px rgba(5,15,50,.22);
}
.auth-avatar {
    flex: none; width: 52px; height: 52px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #5b97f7, #2560c9); color: #fff; font-weight: 800; font-size: 21px;
}
.auth-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.auth-card-text b { font-size: 15px; font-weight: 700; }
.auth-card-text small { font-size: 12.5px; color: #4b5e7e; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-card-btn {
    flex: none; height: 40px; padding: 0 16px; border-radius: 20px; background: #eef3fc; color: #2560c9 !important;
    display: flex; align-items: center; font-size: 13px; font-weight: 700; text-decoration: none;
}
.auth-muted { color: #4b5e7e; font-size: 12.5px; font-weight: 500; }

.auth-tips { list-style: none; margin: 16px 4px 0; padding: 0; display: flex; gap: 8px; }
.auth-tips li {
    flex: 1; border-radius: 22px; padding: 12px; display: flex; flex-direction: column; gap: 6px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
    font-size: 12.5px; font-weight: 600; line-height: 1.6;
}

/* کارت زمان */
.auth-timer { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px 18px; }
.auth-timer-top { display: flex; align-items: baseline; justify-content: space-between; }
.auth-timer-val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.auth-progress {
    --p: 1; position: relative; height: 12px; border-radius: 6px;
    background: linear-gradient(to left, #2560c9 0%, #8b7cf6 40%, #f29ac0 72%, #6fe0d3 100%);
}
.auth-progress::after { /* بخش سپری‌شده کم‌رنگ می‌شود */
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc((1 - var(--p)) * 100%); border-radius: 6px; background: rgba(238,243,252,.82);
    transition: width 1s linear;
}
.auth-progress-knob {
    position: absolute; top: 50%; left: calc((1 - var(--p)) * 100%); z-index: 1; width: 26px; height: 26px; margin: -13px 0 0 -13px;
    border-radius: 50%; background: #2560c9; border: 4px solid #fff; box-shadow: 0 3px 10px rgba(5,15,50,.3);
    transition: left 1s linear;
}
.auth-sent { margin: 18px 20px 0; font-size: 13.5px; line-height: 2; color: rgba(255,255,255,.9); text-align: center; }
.auth-sent b { color: #fff; unicode-bidi: isolate; }
.auth-sent a { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* خانه‌های کد */
.otp { position: relative; }
.otp input {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; cursor: text;
    font-size: 16px; /* جلوگیری از زوم iOS */
}
.otp-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp-boxes span {
    height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 26px; font-weight: 800;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.otp-boxes span.filled { background: rgba(255,255,255,.22); }
.otp-boxes span.cur { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.otp input.input-validation-error + .otp-boxes span { border-color: #ffb4b4; }

/* ردیف پیوندها و دکمه‌ها */
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 4px 14px; font-size: 12.5px; color: rgba(255,255,255,.88); }
.auth-link {
    border: 0; background: transparent; padding: 0; min-height: 40px; display: inline-flex; align-items: center;
    color: #fff !important; font-size: 12.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-family: inherit;
}
.auth-link:disabled { color: rgba(255,255,255,.72) !important; text-decoration: none; cursor: default; font-weight: 600; }
.auth-actions-wide { grid-template-columns: 1fr 1.4fr; }
.auth-actions-one { grid-template-columns: 1fr; }
.auth-eye { color: #2560c9; }

/* موبایل: حداقل فاصله‌ی بالای برگه تا دایره‌اش روی محتوای بالایی نیفتد */
main.auth > .auth-sent, main.auth > .auth-tips { margin-bottom: 56px; }

/* ---------- ثبت‌نام و بازیابی رمز (Register، ForgetPassword، Confirm، ResetPassword) ---------- */
.auth-fields { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.auth-fields .auth-field { margin-top: 8px; }
.auth-label { display: block; margin: 0 8px 6px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.9); }
.auth-fields .auth-field .auth-eye { top: auto; bottom: 10px; }
.auth-field input[readonly] { background: rgba(255,255,255,.06) !important; color: rgba(255,255,255,.85) !important; }
.auth-field input:not([dir="ltr"]) { padding: 0 18px; }

/* ---------- صفحه‌های ورود در گوشی و تبلت: بدون اسکرول در هر ارتفاعی ----------
   صفحه هم‌قد صفحه‌نمایش؛ در ارتفاع‌های کمتر به‌ترتیب فشرده‌تر می‌شود (همه‌ی فیلدها و کارت حساب همیشه می‌مانند).
   سنجش: همه‌ی صفحه‌ها در ۳۶۰×۵۶۰ تا ۸۲۰×۱۱۸۰ بدون اسکرول */
@media (max-width: 999px) {
    main.auth:not(.auth-landing) { min-height: 100vh; min-height: 100dvh; }
}
/* پله‌ی ۱: گوشی‌های معمولی — فقط اندازه‌ها کمی جمع‌وجورتر */
@media (max-width: 999px) and (max-height: 900px) {
    main.auth:not(.auth-landing) { padding-top: 12px; padding-bottom: 10px; }
    main.auth:not(.auth-landing) .auth-circle { width: 44px; height: 44px; }
    main.auth:not(.auth-landing) .auth-card { margin-top: 10px; padding: 9px 10px 9px 14px; border-radius: 24px; }
    main.auth:not(.auth-landing) .auth-avatar { width: 44px; height: 44px; border-radius: 15px; font-size: 18px; }
    main.auth:not(.auth-landing) .auth-tabs { margin-top: 12px; }
    main.auth:not(.auth-landing) .auth-tabs a { height: 42px; }
    main.auth:not(.auth-landing) .auth-timer { gap: 10px; padding: 12px 16px 14px; }
    main.auth:not(.auth-landing) .auth-sent { margin-top: 12px; line-height: 1.85; }
    main.auth:not(.auth-landing) .auth-tips { margin-top: 10px; }
    main.auth:not(.auth-landing) .auth-tips li { padding: 9px 10px; gap: 4px; }
    main.auth:not(.auth-landing) > .auth-hero-sm { padding-top: 10px; }
    /* فاصله‌ی لازم برای دایره‌ی بالای برگه، روی هر عنصری که درست پیش از برگه است */
    main.auth:not(.auth-landing) > :has(+ .auth-sheet) { margin-bottom: 46px; }
    main.auth:not(.auth-landing) .auth-sheet { padding: 38px 14px 14px; }
    main.auth:not(.auth-landing) .auth-notch { width: 60px; height: 60px; top: -30px; margin-left: -30px; }
    main.auth:not(.auth-landing) .auth-sheet h2 { font-size: 18px; margin-bottom: 10px; }
    main.auth:not(.auth-landing) .auth-field input { height: 50px; min-height: 50px; }
    main.auth:not(.auth-landing) .auth-fields { gap: 2px; margin-bottom: 12px; }
    main.auth:not(.auth-landing) .auth-fields .auth-field { margin-top: 4px; }
    main.auth:not(.auth-landing) .auth-label { margin-bottom: 4px; }
    /* دکمه‌ی پاک‌کردن/چشم (۳۶px) وسط فیلد ۵۰ پیکسلی */
    main.auth:not(.auth-landing) .auth-clear { top: 7px; }
    main.auth:not(.auth-landing) .auth-fields .auth-field .auth-eye { top: auto; bottom: 7px; }
    main.auth:not(.auth-landing) .otp-boxes span { height: 52px; font-size: 22px; }
    main.auth:not(.auth-landing) .auth-row { margin: 6px 4px 10px; }
    main.auth:not(.auth-landing) .auth-hint { margin: 8px 6px 12px; }
    main.auth:not(.auth-landing) .auth-btn { height: 50px; }
    main.auth:not(.auth-landing) .auth-seg { margin-bottom: 10px; }
    main.auth:not(.auth-landing) .auth-seg button { height: 38px; }
}
/* پله‌ی ۲: گوشی‌های کوتاه (مثل iPhone SE) — کارت‌های تزئینی «نکته‌ها» پنهان */
@media (max-width: 999px) and (max-height: 780px) {
    main.auth:not(.auth-landing) > .auth-tips { display: none; }
    /* «نکته‌ها» پنهان است ولی هنوز همسایه‌ی برگه است؛ فاصله‌ی دایره به عنصر پیش از آن منتقل می‌شود */
    main.auth:not(.auth-landing) > :has(+ .auth-tips + .auth-sheet) { margin-bottom: 46px; }
    main.auth:not(.auth-landing) .auth-field input { height: 46px; min-height: 46px; }
    main.auth:not(.auth-landing) .auth-clear { top: 5px; }
    main.auth:not(.auth-landing) .auth-fields .auth-field .auth-eye { bottom: 5px; }
    main.auth:not(.auth-landing) .auth-btn { height: 48px; }
    main.auth:not(.auth-landing) .auth-sent { font-size: 13px; }
    main.auth:not(.auth-landing) > .auth-hero-sm h1 { font-size: 22px; }
}
/* پله‌ی ۳: خیلی کوتاه (اندروید کوچک با نوار مرورگر) — عنوان داخل برگه پنهان، همه‌چیز کوچک‌تر */
@media (max-width: 999px) and (max-height: 640px) {
    main.auth:not(.auth-landing) { padding-top: 8px; padding-bottom: 8px; }
    main.auth:not(.auth-landing) .auth-circle { width: 40px; height: 40px; }
    main.auth:not(.auth-landing) .auth-head h1 { font-size: 16px; }
    main.auth:not(.auth-landing) .auth-card { margin-top: 8px; padding: 6px 8px 6px 12px; }
    main.auth:not(.auth-landing) .auth-avatar { width: 38px; height: 38px; border-radius: 13px; font-size: 16px; }
    main.auth:not(.auth-landing) .auth-card-btn { height: 34px; padding: 0 12px; }
    main.auth:not(.auth-landing) .auth-tabs { margin-top: 8px; padding: 4px; }
    main.auth:not(.auth-landing) .auth-tabs a { height: 36px; font-size: 14px; }
    main.auth:not(.auth-landing) .auth-timer { gap: 8px; padding: 9px 14px 11px; }
    main.auth:not(.auth-landing) .auth-sent { margin-top: 8px; font-size: 12.5px; line-height: 1.7; }
    main.auth:not(.auth-landing) > :has(+ .auth-sheet), main.auth:not(.auth-landing) > :has(+ .auth-tips + .auth-sheet) { margin-bottom: 40px; }
    main.auth:not(.auth-landing) .auth-sheet { padding: 32px 12px 12px; border-radius: 30px; }
    main.auth:not(.auth-landing) .auth-notch { width: 52px; height: 52px; top: -26px; margin-left: -26px; }
    main.auth:not(.auth-landing) .auth-notch svg { width: 22px; height: 22px; }
    main.auth:not(.auth-landing) .auth-sheet h2 { display: none; }
    main.auth:not(.auth-landing) .auth-field input { height: 42px; min-height: 42px; border-radius: 20px; font-size: 15px; }
    main.auth:not(.auth-landing) .auth-clear { top: 5px; width: 32px; height: 32px; }
    main.auth:not(.auth-landing) .auth-fields { margin-bottom: 10px; }
    main.auth:not(.auth-landing) .auth-fields .auth-field { margin-top: 2px; }
    main.auth:not(.auth-landing) .auth-label { margin-bottom: 2px; font-size: 12px; }
    main.auth:not(.auth-landing) .auth-fields .auth-field .auth-eye { bottom: 5px; }
    main.auth:not(.auth-landing) .otp-boxes span { height: 46px; font-size: 20px; border-radius: 14px; }
    main.auth:not(.auth-landing) .auth-row { margin: 2px 4px 8px; }
    main.auth:not(.auth-landing) .auth-link { min-height: 32px; }
    main.auth:not(.auth-landing) .auth-hint { margin: 6px 6px 10px; }
    main.auth:not(.auth-landing) .auth-btn { height: 44px; }
    main.auth:not(.auth-landing) .auth-seg button { height: 34px; }
    main.auth:not(.auth-landing) > .auth-hero-sm { padding-top: 4px; }
    main.auth:not(.auth-landing) > .auth-hero-sm h1 { font-size: 20px; }
}

/* تبلت (۷۰۰ تا ۹۹۹): نوار بالا بالای صفحه، بقیه‌ی محتوا در فضای باقی‌مانده وسط؛ ستون پهن‌تر و تصویر بزرگ‌تر */
@media (min-width: 700px) and (max-width: 999px) {
    main.auth { max-width: 540px; padding-top: 28px; padding-bottom: 28px; }
    main.auth > .auth-top, main.auth > .auth-head { margin-bottom: auto; }
    main.auth > .auth-sheet { margin-bottom: auto; }
    main.auth.auth-landing > .auth-art { flex-basis: 290px; max-height: 290px; margin-top: 12px; }
    main.auth.auth-landing .auth-hero h1 { font-size: 40px; }
    main.auth.auth-landing .auth-hero p { font-size: 15px; }
    main.auth.auth-landing > .auth-hero { margin-bottom: 58px; }
    main.auth:not(.auth-landing)::before { content: ""; order: 1; align-self: center; margin: 24px 0 22px; }
    main.auth:not(.auth-landing) > :not(.auth-head) { order: 2; }
    main.auth:not(.auth-landing) > .auth-sheet { order: 3; }
    main.auth:not(.auth-landing) .auth-sheet h2 { font-size: 21px; }
}
/* تبلت‌های کم‌ارتفاع‌تر (مثل ۷۶۸×۱۰۲۴): کاشی لوگو کوچک‌تر تا فرم بلند ثبت‌نام هم بدون اسکرول جا شود */
@media (min-width: 700px) and (max-width: 999px) and (max-height: 1100px) {
    main.auth:not(.auth-landing)::before { width: 88px; height: 88px; border-radius: 27px; margin: 12px 0 14px; box-shadow: 0 0 0 9px rgba(255,255,255,.08), 0 16px 34px rgba(5,15,50,.3), inset 0 1px 0 rgba(255,255,255,.55); }
}

/* سوییچ سه‌گزینه‌ای روی زمینه‌ی آبی */
.auth-seg { display: flex; gap: 2px; padding: 4px; margin-bottom: 12px; border-radius: 24px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); }
.auth-seg button {
    flex: 1; min-width: 0; height: 42px; border: 0; border-radius: 20px; background: transparent;
    color: rgba(255,255,255,.88); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.auth-seg button[aria-checked="true"] { background: #fff; color: #2560c9; font-weight: 800; box-shadow: 0 6px 16px rgba(5,15,50,.2); }
.auth-seg button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.auth-panel[hidden] { display: none; }

/* پیام خطای سرور */
.auth-alert {
    margin: 0 0 14px; padding: 10px 14px; border-radius: 18px; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.8;
    background: rgba(255,90,90,.2); border: 1px solid rgba(255,170,170,.5); color: #fff;
}
.auth-alert-warn { background: rgba(255,196,60,.18); border-color: rgba(255,220,140,.5); }

.auth-hero-sm { padding-top: 22px; }
.auth-hero-sm h1 { font-size: 26px; font-weight: 800; }

/* کد ۴ رقمی: خانه‌ها کمی بزرگ‌تر و وسط */
.otp-4 .otp-boxes { grid-template-columns: repeat(4, 64px); justify-content: center; gap: 12px; }

/* ---------- نوار کانال‌ها (مطابق پروتوتایپ) ----------
   حلقه‌ی گرد با گرادیان رنگ تأکید برای کانال دارای پست جدید، نشان گرد تعداد، نام زیر آن؛
   بدون کارت شیشه‌ای دور آن (فقط در دسکتاپ داخل یک کارت می‌نشیند). این بلوک آخر فایل است تا قاعده‌های قدیمی .channel-bar را بپوشاند. */
main > post.ch-strip-card {
    background: transparent; border: 0; border-radius: 0; box-shadow: none !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 0; margin-top: 0; margin-bottom: 14px; /* حاشیه‌ی چپ و راست را مثل کارت پست‌ها از post می‌گیرد */
    border-bottom: 1px solid var(--line);
}
.ch-strip { display: flex; gap: 14px; overflow-x: auto; padding: 6px 16px 12px; scrollbar-width: none; }
.ch-strip::-webkit-scrollbar { display: none; }
.ch-item {
    flex: none; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--fg); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ch-item:hover { color: var(--fg); text-decoration: none; }
.ch-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 14px; }
.ch-ring {
    position: relative; width: 64px; height: 64px; border-radius: 50%; padding: 3px; display: flex;
    background: var(--line);
}
.ch-item.has-new .ch-ring { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 35%, #fff)); }
.ch-ring img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover; padding: 2px;
    border: 2.5px solid var(--on); background: var(--surface);
}
.ch-initial {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%;
    border: 2.5px solid var(--on); background: var(--surface); color: var(--accent); font-size: 1.35rem; font-weight: 700;
}
.ch-ring-plain { align-items: center; justify-content: center; }
.ch-ring-plain i {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%;
    border: 2.5px solid var(--on); background: var(--surface); color: var(--accent); font-size: 1.3rem; rotate: 180deg;
}
.ch-badge {
    position: absolute; bottom: -3px; left: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
    background: var(--accent); color: var(--on); border: 2px solid var(--on);
    font-size: 11px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.ch-name { font-size: 11.5px; line-height: 1.3; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

@media (min-width: 700px) {
    /* تبلت و دسکتاپ (مثل بورد دسکتاپ پروتوتایپ): هر کانال یک کاشی شیشه‌ای جدا؛ فقط حلقه‌ی رنگی نشانه‌ی پست جدید است */
    main > post.ch-strip-card { margin-bottom: 16px; border-bottom: 0; }
    .ch-strip { gap: 12px; padding: 2px; }
    .ch-item {
        width: 92px; padding: 12px 6px 8px; border-radius: 24px;
        background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow);
        -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    }
    .ch-ring { width: 56px; height: 56px; }
    .ch-name { max-width: 80px; }
    .ch-badge { display: none; }
}

/* ================= ارسال محتوا (آرت‌بورد Compose) ================= */
post.cmp { padding: 18px 16px 16px; }
.cmp-group { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.cmp-label { display: block; float: none; width: auto; margin: 0 2px 8px; padding: 0; font-size: .85rem; font-weight: 600; color: var(--fg); }
.cmp-hint { color: var(--sub); font-weight: 400; }
.cmp-field {
    display: block; width: 100%; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface);
    color: var(--fg); padding: 12px 14px; font-size: .95rem; line-height: 1.8; outline: none; box-shadow: none;
}
.cmp-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.cmp-field::placeholder { color: var(--sub); opacity: .8; }
.cmp-text { min-height: 9rem; resize: vertical; }

.cmp-seg { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.cmp-seg::-webkit-scrollbar { display: none; }
.cmp-wrap { flex-wrap: wrap; overflow: visible; margin-bottom: 8px; }
.cmp-chip {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
    border: 1.5px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--fg);
    font-size: .85rem; font-weight: 500; cursor: pointer;
}
.cmp-chip.on, .cmp-chip[aria-pressed="true"] {
    border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 700;
}
.cmp-add { color: var(--accent); border-style: dashed; }
.cmp-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-start: 2px; border: 0; border-radius: 50%; background: transparent; color: inherit; padding: 0; cursor: pointer; }
.cmp-empty { color: var(--sub); font-size: .85rem; padding: 8px 2px; }

.cmp-emojis { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.cmp-emo { min-width: 40px; min-height: 40px; border: 0; border-radius: 12px; background: var(--surface); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.cmp-emo:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

.cmp-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 92px;
    border: 1.5px dashed var(--line); border-radius: 16px; background: var(--surface); color: var(--sub); font-size: .85rem; cursor: pointer;
}
.cmp-drop i { font-size: 1.6rem; color: var(--accent); }
.cmp-drop:hover { border-color: var(--accent); }
.cmp-files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cmp-file { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--surface); }
.cmp-file-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; }
.cmp-file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmp-file-name { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; }
.cmp-file-size { font-size: .75rem; color: var(--sub); }
.cmp-file-x { flex: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--sub); display: flex; align-items: center; justify-content: center; cursor: pointer; }

.cmp-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: var(--surface); color: var(--sub); font-size: .8rem; line-height: 1.9; }
.cmp-note i { margin-top: 5px; }
.cmp-alert { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--danger-bg); color: var(--danger); font-size: .85rem; }
.cmp-submit {
    display: block; width: 100%; min-height: 52px; border: 0; border-radius: 26px; background: var(--accent); color: var(--on);
    font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}
.cmp-submit:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }

/* ================= ویرایش پروفایل و تغییر رمز (post.cmp.pe) — هم‌زبان با فرم ارسال محتوا ================= */
.pe .cmp-err:empty { display: none; }
.pe .cmp-alert[hidden] { display: none; }
.pe .validation-summary-valid { display: none; }
.pe-photo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 22px; text-align: center; }
.pe-avatar { position: relative; width: 112px; height: 112px; }
.pe-avatar img, .pe-initial {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px var(--glass), 0 0 0 5.5px var(--glass-line), var(--shadow);
}
.pe-avatar img[hidden], .pe-initial[hidden] { display: none; }
.pe-initial { background: linear-gradient(135deg, #5b97f7, #2560c9); color: #fff; font-size: 2.6rem; font-weight: 800; line-height: 1; }
.pe-cam {
    position: absolute; bottom: 2px; left: 2px; width: 38px; height: 38px; border-radius: 50%; margin: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on);
    box-shadow: 0 0 0 3px var(--glass), 0 6px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.pe-cam i { font-size: 1rem; }
#Picture:focus-visible ~ .pe-photo-actions .pe-link:first-child, .pe-cam:hover { outline: 2px solid var(--accent); outline-offset: 2px; }
.pe-photo-actions { display: flex; gap: 6px; }
.pe-link {
    min-height: 36px; padding: 0 14px; margin: 0; border: 0; border-radius: 18px; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; color: var(--accent); font: inherit; font-size: .85rem; font-weight: 700;
}
.pe-link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pe-link[hidden] { display: none; }
.pe-danger { color: var(--danger); }
.pe-danger:hover { background: var(--danger-bg); }
.pe-photo-hint { margin: 0; font-size: .75rem; color: var(--sub); }

.pe-sec { margin: 0 0 18px; padding: 16px 14px 2px; border-radius: 22px; background: var(--surface); border: .5px solid var(--glass-line); }
.pe-sec-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1rem; font-weight: 700; color: var(--fg); }
.pe-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.pe-ic i { font-size: .95rem; }
.pe-sec .cmp-field { background-color: var(--glass); } /* فقط رنگ: shorthand فلش فهرست کشویی (.pe-select) را پاک می‌کرد */
.pe-sec .cmp-note { background: var(--glass); }
.pe-row { display: grid; grid-template-columns: 1fr; column-gap: 12px; }
@media (min-width: 520px) { .pe-row { grid-template-columns: 1fr 1fr; } }
.pe-bio { min-height: 6.5rem; resize: vertical; }
.pe-select {
    appearance: none; -webkit-appearance: none; min-height: 50px; padding-left: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9bb8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 14px center; background-size: 16px;
}
.pe-prefix { position: relative; }
.pe-prefix > span { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: var(--sub); font-weight: 700; pointer-events: none; }
.pe-prefix .cmp-field { padding-left: 32px; }
.pe .cmp-seg { flex-wrap: wrap; }
.pe-secondary {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; margin-top: 10px; border-radius: 25px;
    color: var(--fg) !important; text-decoration: none; font-weight: 700; font-size: .92rem; background: var(--surface); border: .5px solid var(--glass-line);
}
.pe-secondary:hover { border-color: var(--accent); color: var(--accent) !important; }

/* تغییر رمز */
.pe-pw-head { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 14px; border-radius: 18px; background: var(--surface); }
.pe-pw-head p { margin: 0; font-size: .85rem; line-height: 1.9; color: var(--sub); }
.pe-pw-head .pe-ic { width: 44px; height: 44px; border-radius: 14px; }
.pe-pass { position: relative; }
.pe-pass .cmp-field { padding-left: 52px; }
.pe-eye {
    position: absolute; top: 50%; left: 4px; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: transparent; color: var(--sub); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pe-eye:hover, .pe-eye[aria-pressed="true"] { color: var(--accent); }
.pe-meter { display: flex; align-items: center; gap: 10px; margin: 8px 4px 0; min-height: 18px; }
.pe-meter-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pe-meter-bar i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .25s, background .25s; }
.pe-meter-txt { font-size: .75rem; font-weight: 700; min-width: 3em; }
.pe-meter:not([data-lv]), .pe-meter[data-lv="0"] { visibility: hidden; }
.pe-meter[data-lv="1"] i { width: 33%; background: var(--danger); }
.pe-meter[data-lv="2"] i { width: 66%; background: #e0a100; }
.pe-meter[data-lv="3"] i { width: 100%; background: var(--site-green, #1f9d55); }
.pe-meter[data-lv="1"] .pe-meter-txt { color: var(--danger); }
.pe-meter[data-lv="2"] .pe-meter-txt { color: #c98f00; }
.pe-meter[data-lv="3"] .pe-meter-txt { color: var(--site-green, #1f9d55); }
.pe-ok { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; font-size: .88rem; font-weight: 600;
         color: var(--site-green, #1f9d55); background: color-mix(in srgb, var(--site-green, #1f9d55) 12%, transparent); }

/* ================= برگه‌ی انتخاب سرفصل‌ها (پایین صفحه) ================= */
.bg-blur { background: rgba(8,16,36,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.slideUp.catsheet {
    left: 50%; right: auto; width: min(560px, 100%); transform: translateX(-50%);
    bottom: -100vh; max-height: 86vh; display: flex; flex-direction: column;
    padding: 10px 18px 16px; border-radius: 30px 30px 0 0;
    background: color-mix(in srgb, var(--on) 90%, transparent); color: var(--fg);
    border: .5px solid var(--glass-line); border-bottom: 0;
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 -14px 40px rgba(0,0,0,.28);
}
.slideUp.catsheet.show { bottom: 0; }
.slideUp.catsheet::before { width: 44px; height: 5px; background: var(--line); margin: 2px auto 8px; content: ''; border-radius: 3px; }
.catsheet .cs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.catsheet .title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--fg); text-align: right; }
.catsheet .cs-count {
    display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: .75rem; font-weight: 600;
}
.catsheet .cs-selected { min-height: 0; max-height: 2.8rem; overflow: auto; margin: 0 2px 8px; font-size: .78rem; line-height: 1.7; color: var(--sub); }
.catsheet .cs-selected:empty { display: none; }
.catsheet .cs-search { position: relative; margin-bottom: 8px; }
.catsheet .cs-search i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--sub); pointer-events: none; }
.catsheet .cs-search input {
    width: 100%; height: 46px; border: 1.5px solid var(--line); border-radius: 23px; background: var(--surface); color: var(--fg);
    padding: 0 44px 0 16px; font-size: .9rem; outline: none;
}
.catsheet .cs-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.catsheet .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -6px 12px; padding: 0 6px; border: 0 !important; scrollbar-width: thin; max-height: none; }
.catsheet .cs-row {
    display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0 !important; padding: 0 10px !important;
    padding-inline-start: calc(10px + var(--lvl, 0) * 18px) !important; border-radius: 14px; cursor: pointer;
}
.catsheet .cs-row:hover { background: var(--surface); }
.catsheet .cs-row .form-check-input {
    float: none !important; margin: 0 !important; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--sub);
    border-radius: 7px; background-color: transparent; cursor: pointer;
}
.catsheet .cs-row .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.catsheet .cs-row .form-check-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.catsheet .cs-row .form-check-label { flex: 1; margin: 0 !important; padding: 12px 0 !important; font-size: .92rem; color: var(--fg); cursor: pointer; }
.catsheet .cs-row:has(.form-check-input:checked) { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.catsheet .cs-row:has(.form-check-input:checked) .form-check-label { font-weight: 700; }
.catsheet .cs-actions { display: flex; gap: 10px; }
.catsheet .cs-ok, .catsheet .cs-cancel { min-height: 50px; border-radius: 25px; font-size: .95rem; font-weight: 700; cursor: pointer; }
.catsheet .cs-ok { flex: 2; border: 0; background: var(--accent); color: var(--on); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); }
.catsheet .cs-cancel { flex: 1; border: 1.5px solid var(--line); background: transparent; color: var(--fg); }
@media (min-width: 700px) {
    .slideUp.catsheet { bottom: -100vh; border-radius: 30px; }
    .slideUp.catsheet.show { bottom: 5vh; border-bottom: .5px solid var(--glass-line); }
}

/* ---------- پیش‌نمایش فایل‌های ارسال محتوا ---------- */
.cmp-file-ico { border: 0; padding: 0; }
button.cmp-file-ico { cursor: pointer; }
.cmp-file-ico.cmp-thumb { position: relative; width: 56px; height: 56px; overflow: hidden; border-radius: 12px; background: var(--surface); cursor: zoom-in; }
.cmp-thumb img, .cmp-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.cmp-thumb .cmp-play {
    position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: .7rem;
}
.cmp-file-ico:focus-visible, .cmp-file-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cmp-pv { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6,12,28,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cmp-pv[hidden] { display: none; }
.cmp-pv-box { width: min(760px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: color-mix(in srgb, var(--on) 92%, transparent); border: .5px solid var(--glass-line); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.cmp-pv-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; }
.cmp-pv-name { flex: 1; min-width: 0; direction: ltr; text-align: right; font-size: .85rem; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-pv-close { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface); color: var(--fg); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cmp-pv-body { display: flex; align-items: center; justify-content: center; padding: 0 14px 14px; min-height: 0; }
.cmp-pv-body img, .cmp-pv-body video { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 18px; background: #000; }
.cmp-pv-body audio { width: 100%; margin: 14px 0 8px; }
body.cmp-pv-open { overflow: hidden; }

/* ---------- فیلدهای اجباری و پیام‌های خطا (ارسال محتوا) ---------- */
.cmp-req { color: var(--danger); font-weight: 700; margin-inline-start: 2px; }
.cmp-legend { margin: 0 2px 14px; font-size: .78rem; color: var(--sub); }
.cmp-hint { color: var(--sub); font-weight: 400; font-size: .75rem; }

.cmp-err { display: flex; align-items: flex-start; gap: 7px; margin: 8px 4px 0; color: var(--danger); font-size: .8rem; line-height: 1.8; font-weight: 500; }
.cmp-err[hidden] { display: none; }
.cmp-err i { margin-top: 4px; flex: none; }
.cmp-group.cmp-invalid .cmp-field { border-color: var(--danger); background: var(--danger-bg); }
.cmp-group.cmp-invalid .cmp-field:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.cmp-group.cmp-invalid .cmp-add { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.cmp-group.cmp-invalid .cmp-empty { color: var(--danger); }
.cmp-group.cmp-invalid .cmp-label { color: var(--danger); }

.cmp-summary {
    margin: 0 0 18px; padding: 14px 16px; border-radius: 18px; background: var(--danger-bg);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--fg);
}
.cmp-summary[hidden] { display: none; }
.cmp-summary:focus { outline: none; }
.cmp-summary-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .88rem; color: var(--danger); margin-bottom: 8px; }
.cmp-summary ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-sum-item {
    min-height: 36px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); border-radius: 18px;
    background: transparent; color: var(--danger); font-size: .8rem; font-weight: 600; cursor: pointer;
}
.cmp-sum-item:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }

@keyframes cmp-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.cmp-group.cmp-shake { animation: cmp-shake .38s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .cmp-group.cmp-shake { animation: none; } }

/* لیست خالی سرفصل‌ها در حالت عادی دیده نمی‌شود */
.cmp-seg.cmp-wrap:empty { display: none; }

/* ضربه‌ی سریع روی دکمه‌ها: بدون تأخیر و بدون بزرگ‌نمایی دوبار لمس */
.cmp-emo, .cmp-chip, .cmp-drop, .cmp-submit, .cmp-file-x, .cmp-x, .cmp-sum-item { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* دکمه‌ی «ارسال» سرتیتر صفحه‌ی ارسال محتوا (button، نه لینک) */
button.dhead-compose { border: 0; font-family: inherit; }

/* صفحه‌های main.fill روی موبایل: site.css بالا/پایین را فقط ۳٫۵rem می‌کرد و هدر و نوار پایین روی کارت می‌افتادند */
@media (max-width: 576px) {
    main.fill { padding: 5.2rem 5px 6.5rem; }
}

/* ---------- نظرات و فرم نظر (صفحه‌ی پست) ---------- */
main.comment-box-p { padding-bottom: 11.5rem !important; }
.whithoutbullet { width: 100%; padding: 6px 0 10px; }
.whithoutbullet ul { padding: 0; margin: 0; list-style: none; }

div.comment.cm {
    margin: 0 0 10px; padding: 12px 14px 8px; border: .5px solid var(--line); border-radius: 20px;
    background: var(--surface); transition: background-color .6s ease;
}
div.comment.cm:last-child { margin-bottom: 4px; }
.cm-head { display: flex; align-items: center; gap: 10px; }
div.comment.cm img { width: 36px; height: 36px; max-width: 36px; margin: 0; border: 0; object-fit: cover; flex: none; }
.cm-who { min-width: 0; }
.cm-name { font-size: .88rem; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-date { font-size: .7rem; color: var(--sub); }
div.comment.cm > .cm-quote {
    display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 6px 12px; border: 0;
    border-inline-start: 3px solid var(--accent); border-radius: 12px; background: var(--hl); color: var(--sub);
    font-size: .75rem; font-weight: 400; cursor: pointer;
}
.cm-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
div.comment.cm > .cm-text { margin: 10px 0 2px; font-size: .88rem; line-height: 1.9; font-weight: 400; color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-actions { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.cm-act {
    display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 18px;
    background: transparent; color: var(--sub); font: inherit; font-size: .78rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cm-act:hover { background: var(--hl); color: var(--fg); }
.cm-act i.active { color: var(--danger); font-weight: 900; }
.cm-report { margin-inline-start: auto; }
.cm-edited { font-size: .7rem; color: var(--sub); padding: 0 6px; }

/* فرم نظر: نوار شیشه‌ای ثابت بالای نوار پایین */
#col-comments {
    left: 0; right: 0; bottom: 88px; width: auto; padding: 0 14px; background: none; border: 0; pointer-events: none; z-index: 5;
}
#col-comments .comment-box { max-width: 680px; pointer-events: auto; }
#commentForm {
    padding: 8px; border: .5px solid var(--glass-line); border-radius: 28px; background: var(--glass);
    box-shadow: var(--hl), var(--shadow); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
}
.cm-row { display: flex; align-items: flex-end; gap: 8px; }
.cm-input {
    flex: 1; min-width: 0; max-height: 7.5rem; min-height: 44px; padding: 10px 16px; border: .5px solid var(--line); border-radius: 22px;
    background: var(--surface); color: var(--fg); font: inherit; font-size: .9rem; line-height: 1.7; resize: none; outline: none;
}
.cm-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.cm-send {
    flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on);
    font-size: 1.05rem; cursor: pointer; display: grid; place-items: center; touch-action: manipulation;
}
.cm-send i { transform: scaleX(-1); }
.cm-emos { display: none; justify-content: center; gap: 2px; padding: 2px 0 8px; }
#commentForm:focus-within .cm-emos { display: flex; }
.cm-emo { font-size: 1.35rem; line-height: 1; padding: 6px 7px; border-radius: 50%; cursor: pointer; touch-action: manipulation; user-select: none; }
.cm-emo:hover { background: var(--hl); }
.cm-replyto {
    display: flex; align-items: center; gap: 6px; margin: 0 6px 8px; padding: 6px 12px; border-radius: 14px;
    background: var(--hl); color: var(--sub); font-size: .78rem;
}
.cm-replyto.d-none { display: none !important; }
.cm-replyto b { color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reply-cancel { float: none; margin-inline-start: auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--sub); }

@media (min-width: 1100px) {
    #col-comments { left: 50%; right: auto; transform: translateX(-50%); width: calc(var(--col) - 10px); bottom: 20px; padding: 0; }
    main.comment-box-p { padding-bottom: 9rem !important; }
}

/* سرتیتر پست در صفحه‌ی جزئیات: تاریخ و بازدید کنار هم، بدون درهم‌ریختگی جهت اعداد */
main.comment-box-p post author .author-meta .post-pub-info { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
main.comment-box-p post author .post-pub-info span { unicode-bidi: isolate; white-space: nowrap; }

/* نظرات مطابق پروتوتایپ: آواتار | متن | قلب کپسولی؛ پاسخ‌ها با تورفتگی */
div.comment.cm { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 24px; margin: 0 0 10px; background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow); }
div.comment.cm.cm-reply { margin-inline-start: 28px; }
div.comment.cm.cm-reply img { width: 30px; height: 30px; max-width: 30px; }
div.comment.cm img { width: 38px; height: 38px; max-width: 38px; }
.cm-body { flex: 1; min-width: 0; }
.cm-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cm-top .cm-name { font-weight: 700; font-size: .85rem; max-width: 100%; }
.cm-top .cm-date { font-size: .72rem; color: var(--sub); }
div.comment.cm > .cm-body > .cm-text { margin: 2px 0 0; font-size: .85rem; line-height: 1.9; }
.cm-body > .cm-quote { display: block; margin: 6px 0 2px; padding: 3px 10px; border: 0; border-inline-start: 2px solid var(--accent); border-radius: 4px 10px 10px 4px; background: var(--hl); font-size: .74rem; }
.cm-actions { margin-top: 0; gap: 0; }
.cm-act { min-height: 32px; padding: 4px 0; margin-inline-end: 14px; border-radius: 0; font-weight: 600; font-size: .78rem; }
.cm-act:hover { background: transparent; color: var(--fg); }
.cm-report { margin-inline-start: 0; margin-inline-end: 0; padding: 4px 6px; font-weight: 400; }
.cm-edited { font-size: .7rem; color: var(--sub); margin-inline-end: 14px; }
.cm-like {
    flex: none; align-self: flex-start; height: 32px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px;
    border: .5px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--sub); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer;
}
.cm-like i.active { color: #d0234f; font-weight: 900; }
.cm-like:has(i.active) { color: #d0234f; }

/* دکمه‌ی بازگشت سرتیتر و لایت‌باکس پست */
.head-back { display: none; }
@media (max-width: 1099px) {
    .head-back {
        display: flex; order: 0; width: 46px; height: 46px; border-radius: 50%; flex: none; align-items: center; justify-content: center;
        font-size: 1.15rem; color: var(--fg); text-decoration: none; background: var(--glass); border: .5px solid var(--glass-line);
        box-shadow: var(--hl), var(--shadow); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    }
    .head-back + .title { text-align: center !important; margin: 0 auto !important; }
}
@media (min-width: 1100px) {
    .head-back { display: flex; position: absolute; top: 50%; right: -58px; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; align-items: center; justify-content: center; color: var(--fg); background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow); text-decoration: none; }
}
#pbox { position: fixed; inset: 0; z-index: 10000; background: rgba(5, 10, 24, .5); animation: pbox-in .22s ease-out; }
#pbox iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; }
@keyframes pbox-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #pbox { animation: none; } }
html.embed footer, html.embed .dnav, html.embed .dside { display: none !important; }

/* بخش نظرات جدا از کارت پست، مطابق پروتوتایپ */
.cm-section { margin: 18px auto 0; max-width: 100%; }
.cm-title { margin: 0; padding: 0 4px 10px; font-size: 1.05rem; font-weight: 700; }
.cm-title span { color: var(--sub); font-weight: 500; font-size: .88rem; }
.cm-sorts { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.cm-sorts::-webkit-scrollbar { display: none; }
.cm-sort {
    flex: none; height: 38px; padding: 0 16px; border-radius: 19px; border: .5px solid var(--glass-line); background: var(--glass);
    color: var(--fg); font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer;
}
.cm-sort.on { background: var(--accent); border-color: var(--accent); color: var(--on); font-weight: 700; }
.cm-section .whithoutbullet { padding: 0; }
@media (min-width: 1100px) { .cm-section { max-width: var(--col); } }
.cm-body > .cm-quote { border-radius: 0; border-top: 0; border-bottom: 0; border-inline-end: 0; padding: 2px 10px; background: transparent; }

/* صفحه‌ی پست: مثل پروتوتایپ، سرتیتر ثابت و محتوا زیرش اسکرول می‌شود؛ نوار اسکرول پنهان */
html:has(body.post-page) { scrollbar-width: none; }
body.post-page::-webkit-scrollbar, html:has(body.post-page)::-webkit-scrollbar { display: none; }
@media (max-width: 1099px) {
    body.post-page header { position: fixed; top: 0; left: 0; right: 0; z-index: 7; }
    body.post-page header::before {
        content: ""; position: absolute; inset: 0 0 -14px; z-index: -1; pointer-events: none;
        -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
        -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent);
    }
}
@media (min-width: 1100px) {
    /* دکمه‌ی بازگشت داخل خود ستون، اولین آیتم سرتیتر (سمت راست) */
    .head-back { position: static; transform: none; flex: none; margin-top: 4px; margin-inline-end: 4px; }
    .head-back + .title { text-align: right !important; }
}

/* ---------- جستجو ---------- */
post.srch-box { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 4px 0 8px !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.srch-box .input-group { display: flex; flex-direction: row-reverse; align-items: center; position: relative; margin: 0; direction: rtl; }
.srch-box .form-control {
    height: 52px; border-radius: 26px !important; padding: 0 20px 0 52px; border: .5px solid var(--glass-line); background: var(--glass);
    color: var(--fg); font-size: .95rem; box-shadow: var(--hl), var(--shadow); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); width: 100%;
}
.srch-box .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }
.srch-box .input-group-text {
    position: absolute; left: 4px; top: 4px; z-index: 2; width: 44px; height: 44px; margin: 0 !important; padding: 0 !important; border: 0 !important;
    border-radius: 50% !important; background: var(--accent) !important; color: var(--on) !important; display: flex; align-items: center; justify-content: center;
}
.srch-history { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 10px 0 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.srch-history-head { padding: 0 4px 8px; }
.srch-history-head b { font-size: .95rem; }
.srch-history-head .btn { margin: 0; color: var(--danger) !important; font-weight: 600; min-height: 36px; }
.srch-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.srch-chip {
    display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 20px; border: .5px solid var(--glass-line);
    background: var(--glass); color: var(--fg); font-size: .85rem; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    box-shadow: var(--hl);
}
.srch-chip:hover, .srch-chip:focus-visible { border-color: var(--accent); outline: none; }

/* نتایج جستجو */
post:has(#pills-tab), post:has(.search-tab) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.media.search-tab {
    display: flex !important; gap: 8px; overflow-x: auto; margin: 4px 0 12px !important; padding: 0 !important; background: transparent !important; border: 0 !important; scrollbar-width: none;
}
.media.search-tab > div { flex: 1 0 auto; width: auto !important; }
.media.search-tab i {
    display: flex; align-items: center; justify-content: center; width: 100%; min-width: 56px; height: 42px; padding: 0 !important; border-radius: 21px;
    border: .5px solid var(--glass-line); background: var(--glass); color: var(--sub) !important; font-size: 1.1rem !important; box-shadow: var(--hl);
}
.media.search-tab i.active { background: var(--accent); border-color: var(--accent); color: var(--on) !important; }
.nav-pills.search-tab {
    display: flex; margin: 0 0 14px !important; padding: 4px !important; border: .5px solid var(--glass-line) !important; border-radius: 24px;
    background: var(--glass); box-shadow: var(--hl), var(--shadow);
}
.nav-pills.search-tab .nav-item { flex: 1; width: auto !important; padding: 0; }
.nav-pills.search-tab .nav-link {
    height: 38px; display: flex; align-items: center; justify-content: center; padding: 0 4px !important; border: 0 !important; border-radius: 19px !important;
    color: var(--fg); font-size: .75rem; font-weight: 500; background: transparent;
}
.nav-pills.search-tab .nav-link.active { background: var(--accent) !important; color: var(--on) !important; font-weight: 700; }
.tab-content { background: transparent !important; margin: 0 !important; }
.tab-content .myPost {
    display: flex; align-items: center; margin: 0 0 10px; padding: 12px 14px !important; min-height: 64px; border-radius: 24px;
    border: .5px solid var(--glass-line); background: var(--glass); box-shadow: var(--hl), var(--shadow);
}
.tab-content .myPost .one-line { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; white-space: normal; }
.tab-content .myPost .one-line i { color: var(--sub) !important; font-size: 1.1rem !important; flex: none; }
.tab-content .myPost .one-line i.fafr { color: var(--accent) !important; }
.tab-content .myPost .post-title { font-size: .88rem; font-weight: 600; line-height: 1.7; color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tab-content .text-center.p-2 { color: var(--sub); }

/* ================= کشوی پیام‌ها (چپ) هم‌شکل منوی راست ================= */
.sidebar.sidebar-left.smsg {
    top: 10px; bottom: 10px; left: 10px; min-height: 0; height: auto; max-width: none;
    width: min(340px, calc(100vw - 48px)); padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 12px;
    border-radius: 32px; border: .5px solid var(--glass-line); color: var(--fg); text-align: right;
    background: color-mix(in srgb, var(--glass) 70%, transparent);
    box-shadow: var(--hl), 0 24px 60px rgba(10,30,80,.22);
    -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
    transform: translate3d(calc(-100% - 20px), 0, 0); overflow-y: auto; scrollbar-width: none;
}
.sidebar.sidebar-left.smsg.sidebar-open { transform: translate3d(0, 0, 0); z-index: 1050; }
.sidebar.smsg::-webkit-scrollbar { display: none; }
.sidebar.smsg > div, .sidebar.smsg > msg { margin: 0; height: auto; background: none; color: inherit; }
.smsg-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 2px !important; font-size: 1.1rem; font-weight: 800; }
.smsg-top i {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--surface); border: .5px solid var(--glass-line); color: var(--fg); font-size: 1.05rem; margin: 0;
}
.smsg msg { display: block; padding: 0 4px; font-size: .85rem; line-height: 1.9; color: var(--fg); }
.smsg #Chat { margin: 0 !important; }
body:has(.sidebar-left.sidebar-open)::after { opacity: 1; }
@media (min-width: 1100px) { .sidebar.sidebar-left.smsg { top: 24px; bottom: 24px; left: 24px; } }

/* فیلتر نوع رسانه: آیکن + برچسب متنی مثل پروتوتایپ */
.media.search-tab { padding: 0 0 6px !important; }
.media.search-tab > div { flex: none; }
.media.search-tab i { width: auto; min-width: 0; gap: 6px; padding: 0 14px !important; font-size: 1rem !important; cursor: pointer; }
.media.search-tab i::after { content: attr(data-label); font-family: 'FaDigits', 'Ravi', 'IRANSans', system-ui, sans-serif; font-style: normal; font-weight: 500; font-size: .8rem; }
.media.search-tab i.active::after { font-weight: 700; }
.nav-pills.search-tab .nav-link.active { background: var(--ink) !important; color: var(--ink-on) !important; }

/* کارت نتیجه‌ی جستجو مطابق پروتوتایپ: دایره‌ی آیکن | عنوان + نوع | نشان منبع */
.tab-content .myPost.sr { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px !important; }
.sr-ico {
    flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--surface); border: .5px solid var(--glass-line); color: var(--accent); font-size: 1.15rem;
}
.sr-site .sr-ico { color: var(--sub); }
.sr-body { flex: 1; min-width: 0; display: block; }
.tab-content .sr .sr-title { display: block; font-size: .88rem; font-weight: 600; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.sr-meta { display: block; font-size: .75rem; color: var(--sub); }
.sr-src { flex: none; padding: 4px 10px; border-radius: 12px; border: .5px solid var(--line); background: var(--surface); font-size: .72rem; font-weight: 600; color: var(--accent); }
.sr-site .sr-src { color: var(--sub); }

.sr-src { display: inline-flex; align-items: center; gap: 6px; }
.sr-src i { font-size: .95rem; }
.sk-result { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px; margin-bottom: 10px; border-radius: 24px; background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow); }
.sk-result .sk-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sk-46 { width: 46px; height: 46px; flex: none; }
.sk-pill { width: 76px; height: 26px; border-radius: 13px; flex: none; }
/* آیکن‌های نتایج: آبی برای فطرت‌گرام، سبز برای سایت فطرت */
:root { --site-green: #1f7a45; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --site-green: #46d089; } }
:root[data-theme="dark"] { --site-green: #46d089; }
.tab-content .sr .sr-ico i.fal { color: var(--accent) !important; font-size: 1.15rem !important; }
.tab-content .sr.sr-site .sr-ico i.fal { color: var(--site-green) !important; }
.tab-content .sr .sr-src { color: var(--accent); }
.tab-content .sr.sr-site .sr-src, .tab-content .sr.sr-site .sr-src i { color: var(--site-green) !important; }
.tab-content .sr .sr-src i { color: var(--accent) !important; }

/* جعبه‌ی جستجو: دکمه‌ی جستجو همیشه بالای فیلد (حتی در حالت فوکوس) + دکمه‌ی پاک‌کردن */
.srch-box .input-group-text { z-index: 5 !important; }
.srch-box .form-control { padding-left: 56px; }
.srch-box .form-control:has(~ .srch-clear:not([hidden])) { padding-left: 100px; }
.srch-clear {
    position: absolute; left: 52px; top: 8px; z-index: 5; width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: transparent; color: var(--sub); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem;
}
.srch-clear[hidden] { display: none; }
.srch-clear:hover { background: var(--hl); color: var(--fg); }

/* خلاصه‌ی نتایج جستجو */
post.srch-box.is-hidden { display: none !important; }
.srch-sum { margin: 0 0 14px; padding: 12px 12px 12px 14px; border-radius: 26px; background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow); }
.srch-sum[hidden] { display: none; }
.srch-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.srch-sum-head h2 { margin: 0; font-size: 1rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-sum-close {
    flex: none; width: 40px; height: 40px; border-radius: 50%; border: .5px solid var(--glass-line); background: var(--surface); color: var(--fg);
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem;
}
.srch-sum-close:hover { border-color: var(--accent); }
.srch-sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.srch-sum-tile { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border-radius: 18px; background: var(--surface); border: .5px solid var(--glass-line); min-width: 0; }
.sum-label { flex: 1; min-width: 0; font-size: .75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-sum-tile b { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.sum-ring { flex: none; width: 28px; height: 28px; transform: rotate(-90deg); }
.sum-ring circle { fill: none; stroke-width: 4; }
.sum-ring-bg { stroke: var(--line); }
.sum-ring-fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray .4s ease; }
#ringSite { stroke: var(--site-green); }

.sum-label { display: flex; align-items: center; gap: 6px; }
.sum-logo { font-size: 1rem; color: var(--accent); flex: none; }
.sum-site .sum-logo { color: var(--site-green); }

/* حالت بارگذاری کارت خلاصه: اسکلتون به‌جای عدد و حلقه */
.sum-sk { display: none; width: 34px; height: 22px; border-radius: 8px; flex: none; }
.srch-sum.is-loading .sum-sk { display: block; }
.srch-sum.is-loading .srch-sum-tile b, .srch-sum.is-loading .sum-ring { display: none; }
.srch-sum.is-loading .srch-sum-close { opacity: .6; }

/* اطلاعات انتشار کارت پست: تاریخ و بازدید در یک ردیف مرتب، بدون درهم‌ریختگی جهت اعداد */
post author .author-meta .post-pub-info { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px 8px; font-size: .74rem; }
post author .post-pub-info .post-date { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
post author .post-pub-info .post-view { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
post author .post-pub-info .post-view i { font-size: .8rem; opacity: .85; }
post author .post-pub-info .post-date + .post-view::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; margin-inline-end: 4px; }

.srch-results-head { padding: 4px 4px 0; }
.srch-results-head[hidden] { display: none; }
.srch-results-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.srch-results-head h2 span { color: var(--sub); font-weight: 500; font-size: .88rem; }

/* عنوان دو خطی صفحه‌ی جستجو مثل پروتوتایپ (فقط موبایل/تبلت) */
@media (max-width: 1099px) {
    header .header .title:has(.title-sub) { font-size: 1.9rem !important; line-height: 1.25; font-weight: 700; letter-spacing: -.4px; white-space: normal !important; align-self: flex-start; padding-top: 2px !important; }
    header .header:has(.title-sub) { align-items: flex-start; }
}
@media (min-width: 1100px) {
    header .header:has(.title-sub) { height: auto; min-height: 4rem; padding-top: .8rem; padding-bottom: .8rem; }
    header .title:has(.title-sub) { margin: 0 !important; font-size: 1.7rem !important; line-height: 1.3; font-weight: 700; white-space: normal !important; }
    main:has(post.srch-box) { padding-top: 9rem; }
}
@media (max-width: 1099px) { main:has(post.srch-box) { padding-top: 104px; } }

/* جستجو: اکسپلور زیر جعبه‌ی جستجو (پست‌های تصویری/ویدیویی، جدیدترین یا محبوب‌ترین) */
.srch-explore { margin: 6px 0 16px; }
.srch-explore[hidden] { display: none; }
.xp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 10px; }
.xp-head h2 { margin: 0; font-size: .95rem; font-weight: 700; }
.xp-seg { display: inline-flex; padding: 3px; border-radius: 18px; background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl); }
.xp-seg button {
    height: 30px; padding: 0 14px; border: 0; border-radius: 15px; background: transparent; color: var(--sub);
    font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: background .2s, color .2s;
}
.xp-seg button[aria-selected="true"] { background: var(--accent); color: var(--on); }
.xp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 3px; border-radius: 18px; overflow: hidden; }
.xp-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--sk-base); border-radius: 0; }
/* هر ده کاشی، یکی بزرگ (۲×۲) مثل اکسپلور اینستاگرام */
.xp-tile:nth-child(10n+3) { grid-column: span 2; grid-row: span 2; }
.xp-tile img, .xp-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.xp-tile:hover img, .xp-tile:hover video { transform: scale(1.04); }
.xp-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.xp-badge { position: absolute; top: 7px; left: 7px; z-index: 1; color: #fff; font-size: .8rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.xp-meta {
    position: absolute; inset: auto 0 0 0; z-index: 1; display: flex; gap: 10px; justify-content: center; padding: 18px 6px 6px;
    color: #fff; font-size: .75rem; font-weight: 700; background: linear-gradient(transparent, rgba(0,0,0,.55)); opacity: 0; transition: opacity .2s;
}
.xp-meta span { display: inline-flex; align-items: center; gap: 4px; }
.xp-meta i { font-size: .7rem; }
.xp-tile:hover .xp-meta, .xp-tile:focus-visible .xp-meta { opacity: 1; }
.xp-tile:nth-child(10n+3) .xp-meta { opacity: 1; }
.xp-empty { margin: 8px 0 0; text-align: center; color: var(--sub); font-size: .88rem; }
.xp-empty[hidden] { display: none; }
.xp-more { height: 1px; }
@media (hover: none) { .xp-tile:hover img, .xp-tile:hover video { transform: none; } }

/* «ادامه مطلب»: گوشه‌ی کپسولی با فلش + محو شدن ملایم انتهای متن خلاصه */
p.caption { -webkit-mask-image: linear-gradient(#000 58%, rgba(0,0,0,.28)); mask-image: linear-gradient(#000 58%, rgba(0,0,0,.28)); }
.post-text .continue {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin: 8px 0 2px; padding: 0 14px 0 12px !important;
    border-radius: 17px; border: .5px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); font-size: .8rem; font-weight: 700; text-align: initial;
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s ease;
}
.post-text .continue.d-none { display: none !important; }
.post-text .continue::after {
    content: ""; width: 11px; height: 11px; background: currentColor; transition: transform .2s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.post-text .continue:hover, .post-text .continue:active { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.post-text .continue:hover::after { transform: translateY(2px); }

/* ================= مودال گزارش (پست و نظر) ================= */
#report .modal-dialog, #reportcomment .modal-dialog { max-width: 440px; margin-inline: auto; padding-inline: 14px; }
#report .modal-content, #reportcomment .modal-content {
    border: .5px solid var(--glass-line); border-radius: 30px; background: color-mix(in srgb, var(--glass) 88%, var(--bg, transparent));
    box-shadow: var(--hl), 0 30px 70px rgba(5,15,40,.35); overflow: hidden; text-align: right;
    -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
}
#report .modal-header, #reportcomment .modal-header { display: flex !important; align-items: center; justify-content: space-between; padding: 18px 20px 6px !important; border: 0 !important; text-align: right; }
#report .modal-title, #reportcomment .modal-title { margin: 0; font-size: 1.1rem; font-weight: 800; text-align: right; }
#report .modal-header .btn-close, #reportcomment .modal-header .btn-close {
    display: block !important; flex: none; width: 36px; height: 36px; margin: 0 !important; padding: 0 !important; border-radius: 50%; opacity: 1;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a9bb8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / 14px no-repeat; border: .5px solid var(--glass-line);
}
#report .modal-body, #reportcomment .modal-body { padding: 4px 20px 6px; }
#report .modal-body > b, #reportcomment .modal-body > b { display: block; margin-bottom: 10px; font-size: .85rem; font-weight: 500; color: var(--sub); }
#ReportListItem .form-inline { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 11px 14px; border-radius: 16px; border: .5px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
#ReportListItem .form-inline:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
#ReportListItem .form-inline input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; border: 1.5px solid var(--sub); background: transparent; cursor: pointer; display: grid; place-items: center;
}
#ReportListItem .form-inline input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
#ReportListItem .form-inline input[type="checkbox"]:checked::after {
    content: ""; width: 12px; height: 12px; background: var(--on);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
}
#ReportListItem .form-inline label { flex: 1; margin: 0; padding: 0 !important; font-size: .86rem; line-height: 1.7; cursor: pointer; white-space: normal; }
#report .modal-body label[for="txt-rep"] { display: block; margin: 6px 4px 6px; font-size: .82rem; font-weight: 600; color: var(--sub); }
#report textarea, #reportcomment textarea {
    min-height: 92px; padding: 12px 16px; border-radius: 18px; border: .5px solid var(--line); background: var(--surface); color: var(--fg); font-size: .9rem; line-height: 1.8; resize: none; box-shadow: none;
}
#report textarea:focus, #reportcomment textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }
#report .modal-footer, #reportcomment .modal-footer.iOS-btn, #reportcomment .modal-footer {
    display: flex !important; gap: 10px; height: auto !important; overflow: visible !important; padding: 14px 20px 20px !important; border: 0 !important; background: transparent;
}
#report .modal-footer .iOS-btn, #reportcomment .modal-footer.iOS-btn {
    flex: 1; width: auto !important; height: 48px; line-height: 48px; border-radius: 24px; font-size: .92rem; font-weight: 700; text-align: center; margin: 0; padding: 0;
    border: .5px solid var(--glass-line) !important; cursor: pointer;
}
#report #sendrep, #reportcomment #sendrepcom { background: var(--accent); border-color: var(--accent) !important; color: var(--on) !important; }
#report .modal-footer [data-bs-dismiss] { background: var(--surface); color: var(--danger) !important; }
#report .modal-footer .iOS-btn:active, #reportcomment .modal-footer.iOS-btn:active { filter: brightness(.92); }

/* ================= پخش‌کننده‌ی صوت ================= */
.mp-audio {
    display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0; padding: 10px 12px; border-radius: 24px;
    background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow);
}
.mp-audio audio { display: none; }
.mp-btn, .mp-bigplay {
    flex: none; border: 0; border-radius: 50%; background: var(--accent); color: var(--on); display: grid; place-items: center; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.mp-btn { width: 46px; height: 46px; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.mp-btn svg { width: 22px; height: 22px; }
.mp-btn:active, .mp-bigplay:active { transform: scale(.95); }
.mp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; direction: ltr; }
.mp-times { display: flex; justify-content: space-between; font-size: .72rem; color: var(--sub); font-variant-numeric: tabular-nums; }
.mp-seek { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
.mp-seek::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--p), var(--line) var(--p)); }
.mp-seek::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.mp-seek::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.mp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.mp-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }
.mp-seek:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ================= پخش‌کننده‌ی ویدیو ================= */
.mp-video { position: relative; width: 100%; margin: 6px 0; border-radius: 24px; overflow: hidden; background: #0b1226; aspect-ratio: 16 / 9; box-shadow: var(--hl), var(--shadow); }
.mp-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b1226; }
.mp-bigplay {
    position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; background: rgba(255,255,255,.2); color: #fff;
    border: .5px solid rgba(255,255,255,.4); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    transition: opacity .2s ease, transform .15s ease;
}
.mp-bigplay svg { width: 30px; height: 30px; margin-inline-start: 3px; }
.mp-video.is-started .mp-bigplay { opacity: 0; pointer-events: none; }
.bd-placeholder-img:has(.mp-video) { padding: 0; }

/* ================= فایل‌های پیوست (PDF و ...) ================= */
.files {
    display: flex; gap: 10px; height: auto; margin: 6px 0; padding: 12px; border-radius: 24px; overflow-x: auto; white-space: normal;
    background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow); scrollbar-width: none;
}
.files::-webkit-scrollbar { display: none; }
.files a { flex: none; text-decoration: none; color: var(--fg) !important; }
.file { position: static; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 92px; padding: 14px 8px 12px; border-radius: 20px; background: var(--surface); border: .5px solid var(--line); }
.file .fa-file { font-size: 2.3rem !important; color: var(--accent) !important; }
.file .caption { position: static; width: auto; height: auto; padding: 2px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: .68rem; font-weight: 700; line-height: 1.6; }
.file:hover { border-color: var(--accent); }

/* ================= تصویر ================= */
div.img img { border-radius: 22px; padding: 0; }
.carousel-indicators { position: static; margin: 10px 0 0; padding: 0; justify-content: center; }
.carousel-indicators li { width: 7px; height: 7px; margin: 0 3px; border-radius: 50%; background: var(--sub); opacity: .45; }
.carousel-indicators li.active { background: var(--accent); opacity: 1; width: 18px; border-radius: 4px; }

/* ================= صفحه‌های خطا و پیام وضعیت ================= */
main.status-page { display: grid; place-items: center; min-height: calc(100vh - 12rem); padding-top: 6rem; }
.status-card {
    width: min(460px, 100%); padding: 34px 26px 22px; text-align: center; border-radius: 32px; color: var(--fg);
    background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow);
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    --tone: var(--danger); --tone-bg: var(--danger-bg);
}
.status-card.tone-info { --tone: var(--accent); --tone-bg: color-mix(in srgb, var(--accent) 14%, transparent); }
.status-card.tone-success { --tone: var(--site-green, #1f7a45); --tone-bg: color-mix(in srgb, var(--site-green, #1f7a45) 16%, transparent); }
.status-ico {
    width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center;
    background: var(--tone-bg); color: var(--tone); font-size: 2.2rem; box-shadow: 0 0 0 8px color-mix(in srgb, var(--tone) 8%, transparent);
}
.status-title { margin: 0 0 8px; font-size: 1.35rem; font-weight: 800; }
.status-msg { margin: 0 auto 22px; max-width: 34ch; font-size: .92rem; line-height: 2; color: var(--sub); }
.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.status-btn {
    min-width: 130px; height: 46px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 23px;
    border: .5px solid var(--glass-line); background: var(--surface); color: var(--fg); font: inherit; font-size: .9rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.status-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
.status-btn:active { transform: scale(.97); }
.status-brand { margin-top: 22px; padding-top: 14px; border-top: .5px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .78rem; color: var(--sub); }
.status-brand img { border-radius: 6px; }
@media (min-width: 1100px) {
    /* دسکتاپ: کارت وضعیت هم‌عرض ستون وسط، هم‌تراز با سرتیتر */
    main.status-page { place-items: start center; min-height: 0; padding-top: 6.2rem; }
    .status-card { width: 100%; max-width: var(--col); padding: 44px 32px 26px; }
}

/* عنوان دو خطی: جای کافی برای محتوا + رنگ آبی برای نام کانال */
header .title .title-sub.text-blue { color: var(--accent) !important; }
@media (max-width: 1099px) { body:has(header .title-sub) main { padding-top: 104px; } }
@media (min-width: 1100px) { body:has(header .title-sub) main { padding-top: 9rem; } }

/* ================= پروفایل ================= */
header .title .title-sub.sm { font-size: .95rem; font-weight: 600; }
post.pf-card { padding: 16px !important; }
.pf-row { display: flex; align-items: center; gap: 14px; }
.pf-row .profile-img { float: none; flex: none; width: 76px; height: 76px; border: 0; box-shadow: 0 0 0 2px var(--glass-line); object-fit: cover; cursor: pointer; }
.pf-bio { flex: 1; min-width: 0; font-size: .88rem; line-height: 1.95; color: var(--fg); overflow-wrap: anywhere; }
.pf-actions { display: flex; gap: 8px; margin-top: 14px; }
.pf-btn {
    flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 22px; border: .5px solid var(--glass-line);
    background: var(--surface); color: var(--fg); font-size: .85rem; font-weight: 600; text-decoration: none; float: none; margin: 0;
}
.pf-btn.primary { background: var(--ink); border-color: var(--ink); color: var(--ink-on); font-weight: 700; }
#edit-info.pf-btn { position: static; margin: 0; font-size: .85rem; }
#Profile-Tab { display: flex; gap: 0; margin: 0 !important; padding: 4px !important; border: .5px solid var(--glass-line) !important; border-radius: 24px; background: var(--glass); box-shadow: var(--hl), var(--shadow); }
#Profile-Tab .nav-item { flex: 1; width: auto !important; padding: 0; }
#Profile-Tab .nav-link {
    height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 !important; border: 0 !important;
    border-radius: 20px !important; background: transparent !important; color: var(--sub) !important;
}
#Profile-Tab .nav-link i { font-size: 1.1rem; margin: 0; }
#Profile-Tab .nav-link .text-xs { margin: 0; font-size: .72rem; font-weight: 600; }
#Profile-Tab .nav-link.active { background: var(--ink) !important; color: var(--ink-on) !important; }
#Profile-TabContent { margin: 12px 0 0 !important; }
post:has(#Profile-Tab) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ================= علاقه‌مندی‌ها ================= */
.bm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bm-item { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 8px; min-height: 72px; border-radius: 24px; background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow); }
.bm-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 6px; text-decoration: none; color: var(--fg); }
.bm-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: .5px solid var(--glass-line); color: var(--accent); font-size: 1.15rem; }
.bm-text { flex: 1; min-width: 0; display: block; }
.bm-name { display: block; font-size: .92rem; font-weight: 600; line-height: 1.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-meta { display: block; font-size: .75rem; color: var(--sub); }
.bm-tools { flex: none; display: flex; gap: 2px; }
.bm-tool { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--sub); display: grid; place-items: center; font-size: 1rem; cursor: pointer; }
.bm-tool:hover { background: var(--hl); color: var(--fg); }
.bm-tool.danger:hover { color: var(--danger); }
.bm-empty { margin-top: 40px; padding: 34px 20px; text-align: center; border-radius: 28px; background: var(--glass); border: .5px solid var(--glass-line); color: var(--sub); }
.bm-empty i { font-size: 2.4rem; color: var(--accent); }
.bm-empty p { margin: 12px 0 0; font-size: .9rem; }
post:has(> .myPost) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
post > .myPost {
    display: flex; align-items: center; margin: 0 0 10px; padding: 12px 14px !important; min-height: 64px; border-radius: 24px;
    border: .5px solid var(--glass-line); background: var(--glass); box-shadow: var(--hl), var(--shadow);
}
post > .myPost .one-line { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; white-space: normal; }
post > .myPost .one-line i { color: var(--accent) !important; font-size: 1.1rem !important; flex: none; }
post > .myPost .post-title { font-size: .88rem; font-weight: 600; line-height: 1.7; color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---- پروفایل مطابق پروتوتایپ: آمار، کانال‌ها، کاشی‌های محتوا ---- */
.pf-bio { white-space: pre-line; }
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.pf-stat { padding: 12px; border-radius: 20px; background: var(--surface); border: .5px solid var(--glass-line); display: flex; flex-direction: column; gap: 10px; }
.pf-stat-top { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; font-weight: 600; color: var(--sub); }
.pf-stat-top svg { width: 24px; height: 24px; transform: rotate(-90deg); }
.pf-stat circle { fill: none; stroke-width: 5; }
.pf-stat .r-bg { stroke: var(--line); }
.pf-stat .r-fg { stroke: var(--accent); stroke-linecap: round; }
.pf-stat b { font-size: 1.5rem; font-weight: 600; line-height: 1; }
.pf-sec-head { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 6px 8px; }
.pf-sec-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.pf-sec-head a { font-size: .8rem; color: var(--sub); text-decoration: none; min-height: 40px; display: flex; align-items: center; }
.pf-channels { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-ch { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 70px; border-radius: 24px; background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow); text-decoration: none; color: var(--fg); }
.pf-ch-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--surface); border: .5px solid var(--glass-line); color: var(--accent); font-weight: 700; font-size: 1.05rem; }
.pf-ch-ico img { width: 100%; height: 100%; object-fit: cover; }
.pf-ch-text { flex: 1; min-width: 0; display: block; }
.pf-ch-name { display: block; font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-ch-meta { display: block; font-size: .75rem; color: var(--sub); }
.pf-ch > i { color: var(--sub); }
#Profile-TabContent .tab-pane.active:has(> .pf-tile) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-tile {
    position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; text-decoration: none; color: rgba(255,255,255,.96);
    background: linear-gradient(160deg, #1d4fa8, #6aa6ee); box-shadow: var(--shadow);
}
.pf-tile:nth-child(6n+2) { background: linear-gradient(160deg, #3b4fb8, #9aaaf0); }
.pf-tile:nth-child(6n+3) { background: linear-gradient(160deg, #1e6aa8, #7cc3e8); }
.pf-tile:nth-child(6n+4) { background: linear-gradient(160deg, #28428f, #7d93d8); }
.pf-tile:nth-child(6n+5) { background: linear-gradient(160deg, #25508f, #8eb3de); }
.pf-tile:nth-child(6n) { background: linear-gradient(160deg, #1b5e8f, #6fb0d6); }
.pf-cap { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 10px; font-size: .72rem; line-height: 1.6; font-weight: 600; background: linear-gradient(to top, rgba(0,0,0,.35), transparent 60%); overflow: hidden; }
.pf-cap { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-content: end; }
.pf-badge-ic { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; font-size: .7rem; }

#Profile-Tab .nav-link i { display: none; }
#Profile-Tab .pf-tab-label { font-size: .8rem; font-weight: 600; line-height: 1.2; }
#Profile-Tab .nav-link .text-xs { font-size: .7rem; font-weight: 500; opacity: .8; line-height: 1.2; }
#Profile-Tab .nav-link { height: 52px; }
.tab-content .pf-tile .pf-badge-ic i.fal { color: #fff !important; font-size: .75rem !important; line-height: 1; }

/* پست‌های در انتظار تأیید */
:root { --pending: #b45309; --pending-bg: rgba(245, 158, 11, .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pending: #fbbf24; --pending-bg: rgba(251, 191, 36, .16); } }
:root[data-theme="dark"] { --pending: #fbbf24; --pending-bg: rgba(251, 191, 36, .16); }
.pf-tile.is-pending { outline: 1.5px dashed var(--pending); outline-offset: -3px; }
.pf-tile.is-pending .pf-cap { filter: saturate(.7); }
.pf-tile.is-pending::before { content: ""; position: absolute; inset: 0; background: rgba(10, 18, 36, .35); z-index: 1; }
.pf-pending {
    position: absolute; z-index: 2; left: 6px; right: 6px; bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 4px 6px; border-radius: 10px; background: rgba(15, 23, 42, .78); color: #fbbf24; font-size: .62rem; font-weight: 700; white-space: nowrap;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tab-content .pf-tile .pf-pending i.fal { color: #fbbf24 !important; font-size: .7rem !important; }
.pf-tile.is-pending .pf-cap { z-index: 0; padding-bottom: 34px; }
.pf-pending-note {
    display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 14px; border-radius: 18px; background: var(--pending-bg);
    border: .5px solid color-mix(in srgb, var(--pending) 40%, transparent); color: var(--pending); font-size: .8rem; line-height: 1.8; font-weight: 600;
}
.pf-pending-note i.fal { color: var(--pending) !important; font-size: 1.1rem !important; flex: none; }
.pf-pending-note { grid-column: 1 / -1; }

/* ================= گروه‌های من (فهرست کانال‌ها) ================= */
.ch-search { position: relative; margin: 0 0 14px; }
.ch-search i { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--sub); pointer-events: none; }
.ch-search input {
    width: 100%; height: 52px; padding: 0 48px 0 20px; border-radius: 26px; border: .5px solid var(--glass-line); background: var(--glass); color: var(--fg);
    font: inherit; font-size: .95rem; box-shadow: var(--hl), var(--shadow); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
}
.ch-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.ch-all { margin-bottom: 0; }
.ch-unread { flex: none; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--accent); color: var(--on); font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.ch-none { text-align: center; color: var(--sub); font-size: .88rem; margin: 18px 0; }
.ch-none[hidden] { display: none; }

/* تبلت / عرض‌های بین ۵۷۶ تا ۱۰۹۹: محتوا هم‌عرض سرتیتر و نوار پایین (۶۸۰) و وسط‌چین */
@media (min-width: 576px) and (max-width: 1099px) {
    main { max-width: 690px; margin-inline: auto; }
}

/* «لینک منبع»: کارت کپسولی با آیکن، نام دامنه و فلش خروج */
a.Reference {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 10px 0 2px; padding: 6px 8px 6px 14px;
    border-radius: 22px; background: var(--surface); border: .5px solid var(--glass-line); box-shadow: var(--hl); color: var(--fg); text-decoration: none; font-size: .85rem;
}
a.Reference:hover { border-color: var(--accent); color: var(--fg); }
.ref-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
a.Reference i.fal { font-size: .95rem; color: var(--accent); }
.ref-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.ref-title { font-weight: 700; font-size: .82rem; }
.ref-host { font-size: .7rem; color: var(--sub); direction: ltr; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
a.Reference .ref-go { font-size: .8rem; color: var(--sub); margin-inline-start: 2px; }
.post-text a.Reference { font-weight: 400; }

/* لینک منبع کنار کلیدهای پایین پست */
post .key .row > .col-10 > a.key-ref {
    float: none !important; display: flex; align-items: center; gap: 6px; direction: rtl; height: 40px; padding: 0 12px; border-radius: 20px; min-width: 0;
    background: var(--surface); border: .5px solid var(--glass-line); color: var(--fg); font-size: .75rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
post .key .row > .col-10 > a.key-ref i { font-size: 1.1rem; color: var(--accent); }
post .key .row > .col-10 > a.key-ref span { color: var(--sub); direction: ltr; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
post .key .row > .col-10 > a.key-ref:hover { border-color: var(--accent); }
@media (max-width: 380px) { post .key .row > .col-10 > a.key-ref span { display: none; } post .key .row > .col-10 > a.key-ref { padding: 0 11px; } }

/* ================= افزودن به صفحه‌ی اصلی ================= */
div.AddToHomeScreenModal#AddToHomeScreenIOSModal, div.AddToHomeScreenModal#AddToHomeScreenAndroidModal {
    display: flex; align-items: flex-end; justify-content: center; padding: 16px !important; background: rgba(6, 12, 28, .55) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
div.AddToHomeScreenModal.sr-only { display: none !important; }
.a2hs-card {
    width: 100%; max-width: 440px; padding: 26px 22px 20px; border-radius: 32px; text-align: center; color: var(--fg);
    background: color-mix(in srgb, var(--glass) 92%, var(--bg, transparent)); border: .5px solid var(--glass-line); box-shadow: var(--hl), 0 30px 70px rgba(5,15,40,.4);
    -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); animation: a2hs-up .35s ease-out;
}
@keyframes a2hs-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .a2hs-card { animation: none; } }
.a2hs-card .Container { margin: 0 0 16px !important; }
.a2hs-card .LogoImageContainer { width: 76px !important; height: 76px !important; margin: 0 auto !important; border-radius: 22px !important; overflow: hidden; box-shadow: 0 10px 26px rgba(37,96,201,.3); }
.a2hs-card .LogoImageContainer img { width: 100%; height: 100%; object-fit: cover; }
.a2hs-title { margin-top: 14px; font-size: 1.05rem; font-weight: 800; line-height: 1.8; }
.a2hs-steps { list-style: none; counter-reset: step; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: right; }
.a2hs-steps li {
    counter-increment: step; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 12px 14px 12px 14px; border-radius: 18px;
    background: var(--surface); border: .5px solid var(--glass-line); font-size: .85rem; line-height: 1.9; position: relative; padding-inline-start: 52px;
}
.a2hs-steps li::before {
    content: counter(step, persian); position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; background: var(--accent); color: var(--on); font-weight: 700; font-size: .85rem;
}
.a2hs-steps li img { height: 22px; width: auto; border-radius: 6px; vertical-align: middle; }
.a2hs-steps li span { font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.a2hs-ok {
    width: 100%; height: 50px; border: 0; border-radius: 25px; background: var(--accent); color: var(--on); font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}
.a2hs-ok:active { transform: scale(.98); }

/* ================= هشدار و تأیید (iOSAlert / iOSConfirm) و پیام‌های ساده ================= */
#iOSAlert .modal-dialog, #iOSConfirm .modal-dialog, #NewCollection .modal-dialog, #fileUpload .modal-dialog { max-width: 360px; margin-inline: auto; padding-inline: 16px; }
#iOSAlert .modal-content, #iOSConfirm .modal-content, #NewCollection .modal-content, #fileUpload .modal-content, #reportmessage .modal-content, #loginmessage .modal-content, #accessmessage .modal-content {
    border: .5px solid var(--glass-line); border-radius: 30px; overflow: hidden; color: var(--fg); text-align: center;
    background: color-mix(in srgb, var(--glass) 92%, var(--bg, transparent)); box-shadow: var(--hl), 0 30px 70px rgba(5,15,40,.4);
    -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
}
#iOSAlert .modal-body, #iOSConfirm .modal-body, #NewCollection .modal-body, #fileUpload .modal-body { padding: 26px 22px 8px; }
#iOSAlert .modal-title, #iOSConfirm .modal-title, #NewCollection .modal-title, #fileUpload .modal-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; text-align: center; }
#iOSAlert .modal-text, #iOSConfirm .modal-text, #NewCollection .modal-text, #fileUpload .modal-text { font-size: .9rem; line-height: 2; color: var(--sub); }
#iOSAlert .modal-footer, #iOSConfirm .modal-footer, #NewCollection .modal-footer {
    display: flex !important; flex-direction: row; gap: 10px; height: auto !important; overflow: visible !important; padding: 14px 20px 20px !important; border: 0 !important; background: transparent;
}
#iOSAlert .modal-footer span, #iOSConfirm .modal-footer span, #NewCollection .modal-footer span {
    flex: 1; width: auto !important; height: 48px; line-height: 48px !important; padding: 0 !important; border-radius: 24px; text-align: center; font-size: .92rem !important; font-weight: 700;
    border: .5px solid var(--glass-line) !important; background: var(--surface); color: var(--fg) !important; cursor: pointer;
}
#iOSAlert .modal-footer span:first-child, #iOSConfirm .modal-footer span:first-child, #NewCollection .modal-footer span:first-child { background: var(--accent); border-color: var(--accent) !important; color: var(--on) !important; }
#iOSAlert .modal-footer span:active, #iOSConfirm .modal-footer span:active, #NewCollection .modal-footer span:active { filter: brightness(.92); border-radius: 24px !important; background-clip: padding-box; }
#reportmessage .modal-body, #loginmessage .modal-body, #accessmessage .modal-body { padding: 28px 22px 8px; font-size: .95rem; line-height: 2; }
#reportmessage .modal-footer, #loginmessage .modal-footer, #accessmessage .modal-footer {
    display: block !important; width: auto; margin: 10px 20px 20px; padding: 0 !important; height: 48px; line-height: 48px; border: 0 !important; border-radius: 24px;
    background: var(--accent) !important; color: var(--on) !important; font-weight: 700; font-size: .92rem; cursor: pointer; text-align: center;
}

/* پنجره‌ی نام مجموعه‌ی جدید و پنجره‌ی بارگذاری فایل: هم‌شکل هشدار/تأیید، با آیکن بالای عنوان */
.dlg-ic {
    display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; font-size: 1.3rem;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent);
}
#NewCollection .modal-footer span:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dlg-input {
    display: block; width: 100%; min-height: 50px; margin: 14px 0 0; padding: 0 16px; border-radius: 18px; font: inherit; font-size: .95rem;
    border: 1.5px solid var(--line); background: var(--surface); color: var(--fg); text-align: right;
}
.dlg-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
#fileUpload .modal-body { padding-bottom: 24px; }
#fileUpload .progress { height: 26px; margin-top: 16px; border-radius: 13px; background: var(--surface); border: .5px solid var(--glass-line); overflow: hidden; direction: ltr; }
#fileUpload .progress-bar {
    min-width: 2.6em; border-radius: 13px; font-size: .75rem; font-weight: 700; color: #fff; transition: width .2s ease;
    background: linear-gradient(90deg, #5b97f7, #2560c9);
}

/* ================= دعوت از دوستان و اشتراک‌گذاری ================= */
#invite .modal-dialog, #share .modal-dialog { max-width: 440px; margin-inline: auto; padding-inline: 14px; }
#invite .modal-content, #share .modal-content {
    border: .5px solid var(--glass-line); border-radius: 30px; background: color-mix(in srgb, var(--glass) 88%, var(--bg, transparent)); text-align: right; overflow: hidden;
    box-shadow: var(--hl), 0 30px 70px rgba(5,15,40,.35); -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
}
#invite .modal-header, #share .modal-header { display: flex !important; align-items: center; justify-content: space-between; padding: 18px 20px 6px !important; border: 0 !important; }
#invite .modal-title, #share .modal-title { margin: 0; font-size: 1.1rem; font-weight: 800; text-align: right; }
#invite .modal-header .btn-close, #share .modal-header .btn-close {
    display: block !important; flex: none; width: 36px; height: 36px; margin: 0 !important; padding: 0 !important; border-radius: 50%; opacity: 1; border: .5px solid var(--glass-line);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a9bb8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / 14px no-repeat;
}
#invite .modal-body, #share .modal-body { padding: 4px 20px 22px; }
#invite .modal-body h6 { margin: 0 0 14px !important; font-size: .85rem; font-weight: 500; line-height: 1.9; color: var(--sub); }
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: var(--surface); border: .5px solid var(--glass-line);
    color: var(--fg); text-decoration: none; cursor: pointer; font-size: .88rem; font-weight: 600; transition: border-color .15s ease, transform .1s ease;
}
.share-item:hover { border-color: var(--accent); color: var(--fg); }
.share-item:active { transform: scale(.98); }
.share-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.15rem; }
.share-item .share-ico i { color: #fff !important; font-size: 1.1rem !important; margin: 0; line-height: 1; }
.share-ico.fb { background: #1877f2; } .share-ico.tw { background: #1d9bf0; } .share-ico.tg { background: #229ed9; }
.share-ico.wa { background: #25d366; } .share-ico.li { background: #0a66c2; } .share-ico.cp { background: var(--accent); }
.share-ico.cp i { color: var(--on) !important; }

/* ================= فایل پیوست: ردیف با آیکن نوع، نام فایل و دانلود ================= */
.files.files-list { display: flex; flex-direction: column; gap: 8px; height: auto; padding: 10px; overflow: visible; }
.file-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 18px; background: var(--surface); border: .5px solid var(--line);
    color: var(--fg) !important; text-decoration: none; min-width: 0;
}
.file-row:hover { border-color: var(--accent); }
.file-ico { flex: none; position: relative; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.files .file-ico i.fal { font-size: 1.35rem !important; color: var(--accent) !important; margin-top: -8px; }
.file-ico b { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font-size: .55rem; font-weight: 800; letter-spacing: .3px; direction: ltr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px; }
.file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.6; }
.file-name { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-kind { font-size: .72rem; color: var(--sub); }
.file-dl { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on); }
.files .file-dl i.fal { color: var(--on) !important; font-size: 1rem !important; }
/* تم روشن: مثل پخش‌کننده‌ی صوت، ته‌رنگ آبی ملایم و لبه‌ی پیدا تا روی کارت سفید پست گم نشود (توکن‌های --mp-*) */
.file-row { background: var(--mp-card); border-color: var(--mp-line); }
.file-ico { background: var(--mp-btn); }

/* کلید نظر: حالت «شما نظر داده‌اید» آبی است، نه قرمزِ لایک (ممکن است نظر هنوز تأیید نشده و شمار ۰ باشد) */
post .key .row > .col-10 > div.on:has(> i.fa-comment-alt-lines) { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
post .key .row > .col-10 > div.on:has(> i.fa-comment-alt-lines) i,
post .key .row > .col-10 > div.on:has(> i.fa-comment-alt-lines) span { color: var(--accent); }

/* ================= آواتار بدون عکس: حرف اول نام ================= */
.av { flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; line-height: 1; user-select: none; box-shadow: 0 0 0 2px var(--glass-line); }
.av-0 { background: linear-gradient(135deg, #2560c9, #6d4fd6); }
.av-1 { background: linear-gradient(135deg, #0f766e, #2bb3a3); }
.av-2 { background: linear-gradient(135deg, #c2410c, #f08a4b); }
.av-3 { background: linear-gradient(135deg, #a16207, #e0b23f); }
.av-4 { background: linear-gradient(135deg, #be185d, #ec6aa5); }
.av-5 { background: linear-gradient(135deg, #1e6aa8, #5fb7e8); }
post author .av { width: 44px; height: 44px; font-size: 1.15rem; }
div.comment.cm .av { width: 38px; height: 38px; font-size: .95rem; }
div.comment.cm.cm-reply .av { width: 30px; height: 30px; font-size: .8rem; }

/* ================= سرفصل‌های زیر نام: حداکثر ۲ تا + «+n» ================= */
post author .post-cats:not(.show-all) .cat-more { display: none !important; }
post author .post-cats.show-all .cat-plus { display: none !important; }
post author .post-cats { flex-wrap: wrap; }
post author .post-cats button.cat-plus {
    display: inline-flex; align-items: center; height: 22px; padding: 1px 9px 0; margin: 0; border-radius: 11px; cursor: pointer;
    border: .5px solid var(--glass-line); background: var(--surface); color: var(--sub); font: inherit; font-size: .7rem; font-weight: 700; direction: ltr;
}
post author .post-cats button.cat-plus:hover { color: var(--accent); border-color: var(--accent); }

/* علاقه‌مندی‌ها: دکمه‌ی «مجموعه‌ی جدید» بالای فهرست (به‌جای آیکن زرد سرتیتر) */
.bm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 12px; }
.bm-hint { font-size: .82rem; color: var(--sub); }
.bm-new {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 21px; border: 0; cursor: pointer;
    background: var(--accent); color: var(--on); font: inherit; font-size: .85rem; font-weight: 700; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.bm-new i { font-size: 1rem; }
.bm-new:active { transform: scale(.97); }

.bm-all {
    display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 14px 16px; min-height: 76px; border-radius: 26px; text-decoration: none; color: var(--fg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--glass)), var(--glass)); border: .5px solid color-mix(in srgb, var(--accent) 35%, var(--glass-line));
    box-shadow: var(--hl), var(--shadow);
}
.bm-all-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on); font-size: 1.2rem; }
.bm-all > i { color: var(--sub); }
.bm-sec { margin: 0; font-size: 1.05rem; font-weight: 700; }
.bm-empty { margin-top: 4px; }

/* عنوان دو خطی استاندارد (مثل «جستجو / در فطرت‌گرام»): خط دوم هم‌اندازه‌ی خط اول، خاکستری */
header .title .title-sub, header .title .title-sub.sm { font-size: inherit !important; font-weight: 600; color: var(--sub) !important; }

post:has(> .bm-empty) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bm-empty p { line-height: 2; }

/* ================= همه‌ی پنجره‌های iOS (مجموعه، ذخیره در علاقه‌مندی‌ها و...) هم‌سبک ================= */
.text-black-50 { color: var(--sub) !important; }
.modal-text .small.text-black-50 { display: inline-block; direction: ltr; unicode-bidi: isolate; font-size: .75rem; margin-bottom: 4px; }
.modal.iOS:not(#Preloader) .modal-dialog { max-width: 380px; margin-inline: auto; padding-inline: 14px; }
.modal.iOS:not(#Preloader) .modal-content {
    width: 100%; border: .5px solid var(--glass-line) !important; border-radius: 28px !important; overflow: hidden; color: var(--fg) !important; text-align: center;
    background: color-mix(in srgb, var(--glass) 92%, var(--bg, transparent)) !important; box-shadow: var(--hl), 0 30px 70px rgba(5,15,40,.4);
    -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
}
.modal.iOS:not(#Preloader) .modal-body { width: 100%; padding: 22px 20px 6px; }
.modal.iOS:not(#Preloader) .modal-title { color: var(--fg) !important; font-weight: 800; font-size: 1.05rem; }
.modal.iOS:not(#Preloader) .modal-header { border: 0 !important; padding: 18px 20px 4px !important; }
.modal.iOS .form-control {
    height: 48px; border-radius: 16px; border: .5px solid var(--line); background: var(--surface); color: var(--fg); text-align: right; font-size: .92rem;
}
.modal.iOS .form-control::placeholder { color: var(--sub); }
.modal.iOS .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); background: var(--surface); color: var(--fg); }
.modal.iOS:not(#Preloader):not(#iOSAlert):not(#iOSConfirm):not(#report):not(#reportcomment) .modal-footer {
    display: flex !important; flex-direction: row; gap: 10px; width: 100%; height: auto !important; overflow: visible !important; padding: 12px 18px 18px !important; border: 0 !important; background: transparent;
}
.modal.iOS:not(#Preloader):not(#iOSAlert):not(#iOSConfirm):not(#report):not(#reportcomment) .modal-footer > button,
.modal.iOS:not(#Preloader):not(#iOSAlert):not(#iOSConfirm):not(#report):not(#reportcomment) .modal-footer > span {
    flex: 1; width: auto !important; height: 46px; line-height: 46px; margin: 0 !important; padding: 0 !important; border-radius: 23px !important; text-align: center; cursor: pointer;
    border: .5px solid var(--glass-line) !important; background: var(--surface); color: var(--fg); font: inherit; font-size: .9rem; font-weight: 700;
}
.modal.iOS:not(#Preloader):not(#iOSAlert):not(#iOSConfirm):not(#report):not(#reportcomment) .modal-footer > :first-child { background: var(--accent); border-color: var(--accent) !important; color: var(--on) !important; }
.modal.iOS .modal-footer > .text-danger { color: var(--danger) !important; }
/* ذخیره در علاقه‌مندی‌ها: دکمه‌ی زرد → دکمه‌ی کپسولی */
#SaveBookmarkModal #AddCollection {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 21px; border: .5px solid var(--glass-line);
    background: var(--surface); color: var(--accent); font-weight: 700; font-size: .85rem;
}
#SaveBookmarkModal .list-group { gap: 8px; display: flex; flex-direction: column; text-align: right; }
#SaveBookmarkModal .list-group-item { border-radius: 16px !important; border: .5px solid var(--line) !important; background: var(--surface); color: var(--fg); cursor: pointer; }
#SaveBookmarkModal .list-group-item:hover { border-color: var(--accent) !important; }
#SaveBookmarkModal .btn-close {
    width: 36px; height: 36px; margin: 0 !important; padding: 0 !important; border-radius: 50%; opacity: 1; border: .5px solid var(--glass-line);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a9bb8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / 14px no-repeat;
}
#SaveBookmarkModal .modal-header { display: flex !important; align-items: center; justify-content: space-between; }

/* زمینه‌ی پنجره‌ها: شیشه روی یک لایه‌ی مات تا متن در هر دو تم خوانا بماند */
:root { --modal-ground: #eef4ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --modal-ground: #111a2f; } }
:root[data-theme="dark"] { --modal-ground: #111a2f; }
.modal.iOS:not(#Preloader) .modal-content, #reportmessage .modal-content, #loginmessage .modal-content, #accessmessage .modal-content, .a2hs-card {
    background: linear-gradient(var(--glass), var(--glass)), var(--modal-ground) !important;
}
.modal.iOS:not(#Preloader) .modal-content.modal-dialog-centered { max-width: none !important; min-height: 0; margin: 0 !important; }
#Bookmarks .list-group-item { padding: 10px 12px; align-items: center; }
#Bookmarks .list-group-item i.orange {
    flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent) !important; font-size: 1.1rem !important;
}
#Bookmarks .list-group-item .pe-3 > div:first-child { font-weight: 600; font-size: .9rem; }
#SaveBookmarkModal .modal-header .btn-close { display: block !important; flex: none; }
#SaveBookmarkModal .modal-title { margin: 0; text-align: right; }
/* متن دکمه‌های پنجره‌ها دقیقاً وسط (عمودی و افقی) */
.modal.iOS:not(#Preloader):not(#iOSAlert):not(#iOSConfirm):not(#report):not(#reportcomment) .modal-footer > button,
.modal.iOS:not(#Preloader):not(#iOSAlert):not(#iOSConfirm):not(#report):not(#reportcomment) .modal-footer > span,
#iOSAlert .modal-footer span, #iOSConfirm .modal-footer span, #report .modal-footer .iOS-btn, #reportcomment .modal-footer.iOS-btn {
    display: flex !important; align-items: center; justify-content: center; line-height: 1.2 !important;
}

/* ================= سرفصل‌های موضوعی ================= */
.sj-list { display: flex; flex-direction: column; gap: 10px; }
.sj-item { display: block; border-radius: 24px; background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow); overflow: hidden; }
.sj-head {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 70px; border: 0; background: transparent;
    color: var(--fg); font: inherit; text-align: right; cursor: pointer; text-decoration: none;
}
a.sj-head:hover { color: var(--fg); }
.sj-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.05rem; }
.sj-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.6; }
.sj-text b { font-size: .92rem; font-weight: 700; }
.sj-text small { font-size: .74rem; color: var(--sub); }
.sj-head > i { color: var(--sub); transition: transform .2s ease; }
.sj-item.open .sj-caret { transform: rotate(180deg); }
.sj-body { display: none; padding: 0 14px 14px; }
.sj-item.open .sj-body { display: block; animation: sj-in .2s ease-out; }
@keyframes sj-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sj-item.open .sj-body { animation: none; } }
.sj-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sj-chip {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 18px; border: .5px solid var(--glass-line);
    background: var(--surface); color: var(--fg); font-size: .82rem; font-weight: 500; text-decoration: none;
}
.sj-chip:hover { border-color: var(--accent); color: var(--accent); }
.sj-chip.sj-all { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); font-weight: 700; }
.sj-group { margin-top: 12px; padding-top: 10px; border-top: .5px solid var(--line); }
.sj-group-title { display: inline-block; margin: 0 2px 8px; font-size: .82rem; font-weight: 700; color: var(--fg); text-decoration: none; }
.sj-group-title:hover { color: var(--accent); }

/* ================= تماس با ما (گفت‌وگو با پشتیبانی) ================= */
.ct-intro { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 14px 16px; border-radius: 24px; background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow); }
.ct-intro-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on); font-size: 1.2rem; }
.ct-intro b { font-size: .92rem; }
.ct-intro p { margin: 2px 0 0; font-size: .8rem; line-height: 1.8; color: var(--sub); }
.ct-thread { display: flex; flex-direction: column; gap: 12px; }
.ct-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.ct-msg.me { align-self: flex-start; }
.ct-msg.them { align-self: flex-end; flex-direction: row-reverse; }
.ct-av { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px var(--glass-line); }
.ct-av img { width: 100%; height: 100%; object-fit: cover; }
.ct-bubble { min-width: 0; padding: 10px 14px 8px; border-radius: 20px; font-size: .9rem; line-height: 1.9; overflow-wrap: anywhere; }
.ct-msg.me .ct-bubble { background: var(--accent); color: var(--on); border-bottom-right-radius: 6px; }
.ct-msg.them .ct-bubble { background: var(--glass); color: var(--fg); border: .5px solid var(--glass-line); border-bottom-left-radius: 6px; box-shadow: var(--hl); }
.ct-who { display: block; font-size: .72rem; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.ct-text p:last-child { margin-bottom: 0; }
.ct-time { display: block; margin-top: 4px; font-size: .68rem; opacity: .75; direction: ltr; text-align: left; }
.ct-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,.2); color: inherit; font-size: .78rem; text-decoration: none; direction: ltr; }
.ct-guest { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.ct-guest .cm-input { min-height: 42px; padding: 8px 14px; }

/* گفت‌وگوی طولانی: پیام‌های قدیمی پنهان، دکمه‌ی «پیام‌های قبلی»، جداکننده‌ی روز */
.ct-pair { display: flex; flex-direction: column; gap: 12px; }
.ct-pair.ct-old { display: none; }
.ct-more {
    align-self: center; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; margin-bottom: 4px; border-radius: 20px; cursor: pointer;
    border: .5px solid var(--glass-line); background: var(--glass); color: var(--accent); font: inherit; font-size: .82rem; font-weight: 700; box-shadow: var(--hl);
}
.ct-more span { color: var(--sub); font-weight: 500; }
.ct-day { display: flex; justify-content: center; margin: 6px 0 2px; }
.ct-day span { padding: 3px 12px; border-radius: 12px; background: var(--surface); border: .5px solid var(--glass-line); color: var(--sub); font-size: .72rem; direction: ltr; }
/* صفحه‌ی تماس: جابه‌جایی دید را خودمان کنترل می‌کنیم (لنگر خودکار مرورگر دوباره‌کاری می‌کند) */
html:has(#ctThread), html:has(#ctThread) body { overflow-anchor: none; }

/* نظرِ مقصدِ «در پاسخ به»: درخشش کوتاه با رنگ تأکید تم (به‌جای زرد ثابت) */
@keyframes cm-flash {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent), var(--hl), var(--shadow); border-color: var(--glass-line); }
    15%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent), var(--hl), var(--shadow); border-color: var(--accent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent), var(--hl), var(--shadow); border-color: var(--glass-line); }
}
div.comment.cm.cm-flash { animation: cm-flash 2.4s ease-out; background-image: linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)); }
@media (prefers-reduced-motion: reduce) { div.comment.cm.cm-flash { animation: none; border-color: var(--accent); } }

/* ================= پخش‌کننده‌ی صوت (نسخه‌ی موج) ================= */
.mp-audio {
    gap: 14px; padding: 12px 14px; border-radius: 26px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--glass)), var(--glass));
    border-color: color-mix(in srgb, var(--accent) 22%, var(--glass-line));
}
.mp-audio.is-playing { box-shadow: var(--hl), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow); }
.mp-audio .mp-btn { width: 52px; height: 52px; }
.mp-audio .mp-main { direction: rtl; gap: 6px; }
.mp-wave-wrap { position: relative; height: 34px; }
.mp-wave { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 2px; direction: rtl; pointer-events: none; }
.mp-wave i { flex: 1; min-width: 2px; max-width: 5px; border-radius: 3px; background: color-mix(in srgb, var(--sub) 45%, transparent); transition: background .15s ease; }
.mp-wave i.on { background: var(--accent); }
.mp-audio.is-playing .mp-wave i.on:last-of-type { animation: none; }
.mp-wave-wrap .mp-seek { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; direction: rtl; }
.mp-wave-wrap:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.mp-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mp-time { display: inline-flex; gap: 4px; direction: ltr; font-size: .74rem; color: var(--sub); font-variant-numeric: tabular-nums; }
.mp-time .mp-cur { color: var(--fg); font-weight: 600; }
.mp-sep { opacity: .5; }
.mp-rate {
    height: 24px; min-width: 40px; padding: 0 8px; border-radius: 12px; border: .5px solid var(--glass-line); background: var(--surface);
    color: var(--sub); font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer; direction: ltr;
}
.mp-rate.on { background: var(--accent); border-color: var(--accent); color: var(--on); }
.mp-times { display: none; }

/* دکمه‌ی پخش: هم‌سبک دکمه‌ی شناور «ارسال محتوا» (گرادیان، برق شیشه‌ای، حلقه‌ی نرم) */
.mp-audio .mp-btn {
    width: 52px; height: 52px; padding: 0; color: #fff;
    background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.5) 0, rgba(255,255,255,0) 52%),
                linear-gradient(180deg, color-mix(in srgb, var(--accent) 68%, #ffffff) 0%, var(--accent) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.14),
                0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent), 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent);
    transition: transform .15s ease, box-shadow .2s ease;
}
.mp-audio .mp-btn svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
.mp-audio .mp-btn[aria-label="پخش"] svg { transform: translateX(1.5px); } /* مرکز نوری مثلث */
.mp-audio .mp-btn:hover { transform: translateY(-1px); }
.mp-audio .mp-btn:active { transform: scale(.94); }
.mp-audio.is-playing .mp-btn { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.14), 0 0 0 7px color-mix(in srgb, var(--accent) 22%, transparent), 0 8px 22px color-mix(in srgb, var(--accent) 50%, transparent); }
.mp-audio .mp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* دکمه‌ی پخش در سمت چپ کارت */
.mp-audio .mp-btn { order: 2; }
.mp-audio .mp-main { order: 1; }
/* پیشرفت پخش از چپ به راست (از کنار دکمه‌ی پخش) */
.mp-wave, .mp-wave-wrap .mp-seek { direction: ltr; }

/* ================= حریم شخصی ================= */
.pv-intro { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 16px; border-radius: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--glass)), var(--glass)); border: .5px solid color-mix(in srgb, var(--accent) 25%, var(--glass-line)); box-shadow: var(--hl), var(--shadow); }
.pv-intro-ico { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on); font-size: 1.3rem; }
.pv-intro b { font-size: .95rem; }
.pv-intro p { margin: 2px 0 0; font-size: .82rem; line-height: 1.9; color: var(--sub); }
.pv-lang { display: flex; margin: 0 0 14px; padding: 4px; border-radius: 24px; background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow); }
.pv-lang button { flex: 1; height: 38px; border: 0; border-radius: 19px; background: transparent; color: var(--sub); font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer; }
.pv-lang button.on { background: var(--ink); color: var(--ink-on); font-weight: 700; }
.pv-list { display: flex; flex-direction: column; gap: 10px; }
.pv-list[hidden] { display: none; }
.pv-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 24px; background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow); }
.pv-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 1.05rem; }
.pv-body { flex: 1; min-width: 0; }
.pv-body h2 { margin: 8px 0 6px; font-size: .98rem; font-weight: 700; line-height: 1.7; }
.pv-body p { margin: 0 0 8px; font-size: .86rem; line-height: 2; color: var(--sub); text-align: justify; overflow-wrap: anywhere; }
.pv-body p:last-child { margin-bottom: 0; }
.pv-body a { color: var(--accent); }
.pv-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--surface); border: .5px solid var(--glass-line); font-size: .8rem; font-weight: 700; text-decoration: none; }

/* پخش‌کننده‌ی صوت هم‌سبک ردیف فایل‌ها: کارت ساده، دکمه‌ی مربعِ گردگوشه با ته‌رنگ تأکید (ظریف، بی‌درخشش) */
.mp-audio {
    gap: 12px; padding: 10px 12px; border-radius: 22px;
    background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow);
}
.mp-audio.is-playing { box-shadow: var(--hl), var(--shadow); border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-line)); }
.mp-audio .mp-btn {
    width: 46px; height: 46px; border-radius: 14px; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: none; transition: background .15s ease, transform .1s ease;
}
.mp-audio .mp-btn svg { width: 20px; height: 20px; filter: none; }
.mp-audio .mp-btn[aria-label="پخش"] svg { transform: translateX(1px); }
.mp-audio .mp-btn:hover { transform: none; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.mp-audio .mp-btn:active { transform: scale(.95); }
.mp-audio.is-playing .mp-btn { background: var(--accent); color: var(--on); box-shadow: none; }
.mp-audio .mp-wave-wrap { height: 30px; }
.mp-audio .mp-wave i { max-width: 4px; }

/* پخش‌کننده‌ی صوت در تم روشن: جدا از کارت سفید پست، با لبه و ته‌رنگ آبی ملایم و موج پررنگ‌تر */
:root { --mp-card: color-mix(in srgb, #2560c9 5%, rgba(255,255,255,.75)); --mp-line: rgba(37,96,201,.16); --mp-bar: rgba(37,96,201,.24); --mp-btn: rgba(37,96,201,.12); --mp-rate: rgba(37,96,201,.06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mp-card: var(--glass); --mp-line: var(--glass-line); --mp-bar: color-mix(in srgb, var(--sub) 45%, transparent); --mp-btn: color-mix(in srgb, var(--accent) 14%, transparent); --mp-rate: var(--surface); } }
:root[data-theme="dark"] { --mp-card: var(--glass); --mp-line: var(--glass-line); --mp-bar: color-mix(in srgb, var(--sub) 45%, transparent); --mp-btn: color-mix(in srgb, var(--accent) 14%, transparent); --mp-rate: var(--surface); }
.mp-audio { background: var(--mp-card); border-color: var(--mp-line); }
.mp-audio .mp-btn { background: var(--mp-btn); }
.mp-audio .mp-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.mp-audio.is-playing .mp-btn { background: var(--accent); }
.mp-audio .mp-wave i { background: var(--mp-bar); }
.mp-audio .mp-wave i.on { background: var(--accent); }
.mp-audio .mp-rate { background: var(--mp-rate); border-color: var(--mp-line); }
.mp-audio .mp-rate.on { background: var(--accent); border-color: var(--accent); color: var(--on); }
/* متن انگلیسی حریم شخصی: فونت لاتین (فونت فارسی فاصله‌ی کلمات لاتین را به‌هم می‌ریزد) و چپ‌چین */
.pv-list[data-lang="en"], .pv-list[data-lang="en"] :not(i) { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; }
.pv-list[data-lang="en"] .pv-body h2, .pv-list[data-lang="en"] .pv-body p { text-align: left; letter-spacing: normal; word-spacing: normal; }
.pv-list[data-lang="en"] .pv-body h2 { font-size: 1rem; line-height: 1.5; }
.pv-list[data-lang="en"] .pv-body p { line-height: 1.75; }

/* ================= درباره و راهنما ================= */
.ab-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: 0 0 14px; padding: 24px 18px 20px; border-radius: 28px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, var(--glass)), var(--glass)); border: .5px solid color-mix(in srgb, var(--accent) 25%, var(--glass-line)); box-shadow: var(--hl), var(--shadow); }
.ab-logo { width: 84px; height: 84px; object-fit: contain; border-radius: 22px; background: #fff; padding: 8px; box-shadow: 0 10px 26px rgba(37,96,201,.25); }
.ab-hero h2 { margin: 8px 0 0; font-size: 1.3rem; font-weight: 800; }
.ab-hero p { margin: 0; font-size: .88rem; color: var(--sub); line-height: 1.9; }
.ab-by { margin-top: 6px; padding: 4px 12px; border-radius: 14px; background: var(--surface); border: .5px solid var(--glass-line); font-size: .78rem; font-weight: 600; color: var(--fg); }
.ab-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ab-links a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 18px; background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl); color: var(--fg); text-decoration: none; font-size: .86rem; font-weight: 600; }
.ab-links a i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: .95rem; }
.ab-links a:hover { border-color: var(--accent); }
.hp-hero .pv-intro-ico { margin-bottom: 4px; }
.hp-hero h2 { font-size: 1.1rem; }
.hp-body p { margin: 0 0 8px; font-size: .86rem; line-height: 2; color: var(--sub); text-align: justify; }
.hp-body p:last-child { margin-bottom: 0; }
.hp-body a { color: var(--accent); }
.sj-ico i { font-size: 1.05rem; color: #fff; }

/* سه رنگ دیگر برای دایره‌ها تا فهرست‌های ۹تایی (مثل راهنما) رنگ تکراری نداشته باشند */
.av-6 { background: linear-gradient(135deg, #4338ca, #8b80f0); }
.av-7 { background: linear-gradient(135deg, #15803d, #4cc27a); }
.av-8 { background: linear-gradient(135deg, #475569, #94a3b8); }

/* PWA: نوار وضعیت اتصال / نسخه‌ی جدید (js/pwa.js) — بالای صفحه، زیر ناچ گوشی */
#netBar {
    position: fixed; z-index: 100001; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%;
    width: max-content; max-width: calc(100% - 32px); transform: translate(-50%, -16px); opacity: 0;
    display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 22px;
    font-family: 'Ravi', 'FaDigits', system-ui, sans-serif; font-size: .85rem; font-weight: 600; line-height: 1.7; direction: rtl;
    color: var(--fg); background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--hl), var(--shadow);
    -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
    transition: transform .25s ease, opacity .25s ease;
}
#netBar.in { transform: translate(-50%, 0); opacity: 1; }
#netBar > i { font-size: 1.05rem; flex: none; }
#netBar.net-off > i { color: var(--danger); }
#netBar.net-on > i { color: var(--site-green, #1f9d55); }
#netBar.net-upd > i { color: var(--accent); }
#netBar .net-btn {
    flex: none; height: 30px; padding: 0 14px; border: 0; border-radius: 15px; cursor: pointer;
    font: inherit; font-size: .8rem; font-weight: 800; background: var(--accent); color: var(--on);
}
#netBar.shake { animation: net-shake .4s ease; }
@keyframes net-shake { 0%, 100% { transform: translate(-50%, 0); } 25% { transform: translate(calc(-50% - 6px), 0); } 75% { transform: translate(calc(-50% + 6px), 0); } }
@media (prefers-reduced-motion: reduce) { #netBar { transition: none; } #netBar.shake { animation: none; } }