/* Croplod Plus — concatenated bundle (exact cascade order of base.html) */
/* Generated: 2026-09-24T22:38:43+00:00 */

/* ===== css/fonts.css ===== */
/*
 * Croplod Font System
 * Persian -> Dana | Latin/English -> Product Sans
 * Smart language detection via CSS selectors
 */

/* ============================================================
   @font-face — Dana (Persian)
   ============================================================ */

@font-face {
    font-family: 'Dana';
    src: url('/static/fonts/dana/Dana-Thin.woff2') format('woff2'),
         url('/static/fonts/dana/Dana-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dana';
    src: url('/static/fonts/dana/Dana-UltraLight.woff2') format('woff2'),
         url('/static/fonts/dana/Dana-UltraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dana';
    src: url('/static/fonts/dana/Dana-Light.woff2') format('woff2'),
         url('/static/fonts/dana/Dana-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dana';
    src: url('/static/fonts/dana/Dana-Regular.woff2') format('woff2'),
         url('/static/fonts/dana/Dana-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dana';
    src: url('/static/fonts/dana/Dana-Medium.woff2') format('woff2'),
         url('/static/fonts/dana/Dana-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dana';
    src: url('/static/fonts/dana/Dana-DemiBold.woff2') format('woff2'),
         url('/static/fonts/dana/Dana-DemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dana';
    src: url('/static/fonts/dana/Dana-Bold.woff2') format('woff2'),
         url('/static/fonts/dana/Dana-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dana';
    src: url('/static/fonts/dana/Dana-ExtraBold.woff2') format('woff2'),
         url('/static/fonts/dana/Dana-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dana';
    src: url('/static/fonts/dana/Dana-Black.woff2') format('woff2'),
         url('/static/fonts/dana/Dana-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   @font-face — Product Sans (English/Latin)
   ============================================================ */

@font-face {
    font-family: 'Product Sans';
    src: url('/static/fonts/productsans/ProductSans-Thin.woff2') format('woff2'),
         url('/static/fonts/productsans/ProductSans-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('/static/fonts/productsans/ProductSans-Light.woff2') format('woff2'),
         url('/static/fonts/productsans/ProductSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('/static/fonts/productsans/ProductSans-Regular.woff2') format('woff2'),
         url('/static/fonts/productsans/ProductSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('/static/fonts/productsans/ProductSans-Medium.woff2') format('woff2'),
         url('/static/fonts/productsans/ProductSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('/static/fonts/productsans/ProductSans-Bold.woff2') format('woff2'),
         url('/static/fonts/productsans/ProductSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('/static/fonts/productsans/ProductSans-Black.woff2') format('woff2'),
         url('/static/fonts/productsans/ProductSans-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   Font Rules — Default: Dana for Persian text
   ============================================================ */

/*
 * Base: Dana for all Persian text
 */
html, body, div, span, h1, h2, h3, h4, h5, h6,
p, a, em, strong, small, sub, sup,
label, button, select, textarea,
header, nav, main, footer, section, article, aside,
ul, ol, li, dl, dt, dd,
table, thead, tbody, tfoot, tr, th, td,
form, fieldset, legend,
details, summary, figure, figcaption,
blockquote, cite, q,
abbr, dfn, mark, time,
bdi, bdo, ruby, rt, rp,
wbr, pre, code, kbd, samp, var,
address, hr,
.card, .card-title, .card-body, .card-header, .card-footer,
.list-item, .list-item-title, .list-item-desc, .list-item-icon,
.account-card, .account-card-title, .account-card-header,
.account-page-title, .account-page-subtitle,
.account-sidebar-link, .account-sidebar-section,
.account-header-brand-name, .account-header-brand-sub,
.stat-card-label,
.info-row-label,
.auth-logo h1, .auth-logo p, .auth-footer, .auth-divider,
.form-label, .form-hint, .form-error,
.badge, .badge-primary, .badge-success, .badge-error, .badge-warning,
.empty-state-title, .empty-state-desc,
.toast,
.account-profile-name, .account-profile-email,
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-sm, .btn-lg,
.account-chip,
.account-search-input,
.account-dropdown, .account-header-dropdown-item,
.theme-toggle,
.account-header-action-btn,
.account-header-avatar {
    font-family: 'Dana', 'Tahoma', sans-serif;
}

/*
 * Product Sans for English/Latin content:
 * Usernames (@username), emails, Croplod IDs, wallet IDs,
 * URLs, phone numbers, OTP/TFA/recovery codes, technical identifiers,
 * all form inputs (users type Latin in them)
 */
[dir="ltr"],
code, kbd, pre, samp, var,
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="text"],
input:not([type]),
select,
textarea,
.form-input,
.form-textarea,
.form-select,
.badge,
.stat-card-value,
.info-row-value,
.account-profile-email,
.account-search-input,
.account-chip,
input[type="checkbox"],
input[type="radio"],
.code-input,
.auth-email-display strong,
.auth-password-strength-text,
.pm-topbar-email,
.pm-account-email,
.account-username,
.account-croplod-id,
.account-email {
    font-family: 'Product Sans', 'Dana', sans-serif;
}

/*
 * Dynamic font detection classes (applied by JS)
 * .font-persian = Dana
 * .font-latin = Product Sans
 */
.font-persian {
    font-family: 'Dana', 'Tahoma', sans-serif;
}

.font-latin {
    font-family: 'Product Sans', 'Dana', sans-serif;
}

/*
 * Typography scale for consistent sizing
 */
h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); }
h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); }
h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
h4 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); }
h5 { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); }
h6 { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); }

p { line-height: var(--line-height-relaxed); }
small { font-size: var(--font-size-xs); }

/* Responsive typography */
@media (max-width: 639px) {
    h1 { font-size: var(--font-size-2xl); }
    h2 { font-size: var(--font-size-xl); }
    h3 { font-size: var(--font-size-lg); }
    h4 { font-size: var(--font-size-base); }
}


/* ===== css/variables.css ===== */
/*
 * Croplod Design Tokens — رسمی و جدی
 * Monochrome gray system + ONE formal blue accent (#2563eb)
 * Restrained surfaces, sharp corners, subtle shadows
 */
:root {
    /* Brand Colors — تک‌رنگ: خاکستری خنثی + آبی رسمی به‌عنوان تنها رنگ تأکیدی */
    --color-primary-50: #eff5ff;
    --color-primary-100: #dbe8fe;
    --color-primary-200: #bfd7fe;
    --color-primary-300: #93bbfd;
    --color-primary-400: #6096fa;
    --color-primary-500: #3b71f7;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;

    /* Secondary = خاکستری خنثی (جایگزین فیروزه‌ای) */
    --color-secondary-50: #f9fafb;
    --color-secondary-100: #f3f4f6;
    --color-secondary-200: #e5e7eb;
    --color-secondary-300: #d1d5db;
    --color-secondary-400: #9ca3af;
    --color-secondary-500: #6b7280;
    --color-secondary-600: #4b5563;
    --color-secondary-700: #374151;
    --color-secondary-800: #1f2937;
    --color-secondary-900: #111827;

    /* Semantic — کاربردی، با اشباع کم‌تر و جدی‌تر */
    --color-success-50: #f0fdf4;
    --color-success-500: #16a34a;
    --color-success-600: #15803d;

    --color-error-50: #fef2f2;
    --color-error-500: #dc2626;
    --color-danger-500: var(--color-error-500);
    --color-error-600: #b91c1c;

    --color-warning-50: #fffbeb;
    --color-warning-500: #d97706;
    --color-warning-600: #b45309;

    /* Sidebar — مونوکروم؛ فقط آیتم فعال رنگ تأکیدی می‌گیرد */
    --sidebar-color-home: var(--text-secondary);
    --sidebar-color-account: var(--text-secondary);
    --sidebar-color-security: var(--text-secondary);
    --sidebar-color-sessions: var(--text-secondary);
    --sidebar-color-notifications: var(--text-secondary);
    --sidebar-color-wallet: var(--text-secondary);
    --sidebar-color-premium: var(--text-secondary);
    --sidebar-color-settings: var(--text-secondary);
    --sidebar-color-support: var(--text-secondary);
    --sidebar-color-about: var(--text-secondary);

    /* Spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Border radius — رسمی: گوشه‌های کم‌گرد */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.625rem;
    --radius-2xl: 0.75rem;
    --radius-full: 9999px;

    /* Shadows — ظریف و خنثی */
    --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04);
    --shadow-md: 0 1px 2px 0 rgb(15 23 42 / 0.05), 0 2px 6px -1px rgb(15 23 42 / 0.06);
    --shadow-lg: 0 4px 8px -2px rgb(15 23 42 / 0.06), 0 8px 20px -4px rgb(15 23 42 / 0.08);
    --shadow-xl: 0 8px 16px -4px rgb(15 23 42 / 0.08), 0 16px 40px -8px rgb(15 23 42 / 0.12);

    /* Typography - Smart Font System */
    --font-family: 'Dana', 'Tahoma', sans-serif;
    --font-family-brand: 'Product Sans', 'Dana', sans-serif;
    --font-family-mono: 'Product Sans', monospace;

    /* Font sizes - Fluid scale */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Letter spacing — رسمی‌تر */
    --letter-spacing-tight: -0.015em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.03em;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* Z-index scale */
    --z-below: -1;
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-sidebar-overlay: 400;
    --z-sidebar: 500;
    --z-modal-backdrop: 450;
    --z-modal: 500;
    --z-toast: 600;
    --z-notification: 700;
    --z-confirm-overlay: 800;

    /* Layout */
    --header-height: 64px;
    --sidebar-width: 280px;

    /* Touch target minimum */
    --touch-target: 44px;
}

/*
 * Light Theme (default)
 * سطوح سفید/خاکستری سرد، متن سرمه‌ای
 */
[data-theme="light"], :root {
    /* Surface elevation system */
    --bg-primary: #ffffff;
    --bg-app: var(--bg-primary);
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-input: #f8fafc;
    --bg-hover: rgba(15, 23, 42, 0.04);
    --bg-pressed: rgba(15, 23, 42, 0.08);
    --bg-active: rgba(15, 23, 42, 0.04);
    --bg-sidebar: #ffffff;

    /* Text hierarchy */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --text-muted: var(--text-tertiary);
    --text-disabled: #cbd5e1;
    --text-inverse: #ffffff;

    /* Border system — خنثی و ظریف */
    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e1;
    --border-focus: var(--color-primary-600);
    --container-lg: 1200px;
    --border-subtle: rgba(15, 23, 42, 0.05);
    --border-strong: #94a3b8;

    /* Overlay */
    --overlay: rgba(15, 23, 42, 0.4);

    /* Sidebar states */
    --sidebar-bg-active: #eff5ff;
    --sidebar-text-active: var(--color-primary-700);
    --sidebar-icon-active: var(--color-primary-700);

    /* Button states */
    --btn-primary-shadow: rgba(37, 99, 235, 0.18);
    --btn-primary-shadow-hover: rgba(37, 99, 235, 0.28);
    --btn-danger-shadow: rgba(220, 38, 38, 0.18);
    --btn-danger-shadow-hover: rgba(220, 38, 38, 0.28);

    /* Focus ring */
    --focus-ring: rgba(37, 99, 235, 0.22);

    /* Card shadows */
    --card-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06);
    --card-shadow-hover: 0 2px 4px -1px rgb(15 23 42 / 0.06), 0 4px 10px -2px rgb(15 23 42 / 0.08);
    --card-shadow-elevated: 0 8px 24px rgb(15 23 42 / 0.1);

    /* Surface tokens for component backgrounds */
    --surface-1: #f8fafc;
    --surface-2: #f1f5f9;
    --surface-3: #e2e8f0;

    /* Search */
    --search-shadow-focus: 0 1px 6px rgba(15, 23, 42, 0.12);

    /* Badge/icon backgrounds — مونوکروم با لهجه آبی */
    --icon-bg-blue: rgba(37, 99, 235, 0.08);
    --icon-bg-green: rgba(22, 163, 74, 0.08);
    --icon-bg-orange: rgba(217, 119, 6, 0.08);
    --icon-bg-purple: rgba(100, 116, 139, 0.1);
    --icon-bg-primary: rgba(37, 99, 235, 0.08);
    --icon-bg-success: rgba(22, 163, 74, 0.1);
    --icon-bg-error: rgba(220, 38, 38, 0.1);
    --icon-bg-warning: rgba(217, 119, 6, 0.1);

    /* Profile avatar */
    --avatar-shadow: 0 4px 16px rgba(37, 99, 235, 0.14);

    /* Scrollbar */
    --scrollbar-track: transparent;
    --scrollbar-thumb: var(--border-secondary);
}

/*
 * Dark Theme
 * پایه #000000 خالص (طبق تأیید قبلی) با سطوح خاکستری سرد
 */
[data-theme="dark"] {
    /* Surface elevation system - pure black hierarchy */
    --bg-primary: #000000;
    --bg-secondary: #000000;
    --bg-tertiary: #121212;
    --bg-card: #151515;
    --bg-elevated: #1c1c1c;
    --bg-input: #121212;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-pressed: rgba(255, 255, 255, 0.1);
    --bg-active: rgba(255, 255, 255, 0.06);
    --bg-sidebar: #000000;

    /* Text hierarchy */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-disabled: #3f3f46;
    --text-inverse: #0f172a;

    /* Border system — خیلی ظریف */
    --border-primary: #26262b;
    --border-secondary: #3f3f46;
    --border-focus: var(--color-primary-400);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-strong: #52525b;

    /* Overlay */
    --overlay: rgba(0, 0, 0, 0.65);

    /* Sidebar states */
    --sidebar-bg-active: rgba(59, 113, 247, 0.14);
    --sidebar-text-active: #93bbfd;
    --sidebar-icon-active: #93bbfd;

    /* Button states */
    --btn-primary-shadow: rgba(37, 99, 235, 0.28);
    --btn-primary-shadow-hover: rgba(37, 99, 235, 0.38);
    --btn-danger-shadow: rgba(220, 38, 38, 0.28);
    --btn-danger-shadow-hover: rgba(220, 38, 38, 0.38);

    /* Focus ring */
    --focus-ring: rgba(96, 150, 250, 0.28);

    /* Card shadows - stronger in dark */
    --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.5), 0 1px 3px 0 rgb(0 0 0 / 0.4);
    --card-shadow-hover: 0 2px 4px -1px rgb(0 0 0 / 0.5), 0 6px 14px -2px rgb(0 0 0 / 0.55);
    --card-shadow-elevated: 0 8px 24px rgb(0 0 0 / 0.6);

    /* Surface tokens */
    --surface-1: #0a0a0a;
    --surface-2: #121212;
    --surface-3: #1c1c1c;

    /* Search */
    --search-shadow-focus: 0 1px 6px rgba(0, 0, 0, 0.6);

    /* Badge/icon backgrounds — مونوکروم با لهجه آبی */
    --icon-bg-blue: rgba(96, 150, 250, 0.14);
    --icon-bg-green: rgba(34, 197, 94, 0.14);
    --icon-bg-orange: rgba(245, 158, 11, 0.14);
    --icon-bg-purple: rgba(148, 163, 184, 0.14);
    --icon-bg-primary: rgba(96, 150, 250, 0.14);
    --icon-bg-success: rgba(34, 197, 94, 0.14);
    --icon-bg-error: rgba(239, 68, 68, 0.14);
    --icon-bg-warning: rgba(245, 158, 11, 0.14);

    /* Profile avatar */
    --avatar-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);

    /* Scrollbar */
    --scrollbar-track: transparent;
    --scrollbar-thumb: #3f3f46;
}

/* ===== css/reset.css ===== */
/*
 * Croplod CSS Reset
 * Modern, mobile-first reset
 */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family);
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

table {
    border-collapse: collapse;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

/* Prevent horizontal scroll on all containers */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Remove default focus outline, add custom */
:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Smooth scrolling but respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* ===== css/themes.css ===== */
/*
 * Croplod Theme System
 * OS-level dark mode detection + smooth transitions
 */

/* OS-level dark mode when user hasn't chosen light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #000000;
        --bg-secondary: #000000;
        --bg-tertiary: #121212;
        --bg-card: #151515;
        --bg-elevated: #1c1c1c;
        --bg-input: #121212;
        --bg-hover: rgba(255, 255, 255, 0.06);
        --bg-pressed: rgba(255, 255, 255, 0.1);
        --bg-active: rgba(255, 255, 255, 0.06);
        --bg-sidebar: #000000;

        --text-primary: #f1f5f9;
        --text-secondary: #94a3b8;
        --text-tertiary: #64748b;
        --text-disabled: #3f3f46;
        --text-inverse: #0f172a;

        --border-primary: #26262b;
        --border-secondary: #3f3f46;
        --border-focus: var(--color-primary-400);
        --border-subtle: rgba(255, 255, 255, 0.05);

        --overlay: rgba(0, 0, 0, 0.65);

        --sidebar-bg-active: rgba(59, 113, 247, 0.14);
        --sidebar-text-active: #93bbfd;
        --sidebar-icon-active: #93bbfd;

        --btn-primary-shadow: rgba(37, 99, 235, 0.28);
        --btn-primary-shadow-hover: rgba(37, 99, 235, 0.38);
        --btn-danger-shadow: rgba(220, 38, 38, 0.28);
        --btn-danger-shadow-hover: rgba(220, 38, 38, 0.38);

        --focus-ring: rgba(96, 150, 250, 0.28);

        --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.5), 0 1px 3px 0 rgb(0 0 0 / 0.4);
        --card-shadow-hover: 0 2px 4px -1px rgb(0 0 0 / 0.5), 0 6px 14px -2px rgb(0 0 0 / 0.55);
        --card-shadow-elevated: 0 8px 24px rgb(0 0 0 / 0.6);

        --surface-1: #0a0a0a;
        --surface-2: #121212;
        --surface-3: #1c1c1c;

        --search-shadow-focus: 0 1px 6px rgba(0, 0, 0, 0.6);

        --icon-bg-blue: rgba(96, 150, 250, 0.14);
        --icon-bg-green: rgba(34, 197, 94, 0.14);
        --icon-bg-orange: rgba(245, 158, 11, 0.14);
        --icon-bg-purple: rgba(148, 163, 184, 0.14);
        --icon-bg-primary: rgba(96, 150, 250, 0.14);
        --icon-bg-success: rgba(34, 197, 94, 0.14);
        --icon-bg-error: rgba(239, 68, 68, 0.14);
        --icon-bg-warning: rgba(245, 158, 11, 0.14);

        --avatar-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);

        --scrollbar-track: transparent;
        --scrollbar-thumb: #3f3f46;
    }
}

/* Smooth theme transitions - exclude transform-heavy elements */
body {
    transition: background-color var(--transition-normal),
                color var(--transition-normal);
}

/* Don't animate sidebar/modal transforms during theme switch */
.account-sidebar,
.profile-modal,
.croplod-confirm-modal,
.profile-modal-overlay,
.croplod-confirm-overlay {
    transition: none;
}

/* Re-enable transitions after initial load */
body.loaded .account-sidebar,
body.loaded .profile-modal,
body.loaded .croplod-confirm-modal {
    transition: transform 280ms cubic-bezier(0.2, 0, 0, 1),
                opacity 0.2s ease;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    body,
    body *,
    body *::before,
    body *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}

/* ===== css/layout.css ===== */
/*
 * Croplod Layout (Account Shell)
 * Google Account inspired - fixed header + sidebar
 */

/* === Main Shell === */
.account-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: row-reverse;
    /* clip به‌جای hidden: overflow-x:hidden باعث ساخت scroll container می‌شود
       و position:sticky فرزندان (تب‌ها، سرچ‌ها) را از کار می‌اندازد */
    overflow-x: clip;
}

/* === Fixed Header === */
.account-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--z-sticky);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
}

/* Right side: brand */
.account-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-header-brand-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-header-brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.account-header-brand-icon svg {
    width: 18px;
    height: 18px;
}

.account-header-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.account-header-brand-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.account-header-brand-sub {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 400;
}

/* Left side: actions */
.account-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-header-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease;
    position: relative;
    flex-shrink: 0;
}

