html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* اسپینر وسط صفحه هنگام Enhanced Navigation (js/sy-nav-progress.js) — سطح صفحه، مستقل از هر layout. */
#sy-nav-progress {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .55);
    opacity: 0;
    z-index: 9999;
    pointer-events: none;
    transition: opacity .15s ease;
}

#sy-nav-progress.visible {
    opacity: 1;
    pointer-events: auto;
}

/* اسپینر عمومی قابل‌استفاده مجدد (نوار ناوبری + اسکلت لودینگ صفحاتی مثل «پرونده من»). */
.sy-spin {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid var(--sy-blue-bg);
    border-top-color: var(--sy-primary);
    animation: sy-nav-spin .7s linear infinite;
}

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

/* فونت فارسی Vazir از قالب Porto (لایسنس خریداری‌شده — با تأیید کاربر) — نگه داشته شده به‌عنوان
   fallback در زنجیره‌ی فونت (بعد از IranYekan)؛ Vazirmatn به‌عنوان fallback بعدی. */
@font-face { font-family: 'Vazir'; src: url('fonts/vazir/vazir-300.woff2') format('woff2'), url('fonts/vazir/vazir-300.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Vazir'; src: url('fonts/vazir/vazir-400.woff2') format('woff2'), url('fonts/vazir/vazir-400.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vazir'; src: url('fonts/vazir/vazir-500.woff2') format('woff2'), url('fonts/vazir/vazir-500.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Vazir'; src: url('fonts/vazir/vazir-700.woff2') format('woff2'), url('fonts/vazir/vazir-700.woff') format('woff'); font-weight: 700; font-display: swap; }

/* فونت اصلی متن «IranYekan» از همان قالب Porto (لایسنس خریداری‌شده) — دقیقاً معادل primary-font در
   Porto/css/skins/default.css (نمونه‌ی اصلی سلامت‌یار). جایگزین Vazir به‌عنوان فونت پیش‌فرض فارسی/عربی. */
@font-face { font-family: 'IranYekan'; src: url('fonts/iran-yekan/iran-yekan-300.woff2') format('woff2'), url('fonts/iran-yekan/iran-yekan-300.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'IranYekan'; src: url('fonts/iran-yekan/iran-yekan-400.woff2') format('woff2'), url('fonts/iran-yekan/iran-yekan-400.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IranYekan'; src: url('fonts/iran-yekan/iran-yekan-500.woff2') format('woff2'), url('fonts/iran-yekan/iran-yekan-500.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IranYekan'; src: url('fonts/iran-yekan/iran-yekan-700.woff2') format('woff2'), url('fonts/iran-yekan/iran-yekan-700.woff') format('woff'); font-weight: 700; font-display: swap; }

/* فونت تیتر «Pinar» از همان قالب Porto (لایسنس خریداری‌شده) — دقیقاً معادل secondary-font در
   Porto/css/skins/default.css (نمونه‌ی اصلی سلامت‌یار: primary=iran-yekan, secondary=pinar)؛
   فقط برای تیترهای سطح صفحه/بخش استفاده می‌شود (هیرو، عنوان بخش، عنوان کاشی صفحه)، نه متن عادی. */
@font-face { font-family: 'Pinar'; src: url('fonts/pinar/pinar-300.woff2') format('woff2'), url('fonts/pinar/pinar-300.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Pinar'; src: url('fonts/pinar/pinar-400.woff2') format('woff2'), url('fonts/pinar/pinar-400.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pinar'; src: url('fonts/pinar/pinar-500.woff2') format('woff2'), url('fonts/pinar/pinar-500.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Pinar'; src: url('fonts/pinar/pinar-700.woff2') format('woff2'), url('fonts/pinar/pinar-700.woff') format('woff'); font-weight: 700; font-display: swap; }

/* ── توکن‌های طراحی موکاپ (design/salamatyar-phase1-mockup.html) — بخش ۱۴ CLAUDE.md ──
   بلوک :root فقط custom property تعریف می‌کند، global-safe است. کلاس‌های خودِ موکاپ
   (site-header/hero/card/btn/...) زیر ".sy-public" اسکوپ شده‌اند تا با کلاس‌های هم‌نام
   Bootstrap (که بقیه‌ی اپ استفاده می‌کند) تداخل نکنند. */
:root {
    --sy-primary: #4272f5;
    --sy-primary-dark: #2f56c9;
    --sy-teal: #1fb8a6;
    --sy-teal-dark: #0e8a7c;
    --sy-ink: #1d2733;
    --sy-muted: #7a8699;
    --sy-line: #e8edf4;
    --sy-bg: #ffffff;
    --sy-bg-soft: #f6f8fc;
    --sy-green: #22a06b;
    --sy-green-bg: #e7f6ef;
    --sy-amber: #b97d10;
    --sy-amber-bg: #fdf3df;
    --sy-red: #d24545;
    --sy-red-bg: #fdecec;
    --sy-blue-bg: #ecf1fe;
    --sy-teal-bg: #e4f6f4;
    --sy-purple: #7b5cd6;
    --sy-purple-bg: #efeafc;
    --sy-side: #141c27;
    --sy-radius: 16px;
    --sy-shadow: 0 8px 28px rgba(29, 39, 51, .07);
}

.sy-public {
    color: var(--sy-ink);
    background: var(--sy-bg);
    font-size: 15px;
    line-height: 1.9;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* فوتر چسبان به پایین صفحه: محتوای وسط رشد می‌کند تا فاصله‌ی خالی زیر فوتر در صفحات کوتاه از بین برود. */
.sy-public-main {
    flex: 1 0 auto;
}

.sy-public a { color: inherit; text-decoration: none; }
.sy-public .sy-container { max-width: 1140px; margin-inline: auto; padding-inline: 20px; }
.sy-public h1, .sy-public h2, .sy-public h3, .sy-public h4 { line-height: 1.5; }
.sy-public .sy-section { padding-block: 70px; }
.sy-public .sy-section-soft { background: var(--sy-bg-soft); }
.sy-public .sy-section-title { text-align: center; margin-block-end: 44px; }
.sy-public .sy-section-title h1, .sy-public .sy-section-title h2 { font-size: 28px; font-weight: 800; }
.sy-public .sy-section-title p { color: var(--sy-muted); max-width: 560px; margin-inline: auto; margin-block-start: 8px; }
.sy-public .sy-eyebrow { display: inline-block; background: var(--sy-blue-bg); color: var(--sy-primary); font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 999px; margin-block-end: 12px; }

/* هدر سایت عمومی — sticky + جمع‌وجورشونده هنگام اسکرول (js/sy-header.js)، الهام از
   header-effect-shrink پورتو. رنگ پس‌زمینه عمداً همیشه سفید-نیمه‌شفاف ماند (نه transparent کامل روی
   هیرو تیره مثل خودِ پورتو) چون هیرو این پروژه روشن است (بخش ۱۴ CLAUDE.md، طراحی تأییدشده)؛ نسخه‌ی
   transparent روی هیرو روشن این پروژه کنتراست متن را از بین می‌برد. */
.sy-public .sy-site-header { position: sticky; top: 0; z-index: 30; padding-block: 18px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); border-block-end: 1px solid var(--sy-line); transition: padding-block .25s ease, box-shadow .25s ease; }
.sy-public .sy-site-header.sy-header-scrolled { padding-block: 10px; box-shadow: 0 6px 24px rgba(20, 28, 39, .1); }
.sy-public .sy-site-header.sy-header-scrolled .sy-logo svg { width: 30px; height: 30px; transition: width .25s ease, height .25s ease; }
.sy-public .sy-site-header .sy-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.sy-public .sy-nav-r { display: flex; gap: 26px; justify-content: flex-start; font-weight: 500; font-size: 14px; }
.sy-public .sy-nav-l { display: flex; gap: 26px; justify-content: flex-end; font-weight: 500; font-size: 14px; align-items: center; }
.sy-public .sy-logo { display: flex; align-items: center; gap: 10px; justify-content: center; }
.sy-public .sy-logo strong { font-size: 18px; font-weight: 800; }

/* انتخاب زبان — details/summary بومی، بدون جاوااسکریپت، سازگار با Static SSR */
.sy-public .sy-lang { position: relative; }
.sy-public .sy-lang summary { display: flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; font-weight: 500; font-size: 14px; color: inherit; }
.sy-public .sy-lang summary::-webkit-details-marker { display: none; }
.sy-public .sy-lang[open] summary svg { transform: rotate(180deg); }
.sy-public .sy-lang summary svg { transition: transform .2s; }
.sy-public .sy-lang-menu { position: absolute; inset-block-start: calc(100% + 12px); inset-inline-end: 0; background: #fff; border: 1px solid var(--sy-line); border-radius: 12px; box-shadow: var(--sy-shadow); padding: 6px; min-width: 120px; z-index: 20; }
.sy-public .sy-lang-menu a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--sy-ink); }
.sy-public .sy-lang-menu a:hover { background: var(--sy-bg-soft); }
.sy-public .sy-lang-menu a.active { color: var(--sy-primary); font-weight: 700; background: var(--sy-blue-bg); }

/* منوی کاربر (AppLayout + PublicLayout وقتی لاگین است) — details/summary بومی */
.sy-public .sy-user { position: relative; }
.sy-public .sy-user summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: inherit; }
.sy-public .sy-user summary::-webkit-details-marker { display: none; }
.sy-public .sy-user[open] summary svg { transform: rotate(180deg); }
.sy-public .sy-user summary svg { transition: transform .2s; }
.sy-public .sy-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--sy-teal-bg); color: var(--sy-teal-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex: none; }
.sy-public .sy-user .sy-avatar { width: 30px; height: 30px; background: var(--sy-primary); color: #fff; }
.sy-public .sy-user-phone { font-weight: 500; font-size: 14px; direction: ltr; }
.sy-public .sy-user-name { font-weight: 500; font-size: 14px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-public .sy-user-menu { position: absolute; inset-block-start: calc(100% + 12px); inset-inline-end: 0; background: #fff; border: 1px solid var(--sy-line); border-radius: 12px; box-shadow: var(--sy-shadow); padding: 6px; min-width: 190px; z-index: 20; }
.sy-public .sy-user-menu-head { padding: 8px 12px 10px; border-block-end: 1px solid var(--sy-line); margin-block-end: 6px; }
.sy-public .sy-user-menu-head .sy-eyebrow { margin: 0 0 4px; }
.sy-public .sy-user-menu-head strong { display: block; font-size: 14px; direction: ltr; text-align: end; }
.sy-public .sy-user-menu a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--sy-ink); }
.sy-public .sy-user-menu a:hover { background: var(--sy-bg-soft); }
.sy-public .sy-user-menu hr { margin: 6px 4px; border-color: var(--sy-line); }
.sy-public .sy-user-menu form { margin: 0; }
.sy-public .sy-user-logout { width: 100%; text-align: start; background: none; border: 0; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--sy-red); cursor: pointer; font-family: inherit; }
.sy-public .sy-user-logout:hover { background: var(--sy-red-bg); }

.sy-public .sy-notif { position: relative; }
.sy-public .sy-notif summary { display: flex; align-items: center; position: relative; cursor: pointer; list-style: none; color: inherit; padding: 6px; }
.sy-public .sy-notif summary::-webkit-details-marker { display: none; }
.sy-public .sy-notif-badge { position: absolute; top: 0; inset-inline-end: 0; background: var(--sy-red); color: #fff; font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.sy-public .sy-notif-menu { position: absolute; inset-block-start: calc(100% + 12px); inset-inline-end: 0; background: #fff; border: 1px solid var(--sy-line); border-radius: 12px; box-shadow: var(--sy-shadow); padding: 6px; min-width: 300px; max-width: 340px; z-index: 20; }
.sy-public .sy-notif-menu-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px 10px; border-block-end: 1px solid var(--sy-line); margin-block-end: 6px; }
.sy-public .sy-notif-menu-head strong { font-size: 14px; }
.sy-public .sy-notif-mark-all { background: none; border: 0; padding: 0; font-size: 11px; font-weight: 600; color: var(--sy-primary); cursor: pointer; font-family: inherit; }
.sy-public .sy-notif-item { padding: 10px 12px; border-radius: 8px; }
.sy-public .sy-notif-item:hover { background: var(--sy-bg-soft); }
.sy-public .sy-notif-item.unread { background: var(--sy-blue-bg); }
.sy-public .sy-notif-item p { margin: 0; font-size: 13px; color: var(--sy-ink); line-height: 1.6; }
.sy-public .sy-notif-item small { display: block; margin-block-start: 4px; font-size: 11px; color: var(--sy-muted); }
.sy-public .sy-notif-item.sy-notif-success p { color: var(--sy-green); }
.sy-public .sy-notif-item.sy-notif-warning p { color: var(--sy-amber); }
.sy-public .sy-notif-item.sy-notif-critical p { color: var(--sy-red); }
.sy-public .sy-notif-view-all { display: block; text-align: center; padding: 10px 12px; margin-block-start: 4px; border-block-start: 1px solid var(--sy-line); font-size: 13px; font-weight: 600; color: var(--sy-primary); }

/* بدنه‌ی صفحات اپ (پشت ورود) — هر صفحه خودش عرض/padding محتوا را با .content تنظیم می‌کند */
.sy-public .sy-app-main { padding-block: 32px 60px; min-height: 50vh; }

/* hero + ask-bar */
.sy-public .sy-hero {
    position: relative;
    text-align: center;
    padding-block: 60px;
    min-height: 86vh;
    display: flex;
    align-items: center;
    background-color: #ededed;
    background-size: auto, auto, cover, auto;
    background-position: center, center, center, center;
    overflow: hidden;
}
.sy-public .sy-hero .sy-container { width: 100%; position: relative; z-index: 1; }
.sy-public .sy-hero .sy-pill { display: inline-flex; align-items: center; gap: 10px; color: var(--sy-ink); font-weight: 700; font-size: 14px; margin-block-end: 14px; }
.sy-public .sy-hero .sy-dash { display: inline-block; width: 26px; height: 6px; background-image: repeating-linear-gradient(to left, var(--sy-primary) 0 3px, transparent 3px 6px); opacity: .55; }
.sy-public .sy-hero h1 { font-size: 46px; font-weight: 800; letter-spacing: -.5px; }
.sy-public .sy-hero p.sy-lead { color: var(--sy-muted); max-width: 520px; margin-inline: auto; margin-block: 14px 30px; font-size: 16px; }
.sy-public .sy-ask-bar { max-width: 640px; margin-inline: auto; display: flex; align-items: center; gap: 10px; background: var(--sy-primary); border-radius: 999px; padding: 8px 10px; box-shadow: 0 14px 34px rgba(66, 114, 245, .35); }
.sy-public .sy-ask-bar input { flex: 1; background: transparent; border: 0; outline: 0; color: #fff; font-family: inherit; font-size: 15px; text-align: start; padding: 8px 6px; }
.sy-public .sy-ask-bar input::placeholder { color: rgba(255, 255, 255, .85); }
.sy-public .sy-circle-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
.sy-public .sy-circle-btn.white { background: #fff; color: var(--sy-primary); }
.sy-public .sy-ask-ic { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .8); flex: none; width: 30px; height: 30px; }
.sy-public .sy-ask-ic.sy-ask-plus { background: rgba(255, 255, 255, .18); border-radius: 50%; color: #fff; }
.sy-public .sy-hero-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; max-width: 960px; margin: 64px auto 0; }
.sy-public .sy-hero-icons .sy-it { text-align: center; }
.sy-public .sy-hero-icons .sy-it svg { color: var(--sy-ink); }
.sy-public .sy-hero-icons .sy-it h6 { font-size: 15px; font-weight: 800; margin-block-start: 10px; }
.sy-public .sy-hero-icons .sy-it span { font-size: 13px; color: var(--sy-muted); }

.sy-public .sy-scroll-cue { position: absolute; inset-inline: 0; inset-block-end: 22px; display: flex; justify-content: center; color: var(--sy-muted); z-index: 1; }
.sy-public .sy-scroll-cue svg { animation: sy-bounce 1.8s ease-in-out infinite; }

/* پس‌زمینه‌ی تزئینی هیرو — الهام از چیدمان کولاژ عکس در Porto (گوشی/ساعت هوشمند/گزارش سلامت در گوشه‌ها)،
   ولی به‌جای عکس‌های stock بسته‌بندی‌شده با قالب (که مجوزشان فقط برای دموی خودِ قالب است، نه محصول ما)،
   با آیکون‌های خطی انتزاعی و اورجینال بازسازی شده — بدون ریسک کپی‌رایت. */
.sy-public .sy-hero-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sy-public .sy-hd {
    position: absolute;
    max-width: 27%;
    max-height: 54%;
    object-fit: cover;
    border-radius: 20px;
    opacity: .8;
}
/* موقعیت این ۴ عکس، برخلاف بقیه‌ی سایت، عمداً فیزیکی (left/right) است نه منطقی (inset-inline) —
   دقیقاً مطابق چیدمان اصلی Porto (data-x="left/right")، مستقل از جهت متن صفحه (rtl/ltr). */
.sy-public .sy-hd-1 { left: 0; top: 0; }
.sy-public .sy-hd-2 { right: 0; top: 0; }
.sy-public .sy-hd-3 { left: 0; bottom: 0; }
.sy-public .sy-hd-4 { right: 0; bottom: 0; }
.sy-public .sy-hero-underline { display: block; height: 10px; width: auto; margin: 0px auto 10px; }

/* انیمیشن‌های ورودی هیرو (الهام از ترتیب لایه‌های Revolution Slider در قالب Porto — بدون jQuery/پلاگین،
   فقط CSS keyframes با تأخیر پلکانی؛ چون هیرو فقط یک بار در لود صفحه دیده می‌شود نیازی به JS/IntersectionObserver ندارد) */
@media (prefers-reduced-motion: no-preference) {
    /* زمان‌بندی دقیقاً بر اساس data-frames لایه‌های Revolution Slider در index2.html (delay به ثانیه):
       پیل ۰.۷ → عنوان (بزرگ‌نمایی رو به کوچک، مثل sX:1.5) ۱.۰ → خط تزئینی + نوار پرسش هم‌زمان ۲.۰ →
       توضیح ۲.۳ → آیکون‌های ویژگی ۲.۶ → عکس‌های گوشه (مثل ورود لایه‌های تصویر اسلایدر) ۱.۵ */
    .sy-public .sy-hd { animation: sy-fade-in 1.1s both; }
    .sy-public .sy-hd-1 { animation-delay: 1.5s; }
    .sy-public .sy-hd-2 { animation-delay: 1.5s; }
    .sy-public .sy-hd-3 { animation-delay: 1.7s; }
    .sy-public .sy-hd-4 { animation-delay: 1.7s; }
    .sy-public .sy-hero .sy-pill { animation: sy-fade-down .7s both; animation-delay: .7s; }
    .sy-public .sy-hero h1 { animation: sy-scale-in 1s both; animation-delay: 1s; }
    .sy-public .sy-hero-underline { animation: sy-fade-in .5s both; animation-delay: 2s; }
    .sy-public .sy-hero .sy-ask-bar { animation: sy-fade-up .6s both; animation-delay: 2s; }
    .sy-public .sy-hero p.sy-lead { animation: sy-fade-in .5s both; animation-delay: 2.3s; }
    .sy-public .sy-hero-icons .sy-it { animation: sy-fade-up .6s both; }
    .sy-public .sy-hero-icons .sy-it:nth-child(1) { animation-delay: 2.6s; }
    .sy-public .sy-hero-icons .sy-it:nth-child(2) { animation-delay: 2.7s; }
    .sy-public .sy-hero-icons .sy-it:nth-child(3) { animation-delay: 2.8s; }
    .sy-public .sy-hero-icons .sy-it:nth-child(4) { animation-delay: 2.9s; }
    .sy-public .sy-scroll-cue { animation: sy-fade-up .6s both; animation-delay: 3.1s; }
}

@keyframes sy-fade-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sy-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sy-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sy-scale-in { from { opacity: 0; transform: scale(1.4); } to { opacity: 1; transform: scale(1); } }
@keyframes sy-bounce { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(8px); opacity: 1; } }

/* reveal-on-scroll برای بخش‌های بعد از هیرو (معادل سبک jquery.appear در Porto، با vanilla JS در sy-reveal.js —
   بدون JS یا با prefers-reduced-motion:reduce محتوا همیشه کامل نمایان است، هیچ‌چیز پشت جاوااسکریپت قایم نمی‌شود) */
.sy-public [data-sy-animate] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
    .sy-public.sy-js [data-sy-animate] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
    .sy-public.sy-js [data-sy-animate].sy-in-view { opacity: 1; transform: translateY(0); }
    .sy-public.sy-js [data-sy-animate].sy-in-view[data-sy-delay="2"] { transition-delay: .08s; }
    .sy-public.sy-js [data-sy-animate].sy-in-view[data-sy-delay="3"] { transition-delay: .16s; }
    .sy-public.sy-js [data-sy-animate].sy-in-view[data-sy-delay="4"] { transition-delay: .24s; }
    .sy-public.sy-js [data-sy-animate].sy-in-view[data-sy-delay="5"] { transition-delay: .32s; }
    .sy-public.sy-js [data-sy-animate].sy-in-view[data-sy-delay="6"] { transition-delay: .40s; }
}

/* گرید و کارت‌ها */
.sy-public .sy-grid { display: grid; gap: 22px; }
.sy-public .sy-g2 { grid-template-columns: repeat(2, 1fr); }
.sy-public .sy-g3 { grid-template-columns: repeat(3, 1fr); }
.sy-public .sy-g4 { grid-template-columns: repeat(4, 1fr); }
.sy-public .sy-card { background: #fff; border: 1px solid var(--sy-line); border-radius: var(--sy-radius); box-shadow: var(--sy-shadow); padding: 24px; }
.sy-public .sy-card h4 { font-size: 16px; font-weight: 800; }
.sy-public .sy-card .sy-desc { font-size: 13.5px; color: var(--sy-muted); margin-block-start: 6px; }

/* کارت مجله با تصویر شاخص — padding از خودِ sy-card به sy-mag-body منتقل می‌شود تا تصویر تا لبه‌ی
   کارت بی‌فاصله (bleed) بماند؛ transform روی hover مطابق سایر کارت‌های سایت. */
.sy-public .sy-mag-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.sy-public .sy-mag-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(29, 39, 51, .08); }
.sy-public .sy-mag-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sy-bg-soft); }
.sy-public .sy-mag-cover.featured { aspect-ratio: 32 / 9; }
.sy-public .sy-mag-body { padding: 20px; flex: 1; }

@media (max-width: 767px) {
    .sy-public .sy-mag-cover.featured { aspect-ratio: 16 / 9; }
}

/* تصویر شاخص صفحه‌ی خواندن مقاله — بنر عریض زیر عنوان/متادیتا، قبل از بدنه‌ی متن. */
.sy-public .sy-article-cover { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--sy-radius); margin-block-end: 28px; background: var(--sy-bg-soft); }

@media (max-width: 575px) {
    .sy-public .sy-article-cover { aspect-ratio: 16 / 9; }
}
.sy-public .sy-fbox { display: flex; gap: 14px; align-items: flex-start; }
.sy-public .sy-fbox .sy-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--sy-blue-bg); color: var(--sy-primary); display: flex; align-items: center; justify-content: center; flex: none; }
.sy-public .sy-fbox.teal .sy-ic { background: var(--sy-teal-bg); color: var(--sy-teal-dark); }
.sy-public .sy-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.sy-public .sy-badge.free { background: var(--sy-teal-bg); color: var(--sy-teal-dark); }
.sy-public .sy-badge.pay { background: var(--sy-amber-bg); color: var(--sy-amber); }
.sy-public .sy-badge.ok { background: var(--sy-green-bg); color: var(--sy-green); }
.sy-public .sy-badge.warn { background: var(--sy-amber-bg); color: var(--sy-amber); }
.sy-public .sy-badge.danger { background: var(--sy-red-bg); color: var(--sy-red); }
.sy-public .sy-badge.info { background: var(--sy-blue-bg); color: var(--sy-primary); }
.sy-public .sy-badge.crown { background: var(--sy-purple-bg); color: var(--sy-purple); }
.sy-public .sy-badge.purple { background: var(--sy-purple-bg); color: var(--sy-purple); }
.sy-public .sy-badge.teal { background: var(--sy-teal-bg); color: var(--sy-teal-dark); }
.sy-public .sy-badge.gray { background: var(--sy-bg-soft); color: var(--sy-muted); }

