/* ═══════════════════════════════════════════════════════
   PAD — TraderNet Design System (RTL, Mobile-First)
   Based on PAD-Design-System.md
   ═══════════════════════════════════════════════════════ */

@font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

:root {
    /* ══ سیستم دیزاین PAD-4 (navy + copper) — مرجع: docs/DESIGN.md ══ */

    /* ── Primary (navy) — ۹ پله ── */
    --p-50:  #EEF2F9;
    --p-100: #DCE5F1;
    --p-200: #B7C7E0;
    --p-300: #8AA3C9;
    --p-400: #54739F;
    --p-500: #2E5286;
    --p-600: #1F3E6B;   /* برند / کنش اصلی */
    --p-700: #18335A;
    --p-800: #122845;   /* پس‌زمینه sidebar */
    --p-900: #0C1B30;
    --p-on:  #FFFFFF;

    /* ── Accent (copper) — فقط نقطه‌ای، هرگز غالب ── */
    --a-50:  #FBEEE4;
    --a-100: #F6D9C4;
    --a-500: #C2520E;
    --a-600: #A8450B;

    /* ── خنثی (اسلیت) — ۱۲ پله ── */
    --n-0:   #FFFFFF;   /* کارت */
    --n-50:  #F7F8FA;
    --n-100: #F1F3F6;   /* پس‌زمینه صفحه */
    --n-150: #E9ECF1;
    --n-200: #E1E5EB;   /* جداکننده */
    --n-300: #CBD2DB;
    --n-400: #A4ADBA;
    --n-500: #7A8493;
    --n-600: #5A6472;   /* متن کم‌رنگ */
    --n-700: #3E4654;
    --n-800: #2A313C;
    --n-900: #1A1F27;   /* متن اصلی */

    /* ══ نگاشتِ --tn-* روی پله‌های جدید (محافظت‌شده — کامپوننتی نشکند) ══ */
    /* ── Primary ── */
    --tn-primary:           var(--p-600);
    --tn-primary-dark:      var(--p-800);
    --tn-primary-light:     var(--p-50);
    --tn-primary-container: var(--p-100);
    --tn-on-primary:        var(--p-on);
    /* ── Surface ── */
    --tn-surface:           var(--n-100);
    --tn-surface-card:      var(--n-0);
    --tn-surface-dim:       var(--n-150);
    /* ── Text ── */
    --tn-on-surface:        var(--n-900);
    --tn-on-surface-var:    var(--n-600);
    /* ── Border ── */
    --tn-outline:           var(--n-200);
    --tn-outline-light:     var(--n-150);
    /* ── Semantic (تینتِ نرم) ── */
    --tn-error:    #C03A2B;  --tn-error-bg:   #FBE9E6;
    --tn-success:  #1E7A4D;  --tn-success-bg: #E6F3EC;
    --tn-warn:     #A86507;  --tn-warn-bg:    #FBF0DC;  /* ۴.۶۴:۱ روی سفید. #B26C09 قبلی ۴.۱۷ می‌داد و از گیتِ کنتراست رد نمی‌شد. */
    /* ── Radius ── */
    --tn-r-sm:   8px;    /* input */
    --tn-r-md:   12px;   /* card */
    --tn-r-lg:   16px;
    --tn-r-full: 100px;  /* دکمهٔ کپسولی — امضای برند، ثابت */
    /* ── Shadow (تنِ navy، نه مشکی خالص) ── */
    --tn-s1: 0 1px 2px rgba(16,32,56,.06), 0 1px 3px rgba(16,32,56,.05);
    --tn-s2: 0 4px 14px rgba(16,32,56,.08), 0 2px 5px rgba(16,32,56,.04);
    --tn-s3: 0 14px 36px rgba(16,32,56,.16);
    /* ── Font ── */
    --tn-font: 'Vazirmatn', Tahoma, sans-serif;
}

/* فقط حالتِ روشن — dark mode حذف شد */
:root { color-scheme: light; }

