/* ===========================================================
سورهٔ نور — قالب اپلیکیشن
تمِ کرم/سورمهای، روشن و امیدبخش، با المانهای کمرنگ اسلیمی
=========================================================== */
/* ---- Estedad (modern Persian sans — primary, از دیزاینسیستمِ PKSP) ---- */
@font-face{ font-family:'Estedad'; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/7356fd5a-775f-4953-9d52-956ebc96ab62.woff2") format('woff2'); }
@font-face{ font-family:'Estedad'; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/5b81953d-98d4-469f-aded-b4d764ba14cd.woff2") format('woff2'); }
@font-face{ font-family:'Estedad'; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/751a493e-a536-4c65-a1c7-288c2667b8f6.woff2") format('woff2'); }
@font-face{ font-family:'Estedad'; font-style:normal; font-weight:800; font-display:swap; src:url("fonts/ecaa816f-7b44-412e-96ea-21e49bff9a66.woff2") format('woff2'); }
@font-face{ font-family:'Estedad'; font-style:normal; font-weight:900; font-display:swap; src:url("fonts/0fa47b76-83d9-4698-8482-eeb1ee888612.woff2") format('woff2'); }
/* arabic */
@font-face {
font-family: 'Amiri';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("fonts/c5afcc37-e2ff-492b-9c66-9dc3c3cab25d.woff2") format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Amiri';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("fonts/bb7e9594-ca23-4b3c-8bb3-3fe0f18d8503.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Amiri';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("fonts/b4902f5c-c223-4ad7-b7c9-ecac1ad5852c.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Amiri';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/1a2f9ff8-f533-4abe-b9c0-b98a2bbe96dd.woff2") format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Amiri';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/b3dc4112-1ba3-4fa4-8806-0f94b7dd8dfa.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Amiri';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/c3edb07d-1368-4733-882c-11938f396952.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Amiri Quran';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/24364728-7212-46bc-a020-8681dc07b1db.woff2") format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin */
@font-face {
font-family: 'Amiri Quran';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/e9239d90-7d1e-49e5-90f5-f919192db82b.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/b8849d58-354f-4beb-8190-5652ccdd4b46.woff2") format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* vietnamese */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/007bc3fa-a8f1-4bab-b21a-8293a94c3d92.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/c76e650f-da3b-4531-a607-530d02b1ba18.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/35610a56-6b6f-44d0-a09f-695ed29f9f05.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/b8849d58-354f-4beb-8190-5652ccdd4b46.woff2") format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* vietnamese */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/007bc3fa-a8f1-4bab-b21a-8293a94c3d92.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/c76e650f-da3b-4531-a607-530d02b1ba18.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/35610a56-6b6f-44d0-a09f-695ed29f9f05.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/b8849d58-354f-4beb-8190-5652ccdd4b46.woff2") format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* vietnamese */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/007bc3fa-a8f1-4bab-b21a-8293a94c3d92.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/c76e650f-da3b-4531-a607-530d02b1ba18.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/35610a56-6b6f-44d0-a09f-695ed29f9f05.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/b8849d58-354f-4beb-8190-5652ccdd4b46.woff2") format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* vietnamese */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/007bc3fa-a8f1-4bab-b21a-8293a94c3d92.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/c76e650f-da3b-4531-a607-530d02b1ba18.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Markazi Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/35610a56-6b6f-44d0-a09f-695ed29f9f05.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
/* paper / surfaces */
--paper:#f3ead8; /* deeper cream — page */
--paper-2:#efe4cf; /* shaded cream */
--surface:#fbf6ec; /* cards */
--surface-soft:#f7efe0; /* inset */
/* ink */
--ink:#2b3148; /* body text (navy-slate) */
--ink-soft:#5a6079; /* secondary */
--ink-faint:#8b8ea0;
/* navy — سورمهای */
--navy:#15294e;
--navy-2:#1d3460;
--navy-deep:#0e1c39;
--navy-rgb:21,41,78;
/* player palette — pd-d9 طرحِ «لوح» (navy default) */
--pl-frame:#07111e; --pl-card:#0e1e32; --pl-badge:#15294e;
/* gold — طلایی کهنه */
--gold:#b08434;
--gold-bright:#caa052;
--gold-soft:#d8be8a;
--gold-ghost:rgba(176,132,52,.16);
/* lines */
--rule:rgba(176,132,52,.30);
--rule-soft:rgba(21,41,78,.10);
--shadow-sm:none;
--shadow-md:none;
--shadow-lg:none;
--read:46rem; /* reading column */
--radius:18px;
--radius-sm:12px;
--ff-body:'Estedad', system-ui, sans-serif;
--ff-display:'Estedad', system-ui, sans-serif;
--ff-ar:'Estedad', sans-serif;
--tab-h:64px;
}
/* star/khatam watermark removed by request — kept as a no-op switch */
:root{
--eslimi:none;
}
*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; font-size:var(--ui-fs,16px); }
body{
margin:0;
font-family:var(--ff-body);
font-weight:400;
font-size:1rem;
line-height:1.62;
color:var(--ink);
background-color:var(--paper);
background-image:none;
background-attachment:fixed;
position:relative;
padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));
-webkit-font-smoothing:antialiased;
}
/* dim layer no longer needed (watermark removed) */
body::before{ content:none; }
/* numerals & arabic */
.num{ font-feature-settings:"ss01"; font-variant-numeric:proportional-nums; }
[lang="ar"]{ font-family:var(--ff-ar); }
a{ color:var(--navy-2); text-decoration:none; }
/* ---------- centered column wrapper for top-level blocks ---------- */
.s-head, .surah-info, .tabs, .panes{ width:100%; }
/* =========================================================
HERO (.s-head)
========================================================= */
.s-head{
position:relative;
text-align:center;
color:#f4ecda;
background:
var(--navy);
padding:clamp(12px,3vw,24px) 20px clamp(12px,3vw,22px);
overflow:hidden;
}
.s-head::before{ /* نور glow */
content:""; position:absolute; left:50%; top:-30%;
width:min(620px,120%); aspect-ratio:1; transform:translateX(-50%);
background:none;
pointer-events:none;
}
.s-head::after{ /* faint khatam halo behind title */
content:""; position:absolute; left:50%; top:50%;
width:340px; height:340px; transform:translate(-50%,-58%);
background:var(--eslimi); background-size:64px 64px;
-webkit-mask-image:radial-gradient(circle, #000 0%, transparent 70%);
mask-image:radial-gradient(circle, #000 0%, transparent 70%);
opacity:.10; pointer-events:none;
}
.s-head > *{ position:relative; z-index:1; }
/* ===== brand mark (مارپیچِ تأمل) ===== */
.mark{ display:block; }
.mark svg{ width:100%; height:100%; display:block; }
.hd-mark{ width:56px; height:56px; margin:0 auto 8px; color:var(--gold-soft); }
.s-head .back, .coll-hero .back{ /* centred, above the logo; distinct gold chip */
position:static; display:flex; align-items:center; gap:.45em; white-space:nowrap;
margin:0 auto 16px; width:fit-content;
font-size:.82rem; font-weight:600; letter-spacing:.01em; color:var(--gold-soft);
padding:8px 17px;
background:linear-gradient(rgba(216,190,138,.16),rgba(216,190,138,.08));
border:1px solid rgba(216,190,138,.45); box-shadow:0 1px 0 rgba(0,0,0,.06) inset;
border-radius:999px; transition:.2s;
}
.s-head .back:hover, .coll-hero .back:hover{ background:rgba(216,190,138,.24); color:#fff; border-color:rgba(216,190,138,.72); }
.s-head h1{
font-family:var(--ff-display);
font-weight:600;
font-size:clamp(1.55rem,4.2vw,1.85rem);
line-height:1.2;
margin:.08em 0 .1em;
color:#fbf3e2;
text-shadow:0 2px 30px rgba(0,0,0,.25);
}
.s-head .s-meta{
margin:0; font-size:.8rem; color:var(--gold-soft);
letter-spacing:.01em;
}
.s-head .s-meta .num{ color:#fff; font-weight:600; }
/* gold rule under hero */
.s-head{ border-bottom:2px solid var(--gold); }
/* =========================================================
surah-info (details/summary)
========================================================= */
.surah-info{
max-width:var(--read); margin:10px auto 0;
padding:0 18px; text-align:center;
}
.surah-info > summary{
list-style:none; cursor:pointer;
display:inline-flex; align-items:center; gap:.45em;
color:var(--ink-soft); font-weight:600; font-size:.9rem;
background:none; border:0; padding:8px 6px; transition:.2s;
}
.surah-info > summary::-webkit-details-marker{ display:none; }
.surah-info > summary::after{
content:"▾"; color:var(--gold); transition:transform .25s; font-size:.8em;
}
.surah-info[open] > summary::after{ transform:rotate(180deg); }
.surah-info > summary:hover{ color:var(--navy); }
.si-body{
background:none; border:0; box-shadow:none;
margin:4px auto 0; max-width:34rem; padding:4px 0 2px;
animation:rise .4s ease both;
}
.si-meta{ display:flex; flex-direction:column; align-items:center; gap:5px; margin-bottom:0; }
.si-row{
display:inline-flex; align-items:baseline; justify-content:center; gap:.5em;
background:none; border:0; padding:0;
}
.si-k{ color:var(--ink-faint); font-size:.82rem; }
.si-k::after{ content:"·"; color:var(--gold); margin-inline-start:.55em; }
.si-v{ font-weight:600; color:var(--navy); font-size:.92rem; }
.si-links{
position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
margin-top:18px; padding-top:16px;
}
.si-links::before{
content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:60px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.si-btn{
display:inline-flex; align-items:center; gap:.45em; width:auto;
padding:8px 15px; border-radius:999px;
background:var(--surface); border:1px solid var(--rule); color:var(--navy-2);
font-size:.84rem; font-weight:500; transition:.2s;
}
.si-btn:hover{ border-color:var(--gold); background:var(--gold-ghost); transform:translateY(-1px); }
/* =========================================================
TABS (sticky top desktop / bottom bar mobile)
========================================================= */
.tabmenu{ display:none; } /* desktop: horizontal .tabs; mobile: this dropdown (see ≤720px) */
.tabs{
position:sticky; top:0; z-index:50;
display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
padding:10px 14px;
margin:30px auto 0; max-width:var(--read);
background:rgba(243,234,216,.82);
backdrop-filter:blur(12px) saturate(1.2);
-webkit-backdrop-filter:blur(12px) saturate(1.2);
border-block:1px solid var(--rule);
transition:transform .32s cubic-bezier(.4,0,.2,1), top .25s;
}
.tab{
appearance:none; cursor:pointer;
font-family:var(--ff-body); font-size:.92rem; font-weight:600;
color:var(--ink-soft);
background:transparent; border:1px solid transparent;
border-radius:999px; padding:9px 15px; min-height:42px;
display:inline-flex; align-items:center; gap:.35em; white-space:nowrap;
transition:.2s;
}
.tab .num{ font-size:.82em; }
.tab:hover{ color:var(--navy); background:var(--gold-ghost); }
.tab.active{
color:#fbf3e2;
background:var(--navy);
border-color:var(--navy-deep);
box-shadow:none;
}
/* =========================================================
PANES / READING COLUMN
========================================================= */
.panes{ max-width:var(--read); margin:0 auto; padding:6px 18px 56px; }
.pane{ display:none; opacity:1; }
.pane.active{ display:block; }
@media (prefers-reduced-motion: no-preference){
.pane.active{ animation:paneIn .45s ease; }
}
@keyframes paneIn{ from{ transform:translateY(9px); } to{ transform:none; } }
@keyframes rise{ from{ opacity:0; transform:translateY(10px);} to{opacity:1;transform:none;} }
.pane h1{
font-family:var(--ff-display); font-weight:600;
font-size:clamp(1.45rem,3.2vw,1.65rem); line-height:1.28;
color:var(--navy); text-align:center;
margin:18px 0 8px;
}
.pane h1::after{ /* small gold motif under page title */
content:""; display:block; width:88px; height:14px; margin:9px auto 0;
background:center/contain no-repeat
url("data:image/svg+xml;utf8,");
}
.pane h2{
font-family:var(--ff-display); font-weight:600;
font-size:clamp(1.18rem,2.6vw,1.32rem); line-height:1.35;
color:var(--navy); margin:26px 0 8px;
scroll-margin-top:90px; position:relative;
padding-inline-start:18px;
}
.pane h2::before{
content:""; position:absolute; inset-inline-start:0; top:.18em; bottom:.18em;
width:5px; border-radius:3px;
background:var(--gold);
}
.pane h3{
font-family:var(--ff-display); font-weight:600;
font-size:1.12rem; color:var(--navy-2); margin:16px 0 5px;
}
.pane h4{
font-weight:700; font-size:1.05rem; color:var(--gold);
margin:16px 0 4px; letter-spacing:.01em;
}
.pane p{ margin:0 0 .68em; text-wrap:pretty; text-align:justify; text-justify:inter-word; }
.pane li, .note p, .asst p{ text-align:justify; text-justify:inter-word; }
.pane strong{ color:var(--navy); font-weight:700; }
.pane em{ color:var(--navy-2); }
.pane ul{ margin:0 0 .7em; padding-inline-start:0; list-style:none; }
.pane ul:not(.ses):not(.plist) li{
position:relative; padding-inline-start:1.7em; margin-bottom:.38em;
}
.pane ul:not(.ses):not(.plist) li::before{ /* prose bullet only — not the sessions/پخش lists */
content:""; position:absolute; inset-inline-start:.25em; top:.55em;
width:8px; height:8px; transform:rotate(45deg);
background:var(--gold); border-radius:1px;
}
/* hr — gold rule + center diamond */
hr{
border:0; height:20px; margin:16px auto;
background:center/auto 100% no-repeat
url("data:image/svg+xml;utf8,");
}
/* generic note / intro blockquote (the top yellow notes) */
.pane > blockquote{
background:var(--surface); border:1px solid var(--rule);
border-inline-start:4px solid var(--gold);
border-radius:var(--radius-sm);
padding:11px 15px; margin:0 0 14px;
font-size:.9rem; line-height:1.62; color:var(--ink-soft);
box-shadow:var(--shadow-sm);
}
.pane > blockquote strong{ color:var(--navy); }
/* =========================================================
AYAH BOX — the centerpiece (navy illuminated card)
========================================================= */
.ayah-box{
position:relative;
background:
radial-gradient(120% 80% at 50% -10%, rgba(202,160,82,.16), rgba(202,160,82,0) 60%),
var(--navy);
color:#eee3cf;
border-radius:var(--radius-sm);
padding:10px 12px 9px;
margin:11px 0;
box-shadow:var(--shadow-md);
overflow:hidden;
}
.ayah-box::before{ /* gold inner frame */
content:""; position:absolute; inset:6px; border:1px solid rgba(216,190,138,.28);
border-radius:calc(var(--radius-sm) - 5px); pointer-events:none;
}
.ayah-box::after{ /* faint khatam corner ornament */
content:""; position:absolute; inset-inline-end:-30px; bottom:-30px;
width:150px; height:150px; background:var(--eslimi); background-size:60px 60px;
opacity:.10; pointer-events:none;
}
.ayah-box > *{ position:relative; z-index:1; }
.ay-ref{
display:inline-flex; align-items:center; gap:.5em;
font-size:.69rem; color:var(--gold-soft); font-weight:600;
letter-spacing:.02em; margin-bottom:6px;
padding-bottom:5px; border-bottom:1px solid rgba(216,190,138,.22);
}
.ay-ref .num{ color:#fff; }
.ay-row{ padding:9px 0; } /* one verse + its translation, paired */
.ay-row + .ay-row{ border-top:1px solid rgba(216,190,138,.18); }
.ay-ar{
font-family:var(--ff-ar);
font-size:clamp(1.06rem,3.6vw,1.38rem);
line-height:1.85; text-align:justify; color:#fdf7ea;
margin-bottom:5px; word-spacing:.02em;
}
.ay-n{ /* ayah number medallion */
display:inline-flex; align-items:center; justify-content:center;
min-width:1.9em; height:1.9em; margin:0 .25em; padding:0 .3em;
font-family:var(--ff-body); font-size:.62em; font-weight:700;
color:var(--navy); background:var(--gold);
border-radius:999px; box-shadow:none;
vertical-align:.35em;
}
.ay-fa{ /* translation, directly under its verse — larger, readable */
font-size:.98rem; line-height:1.8; color:#dee2ed;
text-align:justify;
}
.ay-fa b{ color:var(--gold-soft); }
/* =========================================================
NOTE boxes (term explanations — were green)
========================================================= */
.note{
background:var(--surface); position:relative;
border:1px solid var(--rule);
border-radius:var(--radius-sm);
padding:11px 14px 10px; margin:13px 0;
box-shadow:var(--shadow-sm);
}
.note::before{
content:""; position:absolute; inset-inline-start:0; top:11px; bottom:11px;
width:3px; border-radius:3px; background:var(--gold);
}
.note-t{
font-family:var(--ff-display); font-weight:600; font-size:1.15rem;
color:var(--gold); margin-bottom:2px; display:flex; align-items:center; gap:.45em;
}
.note-t::before{
content:""; width:9px; height:9px; transform:rotate(45deg); margin-top:-2px;
background:var(--gold); border-radius:1px; flex:none;
}
/* AI gradient logo badge (tab + disclaimer) */
.t-ai{ display:inline-flex; align-items:center; vertical-align:-.24em; margin-inline-start:.34em; }
.ai-logo{ width:1.32em; height:1.32em; display:block; transition:filter .2s; }
.tab.active .ai-logo, .tm-item.on .ai-logo{ filter:brightness(1.9) saturate(1.35) drop-shadow(0 0 1.5px rgba(255,255,255,.6)); } /* pop on the dark active tab */
/* AI disclaimer box at the top of the analysis — deliberately a different (cool slate) colour */
.ai-note{
background:#eef1f6; border:1px solid #d3dbe8; border-inline-start:4px solid #586b8c;
border-radius:12px; padding:12px 15px; margin:0 0 22px;
}
.ai-note-h{ display:flex; align-items:center; gap:.5em; margin-bottom:6px; flex-wrap:wrap; }
.ai-note-t{ font-family:var(--ff-display); font-weight:700; color:#37496b; font-size:1rem; }
.ai-note .t-ai{ vertical-align:-.2em; margin-inline-start:0; }
.ai-note .ai-logo{ width:1.25rem; height:1.25rem; }
.ai-note-beta{ font-size:.7rem; font-weight:700; color:#8a5e16; background:rgba(176,132,52,.13); border-radius:5px; padding:1px 8px; }
.ai-note p{ margin:0; font-size:.85rem; line-height:1.78; color:#44506b; text-align:justify; }
.note p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--ink-soft); }
.note p strong{ color:var(--navy); }
/* pull quote (.pq) */
figure.pq{ margin:16px 0; }
figure.pq blockquote{
margin:0; padding:14px 20px;
font-family:var(--ff-display); font-weight:500;
font-size:1.25rem; line-height:1.5; color:var(--navy);
text-align:center; position:relative;
}
figure.pq blockquote::before,
figure.pq blockquote::after{
content:"”"; font-family:var(--ff-ar); color:var(--gold-soft);
font-size:2.4em; line-height:0; vertical-align:-.35em;
}
figure.pq blockquote::before{ content:"“"; }
/* نظم قرآن figures (diagrams/tables scanned from the book) */
figure.nazm-fig{ margin:20px auto; text-align:center; }
figure.nazm-fig img{
max-width:100%; height:auto; border-radius:8px;
border:1px solid var(--line, #e6e0d4);
box-shadow:0 1px 4px rgba(0,0,0,.06); background:#fff;
}
/* =========================================================
SESSION-MAP arc + chapter TOC + struct flow
========================================================= */
/* compact linear session-rail: sticky, collapses on scroll-down, returns on scroll-up */
.sessmap{
background:rgba(251,246,236,.93); backdrop-filter:blur(10px) saturate(1.15);
-webkit-backdrop-filter:blur(10px) saturate(1.15);
border:1px solid var(--rule); border-radius:13px;
padding:9px 12px 7px; margin:14px 0;
position:sticky; top:0; z-index:60;
transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.sessmap.sm-collapsed{ transform:translateY(calc(-100% - 22px)); opacity:0; pointer-events:none; }
.sm-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.sm-title{
font-family:var(--ff-display); font-weight:600; font-size:1.02rem; color:var(--navy);
display:flex; align-items:center; gap:.45em; flex:none;
}
.sm-title::before{ content:""; width:9px; height:9px; transform:rotate(45deg); background:var(--gold); border-radius:1px; }
.sm-now{ font-size:.82rem; color:var(--ink-soft); min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:start; }
.sm-now .sm-now-n{ color:var(--gold); font-weight:700; }
.sm-now .sm-now-l{ color:var(--navy); }
.sm-toggle{ display:inline-flex; align-items:center; gap:.4em; background:transparent; border:0; cursor:pointer; padding:0; flex:none; font:inherit; }
.sm-caret{ width:15px; height:15px; color:var(--ink-soft); transition:transform .2s; }
.sessmap.sm-open .sm-caret{ transform:rotate(180deg); }
.sm-list{ display:none; margin-top:8px; max-height:300px; overflow-y:auto; border-top:1px solid var(--rule); padding-top:6px; }
.sessmap.sm-open .sm-list{ display:block; }
.sm-li{ display:flex; align-items:center; gap:10px; width:100%; text-align:start; background:transparent; border:0; cursor:pointer; padding:8px 6px; border-radius:8px; font-family:var(--ff-body); color:var(--navy); font-size:.9rem; transition:background .15s; }
.sm-li:hover{ background:var(--gold-ghost); }
.sm-li-n{ flex:none; min-width:26px; width:auto; padding:0 7px; height:24px; border-radius:6px; background:var(--surface-soft); border:1px solid var(--rule); display:inline-flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:700; color:var(--navy-2); white-space:nowrap; }
.sm-li-t{ flex:1; line-height:1.4; }
.sm-track{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:3px 0 2px; }
.sm-track::-webkit-scrollbar{ height:5px; }
.sm-track::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:3px; }
.sm-inner{ position:relative; display:flex; align-items:center; gap:9px; min-width:max-content; padding:3px 2px; }
.sm-inner::before{ content:""; position:absolute; inset-inline:15px; top:50%; height:2px; transform:translateY(-50%); background:var(--rule); pointer-events:none; }
.sm-node{ appearance:none; cursor:pointer; background:none; border:0; padding:0; flex:none; position:relative; z-index:1; font-family:var(--ff-body); }
.sm-pip{
display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
background:var(--surface); border:1.5px solid var(--gold-soft);
color:var(--navy); font-weight:700; font-size:.82rem; line-height:1; transition:.2s;
}
.sm-node:hover .sm-pip{ border-color:var(--gold); background:var(--gold-ghost); }
.sm-node.passed .sm-pip{ background:var(--gold-ghost); border-color:var(--gold); color:var(--gold); }
.sm-node.on .sm-pip{ background:var(--navy); border-color:var(--gold); color:#fbf3e2; transform:scale(1.12); }
@media (max-width:720px){
.sm-title{ font-size:.96rem; }
.sm-pip{ width:28px; height:28px; font-size:.78rem; }
}
.chap-toc{
background:var(--surface); border:1px solid var(--rule);
border-radius:var(--radius); padding:13px 16px; margin:16px 0;
box-shadow:var(--shadow-sm);
}
.ct-h{
font-family:var(--ff-display); font-weight:600; font-size:1.25rem;
color:var(--navy); margin-bottom:8px;
display:flex; align-items:center; gap:.5em;
}
.ct-h::before{ content:""; width:10px; height:10px; transform:rotate(45deg); margin-top:-2px; background:var(--gold); border-radius:1px; }
.ct-list{ display:grid; gap:0; }
.ct-link{
display:block; padding:4px 10px; border-radius:8px;
color:var(--navy); font-family:var(--ff-display); font-weight:600;
font-size:1.06rem; line-height:1.25; transition:.18s;
border-inline-start:2px solid transparent;
}
.ct-link:hover{ background:var(--gold-ghost); border-inline-start-color:var(--gold); color:var(--navy); }
.struct{
background:var(--surface);
border:1px solid var(--rule); border-radius:var(--radius);
padding:14px; margin:18px 0; box-shadow:var(--shadow-sm);
}
.struct-t{ font-family:var(--ff-display); font-weight:600; font-size:1.2rem; color:var(--navy); margin-bottom:10px; text-align:center; }
.st-flow{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:10px; }
.st-step{
flex:1 1 180px; display:flex; align-items:center; gap:10px;
background:var(--surface); border:1px solid var(--rule);
border-radius:var(--radius-sm); padding:9px 12px;
}
.st-num{
flex:none; width:34px; height:34px; border-radius:999px;
display:grid; place-items:center; font-weight:700; color:#fff;
background:var(--navy);
}
.st-lbl{ font-size:.85rem; line-height:1.55; color:var(--ink); }
.struct p{ margin:0; font-size:.88rem; color:var(--ink-soft); text-align:center; }
/* =========================================================
QURAN full text
========================================================= */
.quran-full{ }
.q-head{ text-align:center; margin:10px 0 12px; }
.q-title{ font-family:var(--ff-display); font-weight:600; font-size:clamp(1.4rem,3vw,1.65rem); color:var(--navy); }
.q-title .q-en{ font-family:var(--ff-ar); color:var(--gold); font-size:.7em; display:block; margin-top:2px; }
.q-sub{ font-size:.85rem; color:var(--ink-soft); margin-top:6px; }
.q-bism{
font-family:var(--ff-ar); text-align:center; color:var(--navy);
font-size:clamp(1.2rem,4.2vw,1.54rem); line-height:1.9; margin:10px 0 14px;
padding:8px 0; border-block:1px solid var(--rule); position:relative;
}
.q-row{
background:var(--surface); border:1px solid var(--rule-soft);
border-radius:var(--radius-sm); padding:10px 12px 9px; margin-bottom:8px;
box-shadow:var(--shadow-sm); transition:.2s;
}
.q-row:hover{ border-color:var(--rule); }
.q-ar{
font-family:var(--ff-ar); font-size:clamp(1.14rem,3.8vw,1.44rem);
line-height:1.92; color:var(--navy); text-align:justify; word-spacing:.03em;
}
.q-fa{
font-size:.8rem; line-height:1.66; color:var(--ink-soft);
margin-top:7px; padding-top:7px; border-top:1px dashed var(--rule);
text-align:justify;
}
.q-fa .q-n, .q-ar .q-n{ color:var(--gold); font-weight:700; font-family:var(--ff-body); }
.q-ar .ay-n{ color:var(--navy); }
/* =========================================================
TABLES (Bazargan)
========================================================= */
.pane table{
width:100%; border-collapse:collapse; margin:14px 0; font-size:.77rem;
background:var(--surface); border-radius:var(--radius-sm); overflow:hidden;
box-shadow:var(--shadow-sm); border:1px solid var(--rule);
}
.pane thead th{
background:var(--navy);
color:var(--gold-soft); font-weight:600; padding:6px 9px; text-align:start; line-height:1.45;
}
.pane tbody td{ padding:5px 9px; border-top:1px solid var(--rule-soft); color:var(--ink); vertical-align:top; line-height:1.5; }
.pane tbody tr:nth-child(even){ background:var(--surface-soft); }
/* =========================================================
SESSIONS — each session a beautiful separate section
========================================================= */
#sessions{ padding-top:8px; }
.ses{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ses-item{
background:var(--surface);
border:1px solid var(--rule);
border-radius:var(--radius);
box-shadow:var(--shadow-sm);
overflow:hidden;
transition:box-shadow .25s, border-color .25s, transform .25s;
counter-increment:ses;
position:relative;
}
.ses-item::before{ content:none; } /* no decoration beside the session number */
.ses-item.open{ box-shadow:var(--shadow-md); border-color:var(--gold); transform:translateY(-1px); }
.ses-item.open::before{ opacity:1; }
.ses-head{
width:100%; text-align:start; cursor:pointer;
display:flex; align-items:center; gap:14px;
background:transparent; border:0; appearance:none;
font-family:var(--ff-body); color:var(--navy);
padding:12px 18px; min-height:0; /* symmetric so number/title align with player & note below */
}
.ses-head::before{ /* session number medallion */
content:counter(ses,decimal);
flex:none; width:36px; height:36px; border-radius:10px;
display:grid; place-items:center;
font-weight:700; font-size:.92rem; color:#fbf3e2;
background:var(--navy);
box-shadow:none;
font-feature-settings:"ss01";
}
.ses-chev{ display:none; } /* replaced by css chevron */
.ses-t{
flex:1; font-family:var(--ff-display); font-weight:600;
font-size:1.06rem; line-height:1.3; color:var(--navy);
}
.ses-head::after{ /* +/− drawn as bars (perfectly centred, no glyph offset) */
content:""; flex:none; width:28px; height:28px; border-radius:999px;
border:1px solid var(--rule); transition:.25s;
background:
linear-gradient(var(--gold),var(--gold)) center/11px 2px no-repeat,
linear-gradient(var(--gold),var(--gold)) center/2px 11px no-repeat;
}
.ses-item.open .ses-head::after{ /* horizontal bar only = − */
background:
linear-gradient(var(--gold),var(--gold)) center/11px 2px no-repeat;
background-color:var(--gold-ghost);
}
.ses-body{
max-height:0; overflow:hidden;
transition:max-height .45s ease;
}
.ses-item.open .ses-body{ max-height:6000px; }
.ses-body > *{ margin-inline:18px; }
.ses-btns{
display:flex; flex-wrap:wrap; gap:8px;
padding-top:2px; margin-bottom:12px;
}
.ses-btn{
display:inline-flex; align-items:center; gap:.45em;
font-size:.84rem; font-weight:600; padding:9px 14px;
border-radius:999px; border:1px solid var(--rule);
background:var(--surface-soft); color:var(--navy-2); transition:.2s;
}
.ses-btn:hover{ border-color:var(--gold); background:var(--gold-ghost); transform:translateY(-1px); }
.ses-note{
background:var(--surface-soft);
border:1px solid var(--rule-soft);
border-radius:var(--radius-sm);
padding:12px 14px; margin-bottom:14px;
}
.ses-note p{ margin:0 0 .55em; font-size:.89rem; line-height:1.68; color:var(--ink); text-align:justify; }
.ses-note p:last-child{ margin-bottom:0; }
/* rich per-session detail (notes.json sections[]) under the summary */
.ses-detail{ margin-top:4px; }
.ses-detail .sd-h{
font-size:.92rem; font-weight:700; color:var(--navy);
margin:14px 0 .5em; padding-inline-start:10px;
border-inline-start:3px solid var(--navy); line-height:1.5;
}
.ses-detail p{ margin:0 0 .6em; font-size:.89rem; line-height:1.72; color:var(--ink); text-align:justify; }
.ses-detail .asst{ margin:10px 0; }
/* =========================================================
AUDIO PLAYER — pd-d9 طرحِ «لوح» — ۵ رنگبندیِ تاریک
CREAM:#f3ead8 | C_DIM:rgba(243,234,216,.5) | C_FAINT:rgba(243,234,216,.18)
========================================================= */
/* hidden audio element */
.aud-el{ display:none; }
/* ── inner audio widget (inside expanded pl-body) ── */
.aud{ display:flex; flex-direction:column; background:transparent; border:none; color:#f3ead8; }
/* seek row — LTR: [cur] [bar] [rem] */
.aud-r1{ display:flex; align-items:center; gap:8px; direction:ltr; padding:10px 14px 0; }
.aud-cur,.aud-rem{ flex:none; font-size:.7rem; color:rgba(243,234,216,.5); min-width:32px; text-align:center; }
.aud-seek{
flex:1 1 auto; min-width:40px; -webkit-appearance:none; appearance:none;
outline:none; cursor:pointer; direction:ltr; border:none; padding:0;
height:5px; border-radius:999px; background:rgba(243,234,216,.18);
}
.aud-seek::-webkit-slider-runnable-track{ border-radius:999px; background:transparent; height:5px; }
.aud-seek::-webkit-slider-thumb{
-webkit-appearance:none; width:13px; height:13px; border-radius:50%;
background:#f3ead8; box-shadow:0 1px 4px rgba(0,0,0,.4);
cursor:pointer; transition:transform .15s; margin-top:-4px;
}
.aud-seek::-webkit-slider-thumb:hover{ transform:scale(1.3); }
.aud-seek::-moz-range-thumb{ width:13px; height:13px; border-radius:50%; background:#f3ead8; border:none; }
/* controls row — [دانلود · همرسانی] ←→ [play] */
.aud-r2{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; padding:6px 14px 10px; }
.aud-dl{
flex:none; justify-self:start; display:inline-flex; align-items:center; gap:.35em;
font-size:.76rem; font-weight:600; color:rgba(243,234,216,.6);
background:none; border:none; cursor:pointer; text-decoration:none; transition:color .15s;
}
.aud-dl:hover{ color:#f3ead8; }
.aud-dl svg{ width:14px; height:14px; flex:none; }
.aud-rate{
flex:none; justify-self:center; cursor:pointer; font-family:var(--ff-body);
font-size:.76rem; font-weight:700; color:#f3ead8;
background:rgba(243,234,216,.14); border:1px solid rgba(243,234,216,.22);
border-radius:999px; padding:3px 10px; text-align:center; transition:.15s;
}
.aud-rate:hover{ border-color:rgba(243,234,216,.4); }
/* cream SQUARE play/pause inside expanded body (used in the جلسات list).
In پخش صوتی it's hidden — the header .pl-play square button drives playback there. */
.aud-pp{
flex:none; justify-self:end;
width:38px; height:38px; border-radius:11px; border:0; cursor:pointer;
background:#f3ead8; color:var(--pl-badge);
display:grid; place-items:center; transition:.15s;
}
.aud-pp:hover{ background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.pl-item .pl-body .aud-pp{ display:none; }
.ic-pp{ display:block; fill:currentColor; }
.aud-pp .ic-pp{ width:16px; height:16px; }
.pl-play .ic-pp{ width:18px; height:18px; }
.ses-note strong{ color:var(--navy); }
/* ===== now-playing bar — pd-d9 card palette ===== */
.npbar{
position:fixed; top:0; inset-inline:0; z-index:60; display:flex; flex-direction:column; align-items:stretch; gap:7px;
padding:calc(8px + env(safe-area-inset-top,0px)) 12px 9px;
background:#16263e; color:#f3ead8; border-bottom:2px solid var(--pl-badge, var(--gold,#c9a44a));
box-shadow:0 3px 18px rgba(0,0,0,.5); transform:translateY(-120%); transition:transform .26s ease;
}
.npbar.show{ transform:none; }
/* ── row 1: title (RTL) · time · close ── */
.np-r1{ display:flex; align-items:center; gap:10px; }
.np-title{ flex:1; min-width:0; font-family:var(--ff-display); font-weight:700; font-size:.95rem; line-height:1.25; color:#f3ead8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.np-title:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.np-title:focus-visible{ outline:2px solid #f3ead8; outline-offset:2px; border-radius:4px; }
.np-time{ flex:none; font-size:.78rem; color:rgba(243,234,216,.62); font-variant-numeric:tabular-nums; }
.np-x{ flex:none; width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:rgba(243,234,216,.55); font-size:1.3rem; line-height:1; cursor:pointer; }
.np-x:hover,.np-x:active{ color:#fff; background:rgba(243,234,216,.12); }
/* ── row 2: transport (forced LTR: ⏮ −۳۰ ▶ +۳۰ ⏭) · seek · actions ── */
.np-r2{ display:flex; align-items:center; gap:8px; }
.np-transport{ flex:none; direction:ltr; display:flex; align-items:center; gap:4px; }
.np-pp{ flex:none; width:38px; height:38px; border:0; border-radius:11px; background:#f3ead8; color:#16263e; display:grid; place-items:center; cursor:pointer; transition:.15s; }
.np-pp:hover{ background:#fff; }
.np-pp .ic-pp{ width:17px; height:17px; }
.np-skip,.np-prev,.np-next,.np-goto,.np-dl{ flex:none; width:34px; height:34px; border:0; border-radius:9px; background:transparent; color:rgba(243,234,216,.85); cursor:pointer; display:grid; place-items:center; transition:.15s; padding:0; }
.np-skip:hover,.np-prev:hover,.np-next:hover,.np-goto:hover,.np-dl:hover{ color:#fff; background:rgba(243,234,216,.14); }
.np-skip svg{ width:24px; height:24px; display:block; }
.np-prev svg,.np-next svg{ width:21px; height:21px; display:block; }
.np-goto svg,.np-dl svg{ width:20px; height:20px; display:block; }
.np-seek{ flex:1; min-width:54px; -webkit-appearance:none; appearance:none; height:4px; border-radius:3px; background:rgba(243,234,216,.22); cursor:pointer; direction:ltr; }
.np-seek::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:13px; height:13px; border-radius:50%; background:#f3ead8; margin-top:-4.5px; }
.np-seek::-moz-range-thumb{ width:13px; height:13px; border:0; border-radius:50%; background:#f3ead8; }
.np-rate{ flex:none; font-family:var(--ff-body); font-size:.74rem; font-weight:700; color:#f3ead8; background:rgba(243,234,216,.14); border:1px solid rgba(243,234,216,.22); border-radius:999px; padding:3px 9px; cursor:pointer; transition:.15s; font-variant-numeric:tabular-nums; }
.np-rate:hover{ border-color:rgba(243,234,216,.4); }
body.np-on{ padding-top:calc(94px + env(safe-area-inset-top,0px)); }
body.np-on .topbar{ display:none; }
body.np-on .tabs{ top:calc(94px + env(safe-area-inset-top,0px)); }
@media (max-width:430px){
.npbar{ gap:6px; padding-inline:9px; }
.np-transport{ gap:2px; }
.np-skip,.np-prev,.np-next,.np-goto,.np-dl{ width:32px; height:32px; }
.np-rate{ padding:3px 7px; }
body.np-on{ padding-top:calc(90px + env(safe-area-inset-top,0px)); }
body.np-on .tabs{ top:calc(90px + env(safe-area-inset-top,0px)); }
}
/* ===== sharing affordances ===== */
/* whole-page share chip in the hero */
.head-share{
position:static; display:inline-flex; align-items:center; gap:.42em;
margin:14px auto 0; width:fit-content;
font-family:var(--ff-body); font-size:.8rem; font-weight:600; letter-spacing:.01em;
color:var(--gold-soft); padding:7px 16px;
background:linear-gradient(rgba(216,190,138,.16),rgba(216,190,138,.08));
border:1px solid rgba(216,190,138,.45); box-shadow:0 1px 0 rgba(0,0,0,.06) inset;
border-radius:999px; cursor:pointer; transition:.2s;
}
.head-share:hover{ background:rgba(216,190,138,.24); color:#fff; border-color:rgba(216,190,138,.72); }
.head-share svg{ width:15px; height:15px; flex:none; }
/* per-section share icon (inside each analysis chapter heading) */
h2[id^="sec-"]{ position:relative; }
.sec-share{
vertical-align:middle; margin-inline-start:.5em; padding:3px;
width:28px; height:28px; border:0; border-radius:7px;
background:transparent; color:var(--ink-soft); cursor:pointer;
opacity:.5; transition:.15s; -webkit-appearance:none; appearance:none;
}
.sec-share:hover{ opacity:1; color:var(--navy); background:rgba(0,0,0,.05); }
.sec-share svg{ width:16px; height:16px; display:inline-block; vertical-align:middle; }
/* per-audio share (sits next to دانلود inside the player card) */
.aud-left{ display:inline-flex; align-items:center; gap:14px; justify-self:start; }
.aud-share{
display:inline-flex; align-items:center; gap:.35em;
font-family:var(--ff-body); font-size:.76rem; font-weight:600;
color:rgba(243,234,216,.6); background:none; border:none; cursor:pointer; transition:color .15s;
}
.aud-share:hover{ color:#f3ead8; }
.aud-share svg{ width:14px; height:14px; flex:none; }
/* copied-link toast (shown when navigator.share is unavailable) */
.dt-toast{
position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px));
transform:translateX(-50%) translateY(12px); z-index:120;
background:rgba(21,41,78,.96); color:#f3ead8;
font-family:var(--ff-body); font-size:.86rem; font-weight:600;
padding:10px 20px; border-radius:999px; box-shadow:0 6px 24px rgba(0,0,0,.4);
opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.dt-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
/* =========================================================
پلیرِ جلسه — pd-d9 طرحِ «لوح» — card + list
========================================================= */
.plist-wrap{ padding-top:4px; }
.plist-hint{ font-size:.85rem; color:var(--ink-soft); margin:0 0 14px; }
.plist{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
/* ── card shell ── */
.pl-item{
background:var(--pl-card);
border-radius:12px; overflow:hidden;
border:none; transition:box-shadow .2s;
}
.pl-item.open{ box-shadow:0 8px 32px rgba(0,0,0,.5); }
/* ── card header button ── */
.pl-head{
width:100%; min-height:62px; display:flex; align-items:stretch;
text-align:start; background:transparent; border:0; cursor:pointer;
padding:0; font-family:var(--ff-body);
}
/* cream badge — RTL start (right side), full height, bold session number */
.pl-num{
flex:none; width:62px;
background:#f3ead8; color:var(--pl-badge);
display:grid; place-items:center;
font-weight:900; font-size:1.75rem;
font-family:var(--ff-display); letter-spacing:-.02em;
}
/* session title */
.pl-name{
flex:1; min-width:0;
display:flex; align-items:center;
padding:10px 14px;
font-family:var(--ff-display); font-weight:700;
font-size:.9rem; line-height:1.35;
color:#f3ead8;
}
/* the single play/pause button — RTL end (left side) with separator border */
.pl-play{
flex:none; width:54px;
display:grid; place-items:center;
background:rgba(243,234,216,.08);
border:none;
border-inline-start:1px solid rgba(243,234,216,.18);
color:#f3ead8; cursor:pointer; transition:background .15s;
}
.pl-play:hover,
.pl-item.open .pl-play{ background:rgba(243,234,216,.2); }
/* ── expanded body ── */
.pl-body{ max-height:0; overflow:hidden; transition:max-height .38s ease; }
.pl-item.open .pl-body{ max-height:260px; border-top:1px solid rgba(243,234,216,.1); }
/* =========================================================
RESPONSIVE — mobile bottom nav bar
========================================================= */
@media (max-width:720px){
body{ line-height:1.52; padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
/* on phones the horizontal strip is replaced by a compact dropdown (.tabmenu) */
.tabs{ display:none; }
.tabmenu{ display:block; position:sticky; top:0; z-index:50; margin:0; padding:8px 12px;
background:rgba(247,239,224,.96); backdrop-filter:blur(12px) saturate(1.2);
-webkit-backdrop-filter:blur(12px) saturate(1.2); border-bottom:1px solid var(--rule); }
.tm-trig{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5em;
background:var(--navy); color:#fbf3e2; border:0; border-radius:12px; padding:11px 16px;
font-family:var(--ff-display); font-weight:700; font-size:1.05rem; cursor:pointer; }
.tm-cur{ display:inline-flex; align-items:center; gap:.2em; min-width:0; }
.tm-cur .t-rest{ display:inline; } .tm-cur .t-ai{ vertical-align:-.24em; }
.tm-caret{ transition:transform .2s; opacity:.85; }
.tabmenu.open .tm-caret{ transform:rotate(180deg); }
.tm-panel{ display:none; position:absolute; inset-inline:12px; margin-top:6px;
background:var(--surface); border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow-md); overflow:hidden; z-index:60; }
.tabmenu.open .tm-panel{ display:block; }
.tm-item{ display:block; width:100%; text-align:start; background:transparent; border:0;
border-bottom:1px solid var(--rule-soft); padding:13px 16px; font-family:var(--ff-display);
font-weight:600; font-size:1.05rem; color:var(--navy); cursor:pointer; }
.tm-item .t-rest{ display:inline; } .tm-item .t-ai{ vertical-align:-.24em; }
.tm-item.on{ background:var(--gold-ghost); }
.tm-nav{ display:flex; }
.tm-nav a{ flex:1; text-align:center; padding:13px; font-size:.92rem; font-weight:700;
color:var(--gold); text-decoration:none; background:var(--surface-soft); }
.tm-nav a:first-child{ border-inline-end:1px solid var(--rule); }
.tab{
flex:0 1 auto; min-width:0; gap:0;
padding:9px 18px; min-height:42px; border:1px solid transparent; border-radius:11px;
font-family:var(--ff-display); font-size:1rem; font-weight:600; line-height:1.2; text-align:center;
color:var(--ink-soft); background:transparent;
}
.tab .t-label{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t-rest{ display:none; }
.tab.active{ color:#fbf3e2; background:var(--navy); border-color:var(--navy-deep); }
body.nav-down .tabs{ transform:translateY(-115%); }
body.tb-shown .tabmenu{ top:46px; } /* revealed top bar sits above the tab menu */
.panes{ padding:10px 16px 40px; }
.ayah-box{ padding:9px 10px 8px; }
.ses-body > *{ margin-inline:16px; }
.ses-head{ padding:11px 16px; gap:10px; min-height:0; } /* symmetric → aligns with player/note */
.ses-head::before{ width:32px; height:32px; font-size:.85rem; border-radius:9px; }
.ses-item::before{ top:27px; width:13px; height:13px; inset-inline-start:1px; } /* logo centred on the (shorter) mobile header */
.ses-t{ font-size:1rem; }
.ayah-box{ padding:9px 10px 8px; }
.st-step{ flex:1 1 100%; }
.pane table{ font-size:.7rem; }
.pane thead th, .pane tbody td{ padding:4px 6px; line-height:1.45; }
}
/* scrollbars */
.sm-track::-webkit-scrollbar{ height:6px; }
.sm-track::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:3px; }
/* selection */
::selection{ background:rgba(176,132,52,.25); color:var(--navy-deep); }
/* reduced motion */
@media (prefers-reduced-motion:reduce){
*{ animation:none !important; scroll-behavior:auto !important; }
}
/* ===== text-size control (A+ / A−) — lives inside the collapsing top bar ===== */
.tb-fc{
flex:none; display:inline-flex; align-items:center; direction:ltr;
border-radius:10px; overflow:hidden; border:1px solid var(--rule); background:var(--surface);
}
.fc-btn{
appearance:none; border:0; background:transparent; cursor:pointer;
width:38px; height:32px; color:var(--navy); font-weight:700; direction:ltr;
display:grid; place-items:center; transition:.15s; font-family:var(--ff-body);
}
.fc-btn:first-child{ font-size:1.02rem; }
.fc-btn:last-child{ font-size:.82rem; border-inline-start:1px solid var(--rule-soft); }
.fc-btn:hover{ background:var(--gold-ghost); color:var(--gold); }
/* ===== «کتابِ مقدس» tab (مسیحیت page) — a tab-styled link to the Bible reader ===== */
.tab.tab-nav{ text-decoration:none; }
.tab.tab-nav .t-main{ color:var(--gold); }
/* ===== collapsing top bar (reveals on scroll-up) ===== */
.topbar{
position:fixed; top:0; left:0; right:0; z-index:80;
height:46px; display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:0 14px;
background:rgba(247,239,224,.93); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
border-bottom:1px solid var(--rule);
transform:translateY(-100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
box-shadow:none;
}
body.tb-shown .topbar{ transform:none; }
.tb-group{ display:flex; align-items:baseline; gap:.55em; min-width:0; }
.tb-title{ font-family:var(--ff-display); font-weight:600; font-size:1.18rem; color:var(--navy); cursor:pointer; white-space:nowrap; }
.tb-tab{ font-size:.78rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-tab::before{ content:"\00b7 "; color:var(--gold); }
@media (min-width:721px){
/* keep top tabs tidy */
.tabs{ border-radius:0 0 16px 16px; box-shadow:var(--shadow-sm); }
body.tb-shown .tabs{ top:46px; }
body.nav-down .tabs{ transform:translateY(-175%); }
}
/* =========================================================
HOME — surah list
========================================================= */
.home-wrap{ max-width:62rem; margin:0 auto; padding:34px 18px 96px; }
.home-intro{ text-align:center; color:var(--ink-soft); max-width:42rem; margin:0 auto 26px; font-size:1.02rem; line-height:1.95; }
.section-label{
display:flex; align-items:center; justify-content:center; gap:16px;
margin:14px 0 24px; color:var(--gold);
font-family:var(--ff-display); font-size:1.5rem; font-weight:600;
}
.section-label::before, .section-label::after{
content:""; height:1px; flex:1; max-width:130px;
background:linear-gradient(90deg,transparent,var(--rule));
}
.section-label::after{ background:linear-gradient(90deg,var(--rule),transparent); }
.surah-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:16px; }
.surah-card{
display:block; position:relative; overflow:hidden; text-align:center;
background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
padding:24px 22px 20px; box-shadow:var(--shadow-sm); transition:.25s;
}
.surah-card::after{
content:""; position:absolute; inset-inline-end:-24px; top:-24px;
width:116px; height:116px; background:var(--eslimi); background-size:54px 54px; opacity:.08;
}
.surah-card:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:var(--shadow-md); }
.sc-no{
position:relative; z-index:1; display:inline-grid; place-items:center;
width:48px; height:48px; border-radius:14px; margin:0 auto 12px;
color:#fbf3e2; font-weight:700; font-size:1.05rem;
background:var(--navy);
box-shadow:none;
}
.sc-name{ position:relative; z-index:1; font-family:var(--ff-display); font-weight:600; font-size:1.35rem; color:var(--navy); line-height:1.15; }
.sc-meta{ position:relative; z-index:1; font-size:.85rem; color:var(--ink-soft); margin-top:8px; }
.surah-card.soon{ pointer-events:none; opacity:.6; }
.surah-card.soon .sc-no{ background:var(--gold-ghost); color:var(--gold); box-shadow:inset 0 0 0 1px var(--rule); }
.surah-card.soon .sc-name{ color:var(--ink-faint); }
/* =========================================================
MATN — single session text page
========================================================= */
.matn-wrap{ max-width:46rem; margin:0 auto; padding:8px 18px 96px; }
.matn-wrap > .matn-lead{ text-align:center; color:var(--ink-soft); font-size:.95rem; line-height:1.9; margin:26px auto 8px; max-width:38rem; }
.matn-body{ margin-top:18px; }
.matn-body h2{
font-family:var(--ff-display); font-weight:600; color:var(--navy);
font-size:clamp(1.18rem,2.8vw,1.32rem); margin:28px 0 10px;
padding-inline-start:18px; position:relative; scroll-margin-top:90px;
}
.matn-body h2::before{ content:""; position:absolute; inset-inline-start:0; top:.18em; bottom:.18em; width:5px; border-radius:3px; background:var(--gold); }
.matn-body p{ margin:0 0 1.1em; text-wrap:pretty; text-align:justify; }
.placeholder{
border:1.5px dashed var(--rule); border-radius:var(--radius); margin:26px 0;
background:repeating-linear-gradient(45deg,var(--surface-soft),var(--surface-soft) 11px,var(--surface) 11px,var(--surface) 22px);
padding:34px 22px; text-align:center;
}
.placeholder .ph-t{ font-family:var(--ff-body); font-size:.86rem; color:var(--ink-soft); letter-spacing:.01em; }
.placeholder .ph-s{ display:block; margin-top:6px; font-size:.78rem; color:var(--ink-faint); }
/* =================== LIST / LEDGER (from surah list) =================== */
/* =================== LIST / LEDGER (from surah list) =================== */
/* ===== Book-style index (ledger) ===== */
body{ background:var(--paper); }
.idx-head{
text-align:center; background:var(--navy);
border-bottom:2px solid var(--gold); padding:40px 22px 34px;
box-shadow:none;
}
.idx-head{ position:relative; overflow:hidden; }
.idx-head > *{ position:relative; z-index:1; }
.idx-back{
position:absolute; inset-inline-start:18px; top:18px; z-index:2; white-space:nowrap;
display:inline-flex; align-items:center; gap:.4em;
font-family:var(--ff-body); font-size:.82rem; font-weight:500;
color:var(--gold-soft); border:1px solid rgba(216,190,138,.4);
border-radius:999px; padding:6px 13px; transition:.25s; text-decoration:none;
}
.idx-back:hover{ background:rgba(216,190,138,.14); color:#fff; }
.idx-orn{ color:var(--gold); font-size:1.7rem; line-height:1; opacity:.9; }
.idx-head h1{ font-family:var(--ff-display); font-weight:700; font-size:clamp(1.5rem,4vw,1.8rem); color:#fff; margin:.3rem 0 .3rem; line-height:1.2; }
.idx-head p{ margin:0; color:var(--gold-soft); font-size:.92rem; letter-spacing:.01em; }
.idx-head .idx-stat{ margin-top:.7rem; font-size:.84rem; color:rgba(255,255,255,.66); }
.idx-head .idx-stat .num{ color:#fff; font-weight:600; }
.idx-wrap{ max-width:40rem; margin:0 auto; padding:0 22px 80px; }
.idx-search{ position:relative; margin:-26px auto 26px; max-width:34rem; }
.idx-search input{
width:100%; font-family:var(--ff-body); font-size:1rem; color:var(--ink);
padding:14px 48px 14px 18px; border-radius:999px; border:1px solid var(--rule);
background:var(--surface); box-shadow:none; transition:.25s;
}
.idx-search input::placeholder{ color:var(--ink-faint); }
.idx-search input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-ghost); }
.idx-search svg{ position:absolute; inset-inline-end:17px; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--gold); opacity:.75; pointer-events:none; }
.ledger{ display:flex; flex-direction:column; }
.le-row{
display:flex; align-items:baseline; gap:12px; padding:13px 12px;
border-bottom:1px dotted var(--rule-soft); color:inherit; transition:background .2s,padding .2s;
}
.le-name{ flex:none; font-family:var(--ff-display); font-weight:700; font-size:1.25rem; color:var(--navy); line-height:1.15; }
.le-dots{ flex:1; border-bottom:1.5px dotted var(--rule); transform:translateY(-5px); min-width:18px; }
.le-ses{ flex:none; font-family:var(--ff-display); font-weight:700; font-size:1.25rem; color:var(--navy); white-space:nowrap; line-height:1; }
.le-year{ font-family:var(--ff-display); font-weight:700; color:#454b61; }
.le-row.live{ background:var(--gold-ghost); border-radius:12px; border-bottom-color:transparent; }
a.le-row{ cursor:pointer; }
a.le-row:hover{ background:var(--gold-ghost); border-radius:12px; border-bottom-color:transparent; padding-inline:16px; }
a.le-row:hover .le-name{ color:var(--navy-2); }
.idx-empty{ display:none; text-align:center; color:var(--ink-soft); padding:34px 0 10px; }
.idx-empty.show{ display:block; }
@media(max-width:480px){
.le-name{ font-size:1.15rem; }
.le-ses{ font-size:1.05rem; }
}
/* =========================================================
CATEGORY CARD GRID — list pages, harmonised with the archive index
========================================================= */
.cat-wrap{ max-width:46rem; margin:0 auto; padding:30px clamp(16px,4vw,28px) 64px; }
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(248px,1fr)); gap:14px; }
.cat-card{ position:relative; overflow:hidden; border-radius:16px; min-height:150px; display:flex; flex-direction:column; }
a.cat-card{ text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--rule); padding:20px 22px; transition:border-color .2s; }
a.cat-card::before{ content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--navy); }
a.cat-card:hover{ border-color:var(--navy); }
.cat-card .cc-kicker{ display:inline-flex; align-items:center; gap:.5em; font-size:.72rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
.cat-card .cc-kicker::before{ content:""; width:7px; height:7px; border-radius:999px; background:var(--navy); }
.cat-card .cc-title{ font-family:var(--ff-display); font-weight:800; font-size:1.3rem; line-height:1.15; letter-spacing:-.01em; color:var(--ink); }
.cat-card .cc-desc{ font-size:.88rem; color:var(--ink-soft); margin-top:5px; line-height:1.5; }
.cat-card .cc-foot{ margin-top:auto; padding-top:16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cat-card .cc-stat{ font-size:.85rem; color:var(--ink-soft); font-weight:500; }
.cat-card .cc-stat b{ color:var(--navy); font-family:var(--ff-display); font-weight:800; font-size:1.1rem; margin-inline-end:.3em; }
.cat-card .cc-arrow{ font-family:var(--ff-display); font-size:1.5rem; color:var(--navy); transition:transform .2s; }
a.cat-card:hover .cc-arrow{ transform:translateX(-5px); }
.cat-card--soon{ background:rgba(var(--navy-rgb),.66); padding:24px 22px; justify-content:center; align-items:flex-start; cursor:default; user-select:none; }
.cat-card--soon .cc-title{ color:#f4ecda; }
/* =========================================================
COLLECTION INDEX (surah list + section index) — spiral hero + card grid
========================================================= */
.s-head .mark{ width:44px; height:44px; margin:0 auto 8px; color:var(--gold-soft); }
.coll-hero{ position:relative; overflow:hidden; text-align:center; background:var(--navy);
border-bottom:2px solid var(--gold); padding:clamp(16px,3.5vw,28px) 20px clamp(14px,3vw,22px); }
.coll-hero > *{ position:relative; z-index:1; }
.coll-hero .mark{ width:52px; height:52px; margin:0 auto 10px; color:var(--gold-soft); }
.coll-hero h1{ font-family:var(--ff-display); font-weight:800; color:#fdf8ec; margin:0;
font-size:clamp(1.55rem,4vw,1.85rem); line-height:1.15; letter-spacing:-.02em; }
.coll-count{ display:inline-block; margin-top:14px; font-size:.82rem; font-weight:600;
color:rgba(255,255,255,.72); border:1px solid rgba(216,190,138,.42); border-radius:999px; padding:5px 15px; }
.coll-count .num{ color:#fff; }
.coll-wrap{ max-width:62rem; margin:0 auto; padding:30px clamp(16px,4vw,28px) 72px; }
.coll-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,236px),1fr)); gap:15px; }
.coll-card{ position:relative; display:flex; flex-direction:column; min-height:140px;
background:var(--surface); border:1px solid var(--rule); border-radius:18px;
padding:20px 22px 16px; text-decoration:none; color:inherit; overflow:hidden;
transition:transform .2s cubic-bezier(.4,0,.2,1), border-color .2s, box-shadow .2s; }
.coll-card::before{ content:""; position:absolute; inset-inline:0; top:0; height:3px;
background:linear-gradient(90deg, var(--gold-soft), var(--gold)); }
.coll-card::after{ content:""; position:absolute; inset-inline-end:-30px; bottom:-30px; width:120px; height:120px;
background:var(--eslimi); background-size:54px 54px; opacity:.06; pointer-events:none; }
.coll-card:hover{ transform:translateY(-3px); border-color:var(--gold);
box-shadow:0 14px 34px -20px rgba(var(--navy-rgb),.55); }
.coll-name{ font-family:var(--ff-display); font-weight:700; font-size:1.35rem; color:var(--navy); line-height:1.15; }
.coll-meta{ margin-top:6px; font-size:.9rem; color:var(--ink-soft); }
.coll-meta .num{ color:var(--gold); font-weight:700; }
.coll-go{ margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:.35em;
font-size:.84rem; font-weight:600; color:var(--navy-2); }
.coll-rev{ color:var(--gold); font-weight:600; }
/* ---- list search ---- */
.list-search{ position:relative; max-width:30rem; margin:0 auto 16px; }
.list-search input{ width:100%; font-family:var(--ff-body); font-size:.95rem; color:var(--ink); padding:12px 44px 12px 16px; border-radius:12px; border:1px solid var(--rule); background:var(--surface); transition:.2s; }
.list-search input::placeholder{ color:var(--ink-faint); }
.list-search input:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(var(--navy-rgb),.12); }
.list-search svg{ position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; stroke:var(--ink-faint); pointer-events:none; }
/* ---- list toolbar: sort dropdown + direction + view (compact, mobile-first, one tidy row) ---- */
.list-bar{ display:flex; align-items:center; gap:9px; max-width:30rem; margin:0 auto 18px; }
.sortsel{ position:relative; flex:1 1 auto; min-width:0; }
.sortsel-trig{ width:100%; display:flex; align-items:center; gap:8px; cursor:pointer;
font-family:var(--ff-body); font-size:.9rem; font-weight:600; color:var(--navy);
background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:11px 14px; transition:.15s; }
.sortsel-trig:hover, .sortsel.open .sortsel-trig{ border-color:var(--gold); }
.sortsel-trig > svg{ width:17px; height:17px; flex:none; color:var(--gold); }
.ss-cur{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:start; }
.ss-caret{ flex:none; color:var(--ink-faint); font-size:.75rem; transition:transform .2s; }
.sortsel.open .ss-caret{ transform:rotate(180deg); }
.sortsel-panel{ position:absolute; z-index:20; inset-inline:0; top:calc(100% + 6px);
background:var(--surface); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow-md); padding:5px; display:none; }
.sortsel.open .sortsel-panel{ display:block; }
.sortsel-panel button{ display:block; width:100%; text-align:start; border:0; background:transparent; cursor:pointer;
font-family:var(--ff-body); font-size:.9rem; color:var(--ink-soft); padding:10px 12px; border-radius:8px; transition:.12s; }
.sortsel-panel button:hover{ background:var(--surface-soft); color:var(--navy); }
.sortsel-panel button.on{ background:rgba(var(--navy-rgb),.07); color:var(--navy); font-weight:700; }
.lc-dir{ flex:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--rule); background:var(--surface); color:var(--navy); cursor:pointer; display:grid; place-items:center; transition:.15s; }
.lc-dir:hover{ border-color:var(--gold); }
.lc-dir svg{ width:18px; height:18px; transition:transform .2s; }
.lc-dir[data-dir="asc"] svg{ transform:rotate(180deg); }
.lc-view{ flex:none; display:inline-flex; background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:3px; gap:2px; }
.lc-view button{ border:0; background:transparent; cursor:pointer; color:var(--ink-faint); padding:7px 9px; border-radius:9px; display:grid; place-items:center; transition:.15s; }
.lc-view button svg{ width:18px; height:18px; }
.lc-view button:hover{ color:var(--navy); }
.lc-view button.on{ background:var(--navy); color:#fbf3e2; }
/* ---- list (compact) view ---- */
.coll-grid.list{ grid-template-columns:1fr; gap:8px; }
.coll-grid.list .coll-card{ flex-direction:row; align-items:center; min-height:0; padding:13px 16px; gap:12px; }
.coll-grid.list .coll-card::after{ display:none; }
.coll-grid.list .coll-name{ font-size:1.3rem; flex:none; }
.coll-grid.list .coll-meta{ margin:0; }
.coll-grid.list .coll-go{ margin-inline-start:auto; margin-top:0; padding-top:0; }
@media (max-width:560px){
.coll-grid{ grid-template-columns:1fr; } .coll-name{ font-size:1.25rem; }
.list-bar{ gap:7px; } .sortsel-trig{ padding:11px 12px; } .lc-dir{ width:44px; height:44px; }
.coll-grid.list .coll-go{ display:none; }
}
/* =========================================================
ASSISTANT SIDE-BOX (.asst) — a "marginalia / added gloss"
deliberately distinct from .note: cooler navy-tinted paper,
dashed rule, hand-margin feel, small kicker label.
========================================================= */
.asst{
position:relative;
margin:20px 0;
padding:15px 17px 15px 19px;
background:
rgba(var(--navy-rgb),.05);
border:1px dashed rgba(var(--navy-rgb),.30);
border-inline-start:3px solid var(--navy-2);
border-radius:var(--radius-sm);
box-shadow:none;
}
.asst::after{ /* faint margin tick, like a manuscript gloss */
content:""; position:absolute; inset-inline-start:-3px; top:14px; bottom:14px;
width:3px; border-radius:3px;
background:repeating-linear-gradient(180deg,var(--navy-2),var(--navy-2) 5px,transparent 5px,transparent 9px);
opacity:.0;
}
.asst-k{
display:inline-flex; align-items:center; gap:.45em;
font-family:var(--ff-body); font-weight:600; font-size:.72rem;
letter-spacing:.04em; color:var(--navy-2);
background:rgba(var(--navy-rgb),.08);
border:1px solid rgba(var(--navy-rgb),.18);
border-radius:999px; padding:3px 11px 4px; margin-bottom:8px;
}
.asst-k::before{
content:""; width:13px; height:13px; flex:none; margin-top:-1px;
background:var(--navy-2);
-webkit-mask:center/contain no-repeat var(--asst-icon);
mask:center/contain no-repeat var(--asst-icon);
--asst-icon:url("data:image/svg+xml;utf8,");
}
.asst-t{
font-family:var(--ff-display); font-weight:600; font-size:1.18rem;
color:var(--navy); line-height:1.3; margin-bottom:2px;
}
.asst p{ margin:0 0 .5em; font-size:.9rem; line-height:1.62; color:var(--ink-soft); }
.asst p:last-child{ margin-bottom:0; }
.asst p strong{ color:var(--navy); }
.asst em{ color:var(--navy-2); font-style:italic; }
.asst hr{ border:0; border-top:1px dashed rgba(var(--navy-rgb),.18); margin:9px 0; }
.asst .asst-q{ font-family:var(--ff-display); font-weight:500; font-size:1.02rem; color:var(--navy-2); }
/* per-topic faint motifs removed by request */
.tmotif{ display:none !important; }
@media (prefers-reduced-motion: no-preference){
.pane.active .asst{ animation:rise .55s ease both; }
}
/* =========================================================
PER-SECTION COLOR THEMES — shift only the "navy" brand
colour (hero + headings + accents). Gold & cream stay.
Apply on e.g. .
========================================================= */
body.t-crimson{ /* ادیان + متن مقدس — زرشکی تیره */
--navy:#5e1f2f; --navy-2:#7c2a3d; --navy-deep:#3f1320; --navy-rgb:94,31,47;
--pl-frame:#120408; --pl-card:#1e0a14; --pl-badge:#4a0e1e;
}
body.t-teal{ /* سخنرانیهای موضوعی — طوسیِ پررنگ */
--navy:#3a3e45; --navy-2:#4c515a; --navy-deep:#26282d; --navy-rgb:58,62,69;
--pl-frame:#0c0c10; --pl-card:#17171e; --pl-badge:#242430;
}
body.t-plum{ /* روانکاوی و فرهنگ — بادمجانیِ تیره */
--navy:#3a2153; --navy-2:#4d2f6b; --navy-deep:#241336; --navy-rgb:58,33,83;
--pl-frame:#090612; --pl-card:#140c24; --pl-badge:#261640;
}
body.t-olive{ /* منابع تکمیلی — زیتونیِ کهنه */
--navy:#34401d; --navy-2:#475628; --navy-deep:#212a12; --navy-rgb:52,64,29;
--pl-frame:#050e0a; --pl-card:#0c1c16; --pl-badge:#133020;
}
body.t-mustard{ /* آرشیو اصلی — خردلیِ تیره */
--navy:#6a5214; --navy-2:#83661b; --navy-deep:#453507; --navy-rgb:106,82,20;
--pl-frame:#07111e; --pl-card:#0e1e32; --pl-badge:#15294e;
}
body.t-royal{ /* موضوعاتِ قرآنی — آبیِ سلطنتی */
--navy:#23406e; --navy-2:#2f5490; --navy-deep:#16284a; --navy-rgb:35,64,110;
--pl-frame:#070d18; --pl-card:#0e1a30; --pl-badge:#15294e;
}
:root{ --line:rgba(21,41,78,.10); }
body{ background:var(--paper); padding-bottom:48px; }
.wrap{ max-width:64rem; margin:0 auto; padding:0 clamp(16px,4vw,32px); }
/* ===== dark header band (مثل بقیه صفحات) ===== */
.hero{ background:var(--navy); border-bottom:2px solid var(--gold); text-align:center; }
.hero__inner{ max-width:64rem; margin:0 auto; padding:26px clamp(16px,4vw,28px) 24px; }
.hero__mark{ width:64px; height:64px; margin:0 auto 8px; color:var(--gold-soft); }
.hero__brand{ margin-bottom:10px; }
.hero__brand span{ font-family:var(--ff-body); font-size:.84rem; font-weight:600; color:var(--gold-soft); letter-spacing:.04em; }
.hero h1{ font-family:var(--ff-display); font-weight:800; color:#fdf8ec; font-size:clamp(1.6rem,4.5vw,1.9rem); line-height:1.15; letter-spacing:-.02em; margin:0; }
.hero__sub{ margin:10px auto 0; color:var(--gold-soft); font-size:.88rem; font-weight:500; line-height:1.55; max-width:34em; }
.hero__count{ display:inline-block; margin-top:18px; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.72); border:1px solid rgba(216,190,138,.4); border-radius:999px; padding:6px 15px; }
.hero__count b{ color:#fff; }
/* ===== search (floats over band edge) ===== */
.search{ position:relative; margin:-26px auto 30px; max-width:32rem; z-index:5; }
.search input{ width:100%; font-family:var(--ff-body); font-size:.98rem; color:var(--ink); padding:14px 46px 14px 16px; border-radius:13px; border:1px solid var(--rule); background:var(--surface); transition:.2s; }
.search input::placeholder{ color:var(--ink-faint); }
.search input:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(var(--navy-rgb),.12); }
.search svg{ position:absolute; inset-inline-end:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--ink-faint); pointer-events:none; }
/* ===== ادامهٔ پخش (home) — a titled box; cards inspired by the pd-d9 player ===== */
.resume{ margin:6px 0 26px; background:var(--surface); border:1px solid var(--rule); border-radius:18px;
padding:13px 13px 15px; box-shadow:var(--shadow-sm); }
.resume-h{ display:flex; align-items:center; gap:.5em; font-family:var(--ff-display); font-weight:800;
font-size:1.04rem; color:var(--navy); margin:2px 4px 12px; }
.resume-ic{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:7px; background:var(--gold); color:#fff; font-size:.58rem; }
.resume-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:10px; }
/* each card paints itself with its SOURCE section palette (--pl-card / --pl-badge from RESUME_JS) */
/* self-contained DARK card with guaranteed light text — never depends on theme vars that
could resolve light on a light page-theme (was rendering washed-out / unreadable). */
.resume-card{ display:flex; align-items:center; gap:12px;
background:#16263e !important; color:#f3ead8 !important;
border-inline-start:4px solid var(--pl-badge,#caa052);
border:1px solid rgba(243,234,216,.16); border-radius:14px; padding:9px 11px; text-decoration:none;
transition:transform .18s, box-shadow .18s, border-color .18s; overflow:hidden; }
.resume-card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.32); border-color:rgba(243,234,216,.36); }
.resume-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.resume-sec{ font-size:.72rem; color:#dcc596 !important; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.resume-title{ font-family:var(--ff-display); font-weight:700; font-size:.98rem; color:#f7efdc !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.resume-bar{ height:4px; border-radius:3px; background:rgba(243,234,216,.18); overflow:hidden; margin-top:4px; direction:ltr; }
.resume-bar>span{ display:block; height:100%; background:#dcc596; }
.resume-meta{ flex:none; font-size:.74rem; color:rgba(247,239,220,.7) !important; font-weight:700; }
/* ===== bento grid ===== */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
/* each card carries its section palette via --c / --c-rgb */
.card-feat{
grid-column:1 / -1; display:grid; grid-template-columns:1.4fr .8fr; align-items:stretch;
text-decoration:none; color:inherit; position:relative; overflow:hidden;
background:rgba(var(--c-rgb),.09); border:1px solid rgba(var(--c-rgb),.28); border-radius:18px; transition:border-color .2s;
}
.card-feat::before{ content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--c); }
.card-feat:hover{ border-color:var(--c); }
.cf__body{ padding:14px 22px 14px; display:flex; flex-direction:column; justify-content:center; }
.cf__title{ font-family:var(--ff-display); font-weight:800; font-size:clamp(1.2rem,2.5vw,1.45rem); line-height:1.15; letter-spacing:-.02em; color:var(--ink); margin:0; }
.cf__desc{ margin:9px 0 12px; color:var(--ink-soft); font-size:.95rem; line-height:1.6; max-width:30em; }
.cf__btn{ margin-top:10px; align-self:flex-start; display:inline-flex; align-items:center; gap:.55em; background:var(--c); color:#fdf8ec; font-family:var(--ff-body); font-weight:700; font-size:.9rem; padding:8px 16px; border-radius:11px; transition:gap .22s; }
.card-feat:hover .cf__btn{ gap:.95em; }
.cf__stat{ border-inline-start:1px solid rgba(var(--c-rgb),.18); padding:12px 20px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:2px; background:rgba(var(--c-rgb),.14); }
.cf__num{ font-family:var(--ff-display); font-weight:900; font-size:clamp(2rem,4vw,2.7rem); line-height:.95; color:var(--c); letter-spacing:-.03em; }
.cf__num-lbl{ font-size:.9rem; font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
.cf__meta{ font-size:.8rem; color:var(--ink-faint); font-weight:500; padding-top:6px; border-top:1px solid rgba(var(--c-rgb),.16); }
.cf__meta b{ color:var(--ink-soft); font-weight:700; }
.hero__logo{ width:30px; height:30px; color:var(--gold-soft); display:block; flex:none; }
.hero__logo svg{ width:100%; height:100%; display:block; }
/* dormant section tiles — dark in each section colour, non-clickable */
.card-soon{ position:relative; overflow:hidden; background:rgba(var(--c-rgb),.66); border:0; border-radius:16px; padding:22px 20px; min-height:118px; display:flex; flex-direction:column; justify-content:center; cursor:default; user-select:none; }
.card-soon__title{ font-family:var(--ff-display); font-weight:700; font-size:1.4rem; line-height:1.2; color:#f4ecda; }
.empty{ display:none; grid-column:1 / -1; text-align:center; color:var(--ink-soft); padding:30px 0; }
.empty.show{ display:block; }
.foot{ margin-top:34px; padding-top:18px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:.78rem; }
@media(max-width:860px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){
.bento{ grid-template-columns:1fr; gap:12px; }
.card-feat{ grid-template-columns:1fr; }
.cf__body{ padding:12px 16px 10px; }
.cf__kicker{ margin-bottom:7px; }
.cf__title{ font-size:1.65rem; }
.cf__btn{ align-self:stretch; justify-content:center; margin-top:10px; padding:10px 16px; } /* full-width CTA — no floating/empty side */
.cf__stat{ border-inline-start:0; border-top:1px solid var(--line); flex-direction:row; align-items:center; gap:10px; padding:10px 16px; }
.cf__num{ font-size:2rem; line-height:1; }
.cf__num-lbl{ margin-bottom:0; }
.cf__meta{ margin-inline-start:auto; border-top:0; padding-top:0; text-align:end; }
}
/* =========================================================
PROJECT OVERRIDES (applied on top of the approved design)
========================================================= */
/* keep the Othman-Taha (Amiri Quran) script for Qur'an text — the design
maps --ff-ar to Estedad, which we want only for transliteration. */
:root{ --ff-quran:'Amiri Quran','Amiri','Markazi Text',serif; }
.ay-ar,.q-ar,.q-bism{ font-family:var(--ff-quran); }
.q-ar .q-n,.q-ar .ay-n{ font-family:var(--ff-body); }
/* surah ledger: rows whose تحلیل isn't ready yet — dim + non-clickable */
.ledger span.le-row{ cursor:default; }
.ledger span.le-row:hover{ background:none; border-radius:0; padding-inline:12px; }
.ledger .le-row:not(.live){ opacity:.7; }
.ledger .le-row:not(.live) .le-name{ color:var(--ink-soft); }
.ledger .le-row:not(.live) .le-ses{ color:var(--ink-faint); }
/* builder fallbacks */
.soon-note{ text-align:center; color:var(--ink-soft); padding:32px 8px; line-height:1.95; font-size:.96rem; }
.ses-note.muted{ color:var(--ink-faint); font-size:.88rem; background:var(--surface-soft); }
.le-empty,.idx-empty{ text-align:center; color:var(--ink-soft); padding:34px 0 10px; }
.le-empty[hidden]{ display:none; }
/* ═══ نوارِ چسبانِ بالا: مسیر (breadcrumb) + اندازهٔ فونت + بالای صفحه ═══ */
#dtbar{ position:fixed; top:0; inset-inline:0; z-index:9000; display:flex; align-items:center;
justify-content:space-between; gap:10px; padding:7px 13px;
background:rgba(22,18,12,.93); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
color:#f3ead8; border-bottom:1px solid rgba(202,160,82,.32);
transform:translateY(-115%); transition:transform .26s ease;
font:600 13px/1.45 'Inter','Estedad',system-ui,sans-serif; }
#dtbar.show{ transform:none; }
.dtb-crumbs{ display:flex; align-items:center; gap:5px; min-width:0; overflow:hidden; white-space:nowrap; }
.dtb-crumbs a{ color:#e8d9b6; text-decoration:none; opacity:.88; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; }
.dtb-crumbs a:hover{ opacity:1; text-decoration:underline; }
.dtb-cur{ color:#fff; font-weight:700; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.dtb-sep{ opacity:.5; flex:0 0 auto; }
.dtb-tools{ display:flex; gap:6px; flex:0 0 auto; }
.dtb-b{ background:rgba(243,234,216,.13); color:#f3ead8; border:1px solid rgba(243,234,216,.22);
border-radius:8px; padding:3px 9px; font:700 12px 'Inter',system-ui,sans-serif; cursor:pointer; line-height:1.3; }
.dtb-b:hover{ background:rgba(243,234,216,.24); }
/* اندازهٔ فونتِ محتوای خواندنی (تکظرفِ غیرتودرتو تا تجمیع نشود) */
.matn-body, .pane{ font-size:calc(1em * var(--dtfs,1)); }
/* ═══ تبِ «اسناد PDF» (جزوههای دانلودی) ═══ */
.pdf-intro{ margin:.2em 0 1em; color:var(--ink-soft,#555); }
.pdf-list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.pdf-list li{ margin:0; }
.pdf-link{ display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem;
border:1px solid rgba(0,0,0,.10); border-radius:12px; background:rgba(255,255,255,.55);
text-decoration:none; color:inherit; transition:border-color .2s, background .2s, transform .12s; }
.pdf-link:hover{ border-color:var(--gold,#b8893a); background:rgba(184,137,58,.07); transform:translateY(-1px); }
.pdf-ico{ font-size:1.25rem; line-height:1; }
.pdf-name{ font-weight:600; flex:1 1 auto; }
.pdf-sz{ font-size:.8em; color:var(--ink-soft,#777); font-variant-numeric:tabular-nums; }
/* ═══ عنوانِ زیرگروه در صفحهٔ بخش (ادیان و موضوعاتِ دینی) ═══ */
.coll-grp{ font:600 1.02rem/1.3 'Estedad',system-ui,sans-serif; color:var(--gold,#b8893a);
margin:1.6rem .2rem .7rem; padding-bottom:.4rem; border-bottom:1px solid rgba(184,137,58,.28);
display:flex; align-items:center; gap:.5rem; }
.coll-grp:first-child{ margin-top:.2rem; }
.coll-grp::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold,#b8893a); flex:0 0 auto; }
/* dars-goftarha: tabs read left-to-right (audio | matn | surah | nazm) */
nav.tabs{flex-direction:row-reverse;justify-content:flex-end}
.nazm-intro{font-size:.86rem;line-height:1.7;color:#7a6a4f;background:#f6efdf;border:1px solid #e2d3b3;border-radius:12px;padding:10px 14px;margin:0 0 14px}