/* تب‌های صفحه‌ی نمایش پرونده‌ی اشتراک‌گذاری‌شده (ShareView.razor) — کاملاً CSS-only (radio + sibling
   selector)، بدون جاوااسکریپت، هم‌راستا با فلسفه‌ی Static-SSR این پروژه. حداکثر ۸ تب شناخته‌شده (بخش‌های
   ShareSections)، پس ۸ قانون ایستا کافی است. */
.sy-share-tabs .sy-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.sy-share-tabs .sy-tab-nav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--sy-line); margin-block-end: 16px; padding-inline-start: 0; }
.sy-share-tabs .sy-tab-nav label { padding: 9px 16px; border-radius: 8px 8px 0 0; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sy-muted); }
.sy-share-tabs .sy-tab-panel { display: none; }
#tab-basicinfo:checked ~ .sy-tab-nav label[for="tab-basicinfo"],
#tab-metrics:checked ~ .sy-tab-nav label[for="tab-metrics"],
#tab-labs:checked ~ .sy-tab-nav label[for="tab-labs"],
#tab-conditions:checked ~ .sy-tab-nav label[for="tab-conditions"],
#tab-medications:checked ~ .sy-tab-nav label[for="tab-medications"],
#tab-habits:checked ~ .sy-tab-nav label[for="tab-habits"],
#tab-documents:checked ~ .sy-tab-nav label[for="tab-documents"],
#tab-dental:checked ~ .sy-tab-nav label[for="tab-dental"] { color: var(--sy-primary); background: var(--sy-blue-bg); }
#tab-basicinfo:checked ~ .sy-tab-panels .panel-basicinfo,
#tab-metrics:checked ~ .sy-tab-panels .panel-metrics,
#tab-labs:checked ~ .sy-tab-panels .panel-labs,
#tab-conditions:checked ~ .sy-tab-panels .panel-conditions,
#tab-medications:checked ~ .sy-tab-panels .panel-medications,
#tab-habits:checked ~ .sy-tab-panels .panel-habits,
#tab-documents:checked ~ .sy-tab-panels .panel-documents,
#tab-dental:checked ~ .sy-tab-panels .panel-dental { display: block; }
.sy-public .sy-dot { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex: none; }
.sy-public .sy-dot.b { background: var(--sy-blue-bg); color: var(--sy-primary); }
.sy-public .sy-dot.t { background: var(--sy-teal-bg); color: var(--sy-teal-dark); }
.sy-public .sy-dot.a { background: var(--sy-amber-bg); color: var(--sy-amber); }
.sy-public .sy-dot.r { background: var(--sy-red-bg); color: var(--sy-red); }
.sy-public .sy-dot.g { background: var(--sy-green-bg); color: var(--sy-green); }