.account-header-action-btn:hover {
    background-color: var(--bg-hover);
}

.account-header-action-btn:active {
    background-color: var(--bg-pressed);
}

.account-header-action-btn svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    display: block;
    stroke-width: 2;
}

/* Theme toggle icons: sun in light mode, moon in dark mode */
.account-header-action-btn .ic-moon { display: none; }
[data-theme="dark"] .account-header-action-btn .ic-moon { display: block; }
[data-theme="dark"] .account-header-action-btn .ic-sun { display: none; }

/* Notification badge */
.account-header-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-error-500);
    border: 2px solid var(--bg-primary);
}

/* Header avatar */
.account-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary-400), var(--color-secondary-400));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: white;
    cursor: pointer;
    transition: box-shadow 150ms ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.account-header-avatar:hover {
    box-shadow: 0 0 0 3px var(--bg-hover);
}

.account-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* User menu */
.account-header-user-menu {
    position: relative;
}

.account-header-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: var(--card-shadow-elevated);
    padding: 8px 0;
    z-index: var(--z-dropdown);
}

.account-header-dropdown.show {
    display: block;
}

.account-header-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 150ms ease;
    text-decoration: none;
}

.account-header-dropdown-item:hover {
    background-color: var(--bg-hover);
}

.account-header-dropdown-item svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.account-header-dropdown-divider {
    height: 1px;
    background-color: var(--border-primary);
    margin: 4px 0;
}

/* Hamburger menu button */
.account-header-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.account-header-menu-btn:hover {
    background-color: var(--bg-hover);
}

.account-header-menu-btn:active {
    background-color: var(--bg-pressed);
}

.account-header-menu-btn svg {
    width: 22px;
    height: 22px;
}

/* === Sidebar === */
.account-sidebar {
    position: fixed;
    top: var(--header-height);
    right: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    background-color: var(--bg-primary);
    border-left: 1px solid var(--border-subtle);
    overflow-y: auto;
    z-index: 500;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    overscroll-behavior: contain;
}

.account-sidebar::-webkit-scrollbar {
    width: 4px;
}

.account-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.account-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 4px;
}

.account-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 10px;
}

/* Sidebar link */
.account-sidebar-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
    position: relative;
    min-height: var(--touch-target);
}

.account-sidebar-link:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.account-sidebar-link:active {
    background-color: var(--bg-pressed);
}

/* Active state */
.account-sidebar-link.active {
    background-color: var(--sidebar-bg-active);
    color: var(--sidebar-text-active);
    font-weight: 600;
}

/* Sidebar icon */
.account-sidebar-link-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
    display: block;
    stroke-width: 2;
}

/* Icon colors */
.account-sidebar-link[data-color="home"] .account-sidebar-link-icon { color: var(--sidebar-color-home); }
.account-sidebar-link[data-color="account"] .account-sidebar-link-icon { color: var(--sidebar-color-account); }
.account-sidebar-link[data-color="security"] .account-sidebar-link-icon { color: var(--sidebar-color-security); }
.account-sidebar-link[data-color="sessions"] .account-sidebar-link-icon { color: var(--sidebar-color-sessions); }
.account-sidebar-link[data-color="notifications"] .account-sidebar-link-icon { color: var(--sidebar-color-notifications); }
.account-sidebar-link[data-color="wallet"] .account-sidebar-link-icon { color: var(--sidebar-color-wallet); }
.account-sidebar-link[data-color="premium"] .account-sidebar-link-icon { color: var(--sidebar-color-premium); }
.account-sidebar-link[data-color="settings"] .account-sidebar-link-icon { color: var(--sidebar-color-settings); }
.account-sidebar-link[data-color="support"] .account-sidebar-link-icon { color: var(--sidebar-color-support); }
.account-sidebar-link[data-color="about"] .account-sidebar-link-icon { color: var(--sidebar-color-about); }

/* Active icon */
.account-sidebar-link.active .account-sidebar-link-icon {
    color: var(--sidebar-icon-active);
}

/* Divider */
.account-sidebar-divider {
    height: 1px;
    background-color: var(--border-subtle);
    margin: 8px 14px;
}

/* Section label */
.account-sidebar-section {
    padding: 12px 14px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: var(--letter-spacing-wide);
}

/* Sidebar header (mobile only) */
.account-sidebar-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px;
}

.account-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-sidebar-brand-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.account-sidebar-brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.account-sidebar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.account-sidebar-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.account-sidebar-close-btn:hover {
    background-color: var(--bg-hover);
}

.account-sidebar-close-btn:active {
    background-color: var(--bg-pressed);
}

.account-sidebar-close-btn svg {
    width: 20px;
    height: 20px;
}

/* === Sidebar Overlay === */
.account-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: var(--overlay);
    z-index: 400;
    -webkit-tap-highlight-color: transparent;
}

.account-sidebar-overlay.active {
    display: block;
}

/* === Main Content === */
.account-main {
    flex: 1;
    /* min-width:0 ضروری است: بدون آن، آیتم فلکس به‌اندازهٔ min-content محتوایش
       پهن می‌شود و در موبایل صفحه را از عرض viewport بیرون می‌زند (نصف محتوا پنهان می‌شود) */
    min-width: 0;
    margin-right: var(--sidebar-width);
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
}

.account-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px;
}

/* === Page Header === */
.account-page-header {
    margin-bottom: 32px;
}

.account-page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.account-page-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
}

/* === Dashboard Card === */
.account-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

.account-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.account-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

/* === Profile Hero === */
.account-profile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px 40px;
    text-align: center;
}

.account-profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary-400), var(--color-secondary-400));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    position: relative;
    box-shadow: var(--avatar-shadow);
}

.account-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-profile-avatar-edit {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bg-card);
    border: 2px solid var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 150ms ease;
}

.account-profile-avatar-edit:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.account-profile-avatar-edit svg {
    width: 14px;
    height: 14px;
}

.account-profile-name {
    font-size: 28px;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.account-profile-email {
    font-size: 15px;
    color: var(--text-secondary);
}

/* === Search === */
.account-search {
    max-width: 560px;
    margin: 0 auto 24px;
    position: relative;
}

.account-search-input {
    width: 100%;
    height: 50px;
    padding: 0 48px 0 20px;
    font-size: 15px;
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border: none;
    border-radius: 28px;
    outline: none;
    transition: all 200ms ease;
    font-family: var(--font-family);
}

.account-search-input::placeholder {
    color: var(--text-tertiary);
}

.account-search-input:focus {
    background-color: var(--bg-card);
    box-shadow: var(--search-shadow-focus);
}

.account-search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-tertiary);
    pointer-events: none;
}

/* === Chips === */
.account-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}

.account-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    background-color: transparent;
    border: 1px solid var(--border-primary);
    border-radius: 20px;
    cursor: pointer;
    transition: all 150ms ease;
    text-decoration: none;
    font-family: var(--font-family);
    min-height: var(--touch-target);
}

.account-chip:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-secondary);
}

.account-chip:active {
    background-color: var(--bg-pressed);
}

.account-chip svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

/* ============================================================
   RESPONSIVE: Tablet & Mobile
   ============================================================ */

