:root {
    --bg-main: #eef2f6;
    --bg-card: #ffffff;
    --bg-sub: #f5f8fb;
    --input-bg: #ffffff;
    --border-color: #d6e0ea;
    --border-strong: #b5c5d6;
    --text-main: #182230;
    --text-muted: #475467;
    --primary-color: #2b6cb0;
    --primary-text: #ffffff;
    --primary-soft: #dbeafe;
    --border-w: 1px;
    --card-r: 1.25rem;

    /* ۴ طیف رنگی پاستلی/مخملی برای تنوع گزینه‌ها و کارت‌ها */
    --opt1-bg: #ebf8f2;
    --opt1-border: #7fd1ae;
    --opt1-accent: #18794e;
    --opt1-text: #0f4a30;

    --opt2-bg: #fff5eb;
    --opt2-border: #f5b87a;
    --opt2-accent: #bd5b15;
    --opt2-text: #612d07;

    --opt3-bg: #ebf3fe;
    --opt3-border: #84b4f5;
    --opt3-accent: #255bb5;
    --opt3-text: #15356b;

    --opt4-bg: #f4effe;
    --opt4-border: #b79cf5;
    --opt4-accent: #6340b5;
    --opt4-text: #382070;
}

html {
    font-size: 100% !important;
    -webkit-font-smoothing: antialiased;
}

body, html body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    font-family: 'Vazirmatn', Tahoma, sans-serif !important;
    line-height: 1.85 !important;
}

header, nav {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

.bg-slate-900, .bg-slate-900\/95, .bg-slate-900\/90, .bg-slate-900\/80, .glass-card {
    background-color: var(--bg-card) !important;
    border: var(--border-w) solid var(--border-color) !important;
    border-radius: var(--card-r) !important;
    color: var(--text-main) !important;
    box-shadow: 0 6px 22px -4px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
}

.bg-slate-950, .bg-slate-950\/95, .bg-slate-950\/90, .bg-slate-950\/80, .bg-slate-800 {
    background-color: var(--bg-sub) !important;
    border: var(--border-w) solid var(--border-color) !important;
    color: var(--text-main) !important;
}

/* رنگ‌بندی معنایی و متنوع برای کارت‌های مختلف سایت (بدون تندی و زنندگی) */
.bg-emerald-500\/10, .bg-emerald-500\/15, .bg-emerald-500\/20, .bg-emerald-950\/10, .bg-emerald-950\/30, .from-emerald-500\/20 {
    background-color: var(--opt1-bg) !important;
    background-image: none !important;
    border: 1.5px solid var(--opt1-border) !important;
    color: var(--opt1-text) !important;
}
.bg-amber-500\/5, .bg-amber-500\/10, .bg-amber-500\/15, .bg-amber-400\/15, .bg-amber-400\/20, .from-amber-500\/15 {
    background-color: var(--opt2-bg) !important;
    background-image: none !important;
    border: 1.5px solid var(--opt2-border) !important;
    color: var(--opt2-text) !important;
}
.bg-teal-500\/10, .bg-teal-500\/15, .bg-teal-500\/20, .from-teal-500\/20 {
    background-color: var(--opt3-bg) !important;
    background-image: none !important;
    border: 1.5px solid var(--opt3-border) !important;
    color: var(--opt3-text) !important;
}

/* اعمال استایل متنوع گزینه‌ها (۵ استایل انتخابی) */
label.cursor-pointer, .grid > label, .space-y-2\.5 > button, .masir-option-card {
    position: relative !important;
    padding: 1rem 1.15rem !important;
    border-radius: 1rem !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.masir-option-card, .grid > label, .space-y-2\.5 > button {
    border-radius: 1.1rem !important;
    border-width: 1.5px !important;
    border-bottom-width: 5px !important;
    transition: transform 0.12s ease, border-bottom-width 0.12s ease !important;
}
.masir-option-card:active, .grid > label:active, .space-y-2\.5 > button:active {
    transform: translateY(2px) !important;
}
.masir-option-card:nth-child(4n+1), .grid > label:nth-child(4n+1), .space-y-2\.5 > button:nth-child(4n+1) {
    background-color: var(--opt1-bg) !important;
    border-color: var(--opt1-border) !important;
    border-bottom-color: var(--opt1-accent) !important;
}
.masir-option-card:nth-child(4n+2), .grid > label:nth-child(4n+2), .space-y-2\.5 > button:nth-child(4n+2) {
    background-color: var(--opt2-bg) !important;
    border-color: var(--opt2-border) !important;
    border-bottom-color: var(--opt2-accent) !important;
}
.masir-option-card:nth-child(4n+3), .grid > label:nth-child(4n+3), .space-y-2\.5 > button:nth-child(4n+3) {
    background-color: var(--opt3-bg) !important;
    border-color: var(--opt3-border) !important;
    border-bottom-color: var(--opt3-accent) !important;
}
.masir-option-card:nth-child(4n+4), .grid > label:nth-child(4n+4), .space-y-2\.5 > button:nth-child(4n+4) {
    background-color: var(--opt4-bg) !important;
    border-color: var(--opt4-border) !important;
    border-bottom-color: var(--opt4-accent) !important;
}

/* افکت هاور و انتخاب شدن گزینه‌ها */
label.cursor-pointer:hover, .grid > label:hover, .space-y-2\.5 > button:hover, .masir-option-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08) !important;
}

