/* ═══════════════════════════════════════════════════════
   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 {
    /* ── Primary ── */
    --tn-primary:           #1565C0;
    --tn-primary-dark:      #0D47A1;
    --tn-primary-light:     #E3F2FD;
    --tn-primary-container: #BBDEFB;
    --tn-on-primary:        #fff;
    /* ── Surface ── */
    --tn-surface:           #F5F7FA;
    --tn-surface-card:      #FFFFFF;
    --tn-surface-dim:       #ECEEF2;
    /* ── Text ── */
    --tn-on-surface:        #1A1C1E;
    --tn-on-surface-var:    #6B7280;
    /* ── Border ── */
    --tn-outline:           #DDE1E6;
    --tn-outline-light:     #F0F2F5;
    /* ── Semantic ── */
    --tn-error:    #C62828;  --tn-error-bg:   #FFEBEE;
    --tn-success:  #2E7D32;  --tn-success-bg: #E8F5E9;
    --tn-warn:     #E65100;  --tn-warn-bg:    #FFF3E0;
    /* ── Radius ── */
    --tn-r-sm:   10px;
    --tn-r-md:   14px;
    --tn-r-lg:   20px;
    --tn-r-full: 100px;
    /* ── Shadow ── */
    --tn-s1: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --tn-s2: 0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
    --tn-s3: 0 10px 32px rgba(0,0,0,.12);
    /* ── Font ── */
    --tn-font: 'Vazirmatn', Tahoma, sans-serif;
}

/* ═══ 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); }
}

/* ═══ 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), #42A5F5);
}
.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 .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; outline:2px solid var(--tn-primary); outline-offset:1px; border-radius:4px; }
.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-pulse-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; }
.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-featured-img { width:100%; max-height:200px; object-fit:cover; margin-bottom:12px; border-radius:var(--tn-r-sm); }
.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; }
.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; }
.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; }

/* ═══ 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:#fff; 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 ═══ */
.alert { padding:10px 14px; border-radius:var(--tn-r-sm); margin-bottom:12px; font-size:13px; border-right:3px solid; }
.alert.success { color:var(--tn-success); background:var(--tn-success-bg); border-color:var(--tn-success); }
.alert.error   { color:var(--tn-error);   background:var(--tn-error-bg);   border-color:var(--tn-error); }
.alert.info    { color:var(--tn-primary);  background:var(--tn-primary-light); border-color:var(--tn-primary); }

/* ═══ 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); max-width:440px; text-align:center; }
.tn-snackbar-show { transform:translateX(-50%) translateY(0); }

/* ═══ 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:#fff; 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:#fff; 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:#fff;
    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:#fff; border-color:var(--tn-primary); }
.msng-action-pill-primary { background:var(--tn-primary); color:#fff; 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:#fff; 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), #42A5F5);
}
.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:#fff; 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); }

.msg-row { display:flex; max-width:82%; 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 { align-self:flex-start; }
.row-in { align-self:flex-end; }
.msg-avatar { display:none; }
.msg-bubble-wrap { display:flex; flex-direction:column; min-width:0; }
.row-out .msg-bubble-wrap { align-items:flex-end; }
.row-in .msg-bubble-wrap { align-items:flex-start; }
.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;
}
.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; }

/* Message footer */
.msg-meta { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:4px; direction:ltr; }
.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; }
.msg-actions { display:flex; gap:3px; opacity:0; 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; }

/* ═══ 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:#fff;
    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:#fff;
    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; }
}

/* ═══ Pulse (Home) Page ═══ */
.pulse-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; }

/* ═══ Pulse Slider ═══ */
.page-slider-wrap { margin-bottom:20px; }
.pulse-slider {
    position:relative; overflow:hidden;
    border-radius:var(--tn-r-lg);
    box-shadow:0 4px 24px rgba(0,0,0,.12);
    background:#1a1a2e;
}
.pulse-slider-track {
    display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1);
    direction:ltr;
}
.pulse-slide {
    min-width:100%; position:relative;
    display:block; text-decoration:none; color:inherit;
    aspect-ratio:16/7; overflow:hidden;
}
.pulse-slide img, .pulse-slide video {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform 6s ease-out;
}
.pulse-slide.active img { transform:scale(1.04); }
.pulse-slide video { transform:none!important; }
.pulse-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;
}
.pulse-slide-overlay {
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.75) 100%);
    padding:40px 20px 16px; direction:rtl;
}
.pulse-slide-title {
    color:#fff; font-size:15px; font-weight:700;
    text-shadow:0 1px 4px rgba(0,0,0,.4);
    line-height:1.6;
}
/* Navigation arrows */
.pulse-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;
}
.pulse-slider:hover .pulse-slider-arrow { opacity:1; }
.pulse-slider-arrow:hover { background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.2); transform:translateY(-50%) scale(1.08); }
.pulse-slider-arrow:active { transform:translateY(-50%) scale(.95); }
.pulse-slider-arrow.arr-next { left:10px; }
.pulse-slider-arrow.arr-prev { right:10px; }
.pulse-slider-arrow svg { width:18px; height:18px; color:#333; }
/* Dots */
.pulse-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);
}
.pulse-dot {
    width:8px; height:8px; border-radius:50%;
    background:rgba(255,255,255,.45); cursor:pointer;
    transition:all .25s; border:none;
}
.pulse-dot:hover { background:rgba(255,255,255,.7); }
.pulse-dot.active { background:#fff; width:22px; border-radius:4px; }

/* Tabs (shared for pulse + forms) */
.tabs-wrap {
    display:flex; gap:6px; overflow-x:auto;
    scrollbar-width:none; padding-bottom:16px;
}
.tabs-wrap::-webkit-scrollbar { display:none; }
.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; flex-shrink:0;
    display:inline-flex; align-items:center; gap:6px;
    font-family:inherit; cursor:pointer;
}
.tab-btn.active { background:var(--tn-primary); color:#fff; border-color:var(--tn-primary); }
.tab-btn:hover { background:var(--tn-primary); color:#fff; 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 (pulse) */
.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:#fff;
    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:#fff;
    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; }
@media (max-width:520px) {
    .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: #1565C0; border-bottom-color: #1565C0; }
.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: #1565C0; }
.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: #1565C0; }
.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; }