/* دکمه‌ها */
.sy-public .sy-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--sy-primary); color: #fff; font-family: inherit; font-weight: 700; font-size: 14px; border: 0; border-radius: 10px; padding: 11px 22px; cursor: pointer; transition: .2s; }
.sy-public .sy-btn:hover { background: var(--sy-primary-dark); color: #fff; }
.sy-public .sy-btn.outline { background: #fff; color: var(--sy-primary); border: 1.5px solid var(--sy-primary); }
.sy-public .sy-btn.outline:hover { background: var(--sy-blue-bg); }
.sy-public .sy-btn.teal { background: var(--sy-teal); }
.sy-public .sy-btn.teal:hover { background: var(--sy-teal-dark); }
.sy-public .sy-btn.ghost { background: var(--sy-bg-soft); color: var(--sy-ink); }
.sy-public .sy-btn.danger { background: #fff; color: var(--sy-red); border: 1.5px solid #f0bcbc; }
.sy-public .sy-btn.danger:hover { background: var(--sy-red-bg); }
.sy-public .sy-btn.sm { padding: 7px 14px; font-size: 13px; border-radius: 8px; }

/* تعرفه‌ها */
.sy-public .sy-plan { position: relative; text-align: center; }
.sy-public .sy-plan.hot { border-color: var(--sy-primary); box-shadow: 0 16px 40px rgba(66, 114, 245, .18); }
.sy-public .sy-plan .sy-flag { position: absolute; top: -13px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--sy-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 999px; }
.sy-public .sy-plan .sy-price { font-size: 26px; font-weight: 800; margin: 10px 0 2px; }
.sy-public .sy-plan .sy-per { font-size: 12px; color: var(--sy-muted); }
.sy-public .sy-plan ul { list-style: none; margin: 18px 0 22px; text-align: start; font-size: 13.5px; color: #42506a; }
.sy-public .sy-plan ul li { padding-block: 7px; border-block-end: 1px dashed var(--sy-line); display: flex; gap: 8px; align-items: center; }
.sy-public .sy-plan ul li:last-child { border: 0; }
.sy-public .sy-plan ul li::before { content: "✓"; color: var(--sy-teal); font-weight: 800; }

/* ── کروم اپ (صفحات پشت ورود) — دقیقاً مطابق design/salamatyar-phase1-mockup.html ── */
.sy-public .sy-app-top { background: #fff; border-block-end: 1px solid var(--sy-line); padding-block: 14px; }
.sy-public .sy-app-top .sy-container { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sy-public .sy-app-top .sy-who { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sy-public .sy-app-top .sy-app-nav { display: flex; align-items: center; gap: 20px; font-size: 13.5px; font-weight: 500; }

/* مگا-منوی «پرونده من» — بدون جاوااسکریپت، فقط hover. sy-nav-mega-menu از لبه‌ی پایین لینک شروع می‌شود
   (بدون گپ) تا هنگام حرکت موس به‌سمت زیرمنو، hover قطع نشود؛ فاصله‌ی بصری با padding-block-start همین
   لایه‌ی نامرئی تأمین می‌شود، نه با margin (که یک گپ غیرقابل‌هاور ایجاد می‌کرد). */
.sy-public .sy-nav-mega { position: relative; }
.sy-public .sy-nav-mega-menu { position: absolute; inset-block-start: 100%; inset-inline-start: 0; padding-block-start: 10px; z-index: 20; display: none; min-width: 190px; }
.sy-public .sy-nav-mega:hover .sy-nav-mega-menu, .sy-public .sy-nav-mega-menu:hover { display: block; }
.sy-public .sy-nav-mega-menu-inner { background: #fff; border: 1px solid var(--sy-line); border-radius: 12px; box-shadow: var(--sy-shadow); padding: 6px; }
.sy-public .sy-nav-mega-menu-inner a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--sy-ink); white-space: nowrap; }
.sy-public .sy-nav-mega-menu-inner a:hover { background: var(--sy-bg-soft); }

/* منوی هامبرگر موبایل — details/summary بومی مثل sy-lang/sy-user؛ فقط زیر ۹۰۰px نمایش داده می‌شود
   (همان بریک‌پوینتی که sy-app-nav را مخفی می‌کند)، چون sy-app-nav روی صفحه‌های کم‌عرض جا نمی‌شود. */
.sy-public .sy-mobile-nav { display: none; position: relative; }
.sy-public .sy-mobile-nav summary { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; cursor: pointer; list-style: none; color: var(--sy-ink); border-radius: 8px; }
.sy-public .sy-mobile-nav summary::-webkit-details-marker { display: none; }
.sy-public .sy-mobile-nav summary:hover { background: var(--sy-bg-soft); }
.sy-public .sy-mobile-nav-menu { position: absolute; inset-block-start: calc(100% + 12px); inset-inline-start: 0; background: #fff; border: 1px solid var(--sy-line); border-radius: 12px; box-shadow: var(--sy-shadow); padding: 6px; min-width: 180px; z-index: 20; }
.sy-public .sy-mobile-nav-menu a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--sy-ink); }
.sy-public .sy-mobile-nav-menu a:hover { background: var(--sy-bg-soft); }
.sy-public .sy-crumb { background: linear-gradient(90deg, var(--sy-blue-bg), #fff); padding-block: 26px; border-block-end: 1px solid var(--sy-line); }
.sy-public .sy-crumb h2 { font-size: 22px; font-weight: 800; }
.sy-public .sy-crumb p { font-size: 13px; color: var(--sy-muted); }
.sy-public .sy-app-body { padding-block: 36px 70px; background: var(--sy-bg-soft); min-height: 60vh; }

/* پرونده من — امتیاز سلامت */
.sy-public .sy-score-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sy-public .sy-score-ring { position: relative; width: 132px; height: 132px; flex: none; }
.sy-public .sy-score-ring .sy-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sy-public .sy-score-ring .sy-num b { font-size: 32px; font-weight: 800; color: var(--sy-teal-dark); }
.sy-public .sy-score-ring .sy-num i { font-style: normal; font-size: 11px; color: var(--sy-muted); }

/* کاشی‌های آماری + نمودار کوچک */
.sy-public .sy-stat { display: flex; flex-direction: column; gap: 4px; position: relative; }
.sy-public .sy-stat .sy-v { font-size: 22px; font-weight: 800; }
.sy-public .sy-stat .sy-v small { font-size: 12px; color: var(--sy-muted); font-weight: 400; }
.sy-public .sy-stat .sy-l { font-size: 12.5px; color: var(--sy-muted); }
.sy-public .sy-spark { margin-block-start: 8px; width: 100%; }
.sy-public .sy-spark .highcharts-container, .sy-public .sy-spark .highcharts-container svg { width: 100% !important; }
.sy-public .sy-add-log { position: absolute; top: 14px; inset-inline-end: 14px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--sy-blue-bg); color: var(--sy-primary); font-size: 17px; font-weight: 800; cursor: pointer; line-height: 1; transition: .2s; }
.sy-public .sy-add-log:hover { background: var(--sy-primary); color: #fff; }

/* لیست‌های ردیفی (سوابق/داروها/اسناد/یادآوری‌ها) */
.sy-public .sy-list { list-style: none; }
.sy-public .sy-list li { display: flex; align-items: center; gap: 12px; padding-block: 12px; border-block-end: 1px solid var(--sy-line); font-size: 13.5px; }
.sy-public .sy-list li:last-child { border: 0; }
.sy-public .sy-list .sy-grow { flex: 1; min-width: 0; }
.sy-public .sy-list .sy-t { font-weight: 700; }
.sy-public .sy-list .sy-s { font-size: 12px; color: var(--sy-muted); }
/* گروه‌بندی آیتم‌های ردیف با چند کنترل انتهایی (مثل یادآوری‌ها: آیکون+متن در یک گروه، بج+سوییچ+حذف در
   گروه دیگر) — روی موبایل این دو گروه هرکدام ردیف کامل خودشان را می‌گیرند تا .sy-grow به‌جای فشرده‌شدن
   به یک باکس چندخطی زشت، فضای کافی داشته باشد (کشف‌شده در تست موبایل واقعی). */
.sy-public .sy-list .sy-row-lead { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.sy-public .sy-list .sy-row-trail { display: flex; align-items: center; gap: 10px; flex: none; }

/* گروه‌بندی دوسطحی سوابق آزمایش‌ها (تاریخ ← دسته‌ی بالینی) — Labs.razor */
.sy-public .sy-lab-date-group + .sy-lab-date-group { margin-block-start: 20px; padding-block-start: 20px; border-block-start: 1px solid var(--sy-line); }
.sy-public .sy-lab-date-heading { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: var(--sy-primary); }
.sy-public .sy-lab-category-group + .sy-lab-category-group { margin-block-start: 4px; }
.sy-public .sy-lab-category-label { display: block; font-size: 11px; font-weight: 600; color: var(--sy-muted); }
.sy-public .sy-list.compact li { padding-block: 7px; font-size: 13px; }
.sy-public .sy-badge.mini { padding: 1px 8px; font-size: 10px; }

/* عضو در حال مشاهده — چیپ‌های خانواده */
.sy-public .sy-mems { display: flex; gap: 8px; flex-wrap: wrap; }
.sy-public .sy-mem { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--sy-line); background: #fff; border-radius: 999px; padding: 5px 6px 5px 16px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: #42506a; transition: .2s; }
.sy-public .sy-mem .sy-avatar { width: 28px; height: 28px; font-size: 11px; }
.sy-public .sy-mem.on { border-color: var(--sy-primary); background: var(--sy-blue-bg); color: var(--sy-primary); font-weight: 700; }
.sy-public .sy-mem:hover { border-color: var(--sy-primary); }

/* فرم‌ها */
.sy-public .sy-field { margin-block-end: 16px; }
.sy-public .sy-field label { display: block; font-size: 13px; font-weight: 700; margin-block-end: 6px; }
.sy-public .sy-field input:not([type="checkbox"]):not([type="radio"]), .sy-public .sy-field select, .sy-public .sy-field textarea { width: 100%; font-family: inherit; font-size: 14px; border: 1.5px solid var(--sy-line); border-radius: 10px; padding: 11px 14px; background: #fff; outline: 0; transition: .2s; }
.sy-public .sy-field input:not([type="checkbox"]):not([type="radio"]):focus, .sy-public .sy-field select:focus, .sy-public .sy-field textarea:focus { border-color: var(--sy-primary); box-shadow: 0 0 0 3px rgba(66, 114, 245, .12); }
/* رادیوهای داخل .sy-field (مثل مدت یادآوری/سوابق تفسیر آزمایش) قربانی قانون بالا نشوند — بدون این خط،
   input[type=radio] هم width:100%/padding می‌گرفت و به یک باکس بزرگ کج‌شکل تبدیل می‌شد (کشف‌شده در تست زنده). */
.sy-public .sy-field input[type="checkbox"], .sy-public .sy-field input[type="radio"] { flex: none; width: 16px; height: 16px; margin: 0; }
.sy-public .sy-hint { font-size: 12px; color: var(--sy-muted); margin-block-start: 4px; }
.sy-public .sy-seg { display: flex; background: var(--sy-bg-soft); border: 1px solid var(--sy-line); border-radius: 10px; padding: 4px; gap: 4px; }
.sy-public .sy-seg button { flex: 1; font-family: inherit; font-size: 13px; border: 0; background: transparent; padding: 8px; border-radius: 8px; cursor: pointer; color: var(--sy-muted); font-weight: 600; }
.sy-public .sy-seg button.on { background: #fff; color: var(--sy-ink); box-shadow: 0 2px 8px rgba(29, 39, 51, .08); font-weight: 700; }
.sy-public .sy-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.sy-public .sy-switch input { opacity: 0; width: 0; height: 0; }
.sy-public .sy-switch i { position: absolute; inset: 0; background: #cfd8e6; border-radius: 999px; transition: .2s; cursor: pointer; }
.sy-public .sy-switch i::after { content: ""; position: absolute; top: 3px; inset-inline-end: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.sy-public .sy-switch input:checked + i { background: var(--sy-teal); }
.sy-public .sy-switch input:checked + i::after { transform: translateX(-20px); }
[dir="rtl"] .sy-public .sy-switch input:checked + i::after { transform: translateX(20px); }
.sy-public .sy-range-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sy-public .sy-chip { font-size: 12.5px; border: 1.5px solid var(--sy-line); border-radius: 999px; padding: 6px 14px; cursor: pointer; background: #fff; font-family: inherit; color: #42506a; }
.sy-public .sy-chip.on { border-color: var(--sy-primary); background: var(--sy-blue-bg); color: var(--sy-primary); font-weight: 700; }

/* آپلود سند */
.sy-public .sy-dropzone { border: 2px dashed #c3d2ef; border-radius: var(--sy-radius); background: var(--sy-blue-bg); padding: 44px 20px; text-align: center; color: var(--sy-primary); }
.sy-public .sy-dropzone b { display: block; font-size: 15px; margin-block-start: 10px; }
.sy-public .sy-dropzone span { font-size: 12.5px; color: #6d86c9; }
.sy-public .sy-dropzone-input:disabled { cursor: not-allowed; }

.sy-spinner { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: sy-spin .7s linear infinite; }
@keyframes sy-spin { to { transform: rotate(360deg); } }
.sy-public .sy-quota { height: 8px; background: var(--sy-line); border-radius: 999px; overflow: hidden; margin-block: 8px 4px; }
.sy-public .sy-quota i { display: block; height: 100%; background: linear-gradient(90deg, var(--sy-primary), var(--sy-teal)); border-radius: 999px; }
.sy-public .sy-quota i.warn { background: linear-gradient(90deg, #f5a623, #e14b4b); }
.sy-public .sy-doc { position: relative; }
.sy-public .sy-doc .sy-thumb { height: 110px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-block-end: 12px; }
.sy-public .sy-doc .sy-thumb.lab { background: var(--sy-teal-bg); color: var(--sy-teal-dark); }
.sy-public .sy-doc .sy-thumb.img { background: var(--sy-blue-bg); color: var(--sy-primary); }
.sy-public .sy-doc .sy-thumb.rx { background: var(--sy-amber-bg); color: var(--sy-amber); }
.sy-public .sy-doc .sy-thumb.dnt { background: var(--sy-red-bg); color: var(--sy-red); }
.sy-public .sy-doc h5 { font-size: 13.5px; font-weight: 700; }
.sy-public .sy-doc .sy-meta { font-size: 11.5px; color: var(--sy-muted); }

/* گام‌ها + جدول آزمایش */
.sy-public .sy-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-block-end: 34px; flex-wrap: wrap; }
.sy-public .sy-steps .sy-st { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--sy-muted); }
.sy-public .sy-steps .sy-st .sy-n { width: 30px; height: 30px; border-radius: 50%; background: #e3e9f3; color: var(--sy-muted); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.sy-public .sy-steps .sy-st.done .sy-n { background: var(--sy-teal); color: #fff; }
.sy-public .sy-steps .sy-st.now { color: var(--sy-ink); }
.sy-public .sy-steps .sy-st.now .sy-n { background: var(--sy-primary); color: #fff; }
.sy-public .sy-steps .sy-ln { width: 64px; height: 2px; background: var(--sy-line); margin-inline: 12px; }
.sy-public table.sy-lab-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sy-public table.sy-lab-table th { background: var(--sy-bg-soft); font-size: 12px; color: var(--sy-muted); font-weight: 700; padding: 10px 12px; text-align: start; }
.sy-public table.sy-lab-table td { padding: 11px 12px; border-block-end: 1px solid var(--sy-line); }
.sy-public .sy-note { border-radius: 12px; padding: 14px 16px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; }
.sy-public .sy-note.safe { background: var(--sy-blue-bg); color: #33508f; }
.sy-public .sy-note.crit { background: var(--sy-red-bg); color: #8f3333; }
.sy-public .sy-note.ok { background: var(--sy-green-bg); color: var(--sy-green); }
.sy-public .sy-note.soft { background: var(--sy-bg-soft); color: #5a6982; }
.sy-public .sy-note.teal { background: var(--sy-teal-bg); color: var(--sy-teal-dark); }

/* چت‌بات */
.sy-public .sy-chat-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
.sy-public .sy-chat-side { padding: 18px; }
.sy-public .sy-conv { padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 13px; display: flex; flex-direction: column; gap: 1px; margin-block-end: 2px; }
.sy-public .sy-conv b { font-weight: 700; }
.sy-public .sy-conv .sy-s { font-size: 11px; color: var(--sy-muted); }
.sy-public .sy-conv.on { background: var(--sy-blue-bg); }
.sy-public .sy-conv:hover { background: var(--sy-bg-soft); }
.sy-public .sy-chat-box { display: flex; flex-direction: column; height: 520px; }
.sy-public .sy-chat-log { flex: 1; overflow-y: auto; padding: 6px 4px; display: flex; flex-direction: column; gap: 14px; }
.sy-public .sy-msg { max-width: 78%; padding: 12px 16px; border-radius: 16px; font-size: 13.5px; line-height: 1.9; white-space: pre-line; }
.sy-public .sy-msg.bot { background: var(--sy-bg-soft); border: 1px solid var(--sy-line); border-start-end-radius: 4px; align-self: flex-start; }
.sy-public .sy-msg.me { background: var(--sy-primary); color: #fff; border-start-start-radius: 4px; align-self: flex-end; }
.sy-public .sy-msg .sy-src { display: inline-block; margin-block-start: 8px; font-size: 11px; background: #fff; border: 1px solid var(--sy-line); color: var(--sy-muted); padding: 2px 10px; border-radius: 999px; }
.sy-public .sy-chat-in { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--sy-line); border-radius: 999px; padding: 6px 8px; margin-block-start: 14px; }
.sy-public .sy-chat-in input { flex: 1; border: 0; outline: 0; font-family: inherit; font-size: 14px; padding: 6px 8px; background: transparent; }
@media (max-width: 820px) { .sy-public .sy-chat-wrap { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
    .sy-public .sy-app-top .sy-app-nav { display: none; }
    .sy-public .sy-app-top .sy-mobile-nav { display: block; }
}

/* فوتر */
.sy-public .sy-footer { background: #141c27; color: #aeb9c9; padding: 54px 0 24px; font-size: 13.5px; }
.sy-public .sy-footer h5 { color: #fff; font-size: 15px; font-weight: 800; margin-block-end: 14px; }
.sy-public .sy-footer ul { list-style: none; }
.sy-public .sy-footer li { padding-block: 5px; }
.sy-public .sy-footer .sy-base { border-block-start: 1px solid #26313f; margin-block-start: 36px; padding-block-start: 18px; display: flex; justify-content: space-between; font-size: 12px; flex-wrap: wrap; gap: 8px; }

@media (max-width: 900px) {
    .sy-public .sy-g4, .sy-public .sy-g3 { grid-template-columns: repeat(2, 1fr); }
    .sy-public .sy-hero { min-height: 0; padding-block: 70px 50px; }
    .sy-public .sy-hero h1 { font-size: 32px; }
    .sy-public .sy-hero-icons { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .sy-public .sy-hero-deco { display: none; }
    .sy-public .sy-site-header .sy-row { grid-template-columns: auto 1fr; }
    .sy-public .sy-nav-r { display: none; }
    .sy-public .sy-scroll-cue { display: none; }
}
@media (max-width: 600px) {
    .sy-public .sy-g4, .sy-public .sy-g3, .sy-public .sy-g2 { grid-template-columns: 1fr; }
    .sy-public .sy-card[style*="span 2"] { grid-column: span 1 !important; }
}
@media (max-width: 480px) {
    .sy-public .sy-list li { flex-wrap: wrap; row-gap: 10px; }
    .sy-public .sy-list .sy-row-lead { flex-basis: 100%; }
    .sy-public .sy-list .sy-row-trail { flex-basis: 100%; justify-content: flex-end; }
}

/* بلوک متن خام لاگ فنی (مثل RequestSummary/ResponseSummary سیموتل در پنل مدیریت) — همیشه LTR چون
   محتوایش JSON/کد است، صرف‌نظر از جهت صفحه. */
.sy-log-block { white-space: pre-wrap; word-break: break-all; background: #f7f9fc; border-radius: 8px; padding: 10px; font-size: 12px; direction: ltr; text-align: left; margin: 0; max-height: 240px; overflow-y: auto; }

/* ردیف کلیک‌پذیر لیست (مثل تاریخچه‌ی تماس‌های اکانت من) — دکمه‌ی تمام‌عرض داخل li که استایل
   .sy-list li موجود (border-block-end و غیره) را دست‌نخورده نگه می‌دارد. */
.sy-public .sy-list li.clickable { padding: 0; }
.sy-public .sy-list li.clickable > button.sy-list-row-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding-block: 12px; background: none; border: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; border-radius: 8px; }
.sy-public .sy-list li.clickable > button.sy-list-row-btn:hover { background: var(--sy-blue-bg); }

/* مودال پاپ‌آپ وسط‌صفحه — دقیقاً مطابق design/salamatyar-phase1-mockup.html (.modal-bg/.modal).
   بک‌دراپ و باکس مودال هر دو position:fixed هستند و باکس با flex وسط‌چین می‌شود؛ stopPropagation
   روی خودِ باکس لازم است وگرنه کلیک داخل فرم هم به بک‌دراپ می‌رسد و مودال را می‌بندد. */
.sy-modal-bg { position: fixed; inset: 0; background: rgba(20, 28, 39, .55); display: flex; align-items: center; justify-content: center; z-index: 1050; padding: 20px; }
.sy-modal { background: #fff; border-radius: 16px; max-width: 440px; width: 100%; padding: 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); max-height: 85vh; overflow-y: auto; }
.sy-modal.wide { max-width: 720px; }
.sy-modal h4, .sy-modal h5 { margin-block-end: 4px; }
.sy-modal-close { float: inline-start; border: 0; background: var(--sy-bg-soft); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--sy-muted); }

/* پنجره‌ی «درباره‌ی کاربر» (CommunityUserInfoModal) — سرآیند آواتار+نام و لیست دکمه‌های اقدام. */
.sy-user-info-head { display: flex; align-items: center; gap: 10px; clear: both; margin-block: 8px 18px; }
.sy-user-info-head strong { font-size: 15px; }
.sy-user-info-actions { display: flex; flex-direction: column; gap: 8px; }

/* پیش‌نمایش سند (اسناد پزشکی) — لایت‌باکس ساده با prev/next، کاملاً vanilla JS (js/sy-doc-preview.js)،
   بدون نیاز به Interactive Island چون فقط نمایش است، نه جهش داده؛ صفحه‌ی میزبان همچنان Static SSR می‌ماند. */
.sy-thumb-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: inherit; }
.sy-thumb-btn .sy-thumb { transition: filter .15s ease; }
.sy-thumb-btn:hover .sy-thumb { filter: brightness(.92); }

.sy-doc-preview-bg { position: fixed; inset: 0; background: rgba(20, 28, 39, .8); z-index: 1060; display: none; align-items: center; justify-content: center; padding: 24px; }
.sy-doc-preview-bg.open { display: flex; }
.sy-doc-preview { background: #fff; border-radius: 16px; max-width: 860px; width: 100%; max-height: 90vh; padding: 20px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.sy-doc-preview-body { display: flex; align-items: center; gap: 10px; flex: 1; min-height: 0; }
.sy-doc-preview-content { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; }
.sy-doc-preview-content img { max-width: 100%; max-height: 70vh; border-radius: 8px; object-fit: contain; }
.sy-doc-preview-content iframe { width: 100%; height: 70vh; border: 0; border-radius: 8px; }
.sy-doc-preview-nav { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--sy-bg-soft); color: var(--sy-ink); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sy-doc-preview-nav:hover { background: var(--sy-blue-bg); color: var(--sy-primary); }
.sy-doc-preview-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }

/* باتم‌شیت مشترک Islandها (هنوز توسط DocumentUpload/ReminderSheet استفاده می‌شود) */
.sy-sheet {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1051;
    background: var(--bs-body-bg, #fff);
    border-start-start-radius: 16px;
    border-start-end-radius: 16px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .15);
    padding: 18px;
    max-width: 520px;
    margin-inline: auto;
    max-height: 85vh;
    overflow-y: auto;
}

/* کاشی آزمایش کلیدی — پس‌زمینه‌ی متمایز (مطابق موکاپ) */
.sy-lab-tile { background: linear-gradient(168deg, rgba(66, 114, 245, .09), transparent 60%); border-color: rgba(66, 114, 245, .28) !important; }
/* نسخه‌ی فشرده‌تر همان کاشی، برای گرید روند دسته‌بندی‌شده در Labs.razor */
.sy-lab-tile.compact { padding: 14px 16px; gap: 3px; box-shadow: none; }
.sy-lab-tile.compact .sy-v { font-size: 18px; }
/* ردیف مقدار+بج، و ردیف تاریخ+نام تست، هرکدام در یک خط با فاصله‌گذاری یکسان */
.sy-lab-tile-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sy-lab-tile-name { font-size: 13px; font-weight: 700; color: var(--sy-ink); }

/* دراپ‌زون آپلود سند */
.sy-dropzone { position: relative; border: 2px dashed var(--bs-border-color, #ced4da); border-radius: 12px; padding: 22px 14px; text-align: center; background: var(--bs-tertiary-bg, #f8f9fa); }
.sy-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sy-dropzone-text { pointer-events: none; color: var(--bs-secondary-color, #6c757d); font-size: .9rem; }

/* آکاردئون پرونده */
.sy-acc { border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
.sy-acc-h { cursor: pointer; padding: 12px 4px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.sy-acc-h::-webkit-details-marker { display: none; }
.sy-acc-b { padding: 4px 4px 14px; }

/* نقشه دندان (odontogram) — سوابق دندان‌پزشکی، پورت مستقیم از design/salamatyar-dental-mockup.html */
.sy-public .sy-jaw { display: grid; grid-template-columns: repeat(16, 1fr); gap: 5px; direction: ltr; max-width: 760px; margin: 0 auto; }
.sy-public .sy-tooth { border: 0; background: none; cursor: pointer; font-family: inherit; padding: 2px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 8px; transition: .15s; }
.sy-public .sy-tooth svg { width: 100%; max-width: 40px; height: auto; display: block; overflow: visible; }
.sy-public .sy-tooth .sy-no { font-size: 9.5px; color: var(--sy-muted); font-weight: 700; line-height: 1; }
.sy-public .sy-tooth:hover { transform: translateY(-3px); }
.sy-public .sy-tooth:hover svg path { stroke: var(--sy-primary); }
.sy-public .sy-tooth.sel { background: var(--sy-blue-bg); }
.sy-public .sy-tooth.sel svg path { stroke: var(--sy-primary); stroke-width: 3; }
.sy-public .sy-tooth.sel .sy-no { color: var(--sy-primary); }
.sy-public .sy-jaw-gap { display: flex; align-items: center; gap: 10px; margin: 12px auto; max-width: 760px; }
.sy-public .sy-jaw-gap i { flex: 1; height: 1px; background: var(--sy-line); }
.sy-public .sy-jaw-gap b { font-size: 11px; color: var(--sy-muted); font-weight: 700; }
.sy-public .sy-tooth-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-block-start: 18px; justify-content: center; }
.sy-public .sy-tooth-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #42506a; font-weight: 600; }
.sy-public .sy-tooth-legend svg { width: 15px; height: 18px; }
@media (max-width: 760px) {
    .sy-public .sy-tooth svg { max-width: 24px; }
    .sy-public .sy-tooth .sy-no { font-size: 7.5px; }
}

/* ===== پنل مدیریت (T18) — سایدبار تیره، پورت مستقیم design/salamatyar-admin-mockup.html؛ کارت/بج/دکمه/
   چیپ/فیلد/جدول از کلاس‌های .sy-* موجود (sy-card/sy-btn/sy-badge/sy-chip/sy-field/sy-quota/sy-lab-table)
   دوباره استفاده می‌شوند تا تکرار نشوند — فقط اجزای واقعاً جدید (سایدبار/KPI/میله/تب/سلول‌کاربر) اضافه شدند. */
.sy-public.sy-admin { flex-direction: row; align-items: stretch; min-height: 100vh; }

.sy-admin-side { width: 240px; flex: none; background: var(--sy-side); color: #aeb9c9; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sy-admin-brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px; border-block-end: 1px solid #26313f; color: #fff; font-weight: 800; }
.sy-admin-brand small { display: block; font-size: 10px; color: #7d8aa0; font-weight: 400; }
.sy-admin-nav { padding: 14px 10px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sy-admin-nav a { display: flex; align-items: center; gap: 11px; color: #aeb9c9; font-size: 13.5px; font-weight: 600; padding: 11px 12px; border-radius: 10px; text-decoration: none; transition: .15s; }
.sy-admin-nav a:hover { background: #1d2836; color: #fff; }
.sy-admin-nav a.on { background: var(--sy-primary); color: #fff; }
.sy-admin-nav .ic { width: 20px; text-align: center; }
.sy-admin-foot { padding: 14px 18px; border-block-start: 1px solid #26313f; font-size: 11.5px; }
.sy-admin-foot-name { color: #fff; font-weight: 700; font-size: 12px; margin-block-end: 2px; }
.sy-admin-logout { background: none; border: 0; padding: 0; color: #7d8aa0; text-decoration: underline; cursor: pointer; font-size: inherit; font-family: inherit; }

.sy-admin-main { flex: 1; min-width: 0; padding: 24px 26px 60px; background: var(--sy-bg-soft); }

.sy-admin-kpi { position: relative; overflow: hidden; }
.sy-admin-kpi .ico { position: absolute; top: 16px; inset-inline-start: 16px; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.sy-admin-kpi .l { font-size: 12px; color: var(--sy-muted); }
.sy-admin-kpi .v { font-size: 23px; font-weight: 800; margin: 2px 0; }
.sy-admin-kpi .d { font-size: 11.5px; font-weight: 700; }
.sy-admin-kpi .d.up { color: var(--sy-green); }
.sy-admin-kpi .d.dn { color: var(--sy-red); }

/* نمودار میله‌ای ساده (ثبت‌نام/درآمد روزانه) — Static SSR محض، بدون JS/Highcharts. */
.sy-admin-bars { display: flex; align-items: flex-end; gap: 5px; height: 120px; padding-block-start: 6px; margin-block-end: 26px; }
.sy-admin-bars .b { flex: 1; background: var(--sy-blue-bg); border-radius: 5px 5px 0 0; position: relative; min-width: 8px; transition: .2s; }
.sy-admin-bars .b.hi { background: var(--sy-primary); }
.sy-admin-bars .b span { position: absolute; bottom: -22px; inset-inline-end: 50%; transform: translateX(50%); font-size: 9px; color: var(--sy-muted); white-space: nowrap; }

.sy-admin-tabs { display: flex; gap: 4px; background: var(--sy-bg-soft); border: 1px solid var(--sy-line); border-radius: 9px; padding: 3px; width: fit-content; }
.sy-admin-tabs a, .sy-admin-tabs button { border: 0; background: none; font-size: 12.5px; font-weight: 600; color: var(--sy-muted); padding: 6px 16px; border-radius: 7px; text-decoration: none; display: inline-block; cursor: pointer; font-family: inherit; }
.sy-admin-tabs a.on, .sy-admin-tabs button.on { background: #fff; color: var(--sy-ink); font-weight: 700; box-shadow: 0 2px 6px rgba(29, 39, 51, .08); }

/* سلول کاربر: آواتار + نام/شماره‌ی ماسک‌شده، هم‌الگوی موکاپ (.uc) */
.sy-admin-uc { display: flex; align-items: center; gap: 10px; }
.sy-admin-uc .av { width: 32px; height: 32px; border-radius: 50%; background: var(--sy-teal-bg); color: var(--sy-teal-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; flex: none; }
.sy-admin-uc b { font-size: 13px; display: block; line-height: 1.5; }
.sy-admin-uc .s { font-size: 11px; color: var(--sy-muted); direction: ltr; text-align: start; display: block; }

@media (max-width: 900px) {
    .sy-admin-side { display: none; }
}

/* انتخاب فونت بر اساس culture (کلاس روی <html> در App.razor ست می‌شود). */
/* IranYekan برای فارسی و عربی (معادل primary-font نمونه‌ی اصلی)، Inter برای انگلیسی. */
html.font-fa, html.font-fa body {
    font-family: 'IranYekan', 'Vazir', 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
}

/* فونت تیتر (secondary-font) فقط برای culture فارسی — روی همان تیترهای سطح صفحه/بخش. */
html.font-fa .sy-public .sy-hero h1,
html.font-fa .sy-public .sy-section-title h1,
html.font-fa .sy-public .sy-section-title h2,
html.font-fa .sy-public .sy-crumb h2,
html.font-fa .sy-public .sy-article-title {
    font-family: 'Pinar', 'IranYekan', 'Vazir', 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
}

/* همان فونت تیتر روی عنوان‌های ریزتر (کارت‌های ویژگی، لیبل آیکون‌های هیرو) — با وزن ۴۰۰ واقعی
   (بر خلاف Lalezar، Pinar وزن ۴۰۰ دارد، پس اینجا واقعاً نازک‌تر از تیترهای اصلی دیده می‌شود). */
html.font-fa .sy-public .sy-hero-icons .sy-it h6,
html.font-fa .sy-public .sy-fbox h4 {
    font-family: 'Pinar', 'IranYekan', 'Vazir', 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
    font-weight: 400;
}

/* ===== ویزیت آنلاین — پورت مستقیم design/salamatyar-online-visit-mockup.html و
   design/salamatyar-doctor-panel-mockup.html؛ کلاس‌های .sy-* معادل کلاس‌های بدون‌پیشوند موکاپ‌اند
   (مثلاً .doc → .sy-doc، .pt → .sy-pt، .sw → .sy-switch موجود). ===== */
.sy-public .sy-btn.xs { padding: 4px 10px; font-size: 11.5px; border-radius: 7px; }
.sy-public .sy-btn.purple { background: #fff; color: var(--sy-purple); border: 1.5px solid var(--sy-purple); }
.sy-public .sy-btn.purple:hover { background: var(--sy-purple-bg); }
.sy-public .sy-chip.sm { padding: 4px 11px; font-size: 11.5px; }

/* --- فیلتر تخصص (spec-bar) --- */
.sy-public .sy-spec-bar { background: #fff; border-block-end: 1px solid var(--sy-line); padding-block: 16px; position: sticky; inset-block-start: 0; z-index: 20; }
.sy-public .sy-spec-scroll { display: flex; gap: 9px; overflow-x: auto; padding-block-end: 4px; }
.sy-public .sy-spec-chip { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1.5px solid var(--sy-line); background: #fff; border-radius: 14px; padding: 11px 16px; cursor: pointer; font-family: inherit; min-width: 92px; text-decoration: none; transition: .16s; }
.sy-public .sy-spec-chip .ic { font-size: 21px; line-height: 1; }
.sy-public .sy-spec-chip .nm { font-size: 12.5px; font-weight: 700; color: #42506a; white-space: nowrap; }
.sy-public .sy-spec-chip:hover { border-color: #c3d2ef; transform: translateY(-2px); }
.sy-public .sy-spec-chip.on { border-color: var(--sy-primary); background: var(--sy-blue-bg); }
.sy-public .sy-spec-chip.on .nm { color: var(--sy-primary); }

/* --- بنر توضیح روش کار --- */
.sy-public .sy-howbanner { background: linear-gradient(90deg, var(--sy-teal-bg), #fff); border: 1px solid #cdeae6; border-radius: var(--sy-radius); padding: 15px 18px; margin-block-end: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sy-public .sy-howbanner .ic { width: 40px; height: 40px; border-radius: 11px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; flex: none; }
.sy-public .sy-howbanner .tx { flex: 1; min-width: 200px; font-size: 12.8px; color: #2a5f59; line-height: 1.85; }

/* --- ردیف کارت پزشک (.doc در موکاپ — نامش اینجا sy-doctor-row است تا با .sy-doc موجود صفحه‌ی اسناد تداخل نکند) --- */
.sy-public .sy-doctor-row { background: #fff; border: 1px solid var(--sy-line); border-radius: var(--sy-radius); box-shadow: var(--sy-shadow); padding: 18px; margin-block-end: 14px; display: flex; gap: 16px; align-items: flex-start; transition: .16s; }
.sy-public .sy-doctor-row:hover { border-color: #c3d2ef; box-shadow: 0 12px 32px rgba(29, 39, 51, .1); }
.sy-public .sy-doctor-row .pic { position: relative; flex: none; }
.sy-public .sy-doctor-row .ph { width: 66px; height: 66px; border-radius: 16px; background: var(--sy-blue-bg); color: var(--sy-primary); display: flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 800; }
.sy-public .sy-doctor-row .st { position: absolute; inset-block-end: -3px; inset-inline-start: -3px; width: 17px; height: 17px; border-radius: 50%; border: 2.5px solid #fff; }
.sy-public .sy-doctor-row .st.on { background: var(--sy-green); }
.sy-public .sy-doctor-row .st.off { background: #c2cbd9; }
.sy-public .sy-doctor-row .mid { flex: 1; min-width: 0; }
.sy-public .sy-doctor-row .nm { font-size: 15.5px; font-weight: 800; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sy-public .sy-doctor-row .sp { font-size: 13px; color: var(--sy-muted); margin-block-start: 1px; }
.sy-public .sy-doctor-row .meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-block-start: 9px; font-size: 12.5px; color: #42506a; }
.sy-public .sy-doctor-row .meta span { display: inline-flex; align-items: center; gap: 5px; }
.sy-public .sy-doctor-row .right { flex: none; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 132px; }
.sy-public .sy-doctor-row .price { font-size: 17px; font-weight: 800; color: var(--sy-ink); line-height: 1.2; }
.sy-public .sy-doctor-row .price small { display: block; font-size: 11px; color: var(--sy-muted); font-weight: 600; }
.sy-public .sy-stars { color: #f0a500; font-size: 12.5px; letter-spacing: -1px; }
@media (max-width: 900px) {
    .sy-public .sy-doctor-row { flex-wrap: wrap; }
    .sy-public .sy-doctor-row .right { min-width: 100%; flex-direction: row; justify-content: space-between; border-block-start: 1px dashed var(--sy-line); padding-block-start: 12px; }
}

/* --- مودال تماس: docmini/urgent/eta/pricebox/howbox/wallet/paybtns --- */
.sy-public .sy-docmini { display: flex; align-items: center; gap: 12px; background: var(--sy-bg-soft); border-radius: 12px; padding: 12px; margin-block: 16px; }
.sy-public .sy-docmini .ph { width: 46px; height: 46px; border-radius: 12px; background: var(--sy-blue-bg); color: var(--sy-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; flex: none; }

.sy-public .sy-call-option { border: 1.5px solid var(--sy-line); border-radius: 13px; padding: 14px; transition: .18s; display: block; margin-block-end: 12px; }
.sy-public .sy-call-option .row { display: flex; align-items: center; gap: 10px; }
.sy-public .sy-call-option input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--sy-amber, #b97d10); cursor: pointer; flex: none; }
.sy-public .sy-call-option .ttl { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 7px; }
.sy-public .sy-call-option .sub { font-size: 12.5px; color: var(--sy-muted); margin-block-start: 7px; padding-inline-start: 28px; line-height: 1.8; }
.sy-public .sy-call-option.urgent-on { border-color: var(--sy-amber, #b97d10); background: var(--sy-amber-bg, #fdf3df); }
.sy-public .sy-call-option.share input[type="checkbox"] { accent-color: var(--sy-teal); }
.sy-public .sy-call-option.share.on { border-color: var(--sy-teal); background: var(--sy-teal-bg); }

.sy-public .sy-eta-box { display: flex; align-items: center; gap: 9px; background: var(--sy-blue-bg); border-radius: 11px; padding: 11px 13px; margin-block-start: 4px; margin-block-end: 12px; font-size: 13px; font-weight: 700; color: var(--sy-primary); }
.sy-public .sy-eta-box.urgent-on { background: var(--sy-amber-bg, #fdf3df); color: var(--sy-amber, #b97d10); }

.sy-public .sy-pricebox { border: 1.5px solid var(--sy-line); border-radius: 13px; padding: 14px; margin-block-end: 14px; }
.sy-public .sy-prow { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding-block: 4px; color: #42506a; }
.sy-public .sy-prow.extra { color: var(--sy-amber, #b97d10); font-weight: 700; }
.sy-public .sy-prow.total { border-block-start: 1px dashed var(--sy-line); margin-block-start: 8px; padding-block-start: 10px; font-size: 16px; font-weight: 800; color: var(--sy-ink); }
.sy-public .sy-prow .num { font-variant-numeric: tabular-nums; }

.sy-public .sy-howbox { background: var(--sy-teal-bg); border: 1.5px solid #b7e5df; border-radius: 13px; padding: 13px 14px; margin-block-end: 14px; }
.sy-public .sy-howbox .ht { font-size: 13px; font-weight: 800; color: var(--sy-teal-dark); display: flex; align-items: center; gap: 7px; margin-block-end: 8px; }
.sy-public .sy-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.sy-public .sy-steps li { counter-increment: s; position: relative; padding-inline-start: 26px; font-size: 12.5px; line-height: 1.85; color: #2a5f59; }
.sy-public .sy-steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--sy-teal); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; }

.sy-public .sy-wallet-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-block-end: 12px; padding: 9px 12px; border-radius: 10px; }
.sy-public .sy-wallet-note.has { background: var(--sy-green-bg); color: var(--sy-green); }
.sy-public .sy-wallet-note.no { background: var(--sy-red-bg); color: var(--sy-red); }
.sy-public .sy-paybtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .sy-public .sy-paybtns { grid-template-columns: 1fr; } }

/* --- نوار وضعیت سراسری (statusbar) --- */
.sy-public .sy-visit-banner { padding-block: 12px; color: #fff; position: sticky; inset-block-start: 0; z-index: 30; box-shadow: 0 4px 18px rgba(29, 39, 51, .16); }
.sy-public .sy-visit-banner .inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sy-public .sy-visit-banner .ic { width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: none; }
.sy-public .sy-visit-banner .tx { flex: 1; min-width: 210px; font-size: 13.5px; font-weight: 700; }
.sy-public .sy-visit-banner.wait { background: linear-gradient(90deg, #b97d10, #d99a2b); }
.sy-public .sy-visit-banner.live { background: linear-gradient(90deg, #0e8a7c, #1fb8a6); }
.sy-public .sy-visit-banner.fail { background: linear-gradient(90deg, #b93a3a, #d24545); }
.sy-public .sy-visit-banner.done { background: linear-gradient(90deg, #2f56c9, #4272f5); }
.sy-public .sy-visit-banner .go { background: #fff; border: 0; border-radius: 9px; padding: 9px 16px; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; flex: none; color: var(--sy-primary); text-decoration: none; }
.sy-public .sy-visit-banner .tm { display: flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, .16); border-radius: 11px; padding: 6px 15px; flex: none; }
.sy-public .sy-visit-banner .tm b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; line-height: 1.3; }
.sy-public .sy-visit-banner .tm span { font-size: 10.5px; opacity: .9; }

/* --- کارتابل پزشک: livecard/stats/سوییچ --- */
.sy-public .sy-livecard { border-inline-start: 5px solid #c2cbd9; transition: .2s; }
.sy-public .sy-livecard.on { border-inline-start-color: var(--sy-green); background: linear-gradient(160deg, var(--sy-green-bg), #fff); }
.sy-public .sy-livestat { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; }
.sy-public .sy-livestat .d { width: 11px; height: 11px; border-radius: 50%; background: #c2cbd9; flex: none; }
.sy-public .sy-livecard.on .sy-livestat .d { background: var(--sy-green); animation: sy-pulse 1.6s ease-in-out infinite; }
@keyframes sy-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
.sy-public .sy-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-block-start: 14px; }
.sy-public .sy-stat-box { background: var(--sy-bg-soft); border-radius: 12px; padding: 11px; text-align: center; }
.sy-public .sy-stat-box b { display: block; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sy-public .sy-stat-box span { font-size: 11px; color: var(--sy-muted); }

/* --- ردیف بیمار در کارتابل (.pt) --- */
.sy-public .sy-pt { background: #fff; border: 1px solid var(--sy-line); border-radius: 14px; padding: 16px; margin-block-end: 12px; display: flex; gap: 14px; align-items: flex-start; transition: .16s; flex-wrap: wrap; }
.sy-public .sy-pt:hover { border-color: #c3d2ef; }
.sy-public .sy-pt .ph { width: 48px; height: 48px; border-radius: 13px; background: var(--sy-blue-bg); color: var(--sy-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; flex: none; }
.sy-public .sy-pt .mid { flex: 1; min-width: 220px; }
.sy-public .sy-pt .nm { font-size: 14.5px; font-weight: 800; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sy-public .sy-pt .meta { display: flex; flex-wrap: wrap; gap: 6px 15px; margin-block-start: 5px; font-size: 12.5px; color: #42506a; }
.sy-public .sy-pt .acts { display: flex; flex-direction: column; gap: 7px; flex: none; min-width: 158px; }
.sy-public .sy-shared-pill { background: var(--sy-teal-bg); color: var(--sy-teal-dark); border-radius: 9px; padding: 7px 11px; font-size: 11.5px; font-weight: 700; margin-block-start: 9px; display: inline-flex; align-items: center; gap: 6px; }
.sy-public .sy-shared-pill.off { background: var(--sy-bg-soft); color: var(--sy-muted); }
.sy-public .sy-permit-pill { background: var(--sy-purple-bg); color: var(--sy-purple); border-radius: 9px; padding: 7px 11px; font-size: 11.5px; font-weight: 700; margin-block-start: 9px; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) {
    .sy-public .sy-pt { flex-wrap: wrap; }
    .sy-public .sy-pt .acts { min-width: 100%; flex-direction: row; flex-wrap: wrap; }
}

/* ===== انجمن (Community) — پورت مستقیم design/salamatyar-community-mockup.html؛ کارت/بج/دکمه/فیلد/مودال/
   لیست از کلاس‌های .sy-* موجود دوباره استفاده می‌شوند، فقط اجزای واقعاً جدید (چیدمان دوستونه/درخت
   دسته‌بندی/ردیف گروه/اتاق گفتگو/نقش‌ها) اضافه شدند. ===== */

/* --- چیدمان کلی: سایدبار + محتوای اصلی --- */
.sy-public .sy-community-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.sy-public .sy-community-side { min-width: 0; }
.sy-public .sy-community-side-title { font-size: 13px; font-weight: 800; margin-block-end: 10px; }
.sy-public .sy-community-main { min-width: 0; }
@media (max-width: 900px) {
    .sy-public .sy-community-layout { grid-template-columns: 1fr; }
}

.sy-public .sy-search-box { display: flex; gap: 8px; }
.sy-public .sy-search-box input { flex: 1; font-family: inherit; font-size: 14px; border: 1.5px solid var(--sy-line); border-radius: 10px; padding: 10px 14px; background: #fff; outline: 0; }
.sy-public .sy-search-box input:focus { border-color: var(--sy-primary); box-shadow: 0 0 0 3px rgba(66, 114, 245, .12); }

/* --- درخت دسته/زیردسته/گروه (سه‌سطحی) — details/summary بومی --- */
.sy-public .sy-cat-l2 { background: #fff; border: 1px solid var(--sy-line); border-radius: var(--sy-radius); margin-block-end: 14px; }
.sy-public .sy-cat-l2 summary { padding: 15px 18px; font-weight: 800; font-size: 14.5px; cursor: pointer; list-style: none; }
.sy-public .sy-cat-l2 summary::-webkit-details-marker { display: none; }
.sy-public .sy-cat-l2-body { padding: 0 18px 14px; }
.sy-public .sy-cat-l3 { border-block-start: 1px dashed var(--sy-line); padding-block-start: 10px; margin-block-start: 10px; }
.sy-public .sy-cat-l3:first-of-type { border: 0; margin-block-start: 0; padding-block-start: 0; }
.sy-public .sy-cat-l3 summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; font-weight: 700; font-size: 13px; color: #42506a; }
.sy-public .sy-cat-l3 summary::-webkit-details-marker { display: none; }
.sy-public .sy-cnt { font-size: 11px; color: var(--sy-muted); font-weight: 600; }

/* ردیف گروه — تک‌خط، حداقل ارتفاع، شمارنده‌ی عضو در انتها (چپِ بصری در RTL) */
.sy-public .sy-grp-list { list-style: none; margin-block-start: 6px; }
.sy-public .sy-grp-row { display: flex; align-items: center; gap: 10px; padding-block: 8px; border-block-end: 1px dashed var(--sy-line); cursor: pointer; }
.sy-public .sy-grp-row:last-child { border: 0; }
.sy-public .sy-grp-row:hover { background: var(--sy-bg-soft); border-radius: 8px; }
.sy-public .sy-grp-ph { width: 26px; height: 26px; border-radius: 8px; background: var(--sy-blue-bg); color: var(--sy-primary); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.sy-public .sy-grp-nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-public .sy-grp-cnt { font-size: 11.5px; color: var(--sy-muted); flex: none; }
.sy-public .sy-grp-row.official .sy-grp-nm { color: var(--sy-purple); }

/* متادیتای مودال جزئیات گروه */
.sy-public .sy-community-gm-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--sy-muted); margin-block: 8px 14px; }

/* --- اتاق گفتگوی گروه --- */
.sy-public .sy-room-wrap { display: flex; flex-direction: column; height: 68vh; min-height: 420px; background: #fff; border: 1px solid var(--sy-line); border-radius: var(--sy-radius); box-shadow: var(--sy-shadow); overflow: hidden; }
.sy-public .sy-room-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-block-end: 1px solid var(--sy-line); position: relative; flex: none; }
.sy-public .sy-room-top-info { font-weight: 800; font-size: 14.5px; }
.sy-public .sy-room-menu { position: relative; }
.sy-public .sy-room-menu-list { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; background: #fff; border: 1px solid var(--sy-line); border-radius: 12px; box-shadow: var(--sy-shadow); padding: 6px; min-width: 190px; z-index: 20; display: flex; flex-direction: column; gap: 2px; }
.sy-public .sy-room-menu-list button, .sy-public .sy-room-menu-list a { display: block; width: 100%; text-align: start; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--sy-ink); background: none; border: 0; cursor: pointer; font-family: inherit; }
.sy-public .sy-room-menu-list button:hover, .sy-public .sy-room-menu-list a:hover { background: var(--sy-bg-soft); }

.sy-public .sy-room-pinned { display: flex; align-items: center; gap: 8px; background: var(--sy-blue-bg); color: #33508f; padding: 9px 18px; font-size: 12.5px; border-block-end: 1px solid var(--sy-line); flex: none; }
.sy-public .sy-pin-ic { flex: none; }

.sy-public .sy-room-log { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.sy-public .sy-msg-sys { align-self: center; font-size: 11.5px; color: var(--sy-muted); background: var(--sy-bg-soft); padding: 4px 14px; border-radius: 999px; }
.sy-public .sy-msg-row { max-width: 78%; display: flex; flex-direction: column; gap: 3px; }
.sy-public .sy-msg-row.mine { align-self: flex-end; align-items: flex-end; }
.sy-public .sy-msg-row.theirs { align-self: flex-start; align-items: flex-start; }
.sy-public .sy-msg-sender { font-size: 11px; font-weight: 700; color: var(--sy-primary); }
.sy-public .sy-msg-bubble { padding: 10px 15px; border-radius: 16px; font-size: 13.5px; line-height: 1.85; white-space: pre-line; }
.sy-public .sy-msg-row.theirs .sy-msg-bubble { background: var(--sy-bg-soft); border: 1px solid var(--sy-line); border-start-start-radius: 4px; }
.sy-public .sy-msg-row.mine .sy-msg-bubble { background: var(--sy-primary); color: #fff; border-start-end-radius: 4px; }
.sy-public .sy-reply-quote { font-size: 11.5px; opacity: .85; border-inline-start: 3px solid rgba(255, 255, 255, .55); padding-inline-start: 8px; margin-block-end: 6px; }
.sy-public .sy-msg-row.theirs .sy-reply-quote { border-inline-start-color: var(--sy-primary); color: var(--sy-muted); }
.sy-public .sy-msg-attachment { font-size: 12px; margin-block-start: 6px; }
.sy-public .sy-msg-meta { font-size: 10.5px; color: var(--sy-muted); display: flex; gap: 6px; }
.sy-public .sy-msg-row.mine .sy-msg-meta { color: rgba(255, 255, 255, .75); }
.sy-public .sy-msg-actions { display: flex; gap: 10px; font-size: 11px; color: var(--sy-muted); }
.sy-public .sy-msg-actions button { background: none; border: 0; padding: 0; font-size: 11px; color: inherit; cursor: pointer; font-family: inherit; }
.sy-public .sy-msg-actions button:hover { color: var(--sy-primary); }
.sy-public .sy-mention-tag { color: var(--sy-primary); font-weight: 700; }

.sy-public .sy-reply-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px; background: var(--sy-blue-bg); font-size: 12.5px; color: #33508f; border-block-end: 1px solid var(--sy-line); flex: none; }
.sy-public .sy-reply-bar button { background: none; border: 0; cursor: pointer; color: inherit; font-size: 14px; }

.sy-public .sy-room-compose { display: flex; gap: 10px; align-items: center; padding: 12px 18px; border-block-start: 1px solid var(--sy-line); flex: none; }
.sy-public .sy-room-compose input[type="text"] { flex: 1; border: 1.5px solid var(--sy-line); border-radius: 999px; padding: 10px 16px; font-family: inherit; font-size: 14px; outline: 0; }
.sy-public .sy-room-compose input[type="text"]:focus { border-color: var(--sy-primary); }
.sy-public .sy-room-attach-btn, .sy-public .sy-room-send-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; flex: none; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.sy-public .sy-room-attach-btn { background: var(--sy-bg-soft); color: var(--sy-ink); }
.sy-public .sy-room-attach-btn:hover { background: var(--sy-blue-bg); color: var(--sy-primary); }
.sy-public .sy-room-send-btn { background: var(--sy-primary); color: #fff; }
.sy-public .sy-room-send-btn:hover { background: var(--sy-primary-dark); }
.sy-public .sy-room-send-btn:disabled { opacity: .6; cursor: not-allowed; }
.sy-public .sy-room-attach-remove { background: none; border: 0; cursor: pointer; color: var(--sy-red); font-size: 12px; padding: 0 4px; }

/* --- پنل اعضا و نقش‌ها --- */
.sy-public .sy-member-row { display: flex; align-items: center; gap: 10px; padding-block: 10px; border-block-end: 1px solid var(--sy-line); flex-wrap: wrap; }
.sy-public .sy-member-row:last-child { border: 0; }
.sy-public .sy-member-clickable { flex: 1; min-width: 100px; cursor: pointer; }
.sy-public .sy-member-nm { font-size: 13.5px; font-weight: 600; }
.sy-public .sy-role-badge { font-size: 10.5px; font-weight: 700; padding: 3px 11px; border-radius: 999px; flex: none; }
.sy-public .sy-role-badge.owner { background: var(--sy-purple-bg); color: var(--sy-purple); }
.sy-public .sy-role-badge.admin { background: var(--sy-blue-bg); color: var(--sy-primary); }
.sy-public .sy-role-badge.member { background: var(--sy-bg-soft); color: var(--sy-muted); }
.sy-public .sy-role-badge.banned { background: var(--sy-red-bg); color: var(--sy-red); }

.sy-public .sy-perm-editor { flex-basis: 100%; display: flex; flex-direction: column; gap: 7px; padding-block: 10px 2px; border-block-start: 1px dashed var(--sy-line); margin-block-start: 8px; }
.sy-public .sy-perm-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #42506a; }
.sy-public .sy-perm-item input { width: 16px; height: 16px; flex: none; margin: 0; }

html.font-en, html.font-en body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}