/* Tablet/Mobile: collapse sidebar */
@media (max-width: 1023px) {
    /* CRITICAL FIX: Sidebar mobile slide-in */
    .account-sidebar {
        transform: translateX(100%);
        transition: transform 280ms cubic-bezier(0.2, 0, 0, 1);
        /* Ensure sidebar is above overlay on mobile */
        z-index: 500;
        /* چسبیدن به بالای مرورگر + اسکرول داخلی تا همه آیتم‌ها دیده شوند */
        top: 0;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .account-sidebar.open {
        transform: translateX(0);
    }

    .account-main {
        margin-right: 0;
    }

    .account-content {
        padding: 24px 20px;
    }

    .account-header-menu-btn {
        display: flex;
    }
}

/* Mobile */
@media (max-width: 639px) {
    :root {
        --header-height: 56px;
    }

    .account-content {
        padding: 20px 16px;
    }

    .account-header {
        padding: 0 16px;
    }

    .account-header-brand-sub {
        display: none;
    }

    .account-page-title {
        font-size: 20px;
    }

    .account-page-subtitle {
        font-size: 13px;
    }

    .account-profile-hero {
        padding: 28px 16px 24px;
    }

    .account-profile-avatar {
        width: 88px;
        height: 88px;
        font-size: 34px;
    }

    .account-profile-avatar-edit {
        width: 28px;
        height: 28px;
    }

    .account-profile-name {
        font-size: 22px;
    }

    .account-profile-email {
        font-size: 14px;
    }

    .account-search {
        margin-bottom: 16px;
    }

    .account-search-input {
        height: 44px;
        font-size: 14px;
        padding: 0 40px 0 16px;
    }

    .account-chips {
        gap: 8px;
        margin-bottom: 24px;
    }

    .account-chip {
        padding: 6px 14px;
        font-size: 12px;
    }

    .account-card {
        padding: 16px;
        margin-bottom: 12px;
        border-radius: 14px;
    }

    .account-card-header {
        margin-bottom: 14px;
    }

    .account-card-title {
        font-size: 15px;
    }

    .account-header-actions {
        gap: 4px;
    }

    .account-header-action-btn {
        width: 36px;
        height: 36px;
    }

    .account-header-avatar {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    /* Sidebar mobile - full height, smooth slide */
    .account-sidebar {
        width: min(280px, 85vw);
    }

    /* Show sidebar header on mobile */
    .account-sidebar-header {
        display: flex;
    }

    /* Safe area for notch devices */
    .account-header {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .account-sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Very small screens */
@media (max-width: 359px) {
    .account-content {
        padding: 16px 12px;
    }

    .account-header {
        padding: 0 12px;
    }

    .account-card {
        padding: 14px;
        border-radius: 12px;
    }

    .account-chip {
        padding: 5px 10px;
        font-size: 11px;
    }
}


/* ===== css/components.css ===== */
/*
 * Croplod Components
 * Google Account quality, dark theme support
 */

/* === Container === */
.container {
    width: 100%;
    max-width: var(--container-lg, 1200px);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.625rem 1.25rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
    white-space: nowrap;
    line-height: 1;
    font-family: var(--font-family);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    min-height: var(--touch-target);
}

.btn:active {
    transform: scale(0.98);
}

.btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
    color: white;
    box-shadow: 0 2px 8px var(--btn-primary-shadow);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
    box-shadow: 0 4px 12px var(--btn-primary-shadow-hover);
}

.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.btn-secondary:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-secondary);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.btn-danger {
    background: linear-gradient(135deg, var(--color-error-500), var(--color-error-600));
    color: white;
    box-shadow: 0 2px 8px var(--btn-danger-shadow);
}

.btn-danger:hover {
    box-shadow: 0 4px 12px var(--btn-danger-shadow-hover);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-xs);
    min-height: 36px;
}

.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: var(--font-size-base);
}

.btn-block {
    width: 100%;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* === Badge === */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.badge-primary {
    background-color: rgba(99, 102, 241, 0.12);
    color: var(--color-primary-600);
}

.badge-success {
    background-color: rgba(34, 197, 94, 0.12);
    color: var(--color-success-600);
}

.badge-error {
    background-color: rgba(239, 68, 68, 0.12);
    color: var(--color-error-600);
}

.badge-warning {
    background-color: rgba(245, 158, 11, 0.12);
    color: var(--color-warning-600);
}

[data-theme="dark"] .badge-primary {
    background-color: rgba(129, 140, 248, 0.16);
    color: var(--color-primary-300);
}

[data-theme="dark"] .badge-success {
    background-color: rgba(34, 197, 94, 0.16);
    color: var(--color-success-500);
}

[data-theme="dark"] .badge-error {
    background-color: rgba(239, 68, 68, 0.16);
    color: var(--color-error-500);
}

[data-theme="dark"] .badge-warning {
    background-color: rgba(245, 158, 11, 0.16);
    color: var(--color-warning-500);
}

/* === Avatar === */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary-400), var(--color-secondary-400));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    color: white;
    font-size: 14px;
    flex-shrink: 0;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-lg {
    width: 64px;
    height: 64px;
    font-size: var(--font-size-xl);
}

.avatar-xl {
    width: 96px;
    height: 96px;
    font-size: var(--font-size-2xl);
}

/* === Divider === */
.divider {
    height: 1px;
    background-color: var(--border-subtle);
    border: none;
    margin: var(--space-lg) 0;
}

/* === Toast === */
.toast-container {
    position: fixed;
    top: calc(var(--header-height) + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow-elevated);
    pointer-events: auto;
    animation: toast-in 0.3s ease;
    min-width: 280px;
    max-width: calc(100vw - 32px);
    font-size: 14px;
}

.toast-success {
    border-right: 3px solid var(--color-success-500);
}

.toast-error {
    border-right: 3px solid var(--color-error-500);
}

.toast-info {
    border-right: 3px solid var(--color-primary-500);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

/* === Theme Toggle === */
.theme-toggle {
    position: relative;
    width: 48px;
    height: 28px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    flex-shrink: 0;
}

.theme-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    background-color: var(--color-primary-500);
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast);
}

[data-theme="dark"] .theme-toggle::after {
    transform: translateX(-20px);
}

.theme-toggle-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--text-tertiary);
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.theme-toggle-icon--light {
    right: 6px;
    opacity: 1;
}

.theme-toggle-icon--dark {
    left: 6px;
    opacity: 0;
}

[data-theme="dark"] .theme-toggle-icon--light { opacity: 0; }
[data-theme="dark"] .theme-toggle-icon--dark { opacity: 1; }

/* === Spinner === */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-primary);
    border-top-color: var(--color-primary-500);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* === List Item === */
.list-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    transition: background-color var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    min-height: var(--touch-target);
}

.list-item:hover {
    background-color: var(--bg-hover);
}

.list-item:active {
    background-color: var(--bg-pressed);
}

.list-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background-color: var(--icon-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-500);
    flex-shrink: 0;
}

[data-theme="dark"] .list-item-icon {
    background-color: var(--icon-bg-primary);
}

.list-item-content {
    flex: 1;
    min-width: 0;
}

.list-item-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    overflow-wrap: break-word;
    word-break: break-word;
}

.list-item-desc {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* === SVG Icon === */
.icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.icon-lg {
    width: 24px;
    height: 24px;
}

/* === Stat Card === */
.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    transition: box-shadow 200ms ease, background-color 200ms ease;
}

.stat-card:hover {
    box-shadow: var(--card-shadow-hover);
}

.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card-icon svg {
    width: 22px;
    height: 22px;
}

.stat-card-icon--blue {
    background-color: var(--icon-bg-blue);
    color: var(--sidebar-color-home);
}

.stat-card-icon--green {
    background-color: var(--icon-bg-green);
    color: var(--sidebar-color-account);
}

.stat-card-icon--orange {
    background-color: var(--icon-bg-orange);
    color: var(--sidebar-color-security);
}

.stat-card-icon--purple {
    background-color: var(--icon-bg-purple);
    color: var(--sidebar-color-notifications);
}

.stat-card-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.stat-card-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

/* === Info Row === */
.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: 12px;
}

.info-row:last-child {
    border-bottom: none;
}

.info-row-label {
    font-size: 14px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.info-row-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-all;
}

/* === Empty State === */
.empty-state {
    text-align: center;
    padding: 48px 24px;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    color: var(--text-tertiary);
    opacity: 0.5;
}

.empty-state-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state-desc {
    font-size: 14px;
    color: var(--text-secondary);
}

/* === Table Responsive === */
@media (max-width: 639px) {
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-lg);
    }

    .table-responsive table {
        min-width: 480px;
    }

    .toast {
        min-width: auto;
        max-width: calc(100vw - 32px);
    }
}

/* === نشان تایید ستاره‌ای (X / Instagram) === */
.cr-badge {
    display: inline-block;
    vertical-align: -1px;
    margin-inline-start: 4px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

/* === نشان تایید (تصویر Twitter/X) === */
.cr-badge {
    display: inline-block;
    vertical-align: -2px;
    margin-inline-start: 4px;
    flex-shrink: 0;
    border-radius: 4px;
}

/* === جستجوی زنده کاربران === */
.account-search { position: relative; }
.account-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    display: none;
    z-index: 60;
    max-height: 320px;
    overflow-y: auto;
}
.account-search-dropdown.open { display: block; }
.account-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}
.account-search-result:hover { background: var(--bg-hover); }
.account-search-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--icon-bg-primary, rgba(79, 70, 229, 0.12));
    color: var(--color-primary-500, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
}
.account-search-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-search-meta { display: flex; flex-direction: column; min-width: 0; }
.account-search-name { font-size: 13px; font-weight: 700; display: flex; align-items: center; }
.account-search-user { font-size: 12px; color: var(--text-secondary); direction: ltr; text-align: right; }


/* ===== css/plus/plus.css ===== */
/* ==========================================================================
   Croplod Plus — Editorial redesign (Zoomit-inspired)
   RTL-first, fluid, theme-aware (light/dark via design tokens)
   ========================================================================== */