label:has(input[type="radio"]:checked), label:has(input[type="checkbox"]:checked) {
    box-shadow: 0 0 0 3px var(--primary-soft), 0 8px 20px -4px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}
label:has(input[type="radio"]:checked):nth-child(4n+1) { border-color: var(--opt1-accent) !important; border-width: 2.5px !important; }
label:has(input[type="radio"]:checked):nth-child(4n+2) { border-color: var(--opt2-accent) !important; border-width: 2.5px !important; }
label:has(input[type="radio"]:checked):nth-child(4n+3) { border-color: var(--opt3-accent) !important; border-width: 2.5px !important; }
label:has(input[type="radio"]:checked):nth-child(4n+4) { border-color: var(--opt4-accent) !important; border-width: 2.5px !important; }

/* تنوع رنگی برای کارت‌های ۶ بُعد چرخه زندگی و لیست کارها */
.grid-cols-2 > div:nth-child(4n+1) { background-color: var(--opt1-bg) !important; border: 1.5px solid var(--opt1-border) !important; }
.grid-cols-2 > div:nth-child(4n+2) { background-color: var(--opt2-bg) !important; border: 1.5px solid var(--opt2-border) !important; }
.grid-cols-2 > div:nth-child(4n+3) { background-color: var(--opt3-bg) !important; border: 1.5px solid var(--opt3-border) !important; }
.grid-cols-2 > div:nth-child(4n+4) { background-color: var(--opt4-bg) !important; border: 1.5px solid var(--opt4-border) !important; }

/* تایپوگرافی و متون رنگی ملایم */
h1, h2, h3, h4, h5, h6, strong, b, th,
.text-white, .text-slate-100, .text-slate-200 {
    color: var(--text-main) !important;
}
p, li, td, label,
.text-slate-300, .text-slate-400, .text-slate-500 {
    color: var(--text-muted) !important;
}
.text-emerald-300, .text-emerald-400 { color: var(--opt1-accent) !important; }
.text-amber-300, .text-amber-400 { color: var(--opt2-accent) !important; }
.text-teal-300, .text-teal-400, .text-sky-300 { color: var(--opt3-accent) !important; }
.text-purple-300, .text-purple-400 { color: var(--opt4-accent) !important; }

/* ورودی‌ها و منوهای کشویی */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select, textarea {
    background-color: var(--input-bg) !important;
    border: 1.5px solid var(--border-strong) !important;
    color: var(--text-main) !important;
    border-radius: 0.85rem !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
}
select option {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

/* دکمه‌های متنوع (سبز، کهربایی، آبی) با رنگ‌های پخته و مات */
button[type="submit"], .bg-emerald-500, .bg-emerald-400, .from-emerald-500 {
    background-color: var(--primary-color) !important;
    background-image: none !important;
    color: var(--primary-text) !important;
    border: 1px solid transparent !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
button[type="submit"] *, .bg-emerald-500 *, .from-emerald-500 * {
    color: var(--primary-text) !important;
    background: transparent !important;
}

.bg-amber-400, .bg-amber-500 {
    background-color: var(--opt2-accent) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}
.bg-amber-400 *, .bg-amber-500 * { color: #ffffff !important; }

.bg-teal-400, .bg-teal-500 {
    background-color: var(--opt3-accent) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}
.bg-teal-400 *, .bg-teal-500 * { color: #ffffff !important; }