/* ═══ Body ═══ */
html { height:100%; }
body {
    margin:0; min-height:100vh;
    font-family:var(--tn-font); font-size:14px; line-height:1.6;
    color:var(--tn-on-surface); direction:rtl;
    background:
        radial-gradient(circle, rgba(21,101,192,.07) 1px, transparent 1px),
        linear-gradient(160deg, #EEF4FC 0%, #F5F7FA 50%, #EDF2FB 100%);
    background-size: 28px 28px, 100% 100%;
    background-attachment: fixed;
    padding-bottom:calc(64px + 12px + env(safe-area-inset-bottom,0px));
    -webkit-font-smoothing:antialiased;
}
a { color:var(--tn-primary); text-decoration:none; }
a:hover { text-decoration:none; }
img { max-width:100%; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-thumb { background:var(--tn-outline); border-radius:var(--tn-r-sm); }

/* ═══ App Container ═══ */
.app-container {
    max-width:480px; margin:0 auto; position:relative;
    min-height:100vh; background:transparent;
    overflow-x:hidden; line-height:1.6;
}
@media (min-width:481px) {
    .app-container { border-left:1px solid var(--tn-outline-light); border-right:1px solid var(--tn-outline-light); box-shadow:0 0 40px rgba(0,0,0,.05); }
}
/* ═════════════════════════════════════════════════════════════════════
   T-PAD-104: SITE MODE — uniform landing-style layout for ALL pages.
   Header/footer come from views/home/landing-page.php (lp-header / lp-footer).
   Container constraints removed; content width matches landing (1400px).
   ═════════════════════════════════════════════════════════════════════ */
body.app-mode-site {
    background:var(--tn-surface,#F5F7FA);
    /* No bottom-nav in site mode → remove the 76px padding reserved for it */
    padding-bottom:0!important;
    background-image:none!important;
}
body.app-mode-site .site-main {
    display:block; max-width:1400px; width:100%;
    margin:0 auto; padding:32px 24px 48px;
    min-height:calc(100vh - 200px);
}
@media (max-width:640px) {
    body.app-mode-site .site-main { padding:20px 14px 32px; }
}
body.app-mode-site .app-container {
    max-width:100%!important; width:100%!important; border:none!important; box-shadow:none!important;
    overflow-x:visible;
}
/* Top nav becomes a 64px sticky web-style header */
body.app-mode-site .top-nav {
    height:64px!important; min-height:64px!important;
    padding:0 24px!important;
    background:var(--tn-surface,#fff)!important;
    backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
    border-bottom:1px solid var(--tn-outline-light,#e5e7eb)!important;
    box-shadow:0 1px 2px rgba(0,0,0,.04)!important;
    position:sticky; top:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
}
body.app-mode-site .top-nav .nav-right,
body.app-mode-site .top-nav .nav-left { display:flex; align-items:center; gap:14px; }
body.app-mode-site .nav-logo { height:36px!important; width:auto; }
body.app-mode-site .nav-title { font-size:18px!important; font-weight:800; }
body.app-mode-site .top-nav-links { display:flex!important; gap:18px; margin-right:20px; }
body.app-mode-site .top-nav-link { font-size:14px; font-weight:600; padding:6px 4px; }
body.app-mode-site .nav-hamburger { display:none!important; }
/* Main content: web-standard 1200px column, generous padding, no flex gaps that look mobile */
body.app-mode-site .main-content {
    max-width:1200px!important; width:100%!important; margin:0 auto!important;
    padding:32px 24px 48px!important; min-height:calc(100vh - 64px - 200px);
}
/* Hide the app-style bottom nav in site mode */
body.app-mode-site .bottom-nav { display:none!important; }
/* Site footer */
.site-footer {
    background:var(--tn-surface-variant,#f8fafc);
    border-top:1px solid var(--tn-outline-light,#e5e7eb);
    margin-top:48px;
    padding:36px 24px 20px;
}
.site-footer-inner {
    max-width:1200px; margin:0 auto;
    display:flex; flex-direction:column; gap:24px;
}
.site-footer-brand { display:flex; align-items:center; gap:12px; }
.site-footer-logo  { height:36px; width:auto; border-radius:6px; }
.site-footer-name  { font-size:16px; font-weight:800; color:var(--tn-on-surface,#0f172a); }
.site-footer-links { display:flex; flex-wrap:wrap; gap:8px 22px; }
.site-footer-links a {
    color:var(--tn-on-surface-var,#475569); font-size:14px; font-weight:500;
    text-decoration:none; transition:color .15s;
}
.site-footer-links a:hover { color:var(--tn-primary,#0d47a1); }
.site-footer-copy {
    font-size:12px; color:var(--tn-on-surface-var,#64748b);
    padding-top:16px; border-top:1px solid var(--tn-outline-light,#e5e7eb);
}
@media (max-width:640px) {
    body.app-mode-site .top-nav { padding:0 14px!important; }
    body.app-mode-site .top-nav-links { display:none!important; }
    body.app-mode-site .nav-hamburger { display:inline-flex!important; }
    body.app-mode-site .main-content { padding:20px 14px 32px!important; }
    .site-footer { padding:28px 14px 16px; }
}
/* Article/tag/form wrappers inside site mode: keep their existing centered layout but
   let them breathe (the wrapper provides its own card styling). */
body.app-mode-site .article-wrap,
body.app-mode-site .form-wrap { max-width:100%; }

/* ═══ Header — 44px sticky blur ═══ */
.top-nav {
    position:sticky; top:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; height:44px;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--tn-outline-light);
    box-shadow:0 1px 6px rgba(0,0,0,.05);
    margin:0; border-radius:0;
}
.top-nav::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--tn-primary-dark), var(--tn-primary), var(--p-400));
}
.nav-right { display:flex; align-items:center; gap:8px; overflow:hidden; }
.nav-logo { width:28px; height:28px; border-radius:6px; object-fit:contain; flex-shrink:0; border:none; outline:none; display:block; }
.nav-title { font-size:15px; font-weight:700; color:var(--tn-primary); letter-spacing:.5px; flex-shrink:0; }
.nav-left { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.top-nav-links { display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.top-nav-links::-webkit-scrollbar { display:none; }
.top-nav-link { flex-shrink:0; padding:4px 10px; font-size:13px; font-weight:600; color:var(--tn-on-surface-var,#6B7280); text-decoration:none; border-radius:var(--tn-r-full); transition:background .15s,color .15s; white-space:nowrap; }
.top-nav-link:hover { background:var(--tn-primary-light,rgba(21,101,192,.1)); color:var(--tn-primary); }
.top-nav-link.active { background:var(--tn-primary-light,rgba(21,101,192,.1)); color:var(--tn-primary); }
.nav-user-name { font-size:12px; font-weight:700; color:var(--tn-on-surface-var); }
.nav-avatar {
    display:inline-flex; align-items:center; gap:6px; border:none;
    background:var(--tn-primary-light); color:var(--tn-primary);
    font-size:12px; font-weight:700; font-family:var(--tn-font);
    padding:5px 12px; border-radius:var(--tn-r-lg); cursor:pointer;
    position:relative; transition:background .2s; text-decoration:none;
}
.nav-avatar:hover { background:var(--tn-primary-container); color:var(--tn-primary); text-decoration:none; }
/* Avatar with full name pill */
.nav-avatar-full {
    display:inline-flex; align-items:center;
    background:var(--tn-primary-light); color:var(--tn-primary);
    font-size:12px; font-weight:700; font-family:var(--tn-font);
    padding:5px 12px; border-radius:var(--tn-r-lg); cursor:pointer;
    max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    transition:background .2s; text-decoration:none;
}
.nav-avatar-full:hover { background:var(--tn-primary-container); color:var(--tn-primary); text-decoration:none; }
/* Bell button in header */
.nav-bell-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%;
    color:var(--tn-on-surface-var); text-decoration:none;
    transition:background .2s;
}
.nav-bell-btn:hover { background:var(--tn-primary-light); color:var(--tn-primary); text-decoration:none; }

/* Profile icon button (replaces full name) */
.nav-profile-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%;
    background:var(--tn-primary-light); color:var(--tn-primary);
    text-decoration:none; transition:background .2s;
}
.nav-profile-icon:hover { background:var(--tn-primary-container); text-decoration:none; }

/* Hamburger button — hidden on desktop */
.nav-hamburger {
    display:none; background:none; border:none; cursor:pointer;
    color:var(--tn-on-surface-var); padding:4px; border-radius:var(--tn-r-sm);
    transition:background .15s;
}
.nav-hamburger:hover { background:var(--tn-primary-light); color:var(--tn-primary); }

/* Mobile drawer */
.nav-drawer-backdrop {
    display:none; position:fixed; inset:0; z-index:199;
    background:rgba(0,0,0,.4); backdrop-filter:blur(2px);
}
.nav-drawer-backdrop.open { display:block; }
.nav-drawer {
    position:fixed; top:0; right:-280px; z-index:200;
    width:260px; height:100%; max-height:100vh; background:#fff;
    box-shadow:-4px 0 24px rgba(0,0,0,.12);
    transition:right .25s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column; direction:rtl;
    overflow:hidden;
}
.nav-drawer.open { right:0; }
.nav-drawer-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid var(--tn-outline-light);
}
.nav-drawer-close {
    background:none; border:none; font-size:22px; cursor:pointer;
    color:var(--tn-on-surface-var); line-height:1; padding:4px;
}
.nav-drawer-link {
    display:block; padding:12px 18px; font-size:14px; font-weight:600;
    color:var(--tn-on-surface-var); text-decoration:none;
    border-bottom:1px solid var(--tn-outline-light);
    transition:background .15s;
}
.nav-drawer-link:hover { background:var(--tn-surface); text-decoration:none; }
.nav-drawer-link.active { color:var(--tn-primary); background:var(--tn-primary-light); }
.nav-drawer-body {
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.nav-drawer-footer {
    flex-shrink:0; padding:12px 18px;
    padding-bottom:max(12px, env(safe-area-inset-bottom));
    border-top:1px solid var(--tn-outline-light,#e5e7eb);
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:#fff;
}
.nav-drawer-user {
    display:flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600; color:var(--tn-on-surface,#1A1C1E);
    overflow:hidden; min-width:0; flex:1;
}
.nav-drawer-user span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-drawer-user svg { flex-shrink:0; color:var(--tn-on-surface-var,#6B7280); }
.nav-drawer-logout {
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:var(--tn-r-sm); flex-shrink:0;
    color:var(--tn-error,#DC2626); background:rgba(220,38,38,.08);
    transition:background .15s; text-decoration:none;
}
.nav-drawer-logout:hover { background:rgba(220,38,38,.15); text-decoration:none; }

@media (max-width:600px) {
    .top-nav-links { display:none!important; }
    .nav-hamburger { display:flex; }
}
@media (min-width:601px) {
    .nav-hamburger { display:none!important; }
    .nav-drawer, .nav-drawer-backdrop { display:none!important; }
}

/* Admin toggle: when header_force_hamburger=1, hide inline nav at all widths
   and always show the hamburger + drawer. Overrides desktop @media block above. */
body.force-hamburger .top-nav-links { display:none!important; }
body.force-hamburger .nav-hamburger { display:flex!important; }
body.force-hamburger .nav-drawer { display:flex!important; }
body.force-hamburger .nav-drawer-backdrop { display:none; }
body.force-hamburger .nav-drawer-backdrop.open { display:block!important; }

/* ═══ Bottom Nav — floating pill ═══ */
.bottom-nav {
    position:fixed; bottom:0;
    left:50%; transform:translateX(-50%);
    width:100%; max-width:800px;
    display:flex; justify-content:space-around; align-items:center;
    height:calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom:env(safe-area-inset-bottom, 0px);
    border-radius:20px 20px 0 0;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%);
    box-shadow:0 -4px 20px rgba(0,0,0,.08);
    z-index:100;
}
.bnav-item {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 14px; border:none; background:none; cursor:pointer;
    color:#94a3b8; font-family:var(--tn-font);
    transition:color .2s; position:relative; text-decoration:none;
    font-size:10px; font-weight:600;
}
.bnav-item:hover { text-decoration:none; }
.bnav-item.active { color:var(--tn-primary); }
.bnav-item.active span:last-child { font-weight:700; }
.bnav-item.active::after {
    content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
    width:24px; height:3px; background:var(--tn-primary); border-radius:var(--tn-r-lg);
}
.bnav-icon {
    display:flex; align-items:center; justify-content:center;
    width:22px; height:22px;
}
.bnav-icon-img { width:22px; height:22px; object-fit:contain; opacity:.6; }
.bnav-icon-img.bnav-avatar { width:24px; height:24px; opacity:1; border-radius:50%; object-fit:cover; }
.nav-profile-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; display:block; }
.bnav-icon .icon { filter:brightness(0) saturate(100%) invert(65%) sepia(5%) saturate(500%) hue-rotate(190deg) brightness(90%); }
.bnav-item.active .bnav-icon .icon { filter:brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(1000%) hue-rotate(200deg) brightness(100%); }
.bnav-item.active .bnav-icon img { opacity:1; }
.bnav-item span:last-child { font-size:10px; font-weight:600; }
.nav-badge {
    position:absolute; top:0; left:50%; transform:translateX(20%);
    background:#ef4444; color:#fff; font-size:10px; min-width:18px; height:18px;
    border-radius:var(--tn-r-sm); display:flex; align-items:center; justify-content:center;
    padding:0 5px; font-weight:700; border:2px solid #fff;
}
@keyframes tn-pad-dot { 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,68,68,.6);} 50%{transform:scale(1.2);box-shadow:0 0 0 4px rgba(239,68,68,0);} }

/* ═══ Main Content ═══ */
.main-content {
    padding:12px 14px 70px; min-height:calc(100vh - 44px);
    background:transparent; display:flex; flex-direction:column; gap:16px;
}

/* ═══ Page Animation ═══ */
.tn-page, .main-content > *:first-child { animation:tn-fadein .25s cubic-bezier(.2,0,0,1); }
@keyframes tn-fadein { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ═══ Loading ═══ */
.tn-loading { position:fixed; inset:0; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; z-index:9999; backdrop-filter:blur(4px); }
.tn-spinner { width:36px; height:36px; border:3px solid var(--tn-outline); border-top-color:var(--tn-primary); border-radius:50%; animation:tn-spin .7s linear infinite; }
@keyframes tn-spin { to{transform:rotate(360deg)} }

/* ═══ Cards ═══ */
.card, .article-card, .profile-card, .article-detail {
    background:var(--tn-surface-card); border-radius:var(--tn-r-md);
    box-shadow:var(--tn-s1); overflow:hidden; margin-bottom:12px;
    border:1px solid var(--tn-outline-light);
    transition:box-shadow .2s, transform .2s;
}
.card { padding:18px; }
.card:active, .article-card:active { transform:scale(.99); }
.article-card { text-decoration:none; color:inherit; display:block; }
.article-card:hover { text-decoration:none; color:inherit; box-shadow:var(--tn-s2); }
.article-card.urgent { border-right:4px solid var(--tn-error); }
.article-card.public { border-right:4px solid var(--tn-primary); }

.card-body { padding:16px 18px; display:flex; gap:14px; align-items:flex-start; flex-direction:row-reverse; }
.card-media { flex-shrink:0; width:150px; }
.card-featured-img { width:150px; height:110px; object-fit:cover; border-radius:var(--tn-r-sm); display:block; }
.card-content { flex:1; min-width:0; }
.title-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; gap:12px; }
.card-title { font-size:16px; font-weight:700; color:var(--tn-on-surface); line-height:1.5; flex:1; }
.new-badge {
    background:var(--tn-error); color:#fff; font-size:11px; font-weight:700;
    padding:4px 14px; border-radius:var(--tn-r-lg); white-space:nowrap; flex-shrink:0;
}
.card-text { font-size:14px; line-height:1.8; color:var(--tn-on-surface-var); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:480px) {
    .card-body { flex-direction:column-reverse; }
    .card-media { width:100%; }
    .card-featured-img { width:100%; height:180px; }
}
.card-text.expanded { -webkit-line-clamp:unset; }
.card-footer { background:var(--tn-surface); padding:12px 18px; border-top:1px solid var(--tn-outline-light); display:flex; justify-content:space-between; align-items:center; }
.card-author { font-size:13px; font-weight:700; color:var(--tn-on-surface); }
.card-date { font-size:12px; color:var(--tn-on-surface-var); }
.section-title { font-size:13px; font-weight:700; color:var(--tn-on-surface-var); margin-bottom:10px; letter-spacing:.5px; }

/* News detail */
.article-detail .card-body { padding:24px; display:block; }
.article-detail .card-title { font-size:20px; margin-bottom:8px; }
.article-detail .news-meta { font-size:12px; color:var(--tn-on-surface-var); margin-bottom:20px; }
.article-detail .news-body { font-size:15px; line-height:2; color:var(--tn-on-surface); white-space:pre-line; }
.article-detail .news-body img { border-radius:var(--tn-r-sm); margin:12px 0; max-width:100%; height:auto; }
.article-detail .news-body::after { content:''; display:block; clear:both; }
.article-detail .news-body h2, .article-detail .news-body h3 { color:var(--tn-primary-dark); margin:16px 0 8px; }
/* T-PAD-105: per-block direction — first strong char decides RTL/LTR; covers <p>, <div>, headings, lists */
.article-detail .news-body p,
.article-detail .news-body > div,
.article-detail .news-body h1,
.article-detail .news-body h2,
.article-detail .news-body h3,
.article-detail .news-body h4,
.article-detail .news-body li,
.article-detail .news-body blockquote,
.news-body p,
.news-body > div,
.news-body h1,
.news-body h2,
.news-body h3,
.news-body h4,
.news-body li,
.news-body blockquote { unicode-bidi:plaintext; text-align:start; }

/* ═══ Buttons ═══ */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 24px; border:none; border-radius:var(--tn-r-full);
    font-size:14px; font-weight:700; font-family:var(--tn-font);
    cursor:pointer; transition:all .2s cubic-bezier(.2,0,0,1);
    min-height:46px; position:relative; overflow:hidden;
    background:var(--tn-surface-dim); color:var(--tn-on-surface);
    text-decoration:none;
}
.btn:hover { text-decoration:none; }
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.4; pointer-events:none; }
.btn-primary { background:var(--tn-primary); color:var(--tn-on-primary); box-shadow:var(--tn-s1); }
.btn-primary:hover { background:var(--tn-primary-dark); box-shadow:var(--tn-s2); }
.btn-secondary { background:transparent; border:1.5px solid var(--tn-outline); color:var(--tn-primary); }
.btn-secondary:hover { background:var(--tn-primary-light); border-color:var(--tn-primary-container); }
.btn-danger { background:transparent; border:1.5px solid #FFCDD2; color:var(--tn-error); }
.btn-danger:hover { background:var(--tn-error-bg); }
.btn-full { width:100%; }
.btn-lg { padding:14px 28px; font-size:15px; min-height:50px; }
.btn-sm { padding:8px 16px; font-size:13px; min-height:36px; border-radius:var(--tn-r-lg); }

/* ═══ Form Fields ═══ */
.form-group { margin-bottom:16px; }
.form-group label { display:block; margin-bottom:6px; font-size:12px; font-weight:700; color:var(--tn-on-surface-var); }
.form-group input, .form-group select, .form-group textarea {
    width:100%; padding:14px 44px 14px 14px;
    border:1.5px solid var(--tn-outline); border-radius:var(--tn-r-sm);
    font-size:15px; font-family:var(--tn-font); color:var(--tn-on-surface);
    background:var(--tn-surface-card); transition:border .2s, box-shadow .2s;
    -webkit-appearance:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline:none; border-color:var(--tn-primary); box-shadow:0 0 0 3px rgba(21,101,192,.1);
}
.form-group input::placeholder { text-align:center; }

/* ═══ Alerts ═══ */
/* T-PAD-ALERT-STYLES — alias legacy variant names so all flash markup renders. */
.alert,
.alert-success, .alert-error, .alert-err, .alert-info, .alert-warn, .alert-warning {
    padding:10px 14px; border-radius:var(--tn-r-sm); margin-bottom:12px; font-size:13px; border-right:3px solid;
}
.alert.success, .alert-success { color:var(--tn-success); background:var(--tn-success-bg); border-color:var(--tn-success); }
.alert.error,   .alert-error, .alert-err { color:var(--tn-error);   background:var(--tn-error-bg);   border-color:var(--tn-error); }
.alert.info,    .alert-info    { color:var(--tn-primary);  background:var(--tn-primary-light); border-color:var(--tn-primary); }
.alert.warn,    .alert-warn, .alert-warning { color:var(--tn-warn, #c2410c); background:var(--tn-warn-bg, #fff7ed); border-color:var(--tn-warn, #c2410c); }

/* ═══ Chips ═══ */
.chip { display:inline-flex; align-items:center; padding:4px 14px; border-radius:var(--tn-r-lg); font-size:11px; font-weight:700; }
.group-chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { background:var(--tn-primary-light); color:var(--tn-primary-dark); }

/* ═══ Empty State ═══ */
.empty-state { text-align:center; padding:52px 20px; }
.empty-icon-wrap { width:80px; height:80px; margin:0 auto 16px; background:var(--tn-surface-dim); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--tn-on-surface-var); }
.empty-state p { color:var(--tn-on-surface-var); font-size:15px; margin:0 0 20px; }

/* ═══ Snackbar ═══ */
.tn-snackbar { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(100px); background:#323232; color:#fff; padding:14px 24px; border-radius:var(--tn-r-sm); font-size:14px; font-weight:700; font-family:var(--tn-font); box-shadow:var(--tn-s3); z-index:300; transition:transform .3s cubic-bezier(.2,0,0,1), visibility .3s; max-width:440px; text-align:center; visibility:hidden; }
/* بدونِ visibility، اسنک‌بارِ خالیِ ۴۸پیکسلی با translateY(100px) کامل پایین نمی‌رفت و یک نوارِ مشکی زیرِ منوی پایین می‌ماند. */
.tn-snackbar-show { transform:translateX(-50%) translateY(0); visibility:visible; }

/* ═══ Skeleton ═══ */
.tn-skeleton-card { background:var(--tn-surface-card); border-radius:var(--tn-r-md); height:100px; margin-bottom:12px; overflow:hidden; border:1px solid var(--tn-outline-light); position:relative; }
.tn-skeleton-card::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(0,0,0,.03),transparent); animation:tn-shimmer 1.5s infinite; }
@keyframes tn-shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* ═══ Tabs ═══ */
.tabs-bar { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.tabs-bar::-webkit-scrollbar { display:none; }
.tab {
    white-space:nowrap; padding:8px 18px; border-radius:var(--tn-r-full);
    background:rgba(255,255,255,.8); color:var(--tn-on-surface-var); text-decoration:none;
    font-size:13px; font-weight:700; border:1px solid var(--tn-outline-light);
    transition:all .15s; flex-shrink:0; display:flex; align-items:center; gap:6px;
}
.tab:hover { background:var(--tn-surface-card); text-decoration:none; }
.tab.active { background:var(--tn-primary); color:var(--tn-on-primary); border-color:var(--tn-primary); }
.tab-count { background:rgba(255,255,255,.25); color:inherit; font-size:11px; font-weight:700; padding:1px 7px; border-radius:var(--tn-r-lg); }
.tab.active .tab-count { background:rgba(255,255,255,.2); }

/* ═══ Profile — Gradient Hero ═══ */
.profile-card { border-radius:var(--tn-r-md); }
.profile-header {
    text-align:center; padding:28px 20px 20px;
    background:linear-gradient(135deg, var(--tn-primary), var(--tn-primary-dark));
    color:#fff; border-radius:0 0 var(--tn-r-lg) var(--tn-r-lg);
}
.profile-avatar {
    width:64px; height:64px; border-radius:50%;
    background:rgba(255,255,255,.2); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:24px; font-weight:700; margin:0 auto 10px;
    border:3px solid rgba(255,255,255,.3);
}
.profile-header h2 { font-size:18px; font-weight:700; }
.profile-header p { font-size:13px; opacity:.75; margin-top:2px; }
.profile-body { padding:20px; }

/* Profile list-group */
.profile-list-group { background:var(--tn-surface-card); border-radius:var(--tn-r-md); box-shadow:var(--tn-s1); overflow:hidden; border:1px solid var(--tn-outline-light); }
.profile-list-item { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--tn-outline-light); }
.profile-list-item:last-child { border-bottom:none; }
.profile-list-icon { color:var(--tn-primary); flex-shrink:0; display:flex; width:36px; height:36px; align-items:center; justify-content:center; background:var(--tn-primary-light); border-radius:var(--tn-r-sm); }
.profile-list-text { flex:1; }
.profile-list-label { font-size:12px; color:var(--tn-on-surface-var); }
.profile-list-value { font-size:14px; font-weight:700; color:var(--tn-on-surface); }

/* Legacy profile table (backward compat) */
.profile-table { width:100%; }
.profile-table td { padding:12px 0; border-bottom:1px solid var(--tn-outline-light); font-size:14px; }
.profile-table tr:last-child td { border:none; }
.profile-table .label { color:var(--tn-on-surface-var); width:120px; font-weight:600; font-size:12px; }

/* ═══ Notifications ═══ */
.notif-list { display:flex; flex-direction:column; }
.notif-date { font-size:12px; font-weight:700; color:var(--tn-on-surface-var); padding:16px 4px 8px; letter-spacing:.5px; }
.notif-item { display:flex; gap:10px; padding:12px 16px; border-bottom:1px solid var(--tn-outline-light); font-size:13px; line-height:1.5; align-items:flex-start; text-decoration:none; color:inherit; }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:var(--tn-surface); text-decoration:none; }
.notif-item.unread { background:#F0F6FF; }
.notif-item-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
.notif-item-msg { flex:1; color:var(--tn-on-surface); }
.notif-item.unread .notif-item-msg { font-weight:700; }
.notif-item-time { font-size:11px; color:var(--tn-on-surface-var); white-space:nowrap; }
/* Legacy notif classes */
.notif-icon { width:44px; height:44px; border-radius:50%; background:var(--tn-surface-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-unread .notif-icon { background:var(--tn-primary-light); }
.notif-body { flex:1; min-width:0; }
.notif-text { font-size:14px; font-weight:500; color:var(--tn-on-surface); line-height:1.5; }
.notif-unread .notif-text { font-weight:700; }
.notif-time { font-size:11px; color:var(--tn-on-surface-var); margin-top:2px; }
.notif-dot { width:10px; height:10px; border-radius:50%; background:var(--tn-primary); flex-shrink:0; }

/* ═══ Messenger Channel List ═══ */
.channel-list { display:flex; flex-direction:column; gap:6px; }
.channel-item {
    display:flex; align-items:center; gap:12px; padding:14px 16px;
    background:var(--tn-surface-card); text-decoration:none; color:inherit;
    border-radius:var(--tn-r-sm); box-shadow:var(--tn-s1);
    transition:all .15s;
}
.channel-item:hover { box-shadow:var(--tn-s2); text-decoration:none; color:inherit; }
.channel-icon { width:44px; height:44px; border-radius:var(--tn-r-md); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--tn-primary-light); }
.channel-icon img { width:100%; height:100%; object-fit:cover; }
.channel-info { flex:1; min-width:0; }
.channel-name { font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--tn-on-surface); }
.channel-preview { font-size:12px; color:var(--tn-on-surface-var); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.channel-time { font-size:11px; color:var(--tn-on-surface-var); flex-shrink:0; }
.unread-badge { background:var(--tn-primary); color:var(--tn-on-primary); font-size:11px; min-width:20px; height:20px; border-radius:var(--tn-r-sm); display:inline-flex; align-items:center; justify-content:center; padding:0 6px; font-weight:700; }

/* ═══ Messenger Split Layout ═══ */
.messenger-wrap {
    display:flex; margin:-12px -14px;
    background:var(--tn-surface-card); border-radius:0;
    min-height:calc(100vh - 44px - 84px);
}
.msng-sidebar {
    width:100%; display:flex; flex-direction:column;
    background:var(--tn-surface-card); flex-shrink:0;
}
.msng-channel-list { flex:1; overflow-y:auto; }
.msng-ch-item {
    display:flex; align-items:center; gap:10px; padding:12px 16px;
    cursor:pointer; transition:background .15s; text-decoration:none; color:var(--tn-on-surface);
    border-bottom:1px solid var(--tn-outline-light);
}
.msng-ch-item:hover { background:var(--tn-surface); text-decoration:none; }
.msng-ch-item.active { background:var(--tn-primary-light); }
.msng-ch-avatar { width:36px; height:36px; border-radius:var(--tn-r-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--tn-primary-light); color:var(--tn-primary); overflow:hidden; }
.msng-ch-avatar img { width:100%; height:100%; object-fit:cover; }
.msng-ch-dot { width:10px; height:10px; border-radius:50%; background:var(--tn-primary); flex-shrink:0; }
.msng-ch-avatar-init {
    width:44px; height:44px; border-radius:50%;
    background:var(--tn-primary); color:var(--tn-on-primary);
    display:flex; align-items:center; justify-content:center;
    font-size:17px; font-weight:700; flex-shrink:0; line-height:1;
}
.msng-ch-item.active .msng-ch-avatar-init { background:var(--tn-primary-dark); }
.msng-search-wrap {
    padding:10px 12px; flex-shrink:0;
    background:var(--tn-surface-card);
    border-bottom:1px solid var(--tn-outline-light);
}
.msng-search-row {
    position:relative;
}
.msng-search-input {
    width:100%; padding:9px 36px 9px 14px;
    border:1.5px solid var(--tn-outline); border-radius:var(--tn-r-full);
    font-size:13px; font-family:var(--tn-font);
    background:var(--tn-surface); color:var(--tn-on-surface);
    outline:none; direction:rtl; box-sizing:border-box;
}
.msng-search-input:focus { border-color:var(--tn-primary); background:#fff; box-shadow:0 0 0 3px rgba(21,101,192,.08); }
.msng-search-icon {
    position:absolute; top:50%; transform:translateY(-50%);
    right:12px; color:var(--tn-on-surface-var); pointer-events:none;
}
.msng-action-pill {
    width:34px; height:34px; border-radius:50%;
    border:1.5px solid var(--tn-outline);
    background:var(--tn-surface-card); color:var(--tn-on-surface-var);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all .15s; flex-shrink:0;
}
.msng-action-pill:hover { border-color:var(--tn-primary); color:var(--tn-primary); }
.msng-action-pill.active { background:var(--tn-primary); color:var(--tn-on-primary); border-color:var(--tn-primary); }
.msng-action-pill-primary { background:var(--tn-primary); color:var(--tn-on-primary); border-color:var(--tn-primary); }
.msng-action-pill-primary:hover { background:var(--tn-primary-dark,#0D47A1); border-color:var(--tn-primary-dark,#0D47A1); }
.msng-ch-body { flex:1; min-width:0; }
.msng-ch-name { font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; }
.msng-ch-preview { font-size:11px; color:var(--tn-on-surface-var); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msng-ch-time { font-size:10px; color:var(--tn-on-surface-var); font-weight:500; flex-shrink:0; }
.msng-unread { background:var(--tn-primary); color:var(--tn-on-primary); font-size:10px; min-width:18px; height:18px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; font-weight:700; }
.msng-empty-list { text-align:center; padding:40px 20px; color:var(--tn-on-surface-var); font-size:13px; }
.msng-chat { flex:1; display:flex; flex-direction:column; min-width:0; background:#E5DDD5; }
.msng-chat-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--tn-on-surface-var); gap:12px; padding:40px; }

/* Chat header */
.chat-header-bar {
    display:flex; align-items:center; gap:10px; padding:0 14px; height:44px;
    background:rgba(255,255,255,.92); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--tn-outline-light); flex-shrink:0; position:relative;
}
.chat-header-bar::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--tn-primary-dark), var(--tn-primary), var(--p-400));
}
.chat-back-btn { display:none; background:none; border:none; color:var(--tn-on-surface-var); cursor:pointer; padding:4px; border-radius:var(--tn-r-sm); }
.chat-header-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.chat-header-avatar-init { width:32px; height:32px; border-radius:50%; background:var(--tn-primary); color:var(--tn-on-primary); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; line-height:1; }
.chat-header-icon { width:32px; height:32px; border-radius:50%; background:var(--tn-primary-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-header-info { flex:1; min-width:0; }
.chat-header-name { font-size:14px; font-weight:700; color:var(--tn-on-surface); }
.chat-header-desc { font-size:11px; color:var(--tn-on-surface-var); }

/* ═══ Chat Messages ═══ */
.chat-messages-area {
    flex:1; overflow-y:auto; padding:12px 14px;
    display:flex; flex-direction:column; gap:6px;
    background:#E5DDD5; -webkit-overflow-scrolling:touch;
}
.msg-date-sep { text-align:center; padding:10px 0; }
.msg-date-sep span { background:rgba(255,255,255,.85); backdrop-filter:blur(4px); padding:4px 14px; border-radius:var(--tn-r-lg); font-size:11px; color:var(--tn-on-surface-var); font-weight:500; box-shadow:0 1px 4px rgba(0,0,0,.05); }

/* T-153 (T-A): msg-row spans full chat width so name/bubble/meta align to a virtual
   left column (row-in) or right column (row-out). The bubble's own width stays
   constrained by max-width on .msg-bubble (T-153 — see below). */
.msg-row { display:flex; width:100%; animation:tn-msg-in .2s ease; margin-bottom:1px; }
.msg-row.msg-first { margin-top:10px; }
.msg-row.msg-continuation { margin-top:1px; }
.msg-row.msg-last-of-group { margin-bottom:2px; }
@keyframes tn-msg-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.row-out { justify-content:flex-start; }   /* RTL: flex-start = راست → پیام خود راست‌چین */
.row-in  { justify-content:flex-end; }     /* RTL: flex-end = چپ → پیام دیگران چپ‌چین */
.msg-avatar { display:none; }
.msg-bubble-wrap { display:flex; flex-direction:column; min-width:0; max-width:82%; }
.row-out .msg-bubble-wrap { align-items:flex-start; }  /* RTL: items چسبیده به راست wrap */
.row-in  .msg-bubble-wrap { align-items:flex-end; }    /* RTL: items چسبیده به چپ wrap */
.msg-row.unread-msg .msg-bubble { font-weight:700; }
.msg-row.unread-msg .msg-in { background:#EBF3FF; }
.msg-sender-name { font-size:11px; font-weight:700; color:var(--tn-primary); margin-bottom:2px; padding-right:2px; }
.msg-reply-bar { background:rgba(21,101,192,.08); border-right:3px solid var(--tn-primary); padding:4px 8px; border-radius:6px; font-size:11px; color:var(--tn-on-surface-var); margin-bottom:2px; display:flex; align-items:center; gap:4px; direction:rtl; }

.msg-bubble {
    padding:10px 14px 6px; border-radius:var(--tn-r-lg); font-size:14px; line-height:1.7;
    word-wrap:break-word; word-break:break-word; overflow-wrap:anywhere;
    white-space:pre-wrap; position:relative; direction:rtl; text-align:right;
    max-width:100%;
}
.msg-in { background:#fff; border-bottom-left-radius:6px; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.msg-out { background:#DCF8C6; border-bottom-right-radius:6px; color:var(--tn-on-surface); }
.msg-deleted { opacity:.5; font-style:italic; }
.msg-bubble-text { white-space:pre-wrap; }
.msg-bubble-text a { color:var(--tn-primary); text-decoration:underline; word-break:break-all; }

/* T-153 (T-A): Message footer — DOM order in template is [actions] [time] [seen?].
   - row-in  (دیگران): direction:ltr → visual order = actions | time → ساعت سمت راست actions
   - row-out (خود):    flex-direction:row-reverse → visual order = seen | time | actions → ساعت سمت چپ actions
*/
.msg-meta { display:flex; align-items:center; gap:4px; margin-top:4px; direction:ltr; }
.row-out .msg-meta { flex-direction:row-reverse; }
.msg-time { font-size:11px; color:rgba(0,0,0,.35); direction:ltr; }
.msg-seen { font-size:12px; color:rgba(0,0,0,.25); letter-spacing:-3px; }
.msg-seen-read { color:#53bdeb; }
/* T-153 (T-A): actions همیشه قابل مشاهده — قبلاً فقط hover. کاربر می‌خواهد همیشه دیده شوند تا چینش ستونی واضح باشد. */
.msg-actions { display:flex; gap:3px; opacity:.55; transition:opacity .15s; }
.msg-row:hover .msg-actions { opacity:1; }
@media (hover:none) { .msg-actions { opacity:1; } }
.msg-action-btn {
    background:rgba(255,255,255,.9); border:none; border-radius:50%; width:22px; height:22px;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 4px rgba(0,0,0,.1); transition:background .15s; padding:0;
    color:var(--tn-on-surface-var);
}
.msg-action-btn:hover { background:#fff; color:var(--tn-primary); }
.delete-btn:hover { color:var(--tn-error) !important; }

/* Media in chat */
.msg-img { max-width:240px; max-height:240px; border-radius:var(--tn-r-md); display:block; cursor:pointer; object-fit:cover; }
.msg-lightbox { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; cursor:zoom-out; animation:lbFade .2s; padding:16px; }
.msg-lightbox img { max-width:100%; max-height:100%; border-radius:4px; object-fit:contain; }
.msg-lightbox-close { position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.15); border:none; color:#fff; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
@keyframes lbFade { from{opacity:0} to{opacity:1} }
.msg-audio { max-width:240px; outline:none; }
.msg-file-link { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; margin-top:6px; background:rgba(0,0,0,.04); border-radius:var(--tn-r-sm); font-size:12px; color:var(--tn-primary); text-decoration:none; }
.msg-out .msg-file-link { background:rgba(0,0,0,.06); color:var(--tn-on-surface); }
.msg-location { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:rgba(0,0,0,.04); border-radius:var(--tn-r-sm); font-size:12px; color:var(--tn-primary); text-decoration:none; }
.msg-bubble .msg-attach-link { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; margin-top:6px; background:rgba(0,0,0,.04); border-radius:var(--tn-r-sm); font-size:12px; color:var(--tn-primary); text-decoration:none; }

/* T-153 (T-A): Mobile — تمام‌عرض، رنگ متفاوت مانند WhatsApp/Telegram تفکیک کند.
   max-width روی bubble برداشته می‌شود ولی wrap همچنان padding دارد تا تنفس بصری بماند. */
@media (max-width: 640px) {
    .msg-bubble-wrap { max-width:92%; }
    .msg-bubble { font-size:14px; }
    .msg-in  { background:#FFFFFF; }
    .msg-out { background:#D9FDD3; }   /* سبز روشن‌تر برای موبایل، شبیه WhatsApp */
}

/* ═══ Chat Input Bar — pill style ═══ */
.chat-input-bar { margin:4px 10px 10px; padding:4px 6px; background:#fff; border-radius:var(--tn-r-full); border:1.5px solid var(--tn-outline-light); box-shadow:var(--tn-s1); flex-shrink:0; display:flex; gap:6px; align-items:flex-end; }
.attach-btns { display:flex; gap:2px; flex-shrink:0; }
.attach-btn {
    width:40px; height:44px; border-radius:50%; background:none; border:none;
    cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--tn-on-surface-var);
    transition:color .15s; flex-shrink:0;
}
.attach-btn:hover { color:var(--tn-primary); }
.chat-emoji-btn { background:none; border:none; cursor:pointer; padding:4px; font-size:20px; line-height:1; flex-shrink:0; }
.chat-emoji-panel { display:none; background:#fff; border:1.5px solid var(--tn-outline); border-radius:var(--tn-r-md); padding:8px; max-height:160px; overflow-y:auto; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.chat-emoji-panel.show { display:block; }
.chat-emoji-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; text-align:center; }
.chat-emoji-grid span { cursor:pointer; padding:4px; border-radius:6px; font-size:18px; transition:background .1s; }
.chat-emoji-grid span:hover { background:var(--tn-surface); }
.chat-file-name { font-size:12px; color:var(--tn-primary); padding:4px 10px; background:var(--tn-primary-light); border-radius:var(--tn-r-sm); margin-top:4px; display:flex; align-items:center; gap:6px; }
.chat-input {
    flex:1; border:none; background:transparent;
    border-radius:0; padding:8px 6px; font-size:15px; font-family:var(--tn-font);
    resize:none; max-height:120px; min-height:36px; outline:none; color:var(--tn-on-surface);
    direction:auto; text-align:right; line-height:1.5;
}
.chat-input:focus { border:none; outline:none; background:transparent; box-shadow:none; }
.chat-send-btn {
    width:44px; height:44px; border-radius:50%; border:none;
    background:var(--tn-primary); color:var(--tn-on-primary);
    cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:all .2s; box-shadow:var(--tn-s1);
}
.chat-send-btn:hover { background:var(--tn-primary-dark); }
.chat-send-btn:active { transform:scale(.9); }
.chat-send-btn:disabled { opacity:.4; cursor:not-allowed; }
.chat-send-btn svg { transform:scaleX(-1); }
/* ═══ New Chat Input v2 — full-width textarea + action row ═══ */
.chat-input-wrap {
    margin:4px 10px 10px; background:#fff; border-radius:var(--tn-r-lg);
    border:1.5px solid var(--tn-outline-light); box-shadow:var(--tn-s1);
    flex-shrink:0; overflow:hidden; transition:border-color .2s;
}
.chat-input-wrap:focus-within { border-color:var(--tn-primary); }
.chat-input-v2 {
    width:100%; border:none; background:transparent;
    padding:10px 14px 4px; font-size:15px; font-family:var(--tn-font);
    resize:none; max-height:120px; min-height:36px; outline:none;
    color:var(--tn-on-surface); direction:auto; text-align:right; line-height:1.5;
}
.chat-input-v2:focus { border:none; outline:none; box-shadow:none; }
.chat-input-actions {
    display:flex; align-items:center; justify-content:space-between;
    padding:4px 6px 6px;
}
.chat-action-btns { display:flex; gap:2px; }
.chat-action-btn {
    width:36px; height:36px; border-radius:50%; background:none; border:none;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:var(--tn-on-surface-var); transition:all .15s; flex-shrink:0;
    font-size:18px;
}
.chat-action-btn:hover { color:var(--tn-primary); background:var(--tn-primary-light); }
.chat-send-btn-v2 {
    width:36px; height:36px; border-radius:50%; border:none;
    background:var(--tn-primary); color:var(--tn-on-primary);
    cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:all .2s; box-shadow:var(--tn-s1);
}
.chat-send-btn-v2:hover { background:var(--tn-primary-dark); }
.chat-send-btn-v2:active { transform:scale(.9); }
.chat-send-btn-v2:disabled { opacity:.4; cursor:not-allowed; }
.chat-send-btn-v2 svg { transform:scaleX(-1); }

.chat-disabled-bar { padding:14px; text-align:center; font-size:13px; color:var(--tn-on-surface-var); background:var(--tn-surface); border-top:1px solid var(--tn-outline); flex-shrink:0; }

/* ═══ Bottom Sheet ═══ */
.tn-bottom-sheet { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; }
.tn-sheet-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); }
.tn-sheet-content { position:relative; background:#fff; border-radius:var(--tn-r-lg); padding:12px 24px 28px; max-width:420px; margin:0 16px; width:100%; box-shadow:var(--tn-s3); animation:tn-sheet-pop .25s cubic-bezier(.2,0,0,1); }
@keyframes tn-sheet-pop { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
.tn-sheet-handle { width:36px; height:4px; background:var(--tn-outline); border-radius:2px; margin:0 auto 20px; }

/* ═══ Responsive — Mobile Messenger ═══ */
@media (max-width:768px) {
    .msng-sidebar { width:100%; }
    .msng-chat { display:none; }
    .messenger-wrap.chat-open .msng-chat { display:flex; }
    .messenger-wrap.chat-open .msng-sidebar { display:none; }
    .chat-back-btn { display:flex!important; }
    .msng-chat-empty { display:none; }
    .card-body { padding:16px; }
    .card-footer { padding:10px 16px; }
}
/* ═══ Desktop Layout (≥769px) ═══ */
@media (min-width:769px) {
    /* Wider app container — matches home page width */
    .app-container { max-width:800px; overflow-x:visible; }

    /* Messenger: split-panel (sidebar list + chat pane side-by-side) */
    .chat-back-btn { display:none!important; }
    .messenger-wrap { height:calc(100vh - 44px - 84px); overflow:hidden; flex-direction:row; }
    .msng-sidebar { width:280px; border-left:1px solid var(--tn-outline-light); overflow-y:auto; order:-1; }
    .msng-chat { display:flex!important; }
    .msng-chat-empty { display:flex; }

    /* On desktop, chat-open should NOT use position:fixed — use static flex layout */
    .messenger-wrap.chat-open .msng-chat {
        position:static!important;
        top:auto!important; bottom:auto!important;
        left:auto!important; transform:none!important;
        width:auto!important; max-width:none!important;
        z-index:auto!important;
    }
    .messenger-wrap.chat-open .msng-sidebar { display:flex!important; flex-direction:column; }
}

/* ═══ Home Page ═══ */
.pad-content { max-width:700px; margin:0 auto; padding:0 16px 0; }

/* Greeting hero — sticks to the top-nav, full bleed */
.greeting-hero {
    background:linear-gradient(135deg, var(--tn-primary-dark,#0D47A1) 0%, var(--tn-primary,#1565C0) 100%);
    color:#fff; padding:18px 16px 22px;
    margin:-12px -16px 20px;
    border-bottom-left-radius:24px; border-bottom-right-radius:24px;
    position:relative; overflow:hidden;
}
.greeting-hero::before {
    content:''; position:absolute; top:-30px; right:-30px;
    width:160px; height:160px; border-radius:50%;
    background:rgba(255,255,255,.06);
}
.greeting-hero::after {
    content:''; position:absolute; bottom:-50px; left:-30px;
    width:120px; height:120px; border-radius:50%;
    background:rgba(255,255,255,.04);
}
.greeting-inner { position:relative; z-index:1; }
.greeting-label { font-size:13px; opacity:.9; font-weight:500; }
.greeting-name { font-size:22px; font-weight:800; margin-top:3px; }
.greeting-date { font-size:12px; opacity:.82; margin-top:4px; }

/* ═══ User Back Button ═══ */
.user-back-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 16px; margin-bottom:12px;
    align-self:flex-start; width:auto;
    background:rgba(255,255,255,.8); border:1px solid var(--tn-outline-light);
    border-radius:var(--tn-r-full); font-size:13px; font-weight:600;
    color:var(--tn-on-surface-var); text-decoration:none;
    transition:all .15s; cursor:pointer; font-family:var(--tn-font);
}
.user-back-btn:hover { background:var(--tn-primary-light); color:var(--tn-primary); text-decoration:none; }
.user-back-btn svg { flex-shrink:0; }

/* ═══ PAD Slider ═══ */
.page-slider-wrap { margin-bottom:20px; }
.pad-slider {
    position:relative; overflow:hidden;
    border-radius:var(--tn-r-lg);
    box-shadow:0 4px 24px rgba(0,0,0,.12);
    background:#1a1a2e;
}
.pad-slider-track {
    display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1);
    direction:ltr;
}
.pad-slide {
    min-width:100%; position:relative;
    display:block; text-decoration:none; color:inherit;
    aspect-ratio:16/7; overflow:hidden;
}
.pad-slide img, .pad-slide video {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform 6s ease-out;
}
.pad-slide.active img { transform:scale(1.04); }
.pad-slide video { transform:none!important; }
/* BUG-227 — RTL + center for no-image slide title (parity with landing.css) */
.pad-slide-no-img {
    min-width:100%; position:relative;
    display:flex; align-items:center; justify-content:center;
    aspect-ratio:16/7; overflow:hidden;
    background:linear-gradient(135deg, var(--tn-primary) 0%, var(--tn-primary-dark) 100%);
    text-decoration:none; color:#fff; font-size:18px; font-weight:700;
    padding:24px 24px 56px;
    direction:rtl; text-align:center;
}
/* BUG-228 — reserve enough bottom space for dots (10px bottom + 18px height + 8px gap = 36px → 48px safe) and clamp title to 2 lines */
/* padcore166 — عنوانِ اسلاید: بزرگ، بولد، کامل؛ گرادیانتِ نارنجیِ کدر برای کنتراستِ ثابت
   روی عکسِ روشن یا تاریک. پایهٔ رنگ = توکنِ موجودِ --tn-warn (#B26C09). */
.pad-slide-overlay {
    position:absolute; bottom:0; left:0; right:0;
    background:none;
    padding:24px 24px 56px; direction:rtl;
}
.pad-slide-title {
    display:inline; color:#fff; font-size:clamp(22px, 2.6vw, 34px); font-weight:800;
    line-height:1.9;
    background:rgba(138,82,7,.92);
    box-decoration-break:clone; -webkit-box-decoration-break:clone;
    padding:.18em .45em; border-radius:6px;
}
/* Navigation arrows */
.pad-slider-arrow {
    position:absolute; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.85); border:none;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    z-index:3; transition:all .2s;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    opacity:0;
}
.pad-slider:hover .pad-slider-arrow { opacity:1; }
.pad-slider-arrow:hover { background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.2); transform:translateY(-50%) scale(1.08); }
.pad-slider-arrow:active { transform:translateY(-50%) scale(.95); }
.pad-slider-arrow.arr-next { left:10px; }
.pad-slider-arrow.arr-prev { right:10px; }
.pad-slider-arrow svg { width:18px; height:18px; color:#333; }
/* Dots */
.pad-slider-dots {
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    display:flex; gap:6px; z-index:3;
    background:rgba(0,0,0,.25); padding:5px 10px;
    border-radius:var(--tn-r-lg); backdrop-filter:blur(4px);
}
.pad-dot {
    width:8px; height:8px; border-radius:50%;
    background:rgba(255,255,255,.45); cursor:pointer;
    transition:all .25s; border:none;
}
.pad-dot:hover { background:rgba(255,255,255,.7); }
.pad-dot.active { background:#fff; width:22px; border-radius:4px; }

/* Tabs (shared for home + forms) */
/* BUG-LA-05 — tabs wrap to next row on overflow (mobile responsive — long group names won't push horizontal scroll) */
.tabs-wrap {
    display:flex; flex-wrap:wrap; gap:6px; padding-bottom:16px;
}
.tab-btn {
    white-space:nowrap; padding:8px 18px;
    border-radius:50px; background:rgba(255,255,255,.75);
    color:var(--tn-on-surface-var); text-decoration:none; font-size:13px; font-weight:600;
    border:1px solid rgba(0,0,0,.07);
    transition:all .15s;
    display:inline-flex; align-items:center; gap:6px;
    font-family:inherit; cursor:pointer;
}
.tab-btn.active { background:var(--tn-primary); color:var(--tn-on-primary); border-color:var(--tn-primary); }
.tab-btn:hover { background:var(--tn-primary); color:var(--tn-on-primary); border-color:var(--tn-primary); }
.tab-count {
    background:rgba(255,255,255,.22); color:inherit;
    font-size:11px; font-weight:700; padding:1px 7px;
    border-radius:var(--tn-r-lg);
}
.tab-btn.active .tab-count { background:rgba(255,255,255,.18); }

/* Article cards */
.articles { display:flex; flex-direction:column; gap:20px; }
.card-wrap {
    background:var(--tn-surface-card,#fff);
    border-radius:var(--tn-r-lg);
    box-shadow:0 4px 16px rgba(0,55,123,.08);
    border-right:5px solid var(--tn-success,#2E7D32);
    overflow:hidden; text-decoration:none; color:inherit;
    display:block; transition:transform .2s, box-shadow .2s;
}
.card-wrap:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,55,123,.12); text-decoration:none; color:inherit; }
.card-wrap.urgent { border-right-color:var(--tn-error,#C62828); }
.card-wrap.public { border-right-color:var(--tn-success,#2E7D32); }
.card-body { padding:28px 30px; }
.card-title-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; gap:12px; }
.card-title { font-size:20px; font-weight:900; color:var(--tn-on-surface,#1A1C1E); line-height:1.5; flex:1; }
.new-badge {
    background:var(--tn-error); color:#fff; font-size:11px; font-weight:700;
    padding:4px 12px; border-radius:50px; white-space:nowrap; flex-shrink:0;
    box-shadow:0 2px 8px rgba(198,40,40,.3);
    animation:pRed 2s infinite;
}
@keyframes pRed { 0%,100%{transform:scale(.96)} 50%{transform:scale(1)} }
.card-feat-img { width:100%; max-height:220px; object-fit:cover; border-radius:var(--tn-r-sm); margin-bottom:16px; }
.card-text { font-size:16px; line-height:1.9; color:var(--tn-on-surface-var); white-space:pre-line; }
.card-text.preview { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-footer {
    background:var(--tn-surface,#F5F7FA); padding:16px 30px;
    border-top:1px solid var(--tn-outline-light);
    display:flex; justify-content:space-between; align-items:center;
}
.card-author { font-size:14px; font-weight:700; color:var(--tn-on-surface); }
.card-date { font-size:12px; opacity:.8; }

/* Login prompt (home) */
.login-prompt {
    background:var(--tn-surface-card,#fff); border-radius:var(--tn-r-lg);
    box-shadow:0 4px 20px rgba(0,0,0,.06);
    padding:24px 28px;
    display:flex; align-items:center; gap:16px;
    margin-bottom:20px;
    border-right:5px solid var(--tn-primary);
}
.login-prompt p { font-size:14px; color:var(--tn-on-surface-var); line-height:1.7; flex:1; }

/* ═══ Forms Page ═══ */
.forms-content { max-width:700px; margin:0 auto; padding:20px 16px; }
/* ═══ Form Cards — Listing Page ═══ */
.forms-content { max-width:800px; margin:0 auto; padding:16px; }
.form-card {
    background:var(--tn-surface-card,#fff); border-radius:var(--tn-r-md);
    box-shadow:var(--tn-s1); border:1px solid var(--tn-outline-light);
    padding:0; margin-bottom:12px;
    display:flex; align-items:stretch; text-decoration:none; color:inherit;
    transition:transform .15s, box-shadow .15s; overflow:hidden;
}
.form-card:hover { transform:translateY(-1px); box-shadow:var(--tn-s2); }
.form-card-icon {
    width:56px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    background:var(--tn-primary-light);
}
.form-card-icon svg { color:var(--tn-primary); }
.form-card-body { flex:1; padding:16px 18px; min-width:0; }
.form-card-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.form-card-title { font-size:15px; font-weight:700; color:var(--tn-on-surface); line-height:1.4; }
.form-card-desc { font-size:13px; color:var(--tn-on-surface-var); margin-bottom:8px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.form-card-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.form-card-groups { font-size:11px; color:var(--tn-on-surface-var); }
.form-card-btn {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--tn-primary); color:var(--tn-on-primary);
    padding:8px 18px; border-radius:50px; font-size:13px;
    font-family:inherit; font-weight:600;
    text-decoration:none; transition:opacity .15s;
}
.form-card-btn:hover { opacity:.85; }
.form-card-submitted {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--tn-success-bg); color:var(--tn-success);
    padding:4px 12px; border-radius:50px; font-size:11px; font-weight:600;
}
.badge-public { background:#dbeafe; color:#1d4ed8; padding:3px 10px; border-radius:50px; font-size:11px; font-weight:600; flex-shrink:0; }
.badge-group { background:#f3e8ff; color:#7c3aed; padding:3px 10px; border-radius:50px; font-size:11px; font-weight:600; flex-shrink:0; }
.empty-state { text-align:center; padding:60px 20px; color:var(--tn-on-surface-var); }
.empty-state svg { display:block; margin:0 auto 12px; opacity:.3; }
.empty-state p { font-size:15px; font-weight:500; }
.flash-success { background:var(--tn-success-bg); color:var(--tn-success); border-radius:var(--tn-r-sm); padding:12px 16px; margin-bottom:16px; font-size:14px; font-weight:600; }
.flash-error { background:var(--tn-error-bg); color:var(--tn-error); border-radius:var(--tn-r-sm); padding:12px 16px; margin-bottom:16px; font-size:14px; font-weight:600; }

@media (max-width:520px) {
    .card-body { padding:22px 20px; }
    .card-footer { padding:12px 20px; }
    .card-title { font-size:17px; }
}

/* ═══ Form Show Page ═══ */
/* form fills full width of .main-content (same behavior as article-detail) — no extra padding */
.form-wrap { width:100%; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.form-hero, .form-fields-card { width:100%; box-sizing:border-box; }
.form-hero {
    background:var(--tn-surface-card,#fff); border-radius:var(--tn-r-md); padding:28px;
    box-shadow:var(--tn-s1); border:1px solid var(--tn-outline-light);
    position:relative; overflow:hidden;
}
.form-hero::before {
    content:''; position:absolute; top:0; right:0; left:0; height:4px;
    background:var(--tn-primary);
}
.form-hero h1 { font-size:22px; font-weight:800; color:var(--tn-on-surface); margin-bottom:8px; }
.form-hero p { font-size:14px; color:var(--tn-on-surface-var); line-height:1.8; }
.form-prev-note {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--tn-success-bg); color:var(--tn-success);
    padding:6px 14px; border-radius:50px; font-size:12px; font-weight:600; margin-top:12px;
}
/* All fields in one card */
.form-fields-card {
    background:var(--tn-surface-card,#fff); border-radius:var(--tn-r-md); padding:24px 28px;
    box-shadow:var(--tn-s1); border:1px solid var(--tn-outline-light);
}
.field-group {
    padding:16px 0; border-bottom:1px solid var(--tn-outline-light);
}
.field-group:last-child { border-bottom:none; padding-bottom:0; }
.field-group:first-child { padding-top:0; }
.field-label { display:block; font-size:15px; font-weight:700; color:var(--tn-on-surface); margin-bottom:10px; }
.field-required { color:var(--tn-error); margin-right:2px; }
.field-input {
    width:100%; padding:14px 16px; border:1.5px solid var(--tn-outline);
    border-radius:var(--tn-r-sm); font-family:inherit; font-size:15px; color:var(--tn-on-surface);
    background:var(--tn-surface); transition:border-color .2s, box-shadow .2s; appearance:none;
    box-sizing:border-box;
}
.field-input:focus { outline:none; border-color:var(--tn-primary); background:#fff; box-shadow:0 0 0 3px rgba(21,101,192,.1); }
textarea.field-input { min-height:120px; resize:vertical; }
.radio-group, .checkbox-group { display:flex; flex-direction:column; gap:8px; }
.radio-label, .checkbox-label {
    display:flex; align-items:center; gap:12px; cursor:pointer;
    font-size:15px; color:var(--tn-on-surface);
    background:var(--tn-surface); border:1.5px solid var(--tn-outline);
    border-radius:var(--tn-r-sm); padding:14px 16px;
    transition:border-color .2s, background .2s, box-shadow .2s;
}
.radio-label:hover, .checkbox-label:hover {
    border-color:var(--tn-primary); background:#fff; box-shadow:0 0 0 3px rgba(21,101,192,.06);
}
.radio-label input:checked ~ *, .checkbox-label input:checked ~ * { color:var(--tn-primary); font-weight:600; }
.radio-label:has(input:checked), .checkbox-label:has(input:checked) {
    border-color:var(--tn-primary); background:var(--tn-primary-light);
}
.radio-label input, .checkbox-label input { width:20px; height:20px; cursor:pointer; flex-shrink:0; accent-color:var(--tn-primary); }
.select-wrap { position:relative; }
.select-wrap::after { content:'▾'; position:absolute; left:16px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--tn-on-surface-var); font-size:16px; }
.submit-wrap { margin-top:24px; }
.submit-btn {
    width:100%; padding:16px; background:var(--tn-primary); color:var(--tn-on-primary);
    border:none; border-radius:var(--tn-r-full); font-family:inherit; font-size:16px;
    font-weight:700; cursor:pointer; transition:background .2s, box-shadow .2s;
    box-shadow:var(--tn-s1);
}
.submit-btn:hover { background:var(--tn-primary-dark,#0D47A1); box-shadow:var(--tn-s2); }
.submit-btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }

/* ── v2 additions: centered column, sections, draft, collapse, thank-you ── */
.form-wrap { max-width:640px; margin-inline:auto; }
.form-required-legend { font-size:12px; color:var(--tn-error); font-weight:600; margin-top:12px; }
.form-draft-note {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--tn-warning-bg,#fff8e1); color:var(--tn-warning,#b45309);
    padding:6px 14px; border-radius:50px; font-size:12px; font-weight:600; margin-top:12px;
}
/* section head between question cards */
.form-section-head {
    background:var(--tn-surface-card,#fff); border-radius:var(--tn-r-md);
    padding:18px 24px; box-shadow:var(--tn-s1); border:1px solid var(--tn-outline-light);
    border-inline-start:4px solid var(--tn-primary);
}
.form-section-head h2 { font-size:17px; font-weight:800; color:var(--tn-on-surface); margin:0; }
.form-section-head p { font-size:13px; color:var(--tn-on-surface-var); line-height:1.7; margin:6px 0 0; }
/* محتوای ثابت (padcore216) — بلوکِ نمایشی بدونِ پاسخ */
.form-static-block {
    background:var(--tn-surface-card,#fff); border-radius:var(--tn-r-md);
    padding:18px 24px; box-shadow:var(--tn-s1); border:1px solid var(--tn-outline-light);
    border-inline-start:4px solid var(--tn-tertiary,#7b5ea7);
}
.form-static-title { font-size:17px; font-weight:800; color:var(--tn-on-surface); margin:0; }
.form-static-sub { font-size:13.5px; font-weight:600; color:var(--tn-on-surface-var); margin:4px 0 0; }
.form-static-media { display:block; max-width:100%; height:auto; border-radius:var(--tn-r-sm); margin:12px 0 0; }
.form-static-text { font-size:13px; color:var(--tn-on-surface-var); line-height:1.9; margin:10px 0 0; white-space:pre-wrap; }
/* collapsed conditional field: remove the 2px edge */
.field-group.is-collapsed { display:none; border:none; padding:0; }
/* actions row: submit + save-draft */
.form-actions-row { display:flex; gap:12px; margin-top:24px; align-items:center; }
.form-actions-row .submit-wrap { margin-top:0; flex:1; }
.form-draft-btn {
    padding:16px 20px; background:var(--tn-surface); color:var(--tn-primary);
    border:1.5px solid var(--tn-outline); border-radius:var(--tn-r-full);
    font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
    transition:border-color .2s, background .2s; white-space:nowrap;
}
.form-draft-btn:hover { border-color:var(--tn-primary); background:var(--tn-primary-light); }
/* thank-you page */
.form-done-wrap { max-width:560px; margin-inline:auto; padding:8px 0; }
.form-done-card {
    background:var(--tn-surface-card,#fff); border-radius:var(--tn-r-md); padding:40px 32px;
    box-shadow:var(--tn-s1); border:1px solid var(--tn-outline-light);
    text-align:center; position:relative; overflow:hidden;
}
.form-done-card::before { content:''; position:absolute; top:0; right:0; left:0; height:4px; background:var(--tn-primary); }
.form-done-icon {
    width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
    background:var(--tn-success-bg); color:var(--tn-success);
    display:flex; align-items:center; justify-content:center;
}
.form-done-title { font-size:20px; font-weight:800; color:var(--tn-on-surface); margin-bottom:12px; }
.form-done-msg { font-size:15px; color:var(--tn-on-surface-var); line-height:1.9; margin-bottom:24px; }
.form-done-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.form-done-btn {
    padding:12px 24px; border-radius:var(--tn-r-full); font-size:14px; font-weight:700;
    text-decoration:none; transition:background .2s, box-shadow .2s, border-color .2s;
}
.form-done-btn-primary { background:var(--tn-primary); color:var(--tn-on-primary); box-shadow:var(--tn-s1); }
.form-done-btn-primary:hover { background:var(--tn-primary-dark,#0D47A1); box-shadow:var(--tn-s2); }
.form-done-btn-outline { background:var(--tn-surface); color:var(--tn-primary); border:1.5px solid var(--tn-outline); }
.form-done-btn-outline:hover { border-color:var(--tn-primary); background:var(--tn-primary-light); }

@media (max-width:520px) {
    .form-actions-row { flex-direction:column; }
    .form-actions-row .submit-wrap { width:100%; }
    .form-draft-btn { width:100%; }
    .form-hero { padding:20px; }
    .form-fields-card { padding:16px; }
    .field-input, .radio-label, .checkbox-label { font-size:14px; padding:12px 14px; }
    .submit-btn { font-size:15px; padding:14px; }
}

/* ═══ Admin Quick-Edit Bar ═══ */
.admin-bar { position:fixed; bottom:90px; left:16px; z-index:900; direction:rtl; }

.admin-bar-fab {
    width:48px; height:48px; border-radius:50%; border:none;
    background:linear-gradient(135deg, #6366f1, #4f46e5);
    color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 16px rgba(79,70,229,.35), 0 2px 6px rgba(0,0,0,.1);
    transition:transform .2s, box-shadow .2s;
}
.admin-bar-fab:hover { transform:scale(1.08); box-shadow:0 6px 24px rgba(79,70,229,.45); }
.admin-bar-fab-active { transform:rotate(45deg) scale(1.08); background:linear-gradient(135deg, #ef4444, #dc2626); }
.admin-bar-fab-active:hover { transform:rotate(45deg) scale(1.12); }

.admin-bar-panel {
    position:absolute; bottom:60px; left:0; width:280px;
    background:#fff; border-radius:var(--tn-r-lg);
    box-shadow:0 12px 40px rgba(0,0,0,.15), 0 4px 12px rgba(0,0,0,.06);
    opacity:0; transform:translateY(12px) scale(.95); pointer-events:none;
    transition:opacity .2s, transform .2s;
    max-height:calc(100vh - 200px); overflow-y:auto;
    scrollbar-width:thin;
}
.admin-bar-panel-open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.admin-bar-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px 10px; border-bottom:1px solid #f1f5f9;
}
.admin-bar-title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#1e293b; }
.admin-bar-title svg { color:#6366f1; }
.admin-bar-close {
    width:28px; height:28px; border-radius:50%; border:none;
    background:#f1f5f9; color:#64748b; font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; line-height:1;
    transition:background .15s;
}
.admin-bar-close:hover { background:#e2e8f0; }

.admin-bar-section { padding:8px 0; border-bottom:1px solid #f1f5f9; }
.admin-bar-section-title {
    font-size:11px; font-weight:700; color:#94a3b8; text-transform:uppercase;
    letter-spacing:.5px; padding:4px 16px 6px;
}

.admin-bar-link {
    display:flex; align-items:center; gap:10px; padding:10px 16px;
    text-decoration:none; color:#334155; font-size:13px; font-weight:500;
    transition:background .15s;
}
.admin-bar-link:hover { background:#f8fafc; }
.admin-bar-link .icon { filter:none; opacity:.6; flex-shrink:0; }
.admin-bar-link span { flex:1; }
.admin-bar-arrow { color:#cbd5e1; flex-shrink:0; transition:transform .15s; }
.admin-bar-link:hover .admin-bar-arrow { transform:translateX(-3px); color:#6366f1; }

.admin-bar-link-primary { color:#4f46e5; font-weight:700; }
.admin-bar-link-primary .icon { opacity:1; }
.admin-bar-link-primary:hover { background:#eef2ff; }

.admin-bar-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px; font-size:12px; color:#94a3b8;
}
.admin-bar-role {
    background:#eef2ff; color:#6366f1; padding:2px 10px;
    border-radius:var(--tn-r-lg); font-size:11px; font-weight:600;
}

/* Admin editable elements — pencil button on hover */
[data-admin-edit]:not(.bottom-nav):not(.top-nav) {
    position:relative;
}
.admin-edit-btn {
    position:absolute; top:-4px; right:-4px; z-index:10;
    width:26px; height:26px; border-radius:50%; border:none;
    background:#6366f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") center/13px no-repeat;
    cursor:pointer; opacity:0; transform:scale(.7);
    transition:opacity .15s, transform .15s;
    box-shadow:0 2px 8px rgba(99,102,241,.35);
}
[data-admin-edit]:hover .admin-edit-btn { opacity:1; transform:scale(1); }
.admin-edit-btn:hover { transform:scale(1.15) !important; box-shadow:0 3px 12px rgba(99,102,241,.5); }
/* mobile: edit button always visible, right side in RTL */
@media (max-width:768px) {
    .admin-edit-btn { opacity:1; transform:scale(1); right:4px; top:4px; }
}

@media (max-width:480px) {
    .admin-bar { bottom:84px; left:12px; }
    .admin-bar-fab { width:44px; height:44px; }
    .admin-bar-panel { width:260px; }
}

/* ═══ User-side request views (cartable, my-requests) ═══ */

/* Status banner — colored notification banner above content */
.status-banner {
    padding: 14px 18px; margin-bottom: 14px;
    border-radius: var(--tn-r-md);
}
.status-banner--completed { background: #dcfce7; color: #166534; }
.status-banner--active    { border-right: 4px solid #3b82f6; }
.status-banner--review    { border-right: 4px solid #f59e0b; }

.status-banner-label { font-size: 11px; color: var(--tn-on-surface-var); margin-bottom: 4px; }
.status-banner-title { font-size: 15px; font-weight: 700; color: var(--tn-on-surface); }
.status-banner-desc  { font-size: 13px; color: var(--tn-on-surface-var); margin-top: 4px; }
.status-banner-hint  { font-size: 12px; color: var(--tn-on-surface-faint); margin-top: 4px; }

/* Review request body block (inside .status-banner--review) */
.review-request-body {
    font-size: 13px; line-height: 1.7;
    background: #fef9c3; padding: 8px 10px;
    border-radius: 6px; margin-bottom: 10px;
}
.review-request-meta {
    font-size: 11px; color: var(--tn-on-surface-var); margin-bottom: 6px;
}

/* History list items in user-side request view */
.history-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--tn-outline-light);
}
.history-item:last-child { border-bottom: none; }
.history-item-title { font-size: 13px; font-weight: 600; color: var(--tn-on-surface); }
.history-item-meta  { font-size: 11px; color: var(--tn-on-surface-var); margin-top: 3px; }
.history-item-meta .pending { color: #3b82f6; }
.history-item-decision {
    font-size: 12px; color: var(--tn-primary); margin-top: 3px;
}

/* Submitted answers card row */
.answer-row {
    padding: 10px 14px;
    border-bottom: 1px solid var(--tn-outline-light);
}
.answer-row:last-child { border-bottom: none; }
.answer-row-label { font-size: 11px; color: var(--tn-on-surface-var); margin-bottom: 3px; }
.answer-row-value { font-size: 13px; line-height: 1.7; }
.answer-row-value .empty { color: #9ca3af; }

/* Page title block (process name + code) */
.req-page-title {
    font-size: 17px; font-weight: 700; margin-bottom: 6px;
}
.req-page-title .code { font-family: monospace; }
.req-page-meta {
    font-size: 13px; color: var(--tn-on-surface-var); margin-bottom: 14px;
}
.req-section-title { font-size: 14px; margin-bottom: 8px; }

/* Cartable tab bar (user-side, scoped under .form-wrap) */
.cartable-tabs {
    display: flex; gap: 6px; margin-bottom: 14px;
    border-bottom: 1px solid var(--tn-outline);
    overflow-x: auto;
}
.cartable-tabs::-webkit-scrollbar { display: none; }
.cartable-tab {
    padding: 8px 14px; font-size: 13px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent;
    color: var(--tn-on-surface-var);
}
.cartable-tab.is-active { color: var(--tn-primary); border-bottom-color: var(--tn-primary); }
.cartable-tab--new.is-active      { color: var(--a-500); border-bottom-color: var(--a-500); }
.cartable-tab--in_review.is-active { color: #f59e0b; border-bottom-color: #f59e0b; }
.cartable-tab--waiting.is-active  { color: #0891b2; border-bottom-color: #0891b2; }
.cartable-tab--done.is-active     { color: #16a34a; border-bottom-color: #16a34a; }
.cartable-tab .tab-count {
    display: inline-block; color: #fff; font-size: 11px;
    padding: 1px 7px; border-radius: 10px; margin-right: 4px;
    background: var(--tn-on-surface-var);
}
.cartable-tab--new .tab-count       { background: var(--a-500); }
.cartable-tab--in_review .tab-count { background: #f59e0b; }
.cartable-tab--waiting .tab-count   { background: #0891b2; }
.cartable-tab--done .tab-count      { background: #16a34a; }

/* Cartable card state pill (inline label inside form-card-title) */
.state-pill {
    display: inline-block; color: #fff; font-size: 10px;
    padding: 1px 6px; border-radius: 8px; margin-right: 6px;
    vertical-align: middle;
}
.state-pill--new       { background: var(--a-500); }
.state-pill--in_review { background: #f59e0b; }
.state-pill--waiting   { background: #0891b2; }
.state-pill--done      { background: #16a34a; }

/* ── Announcement Banners ── */
.ann-banners { padding: 0 16px; }
.ann-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; border-radius: var(--tn-r-md);
    margin-bottom: 8px; font-size: 13px; line-height: 1.5;
    border: 1px solid transparent;
}
.ann-banner.ann-info    { background: #e3f2fd; border-color: #90caf9; color: #1565c0; }
.ann-banner.ann-warning { background: #fff8e1; border-color: #ffc107; color: #7c5a00; }
.ann-banner.ann-urgent  { background: #ffebee; border-color: #ef9a9a; color: #b71c1c; }
.ann-content { flex: 1; }
.ann-body { display: block; margin-top: 3px; opacity: .85; font-size: 12px; }
.ann-close {
    background: none; border: none; cursor: pointer; font-size: 20px;
    line-height: 1; opacity: .45; padding: 0 2px; flex-shrink: 0;
    color: inherit; font-family: inherit;
}
.ann-close:hover { opacity: .85; }

/* ═══ Inbox (T-PAD-INBOX-PHASE1) ═══ */
.inbox-tabs {
    display: flex; gap: 6px; margin-bottom: 14px;
    border-bottom: 1px solid var(--tn-outline);
    overflow-x: auto;
}
.inbox-tabs::-webkit-scrollbar { display: none; }
.inbox-tab {
    padding: 8px 14px; font-size: 13px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent;
    color: var(--tn-on-surface-var);
}
.inbox-tab.is-active { color: var(--tn-primary); border-bottom-color: var(--tn-primary); }
.inbox-tab .tab-count {
    display: inline-block; color: #fff; font-size: 11px;
    padding: 1px 7px; border-radius: 10px; margin-right: 4px;
    background: var(--tn-on-surface-var);
}
.inbox-tab.is-active .tab-count { background: var(--tn-primary); }

.inbox-section { margin-bottom: 20px; }
.inbox-section-title { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--tn-on-surface); }
.inbox-subsection { margin-bottom: 12px; }
.inbox-subsection-title { font-size: 13px; font-weight: 600; margin: 0 0 6px; color: var(--tn-on-surface-var); }

.inbox-row-list { list-style: none; padding: 0; margin: 0;
    background: var(--tn-surface-card); border-radius: var(--tn-r-sm);
    overflow: hidden; box-shadow: var(--tn-s1); }
.inbox-row { border-bottom: 1px solid var(--tn-outline-light); }
.inbox-row:last-child { border-bottom: none; }
.inbox-row-link {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    text-decoration: none; color: inherit; transition: background .15s;
}
.inbox-row-link:hover { background: var(--tn-surface); text-decoration: none; }
.inbox-row-title { flex: 1; font-size: 13px; font-weight: 600; }
.inbox-row-meta { font-size: 11px; color: var(--tn-on-surface-var); direction: ltr; white-space: nowrap; }
.inbox-empty { padding: 24px; text-align: center; color: var(--tn-on-surface-var); font-size: 13px; }

/* Notifications tab */
.inbox-notif-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.inbox-notif-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.inbox-notif-chip {
    padding: 4px 10px; font-size: 12px; border-radius: 14px;
    text-decoration: none; color: var(--tn-on-surface-var);
    background: var(--tn-surface); border: 1px solid var(--tn-outline-light);
}
.inbox-notif-chip.is-active { background: var(--tn-primary); color:var(--tn-on-primary); border-color: var(--tn-primary); }
.inbox-notif-markall-btn {
    background: none; border: 1px solid var(--tn-outline-light); cursor: pointer;
    padding: 4px 10px; border-radius: 6px; font-size: 12px;
    color: var(--tn-primary); font-family: inherit;
}
.inbox-notif-list { list-style: none; padding: 0; margin: 0;
    background: var(--tn-surface-card); border-radius: var(--tn-r-sm);
    overflow: hidden; box-shadow: var(--tn-s1); }
.inbox-notif-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-bottom: 1px solid var(--tn-outline-light);
}
.inbox-notif-row:last-child { border-bottom: none; }
.inbox-notif-row.is-read { opacity: .55; }
.inbox-notif-row-link { flex: 1; text-decoration: none; color: inherit; min-width: 0; }
.inbox-notif-row-link:hover { text-decoration: none; }
.inbox-notif-row-title { font-size: 13px; font-weight: 600; display: block; }
.inbox-notif-row-meta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.inbox-notif-type-pill {
    font-size: 10px; padding: 1px 6px; border-radius: 8px;
    background: var(--tn-surface); color: var(--tn-on-surface-var);
    border: 1px solid var(--tn-outline-light);
}
.inbox-notif-time { font-size: 11px; color: var(--tn-on-surface-var); direction: ltr; }
.inbox-notif-dismiss {
    background: none; border: none; cursor: pointer; font-size: 18px;
    line-height: 1; opacity: .45; padding: 0 4px; color: inherit; font-family: inherit;
}
.inbox-notif-dismiss:hover { opacity: .9; }
.inbox-notif-loadmore-wrap { text-align: center; margin-top: 12px; }

/* Mobile: stack notification rows so title sits above meta (date/type). */
@media (max-width: 640px) {
    .inbox-notif-row {
        flex-wrap: wrap; align-items: flex-start; gap: 6px 10px;
    }
    .inbox-notif-row-link { flex-basis: calc(100% - 60px); }
    .inbox-notif-row-meta {
        flex-basis: 100%; margin-right: 32px; /* align under title past the emoji */
        justify-content: flex-start;
    }
}
.inbox-notif-loadmore {
    display: inline-block; padding: 8px 16px; font-size: 12px;
    background: var(--tn-surface-card); border: 1px solid var(--tn-outline-light);
    border-radius: 6px; text-decoration: none; color: var(--tn-primary);
}

/* Archive source badges — fixed width so title column aligns across rows. */
.inbox-archive-source-badge {
    display: inline-block; font-size: 10px; padding: 2px 6px;
    border-radius: 8px; background: var(--tn-surface);
    color: var(--tn-on-surface-var); border: 1px solid var(--tn-outline-light);
    width: 56px; flex-shrink: 0; text-align: center; box-sizing: border-box;
}
.inbox-archive-source-badge--cartable_done     { background: #dcfce7; color: #166534; border-color: #86efac; }
.inbox-archive-source-badge--request_completed { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.inbox-archive-source-badge--notification_read { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

/* ═══ Bell dropdown ═══ */
.nav-bell-wrap { display: inline-block; }
.bell-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 280px; max-width: 360px;
    background: var(--tn-surface-card); border: 1px solid var(--tn-outline-light);
    border-radius: var(--tn-r-sm); box-shadow: 0 4px 16px rgba(0,0,0,.12);
    z-index: 1000; display: none;
}
.bell-dropdown.is-open { display: block; }
.bell-dropdown-header { padding: 10px 14px; font-size: 13px; font-weight: 700;
    border-bottom: 1px solid var(--tn-outline-light); }
.bell-dropdown-list { list-style: none; padding: 0; margin: 0; max-height: 320px; overflow-y: auto; }
.bell-dropdown-row {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    border-bottom: 1px solid var(--tn-outline-light); font-size: 12px;
}
.bell-dropdown-row:last-child { border-bottom: none; }
.bell-dropdown-row.is-read { opacity: .55; }
.bell-dropdown-row-link { flex: 1; text-decoration: none; color: inherit; }
.bell-dropdown-row-link:hover { text-decoration: none; }
.bell-dropdown-empty { padding: 18px; text-align: center; color: var(--tn-on-surface-var); font-size: 12px; }
.bell-dropdown-footer { padding: 8px 14px; text-align: center;
    border-top: 1px solid var(--tn-outline-light); }
.bell-dropdown-footer a { font-size: 12px; color: var(--tn-primary); text-decoration: none; }

/* ═══ Inbox V2 — hover, icon, rich empty, skeleton (T-PAD-INBOX-V2) ═══ */

/* Hover + cursor refinements for inbox notif rows */
.inbox-notif-row {
    transition: background .15s ease, transform .15s ease;
    cursor: default;
}
.inbox-notif-row:hover {
    background: var(--tn-surface);
}
.inbox-notif-row:hover .inbox-notif-dismiss { opacity: .85; }
.inbox-notif-row.is-unread {
    background: linear-gradient(to left, var(--tn-surface-card), rgba(21,101,192,.04));
}
.inbox-notif-row.is-unread .inbox-notif-row-title { color: var(--tn-on-surface); }
.inbox-notif-row.is-unread:hover {
    background: linear-gradient(to left, var(--tn-surface), rgba(21,101,192,.08));
}

/* Per-type emoji icon */
.inbox-notif-icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    background: var(--tn-surface);
    border-radius: 50%;
    line-height: 1;
}
.inbox-notif-row.is-unread .inbox-notif-icon {
    background: rgba(21,101,192,.10);
}

/* Rich empty state */
.inbox-empty--rich {
    padding: 56px 24px;
    text-align: center;
    background: var(--tn-surface-card);
    border-radius: var(--tn-r-sm, 8px);
    box-shadow: var(--tn-s1);
}
.inbox-empty-icon {
    font-size: 56px; opacity: .35; margin-bottom: 14px; line-height: 1;
}
.inbox-empty-title {
    font-size: 14px; font-weight: 700; color: var(--tn-on-surface);
    margin: 0 0 4px;
}
.inbox-empty-subtitle {
    font-size: 12px; color: var(--tn-on-surface-var); margin: 0;
}

/* Skeleton shimmer for bell dropdown */
.bell-dropdown-skel {
    padding: 10px 14px; border-bottom: 1px solid var(--tn-outline-light);
}
.bell-dropdown-skel:last-child { border-bottom: none; }
.skel-line {
    display: block; height: 10px; margin: 4px 0;
    background: linear-gradient(90deg,
        var(--tn-surface) 25%,
        var(--tn-outline-light) 50%,
        var(--tn-surface) 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.2s infinite;
    border-radius: 4px;
}
.skel-w30 { width: 30%; }
.skel-w40 { width: 40%; }
.skel-w50 { width: 50%; }
.skel-w60 { width: 60%; }
.skel-w70 { width: 70%; }
.skel-w80 { width: 80%; }
@keyframes skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Bell dropdown row icon (matches inbox-notif-icon, smaller) */
.bell-dropdown-row { transition: background .12s ease; }
.bell-dropdown-row:hover { background: var(--tn-surface); }
.bell-dropdown-row-icon {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
    background: var(--tn-surface);
    border-radius: 50%;
    line-height: 1;
}
.bell-dropdown-row.is-unread { background: rgba(21,101,192,.04); }
.bell-dropdown-row.is-unread .bell-dropdown-row-icon { background: rgba(21,101,192,.10); }

/* Rich empty inside bell dropdown */
.bell-dropdown-empty-rich {
    padding: 28px 16px; text-align: center; font-size: 12px;
    color: var(--tn-on-surface-var);
}
.bell-dropdown-empty-icon { font-size: 36px; opacity: .35; margin-bottom: 8px; }

/* ═══ زیرمنو در شِلِ اپ (padcore198) ═══
   آیتمِ بدونِ فرزند دست‌نخورده می‌ماند؛ فقط والدِ دارای فرزند این قوانین را می‌گیرد. */
.top-nav-has-sub { position:relative; display:inline-flex; flex-shrink:0; }
.top-nav-has-sub > .top-nav-link::after { content:''; display:inline-block; width:0; height:0; margin-inline-start:5px; vertical-align:middle; border-inline-start:4px solid transparent; border-inline-end:4px solid transparent; border-top:4px solid currentColor; opacity:.7; }
.top-nav-sub { position:absolute; top:100%; inset-inline-start:0; z-index:60; min-width:170px; padding:6px; display:none; flex-direction:column; gap:2px; background:var(--tn-surface-container,#fff); border:1px solid var(--tn-outline-light,rgba(0,0,0,.08)); border-radius:var(--tn-r-md,10px); box-shadow:0 8px 24px rgba(0,0,0,.12); }
.top-nav-has-sub:hover > .top-nav-sub, .top-nav-has-sub:focus-within > .top-nav-sub { display:flex; }
.top-nav-sub .top-nav-link { white-space:nowrap; border-radius:var(--tn-r-sm,6px); }
.nav-drawer-sub { padding-inline-start:26px; font-size:13px; opacity:.85; }

/* ═══ Pagination (padcore202) ═══
   عیناً همان قواعدِ admin.css:755-766 تا سمتِ کاربر (news/search/table/landing)
   بدونِ لودِ admin.css همان ظاهر را بگیرد. admin.css دست‌نخورده می‌ماند. */
.pagination { display: flex; gap: 4px; margin-top: 16px; justify-content: center; }
.pagination a {
    padding: 6px 12px; border-radius: var(--tn-r-sm);
    background: var(--tn-surface-card); color: var(--tn-on-surface-var);
    text-decoration: none; font-size: 13px; font-weight: 500;
    border: 1px solid var(--tn-outline-light); transition: all .15s;
    min-width: 34px; text-align: center;
}
.pagination a:hover { background: var(--tn-primary-light); color: var(--tn-primary); text-decoration: none; }
.pagination a.active { background: var(--tn-primary); color:var(--tn-on-primary); border-color: var(--tn-primary); }
.pagination a.pag-arrow { font-size: 18px; padding: 4px 10px; line-height: 1; }
.pag-ellipsis { padding: 6px 4px; color: var(--tn-on-surface-var); font-size: 14px; line-height: 1.6; }

/* ── نوارِ تبِ برچسب (padcore224) ────────────────────────────────────────────
   منبعِ واحدِ استایلِ نوارِ تب برای هر دو صفحهٔ `/news` و `/tag/{slug}`.
   پیش‌تر فقط داخلِ <style>ِ site/tag/show.blade.php بود و `/news` نوارِ
   `.tabs-bar` را می‌ساخت که استایلش فقط زیرِ `.admin-content` تعریف شده و در
   سمتِ کاربر بی‌اثر بود. تب‌ها wrap می‌شوند (نه scrollِ افقی). */
.ct-tabs {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px;
    border-bottom: 1px solid var(--tn-outline-light); margin-bottom: 14px;
}
.ct-tab {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 100px;
    font-size: 13px; font-weight: 600; text-decoration: none;
    border: 1px solid var(--tn-outline-light);
    background: var(--tn-surface); color: var(--tn-on-surface-var);
    transition: background .15s, color .15s;
}
.ct-tab:hover { color: var(--tn-primary); border-color: var(--tn-primary); text-decoration: none; }
.ct-tab.active { background: var(--tn-primary); color:var(--tn-on-primary); border-color: var(--tn-primary); }
.ct-cnt {
    font-size: 11px; font-weight: 700; background: rgba(255,255,255,.25);
    border-radius: 100px; padding: 1px 6px; min-width: 18px; text-align: center;
}
.ct-tab:not(.active) .ct-cnt { background: var(--tn-surface-var, #f0f0f0); color: var(--tn-on-surface-var); }
.ct-section-label {
    font-size: 12px; font-weight: 700; color: var(--tn-on-surface-var);
    text-transform: uppercase; letter-spacing: .5px;
    margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--tn-outline-light);
}

/* media بعد از قوانینِ پایه، وگرنه با specificityِ برابر override نمی‌شود. */
@media (max-width: 768px) {
    .pagination { flex-wrap: wrap; }
    .pagination a { padding: 6px 10px; font-size: 12px; }
}

/* padcore294 — زبان‌های چپ‌به‌راست (en/de/fr): جهت و ترازِ صفحه و فرم از <html dir>. */
[dir="ltr"] body { direction: ltr; }
[dir="ltr"] .form-group label,
[dir="ltr"] .form-label { text-align: left; }

/* #123 — فرمِ لندینگ هم‌ارزِ فرمِ عادی: شبکهٔ ستونی، ستارهٔ امتیاز، فیلدِ جمع‌شو، رنگ پس‌زمینهٔ فیلد */
.lp-fngrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0;max-width:100%}
.lp-fngrid > .fn-full{grid-column:1/-1}
@media (min-width:768px){
  .lp-fngrid.fn-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-fngrid.fn-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.lp-fn{min-width:0;max-width:100%;box-sizing:border-box}
.lp-fn .field-label{display:block;font-weight:700;margin-bottom:6px}
.lp-fn .field-required{color:#dc2626}
.lp-fn .field-input,.lp-fn .select-wrap,.lp-fn .radio-group,.lp-fn .checkbox-group{min-width:0;max-width:100%;box-sizing:border-box}
.lp-fn .field-input{width:100%}
.lp-fn .radio-group > label,.lp-fn .checkbox-group > label{display:flex;align-items:center;gap:8px;font-weight:400;margin-bottom:6px}
.lp-fn .rating-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.lp-fn .rating-stars{display:flex;flex-wrap:wrap;gap:4px;min-width:0;max-width:100%}
.lp-fn .rating-star{cursor:pointer;color:var(--tn-divider,#dbe5de);line-height:0;flex:0 1 auto;min-width:0}
.lp-fn .rating-star svg{width:clamp(20px,8vw,36px);height:auto;max-width:100%;fill:currentColor;stroke:currentColor}
.lp-fn .rating-star:has(input:checked),.lp-fn .rating-star:has(~ .rating-star input:checked){color:#f5a623}
.lp-fn .rating-label-first,.lp-fn .rating-label-last{font-size:12px;opacity:.7}
/* فرمِ عادی: همان جمع‌شوندگی + رنگ پس‌زمینه */
.form-normal .field-input,.form-normal .select-wrap,.form-normal .radio-group,.form-normal .checkbox-group{min-width:0;max-width:100%;box-sizing:border-box}
.form-normal .rating-stars{flex-wrap:wrap;min-width:0;max-width:100%}
.form-normal .rating-star{flex:0 1 auto;min-width:0}
.form-normal .rating-star svg{width:clamp(20px,8vw,36px);height:auto;max-width:100%}
.form-normal .field-input,.lp-fn .field-input{background:var(--form-field-bg,var(--fn-input,#fff))}

/* ═══════════════════════════════════════════════════════════════════════
   فاز ۴ سیستمِ طراحی — کلاس‌هایی که تا پیش از این درون‌خطی بودند

   مقادیر عیناً همان چیزی است که در `style=` نوشته شده بود؛ این گام فقط
   جایشان را عوض می‌کند. چند کلاس بیش از یک صفحه مصرف‌کننده دارد و همین
   دلیلِ عمومی‌بودنشان است.
   ═══════════════════════════════════════════════════════════════════════ */

/* حالتِ خالیِ بلندتر (جدول‌ها، نمایشِ جدول، برچسب). */
.empty-state--lg { padding: 60px 20px; }
.empty-hint { font-size: 12px; }
.empty-note { color: var(--tn-on-surface-var); font-size: 14px; }

/* آیکن/تصویرِ کم‌رنگِ حالتِ خالی. */
.icon-faint { opacity: .4; }

/* ردیفِ دوسر و ردیفِ وسط‌چین (نمایشِ جدول). */
.row-split {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.row-center { display: flex; justify-content: center; margin-top: 14px; }

/* دکمهٔ بازگشتِ صفحهٔ برچسب. */
.user-back-btn--mt { margin: 12px 0 0; }

/* سهمیهٔ پرشدهٔ فرم در صفحهٔ برچسب. */
.quota-full { font-size: 11px; color: var(--tn-error); font-weight: 600; }

/* جستجوی عمومی (`/search`). */
.pad-search-wrap { max-width: 900px; margin: 24px auto; padding: 0 16px; }
.pad-search-form { display: flex; gap: 8px; margin-bottom: 20px; }
.pad-search-input {
    flex: 1; padding: 10px 14px; font-size: 15px;
    border: 1px solid var(--tn-outline, #D0D5DD); border-radius: 8px;
}
.search-note { color: var(--tn-on-surface-var, #6B7280); }
.search-count { color: var(--tn-on-surface-var, #6B7280); font-size: 14px; margin-bottom: 14px; }

/* صندوق. */
.inbox-page { padding: 16px; }
.inbox-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.inbox-tabs--wrap { flex-wrap: wrap; }

/* اطلاعیهٔ با رنگِ سفارشی (`alert/_banner`): رنگ دادهٔ ادمین است، فقط دو متغیر تزریق می‌شود. */
.ann-banner.ann-custom[data-ann] { border-inline-start: 4px solid var(--ann-color); background: var(--ann-bg); }

/* ═══════════════════════════════════════════════════════════════════════════
   تمِ تیرهٔ سمتِ کاربر — فاز ۵ب (ADR-PADCORE-0028)

   صفتِ `data-theme="dark"` را فقط `partials/site-theme-boot` می‌نویسد، و آن
   partial فقط وقتی include می‌شود که هر دو پترنِ هدر و فوترِ صفحه تیک
   «پشتیبانیِ تمِ تیره» را خورده باشند. پس بی تیک، این بلاک هرگز فعال نیست و
   تمِ روشن یک پیکسل هم جابه‌جا نمی‌شود.

   چرا اینجا و نه در لایهٔ توکن: `app.css` کلِ نگاشتِ `--tn-*` را در `:root`ِ
   **خودش** و بعد از `ui-tokens.css` بازتعریف می‌کند (همان چیزی که در فاز ۵الف
   سرِ `admin.css` پیدا شد). پس بلاکِ تیرهٔ لایهٔ توکن اینجا بی‌اثر است و
   نگاشت باید دوباره روی توکن‌های نقش نوشته شود.

   هیچ قاعدهٔ موجودی ویرایش نشده؛ همه‌چیز اینجا append است. تنها استثنا هجده
   `color:#fff`ِ روی زمینهٔ `var(--tn-primary)` بود که به `var(--tn-on-primary)`
   رفت: در تمِ روشن عینِ `#FFFFFF` است، ولی در تمِ تیره `--tn-primary` آبیِ
   روشن می‌شود و سفید رویش ۱.۹:۱ می‌داد.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* ── نگاشتِ --tn-* روی توکن‌های نقشِ تیره. navy همان navy می‌مانَد؛ مقیاسِ
         برند وارونه نمی‌شود. ── */
    --tn-primary:           var(--primary);
    --tn-primary-dark:      var(--p-900);
    --tn-primary-light:     var(--accent);
    --tn-primary-container: var(--secondary);
    --tn-on-primary:        var(--primary-foreground);

    --tn-surface:           var(--background);
    --tn-surface-card:      var(--card);
    --tn-surface-dim:       var(--secondary);

    --tn-on-surface:        var(--foreground);
    --tn-on-surface-var:    var(--muted-foreground);

    --tn-outline:           var(--border);
    --tn-outline-light:     var(--border-subtle-2);

    --tn-error:    var(--destructive);  --tn-error-bg:   var(--destructive-muted);
    --tn-success:  var(--success);      --tn-success-bg: var(--success-muted);
    --tn-warn:     var(--warning);      --tn-warn-bg:    var(--warning-muted);

    --tn-s1: var(--shadow-sm);
    --tn-s2: var(--shadow-md);
    --tn-s3: var(--shadow-lg);

    /* ── هفت نامی که `app.css` مصرف می‌کند و هیچ‌جا تعریف نشده‌اند. هر هفت
         fallbackِ هگزِ روشن دارند (`var(--tn-divider,#dbe5de)` و مانندش)، که
         در تمِ روشن بی‌آزار است و در تمِ تیره خودش باگ: کارتِ سفید و خاکستریِ
         پریده روی زمینهٔ تیره. تعریف‌شان اینجا جلوی شلیکِ fallback را می‌گیرد.
         تعریفِ تمِ روشنشان عمداً اضافه نشد — مقدارِ امروزِ صفحه همان fallback
         است و نوشتنش یعنی تغییرِ بی‌دلیلِ تمِ روشن. ── */
    --tn-divider:           var(--border);
    --tn-surface-container:  var(--card);
    --tn-surface-var:        var(--layer-2);
    --tn-surface-variant:    var(--layer-2);
    --tn-warning:            var(--warning);
    --tn-warning-bg:         var(--warning-muted);
    --tn-tertiary:           #B49BD6;
}

/* ── بدنه: گرادیانِ روشنِ هاردکد (و نقطه‌های آبیِ رویش) جای خود را به زمینهٔ
     تخت می‌دهد. گرادیانِ تیره‌شده امتحان نشد چون بی چکِ بصری نمی‌شود گفت لکه
     می‌اندازد یا نه؛ زمینهٔ تخت هیچ ریسکی ندارد. در حالتِ اپ، بلاکِ inlineِ
     `buildUserThemeCss` همین را با رنگِ مالک بازنویسی می‌کند و بعد از این فایل
     چاپ می‌شود، پس بندِ بعدی لازم است. ── */
:root[data-theme="dark"] body {
    background: var(--background);
}

/* ── بلاکِ `<style>`ِ درون‌خطیِ حالتِ اپ بعد از همهٔ stylesheetها چاپ می‌شود و
     سلکتورهایش ساده‌اند (`body`, `.top-nav`, `.bottom-nav`). پس ترتیب نجاتمان
     نمی‌دهد و این سه بند با خاصیتِ بالاتر می‌آیند. رنگِ خودِ مالک کنار نمی‌رود:
     `--tn-primary` بالا به `--primary`ِ تیره نگاشت شده و همان رنگ، روشن‌تر،
     در نوار می‌مانَد. ── */
:root[data-theme="dark"] .top-nav,
:root[data-theme="dark"] .bottom-nav {
    background: var(--layer-1);
    border-color: var(--border);
}

/* ── سطح‌هایی که `#fff`ِ برهنه دارند. ── */
:root[data-theme="dark"] .nav-drawer,
:root[data-theme="dark"] .nav-drawer-foot,
:root[data-theme="dark"] .tn-sheet-content,
:root[data-theme="dark"] .admin-bar-panel {
    background: var(--card);
}

:root[data-theme="dark"] .admin-bar-close {
    background: var(--layer-2);
    color: var(--muted-foreground);
}

:root[data-theme="dark"] .admin-bar-title { color: var(--foreground); }

/* `.admin-bar-link:hover` خودش (۰,۲,۰) است و از یک سلکتورِ بی‌hover شکست
   می‌خورد یا نمی‌خورد بسته به ترتیب؛ صریح نوشته شد تا بحثی نمانَد. */
:root[data-theme="dark"] .admin-bar-link:hover { background: var(--layer-3); }

/* ── تینت‌های معنایی. هر کدام جفتِ `--x-muted`/`--x` را می‌گیرد که در لایهٔ
     توکن برای تمِ تیره ساخته شده‌اند. ── */
:root[data-theme="dark"] .review-request-body {
    background: var(--warning-muted);
    color: var(--foreground);
}

:root[data-theme="dark"] .ann-banner.ann-warning {
    background: var(--warning-muted);
    border-color: var(--warning);
    color: var(--warning);
}

:root[data-theme="dark"] .ann-banner.ann-urgent {
    background: var(--destructive-muted);
    border-color: var(--destructive);
    color: var(--destructive);
}

:root[data-theme="dark"] .inbox-archive-source-badge--notification_read {
    background: var(--warning-muted);
    color: var(--warning);
    border-color: var(--warning);
}

:root[data-theme="dark"] .badge-group {
    background: var(--layer-3);
    color: var(--foreground);
}

/* `.notif-item.unread` در تمِ روشن (۰,۲,۰) است، پس سلکتورِ تیرهٔ بی‌`.unread`
   (۰,۲,۱) آن را می‌برد و نشانهٔ «خوانده‌نشده» بی‌صدا از بین می‌رفت — همان
   تله‌ای که در فاز ۵الف سرِ `.history-item.is-pending` خورد. صریح. */
:root[data-theme="dark"] .notif-item.unread { background: var(--layer-3); }

/* ── حاشیهٔ صورتیِ دکمهٔ خطر. ── */
:root[data-theme="dark"] .btn-danger { border-color: var(--destructive-muted); }

/* ── خارج از این فاز، با دلیل: خانوادهٔ پیام‌رسان (`.msg-*`, `.msng-*`,
     `.chat-*`) پالتِ عمدیِ خودش را دارد — سبزِ حبابِ ارسالی، کِرِمِ زمینهٔ
     گفت‌وگو، آبیِ تیکِ خوانده‌شده — که از توکن نمی‌آید و منطقِ کنتراستِ خودش
     را دارد. تیره‌کردنش بازطراحیِ آن پالت است نه تم‌گذاری، و بی چکِ بصری
     تأییدپذیر نیست. `.pad-slider-arrow`/`.pad-dot` هم بیرون ماندند: روی
     تصویرِ دلخواه می‌نشینند و سفید همان‌جا در هر دو تم درست است.
     `landing.css` و قالب‌های لندینگ ردیفِ ۵ج ROADMAP هستند. ── */
/* فرمِ پیش‌فرضِ لندینگ: خنثی‌کردنِ padding/borderِ عمومیِ .field-group (عاملِ ناترازیِ فیلدِ اول) + ظاهرِ کارتی */
.lp-fngrid > .field-group.lp-fn,.lp-fngrid > .field-group.lp-fn:first-child,.lp-fngrid > .field-group.lp-fn:last-child{padding:0;border:0;margin:0}
.lp-fngrid{gap:18px 20px;align-items:start}
.lp-fn .field-label{font-size:14px;color:var(--tn-on-surface,#1f2937);margin-bottom:8px}
.lp-fn .field-input{min-height:46px;padding:10px 14px;border:1px solid var(--tn-divider,#d9dee5);border-radius:12px;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.lp-fn textarea.field-input{min-height:120px;resize:vertical}
.lp-fn .field-input:hover{border-color:var(--tn-outline,#b8c0cc)}
.lp-fn .field-input:focus{outline:0;border-color:var(--tn-primary,#1e3a6e);box-shadow:0 0 0 3px color-mix(in srgb,var(--tn-primary,#1e3a6e) 18%,transparent)}
.lp-embed-form{background:var(--tn-surface-card,#fff);border:1px solid var(--tn-outline-light,#e6e9ee);border-radius:18px;padding:28px;box-shadow:0 1px 3px rgba(16,24,40,.06)}
.lp-embed-form .lp-embed-title{margin:0 0 6px}
.lp-embed-form .lp-embed-desc{margin:0 0 20px;opacity:.75}
.lp-embed-form .lp-embed-section{margin:8px 0 0;padding-bottom:8px;border-bottom:1px solid var(--tn-outline-light,#e6e9ee)}
.lp-embed-form form > .btn[type=submit]{margin-top:22px;min-width:140px;min-height:46px;border-radius:12px;font-weight:700}
@media (max-width:640px){.lp-embed-form{padding:18px}.lp-embed-form form > .btn[type=submit]{width:100%}}