/* ==================== آیکون‌های SVG منو ==================== */
/* رنگ هر آیکون از متغیر --ic می‌آید (در icons.js تعیین می‌شود). */
.ic-badge {
    --ic-size: 40px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ic-size);
    height: var(--ic-size);
    flex: 0 0 auto;
    border-radius: 30%;
    color: var(--ic, var(--chrome-b));
    background: linear-gradient(145deg, var(--surface), var(--surface-2));
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    line-height: 0;
    overflow: hidden;
}
/* لایه‌ی رنگی بسیار ملایم پشت آیکون */
.ic-badge::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: currentColor;
    opacity: 0.09;
    border-radius: inherit;
}
.ic-badge svg {
    position: relative;
    width: 58%;
    height: 58%;
    display: block;
}

/* کاشی‌های صفحه‌ی اصلی: بزرگ */
.menu-tile .ic-badge {
    --ic-size: 64px;
    margin: 0 auto 10px;
}
.menu-tile:hover .ic-badge,
.menu-tile:active .ic-badge {
    transform: translateY(-3px) scale(1.07);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* منوی کناری: کوچک‌تر */
.menu-item-icon .ic-badge {
    --ic-size: 42px;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* ایموجی‌های جایگزین (وقتی آیکون SVG ندارند) */
.menu-tile-icon, .menu-item-icon { line-height: 1; }

/* ---------- طرح جنگلی ---------- */
html[data-app-theme="forest"] .ic-badge {
    background: linear-gradient(145deg, var(--surface), #f0fdf4);
    box-shadow: 0 6px 14px rgba(22, 101, 52, 0.15), inset 0 0 0 1px #bbf7d0;
}

/* ---------- طرح کهکشانی: نشان شیشه‌ای با درخشش نئونی ---------- */
html[data-app-theme="cosmic"] .ic-badge {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 14px rgba(192, 132, 252, 0.35), inset 0 0 0 1px rgba(192, 132, 252, 0.4);
    filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.55));
}
html[data-app-theme="cosmic"] .ic-badge::before { opacity: 0.16; }

/* ==================== آیکون تیتر صفحه‌ها / کارت‌ها / مودال‌ها ==================== */
.ic-h { display: inline-flex; vertical-align: middle; margin-inline-end: 10px; line-height: 0; }
.ic-h.ic-lg .ic-badge { --ic-size: 46px; }
.ic-h.ic-sm .ic-badge { --ic-size: 30px; border-radius: 28%; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.9); }
.content-header h2 { display: flex; align-items: center; }
h3 .ic-h { margin-inline-end: 8px; }
html[data-app-theme="cosmic"] .ic-h.ic-sm .ic-badge { filter: none; box-shadow: 0 0 8px rgba(192, 132, 252, 0.35), inset 0 0 0 1px rgba(192, 132, 252, 0.4); }