:root {
    --p-accent: #2563eb;
    --p-accent-soft: rgba(79, 70, 229, 0.1);
    --p-accent-2: #7c3aed;
    --p-danger: #dc2626;
    --p-danger-soft: rgba(220, 38, 38, 0.1);
    --p-ink: #1c1c22;
    --p-body-bg: var(--bg-secondary, #f6f7f9);
    --p-card-bg: var(--bg-card, #ffffff);
    --p-border: var(--border-primary, #e6e8ec);
    --p-border-soft: var(--border-subtle, rgba(0, 0, 0, 0.06));
    --p-text: var(--text-primary, #1c1c22);
    --p-text-2: var(--text-secondary, #5f6368);
    --p-text-3: var(--text-tertiary, #9aa0a6);
    --p-radius: 10px;
    --p-radius-sm: 8px;
    --p-radius-xs: 6px;
    --p-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --p-shadow-lg: 0 12px 32px -10px rgba(16, 24, 40, 0.16);
    --p-font-scale: 1;
}

[data-theme="dark"] {
    --p-ink: #e8eaed;
    --p-danger: #f87171;
    --p-accent-soft: rgba(129, 140, 248, 0.16);
    --p-danger-soft: rgba(248, 113, 113, 0.14);
    --p-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --p-shadow-lg: 0 12px 32px -10px rgba(0, 0, 0, 0.6);
}

html { scroll-behavior: smooth; }

.plus-body {
    background: var(--p-body-bg);
    color: var(--p-text);
    font-family: var(--font-family, 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* ===== سازگاری با قالب اکوسیستم (account-shell/header/sidebar) ===== */
.plus-body .account-shell { background: var(--p-body-bg); }
.plus-body .account-header {
    background: var(--bg-primary);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 1px solid var(--border-subtle);
}
.plus-body .account-header .account-header-brand-name { color: var(--p-text); font-weight: 800; font-size: 16.5px; }
.plus-body .account-header .account-header-brand-sub { color: var(--p-text-3); letter-spacing: 0; font-size: 10.5px; font-weight: 600; }
.plus-body .account-header .account-header-action-btn,
.plus-body .account-header .account-header-menu-btn { color: var(--p-text-2); }
.plus-body .account-header .account-header-action-btn:hover,
.plus-body .account-header .account-header-menu-btn:hover { background: var(--p-accent-soft); color: var(--p-accent); }
.plus-body .account-header-avatar {
    background: linear-gradient(135deg, #06b6d4, #0284c7 55%, #3b82f6);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(6, 182, 212, .4);
}
.plus-body .account-main {
    margin-right: var(--sidebar-width);
    margin-top: var(--header-height);
    background: transparent;
}
.plus-body .account-content {
    max-width: 1280px;
    padding: clamp(22px, 3vw, 34px) clamp(16px, 3vw, 28px) 64px;
}
.plus-body .account-sidebar {
    border-left: 1px solid var(--border-subtle);
    background: var(--bg-primary);
}
.plus-body .account-sidebar .account-sidebar-link { color: var(--p-text-2); }
.plus-body .account-sidebar .account-sidebar-link:hover { background: var(--p-accent-soft); color: var(--p-accent); }
.plus-body .account-sidebar .account-sidebar-link.active { background: var(--p-accent-soft); color: var(--p-accent); }
.plus-body .account-sidebar .account-sidebar-section { color: var(--p-text-3); }
.plus-body .account-sidebar .account-sidebar-divider { background: var(--p-border-soft); }
.plus-body .account-sidebar-header { border-bottom: 1px solid var(--p-border-soft); }
@media (max-width: 1023px) {
    .plus-body .account-main { margin-right: 0; }
    .plus-body .account-content { padding: 22px 16px 48px; }
}
@media (max-width: 639px) {
    .plus-body .account-header { padding: 0 max(14px, env(safe-area-inset-left)) 0 max(14px, env(safe-area-inset-right)); }
    .plus-body .account-header .p-search { display: none; }
}

/* Header logo becomes a clickable button that opens the logo/services modal */
.plus-body .account-header .account-header-logo-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    border-radius: 12px;
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.plus-body .account-header .account-header-logo-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 0 0 4px var(--p-accent-soft);
}
.plus-body .account-header .account-header-logo-btn:focus-visible {
    outline: 2px solid var(--p-accent);
    outline-offset: 2px;
}

/* Old utility bar & drawer no longer used */
.p-topbar { display: none; }

.p-skip {
    position: fixed; inset-inline-start: 12px; top: -60px; z-index: 2000;
    background: var(--p-accent); color: #fff; padding: 10px 18px; border-radius: 10px;
    text-decoration: none; font-size: 13px; font-weight: 700; transition: top .2s;
}
.p-skip:focus { top: 12px; }

.p-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-inline: clamp(20px, 4vw, 40px);
}

.p-main { flex: 1; padding-bottom: clamp(28px, 5vw, 56px); }

/* Logo (footer) — بدون پس‌زمینه و بدون گردی پشت لوگو */
.p-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.p-logo-mark {
    width: 40px; height: 40px; border-radius: 12px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--p-accent), var(--p-accent-2));
    box-shadow: 0 6px 16px -4px rgba(79, 70, 229, 0.5);
}
.p-logo-mark img { width: 100%; height: 100%; object-fit: cover; }
.p-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.p-logo-name { font-size: 17px; font-weight: 800; color: var(--p-text); }
.p-logo-name b { color: var(--p-accent); }
.p-logo-sub { font-size: 9px; letter-spacing: 2.2px; color: var(--p-text-3); font-weight: 700; }

/* Footer logo: بدون بک‌گراند، بدون border-radius و بدون سایه */
.p-logo-footer .p-logo-mark {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.p-logo-footer .p-logo-mark img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}
.p-logo-footer .p-logo-sub { letter-spacing: 0; font-size: 9.5px; font-weight: 600; }

/* Search (in account-header-actions) */
.p-search { position: relative; width: min(240px, 22vw); }
.p-search-ic { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--p-text-3); pointer-events: none; }
.p-search-input {
    width: 100%; height: 40px; padding: 0 14px 0 38px; border-radius: 20px;
    border: 1px solid var(--p-border); background: var(--p-body-bg);
    color: var(--p-text); font-family: inherit; font-size: 13px; outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.p-search-input:focus { border-color: var(--p-accent); box-shadow: 0 0 0 3px var(--p-accent-soft); background: var(--p-card-bg); }
.p-search-input::placeholder { color: var(--p-text-3); }

/* Theme icon swap inside header action buttons */
.account-header-action-btn .ic-moon { display: none; }
[data-theme="dark"] .account-header-action-btn .ic-moon { display: block; }
[data-theme="dark"] .account-header-action-btn .ic-sun { display: none; }

/* ============ Breaking ticker ============ */
.p-ticker {
    display: flex; align-items: stretch; gap: 0; margin-bottom: clamp(18px, 3vw, 28px);
    background: linear-gradient(90deg, #dc2626, #ea580c);
    border-radius: 14px; overflow: hidden; box-shadow: 0 10px 26px -10px rgba(220, 38, 38, 0.5);
    color: #fff;
}
.p-ticker-label {
    display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: rgba(0, 0, 0, 0.18);
    font-size: 13px; font-weight: 800; white-space: nowrap; flex-shrink: 0;
}
.p-ticker-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pPulse 1.4s infinite; }
.p-ticker-track { display: flex; align-items: center; gap: 26px; padding: 12px 18px; overflow: hidden; flex: 1; }
.p-ticker-item {
    color: rgba(255, 255, 255, 0.95); font-size: 13.5px; font-weight: 600; text-decoration: none;
    white-space: nowrap; position: relative; transition: color .15s; min-width: 0;
}
.p-ticker-item::before { content: "•"; margin-inline-end: 12px; opacity: .6; }
.p-ticker-item:hover { color: #fff; text-decoration: underline; }

/* ============ Hero zone ============ */
.p-hero {
    display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 22px);
    margin-bottom: clamp(26px, 4vw, 40px);
}

.p-lead-card {
    position: relative; display: block; border-radius: var(--p-radius); overflow: hidden;
    text-decoration: none; color: #fff; min-height: 290px; background: var(--p-ink);
    box-shadow: var(--p-shadow-lg); isolation: isolate;
    transition: transform .25s cubic-bezier(.2, 0, 0, 1);
}
.p-lead-card:hover { transform: translateY(-2px); }
.p-lead-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, 0, 0, 1); }
.p-lead-card:hover .p-lead-img { transform: scale(1.025); }
.p-lead-img-ph {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4338ca, #7c3aed 60%, #a855f7); font-size: 18px; font-weight: 700;
}
.p-lead-shade {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(185deg, rgba(10, 10, 20, 0) 28%, rgba(10, 10, 20, 0.42) 62%, rgba(10, 10, 20, 0.88) 100%);
}
.p-lead-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: clamp(14px, 2.5vw, 20px); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.p-lead-title { font-size: clamp(16px, 2vw, 20px); font-weight: 700; line-height: 1.5; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.p-lead-lead { font-size: 12.5px; line-height: 1.8; color: rgba(255, 255, 255, 0.85); max-width: 520px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-lead-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: rgba(255, 255, 255, 0.8); font-weight: 600; }

.p-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: clamp(14px, 2vw, 22px); }
.p-mini-card {
    display: flex; gap: 14px; background: var(--p-card-bg); border: 1px solid var(--p-border-soft);
    border-radius: var(--p-radius-sm); padding: 12px; text-decoration: none; color: inherit;
    box-shadow: var(--p-shadow); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.p-mini-card:hover { transform: translateY(-3px); box-shadow: var(--p-shadow-lg); border-color: rgba(79, 70, 229, 0.35); }
.p-mini-img { width: 108px; height: 86px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.p-mini-img-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-tertiary, #eef1f5), var(--bg-secondary, #f8f9fa)); color: var(--p-text-3); }
.p-mini-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; justify-content: center; }
.p-mini-cat { font-size: 11px; font-weight: 800; color: var(--p-accent); }
.p-mini-title { font-size: 13.5px; font-weight: 700; line-height: 1.7; color: var(--p-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-mini-meta { font-size: 11.5px; color: var(--p-text-3); font-weight: 600; }

/* ============ Columns ============ */
.p-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(20px, 3vw, 32px); align-items: start; }
.p-col-main { min-width: 0; display: flex; flex-direction: column; gap: clamp(26px, 4vw, 40px); }
.p-col-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--header-height) + 18px); }

/* ============ Section blocks ============ */
.p-block { min-width: 0; }
.p-block-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.p-block-title {
    font-size: clamp(17px, 2.2vw, 20px); font-weight: 800; color: var(--p-text); margin: 0;
    display: flex; align-items: center; gap: 10px; position: relative; padding-inline-start: 13px;
}
.p-block-title::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 3px; bottom: 3px; width: 4px;
    border-radius: 4px; background: linear-gradient(180deg, var(--p-accent), var(--p-accent-2));
}
.p-block-title a { color: inherit; text-decoration: none; }
.p-block-title a:hover { color: var(--p-accent); }
.p-block-more {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700;
    color: var(--p-accent); text-decoration: none; padding: 7px 13px; border-radius: 30px;
    background: var(--p-accent-soft); transition: background .15s, transform .15s;
}
.p-block-more:hover { background: rgba(79, 70, 229, 0.18); transform: translateX(-2px); }
.p-block-more .ic { transform: rotate(180deg); }

/* ---- feature row ---- */
.p-feat-row {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px;
    background: var(--p-card-bg); border: 1px solid var(--p-border-soft); border-radius: var(--p-radius);
    padding: 14px; text-decoration: none; color: inherit; box-shadow: var(--p-shadow);
    transition: transform .2s, box-shadow .2s, border-color .2s; margin-bottom: 18px;
}
.p-feat-row:hover { transform: translateY(-3px); box-shadow: var(--p-shadow-lg); border-color: rgba(79, 70, 229, 0.35); }
.p-feat-img { width: 100%; aspect-ratio: 16/10; border-radius: var(--p-radius-sm); object-fit: cover; }
.p-feat-img-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-tertiary, #eef1f5), var(--bg-secondary, #f8f9fa)); color: var(--p-text-3); }
.p-feat-body { display: flex; flex-direction: column; gap: 9px; justify-content: center; padding: 6px; min-width: 0; }
.p-feat-title { font-size: clamp(16px, 2vw, 19px); font-weight: 800; line-height: 1.65; color: var(--p-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-feat-lead { font-size: 13px; line-height: 1.9; color: var(--p-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-feat-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--p-text-3); font-weight: 600; }

/* ---- news rows ---- */
.p-news-list { display: flex; flex-direction: column; }
.p-news-list-lg { gap: 14px; }
.p-news-row {
    display: flex; gap: 16px; align-items: center; padding: 14px 0; text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--p-border-soft); transition: padding-inline-start .2s;
}
.p-news-row:last-child { border-bottom: none; }
.p-news-row:hover { padding-inline-start: 8px; }
.p-news-img { width: 148px; height: 92px; border-radius: var(--p-radius-sm); object-fit: cover; flex-shrink: 0; }
.p-news-img-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-tertiary, #eef1f5), var(--bg-secondary, #f8f9fa)); color: var(--p-text-3); }
.p-news-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.p-news-title { font-size: 14.5px; font-weight: 700; line-height: 1.75; color: var(--p-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
.p-news-row:hover .p-news-title { color: var(--p-accent); }
.p-news-lead { font-size: 12.5px; line-height: 1.85; color: var(--p-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-news-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--p-text-3); font-weight: 600; }

/* ---- category section layouts ---- */
.p-sec-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.p-card {
    display: flex; flex-direction: column; background: var(--p-card-bg); border: 1px solid var(--p-border-soft);
    border-radius: var(--p-radius); overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: var(--p-shadow); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.p-card:hover { transform: translateY(-4px); box-shadow: var(--p-shadow-lg); border-color: rgba(79, 70, 229, 0.35); }
.p-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.p-card-img-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-tertiary, #eef1f5), var(--bg-secondary, #f8f9fa)); color: var(--p-text-3); }
.p-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.p-card-title { font-size: 14px; font-weight: 700; line-height: 1.75; color: var(--p-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-card:hover .p-card-title { color: var(--p-accent); }
.p-card-lead { font-size: 12px; line-height: 1.85; color: var(--p-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-card-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--p-border-soft); font-size: 11.5px; color: var(--p-text-3); font-weight: 600; }

.p-sec-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.p-sec-feat { display: block; text-decoration: none; color: inherit; border-radius: var(--p-radius); overflow: hidden; position: relative; min-height: 280px; background: var(--p-ink); }
.p-sec-feat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-sec-feat-img-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4338ca, #7c3aed); color: #fff; }
.p-sec-feat-body {
    position: absolute; inset-inline: 0; bottom: 0; padding: 20px; color: #fff;
    background: linear-gradient(0deg, rgba(10, 10, 20, 0.88), rgba(10, 10, 20, 0));
    display: flex; flex-direction: column; gap: 8px;
}
.p-sec-feat-title { font-size: 16.5px; font-weight: 800; line-height: 1.65; }
.p-sec-feat-lead { font-size: 12.5px; color: rgba(255, 255, 255, 0.85); line-height: 1.85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-sec-rows { display: flex; flex-direction: column; gap: 0; }
.p-sec-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--p-border-soft); text-decoration: none; color: inherit; }
.p-sec-row:last-child { border-bottom: none; }
.p-sec-row-img { width: 84px; height: 62px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.p-sec-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.p-sec-row-title { font-size: 13px; font-weight: 700; line-height: 1.7; color: var(--p-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-sec-row:hover .p-sec-row-title { color: var(--p-accent); }
.p-sec-row-meta { font-size: 11px; color: var(--p-text-3); font-weight: 600; }

.p-sec-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.p-tile {
    display: flex; gap: 12px; background: var(--p-card-bg); border: 1px solid var(--p-border-soft);
    border-radius: var(--p-radius-sm); padding: 10px; text-decoration: none; color: inherit;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.p-tile:hover { transform: translateY(-3px); box-shadow: var(--p-shadow-lg); border-color: rgba(79, 70, 229, 0.35); }
.p-tile-img { width: 92px; height: 74px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.p-tile-img-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-tertiary, #eef1f5), var(--bg-secondary, #f8f9fa)); color: var(--p-text-3); }
.p-tile-body { display: flex; flex-direction: column; gap: 5px; justify-content: center; min-width: 0; }
.p-tile-title { font-size: 13px; font-weight: 700; line-height: 1.7; color: var(--p-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.p-tile:hover .p-tile-title { color: var(--p-accent); }
.p-tile-meta { font-size: 11px; color: var(--p-text-3); font-weight: 600; }

.p-sec-list { display: flex; flex-direction: column; }

/* ============ Sidebar ============ */
.p-side-box {
    background: var(--p-card-bg); border: 1px solid var(--p-border-soft); border-radius: var(--p-radius);
    padding: 20px; box-shadow: var(--p-shadow);
}
.p-side-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; color: var(--p-text); margin: 0 0 16px; }
.p-side-title-bar { width: 4px; height: 18px; border-radius: 4px; background: linear-gradient(180deg, var(--p-accent), var(--p-accent-2)); }

.p-trend-list { list-style: none; margin: 0; padding: 0; counter-reset: trend; }
.p-trend-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--p-border-soft); }
.p-trend-item:last-child { border-bottom: none; padding-bottom: 2px; }
.p-trend-num {
    font-size: 19px; font-weight: 900; line-height: 1; color: transparent;
    -webkit-text-stroke: 1.5px var(--p-accent); flex-shrink: 0; min-width: 24px;
}
.p-trend-item:first-child .p-trend-num { color: var(--p-danger); -webkit-text-stroke: 0; }
.p-trend-link { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; min-width: 0; }
.p-trend-title { font-size: 13px; font-weight: 700; line-height: 1.7; color: var(--p-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
.p-trend-link:hover .p-trend-title { color: var(--p-accent); }
.p-trend-meta { font-size: 11px; color: var(--p-text-3); font-weight: 600; }

.p-side-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.p-side-chip {
    padding: 8px 14px; border-radius: 30px; background: var(--p-body-bg); border: 1px solid var(--p-border);
    font-size: 12.5px; font-weight: 700; color: var(--p-text-2); text-decoration: none;
    transition: all .15s;
}
.p-side-chip:hover { background: var(--p-accent); border-color: var(--p-accent); color: #fff; transform: translateY(-1px); }
.p-side-chip i { font-style: normal; color: var(--p-accent); font-weight: 800; }
.p-side-chip:hover i { color: #fff; }

.p-cta {
    text-align: center; padding: 30px 22px;
    background: linear-gradient(135deg, var(--p-accent), var(--p-accent-2) 70%, #a855f7);
    border: none; color: #fff; position: relative; overflow: hidden;
}
.p-cta::before { content: ""; position: absolute; width: 220px; height: 220px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; top: -110px; inset-inline-start: -60px; }
.p-cta-mark { width: 52px; height: 52px; border-radius: 16px; overflow: hidden; display: inline-flex; background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.4); margin-bottom: 14px; }
.p-cta-mark img { width: 100%; height: 100%; object-fit: cover; }
.p-cta h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.p-cta p { margin: 0 0 18px; font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, 0.88); }
.p-cta-btn {
    display: inline-block; padding: 11px 26px; border-radius: 12px; background: #fff; color: var(--p-accent);
    font-size: 13.5px; font-weight: 800; text-decoration: none; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35);
    transition: transform .15s;
}
.p-cta-btn:hover { transform: translateY(-2px); }

/* ============ Chips & buttons ============ */
.p-chip {
    display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 30px;
    font-size: 11.5px; font-weight: 800; text-decoration: none; line-height: 1.6;
}
.p-chip-brand { background: var(--p-accent-soft); color: var(--p-accent); }
.p-chip-danger { background: var(--p-danger-soft); color: var(--p-danger); }
.p-chip-light { background: rgba(255, 255, 255, 0.92); color: var(--p-accent); }
.p-chip-ghost { background: var(--p-body-bg); color: var(--p-text-2); border: 1px solid var(--p-border); }

.p-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 26px; border: none; border-radius: 12px; cursor: pointer; text-decoration: none;
    background: linear-gradient(135deg, var(--p-accent), var(--p-accent-2)); color: #fff;
    font-family: inherit; font-size: 13.5px; font-weight: 700;
    box-shadow: 0 10px 24px -8px rgba(79, 70, 229, 0.6); transition: transform .15s, box-shadow .15s;
}
.p-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(79, 70, 229, 0.7); }

/* ============ Archive pages ============ */
.p-archive-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 0 26px; }
.p-archive-title { font-size: clamp(20px, 3vw, 26px); font-weight: 800; color: var(--p-text); margin: 0 0 6px; }
.p-archive-desc { font-size: 13.5px; color: var(--p-text-2); margin: 0; line-height: 1.9; }
.p-archive-icon { font-size: 30px; }
.p-archive-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

.p-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.p-cat-card {
    display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--p-card-bg);
    border: 1px solid var(--p-border-soft); border-radius: var(--p-radius); text-decoration: none; color: inherit;
    box-shadow: var(--p-shadow); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.p-cat-card:hover { transform: translateY(-3px); box-shadow: var(--p-shadow-lg); border-color: rgba(79, 70, 229, 0.4); }
.p-cat-icon {
    width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--p-accent-soft), rgba(124, 58, 237, 0.08)); color: var(--p-accent); flex-shrink: 0;
}
.p-cat-name { font-size: 14.5px; font-weight: 700; }
.p-cat-count { margin-inline-start: auto; font-size: 11.5px; color: var(--p-text-3); font-weight: 700; white-space: nowrap; }

.p-search-bar { display: flex; gap: 12px; margin-bottom: 22px; }
.p-search-input-lg {
    flex: 1; height: 50px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--p-border);
    background: var(--p-card-bg); color: var(--p-text); font-family: inherit; font-size: 14px; outline: none;
    box-shadow: var(--p-shadow); transition: border-color .15s, box-shadow .15s;
}
.p-search-input-lg:focus { border-color: var(--p-accent); box-shadow: 0 0 0 4px var(--p-accent-soft); }
.p-search-count { font-size: 13px; color: var(--p-text-2); margin: 0 0 18px; }
.p-search-count strong { color: var(--p-accent); }

.p-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px; justify-content: center;
    padding: 56px 20px; color: var(--p-text-3); font-size: 14px; text-align: center;
    background: var(--p-card-bg); border: 1px dashed var(--p-border); border-radius: var(--p-radius);
}
.p-empty .ic { opacity: .55; }
.p-empty p { margin: 0; line-height: 1.9; }

/* stats */
.p-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 34px; }
.p-stat-card {
    background: var(--p-card-bg); border: 1px solid var(--p-border-soft); border-radius: var(--p-radius);
    padding: 22px 20px; box-shadow: var(--p-shadow); display: flex; flex-direction: column; gap: 6px;
}
.p-stat-label { font-size: 12.5px; color: var(--p-text-2); font-weight: 600; }
.p-stat-value { font-size: 28px; font-weight: 900; color: var(--p-accent); }

/* ============ Article (post) page ============ */
.p-post-wrap { max-width: 1000px; }
.p-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--p-text-3); margin: 18px 0 22px; flex-wrap: wrap; }
.p-breadcrumb a { color: var(--p-text-2); text-decoration: none; font-weight: 600; }
.p-breadcrumb a:hover { color: var(--p-accent); }
.p-breadcrumb .ic { opacity: .6; }

.p-post-head { margin-bottom: 24px; }
.p-post-kicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.p-post-title { font-size: clamp(22px, 3.6vw, 32px); font-weight: 900; line-height: 1.6; color: var(--p-text); margin: 0 0 14px; }
.p-post-lead { font-size: 15.5px; line-height: 2; color: var(--p-text-2); margin: 0 0 20px; font-weight: 500; }
.p-post-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--p-border-soft); }
.p-post-author { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.p-post-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--p-accent), var(--p-accent-2));
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; overflow: hidden; flex-shrink: 0;
}
.p-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.p-post-author-name { font-size: 13.5px; font-weight: 700; color: var(--p-text); }
.p-post-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--p-text-3); font-weight: 600; }
.p-post-meta-item .ic { color: var(--p-accent); }

.p-post-cover { margin: 0 0 26px; }
.p-post-cover img { width: 100%; max-height: 480px; object-fit: cover; border-radius: var(--p-radius); box-shadow: var(--p-shadow-lg); }
.p-post-cover figcaption { text-align: center; font-size: 12px; color: var(--p-text-3); padding-top: 10px; }

.p-post-layout { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 22px; }
.p-post-share { display: flex; flex-direction: column; gap: 10px; align-items: center; position: sticky; top: 100px; align-self: start; }
.p-share-btn {
    width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--p-border-soft);
    background: var(--p-card-bg); color: var(--p-text-2); display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--p-shadow); transition: all .18s;
}
.p-share-btn:hover { background: var(--p-accent); color: #fff; border-color: var(--p-accent); transform: translateY(-2px); }
.p-share-btn.saved { background: #10b981; color: #fff; border-color: #10b981; }

.p-post-body { min-width: 0; }

.p-post-content { font-size: 16px; line-height: 2.2; color: var(--p-text); overflow-wrap: break-word; word-break: break-word; }
.p-post-content p { margin: 0 0 1.4em; }
.p-post-content a { color: var(--p-accent); text-decoration: underline; text-underline-offset: 4px; }
.p-post-content a:hover { color: var(--p-accent-2); }
.p-post-content h2 { font-size: 21px; font-weight: 800; margin: 1.8em 0 0.7em; line-height: 1.6; }
.p-post-content h3 { font-size: 17.5px; font-weight: 800; margin: 1.6em 0 0.6em; line-height: 1.6; }
.p-post-content ul, .p-post-content ol { margin: 0 0 1.4em; padding-inline-start: 1.6em; }
.p-post-content li { margin-bottom: 0.5em; }
.p-post-content img { max-width: 100%; height: auto; border-radius: var(--p-radius); box-shadow: var(--p-shadow); }
.p-post-content figure { margin: 1.8em 0; text-align: center; }
.p-post-content figure img { width: 100%; }
.p-post-content figcaption { font-size: 12px; color: var(--p-text-3); padding-top: 10px; }
.p-post-content blockquote {
    margin: 1.8em 0; padding: 16px 22px; border-inline-start: 4px solid var(--p-accent);
    background: var(--p-accent-soft); border-radius: 0 14px 14px 0; color: var(--p-text-2);
    font-size: 15.5px; font-style: italic; line-height: 2.1;
}
.p-post-content pre {
    direction: ltr; text-align: left; background: #0f172a; color: #e2e8f0; border-radius: 14px;
    padding: 18px; overflow-x: auto; margin: 1.6em 0; font-size: 13px; line-height: 1.8;
}
.p-post-content code { background: var(--bg-tertiary, #eef1f5); border-radius: 7px; padding: 2px 8px; font-size: 0.88em; direction: ltr; display: inline-block; }
.p-post-content pre code { background: none; padding: 0; }
.p-post-content hr { border: none; border-top: 1px solid var(--p-border); margin: 2em auto; width: 120px; }
.p-post-content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 14px; }
.p-post-content th, .p-post-content td { border: 1px solid var(--p-border); padding: 10px 14px; text-align: start; }
.p-post-content th { background: var(--p-body-bg); font-weight: 800; }

.p-post-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 28px 0 22px; padding: 16px 0; border-top: 1px solid var(--p-border-soft); }
.p-post-tags-label { font-size: 12.5px; font-weight: 700; color: var(--p-text-3); }
.p-tag { padding: 7px 15px; border-radius: 30px; background: var(--p-accent-soft); color: var(--p-accent); font-size: 12.5px; font-weight: 700; text-decoration: none; transition: all .15s; }
.p-tag:hover { background: var(--p-accent); color: #fff; }

.p-share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 18px; background: var(--p-card-bg); border: 1px solid var(--p-border-soft); border-radius: var(--p-radius); margin-bottom: 26px; }
.p-share-row > span { font-size: 13px; font-weight: 700; color: var(--p-text-2); }
.p-share-chip { padding: 8px 16px; border-radius: 30px; border: 1px solid var(--p-border); background: var(--p-body-bg); color: var(--p-text-2); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .15s; }
.p-share-chip:hover { background: var(--p-accent); border-color: var(--p-accent); color: #fff; }

.p-author-box { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--p-card-bg); border: 1px solid var(--p-border-soft); border-radius: var(--p-radius); box-shadow: var(--p-shadow); }
.p-author-avatar {
    width: 56px; height: 56px; border-radius: 15px; background: linear-gradient(135deg, var(--p-accent), var(--p-accent-2));
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; flex-shrink: 0; text-decoration: none; overflow: hidden;
}
.p-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.p-author-info b { font-size: 14.5px; display: block; margin-bottom: 5px; }
.p-author-info b a { color: var(--p-text); text-decoration: none; }
.p-author-info b a:hover { color: var(--p-accent); }
.p-author-info p { font-size: 12.5px; color: var(--p-text-2); line-height: 1.9; margin: 0; }

/* author hero */
/* ---- author profile (الگوبرداری از پنل حساب کراپلود) ---- */
.p-author-page { padding-block: clamp(22px, 3vw, 36px) 60px; }
.p-author-card {
    position: relative; overflow: hidden;
    background: var(--p-card-bg); border: 1px solid var(--p-border-soft); border-radius: 22px;
    box-shadow: var(--p-shadow); padding: clamp(24px, 4vw, 40px); margin-bottom: 34px;
}
.p-author-card-glow {
    position: absolute; inset-inline-start: -90px; inset-block-start: -110px; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(6, 182, 212, .16), transparent 68%); pointer-events: none;
}
.p-author-card-main { position: relative; display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.p-author-avatar-wrap { position: relative; flex-shrink: 0; }
.p-author-avatar-lg {
    width: 108px; height: 108px; border-radius: 26px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #06b6d4, #0284c7 55%, #3b82f6); color: #fff;
    font-size: 40px; font-weight: 900; object-fit: cover;
    box-shadow: 0 10px 26px -8px rgba(2, 132, 199, .55), 0 0 0 3px #fff, 0 0 0 5px rgba(6, 182, 212, .35);
}
.p-author-verified {
    position: absolute; inset-inline-end: -6px; inset-block-end: -6px; width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, #22d3ee, #0ea5e9); color: #fff; border: 3px solid #fff;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(2, 132, 199, .4);
}
.p-author-card-info { flex: 1; min-width: 240px; }
.p-author-name { font-size: clamp(21px, 3vw, 27px); font-weight: 900; color: var(--p-text); margin: 0 0 10px; }
.p-author-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.p-author-socials { display: inline-flex; gap: 6px; margin-inline-start: 4px; }
.p-author-socials a {
    width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--p-body-bg); color: var(--p-text-2); border: 1px solid var(--p-border); transition: all .15s;
}
.p-author-socials a:hover { background: linear-gradient(135deg, #06b6d4, #3b82f6); color: #fff; border-color: transparent; transform: translateY(-2px); }
.p-author-bio { font-size: 14px; line-height: 2; color: var(--p-text-2); margin: 0; max-width: 640px; }
.p-author-card-stats { display: flex; gap: 14px; flex-shrink: 0; margin-inline-start: auto; }
.p-author-stat {
    min-width: 86px; text-align: center; padding: 14px 10px; border-radius: 16px;
    background: var(--p-body-bg); border: 1px solid var(--p-border-soft);
}
.p-author-stat b { display: block; font-size: 20px; font-weight: 900; color: var(--p-text); }
.p-author-stat span { font-size: 11.5px; color: var(--p-text-3); }
.p-author-card-foot {
    position: relative; display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px;
    border-top: 1px solid var(--p-border-soft);
}
.p-author-foot-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--p-text-3); }
.p-author-foot-item svg { color: var(--p-accent); }
.p-author-articles { margin-top: 6px; }
.p-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.p-section-title { font-size: clamp(17px, 2.2vw, 20px); font-weight: 800; color: var(--p-text); margin: 0; display: flex; align-items: center; gap: 10px; }
.p-section-bar { width: 4px; height: 20px; border-radius: 4px; background: linear-gradient(180deg, #06b6d4, #3b82f6); }
.p-section-count { font-size: 12.5px; font-weight: 700; color: var(--p-text-3); background: var(--p-card-bg); border: 1px solid var(--p-border-soft); padding: 5px 12px; border-radius: 30px; }
@media (max-width: 760px) {
    .p-author-card-main { flex-direction: column; align-items: center; text-align: center; }
    .p-author-card-stats { margin-inline-start: 0; width: 100%; justify-content: center; }
    .p-author-bio { margin-inline: auto; }
    .p-author-card-foot { justify-content: center; }
}

/* related */
.p-related { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--p-border-soft); }
.p-related-title { font-size: clamp(17px, 2.2vw, 20px); font-weight: 800; color: var(--p-text); margin: 0 0 18px; }
.p-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* comments */
.p-comments { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--p-border-soft); }
.p-comments-title { font-size: clamp(17px, 2.2vw, 20px); font-weight: 800; color: var(--p-text); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.p-comments-count {
    font-size: 12px; font-weight: 800; color: var(--p-accent); background: var(--p-accent-soft);
    padding: 3px 12px; border-radius: 30px;
}
.p-comment-form { background: var(--p-card-bg); border: 1px solid var(--p-border-soft); border-radius: var(--p-radius); padding: 18px; margin-bottom: 20px; box-shadow: var(--p-shadow); }
.p-comment-form textarea { width: 100%; min-height: 96px; padding: 14px; border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); font-family: inherit; font-size: 14px; background: var(--p-body-bg); color: var(--p-text); resize: vertical; outline: none; transition: border-color .15s, box-shadow .15s; }
.p-comment-form textarea:focus { border-color: var(--p-accent); box-shadow: 0 0 0 4px var(--p-accent-soft); }
.p-comment-form-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.p-comment-login { background: var(--p-card-bg); border: 1px dashed var(--p-border); border-radius: var(--p-radius); padding: 20px; text-align: center; margin-bottom: 20px; }
.p-comment-login a { color: var(--p-accent); font-weight: 700; text-decoration: none; }
.p-comment-list { display: flex; flex-direction: column; gap: 12px; }
.p-comment { display: flex; gap: 13px; padding: 18px; background: var(--p-card-bg); border: 1px solid var(--p-border-soft); border-radius: var(--p-radius); }
.p-comment-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--p-accent), var(--p-accent-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.p-comment-main { min-width: 0; }
.p-comment-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.p-comment-head b { font-size: 13.5px; color: var(--p-text); }
.p-comment-head span { font-size: 11.5px; color: var(--p-text-3); }
.p-comment-main p { font-size: 13.5px; line-height: 1.95; color: var(--p-text-2); margin: 0; }
.p-comment-empty { text-align: center; color: var(--p-text-3); font-size: 13.5px; padding: 26px; background: var(--p-card-bg); border: 1px dashed var(--p-border); border-radius: var(--p-radius); margin: 0; }

/* ============ Footer ============ */
.p-footer { background: #1c1c22; color: rgba(255, 255, 255, 0.78); margin-top: auto; }
.p-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; padding-block: clamp(34px, 5vw, 56px); }
.p-footer-brand { max-width: 340px; }
.p-logo-footer { margin-bottom: 14px; }
.p-logo-footer .p-logo-name { color: #fff; }
.p-logo-footer .p-logo-sub { color: rgba(255, 255, 255, 0.5); }
.p-footer-desc { font-size: 13px; line-height: 2; margin: 0; color: rgba(255, 255, 255, 0.65); }
.p-footer-col h4 { color: #fff; font-size: 14px; font-weight: 800; margin: 0 0 16px; }
.p-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.p-footer-col a { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 13px; transition: color .15s; }
.p-footer-col a:hover { color: #fff; }
.p-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 18px 0; }
.p-footer-bottom .p-container { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
.p-heart { color: #f43f5e; }

/* ============ Logo modal (سرویس‌های کراپلود) ============ */
.plogo-overlay {
    position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, 0.55);
    opacity: 0; transition: opacity 220ms ease; pointer-events: none;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.plogo-overlay.active { opacity: 1; pointer-events: auto; }
.plogo-modal {
    position: fixed; top: 50%; left: 50%; z-index: 960;
    transform: translate(-50%, -48%) scale(.96); opacity: 0;
    width: min(420px, calc(100vw - 32px));
    background: var(--p-card-bg); color: var(--p-text);
    border: 1px solid var(--p-border-soft); border-radius: 22px;
    box-shadow: 0 30px 70px -18px rgba(0, 0, 0, 0.45);
    padding: 26px 24px 22px;
    transition: transform 220ms cubic-bezier(.2, 0, 0, 1), opacity 220ms ease;
    pointer-events: none;
}
.plogo-modal.active { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
.plogo-close {
    position: absolute; top: 12px; inset-inline-end: 12px; width: 34px; height: 34px;
    border: none; border-radius: 50%; background: var(--p-body-bg); color: var(--p-text-2);
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s;
}
.plogo-close:hover { background: var(--p-accent-soft); color: var(--p-accent); }
.plogo-close svg { width: 16px; height: 16px; }
.plogo-head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 20px; text-align: center; }
.plogo-mark {
    width: 64px; height: 64px; border-radius: 18px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
    background: var(--p-accent-soft);
}
.plogo-mark img { width: 52px; height: 52px; object-fit: contain; }
.plogo-title { font-size: 18px; font-weight: 900; color: var(--p-text); }
.plogo-sub { font-size: 12px; color: var(--p-text-3); font-weight: 600; }
.plogo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plogo-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 14px; border-radius: 14px; border: 1px solid var(--p-border-soft);
    background: var(--p-body-bg); text-decoration: none; color: inherit;
    transition: all .15s; min-width: 0;
}
.plogo-item:hover { background: var(--p-accent-soft); border-color: rgba(79, 70, 229, 0.35); transform: translateY(-2px); }
.plogo-item-icon { font-size: 20px; line-height: 1; }
.plogo-item-name { font-size: 13.5px; font-weight: 800; color: var(--p-text); margin-top: 6px; }
.plogo-item-desc { font-size: 11px; color: var(--p-text-3); }
.plogo-foot { margin-top: 18px; text-align: center; padding-top: 14px; border-top: 1px solid var(--p-border-soft); }
.plogo-foot a { font-size: 12.5px; font-weight: 700; color: var(--p-accent); text-decoration: none; }
.plogo-foot a:hover { text-decoration: underline; }

/* ============ Animations ============ */
.p-home > * { animation: pFadeUp .5s ease both; }
.p-home > *:nth-child(2) { animation-delay: .05s; }
.p-home > *:nth-child(3) { animation-delay: .1s; }
@keyframes pFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .p-home > * { animation: none; }
    html { scroll-behavior: auto; }
    .p-lead-card, .p-card, .p-mini-card, .p-tile { transition: none; }
}

/* ============ Responsive ============ */

/* Desktop: چون سایدبار ثابت ۲۸۰px دارد، محتوای واقعی از عرض viewport باریک‌تر است.
   این breakpoint ها طوری تنظیم شده‌اند که با در نظر گرفتن سایدبار، چیدمان در
   عرض‌های معمول دسکتاپ (1024 تا 1400px) هم مرتب بماند. */
@media (max-width: 1380px) {
    .p-cols { grid-template-columns: minmax(0, 1fr); }
    .p-col-side { position: static; }
    .p-cols > .p-col-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 1180px) {
    .plus-body .account-header .p-search { display: none; }
    .p-hero { grid-template-columns: 1fr; }
    .p-hero-side { grid-template-columns: 1fr 1fr; }
    .p-sec-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .p-footer-grid { grid-template-columns: 1fr 1fr; }
    .p-post-layout { grid-template-columns: minmax(0, 1fr); }
    .p-post-share { flex-direction: row; position: static; justify-content: center; margin-bottom: 20px; }
    .p-sec-split { grid-template-columns: 1fr; }
    .p-sec-feat { min-height: 240px; }
    .p-search { width: min(220px, 24vw); }
}

@media (max-width: 1023px) {
    /* هدر در موبایل/تبلت: اگر دکمه ورود کنار هدر جا نشد، فشرده می‌شود */
    .plus-body .account-header .btn-sm { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
}

@media (max-width: 640px) {
    .plus-body .account-header .btn-sm { padding: 7px 10px; font-size: 11.5px; }
    .plus-body .account-header .account-header-brand-name { font-size: 14.5px; }
    .plus-body .account-header .account-header-brand-text { min-width: 0; }
    .p-logo-mark { width: 34px; height: 34px; border-radius: 10px; }
    .p-logo-name { font-size: 15px; }
    .p-logo-sub { display: none; }
    .p-search { display: none; }
    .p-login { padding: 9px 14px; font-size: 12px; }
    .p-hero-side { grid-template-columns: 1fr; }
    .p-mini-img { width: 96px; height: 78px; }
    .p-lead-card { min-height: 300px; }
    .p-feat-row { grid-template-columns: 1fr; }
    .p-feat-img { aspect-ratio: 16/9; }
    .p-news-img { width: 110px; height: 80px; }
    .p-sec-cards { grid-template-columns: 1fr; }
    .p-sec-compact { grid-template-columns: 1fr; }
    .p-cols > .p-col-side { grid-template-columns: 1fr; }
    .p-cat-grid { grid-template-columns: 1fr 1fr; }
    .p-stats-grid { grid-template-columns: 1fr 1fr; }
    .p-related-grid { grid-template-columns: 1fr; }
    .p-footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .p-archive-head { flex-direction: column; align-items: flex-start; }
    .p-author-page { padding-block-start: 16px; }
    .p-ticker-track { gap: 0; }
    .p-ticker-label { padding: 12px 14px; }
    .p-search-bar { flex-direction: column; }
    .p-search-input-lg { width: 100%; }
    .p-search-bar .p-btn-primary { width: 100%; }
    /* Footer logo size on mobile: بدون پس‌زمینه */
    .p-logo-footer .p-logo-mark img { width: 38px; height: 38px; }
    /* Logo modal on small screens */
    .plogo-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .plus-body .account-header .account-header-brand-text { max-width: 110px; }
    .plus-body .account-header .account-header-brand-name {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
    }
    .plus-body .account-header-actions { gap: 2px; }
    .plus-body .account-header .btn-sm { padding: 6px 9px; font-size: 11px; }
    .p-cat-grid { grid-template-columns: 1fr; }
    .p-stats-grid { grid-template-columns: 1fr; }
    .p-news-row { gap: 12px; }
    .p-news-img { width: 92px; height: 72px; }
    .p-ticker-label { font-size: 12px; }
    .p-footer-bottom .p-container { justify-content: center; text-align: center; }
}


/* ===== css/components/profile-modal.css ===== */
/* ==========================================================================
   Croplod — Profile Modal (طراحی الهام‌گرفته از Google Account)
   استایل‌های پایه مودال پروفایل که توسط profile-modal.js ساخته می‌شود.
   (پیش از این فایل فقط استایل‌های سوییچ تم وجود داشت و مودال بدون استایل
   رندر می‌شد؛ به همین دلیل با کلیک روی آواتار باز نمی‌شد.)
   ========================================================================== */

.profile-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 980;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity 200ms ease;
}
.profile-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.profile-modal {
    position: fixed;
    top: calc(var(--header-height, 64px) + 12px);
    inset-inline-end: 22px;
    z-index: 990;
    width: 372px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - var(--header-height, 64px) - 44px);
    overflow-y: auto;
    background: var(--bg-card, #ffffff);
    color: var(--text-primary, #1c1c22);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
    border-radius: 24px;
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top center;
    pointer-events: none;
    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms ease;
}
.profile-modal.active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* ---------- نوار بالا: ایمیل + دکمه بستن ---------- */
.pm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 8px;
}
.pm-topbar-email {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-tertiary, #9aa0a6);
    direction: ltr;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-topbar-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--bg-secondary, #f6f7f9);
    color: var(--text-secondary, #5f6368);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 150ms ease, color 150ms ease;
}
.pm-topbar-close:hover {
    background: var(--icon-bg-primary, rgba(79, 70, 229, 0.1));
    color: var(--color-primary-500, #4f46e5);
}
.pm-topbar-close svg {
    width: 15px;
    height: 15px;
}

/* ---------- آواتار + خوش‌آمدگویی ---------- */
.pm-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 24px 18px;
    text-align: center;
}
.pm-avatar-wrap {
    position: relative;
    width: 84px;
    height: 84px;
}
.pm-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4, #0284c7 55%, #3b82f6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    overflow: hidden;
    box-shadow: 0 0 0 3px var(--bg-card, #fff), 0 0 0 4px rgba(6, 182, 212, 0.35);
}
.pm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pm-avatar-camera {
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-primary, #e6e8ec);
    color: var(--text-secondary, #5f6368);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: color 150ms ease, transform 150ms ease;
}
.pm-avatar-camera:hover {
    color: var(--color-primary-500, #4f46e5);
    transform: scale(1.08);
}
.pm-avatar-camera svg {
    width: 15px;
    height: 15px;
}
.pm-greeting {
    margin-top: 14px;
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary, #1c1c22);
}

/* ---------- وضعیت پریمیوم / دکمه ارتقاء ---------- */
.pm-premium-section {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), transparent);
    padding-top: 16px;
}
.pm-avatar-wrap.premium-halo {
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--bg-card, #fff), 0 0 0 5px rgba(245, 158, 11, 0.6), 0 6px 20px -6px rgba(245, 158, 11, 0.7);
}
.pm-avatar.pm-avatar-premium {
    background: linear-gradient(135deg, #f59e0b, #f97316 55%, #ef4444);
    box-shadow: none;
}
/* ---------- ورودی پریمیوم (جایگزین دکمهٔ بزرگ) ---------- */
.pm-premium-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 20px 14px;
    padding: 12px 14px;
    text-decoration: none;
    background: var(--bg-secondary, #f6f7f9);
    border: 1px solid var(--border-primary, #e6e8ec);
    border-radius: 14px;
    transition: background 150ms ease, border-color 150ms ease;
}
.pm-premium-entry:hover {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.4);
}
.pm-premium-entry-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    flex-shrink: 0;
}
.pm-premium-entry-icon svg {
    width: 18px;
    height: 18px;
    fill: #f59e0b;
}
.pm-premium-entry-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}
.pm-premium-entry-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary, #1c1c22);
}
.pm-premium-entry-sub {
    font-size: 11.5px;
    color: var(--text-tertiary, #9ca3af);
}
.pm-premium-entry-arrow {
    color: var(--text-tertiary, #9ca3af);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.pm-premium-entry-arrow svg {
    width: 16px;
    height: 16px;
}

/* ---------- دکمه مدیریت حساب ---------- */
.pm-manage-btn {
    display: block;
    margin: 0 20px 14px;
    padding: 12px 16px;
    text-align: center;
    text-decoration: none;
    background: var(--bg-secondary, #f6f7f9);
    border: 1px solid var(--border-primary, #e6e8ec);
    border-radius: 14px;
    color: var(--text-primary, #1c1c22);
    font-size: 13.5px;
    font-weight: 700;
    font-family: var(--font-family, inherit);
    transition: background 150ms ease, border-color 150ms ease;
}
.pm-manage-btn:hover {
    background: var(--icon-bg-primary, rgba(79, 70, 229, 0.1));
    border-color: var(--color-primary-500, #4f46e5);
}

/* ---------- لیست حساب‌های متصل ---------- */
.pm-accounts-section {
    padding: 0 12px 12px;
}
.pm-accounts-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pm-account-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    cursor: pointer;
    transition: background 150ms ease;
}
.pm-account-item:hover {
    background: var(--bg-secondary, #f6f7f9);
}
.pm-account-item.active {
    background: var(--icon-bg-primary, rgba(79, 70, 229, 0.1));
}
.pm-account-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4, #0284c7 55%, #3b82f6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}
.pm-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pm-account-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}
.pm-account-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary, #1c1c22);
}
.pm-account-email {
    font-size: 11.5px;
    color: var(--text-tertiary, #9aa0a6);
    direction: ltr;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-account-check {
    margin-inline-start: auto;
    color: var(--color-primary-500, #4f46e5);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.pm-account-check svg {
    width: 17px;
    height: 17px;
}

/* ---------- سوییچ تم ---------- */

/* ---------- دکمه‌های پایین: افزودن حساب + خروج ---------- */
.pm-bottom-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 12px 12px;
}
.pm-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text-primary, #1c1c22);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-family, inherit);
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms ease;
}
.pm-action-btn:hover {
    background: var(--bg-secondary, #f6f7f9);
}
.pm-action-btn svg {
    width: 17px;
    height: 17px;
    color: var(--text-secondary, #5f6368);
    flex-shrink: 0;
}
.pm-action-btn--signout {
    color: var(--color-error-500, #dc2626);
}
.pm-action-btn--signout svg {
    color: var(--color-error-500, #dc2626);
}
.pm-action-btn--signout:hover {
    background: rgba(220, 38, 38, 0.08);
}

/* ---------- فوتر ---------- */
.pm-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-tertiary, #9aa0a6);
}
.pm-footer a {
    color: var(--text-tertiary, #9aa0a6);
    text-decoration: none;
    transition: color 150ms ease;
}
.pm-footer a:hover {
    color: var(--color-primary-500, #4f46e5);
}
.pm-footer-dot {
    opacity: 0.5;
}

/* ---------- موبایل و تبلت: وسط‌چین شدن کامل مودال ---------- */
@media (max-width: 1023px) {
  .profile-modal {
    top: 50%;
    left: 50%;
    right: auto;
    width: min(372px, calc(100vw - 28px));
    max-height: calc(100vh - 32px);
    transform: translate(-50%, -46%) scale(0.98);
    transform-origin: center;
  }
  .profile-modal.active {
    transform: translate(-50%, -50%);
  }
}


/* ===== css/formal.css ===== */
/* ==========================================================================
   Croplod — Formal look (global)
   ظاهر رسمی و جدی برای تمام سرویس‌های اکوسیستم:
   گوشه‌های تیز، حاشیه‌های ظریف، فوکوس حرفه‌ای، تایپوگرافی منظم
   ========================================================================== */

/* ---------- Thin, tidy scrollbars ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, rgba(100, 116, 139, 0.5)) transparent;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb, rgba(100, 116, 139, 0.5));
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb, rgba(100, 116, 139, 0.75));
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* ---------- Sharp corners for shared components (all services) ---------- */
.account-card,
.stat-card,
.wallet-hero,
.auth-card,
.checkout-card,
.profile-card,
.pm-card,
.lib-card,
.plus-card,
.list-group {
    border-radius: 10px !important;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-sm,
.btn-lg,
.btn-block {
    border-radius: 6px !important;
}

.list-item,
.soc-search-card,
.soc-search,
.post {
    border-radius: 8px !important;
}

.badge,
.chip,
.wallet-chip,
.soc-history-chip {
    border-radius: 4px !important;
}

.empty-state,
.empty-state-icon,
.account-sidebar-link {
    border-radius: 8px !important;
}

.account-header-action-btn {
    border-radius: 8px !important;
}

/* Modal panels: رسمی‌تر */
.profile-modal,
.confirm-modal,
.modal,
.modal-content {
    border-radius: 12px !important;
}

/* Cards inside feeds */
.soc-feed-card,
.soc-layout-main .account-card,
.soc-layout-side .account-card {
    border-radius: 10px !important;
}

/* ==========================================================================
   رسمی‌سازی: حاشیه‌ها و سطوح
   ========================================================================== */

/* کارت‌ها: حاشیه‌ی ظریف و مشخص به‌جای سایه‌ی سنگین */
.account-card,
.stat-card,
.wallet-hero,
.auth-card,
.checkout-card,
.profile-card,
.pm-card,
.lib-card,
.plus-card,
.list-group,
.soc-feed-card,
.post,
.settings-card,
.security-section {
    border: 1px solid var(--border-primary);
    box-shadow: var(--card-shadow);
}

/* فیلدهای فرم: حاشیه‌ی ثابت و واضح */
.form-input,
.form-select,
.form-textarea,
.auth-form .form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
    border: 1px solid var(--border-secondary) !important;
    background-color: var(--bg-input);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.auth-form .form-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary-600) !important;
    box-shadow: 0 0 0 3px var(--focus-ring);
    outline: none;
}

/* ---------- دکمه‌ها: حالت رسمی ---------- */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* لینک‌ها: زیرخط رسمی و محترمانه */
a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* ---------- تایپوگرافی رسمی ---------- */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: var(--letter-spacing-tight);
    font-weight: var(--font-weight-bold);
}
.account-page-title,
.account-profile-name,
.hero-section h1,
.pm-greeting {
    letter-spacing: -0.02em;
}

/* عنوان‌های کارت: وزن و فاصله‌ی منظم */
.account-card-title,
.section-title,
.card-title {
    letter-spacing: var(--letter-spacing-normal);
}

/* متن‌های ثانویه: سلسله‌مراتب واضح */
.text-muted,
.account-page-subtitle,
.stat-card-label,
.info-row-label {
    letter-spacing: var(--letter-spacing-wide);
}

/* ---------- فوکوس کلی و دسترس‌پذیری ---------- */
::selection {
    background: var(--color-primary-600);
    color: #fff;
}

/* اسکرول‌بار هنگام فوکوس کیبوردی قابل مشاهده باشد */
:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* ---------- Premium (رنگ طلایی فقط برای سرویس پریمیوم) ---------- */

/* Premium header avatar ring */
.account-header-avatar.premium-header-avatar {
    position: relative;
    box-shadow: 0 0 0 2px var(--bg-card, #fff), 0 0 14px 1px rgba(217, 119, 6, 0.55);
}

/* Premium avatar ring on posts/comments */
.post-avatar.premium-avatar,
.soc-avatar-mini.premium-avatar {
    position: relative;
    border-radius: 50%;
}

/* ---------- Premium upgrade CTA (رسمی‌تر و کم‌تر چشمک‌زن) ---------- */
.cr-upgrade-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #b45309 0%, #d97706 45%, #b45309 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: 13.5px;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 10px -2px rgba(180, 83, 9, 0.5);
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.cr-upgrade-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px -2px rgba(180, 83, 9, 0.6);
    filter: brightness(1.04);
    color: #fff !important;
}
.cr-upgrade-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.cr-upgrade-btn-sm {
    padding: 7px 14px;
    font-size: 12.5px;
    border-radius: 6px;
}

/* Sidebar upgrade link */
.cr-upgrade-sidebar-link {
    background: linear-gradient(135deg, rgba(180,83,9,.12), rgba(217,119,6,.06)) !important;
    border: 1px solid rgba(180, 83, 9, 0.3);
    color: #b45309 !important;
    font-weight: 700 !important;
    margin: 2px 10px;
    width: calc(100% - 20px);
}
[data-theme="dark"] .cr-upgrade-sidebar-link {
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.3);
}
/* Premium badge chip */
.cr-premium-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #b45309, #d97706);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
}
.cr-premium-chip svg {
    width: 12px;
    height: 12px;
}


/* ---------- Premium profile hero: twinkle stars behind avatar ---------- */
.premium-profile-hero {
    position: relative;
    overflow: hidden;
}

.premium-profile-stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.premium-profile-stars i {
    position: absolute;
    display: block;
    width: 6px;
    height: 6px;
    background: #d97706;
    border-radius: 50%;
    box-shadow: 0 0 8px 1px rgba(217, 119, 6, 0.5);
    opacity: 0;
    animation: premium-star-twinkle 3.2s ease-in-out infinite;
}

.premium-profile-stars i:nth-child(1)  { top: 30%;  left: 38%; animation-delay: 0s; }
.premium-profile-stars i:nth-child(2)  { top: 22%;  left: 46%; animation-delay: .4s; }
.premium-profile-stars i:nth-child(3)  { top: 34%;  left: 55%; animation-delay: .8s; }
.premium-profile-stars i:nth-child(4)  { top: 40%;  left: 42%; animation-delay: 1.2s; }
.premium-profile-stars i:nth-child(5)  { top: 24%;  left: 52%; animation-delay: 1.6s; }
.premium-profile-stars i:nth-child(6)  { top: 28%;  left: 34%; animation-delay: 2.0s; }
.premium-profile-stars i:nth-child(7)  { top: 38%;  left: 60%; animation-delay: 2.4s; }
.premium-profile-stars i:nth-child(8)  { top: 18%;  left: 48%; animation-delay: .6s; }
.premium-profile-stars i:nth-child(9)  { top: 42%;  left: 50%; animation-delay: 1.0s; }
.premium-profile-stars i:nth-child(10) { top: 26%;  left: 62%; animation-delay: 1.4s; }
.premium-profile-stars i:nth-child(11) { top: 36%;  left: 30%; animation-delay: 1.8s; }
.premium-profile-stars i:nth-child(12) { top: 20%;  left: 40%; animation-delay: 2.2s; }

@keyframes premium-star-twinkle {
    0%, 100% { opacity: 0; transform: translateY(8px) scale(.6); }
    50%      { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   ریسپانسیو رسمی: تایپوگرافی سیال برای موبایل
   ========================================================================== */
@media (max-width: 639px) {
    h1, .hero-section h1 {
        font-size: clamp(1.5rem, 5.5vw, 2.25rem);
        line-height: var(--line-height-tight);
    }
    h2 {
        font-size: clamp(1.25rem, 4.5vw, 1.875rem);
    }
    .account-page-title {
        font-size: clamp(1.125rem, 4vw, 1.5rem);
    }
}

/* جداول موبایل: سرستون چسبان هنگام اسکرول افقی */
.table-responsive table th {
    position: sticky;
    top: 0;
    z-index: 1;
}
/* FIX: header/sidebar formal overrides - ensure solid monochrome and sidebar over header */
.account-header {
    background-color: var(--bg-primary) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}
.account-sidebar {
    background-color: var(--bg-primary) !important;
    z-index: 500 !important;
}
.account-sidebar-overlay {
    z-index: 400 !important;
}
/* FIX: icons explicit sizing - prevent unstyled (formal - handled in responsive) */
.account-sidebar-link-icon, .account-header-action-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}


/* ===== css/components/notification.css ===== */
/*
 * Croplod Notification System
 * Modern, RTL, dark/light mode
 */

/* Container */
.croplod-notifications {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 700;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 420px;
    width: calc(100% - 32px);
}

/* Notification item */
.croplod-notification {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--card-shadow-elevated);
    pointer-events: auto;
    animation: croplod-notif-in 0.35s cubic-bezier(0.21, 1.02, 0.73, 1);
    direction: rtl;
    font-family: var(--font-family);
    overflow: hidden;
}

[data-theme="dark"] .croplod-notification {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Animations */
@keyframes croplod-notif-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes croplod-notif-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-12px) scale(0.96); }
}

/* Icon */
.croplod-notification-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 4px;
}

.croplod-notification-icon svg {
    width: 14px;
    height: 14px;
}

/* Text */
.croplod-notification-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.5;
}

/* Close button */
.croplod-notification-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 150ms ease;
}

.croplod-notification-close:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.croplod-notification-close svg {
    width: 14px;
    height: 14px;
}

/* Progress bar */
.croplod-notification-progress {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.croplod-notification-progress-bar {
    height: 100%;
    border-radius: inherit;
    transition: width linear;
}

/* === Notification Types === */

/* Success */
.croplod-notification--success {
    border-right: 3px solid var(--color-success-500);
}

.croplod-notification--success .croplod-notification-icon {
    background-color: var(--icon-bg-success);
    color: var(--color-success-500);
}

.croplod-notification--success .croplod-notification-progress-bar {
    background-color: var(--color-success-500);
}

/* Error */
.croplod-notification--error {
    border-right: 3px solid var(--color-error-500);
}

.croplod-notification--error .croplod-notification-icon {
    background-color: var(--icon-bg-error);
    color: var(--color-error-500);
}

.croplod-notification--error .croplod-notification-progress-bar {
    background-color: var(--color-error-500);
}

/* Warning */
.croplod-notification--warning {
    border-right: 3px solid var(--color-warning-500);
}

.croplod-notification--warning .croplod-notification-icon {
    background-color: var(--icon-bg-warning);
    color: var(--color-warning-500);
}

.croplod-notification--warning .croplod-notification-progress-bar {
    background-color: var(--color-warning-500);
}

/* Info */
.croplod-notification--info {
    border-right: 3px solid var(--color-primary-500);
}

.croplod-notification--info .croplod-notification-icon {
    background-color: var(--icon-bg-primary);
    color: var(--color-primary-500);
}

.croplod-notification--info .croplod-notification-progress-bar {
    background-color: var(--color-primary-500);
}

/* === Mobile === */
@media (max-width: 639px) {
    .croplod-notifications {
        top: 16px;
        max-width: calc(100% - 24px);
    }

    .croplod-notification {
        padding: 12px 14px;
        border-radius: 10px;
    }

    .croplod-notification-text {
        font-size: 13px;
    }
}

/* ==========================================================================
   Croplod Plus - Newsroom layer   (appended last => wins the cascade)
   هدف: ظاهر یک سایت خبری رسمی  |  فقط پلاس، سایر سرویس‌ها دست‌نخورده
   ========================================================================== */

/* ---------- 1. فونت ساحل (از طریق --font-family فعال می‌شود) ------------ */
@font-face { font-family: 'Sahel'; src: url('../fonts/sahel/Sahel.woff2') format('woff2');
             font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sahel'; src: url('../fonts/sahel/Sahel-SemiBold.woff2') format('woff2');
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sahel'; src: url('../fonts/sahel/Sahel-Bold.woff2') format('woff2');
             font-weight: 700 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sahel'; src: url('../fonts/sahel/Sahel-Black.woff2') format('woff2');
             font-weight: 900; font-style: normal; font-display: swap; }

/* ---------- 2. توکن‌ها -------------------------------------------------- */
.plus-body {
    --font-family: 'Sahel', 'Vazirmatn', -apple-system, BlinkMacSystemFont, Tahoma, sans-serif;
    --p-radius: 2px; --p-radius-sm: 2px; --p-radius-xs: 2px;
    --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-full: 2px;
    --p-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --p-shadow-lg: 0 10px 28px -14px rgba(16, 24, 40, 0.22);
    --p-nav-h: 44px; --p-bar-h: 64px;
    font-family: var(--font-family);
}
.plus-body :where(input, button, select, textarea, optgroup),
.plus-body :where(.btn, .p-btn, .p-search-input, .p-search-input-lg) { font-family: inherit; }

/* ---------- 3. گوشه‌های تیز -------------------------------------------- */
.plus-body :where(
    .p-card, .p-tile, .p-mini-card, .p-feat-row, .p-news-row, .p-sec-row, .p-sec-feat,
    .p-card-img, .p-feat-img, .p-news-img, .p-mini-img, .p-tile-img, .p-sec-feat-img,
    .p-sec-row-img, .p-lead-card, .p-lead-img, .p-post-cover, .p-post-cover img,
    .p-chip, .p-tag, .p-side-box, .p-side-chip, .p-side-title-bar, .p-ticker,
    .p-search-input, .p-search-input-lg, .p-search, .p-block-more, .p-empty,
    .p-archive-head, .p-news-img-ph, .p-mini-img-ph, .p-card-img-ph, .p-feat-img-ph,
    .p-tile-img-ph, .p-sec-feat-img-ph, .p-lead-img-ph,
    .account-card, .account-header-action-btn, .account-sidebar-link,
    .account-header-logo-btn, .account-header-menu-btn, .account-header-dropdown,
    .account-header-dropdown-item, .account-chip, .toast
) { border-radius: 2px !important; }
.plus-body :where(.account-header-avatar, .account-header-badge, .p-ticker-dot,
                  .p-trend-num, .p-avatar, .account-avatar) { border-radius: 50% !important; }

/* ---------- 4. دسکتاپ: بدون سایدبار، محتوا تمام‌عرض --------------------- */
@media (min-width: 1024px) {
    .plus-body { --sidebar-width: 0px; --header-height: calc(var(--p-bar-h) + var(--p-nav-h)); }
    .plus-body .account-sidebar,
    .plus-body .account-sidebar-overlay { display: none !important; }
    .plus-body .account-main { margin-right: 0; margin-inline-start: 0; }
    .plus-body .account-content { max-width: 1280px; margin: 0 auto; padding: 22px 24px 64px; }
    .plus-body .account-header-menu-btn { display: none !important; }
    .plus-body .p-home { padding-inline: 0; padding-top: 0; }
}

/* ---------- 5. هدر دوردیفه: نوار برند + نوار دسته‌بندی ----------------- */
.plus-body .account-header { height: auto; min-height: var(--header-height);
    display: block; padding: 0; overflow: visible; }
.p-header-bar { display: flex; align-items: center; justify-content: space-between;
    gap: 16px; height: var(--p-bar-h); padding: 0 24px; max-width: 1280px; margin: 0 auto; }
.plus-body .account-header-brand { gap: 10px; min-width: 0; }
.plus-body .account-header-brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.plus-body .account-header-brand-sub { font-size: 10.5px; font-weight: 600; letter-spacing: .2px; }
.plus-body .account-header-brand-icon { width: 34px; height: 34px; }
.plus-body .account-header-brand-icon img { border-radius: 2px; }

.p-nav { display: none; }
@media (min-width: 1024px) {
    .p-nav { display: block; border-top: 1px solid var(--p-border); background: var(--p-card-bg); }
    .p-nav-inner { display: flex; align-items: stretch; gap: 0; max-width: 1280px; margin: 0 auto;
        padding: 0 24px; height: var(--p-nav-h); overflow-x: auto;
        scrollbar-width: none; -ms-overflow-style: none; }
    .p-nav-inner::-webkit-scrollbar { display: none; }
    .p-nav-link { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0 14px;
        height: var(--p-nav-h); font-size: 13.5px; font-weight: 600; letter-spacing: -.1px;
        color: var(--p-text-2); text-decoration: none; white-space: nowrap;
        border-bottom: 2px solid transparent; border-top: 2px solid transparent;
        transition: color .15s ease, border-color .15s ease; }
    .p-nav-link:hover { color: var(--p-text); }
    .p-nav-link.active { color: var(--p-accent); border-bottom-color: var(--p-accent); }
    .p-nav-spacer { flex: 1 1 auto; }
    .p-nav-util { font-weight: 500; color: var(--p-text-3); }
    .p-nav-util:hover { color: var(--p-text-2); }
}

/* ---------- 6. موبایل: کشوی بهینه -------------------------------------- */
@media (max-width: 1023px) {
    .plus-body { --header-height: 56px; --p-bar-h: 56px; }
    .p-header-bar { padding: 0 14px; }
    .plus-body .account-header-brand-name { font-size: 16px; }
    .plus-body .account-header-brand-icon { width: 30px; height: 30px; }
    .plus-body .account-sidebar { width: min(304px, 88vw);
        box-shadow: -20px 0 44px -24px rgba(16, 24, 40, 0.4); }
    .plus-body .account-sidebar-header { padding: 14px 16px; border-bottom: 1px solid var(--p-border); }
    .plus-body .account-sidebar-nav { padding: 10px 12px 16px; gap: 2px; }
    .plus-body .account-sidebar-link { padding: 12px 14px; font-size: 14.5px; font-weight: 600;
        gap: 12px; border-radius: 2px !important; }
    .plus-body .account-sidebar-link-icon { width: 19px; height: 19px; min-width: 19px; }
    .plus-body .account-sidebar-section { padding: 14px 14px 6px; font-size: 11.5px;
        font-weight: 700; letter-spacing: .4px; color: var(--p-text-3); }
    .plus-body .account-sidebar-divider { margin: 10px 14px; }
    .plus-body .account-main { margin-right: 0; margin-inline-start: 0; }
    .plus-body .account-content { padding: 14px 13px 48px; }
    .plus-body .p-home { padding-inline: 0; padding-top: 0; }
}

/* ---------- 7. تیکر: تخت و رسمی ---------------------------------------- */
.plus-body .p-ticker { background: #b91c1c; box-shadow: none; margin-bottom: 16px; }
.plus-body .p-ticker-label { background: rgba(0, 0, 0, 0.22); font-weight: 800; letter-spacing: 0; }
.plus-body .p-ticker-item { font-weight: 600; }

/* ---------- 8. سرتیتر بخش‌ها: قاعده + جداکننده ------------------------- */
.plus-body .p-block-head { align-items: center; margin-bottom: 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--p-border); }
.plus-body .p-block-title { position: relative; margin: 0; padding-inline-start: 12px;
    font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.2px; color: var(--p-text); }
.plus-body .p-block-title::before { content: ""; position: absolute; inset-inline-start: 0;
    top: 50%; transform: translateY(-50%); width: 3px; height: 1.05em; background: var(--p-accent); }
.plus-body .p-block-more { background: transparent; padding: 0; border-radius: 0 !important;
    color: var(--p-text-3); font-size: 12.5px; font-weight: 600; }
.plus-body .p-block-more:hover { background: transparent; color: var(--p-accent); transform: none; }

/* ---------- 9. مقیاس تایپ رسمی ----------------------------------------- */
.plus-body .p-lead-title { font-size: clamp(20px, 2.5vw, 29px); font-weight: 800;
    line-height: 1.48; letter-spacing: -.4px; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.plus-body .p-lead-lead { font-size: 13.5px; line-height: 1.9; }
.plus-body .p-feat-title { font-size: clamp(18px, 2.1vw, 23px); font-weight: 800;
    line-height: 1.55; letter-spacing: -.3px; }
.plus-body .p-feat-lead { font-size: 13px; line-height: 1.9; }
.plus-body .p-news-title, .plus-body .p-card-title { font-size: 15.5px; font-weight: 700;
    line-height: 1.62; letter-spacing: -.15px; }
.plus-body .p-card-lead, .plus-body .p-sec-feat-lead { font-size: 12.5px; line-height: 1.9; }
.plus-body .p-sec-feat-title { font-size: 18px; font-weight: 800; line-height: 1.55; }
.plus-body .p-sec-row-title, .plus-body .p-tile-title { font-size: 14.5px; font-weight: 700; line-height: 1.6; }
.plus-body .p-mini-title { font-size: 14.5px; font-weight: 700; line-height: 1.58; }
.plus-body .p-side-title { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.plus-body .p-section-title { font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
.plus-body .p-archive-title { font-size: clamp(20px, 3vw, 27px); font-weight: 800; letter-spacing: -.4px; }
.plus-body .p-post-title { font-size: clamp(23px, 3.4vw, 34px); font-weight: 900;
    line-height: 1.52; letter-spacing: -.5px; }
.plus-body :where(.p-lead-meta, .p-news-meta, .p-mini-meta, .p-card-meta,
    .p-feat-meta, .p-sec-row-meta, .p-tile-meta) { font-size: 12px; color: var(--p-text-3); font-weight: 600; }
.plus-body .p-mini-cat { font-size: 11.5px; font-weight: 700; color: var(--p-accent); letter-spacing: 0; }
.plus-body :where(.p-chip, .p-tag, .p-side-chip) { font-size: 11.5px; font-weight: 700; padding: 4px 9px; }

/* ---------- 10. کارت‌ها و ردیف‌ها: خط مویی، بدون سایه -------------------- */
.plus-body :where(.p-card, .p-feat-row, .p-mini-card, .p-sec-feat, .p-tile, .p-side-box) {
    box-shadow: none; border: 1px solid var(--p-border); background: var(--p-card-bg); }
.plus-body :where(.p-card, .p-feat-row, .p-mini-card, .p-sec-feat, .p-tile):hover {
    transform: none; box-shadow: none; border-color: var(--p-accent); }
.plus-body .p-card:hover .p-card-title,
.plus-body .p-feat-row:hover .p-feat-title { color: var(--p-accent); }
.plus-body .p-lead-card { box-shadow: none; }
.plus-body .p-lead-card:hover { transform: none; }
.plus-body .p-post-cover img { box-shadow: none; border-radius: 2px !important; }
.plus-body .p-news-list .p-news-row { padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--p-border-soft); }
.plus-body .p-news-list .p-news-row:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.plus-body .p-news-list-lg { gap: 0; }
.plus-body .p-sec-rows .p-sec-row { padding-bottom: 11px; margin-bottom: 11px;
    border-bottom: 1px solid var(--p-border-soft); }
.plus-body .p-sec-rows .p-sec-row:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }

/* ---------- 11. جستجو و اکشن‌های هدر ----------------------------------- */
.plus-body .p-search { width: min(230px, 21vw); }
.plus-body .p-search-input { height: 38px; padding-inline: 34px 12px; font-size: 13px; }
.plus-body .p-search-ic { inset-inline-start: 11px; }
.plus-body .account-header-action-btn { border-radius: 2px !important; width: 38px; height: 38px; }
.plus-body .account-header-avatar { border-radius: 50% !important; width: 34px; height: 34px; }

/* ---------- 12. ریزه‌کاری چیدمان --------------------------------------- */
.plus-body .p-cols { grid-template-columns: minmax(0, 1fr) 312px; gap: 30px; }
.plus-body .p-col-side { top: calc(var(--header-height) + 14px); }
.plus-body .p-hero { gap: 16px; margin-bottom: clamp(22px, 3vw, 34px); }
.plus-body .p-hero-side { gap: 16px; }
.plus-body .p-lead-card { min-height: 322px; }
.plus-body .p-side-title-bar { background: var(--p-accent); }
.plus-body .p-container { max-width: 1240px; }

@media (max-width: 1023px) {
    .plus-body .p-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .plus-body .p-col-side { position: static; }
    .plus-body .p-hero { gap: 12px; margin-bottom: 20px; }
    .plus-body .p-hero-side { gap: 12px; }
    .plus-body .p-lead-card { min-height: 250px; }
    .plus-body .p-block-title { font-size: 16px; }
    .plus-body .p-news-title { font-size: 14.5px; }
    .plus-body .p-lead-title { font-size: clamp(18px, 5vw, 22px); }
}
@media (max-width: 639px) {
    .plus-body .p-lead-card { min-height: 216px; }
    .plus-body .p-block-title { font-size: 15.5px; }
}