@font-face {
font-family: 'Almarai';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/96e5c91ae2.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
@font-face {
font-family: 'Almarai';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/1cfc974a09.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;
}
@font-face {
font-family: 'Almarai';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/de48eb5348.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
@font-face {
font-family: 'Almarai';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/7ed77c77a0.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;
}
@font-face {
font-family: 'Almarai';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/fonts/d726cb60c9.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
@font-face {
font-family: 'Almarai';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/fonts/f9ccbe0554.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;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/49234c2014.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/cbc731f11a.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;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/6ff6f598a4.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/440128d86d.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;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/49234c2014.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/cbc731f11a.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;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/6ff6f598a4.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/440128d86d.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;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/49234c2014.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/cbc731f11a.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;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/6ff6f598a4.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/440128d86d.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;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/eb5d65a4cd.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/a17ad555ac.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/2099e886b2.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;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/eb5d65a4cd.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/a17ad555ac.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/2099e886b2.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;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/eb5d65a4cd.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/a17ad555ac.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/2099e886b2.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;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/eb5d65a4cd.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/a17ad555ac.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/2099e886b2.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 { --green-line: #2A6B55; color-scheme: dark; }
:root[data-theme="light"] { --cyan-soft: #EFE8FF; --cyan-line: #CDBBF5; --green-line: #B8E6D2; --red: #C42757; --red-soft: #FFE8F0; --red-line: #F5C2D4; --shadow: 0 6px 20px rgba(27,22,64,.08); color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.35; margin: 0; }
img { max-width: 100%; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.top { position: sticky; top: 0; z-index: 20; }
.top .wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
.logo { display: flex; align-items: baseline; gap: 5px; color: var(--text); }
.logo:hover { text-decoration: none; }
.logo .cursor { font-family: var(--mono); animation: blink 1.1s steps(1) infinite; }
.logo .pro { font-size: 13px; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.logo .cursor { animation: none; }
}
.topnav { display: none; gap: 4px; margin-inline-start: 12px; }
.topnav a { color: var(--muted); padding: 8px 12px; font-weight: 500; }
.topnav a:hover, .topnav a.on { color: var(--text); background: var(--card); text-decoration: none; }
.top-actions { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 44px; height: 44px; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn:hover { text-decoration: none; }
@media (min-width: 900px) {
.topnav { display: flex; }
body { padding-bottom: 32px; }
}
.bottomnav { position: fixed; z-index: 30; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: env(safe-area-inset-bottom); }
.bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); }
.bottomnav a:hover { text-decoration: none; }
@media (min-width: 900px) {
.bottomnav { display: none; }
}
main.wrap { padding-top: 20px; padding-bottom: 24px; }
.pad { padding: 16px; }
.hero-exam { background: var(--primary-soft); border: 1px solid var(--primary-line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.hero-exam .label { color: var(--primary-text); font-weight: 600; font-size: 13px; }
.countdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.countdown div { background: var(--bg); padding: 8px 0; text-align: center; }
.countdown b { display: block; font-family: var(--mono); }
.countdown span { font-size: 12px; color: var(--muted); }
.grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) {
.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tile { display: flex; flex-direction: column; gap: 8px; padding: 14px; color: var(--text); min-height: 100%; }
.tile:hover { text-decoration: none; border-color: var(--primary-line); }
.tile .foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-top: auto; }
.badge { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; background: var(--card2); color: var(--muted); flex: none; }
.chip-new { padding: 0 8px; font-weight: 600; font-size: 12px; }
:root[data-theme="light"] .chip-new { color: #FFFFFF; }
.chip { display: inline-block; font-size: 12px; border: 1px solid var(--line); padding: 1px 10px; color: var(--muted); }
.reviewed { font-size: 12px; }
:root[data-theme="light"] .c-violet { --c: #5A3BE0; --cbg: #EEE9FF; }
:root[data-theme="light"] .c-cyan { --c: #0B7F93; --cbg: #E0F6FA; }
:root[data-theme="light"] .c-green { --c: #0F8A57; --cbg: #E2F6EC; }
:root[data-theme="light"] .c-pink { --c: #C42747; --cbg: #FFE8EC; }
:root[data-theme="light"] .c-amber { --c: #9A5B00; --cbg: #FFF1DA; }
:root[data-theme="light"] .c-blue { --c: #1F5FD1; --cbg: #E5EEFF; }
[class*="c-"] .badge { background: var(--cbg); color: var(--c); }
.list { display: flex; flex-direction: column; }
.frow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line2); }
.frow:first-child { border-top: 0; }
.frow .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.frow .t { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow .t:hover { color: var(--link); }
.frow .m { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.ficon { width: 42px; height: 42px; background: var(--red-soft); color: var(--red); font-family: var(--mono); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
details.lec { background: var(--card); border: 1px solid var(--line); overflow: hidden; }
details.lec[open] { border-color: var(--primary-line); }
details.lec summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; }
details.lec summary::-webkit-details-marker { display: none; }
details.lec summary .num { width: 38px; height: 38px; border-radius: 10px; background: var(--card2); color: var(--muted); font-family: var(--mono); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
details.lec .list { border-top: 1px solid var(--line); }
.subject-head { background: var(--primary-soft); border: 1px solid var(--primary-line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.doc { display: flex; gap: 12px; align-items: center; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--cbg, var(--card2)); color: var(--c, var(--text)); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; height: 40px; padding: 0 16px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-family: inherit; font-size: 14px; cursor: pointer; }
.tab.on { font-weight: 600; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; cursor: pointer; }
.btn:hover { text-decoration: none; }
.btn-primary { border-color: var(--primary); }
.btn-green { border-color: var(--green); }
.btn-sm { font-size: 13px; }
.btn-block { width: 100%; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.input, select.input, textarea.input { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-family: inherit; font-size: 15px; padding: 10px 14px; }
textarea.input { min-height: 110px; resize: vertical; }
.input:focus { outline-offset: 1px; }
.searchbox { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; background: var(--card); border: 1px solid var(--line); }
.searchbox input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-family: inherit; font-size: 15px; min-width: 0; }
.alert { border-radius: 12px; padding: 12px 14px; font-size: 14px; border: 1px solid var(--red-line); background: var(--red-soft); color: var(--red); }
.ok { border-radius: 12px; padding: 12px 14px; font-size: 14px; border: 1px solid var(--green-line); color: var(--green); }
.auth { max-width: 420px; margin: 24px auto; }
.empty { text-align: center; color: var(--muted); padding: 28px 16px; }
.news-item { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.news-item.pinned { border-color: var(--cyan-line); background: var(--cyan-soft); }
.news-body { white-space: pre-line; }
.viewer { width: 100%; height: 75vh; border: 1px solid var(--line); background: #fff; }
.sched-day { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.slot { display: flex; gap: 12px; align-items: baseline; }
.slot .mono { color: var(--green); font-weight: 700; min-width: 54px; }
mark { color: inherit; border-radius: 3px; }
footer.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 24px 0 8px; }
h1, h2, h3 { font-weight: 800; }
.tile { transition: transform .15s ease, border-color .15s ease; }
.tile:hover { transform: translateY(-3px); }
.logo { font-weight: 900; font-size: 26px; }
.logo .pro { font-weight: 800; }
.topnav a.on { font-weight: 700; }
.icon-btn { border-width: 2px; }
.btn { border-width: 2px; }
.chip-new { border-radius: 999px; }
.chip { border-radius: 999px; }
.tab { border-radius: 999px; font-weight: 700; }
.input { border-radius: 16px; border-width: 2px; }
.searchbox { border-radius: 18px; border-width: 2px; }
.badge { border-radius: 14px; font-weight: 800; }
.ficon { border-radius: 14px; }
details.lec { border-radius: 22px; }
details.lec[open] summary .num { background: var(--primary); color: var(--primary-ink); }
.subject-head, .hero-exam { border-radius: 26px; border-width: 2px; }
.countdown div { border-radius: 16px; }
.countdown b { font-size: 28px; font-weight: 900; }
.bottomnav { left: 10px; right: 10px; bottom: 10px; height: 68px; }
.bottomnav a { margin: 6px; }
body { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
.sched-day.today { border-color: var(--primary); }
.viewer { border-radius: 20px; }
.hello { font-weight: 900; line-height: 1.3; }
.hello em { font-style: normal; }
.video-wrap { background: #000; border-radius: 22px; overflow: hidden; border: 2px solid var(--line); }
.video-wrap video { width: 100%; max-height: 70vh; display: block; background: #000; }
:root { --ease: cubic-bezier(.2,.7,.2,1); }
html { scroll-behavior: smooth; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation: none !important; transition: none !important; }
}
body { background-attachment: fixed, scroll; }
.top { padding-top: env(safe-area-inset-top); }
.card { transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.tile .badge { transition: transform .2s var(--ease); }
.tile:hover .badge { transform: scale(1.08) rotate(-3deg); }
.list .frow { transition: background .15s; }
.list .frow:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.dot { position: absolute; top: 8px; inset-inline-end: 9px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--card); }
.bell { position: relative; }
.bottomnav a { position: relative; }
.bottomnav a .dot { top: 8px; inset-inline-end: calc(50% - 18px); border-color: var(--bg2); }
.bottomnav a:active { transform: scale(.94); }
.sb-wrap { position: relative; }
.suggest { position: absolute; z-index: 15; top: calc(100% + 6px); inset-inline: 0; background: var(--card); border: 2px solid var(--line); border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.4); overflow: hidden; }
.sg { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; color: var(--text); border-top: 1px solid var(--line2); }
.sg:first-child { border-top: 0; }
.sg:hover, .sg.on { background: var(--primary-soft); text-decoration: none; }
.sg-t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-s { font-size: 12px; color: var(--muted); flex: none; }
.searchbox:focus-within { border-color: var(--primary); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { padding: 6px 14px; font-size: 14px; color: var(--text); }
.chips .chip:hover { border-color: var(--primary-line); text-decoration: none; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar i { display: block; width: 100%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--primary), var(--primary-line)); }
.bar span { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.list .frow, details.lec { content-visibility: auto; contain-intrinsic-size: auto 64px; }
@media (max-width: 480px) {
h1 { font-size: 24px; }
.hello { font-size: 25px; }
.bell { display: none; }
}
@media (min-width: 900px) {
.bottomnav a .dot { display: none; }
}
@media (display-mode: standalone) {
footer.foot { display: none; }
}
.btn { position: relative; overflow: hidden; border-radius: 999px; min-height: 46px; padding: 0 24px; border: 1px solid var(--line); color: var(--text); background: linear-gradient(180deg, color-mix(in srgb, var(--card2) 92%, #fff 8%), var(--card)); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 16px rgba(0,0,0,.25); transition: transform .18s var(--ease), box-shadow .25s var(--ease), border-color .2s, filter .2s; }
.btn:hover { border-color: var(--primary-line); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.32); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: inset 0 2px 6px rgba(0,0,0,.3); }
.btn-primary { border: 0; text-shadow: 0 1px 0 rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(0,0,0,.14), 0 8px 22px var(--glow); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(0,0,0,.14), 0 12px 30px var(--glow); }
.btn-primary::after, .btn-green::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; inset-inline-start: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transition: inset-inline-start .6s var(--ease); pointer-events: none; }
.btn-primary:hover::after, .btn-green:hover::after { inset-inline-start: 130%; }
.btn-green { color: #06251A; border: 0; }
.btn-danger { background: transparent; box-shadow: none; color: var(--red); border-color: var(--red-line); }
.btn-danger:hover { background: var(--red-soft); }
.btn-sm { min-height: 38px; padding: 0 16px; border-radius: 999px; }
.icon-btn { border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--card2) 92%, #fff 8%), var(--card)); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 4px 12px rgba(0,0,0,.22); transition: transform .18s var(--ease), border-color .2s, box-shadow .2s; }
.icon-btn:hover { transform: translateY(-2px); border-color: var(--primary-line); box-shadow: 0 8px 20px var(--glow); color: var(--primary-text); }
.tab { border-width: 1px; transition: all .2s var(--ease); }
.tab:hover { border-color: var(--primary-line); }
.tab.on { background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3)); border-color: transparent; color: var(--primary-ink); box-shadow: 0 6px 16px var(--glow); }
.logo .pro { box-shadow: 0 4px 14px var(--glow); padding: 0 12px; }
.topnav a { border-radius: 999px; transition: background .2s, color .2s; }
.topnav a.on { background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3)); color: var(--primary-ink); box-shadow: 0 4px 14px var(--glow); }
.card { border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--card2) 55%, var(--card)), var(--card)); box-shadow: var(--shadow); }
.subject-head, .hero-exam { border: 1px solid var(--primary-line); background: radial-gradient(500px 200px at 100% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%), linear-gradient(145deg, var(--card2), var(--card)); }
.countdown b { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hello { background: linear-gradient(90deg, var(--text) 30%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hello em { background: linear-gradient(90deg, var(--gold-1), var(--gold-2), var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
details.lec { border-width: 1px; }
details.lec[open] summary .num, .chip-new { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: var(--primary-ink) !important; }
.input, .searchbox { border-width: 1px; background: color-mix(in srgb, var(--card) 85%, #000 15%); }
:root[data-theme="light"] .input, :root[data-theme="light"] .searchbox { background: #fff; }
.input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
.searchbox:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
mark { background: color-mix(in srgb, var(--primary) 35%, transparent); }
.bottomnav { border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); }
.bottomnav a { transition: background .25s var(--ease), color .2s, transform .15s; }
.bottomnav a.on { background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3)); color: var(--primary-ink); box-shadow: 0 6px 16px var(--glow); }
.bottomnav a.on svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
.c-violet { --c: #B7A6FF; --cbg: #2B2570; }
.c-cyan { --c: #6FD8F0; --cbg: #103A52; }
.c-green { --c: #6FE3B0; --cbg: #0F3F3A; }
.c-pink { --c: #FF9DB8; --cbg: #4A1B3F; }
.c-amber { --c: #FFC964; --cbg: #4A3510; }
.c-blue { --c: #86B6FF; --cbg: #17306B; }
:root[data-theme="light"] { --glow: rgba(20,184,166,.3); }
body { background-image: radial-gradient(700px 380px at 90% -10%, rgba(31,200,180,.16), transparent 60%), radial-gradient(600px 360px at 0% 30%, rgba(255,107,94,.08), transparent 60%), linear-gradient(rgba(111,200,230,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(111,200,230,.04) 1px, transparent 1px); background-size: auto, auto, 28px 28px, 28px 28px; }
:root[data-theme="light"] body { background-image: radial-gradient(700px 380px at 90% -10%, rgba(20,184,166,.18), transparent 60%), linear-gradient(rgba(11,30,46,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(11,30,46,.04) 1px, transparent 1px); background-size: auto, 28px 28px, 28px 28px; }
.logo .cursor { display: inline; }
.hello em, .grad { background: linear-gradient(90deg, var(--primary), var(--cyan) 50%, var(--sun)); -webkit-background-clip: text; background-clip: text; }
.dot { background: var(--coral); }
.land { display: grid; gap: 22px; align-items: center; padding: 10px 0 4px; }
@media (min-width: 860px) {
.land { grid-template-columns: 1.05fr 1fr; gap: 36px; padding: 30px 0 10px; }
}
.land-txt { display: flex; flex-direction: column; gap: 14px; }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--primary-line); }
.pill i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 0 var(--glow); }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px transparent; } }
.land-h { font-size: clamp(32px, 8vw, 54px); font-weight: 900; }
.land p { margin: 0; font-size: 16px; max-width: 46ch; }
.land-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.caret { color: var(--coral); -webkit-text-fill-color: var(--coral); animation: blink 1s steps(1) infinite; }
.term { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #0D1B28; border-bottom: 1px solid #1A3349; }
.term-bar b { width: 11px; height: 11px; border-radius: 50%; background: var(--coral); }
.term-bar b:nth-child(2) { background: var(--sun); }
.term-bar b:nth-child(3) { background: var(--primary); }
.term-bar span { margin-inline-start: auto; font: 12px ui-monospace, monospace; color: #6E8BA0; }
.term pre { margin: 0; padding: 16px 18px; font: 13.5px/1.75 ui-monospace, "Cascadia Code", Menlo, monospace; color: #D6E6F0; overflow-x: auto; text-align: left; }
.term .c { font-style: italic; }
.feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 860px) {
.feats { grid-template-columns: repeat(4, 1fr); }
}
.feat { display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--card2), var(--card)); transition: transform .2s var(--ease), border-color .2s; }
.feat:hover { border-color: var(--c); }
.feat b { font: 800 18px ui-monospace, monospace; color: var(--c); width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 15%, transparent); margin-bottom: 6px; }
.feat span { font-size: 12px; color: var(--muted); }
:root { --cyan-soft: #1A2A2A; --cyan-line: #2F5C57; --gold-1: #F2B134; --gold-2: #F2B134; --gold-3: #F2B134; --glow: transparent; --shadow: none; }
:root[data-theme="light"] { --gold-1: #1C2027; --gold-2: #1C2027; --gold-3: #1C2027; }
body, :root[data-theme="light"] body { background-image: none; }
.card, .feat, .subject-head, .hero-exam { background: var(--card); box-shadow: none; }
a.card:hover { box-shadow: none; }
.hello, .hello em, .grad, .countdown b { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--text); -webkit-text-fill-color: currentColor; }
.hello em, .grad, .countdown b { color: var(--primary-text); }
.btn, .icon-btn { background: var(--card); box-shadow: none; border-radius: 12px; }
.btn:hover, .icon-btn:hover { transform: none; box-shadow: none; border-color: var(--text); color: var(--text); }
.btn-primary, .tab.on, .topnav a.on, .bottomnav a.on, .logo .pro, details.lec[open] summary .num, .chip-new { background: var(--primary); color: var(--primary-ink); box-shadow: none; text-shadow: none; }
.btn-primary:hover { filter: none; color: var(--primary-ink); }
.btn-primary::after, .btn-green::after { display: none; }
.btn-green { background: var(--green); box-shadow: none; }
.logo .pro { border-radius: 6px; }
.icon-btn { border-radius: 12px; }
.bottomnav { box-shadow: none; border-color: var(--line); background: var(--bg2); backdrop-filter: none; border-radius: 20px; }
.bottomnav a { border-radius: 14px; }
.top { background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--line2); }
.term { transform: none; box-shadow: none; background: #101318; }
.term .k { color: #E0533D; }
.term .s { color: #F2B134; }
.term .n { color: #5FA8A0; }
.term .f { color: #ECE6DA; }
.term .c { color: #6B717B; }
.pill { background: transparent; border-color: var(--line); color: var(--muted); }
.pill i { animation: none; background: var(--coral); }
.feat:hover { transform: none; }
.input:focus, .searchbox:focus-within { box-shadow: none; border-color: var(--text); }
:root { --font: "Almarai", system-ui, sans-serif; --mono: "Almarai", system-ui, sans-serif; --head: "Marhey", "Almarai", sans-serif; --fun: "Lemonada", "Almarai", sans-serif; }
body { font-family: var(--font); font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, .hello, .land-h, .logo, .tile .name, .feat strong { font-family: var(--head); font-weight: 600; line-height: 1.35; }
.btn, .tab, .topnav a, .bottomnav a, .pill, .chip-new, .logo .pro { font-family: var(--fun); font-weight: 600; }
.countdown b, .badge { font-family: var(--fun); }
.splash { display: none; }
html.intro .splash { display: flex; }
html.intro body { overflow: hidden; }
.splash { position: fixed; inset: 0; z-index: 100; color: #ECE6DA; flex-direction: column; align-items: center; justify-content: center; padding: 24px; overflow: hidden; }
.splash.out { opacity: 0; visibility: hidden; transform: scale(1.06); }
.splash::before { content: ""; position: absolute; inset: 0; background-size: 26px 26px; }
.sp-sky span { position: absolute; font: 700 15px var(--fun, monospace); opacity: 0; animation: sym 5s ease-in-out forwards; }
.sp-sky span:nth-child(1) { top: 8%; right: 10%; animation-delay: .1s; font-size: 22px; }
.sp-sky span:nth-child(2) { top: 14%; left: 8%; animation-delay: .4s; }
.sp-sky span:nth-child(3) { top: 30%; right: 4%; animation-delay: .7s; }
.sp-sky span:nth-child(4) { top: 36%; left: 5%; animation-delay: .2s; }
.sp-sky span:nth-child(5) { bottom: 30%; right: 9%; animation-delay: 1s; font-size: 26px; }
.sp-sky span:nth-child(6) { bottom: 24%; left: 12%; animation-delay: .5s; }
.sp-sky span:nth-child(7) { bottom: 10%; right: 22%; animation-delay: .8s; }
.sp-sky span:nth-child(8) { bottom: 14%; left: 30%; animation-delay: 1.2s; font-size: 24px; }
.sp-sky span:nth-child(9) { top: 6%; left: 40%; animation-delay: .9s; }
.sp-sky span:nth-child(10) { top: 22%; left: 24%; animation-delay: 1.4s; }
.sp-sky span:nth-child(11) { bottom: 40%; left: 2%; animation-delay: 1.1s; }
.sp-sky span:nth-child(12) { top: 46%; right: 20%; animation-delay: 1.6s; font-size: 22px; }
@keyframes sym { 0% { opacity: 0; transform: translateY(40px) rotate(-20deg) scale(.6); } 25% { opacity: .9; } 100% { opacity: .35; transform: translateY(-30px) rotate(15deg) scale(1); } }
.sp-scene { width: min(380px, 94vw); height: auto; overflow: visible; }
.sp-scene .d { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.6s ease forwards; }
.sp-scene .net .d { animation-delay: .2s; }
.sp-scene .laptop .d { animation-delay: .5s; }
.sp-scene .chart .d { animation-delay: 1.4s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.sp-scene .nodes circle { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: pop .5s cubic-bezier(.3,1.6,.5,1) forwards; }
.sp-scene .nodes circle:nth-child(1) { animation-delay: .3s; }
.sp-scene .nodes circle:nth-child(2) { animation-delay: .5s; }
.sp-scene .nodes circle:nth-child(3) { animation-delay: .7s; }
.sp-scene .nodes circle:nth-child(4) { animation-delay: .9s; }
.sp-scene .nodes circle:nth-child(5) { animation-delay: 1.1s; }
@keyframes pop { to { transform: scale(1); } }
.sp-scene .db { opacity: 0; animation: drop .8s cubic-bezier(.3,1.5,.5,1) 1s forwards; }
@keyframes drop { from { opacity: 0; transform: translate(42px, 90px); } to { opacity: 1; transform: translate(42px, 128px); } }
.sp-scene .code rect { transform-box: fill-box; transform-origin: left; transform: scaleX(0); animation: grow .4s ease forwards; }
.sp-scene .code rect:nth-child(1) { animation-delay: 1.5s; }
.sp-scene .code rect:nth-child(2) { animation-delay: 1.8s; }
.sp-scene .code rect:nth-child(3) { animation-delay: 2.1s; }
.sp-scene .code rect:nth-child(4) { animation-delay: 2.4s; }
.sp-scene .code rect:nth-child(5) { animation-delay: 2.7s; }
@keyframes grow { to { transform: scaleX(1); } }
.sp-scene .chart rect { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
.sp-scene .b1 { animation: bar1 .9s ease 1.6s forwards; }
.sp-scene .b2 { animation: bar2 .9s ease 1.8s forwards; }
.sp-scene .b3 { animation: bar3 .9s ease 2s forwards; }
@keyframes bar1 { to { transform: scaleY(.45); } }
@keyframes bar2 { to { transform: scaleY(.75); } }
@keyframes bar3 { to { transform: scaleY(1); } }
.sp-scene .gear { opacity: 0; animation: fade .4s ease .9s forwards; }
.sp-scene .gear circle:first-child { transform-origin: 0 0; animation: spin 3s linear infinite; }
@keyframes fade { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.sp-brand { position: relative; display: flex; align-items: baseline; gap: 6px; font: 700 clamp(46px, 13vw, 80px)/1.1 var(--head); }
.sp-brand span { display: inline-block; opacity: 0; transform: translateY(30px) scale(.8); animation: brand .7s cubic-bezier(.3,1.5,.5,1) forwards; }
.sp-brand .c { animation-name: brand, blink2; animation-duration: .7s, 1s; animation-iteration-count: 1, infinite; }
.sp-brand .p { font: 700 .34em var(--fun); padding: 4px 14px; border-radius: 10px; transform: rotate(-8deg); }
@keyframes brand { to { opacity: 1; transform: none; } }
@keyframes blink2 { 50% { opacity: 0; } }
.sp-tag { position: relative; margin: 0; font: 500 16px var(--fun); color: #9BA1AB; opacity: 0; animation: brand .7s ease 3.7s forwards; }
.sp-tag b { color: #F2B134; font-weight: 700; }
.sp-tag b + b, .sp-tag b:last-child { color: #7DBE8A; }
.splash .bar { height: 4px; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.splash .bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); animation: fill 5s linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }
.splash .skip { position: absolute; z-index: 2; top: calc(18px + env(safe-area-inset-top)); left: 18px; color: #ECE6DA; border: 1px solid #2E343E; border-radius: 999px; padding: 8px 18px; font: 600 13px var(--fun); cursor: pointer; }
.splash .skip:hover { border-color: #F2B134; color: #F2B134; }
@media (prefers-reduced-motion: reduce) {
html.intro .splash { display: none; }
html.intro body { overflow: auto; }
}
body { font-size: 15.5px; line-height: 1.75; letter-spacing: .1px; }
h1, h2, h3, .hello, .land-h { font-weight: 600; letter-spacing: 0; line-height: 1.45; }
h1 { font-size: 26px; }
h2 { font-size: 18px; }
.hello { font-size: 28px; }
.land-h { line-height: 1.35; }
.tile .name { font-size: 15px; font-weight: 500; line-height: 1.5; }
.frow .t { font-weight: 700; }
.btn { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.bottomnav a { font-size: 10px; font-weight: 500; }
.bottomnav a.on { font-weight: 600; }
.topnav a { font-size: 13px; }
.muted, .small { line-height: 1.7; }
.input, .searchbox input { font-family: var(--font); }
.splash { gap: 0; transition: opacity .8s ease, transform .8s ease, visibility .8s; }
.splash::before { background-image: radial-gradient(#ffffff0d 1px, transparent 1px); z-index: 1; }
.sp-aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(70px); opacity: .45; animation: blob 9s ease-in-out infinite alternate; }
.sp-aurora i:nth-child(1) { top: -35vmax; right: -25vmax; }
.sp-aurora i:nth-child(2) { bottom: -40vmax; left: -25vmax; animation-delay: -3s; }
.sp-aurora i:nth-child(3) { top: 20%; left: 30%; width: 50vmax; height: 50vmax; animation-delay: -6s; }
@keyframes blob { to { transform: translate(6vmax, 5vmax) scale(1.15); } }
.sp-sky, .sp-scene, .sp-msg, .splash .bar, .splash .skip { z-index: 2; }
.sp-sky span { text-shadow: 0 0 18px currentColor; }
.sp-scene { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); animation: scene-out .7s ease 2.7s forwards; }
@keyframes scene-out { to { opacity: 0; transform: translate(-50%, -75%) scale(.85); filter: blur(4px); } }
.sp-msg { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 520px; }
.sp-brand { font-size: clamp(50px, 15vw, 86px); }
.sp-brand .l { color: transparent; }
.sp-hi { margin: 4px 0 0; font: 600 clamp(22px, 6vw, 30px)/1.4 var(--head); color: #FFF6E5; opacity: 0; animation: brand .7s ease 3.5s forwards; }
.sp-hi em { font-style: normal; }
.sp-inst { margin: 0; font: 600 13px var(--fun); padding: 4px 14px; border: 1px solid rgba(127,209,199,.35); border-radius: 999px; opacity: 0; animation: brand .7s ease 3.75s forwards; }
.sp-desc { margin: 4px 0 0; font: 400 15px/1.85 var(--font); color: #C9C3D6; opacity: 0; animation: brand .8s ease 4s forwards; }
.sp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.sp-chips span { font: 600 12px var(--fun); padding: 6px 14px; border-radius: 999px; color: #0D1018; opacity: 0; transform: scale(.6); animation: pop .5s cubic-bezier(.3,1.6,.5,1) forwards; }
.splash .bar { position: absolute; bottom: calc(36px + env(safe-area-inset-bottom)); width: min(240px, 60vw); background: rgba(255,255,255,.12); }
.splash .skip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.sp-tag { display: none; }
:root { --bg: #160D1A; --bg2: #1C1121; --card: #22152A; --card2: #2C1B36; --line: #3D2849; --line2: #2E1D38; --text: #FFF3EA; --muted: #BFA9C4; --primary: #FF9F1C; --primary-ink: #1A0B10; --primary-soft: #3A2018; --primary-line: #8A5418; --primary-text: #FFB347; --link: #FFB347; --berry: #E62E6B; --mint: #2EC4B6; --coral: #E62E6B; --cyan: #2EC4B6; --sun: #FF9F1C; --green: #2EC4B6; --red: #FF5C8A; --red-soft: #3A1426; --red-line: #7A2448; }
:root[data-theme="light"] { --bg: #FFF7F0; --bg2: #FFFFFF; --card: #FFFFFF; --card2: #FFEFE3; --line: #F1D9CB; --line2: #F7E6DB; --text: #2A0F22; --muted: #7A5A6E; --primary: #FF8A00; --primary-ink: #2A0F22; --primary-soft: #FFEAD2; --primary-line: #FFC27A; --primary-text: #C2185B; --link: #C2185B; --berry: #D81B60; --mint: #0FA597; --coral: #D81B60; --cyan: #0FA597; --green: #0FA597; }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: #FFB347; }
:root[data-theme="light"] .btn-primary:hover { background: #FF9F1C; }
.bottomnav a.on, .topnav a.on, .tab.on { background: var(--primary); color: var(--primary-ink); }
.logo .pro { background: var(--berry); color: #fff; }
.logo .cursor { color: var(--mint); }
.hello em, .grad { color: var(--primary-text); }
.dot, .pill i { background: var(--berry); }
.f1 { --c: var(--primary); }
.f2 { --c: var(--berry); }
.f3 { --c: var(--mint); }
.f4 { --c: var(--primary-text); }
.chip-new { background: var(--mint); color: #08201E !important; }
.reviewed { color: var(--mint); }
a.card:hover { border-color: var(--primary); }
.c-violet,.c-pink { --c: #FF6B9A; --cbg: #3E1630; }
.c-cyan,.c-green { --c: #2EC4B6; --cbg: #123A38; }
.c-amber,.c-blue { --c: #FFB347; --cbg: #3E2614; }
.splash { background: #12091A; }
.sp-aurora i:nth-child(1) { background: #E62E6B; }
.sp-aurora i:nth-child(2) { background: #FF9F1C; }
.sp-aurora i:nth-child(3) { background: #2EC4B6; opacity: .3; }
.sp-scene { animation-delay: 4.2s; }
.sp-brand .l { animation-delay: 4.5s; background: linear-gradient(180deg, #FFF3EA, #FFB347); -webkit-background-clip: text; background-clip: text; }
.sp-brand .c { animation-delay: 4.7s, 5.4s; color: #2EC4B6; }
.sp-brand .p { animation-delay: 4.9s; background: #E62E6B; color: #fff; box-shadow: 0 6px 22px rgba(230,46,107,.5); }
.sp-hi { animation-delay: 5.4s; }
.sp-hi em { color: #FF9F1C; }
.sp-inst { animation-delay: 5.9s; color: #2EC4B6; border-color: rgba(46,196,182,.4); background: rgba(46,196,182,.12); }
.sp-desc { animation-delay: 6.4s; }
.sp-chips span:nth-child(1) { background: #FF9F1C; animation-delay: 7s; }
.sp-chips span:nth-child(2) { background: #E62E6B; color: #fff; animation-delay: 7.2s; }
.sp-chips span:nth-child(3) { background: #2EC4B6; animation-delay: 7.4s; }
.sp-chips span:nth-child(4) { background: #FFB347; animation-delay: 7.6s; }
.splash .bar i { background: linear-gradient(90deg, #E62E6B, #FF9F1C, #2EC4B6); animation-duration: 10s; }
.sp-sky span:nth-child(3n) { color: #FF9F1C; }
.sp-sky span:nth-child(3n+1) { color: #E62E6B; }
.sp-sky span:nth-child(3n+2) { color: #2EC4B6; }
.sp-sky span { animation-duration: 8s; }
.acc { max-width: 640px; margin: 0 auto; }
.acc-head { display: flex; gap: 16px; align-items: center; padding: 20px; border-color: var(--primary-line); }
.acc-av { width: 72px; height: 72px; flex: none; border-radius: 22px; display: grid; place-items: center; font: 700 32px var(--head); color: #fff; background: var(--berry); box-shadow: 8px 8px 0 var(--primary); }
.acc-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-id h1 { font-size: 22px; overflow: hidden; text-overflow: ellipsis; }
.acc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.acc-tags span { font: 600 11px var(--fun); padding: 2px 10px; border-radius: 999px; background: var(--card2); color: var(--muted); }
.acc-tags span:first-child { background: var(--primary); color: var(--primary-ink); }
.acc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.acc-stats a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; color: var(--text); text-align: center; }
.acc-stats a:hover { text-decoration: none; }
.acc-stats b { font: 700 24px var(--fun); color: var(--primary-text); height: 30px; display: grid; place-items: center; }
.acc-stats a:nth-child(2) b { color: var(--mint); }
.acc-stats a:nth-child(3) b { color: var(--berry); }
.acc-stats span { font-size: 12px; color: var(--muted); }
.acc-menu { display: flex; flex-direction: column; padding: 6px; }
.acc-menu a { display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 14px; color: var(--text); font-weight: 700; }
.acc-menu a:hover { background: var(--card2); text-decoration: none; }
.acc-menu a svg { color: var(--primary-text); }
.acc-menu a span { flex: 1; }
.acc-menu a i { font-style: normal; color: var(--muted); font-size: 20px; }
.acc-sub { border-top: 1px solid var(--line2); padding-top: 14px; margin-top: 6px; }
.acc-sub h3 { font-size: 15px; }
.acc-set { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line2); }
.acc-set:first-of-type { border-top: 0; }
.acc-out { border-color: var(--red-line); }
.acc :target { scroll-margin-top: 80px; }
.hi { display: flex; align-items: center; gap: 10px; }
.hic { width: 34px; height: 34px; flex: none; border-radius: 11px; display: inline-grid; place-items: center; font-style: normal; color: var(--ic, var(--primary)); background: color-mix(in srgb, var(--ic, var(--primary)) 16%, transparent); }
.ic-heart, .ic-flame, .ic-logout, .ic-trash, .ic-bell { --ic: var(--berry); }
.ic-clock, .ic-calendar, .ic-history, .ic-file, .ic-moon, .ic-phone { --ic: var(--mint); }
.ic-sparkle, .ic-layers, .ic-cap, .ic-book, .ic-user, .ic-gear { --ic: var(--primary); }
.acc-set { justify-content: flex-start; }
.acc-set .grow { flex: 1; }
.acc-set > .btn, .acc-set > .switch { flex: none; }
.acc-mail { display: inline-flex; align-items: center; gap: 6px; }
.topnav a { display: inline-flex; align-items: center; gap: 6px; }
.btn svg { flex: none; }
.switch { width: 54px; height: 32px; flex: none; border-radius: 999px; border: 1px solid var(--line); background: var(--card2); position: relative; cursor: pointer; transition: background .25s; }
.switch i { position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); transition: inset-inline-start .25s cubic-bezier(.3,1.4,.5,1), background .25s; }
.switch.on { background: var(--mint); border-color: var(--mint); }
.switch.on i { inset-inline-start: 25px; background: #fff; }
.switch:disabled { opacity: .5; cursor: not-allowed; }
.acc-cta { display: grid; gap: 10px; }
.gsi { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 44px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.authx { display: grid; gap: 22px; max-width: 980px; margin: 8px auto; align-items: start; }
@media (min-width: 860px) {
.authx { grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 30px; }
}
.authx-perks { display: flex; flex-direction: column; gap: 14px; }
.authx-h { font-size: clamp(26px, 7vw, 38px); line-height: 1.4; }
.authx-h em { font-style: normal; color: var(--primary); }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.perks li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.perks b { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.perks span { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); line-height: 1.6; }
.perks strong { font: 600 15px var(--head); color: var(--text); }
.p1 { --c: var(--primary); }
.p2 { --c: var(--mint); }
.p3 { --c: var(--berry); }
.p4 { --c: var(--primary); }
.p5 { --c: var(--mint); }
.authx-box { display: flex; flex-direction: column; border-color: var(--primary-line); }
@media (min-width: 860px) {
.authx-box { position: sticky; top: 90px; }
}
@media (max-width: 859px) {
.authx-box { order: -1; }
.perks li { padding: 10px 12px; }
}
.authx-google { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 14px; border-radius: 18px; background: var(--card2); }
.authx-google .gsi { margin-top: 8px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--card2); }
.seg a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 12px; color: var(--muted); font: 600 13px var(--fun); }
.seg a:hover { text-decoration: none; color: var(--text); }
.seg a.on { background: var(--primary); color: var(--primary-ink); }
.inp { position: relative; display: block; }
.inp svg { position: absolute; top: 50%; inset-inline-end: 14px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.inp .input { padding-inline-end: 44px; }
.inp:focus-within svg { color: var(--primary); }
.authx-t { font-size: 22px; text-align: center; }
.authx-box .gsi { padding: 6px 0; }
.authx-box { align-items: stretch; gap: 18px; padding: 26px 20px; overflow: hidden; position: relative; }
.gl-art { position: relative; width: 96px; height: 96px; margin: 0 auto; }
.gl-art span { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--line); animation: spin 14s linear infinite; }
.gl-art span:nth-child(2) { inset: 12px; border: 2px solid transparent; border-top-color: var(--primary); border-left-color: var(--berry); animation-duration: 3s; }
.gl-art span:nth-child(3) { inset: -8px; border: 0; animation-duration: 6s; animation-direction: reverse; background: radial-gradient(circle at 50% 0, var(--mint) 0 5px, transparent 6px), radial-gradient(circle at 0 70%, var(--primary) 0 4px, transparent 5px), radial-gradient(circle at 100% 70%, var(--berry) 0 4px, transparent 5px); }
.gl-art b { position: absolute; inset: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); }
.gbtn { position: relative; border-radius: 22px; padding: 2px; background: linear-gradient(120deg, #4285F4, #34A853, #FBBC05, #EA4335, #4285F4); background-size: 300% 300%; animation: gflow 5s linear infinite; transition: transform .2s cubic-bezier(.3,1.4,.5,1); }
@keyframes gflow { to { background-position: 300% 0; } }
.gbtn:hover { transform: translateY(-2px) scale(1.01); }
.gbtn:active { transform: scale(.98); }
.gbtn-face { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--card); }
.g-logo { width: 48px; height: 48px; flex: none; border-radius: 15px; display: grid; place-items: center; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.gbtn-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.5; }
.gbtn-txt strong { font: 600 17px var(--head); color: var(--text); }
.gbtn-txt small { font-size: 12px; color: var(--muted); }
.gbtn-arrow { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); font-weight: 800; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(-5px); } }
.gbtn-real { position: absolute; inset: 0; opacity: .01; overflow: hidden; border-radius: 22px; display: flex; align-items: center; justify-content: center; }
.gbtn-real > div, .gbtn-real iframe { width: 100% !important; height: 100% !important; transform: scale(1.6); }
.gl-safe { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.gl-safe span { font: 600 11px var(--fun); padding: 4px 12px; border-radius: 999px; background: var(--card2); color: var(--muted); }
.snd .off-i { display: none; }
.snd.muted .off-i { display: inline-flex; }
.snd .on-i, .snd .off-i { display: inline-flex; }
.snd.muted .on-i { display: none; }
.snd:not(.muted) .off-i { display: none; }
.snd:not(.muted) { color: var(--primary); }
html, body { max-width: 100%; overflow-x: clip; }
.land > *, .authx > *, .feats > *, .grid > * { min-width: 0; }
.term, .term pre { max-width: 100%; }
.top .wrap { min-width: 0; }
.top-actions { min-width: 0; flex-shrink: 1; }
.top-actions > * { flex-shrink: 0; }
@media (max-width: 480px) {
.wrap { padding: 0 12px; }
.top .wrap { gap: 6px; height: 56px; }
.logo { font-size: 20px; gap: 3px; }
.logo .cursor { display: none; }
.logo .pro { font-size: 11px; padding: 1px 6px; }
.top-actions { gap: 5px; }
.icon-btn { width: 36px; height: 36px; }
.icon-btn svg { width: 18px; height: 18px; }
.top-actions .btn-sm { min-height: 36px; padding: 0 12px; font-size: 12.5px; }
.top-actions .icon-btn, .top .logo { position: relative; }
.top-actions .icon-btn::after, .top .logo::after { content: ""; position: absolute; inset: -4px -3px; min-height: 44px; }
.top .logo::after { inset: -9px -4px; }
.bottomnav { left: 6px; right: 6px; bottom: 6px; height: 64px; }
.bottomnav a { margin: 4px 2px; gap: 1px; font-size: 10px; white-space: nowrap; line-height: 1.3; }
.bottomnav a svg { width: 20px; height: 20px; }
}
@media (max-width: 360px) {
.top-actions .snd { display: none; }
.top-actions .btn-sm svg { display: none; }
}
.gsi-main { min-height: 48px; justify-content: center; }
.abtn { -webkit-appearance: none; appearance: none; width: 100%; height: 56px; border: 0; border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; background: var(--text); color: var(--bg); font: 600 16px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font); letter-spacing: -.01em; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.18); transition: transform .15s ease, box-shadow .2s ease, opacity .2s; }
.abtn:hover { box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 12px 30px rgba(0,0,0,.26); }
.abtn:active { transform: scale(.97); }
.abtn-g { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.abtn.busy { opacity: .6; pointer-events: none; }
.abtn.busy .abtn-g { animation: spin 1s linear infinite; }
.abtn-hint { margin: -8px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
h1 { font-size: 28px; line-height: 1.4; }
h2 { font-size: 20px; line-height: 1.45; }
h3 { font-size: 17px; }
.land-h { line-height: 1.3; }
p { text-wrap: pretty; }
.muted, .tile .foot { color: var(--muted); }
.card, .feat { border-radius: 20px; border-color: var(--line2); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
:root[data-theme="light"] .card, :root[data-theme="light"] .feat { box-shadow: 0 1px 2px rgba(42,15,34,.05), 0 6px 18px rgba(42,15,34,.05); }
.tile { padding: 16px; gap: 10px; }
.tile .name { font-size: 16px; }
.tile .badge, .feat b { border-radius: 14px; }
.btn { min-height: 48px; border-radius: 14px; transition: transform .12s ease, filter .15s ease, background .15s ease; }
.card, .tile, .feat, .btn, .tab, .bottomnav a { -webkit-tap-highlight-color: transparent; }
.tile:active, .feat:active, .card a:active, .btn:active, .tab:active, .bottomnav a:active { transform: scale(.97); }
a:focus-visible, button:focus-visible, .input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.input:focus, .searchbox:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.searchbox, .input { border-radius: 16px; }
main.wrap > * + * { margin-top: 18px; }
footer.foot { padding: 16px 0 4px; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .tile:active, .feat:active, .btn:active { transform: none; } }
body { font-size: 16px; line-height: 1.8; }
h1, h2, h3, .hello, .land-h { font-weight: 700; letter-spacing: 0; }
h1 { line-height: 1.5; }
.land-h { line-height: 1.45; }
.tile .name, .feat strong { font-weight: 600; line-height: 1.6; }
.btn { font-size: 14px; font-weight: 600; line-height: 1.6; }
.tab, .pill { font-weight: 600; line-height: 1.6; }
.bottomnav a, .bottomnav a:not(#x) { font-size: 11px; font-weight: 600; line-height: 1.5; }
.muted, .tile .foot, .feat span, footer.foot { line-height: 1.7; }
.btn-primary { background: linear-gradient(180deg, #FFB347, var(--primary) 55%, #F28C0F); color: var(--primary-ink); border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(255,159,28,.28); }
.btn-primary:hover { background: linear-gradient(180deg, #FFC064, #FFA82E 55%, #F59716); filter: none; }
.btn:not(.btn-primary):not(.btn-green) { background: var(--card2); border: 1px solid var(--line); color: var(--text); }
.btn:not(.btn-primary):not(.btn-green):hover { border-color: var(--primary-line); color: var(--primary-text); }
.bottomnav a.on, .topnav a.on, .tab.on { background: linear-gradient(180deg, #FFB347, var(--primary)); color: var(--primary-ink); box-shadow: 0 4px 14px rgba(255,159,28,.3); }
.bottomnav a:not(.on) { color: var(--muted); }
.logo .pro, .chip-new { background: var(--berry); color: #fff; }
:root { --muted: #C7B3CC; --line2: #33213E; }
.pill { background: color-mix(in srgb, var(--berry) 10%, var(--card)); border-color: color-mix(in srgb, var(--berry) 35%, transparent); }
:root[data-theme="light"] .btn-primary { background: linear-gradient(180deg, #FFA53D, var(--primary)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px rgba(255,138,0,.25); }
:root[data-theme="light"] .btn:not(.btn-primary):not(.btn-green) { background: #fff; }
:root[data-theme="light"] { --muted: #6E4E63; }
:root { --fun: "Lemonada", "Almarai", sans-serif; --num: "Almarai", system-ui, sans-serif; }
.btn, .tab, .topnav a, .bottomnav a, .pill, .chip-new { font-family: var(--font); font-weight: 700; letter-spacing: 0; }
.logo .pro, .badge { font-family: var(--fun); font-weight: 700; letter-spacing: 0; }
.countdown b { font-family: var(--num); font-weight: 800; }
.btn { font-size: 15px; line-height: 1.4; }
.bottomnav a { font-size: 12.5px; line-height: 1.3; }
.pill { font-size: 13px; }
h1, h2, h3, .hello, .land-h, .logo, .tile .name, .feat strong { font-family: var(--head); }
.tile .name, .feat strong, h3 { font-weight: 700; }
.btn { font-size: 16.5px; }
.btn-sm, .top-actions .btn-sm { font-size: 15px; }
.bottomnav a { font-size: 13.5px; }
.pill { font-size: 14px; }
nav.bottomnav a, .bottomnav a.on { font-size: 13px !important; }
h3, .tile .name, .feat strong, .hello { font-family: var(--fun); font-weight: 700; font-size: 17px; line-height: 1.5; }
h1, .land-h { font-weight: 700; word-spacing: .06em; }
h2 { font-size: 21px; word-spacing: .05em; }
body { color: var(--text); }
p, .muted, .tile .foot, .feat span { font-size: 15px; }
.hello { font-family: var(--head); font-size: 28px; font-weight: 700; line-height: 1.45; }
.hello, h2.hi { font-family: var(--head); font-weight: 700; background: linear-gradient(90deg, var(--primary), var(--berry)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hello { font-size: 28px; line-height: 1.5; }
.hello em { font-style: normal; color: var(--primary-text); -webkit-text-fill-color: var(--primary-text); background: none; }
h2.hi { font-size: 20px; line-height: 1.5; width: fit-content; }
h2.hi .hic { -webkit-text-fill-color: initial; }
:root { --bg: #140B19; --card: #20132A; --line: #3A2648; --grad: linear-gradient(135deg, var(--primary), #FF4D8D); --pro-glow: 0 0 28px rgba(255,120,60,.16); --shadow-card: 0 6px 22px rgba(0,0,0,.28); }
:root[data-theme="light"] { --grad: linear-gradient(135deg, #FF8A00, #E91E63); --pro-glow: 0 8px 24px rgba(194,24,91,.10); --shadow-card: 0 6px 20px rgba(27,22,64,.07); }
.btn-primary { background: var(--grad); border-color: transparent; box-shadow: 0 6px 18px rgba(255,90,90,.25); }
.btn-primary:hover { background: var(--grad); filter: brightness(1.08); }
.hero-exam { background: linear-gradient(160deg, var(--primary-soft), var(--card)); box-shadow: var(--pro-glow); }
.tile, .card { box-shadow: var(--shadow-card); }
.tile:hover { box-shadow: var(--shadow-card), var(--pro-glow); }
.tile, .card { border-radius: 18px; box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.04); }
.btn { min-height: 44px; border-radius: 14px; cursor: pointer; transition: transform .2s ease-out, filter .2s ease-out, box-shadow .2s ease-out; }
.btn:active, .tile:active, .bottomnav a:active { transform: scale(.97); }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 3px; border-radius: 12px; }
.bottomnav a { min-height: 44px; border-radius: 14px; transition: color .2s ease-out, background .2s ease-out; }
.tile .badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
@media (prefers-reduced-motion: reduce) { .btn, .tile, .bottomnav a { transition: none; } .btn:active, .tile:active, .bottomnav a:active { transform: none; } }
body { background:
radial-gradient(120% 60% at 100% -10%, rgba(255,77,141,.10), transparent 55%),
radial-gradient(90% 50% at 0% 0%, rgba(255,159,28,.08), transparent 60%),
var(--bg); background-attachment: fixed; }
:root[data-theme="light"] body { background:
radial-gradient(120% 60% at 100% -10%, rgba(233,30,99,.07), transparent 55%),
radial-gradient(90% 50% at 0% 0%, rgba(255,138,0,.08), transparent 60%), var(--bg); background-attachment: fixed; }
header.top { position: sticky; top: 0; z-index: 25; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.tile, .card { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 100%, #fff 3%), var(--card)); }
.tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); opacity: .85; }
.tile .badge, .tile svg:first-child { color: var(--primary-text); }
.tile .badge { background: var(--primary-soft); border: 1px solid var(--primary-line); }
.tile:nth-child(4n+2)::before { background: linear-gradient(135deg, var(--berry), var(--primary)); }
.tile:nth-child(4n+3)::before { background: linear-gradient(135deg, var(--mint), var(--primary)); }
.tile:nth-child(4n+4)::before { background: linear-gradient(135deg, var(--primary), var(--mint)); }
.searchbox { box-shadow: var(--shadow-card); transition: border-color .2s ease-out, box-shadow .2s ease-out; }
.searchbox:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent), var(--shadow-card); }
.bottomnav { background: color-mix(in srgb, var(--card) 78%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.hic { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
@keyframes nz-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes nz-float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-18px,22px) scale(1.08); } }
@keyframes nz-spin { to { --nz-a: 360deg; } }
@property --nz-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: .35; animation: nz-float 14s ease-in-out infinite; }
body::before { width: 260px; height: 260px; top: 8%; right: -80px; background: #FF4D8D; }
body::after { width: 220px; height: 220px; bottom: 12%; left: -70px; background: var(--primary); animation-delay: -7s; }
:root[data-theme="light"] body::before, :root[data-theme="light"] body::after { opacity: .18; }
main, .wrap, .stack { position: relative; }
html::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.grid > *, .stack > section, .stack > .card { animation: nz-rise .55s cubic-bezier(.2,.8,.2,1) both; }
.grid > *:nth-child(2) { animation-delay: .06s; } .grid > *:nth-child(3) { animation-delay: .12s; } .grid > *:nth-child(4) { animation-delay: .18s; }
.grid > *:nth-child(5) { animation-delay: .24s; } .grid > *:nth-child(n+6) { animation-delay: .3s; }
.hero-exam { position: relative; border: 0; isolation: isolate; }
.hero-exam::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; z-index: -1;
background: conic-gradient(from var(--nz-a), var(--primary), #FF4D8D, var(--mint), var(--primary));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: nz-spin 6s linear infinite; }
.countdown b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tile { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none; }
.tile:hover { transform: translateY(-4px) rotate(-.6deg); border-color: var(--primary-line); }
.tile:hover::after { transform: translateX(120%); }
.tile .badge { transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.tile:hover .badge { transform: scale(1.12) rotate(-8deg); }
h2.hi { position: relative; padding-bottom: 6px; }
h2.hi::after { content: ""; position: absolute; bottom: -2px; right: 44px; width: 70px; height: 8px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='8' viewBox='0 0 70 8'%3E%3Cpath d='M1 5 Q8 1 15 5 T29 5 T43 5 T57 5 T69 5' fill='none' stroke='%23FF4D8D' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; opacity: .85; }
.logo .pro { transform: rotate(-6deg); display: inline-block; box-shadow: 0 4px 12px rgba(255,77,141,.35); }
.hic { transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
section:hover .hic { transform: rotate(-10deg) scale(1.08); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-130%); animation: nz-shine 3.5s ease-in-out infinite; }
@keyframes nz-shine { 0%,60% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.bottomnav a.on { animation: nz-rise .35s cubic-bezier(.3,1.6,.5,1); }
::selection { background: #FF4D8D; color: #fff; }
@media (prefers-reduced-motion: reduce) {
body::before, body::after, .hero-exam::before, .btn-primary::after, .grid > *, .stack > section, .stack > .card, .bottomnav a.on { animation: none !important; }
.tile:hover { transform: none; }
}
.av-edit{position:relative;display:inline-block;cursor:pointer;flex:none}
.av-img{object-fit:cover;display:block}
.av-cam{position:absolute;bottom:-4px;inset-inline-start:-4px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;border:3px solid var(--card);box-shadow:0 4px 10px rgba(0,0,0,.25)}
.av-edit.busy .acc-av{opacity:.5}
.av-btn{padding:0!important;overflow:hidden}
.av-mini{width:100%;height:100%;object-fit:cover;display:grid;place-items:center;border-radius:inherit}
.av-letter{background:linear-gradient(135deg,#6D5CF5,#E0609A);color:#fff;font-weight:700;font-size:17px}
.cf-dlg { font-family: var(--font); line-height: 1.5; width: min(86vw, 320px); border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--text); padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.cf-dlg[open] { animation: cfIn .22s ease-out; }
.cf-dlg::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }
.cf-dlg h3 { font-family: var(--head); margin: 0 0 8px; font-size: 1rem; text-align: center; }
.cf-dlg ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.cf-dlg li { display: grid; gap: 0; padding: 6px 10px; border-radius: 10px; font-size: .9rem; background: var(--bg); border: 1px solid var(--line); overflow-wrap: anywhere; }
.cf-k { font-size: .72rem; opacity: .7; }
.cf-dlg s { opacity: .55; font-size: .8rem; }
.cf-dlg p { margin: 4px 0 0; font-size: .78rem; }
.cf-dlg .btn { font-family: var(--font); min-height: 40px; padding: 0 10px; font-size: .9rem; }
.cf-dlg li b { color: var(--accent); }
.cf-dlg li b::before { content: "← "; opacity: .6; }
.cf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
@keyframes cfIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .cf-dlg[open] { animation: none; } }
.xh { --xc: var(--red); --xs: var(--red-soft); --xl: var(--red-line); position: relative; overflow: hidden; padding: 22px 18px 18px; border-radius: 20px; border: 1.5px solid var(--xl); background: repeating-linear-gradient(transparent 0 27px, color-mix(in srgb, var(--xc) 9%, transparent) 27px 28px), var(--xs); }
.xh::before { content: ""; position: absolute; inset-block: 0; inset-inline-end: 34px; width: 2px; background: color-mix(in srgb, var(--xc) 35%, transparent); }
.xh-t { position: relative; margin: 0; line-height: 1.25; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 10px; }
.xh-a { font-palette: var(--xp, normal); font-family: var(--head); font-weight: 700; font-size: clamp(42px, 13vw, 64px); color: var(--xc); animation: xhInk 1s cubic-bezier(.2,.8,.2,1) both; }
.xh-b { position: relative; font-family: var(--head); font-size: clamp(26px, 8vw, 38px); color: var(--text); animation: xhUp .7s .35s ease-out both; }
.xh-b svg { position: absolute; inset-inline: 0; bottom: -8px; width: 100%; height: 12px; overflow: visible; }
.xh-b path { fill: none; stroke: var(--xc); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: xhDraw .8s .9s ease-out forwards; }
.xh { min-height: 150px; }
.xh-lead { position: relative; margin: 14px 0 0; padding-inline-end: 72px; color: var(--muted); font-size: .95rem; animation: xhUp .6s 1.1s ease-out both; }
.xh-stamp { position: absolute; bottom: 12px; inset-inline-end: 12px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--head); font-size: 12px; color: var(--xc); border: 2.5px double var(--xc); transform: rotate(-16deg); opacity: .8; animation: xhStamp .5s 1.5s cubic-bezier(.3,1.6,.5,1) both; }
.xh-mark { position: absolute; font-family: var(--head); color: var(--xc); opacity: .16; font-size: 30px; animation: xhFloat 7s ease-in-out infinite; pointer-events: none; }
.xh-mark.m1 { bottom: 10px; inset-inline-end: 30%; }
.xh-mark.m2 { top: 40%; inset-inline-end: 52%; font-size: 24px; animation-delay: -2s; }
.xh-mark.m3 { top: 10px; inset-inline-start: 14px; font-size: 22px; animation-delay: -4s; }
.xh-mark.m4 { top: 8px; inset-inline-start: 30%; font-size: 26px; animation-delay: -5.5s; }
.xh ~ .tabs, .xh ~ section, .xh ~ .card { animation: xhUp .5s 1.2s ease-out both; }
.xh ~ section:nth-of-type(2) { animation-delay: 1.3s; } .xh ~ section:nth-of-type(3) { animation-delay: 1.4s; }
.xh-a { filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--xc) 25%, transparent)); }
:root:not([data-theme="light"]) .xh-t { filter: brightness(1.6) saturate(1.2); }
:root:not([data-theme="light"]) .xh-b { color: #fff; }
@keyframes xhInk { from { opacity: 0; transform: translateX(30px) skewX(-12deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes xhUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes xhDraw { to { stroke-dashoffset: 0; } }
@keyframes xhStamp { from { opacity: 0; transform: rotate(-16deg) scale(2.4); } to { opacity: .8; transform: rotate(-16deg) scale(1); } }
@keyframes xhFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .xh *, .xh ~ * { animation: none !important; } .xh-b path { stroke-dashoffset: 0; } }
.xh--sum { --xc: #15803d; --xs: #e9f8ee; --xl: #b7e4c7; --xp: --p-green; }
.xh--sum .xh-a { background: linear-gradient(transparent 58%, #fde68a99 58% 88%, transparent 88%) no-repeat 100% 0 / 0% 100%; animation: xhInk 1s cubic-bezier(.2,.8,.2,1) both, xhHi .9s 1s ease-out forwards; }
.xh--mat { --xc: #1d4ed8; --xs: #eaf1ff; --xl: #bfd3fb; --xp: --p-blue; background: radial-gradient(color-mix(in srgb, var(--xc) 16%, transparent) 1.2px, transparent 1.6px) 0 0 / 18px 18px, var(--xs); }
.xh--sch { --xc: #ea580c; --xs: #fff1e6; --xl: #fdd2b0; --xp: --p-orange; background: linear-gradient(color-mix(in srgb, var(--xc) 12%, transparent) 1px, transparent 1px) 0 0 / 100% 34px, linear-gradient(90deg, color-mix(in srgb, var(--xc) 12%, transparent) 1px, transparent 1px) 0 0 / 34px 100%, var(--xs); }
.xh--news { --xc: #7c3aed; --xs: #f3edff; --xl: #d8c8fb; --xp: --p-violet; background: repeating-linear-gradient(90deg, transparent 0 calc(33% - 1px), color-mix(in srgb, var(--xc) 14%, transparent) calc(33% - 1px) 33%), var(--xs); }
.xh--st { --xc: #0e7490; --xs: #e6f8fb; --xl: #b3e5ee; --xp: --p-cyan; background: var(--xs); }
.xh--sum::before, .xh--mat::before, .xh--sch::before, .xh--news::before { display: none; }
.xh--st::before { inset: auto 0 0 auto; inset-inline-start: 14px; width: auto; height: 46%; background: linear-gradient(to top, color-mix(in srgb, var(--xc) 18%, transparent), transparent) 0 100% / 14% 40% no-repeat, linear-gradient(to top, color-mix(in srgb, var(--xc) 18%, transparent), transparent) 18% 100% / 14% 75% no-repeat, linear-gradient(to top, color-mix(in srgb, var(--xc) 18%, transparent), transparent) 36% 100% / 14% 55% no-repeat, linear-gradient(to top, color-mix(in srgb, var(--xc) 18%, transparent), transparent) 54% 100% / 14% 100% no-repeat; transform-origin: bottom; animation: xhBars 1.2s .3s cubic-bezier(.2,.9,.3,1.2) both; }
.xh--news .xh-stamp { border-radius: 10px; width: auto; height: auto; padding: 4px 10px; transform: rotate(-8deg); animation-name: xhStampN, xhPulse; animation-duration: .5s, 1.6s; animation-delay: 1.5s, 2s; animation-iteration-count: 1, infinite; }
.xh--sum .xh-b path { stroke: #f59e0b; stroke-width: 7; opacity: .7; }
:root:not([data-theme="light"]) .xh--sum, :root:not([data-theme="light"]) .xh--mat, :root:not([data-theme="light"]) .xh--sch, :root:not([data-theme="light"]) .xh--news, :root:not([data-theme="light"]) .xh--st { --xs: color-mix(in srgb, var(--xc) 14%, var(--card)); --xl: color-mix(in srgb, var(--xc) 40%, transparent); }
@keyframes xhHi { to { background-size: 100% 100%; } }
@keyframes xhBars { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes xhStampN { from { opacity: 0; transform: rotate(-8deg) scale(2.2); } to { opacity: .9; transform: rotate(-8deg) scale(1); } }
@keyframes xhPulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--xc) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .xh, .xh::before { animation: none !important; } .xh--sum .xh-a { background-size: 100% 100%; } }
:root:not([data-theme="light"]) .xh--sum .xh-a { background-image: linear-gradient(transparent 58%, #fde68a33 58% 88%, transparent 88%); }
body.pt-exam { --pc: #dc2626; } body.pt-sum { --pc: #16a34a; } body.pt-mat { --pc: #2563eb; } body.pt-sch { --pc: #ea580c; }
body.pt-news { --pc: #7c3aed; } body.pt-st { --pc: #0891b2; } body.pt-srch { --pc: #db2777; } body.pt-acc { --pc: #f59e0b; }
body.pt-exam { --pcd: #b91c1c; } body.pt-sum { --pcd: #15803d; } body.pt-mat { --pcd: #1d4ed8; } body.pt-sch { --pcd: #c2410c; }
body.pt-news { --pcd: #6d28d9; } body.pt-st { --pcd: #0e7490; } body.pt-srch { --pcd: #be185d; } body.pt-acc { --pcd: #b45309; }
html body:not(.pt-none) { background-image: radial-gradient(520px 380px at 105% -5%, color-mix(in srgb, var(--pc) 24%, transparent), transparent 70%), radial-gradient(460px 420px at -10% 60%, color-mix(in srgb, var(--pc) 14%, transparent), transparent 70%), radial-gradient(color-mix(in srgb, var(--pc) 16%, transparent) 1px, transparent 1.5px); background-size: auto, auto, 22px 22px; background-attachment: fixed; }
@keyframes ptDrift { to { background-position: 40px 30px, -30px -20px, 11px 11px; } }
body:not(.pt-none) main .card { border-color: color-mix(in srgb, var(--pc) 26%, var(--line)); }
body:not(.pt-none) .tile { position: relative; overflow: hidden; }
html body:not(.pt-none) .tile::before { height: 4px; opacity: 1; background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc) 40%, #fff)); }
body:not(.pt-none) .tile:hover { border-color: var(--pc); box-shadow: 0 10px 24px color-mix(in srgb, var(--pc) 22%, transparent); }
html body:not(.pt-none) .tile .badge { border-color: color-mix(in srgb, var(--pc) 35%, transparent); background: color-mix(in srgb, var(--pc) 14%, var(--card)); color: var(--pc); border-radius: 12px; }
body:not(.pt-none) .tab.on { background: var(--pc); border-color: var(--pc); color: #fff; }
body:not(.pt-none) .hi .hic { color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); }
body:not(.pt-none) .grid > *, body:not(.pt-none) .list > *, body:not(.pt-none) .news-item { animation: xhUp .5s ease-out both; animation-delay: calc(1.1s + var(--i, 0) * 70ms); }
body:not(.pt-none) .grid > :nth-child(2), body:not(.pt-none) .list > :nth-child(2) { --i: 1; } body:not(.pt-none) .grid > :nth-child(3), body:not(.pt-none) .list > :nth-child(3) { --i: 2; }
body:not(.pt-none) .grid > :nth-child(4), body:not(.pt-none) .list > :nth-child(4) { --i: 3; } body:not(.pt-none) .grid > :nth-child(n+5), body:not(.pt-none) .list > :nth-child(n+5) { --i: 4; }
.xh--srch { --xc: #db2777; --xs: #fdeef5; --xl: #f7c3da; --xp: --p-pink; background: radial-gradient(circle at 18% 70%, transparent 22px, color-mix(in srgb, var(--xc) 22%, transparent) 23px 25px, transparent 26px), var(--xs); }
.xh--srch::before { display: none; }
:root:not([data-theme="light"]) .xh--srch { --xs: color-mix(in srgb, var(--xc) 14%, var(--card)); --xl: color-mix(in srgb, var(--xc) 40%, transparent); }
.subject-head .xh { margin-bottom: 12px; }
.pt-acc .acc-head { position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 16%, var(--card)), var(--card) 60%); animation: xhUp .5s ease-out both; }
.pt-acc .acc-head::after { content: ""; position: absolute; width: 140px; height: 140px; inset-inline-start: -40px; bottom: -60px; border-radius: 50%; border: 18px solid color-mix(in srgb, #f59e0b 14%, transparent); animation: xhFloat 8s ease-in-out infinite; }
.pt-acc .acc-av { position: relative; box-shadow: 0 0 0 3px var(--card), 0 0 0 6px #f59e0b; animation: accRing 3s ease-in-out infinite; }
@keyframes accRing { 50% { box-shadow: 0 0 0 3px var(--card), 0 0 0 9px color-mix(in srgb, #f59e0b 45%, transparent); } }
.pt-acc .acc-stats a { position: relative; overflow: hidden; border: 0; color: #fff; animation: xhUp .5s ease-out both; transition: transform .2s; }
.pt-acc .acc-stats a:active { transform: scale(.96); }
.pt-acc .acc-stats a:nth-child(1) { background: linear-gradient(140deg, #f43f5e, #e11d48); animation-delay: .1s; }
.pt-acc .acc-stats a:nth-child(2) { background: linear-gradient(140deg, #fb923c, #ea580c); animation-delay: .2s; }
.pt-acc .acc-stats a:nth-child(3) { background: linear-gradient(140deg, #a78bfa, #7c3aed); animation-delay: .3s; }
.pt-acc .acc-stats a b, .pt-acc .acc-stats a span { color: #fff !important; }
.pt-acc .acc-stats a::after { content: ""; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: #ffffff26; inset-inline-end: -18px; top: -18px; }
.pt-acc .acc-menu { gap: 6px; background: transparent; border: 0; box-shadow: none; padding: 0; }
.pt-acc .acc-menu a { --m: #f59e0b; background: var(--card); border: 1.5px solid color-mix(in srgb, var(--m) 30%, var(--line)); border-inline-start: 5px solid var(--m); animation: xhUp .5s ease-out both; transition: transform .2s, box-shadow .2s; }
.pt-acc .acc-menu a:hover, .pt-acc .acc-menu a:active { text-decoration: none; transform: translateX(-4px); box-shadow: 0 8px 20px color-mix(in srgb, var(--m) 22%, transparent); }
.pt-acc .acc-menu a > svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: #fff; background: var(--m); transform: rotate(-6deg); transition: transform .3s; }
.pt-acc .acc-menu a:hover > svg { transform: rotate(0) scale(1.08); }
.pt-acc .acc-menu a:nth-child(1) { --m: #0891b2; animation-delay: .15s; } .pt-acc .acc-menu a:nth-child(2) { --m: #2563eb; animation-delay: .22s; }
.pt-acc .acc-menu a:nth-child(3) { --m: #7c3aed; animation-delay: .29s; } .pt-acc .acc-menu a:nth-child(4) { --m: #e11d48; animation-delay: .36s; }
.pt-acc .acc-menu a:nth-child(5) { --m: #16a34a; animation-delay: .43s; }
@media (prefers-reduced-motion: reduce) { body:not(.pt-none) *, .pt-acc * { animation: none !important; } }
.pt-acc #profile, .cf-dlg { --sc: #0891b2; }
.pt-acc #profile { background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 14%, var(--card)), var(--card) 65%); border-color: color-mix(in srgb, var(--sc) 35%, var(--line)); }
.pt-acc #profile > .btn-primary, .cf-dlg [data-y] { background: linear-gradient(140deg, #22b8d6, var(--sc)); color: #fff; border: 0; box-shadow: 0 8px 20px color-mix(in srgb, var(--sc) 35%, transparent); }
.cf-dlg { background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 18%, var(--card)), var(--card) 70%); border-color: color-mix(in srgb, var(--sc) 40%, var(--line)); }
.cf-dlg li { background: color-mix(in srgb, var(--sc) 7%, var(--bg)); border-color: color-mix(in srgb, var(--sc) 28%, var(--line)); }
.cf-dlg li b { color: var(--sc); }
:root:not([data-theme="light"]) .cf-dlg li b { color: #38c6e3; }
.cf-dlg [data-n] { background: transparent; color: var(--text); border: 1.5px solid color-mix(in srgb, var(--sc) 45%, var(--line)); }
:root .pt-acc #profile > .btn-primary, :root .cf-dlg .btn[data-y] { background: linear-gradient(140deg, #22b8d6, #0891b2) !important; color: #fff !important; }
:root[data-theme="light"] .cf-dlg [data-n] { color: #0e7490; }
.pt-acc #profile h2.hi { color: #22b8d6; }
.pt-acc #profile h2.hi::after, .pt-acc #profile h2.hi * { --c: #0891b2; }
.pt-acc #profile .hic { background: linear-gradient(140deg, #22b8d6, #0891b2) !important; color: #fff !important; }
.pt-acc #profile .input:focus { border-color: #0891b2 !important; box-shadow: 0 0 0 3px color-mix(in srgb, #0891b2 30%, transparent) !important; outline: none; }
.pt-acc #profile .av-cam { background: #0891b2 !important; color: #fff; }
:root[data-theme="light"] .pt-acc #profile h2.hi { color: #0e7490; }
html body:not(.pt-none) .tabs { background: color-mix(in srgb, var(--pc) 12%, var(--card)) !important; border-color: color-mix(in srgb, var(--pc) 30%, transparent) !important; }
html body:not(.pt-none) .tab { color: color-mix(in srgb, var(--pc) 70%, var(--text)) !important; }
html body:not(.pt-none) .tab.on { background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--pc) 35%, transparent) !important; }
html body:not(.pt-none) h2.hi .hic { background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)) !important; color: #fff !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--pc) 35%, transparent) !important; }
html body:not(.pt-none) main .card { border-color: color-mix(in srgb, var(--pc) 35%, transparent) !important; background: color-mix(in srgb, var(--pc) 7%, var(--card)) !important; }
html body:not(.pt-none) .card.empty { border-style: dashed !important; color: color-mix(in srgb, var(--pc) 55%, var(--muted)) !important; }
html body:not(.pt-none) .sched-day.today { border-color: var(--pc) !important; }
html body:not(.pt-none) main .chip { border-color: var(--pc) !important; color: var(--pc) !important; }
html body:not(.pt-none) main .btn-primary { background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)) !important; color: #fff !important; }
html body:not(.pt-none) main a:not(.btn):not(.tab):not(.tile):not(.card) { color: var(--pc); }
html body:not(.pt-none)::before, html body:not(.pt-none)::after { background: var(--pc) !important; }
html body:not(.pt-none) { background-color: color-mix(in srgb, var(--pc) 6%, var(--bg)) !important; }
html:has(body.pt-exam) { --pc: #dc2626; } html:has(body.pt-sum) { --pc: #16a34a; } html:has(body.pt-mat) { --pc: #2563eb; } html:has(body.pt-sch) { --pc: #ea580c; }
html:has(body.pt-news) { --pc: #7c3aed; } html:has(body.pt-st) { --pc: #0891b2; } html:has(body.pt-srch) { --pc: #db2777; } html:has(body.pt-acc) { --pc: #f59e0b; }
html:has(body:not(.pt-none)) { background: linear-gradient(170deg, color-mix(in srgb, var(--pc) 22%, #0a0f14) 0%, color-mix(in srgb, var(--pc) 9%, #0a0f14) 55%, #0a0f14 100%) fixed !important; }
html[data-theme="light"]:has(body:not(.pt-none)) { background: linear-gradient(170deg, color-mix(in srgb, var(--pc) 20%, #fff) 0%, color-mix(in srgb, var(--pc) 9%, #fff) 55%, #fafafa 100%) fixed !important; }
html body:not(.pt-none) { background-color: transparent !important; }
html body:not(.pt-none) main .card { background: color-mix(in srgb, var(--pc) 9%, color-mix(in srgb, var(--card) 85%, transparent)) !important; }
html body:not(.pt-none) { --sb: #12161c; --st: #f1f3f5; --sm: #a7adb5; }
html[data-theme="light"] body:not(.pt-none) { --sb: #ffffff; --st: #1b1f24; --sm: #5b6470; }
html body:not(.pt-none) main .card, html body:not(.pt-none) .tabs { background: color-mix(in srgb, var(--pc) 10%, var(--sb)) !important; border-color: color-mix(in srgb, var(--pc) 32%, transparent) !important; }
html[data-theme="light"] body:not(.pt-none) main .card, html[data-theme="light"] body:not(.pt-none) .tabs { background: color-mix(in srgb, var(--pc) 5%, var(--sb)) !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--pc) 10%, transparent) !important; }
html body:not(.pt-none) .card.empty { color: color-mix(in srgb, var(--pc) 45%, var(--sm)) !important; }
html body:not(.pt-none) main a:not(.btn):not(.tab):not(.tile):not(.card) { color: color-mix(in srgb, var(--pc) 80%, var(--st)) !important; font-weight: 600; }
html body:not(.pt-none) .tab:not(.on) { color: color-mix(in srgb, var(--pc) 65%, var(--st)) !important; }
html body:not(.pt-none) main h2.hi, html body:not(.pt-none) main .card strong { color: var(--st); }
html body:not(.pt-none) main .muted, html body:not(.pt-none) main .small { color: var(--sm) !important; }
html body:not(.pt-none) header.top, html body:not(.pt-none) .bottomnav { background: color-mix(in srgb, var(--pc) 8%, color-mix(in srgb, var(--sb) 88%, transparent)) !important; border-color: color-mix(in srgb, var(--pc) 25%, transparent) !important; }
html body:not(.pt-none) .icon-btn { background: color-mix(in srgb, var(--pc) 8%, var(--sb)) !important; border-color: color-mix(in srgb, var(--pc) 25%, transparent) !important; color: var(--st) !important; }
html body:not(.pt-none) { --card: color-mix(in srgb, var(--pc) 8%, var(--sb)); }
html[data-theme="light"] body:not(.pt-none) header.top, html[data-theme="light"] body:not(.pt-none) .bottomnav { background: color-mix(in srgb, var(--pc) 6%, rgba(255,255,255,.9)) !important; }
html[data-theme="light"] body:not(.pt-none) .icon-btn { background: color-mix(in srgb, var(--pc) 6%, #fff) !important; }
html body:not(.pt-none) .tile:not([class*=" c-"]) .badge { background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)) !important; color: #fff !important; border: 0 !important; }
html body:not(.pt-none) .tile:not([class*=" c-"]) .badge svg { color: #fff !important; stroke: #fff; }
html body:not(.pt-none) main input:not([type=checkbox]):not([type=radio]) { border-color: var(--pc) !important; outline-color: var(--pc) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 18%, transparent) !important; }
html body:not(.pt-none) main form, html body:not(.pt-none) main .searchbar { border-color: color-mix(in srgb, var(--pc) 30%, transparent) !important; }
html body:not(.pt-none) header.top .top-actions a.btn.btn-primary.btn-sm[href] { background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--pc) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.35) !important; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
html body:not(.pt-none) header .btn-primary svg { stroke: #fff; color: #fff; }
html body:not(.pt-none) .bottomnav a.on { background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)) !important; color: #fff !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--pc) 40%, transparent) !important; }
html body:not(.pt-none) .bottomnav a.on svg { color: #fff !important; stroke: #fff !important; }
html:not([data-theme="light"]) body:not(.pt-none) .xh { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pc) 30%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--pc) 16%, #161a22), #11141a) !important; border: 1.5px solid color-mix(in srgb, var(--pc) 50%, transparent) !important; box-shadow: 0 12px 30px color-mix(in srgb, var(--pc) 18%, transparent) !important; }
html:not([data-theme="light"]) body:not(.pt-none) .xh-lead { color: #e4e7ec !important; }
html:not([data-theme="light"]) body:not(.pt-none) .xh-b { color: #fff !important; }
html:not([data-theme="light"]) body:not(.pt-none) .xh-stamp { color: color-mix(in srgb, var(--pc) 55%, #fff) !important; border-color: color-mix(in srgb, var(--pc) 70%, #fff) !important; opacity: .95; }
html:not([data-theme="light"]) body:not(.pt-none) .xh-mark { opacity: .35; }
html body:not(.pt-none) .card.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; border: 1.5px dashed color-mix(in srgb, var(--pc) 55%, transparent) !important; font-weight: 600; }
html body:not(.pt-none) .card.empty::before { content: "✦"; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 20px; color: #fff; background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)); box-shadow: 0 6px 16px color-mix(in srgb, var(--pc) 35%, transparent); animation: emFloat 3s ease-in-out infinite; }
@keyframes emFloat { 50% { transform: translateY(-4px) rotate(8deg); } }
html:not([data-theme="light"]) body:not(.pt-none) .card.empty { color: color-mix(in srgb, var(--pc) 30%, #eef0f3) !important; }
html[data-theme="light"] body:not(.pt-none) .card.empty { color: color-mix(in srgb, var(--pc) 70%, #222) !important; }
@media (prefers-reduced-motion: reduce) { html body:not(.pt-none) .card.empty::before { animation: none; } }
.dk-lecture { --k: #3b82f6; } .dk-summary { --k: #16a34a; } .dk-section { --k: #f59e0b; } .dk-exam { --k: #ef4444; } .dk-other { --k: #8b5cf6; }
.jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -4px -16px 0; padding: 2px 16px 6px; position: sticky; top: 64px; z-index: 5; }
.jump::-webkit-scrollbar { display: none; }
.jump a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: 999px; font-weight: 700; font-size: 13.5px; color: var(--st, var(--text)) !important; background: color-mix(in srgb, var(--pc) 10%, var(--sb, var(--card))); border: 1px solid color-mix(in srgb, var(--pc) 28%, transparent); backdrop-filter: blur(8px); text-decoration: none; }
.jump a b { min-width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--pc); }
.dgroup { display: flex; flex-direction: column; gap: 4px; scroll-margin-top: 120px; }
.dg-h { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--pc); }
.dg-i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: var(--fun); font-weight: 800; font-size: 18px; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--k, var(--pc)) 65%, #fff), var(--k, var(--pc))); box-shadow: 0 6px 14px color-mix(in srgb, var(--k, var(--pc)) 30%, transparent); }
.dg-i svg { stroke: #fff; }
.dg-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dg-t strong { font-family: var(--fun); font-size: 19px; color: var(--st, var(--text)); }
.dg-t small { font-size: 12.5px; color: var(--sm, var(--muted)); }
.dg-go { flex: none; font-size: 13px; font-weight: 700; color: var(--pc) !important; text-decoration: none; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--pc) 12%, transparent); }
.dlist { display: flex; flex-direction: column; }
.drow { display: grid; grid-template-columns: 40px 1fr 44px; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px dashed color-mix(in srgb, var(--pc) 28%, transparent); animation: xhUp .45s ease-out both; }
.drow:last-child { border-bottom: 0; }
.dn { font-family: var(--fun); font-weight: 800; font-size: 22px; line-height: 1; color: color-mix(in srgb, var(--pc) 75%, var(--st, var(--text))); opacity: .55; text-align: center; }
.dt { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: inherit !important; text-decoration: none; font-weight: 400 !important; }
.dt strong { font-size: 16px; font-weight: 700; color: var(--st, var(--text)); line-height: 1.45; overflow-wrap: anywhere; }
.dm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--sm, var(--muted)); }
.dk { font-weight: 700; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent); }
.dok { color: #16a34a; font-weight: 700; }
.dd { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff !important; background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)); box-shadow: 0 6px 14px color-mix(in srgb, var(--pc) 32%, transparent); transition: transform .15s; }
.dd svg { stroke: #fff; } .dd:active { transform: scale(.92); }
.drow:hover .dn { opacity: 1; }
.sh { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 20px 18px 16px; border-radius: 22px; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pc) 28%, transparent), transparent 60%), color-mix(in srgb, var(--pc) 8%, var(--sb, var(--card))); border: 1.5px solid color-mix(in srgb, var(--pc) 40%, transparent); }
.sh-k { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--pc); }
.sh-t { margin: 0; font-family: var(--head, var(--fun)); font-weight: 800; font-size: clamp(24px, 7vw, 30px); line-height: 1.35; color: var(--st, var(--text)); }
.sh-d { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sm, var(--muted)); }
.sh-d .avatar { width: 28px; height: 28px; font-size: 13px; }
.sh-s { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.sh-n { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px; text-decoration: none; background: color-mix(in srgb, var(--pc) 12%, transparent); color: var(--st, var(--text)) !important; font-weight: 400 !important; }
.sh-n b { font-family: var(--fun); font-size: 20px; color: var(--pc); }
.sh-n span { font-size: 11.5px; color: var(--sm, var(--muted)); }
.sh-n.off { opacity: .45; }
.sh2 { position: relative; overflow: hidden; padding: 26px 20px 20px; border-radius: 26px; background: linear-gradient(150deg, color-mix(in srgb, var(--pc) 22%, var(--sb)), var(--sb)); border: 1px solid color-mix(in srgb, var(--pc) 35%, transparent); isolation: isolate; }
.sh2-orb { position: absolute; z-index: -1; width: 220px; height: 220px; border-radius: 50%; top: -90px; left: -60px; background: radial-gradient(circle, color-mix(in srgb, var(--pc) 55%, transparent), transparent 65%); animation: orb 9s ease-in-out infinite alternate; }
.sh2-orb.b { top: auto; bottom: -110px; left: auto; right: -50px; width: 180px; height: 180px; animation-duration: 12s; opacity: .7; }
@keyframes orb { to { transform: translate(40px, 30px) scale(1.2); } }
.sh2-k { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 999px; color: #fff; background: var(--pc); animation: pop .5s .1s both; }
.sh2-t { margin: 12px 0 8px; font-family: var(--head, var(--fun)); font-weight: 800; font-size: clamp(26px, 7.5vw, 34px); line-height: 1.3; color: var(--st, var(--text)); }
.sh2-t span { display: inline-block; animation: wordUp .6s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: calc(.15s + var(--d) * .09s); }
@keyframes wordUp { from { opacity: 0; transform: translateY(18px) rotate(-4deg); filter: blur(4px); } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }
.sh2-d { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sm, var(--muted)); animation: xhUp .5s .5s both; }
.sh2-d .avatar { width: 30px; height: 30px; font-size: 13px; }
.seg { position: sticky; top: 64px; z-index: 6; display: grid; grid-template-columns: repeat(3, 1fr); padding: 5px; border-radius: 18px; background: color-mix(in srgb, var(--pc) 10%, var(--sb, var(--card))); border: 1px solid color-mix(in srgb, var(--pc) 25%, transparent); backdrop-filter: blur(12px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.seg-ind { position: absolute; top: 5px; bottom: 5px; left: 5px; border-radius: 14px; background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)); box-shadow: 0 6px 16px color-mix(in srgb, var(--pc) 40%, transparent); transition: left .45s cubic-bezier(.3,1.4,.5,1), width .3s; }
.seg button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border: 0; background: none; font: inherit; font-family: var(--fun); font-weight: 700; font-size: 13.5px; color: var(--sm, var(--muted)); cursor: pointer; transition: color .3s; }
.seg button svg { width: 18px; height: 18px; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.seg button b { position: absolute; top: 4px; left: 10px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font-size: 11px; line-height: 18px; color: var(--pc); background: var(--sb, #fff); }
.seg button[aria-selected="true"] { color: #fff; } .seg button[aria-selected="true"] svg { transform: scale(1.2) rotate(-8deg); stroke: #fff; }
.pane.on { animation: paneIn .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes paneIn { from { opacity: 0; transform: translateY(14px); } }
.pane.on .drow, .pane.on .qz { animation: xhUp .45s both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
.pane.on .drow:nth-child(2) { --i: 1; } .pane.on .drow:nth-child(3) { --i: 2; } .pane.on .drow:nth-child(4) { --i: 3; }
.qz { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 14px; padding: 14px; margin-bottom: 10px; border-radius: 20px; text-decoration: none; color: inherit !important; font-weight: 400 !important; background: color-mix(in srgb, var(--pc) 8%, var(--sb, var(--card))); border: 1px solid color-mix(in srgb, var(--pc) 22%, transparent); position: relative; overflow: hidden; transition: transform .2s; animation: xhUp .5s both; animation-delay: calc(var(--i, 0) * 90ms + .2s); }
.qz::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--pc) 18%, transparent) 50%, transparent 70%); transform: translateX(100%); animation: sheen 3.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s + 1s); pointer-events: none; }
@keyframes sheen { 0%, 60% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
.qz:active { transform: scale(.97); }
.qz-ring { width: 58px; height: 58px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; color: var(--pc); background: conic-gradient(var(--pc) 0 72%, color-mix(in srgb, var(--pc) 18%, transparent) 0); position: relative; }
.qz-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--sb, var(--card)); }
.qz-ring b, .qz-ring small { position: relative; } .qz-ring b { font-family: var(--fun); font-size: 20px; } .qz-ring small { font-size: 10px; }
.qz-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .qz-b strong { font-size: 16px; color: var(--st, var(--text)); } .qz-b small { font-size: 12px; color: var(--sm, var(--muted)); }
.qz-go { padding: 9px 16px; border-radius: 999px; font-weight: 800; font-size: 13.5px; color: #fff; background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)); box-shadow: 0 6px 14px color-mix(in srgb, var(--pc) 35%, transparent); animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 80%, 100% { transform: translateX(0); } 88% { transform: translateX(-5px); } 94% { transform: translateX(2px); } }
.xs { display: flex; flex-direction: column; gap: 10px; animation: xhUp .5s both; animation-delay: calc(var(--i) * 100ms + .9s); }
.xs-h { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit !important; font-weight: 400 !important; padding-bottom: 8px; border-bottom: 2px solid color-mix(in srgb, var(--pc) 60%, transparent); }
.xs-n { font-family: var(--fun); font-weight: 800; font-size: 30px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--pc); }
.xs-t { flex: 1; display: flex; flex-direction: column; } .xs-t strong { font-family: var(--fun); font-size: 19px; color: var(--st, var(--text)); } .xs-t small { font-size: 12px; color: var(--sm, var(--muted)); }
.xs-c { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); }
.xs-q .qz { margin-bottom: 8px; }
.qp { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
.qp-back { align-self: flex-start; font-weight: 700; font-size: 14px; color: var(--pc) !important; text-decoration: none; }
.qp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qp-top small { font-size: 12.5px; color: var(--sm, var(--muted)); } .qp-top h1 { margin: 2px 0 0; font-family: var(--fun); font-size: 22px; color: var(--st, var(--text)); }
.qp-timer { position: relative; width: 62px; height: 62px; flex: none; display: grid; place-items: center; }
.qp-timer svg { position: absolute; inset: 0; transform: rotate(-90deg); } .qp-timer circle { fill: none; stroke-width: 3.2; stroke: color-mix(in srgb, var(--pc) 18%, transparent); }
.qp-timer .qp-tl { stroke: var(--pc); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .5s linear; }
.qp-timer b { font-family: var(--fun); font-size: 14px; color: var(--st, var(--text)); }
.qp-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--pc) 15%, transparent); overflow: hidden; }
.qp-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc) 50%, #fbbf24)); transition: width .6s cubic-bezier(.3,1.3,.5,1); }
.qp-dots { display: flex; gap: 6px; justify-content: center; } .qp-dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 20%, transparent); transition: .3s; }
.qp-dots i.ok { background: #22c55e; transform: scale(1.3); } .qp-dots i.bad { background: #ef4444; transform: scale(1.3); }
.qc { padding: 22px 18px; border-radius: 24px; background: color-mix(in srgb, var(--pc) 7%, var(--sb, var(--card))); border: 1px solid color-mix(in srgb, var(--pc) 25%, transparent); box-shadow: 0 16px 40px rgba(0,0,0,.14); }
.qc.in { animation: qIn .5s cubic-bezier(.2,.9,.3,1.2) both; } .qc.out { animation: qOut .26s ease-in both; }
@keyframes qIn { from { opacity: 0; transform: translateX(-40px) rotate(-2deg); } } @keyframes qOut { to { opacity: 0; transform: translateX(50px) rotate(2deg); } }
.qc-n { font-size: 12.5px; font-weight: 800; color: var(--pc); } .qc h2 { margin: 8px 0 16px; font-size: 19px; line-height: 1.6; color: var(--st, var(--text)); }
.qc-o { display: flex; flex-direction: column; gap: 10px; }
.qc-o button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; padding: 13px 14px; border-radius: 16px; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--st, var(--text)); background: var(--sb, var(--card)); border: 1.5px solid color-mix(in srgb, var(--pc) 22%, transparent); cursor: pointer; transition: transform .15s, border-color .2s, background .2s; animation: xhUp .4s both; animation-delay: calc(var(--k) * 70ms + .15s); }
.qc-o button b { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-family: var(--fun); color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); transition: .2s; }
.qc-o button:not(:disabled):active { transform: scale(.97); }
.qc-o button.ok { border-color: #22c55e; background: color-mix(in srgb, #22c55e 14%, var(--sb, var(--card))); animation: okPop .45s cubic-bezier(.3,1.6,.5,1); } .qc-o button.ok b { background: #22c55e; color: #fff; }
.qc-o button.bad { border-color: #ef4444; background: color-mix(in srgb, #ef4444 12%, var(--sb, var(--card))); animation: shake .4s; } .qc-o button.bad b { background: #ef4444; color: #fff; }
.qc-o button:disabled:not(.ok):not(.bad) { opacity: .45; }
@keyframes okPop { 50% { transform: scale(1.04); } } @keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.qc-e { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.7; animation: xhUp .35s both; }
.qc-e.ok { background: color-mix(in srgb, #22c55e 14%, transparent); color: var(--st, var(--text)); } .qc-e.bad { background: color-mix(in srgb, #ef4444 12%, transparent); color: var(--st, var(--text)); }
.qc-e b { color: inherit; } .qc-nx { width: 100%; margin-top: 14px; animation: xhUp .35s .1s both; }
.qp-end { text-align: center; animation: qIn .5s both; }
.qp-score { position: relative; width: 170px; height: 170px; margin: 10px auto; display: grid; place-items: center; }
.qp-score svg { position: absolute; inset: 0; transform: rotate(-90deg); } .qp-score circle { fill: none; stroke-width: 9; stroke: color-mix(in srgb, var(--pc) 15%, transparent); }
.qp-score .qp-sc { stroke: var(--pc); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1) .2s; }
.qp-score b { display: block; font-family: var(--fun); font-size: 54px; line-height: 1; color: var(--st, var(--text)); } .qp-score small { color: var(--sm, var(--muted)); }
.qp-end h2 { font-family: var(--fun); color: var(--st, var(--text)); }
.qp-acts { display: flex; gap: 10px; justify-content: center; margin: 12px 0 18px; }
.qp-rev { display: flex; flex-direction: column; gap: 8px; text-align: start; }
.qp-rev div { display: flex; gap: 10px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--pc) 6%, var(--sb, var(--card))); border-inline-start: 4px solid #22c55e; }
.qp-rev div.bad { border-inline-start-color: #ef4444; } .qp-rev b { font-family: var(--fun); color: var(--pc); }
.qp-rev span { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--st, var(--text)); } .qp-rev small { color: var(--sm, var(--muted)); }
.qp-conf { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.qp-conf i { position: absolute; top: -12px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; animation: fall 2.2s cubic-bezier(.3,.6,.5,1) var(--d) forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(var(--r)); } }
.nw-h { position: relative; overflow: hidden; padding: 22px 18px 0; border-radius: 26px; background: linear-gradient(150deg, color-mix(in srgb, var(--pc) 35%, #120a24), #0f0b1c); color: #fff; isolation: isolate; }
html[data-theme="light"] .nw-h { background: linear-gradient(150deg, var(--pc), color-mix(in srgb, var(--pc) 60%, #000)); }
.nw-h::before { content: ""; position: absolute; z-index: -1; inset: -40%; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--pc) 50%, transparent), transparent 40%); animation: spin 8s linear infinite; opacity: .6; }
@keyframes spin { to { transform: rotate(1turn); } }
.nw-live { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.12); }
.nw-live i { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 #ef4444; animation: ping 1.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.nw-t { margin: 10px 0 14px; display: flex; flex-direction: column; line-height: 1.1; }
.nw-t span { font-family: var(--head); font-size: clamp(46px, 14vw, 64px); animation: wordUp .7s .1s both; }
.nw-t em { font-style: normal; font-family: var(--fun); font-size: 18px; opacity: .8; animation: wordUp .7s .3s both; }
.nw-tick { margin: 0 -18px; padding: 10px 0; overflow: hidden; background: rgba(0,0,0,.25); border-top: 1px solid rgba(255,255,255,.12); }
.nw-tick div { display: flex; gap: 32px; width: max-content; animation: tick 22s linear infinite; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
@keyframes tick { to { transform: translateX(50%); } }
.nw-pin { position: relative; padding: 20px 18px; border-radius: 22px; overflow: hidden; background: color-mix(in srgb, var(--pc) 12%, var(--sb, var(--card))); border: 1.5px solid var(--pc); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc) 40%, transparent); animation: glow 2.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pc) 12%, transparent), 0 14px 34px color-mix(in srgb, var(--pc) 25%, transparent); } }
.nw-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: var(--pc); }
.nw-pin h2, .nw-tl h2 { margin: 10px 0 6px; font-size: 18px; color: var(--st, var(--text)); } .nw-pin p, .nw-tl p { margin: 0 0 8px; line-height: 1.8; color: var(--sm, var(--muted)); }
.nw-pin small, .nw-tl small { font-size: 12px; color: color-mix(in srgb, var(--pc) 70%, var(--st, var(--text))); font-weight: 700; }
.nw-tl { list-style: none; margin: 0; padding: 0 22px 0 0; position: relative; display: flex; flex-direction: column; gap: 14px; }
.nw-tl::before { content: ""; position: absolute; top: 6px; bottom: 6px; right: 6px; width: 2px; background: linear-gradient(var(--pc), transparent); }
.nw-tl li { position: relative; }
.nw-dot { position: absolute; right: -22px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 25%, transparent); }
.nw-tl article { padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--pc) 7%, var(--sb, var(--card))); border: 1px solid color-mix(in srgb, var(--pc) 20%, transparent); }
.rv { opacity: 0; transform: translateX(-30px); transition: opacity .6s, transform .6s cubic-bezier(.2,.9,.3,1.2); transition-delay: calc(var(--i, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sh2-orb, .nw-h::before, .nw-tick div, .qz::after, .qz-go, .nw-pin, .nw-live i { animation: none !important; } .rv { opacity: 1; transform: none; } }
.qp-dots i { display: block; flex: none; width: 9px !important; height: 9px !important; padding: 0 !important; border: 0 !important; }
.qp-dots i.d-ok { background: #22c55e; transform: scale(1.3); } .qp-dots i.d-bad { background: #ef4444; transform: scale(1.3); }
.qc-o button.ok { background: rgba(34,197,94,.16) !important; } .qc-o button.bad { background: rgba(239,68,68,.14) !important; }
.qc-e.ok { background: rgba(34,197,94,.16) !important; } .qc-e.bad { background: rgba(239,68,68,.13) !important; }
html body .qp-acts .btn-primary, html body .qc-nx.btn-primary { background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)) !important; color: #fff !important; border: 0 !important; }
.nw-t span { font-family: var(--head, var(--fun)); font-weight: 800; color: #fff; text-shadow: 0 4px 24px color-mix(in srgb, var(--pc) 70%, transparent); }
.nw-h::before { inset: auto; width: 260px; height: 260px; top: -100px; left: -80px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pc) 80%, transparent), transparent 65%); animation: orb 7s ease-in-out infinite alternate; opacity: .9; }
.nw-h::after { content: ""; position: absolute; z-index: -1; width: 200px; height: 200px; bottom: -90px; right: -60px; border-radius: 50%; background: radial-gradient(circle, #ec489988, transparent 65%); animation: orb 10s ease-in-out infinite alternate-reverse; }
html[data-theme] body .qp .qc-nx.btn.btn-primary, html body:not(.x) .qp .qp-acts .btn.btn-primary, html body .qp .qc-nx.btn.btn-primary { background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)) !important; color: #fff !important; }
.xh { isolation: isolate; }
.xh-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.xh-fx i { position: absolute; bottom: -30px; left: var(--x); font-style: normal; font-size: var(--s); color: var(--xc, var(--pc)); opacity: 0; animation: rise var(--t) linear infinite; animation-delay: var(--dl); }
@keyframes rise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .35; } 100% { transform: translateY(-260px) rotate(200deg); opacity: 0; } }
.xh::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%); transform: translateX(120%); animation: hsweep 5s ease-in-out 1.6s infinite; pointer-events: none; }
@keyframes hsweep { 0%, 55% { transform: translateX(120%); } 100% { transform: translateX(-120%); } }
html body .xh-mark { opacity: .45 !important; animation: markLive 4.5s ease-in-out infinite !important; }
@keyframes markLive { 0%, 100% { transform: translateY(0) rotate(0) scale(1); } 33% { transform: translateY(-10px) rotate(12deg) scale(1.15); } 66% { transform: translateY(5px) rotate(-10deg) scale(.95); } }
.xh-stamp { animation-iteration-count: 1, infinite !important; }
.nw-h { padding-bottom: 0; }
.nw-t { gap: 2px; }
.nw-w { display: flex; font-family: var(--head, var(--fun)); font-weight: 800; font-size: clamp(46px, 14vw, 62px); line-height: 1.15; color: #fff; }
.nw-w b { display: inline-block; font-weight: inherit; animation: letterDrop .7s cubic-bezier(.2,1.4,.4,1) both, letterGlow 3s ease-in-out infinite; animation-delay: calc(var(--c) * 70ms + .1s), calc(var(--c) * 150ms + 1.2s); }
@keyframes letterDrop { from { opacity: 0; transform: translateY(-40px) scale(1.6); filter: blur(6px); } }
@keyframes letterGlow { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 18px color-mix(in srgb, var(--pc) 90%, #fff); } }
.nw-w2 { display: inline-block; align-self: flex-start; font-family: var(--fun); font-weight: 800; font-size: 26px; padding: 2px 14px 4px; border-radius: 12px; color: #fff; background: linear-gradient(90deg, #ef4444, var(--pc)); background-size: 200% 100%; animation: wordUp .6s .6s both, bgSlide 4s linear infinite; }
@keyframes bgSlide { to { background-position: 200% 0; } }
.nw-t em { margin-top: 8px; font-size: 14px; }
.nw-mega { position: absolute; top: 46px; left: 18px; font-size: 54px; transform-origin: 80% 80%; animation: shout 2.4s ease-in-out infinite; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
@keyframes shout { 0%, 60%, 100% { transform: rotate(0) scale(1); } 70% { transform: rotate(-14deg) scale(1.12); } 80% { transform: rotate(8deg) scale(1.05); } 90% { transform: rotate(-6deg) scale(1.1); } }
.nw-pin { --r: #ef4444; background: linear-gradient(135deg, rgba(239,68,68,.20), rgba(239,68,68,.05)) !important; border: 0 !important; border-inline-start: 5px solid var(--r) !important; border-radius: 6px 18px 18px 6px !important; animation: redPulse 2.2s ease-in-out infinite !important; }
@keyframes redPulse { 50% { box-shadow: 0 0 0 4px rgba(239,68,68,.15), 0 12px 30px rgba(239,68,68,.25); } }
.nw-badge { display: inline-flex !important; align-items: center; gap: 7px; background: #ef4444 !important; }
.nw-badge i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.nw-pin small { color: #f87171 !important; }
.nw-tl { gap: 0 !important; }
.nw-tl article { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 16px 4px 18px !important; border-bottom: 1px solid color-mix(in srgb, var(--pc) 18%, transparent) !important; }
.nw-tl li:last-child article { border-bottom: 0 !important; }
.nw-dot { top: 22px !important; animation: dotPing 2.4s ease-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
@keyframes dotPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
.nw-tl h2 { font-size: 17px !important; margin: 6px 0 4px !important; }
@media (prefers-reduced-motion: reduce) { .xh-fx, .xh::after, .nw-mega, .nw-w b, .nw-w2, .nw-dot, .nw-pin { animation: none !important; } }
.nw-w b { animation: wipeIn 1s cubic-bezier(.7,0,.2,1) .15s both, letterGlow 3s ease-in-out 1.4s infinite !important; }
@keyframes wipeIn { from { clip-path: inset(0 0 0 100%); transform: translateX(-20px); filter: blur(4px); } to { clip-path: inset(0 0 0 0); } }
.steps { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--sm, var(--muted)); }
.steps span { padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pc) 8%, transparent); white-space: nowrap; }
.steps span.on { color: #fff; background: var(--pc); box-shadow: 0 4px 12px color-mix(in srgb, var(--pc) 40%, transparent); animation: pop .4s both; }
.steps span.done { color: var(--pc); }
.steps i { flex: 1; height: 2px; min-width: 10px; background: color-mix(in srgb, var(--pc) 20%, transparent); }
.steps i.on { background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc) 20%, transparent)); }
.ex-y { display: flex; flex-direction: column; gap: 10px; }
.ex-yt { margin: 6px 0 0; font-family: var(--fun); font-size: 18px; color: var(--st, var(--text)); display: flex; align-items: center; gap: 8px; }
.ex-yt::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 50%, transparent), transparent); }
.ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ex-s { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 12px; border-radius: 20px; text-decoration: none; color: var(--st, var(--text)) !important; font-weight: 400 !important;
background: linear-gradient(160deg, color-mix(in srgb, var(--t) 26%, var(--sb, var(--card))), var(--sb, var(--card)) 70%); border: 1px solid color-mix(in srgb, var(--t) 40%, transparent); box-shadow: 0 4px 0 color-mix(in srgb, var(--t) 45%, #000), 0 10px 22px color-mix(in srgb, var(--t) 18%, transparent);
animation: tileIn .55s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--i) * 60ms + .3s); transition: transform .15s, box-shadow .15s; }
.ex-s:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--t) 45%, #000); }
@keyframes tileIn { from { opacity: 0; transform: translateY(20px) scale(.9); } }
.ex-s::after { content: ""; position: absolute; width: 90px; height: 90px; top: -40px; left: -30px; border-radius: 50%; background: color-mix(in srgb, var(--t) 35%, transparent); filter: blur(10px); animation: orb 6s ease-in-out infinite alternate; }
.ex-ic { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--t); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 6px 14px color-mix(in srgb, var(--t) 40%, transparent); animation: icBob 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
@keyframes icBob { 50% { transform: translateY(-4px) rotate(-6deg); } }
.ex-s strong { position: relative; z-index: 1; margin-top: 6px; font-size: 15px; line-height: 1.4; }
.ex-s small { font-size: 11.5px; color: var(--sm, var(--muted)); }
.ex-m { font-size: 11.5px; color: var(--sm, var(--muted)); } .ex-m b { color: var(--t); font-family: var(--fun); }
.es-h { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 22px; background: linear-gradient(150deg, color-mix(in srgb, var(--t) 30%, var(--sb, var(--card))), var(--sb, var(--card))); border: 1px solid color-mix(in srgb, var(--t) 40%, transparent); }
.es-ic { width: 56px; height: 56px; flex: none; border-radius: 18px; display: grid; place-items: center; font-size: 28px; background: var(--t); box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); animation: icBob 3s ease-in-out infinite; }
.es-h small { font-size: 12px; font-weight: 800; color: var(--t); } .es-h h1 { margin: 2px 0; font-family: var(--fun); font-size: 22px; color: var(--st, var(--text)); } .es-h p { margin: 0; font-size: 13px; color: var(--sm, var(--muted)); }
.es-l { display: flex; flex-direction: column; gap: 8px; animation: xhUp .5s both; animation-delay: calc(var(--i) * 90ms + .1s); }
.es-lh { display: flex; align-items: center; gap: 10px; } .es-lh strong { font-family: var(--fun); font-size: 17px; color: var(--st, var(--text)); }
.es-n { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-family: var(--fun); font-weight: 800; color: #fff; background: var(--t); }
.es-l.full .es-n { background: linear-gradient(140deg, #fbbf24, #f59e0b); }
.es-q { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "a c" "b c"; align-items: center; gap: 2px 10px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--st, var(--text)) !important; font-weight: 400 !important; background: color-mix(in srgb, var(--t) 8%, var(--sb, var(--card))); border: 1.5px solid color-mix(in srgb, var(--t) 25%, transparent); box-shadow: 0 3px 0 color-mix(in srgb, var(--t) 30%, transparent); transition: transform .12s; }
.es-q:active { transform: translateY(2px); }
.es-q span { grid-area: a; font-weight: 700; } .es-q small { grid-area: b; font-size: 12px; color: var(--sm, var(--muted)); }
.es-q b { grid-area: c; padding: 7px 14px; border-radius: 12px; font-size: 13px; color: #10210a; background: linear-gradient(180deg, #d9f99d, #a3e635); box-shadow: 0 3px 0 #65a30d; }
.qx { --lime: #a3e635; display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 22px; margin: -6px -4px 0; border-radius: 30px; background: radial-gradient(120% 60% at 50% 0%, #0f3b33, #0b2420 70%); border: 1.5px solid #1f4d44; box-shadow: 0 20px 50px rgba(0,0,0,.35); color: #ecfdf5; min-height: 70vh; }
html[data-theme="light"] .qx { background: radial-gradient(120% 60% at 50% 0%, #134e4a, #0f2f2b 70%); }
.qx-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qx-x { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; font-size: 20px; font-weight: 800; color: #ecfdf5 !important; text-decoration: none; background: #134e48; border: 2px solid #3f8f6b; box-shadow: 0 4px 0 #0a2a25; }
.qx-x:active { transform: translateY(3px); box-shadow: 0 1px 0 #0a2a25; }
.qx-title { flex: 1; text-align: center; font-family: var(--fun); font-size: 17px; }
.qx-tm { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-family: var(--fun); font-size: 14px; color: var(--lime); border: 1.5px solid #3f8f6b; background: rgba(163,230,53,.06); }
.qx-tm.low { color: #f87171; border-color: #ef4444; animation: blink 1s steps(2) infinite; }
.qx-seg { display: flex; gap: 6px; } .qx-seg i { flex: 1; height: 7px; border-radius: 99px; background: rgba(255,255,255,.14); transition: background .3s, transform .3s; }
.qx-seg i.cur { background: #fff; transform: scaleY(1.2); } .qx-seg i.d-ok { background: var(--lime); } .qx-seg i.d-bad { background: #ef4444; }
.qx-meta { display: flex; justify-content: space-between; font-size: 13px; color: #a7c4bb; }
.qx-card.out { animation: qOut .26s ease-in both; }
.qx-q { padding: 20px 18px; border-radius: 22px; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.08); font-family: var(--fun); font-size: 19px; line-height: 1.7; animation: qIn .5s cubic-bezier(.2,.9,.3,1.2) both; }
.qx-o { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.qx-o button { position: relative; display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 14px; border-radius: 18px; font: inherit; font-size: 16px; font-weight: 700; text-align: start; color: #ecfdf5; background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.12); box-shadow: 0 4px 0 rgba(0,0,0,.25); cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .2s, background .2s; animation: xhUp .4s both; animation-delay: calc(var(--k) * 70ms + .15s); }
.qx-o button:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.qx-o button b { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-family: var(--fun); color: #a7c4bb; background: rgba(255,255,255,.08); }
.qx-o button span { flex: 1; }
.qx-o button em { width: 50px; height: 50px; flex: none; border-radius: 14px; display: none; place-items: center; font-style: normal; font-size: 24px; font-weight: 900; color: #fff; }
.qx-o button.ok { border-color: var(--lime); background: rgba(163,230,53,.10); box-shadow: 0 4px 0 #4d7c0f, 0 0 0 3px rgba(163,230,53,.15); animation: okPop .45s cubic-bezier(.3,1.6,.5,1); }
.qx-o button.ok b { background: var(--lime); color: #10210a; }
.qx-o button.ok em { display: grid; color: #10210a; background: linear-gradient(180deg, #d9f99d, #84cc16); box-shadow: inset 0 -4px 0 #4d7c0f, 0 6px 14px rgba(132,204,22,.4); animation: pop .4s cubic-bezier(.3,1.8,.5,1) both; }
.qx-o button.bad { border-color: #ef4444; background: rgba(239,68,68,.10); box-shadow: 0 4px 0 #991b1b; animation: shake .4s; }
.qx-o button.bad b { background: #ef4444; color: #fff; }
.qx-o button.bad em { display: grid; background: linear-gradient(180deg, #f87171, #dc2626); box-shadow: inset 0 -4px 0 #991b1b, 0 6px 14px rgba(220,38,38,.4); animation: pop .4s cubic-bezier(.3,1.8,.5,1) both; }
.qx-o button:disabled:not(.ok):not(.bad) { opacity: .5; }
.qx-spark { position: absolute; top: 50%; left: 40px; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); animation: spark .7s ease-out forwards; transform: rotate(var(--a)) translateX(0); }
@keyframes spark { to { transform: rotate(var(--a)) translateX(60px); opacity: 0; } }
.qx-e { margin-top: 14px; padding: 14px 16px; border-radius: 18px; font-size: 14.5px; line-height: 1.8; color: #cfe3dc; background: rgba(255,255,255,.05); animation: xhUp .35s both; } .qx-e b { color: #fff; }
.qx-next { position: relative; width: 100%; margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; padding: 8px 10px 8px 22px; border: 0; border-radius: 22px; cursor: pointer; font: inherit; font-family: var(--fun); font-size: 18px; font-weight: 800; color: #10210a;
background: linear-gradient(180deg, #e2fb9d, #a3e635 55%, #84cc16); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 5px 0 #4d7c0f, 0 14px 30px rgba(163,230,53,.35); animation: xhUp .35s .1s both, nxGlow 2s ease-in-out 1s infinite; }
.qx-next:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 1px 0 #4d7c0f; }
.qx-next i { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-style: normal; font-size: 22px; color: var(--lime); background: #0f2f2b; }
@keyframes nxGlow { 50% { box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 5px 0 #4d7c0f, 0 14px 40px rgba(163,230,53,.6); } }
.qx-end { text-align: center; } .qx-end h2 { font-family: var(--fun); color: #fff; }
.qx .qp-score b { color: #fff; } .qx .qp-score .qp-sc { stroke: var(--lime); } .qx .qp-score circle { stroke: rgba(255,255,255,.1); }
.qx-alt { display: block; margin: 12px 0 16px; font-weight: 700; color: var(--lime) !important; }
.qx .qp-rev div { background: rgba(255,255,255,.05); } .qx .qp-rev span { color: #ecfdf5; } .qx .qp-rev small { color: #a7c4bb; } .qx .qp-rev b { color: var(--lime); }
.sg-sec { display: flex; flex-direction: column; gap: 12px; }
.cd-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 10px; }
.cd { flex: none; width: 150px; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 20px; position: relative; background: linear-gradient(170deg, color-mix(in srgb, var(--t) 22%, var(--sb, var(--card))), var(--sb, var(--card))); border: 1px solid color-mix(in srgb, var(--t) 40%, transparent); animation: tileIn .5s both; animation-delay: calc(var(--i) * 80ms + .3s); }
.cd-ring { width: 62px; height: 62px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; position: relative; background: conic-gradient(var(--t) calc(var(--p) * 1%), color-mix(in srgb, var(--t) 15%, transparent) 0); animation: ringIn 1.2s cubic-bezier(.2,.8,.2,1) both; }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes ringIn { from { --p: 0; } }
.cd-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--sb, var(--card)); }
.cd-ring b, .cd-ring small { position: relative; } .cd-ring b { font-family: var(--fun); font-size: 22px; color: var(--t); } .cd-ring small { font-size: 10px; color: var(--sm, var(--muted)); }
.cd-ic { position: absolute; top: 12px; left: 12px; font-size: 22px; animation: icBob 3s ease-in-out infinite; }
.cd strong { margin-top: 6px; font-size: 14px; color: var(--st, var(--text)); line-height: 1.4; } .cd small { font-size: 11.5px; color: var(--sm, var(--muted)); }
.sg { position: relative; overflow-x: auto; scrollbar-width: thin; border-radius: 20px; padding: 10px 0 12px; background: color-mix(in srgb, var(--pc) 5%, var(--sb, var(--card))); border: 1px solid color-mix(in srgb, var(--pc) 22%, transparent);
background-image: radial-gradient(color-mix(in srgb, var(--pc) 22%, transparent) 1px, transparent 1.5px); background-size: 16px 16px; }
.sg > * { min-width: 720px; }
.sg-lines { position: absolute; top: 0; bottom: 0; inset-inline-start: 82px; width: 638px; min-width: 0; height: 100%; pointer-events: none; }
.sg-lines line { stroke: color-mix(in srgb, var(--pc) 30%, transparent); stroke-width: .25; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; animation: draw 1s ease-out both; animation-delay: calc(var(--k) * 80ms + .4s); }
.sg-lines line { stroke-width: 1; stroke-dasharray: 4 4; stroke-dashoffset: 0; animation: dashMove 12s linear infinite, fadeIn .8s both; }
@keyframes dashMove { to { stroke-dashoffset: -80; } } @keyframes fadeIn { from { opacity: 0; } }
.sg-hours { position: relative; height: 22px; display: flex; } .sg-hours span { width: 82px; flex: none; }
.sg-hours b { position: absolute; transform: translateX(50%); margin-inline-start: 82px; font-family: var(--fun); font-size: 12px; color: var(--sm, var(--muted)); }
.sg-row { display: flex; align-items: center; min-height: 64px; border-top: 1px dashed color-mix(in srgb, var(--pc) 18%, transparent); animation: xhUp .5s both; animation-delay: calc(var(--r) * 80ms + .5s); }
.sg-day { width: 82px; flex: none; position: sticky; inset-inline-start: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: stretch; font-family: var(--fun); font-size: 14px; font-weight: 800; color: var(--st, var(--text)); background: color-mix(in srgb, var(--pc) 8%, var(--sb, var(--card))); }
.sg-day i { font-style: normal; font-size: 10px; padding: 1px 7px; border-radius: 99px; color: #fff; background: var(--pc); animation: blink 1.2s steps(2) infinite; }
.sg-row.today { background: color-mix(in srgb, var(--pc) 10%, transparent); } .sg-row.today .sg-day { color: var(--pc); }
.sg-track { position: relative; flex: 1; height: 54px; }
.sg-b { position: absolute; top: 4px; bottom: 4px; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 14px; overflow: hidden; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--t) 70%, #fff), var(--t)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 6px 14px color-mix(in srgb, var(--t) 35%, transparent); transform-origin: right center; animation: barGrow .7s cubic-bezier(.2,1.2,.3,1) both; animation-delay: calc(var(--r) * 90ms + var(--j) * 120ms + .7s); }
@keyframes barGrow { from { transform: scaleX(0); opacity: 0; } }
.sg-b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(100%); animation: sheen 4s ease-in-out infinite; animation-delay: calc(var(--j) * .7s + 2s); }
.sg-ic { font-size: 18px; } .sg-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .sg-t b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sg-t small { font-size: 10.5px; opacity: .9; white-space: nowrap; }
.sg-legend { display: flex; flex-wrap: wrap; gap: 8px; } .sg-legend span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: var(--st, var(--text)); background: color-mix(in srgb, var(--t) 14%, transparent); }
.sg-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--t); }
@media (prefers-reduced-motion: reduce) { .ex-ic, .es-ic, .cd-ic, .sg-b::after, .sg-lines line, .qx-next, .ex-s::after { animation: none !important; } }
.sg { display: block !important; } .sg > .sg-row, .sg > .sg-hours { width: 720px; }
html body .ex-s strong, html body .es-q span { color: var(--st, var(--text)) !important; }
html body .ex-s, html body .es-q { color: var(--st, var(--text)) !important; }
.tm { position: relative; overflow: hidden; margin-inline: -16px; padding: 18px 16px 26px; color: #1e293b;
background: linear-gradient(170deg, #ffffff 0%, #fff1f2 30%, #eff6ff 65%, #ecfeff 100%); }
.tm-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .13; }
.tm-bg * { fill: none; stroke-width: 1.5; stroke-dasharray: 4 8; animation: tmdash 22s linear infinite; }
@keyframes tmdash { to { stroke-dashoffset: -240; } }
.tm > *:not(.tm-bg) { position: relative; }
.tm-clock { display: flex; align-items: center; justify-content: center; gap: 14px; }
.tm-face { width: 64px; height: 64px; flex: none; }
.tm-face circle:first-child { fill: #fff; stroke: #2563eb; stroke-width: 2.5; }
.tm-face line { stroke: #94a3b8; stroke-width: 1.5; stroke-linecap: round; }
.tm-face .tm-h { stroke: #0f172a; stroke-width: 3.5; }
.tm-face .tm-m { stroke: #ef4444; stroke-width: 2.2; }
.tm-face circle:last-child { fill: #ef4444; }
.tm-cd { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tm-cd small { font-size: 11.5px; color: #64748b; font-weight: 700; }
.tm-cd b { font-size: 16px; color: #dc2626; line-height: 1.35; }
.tm-cd span { font-size: 13px; font-weight: 700; color: #1d4ed8; }
.tm-days { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 16px 0 4px; justify-content: safe center; }
.tm-tab { flex: none; border: 0; background: none; color: #64748b; font: inherit; font-weight: 700; font-size: 13px;
padding: 6px 10px; border-radius: 999px; cursor: pointer; min-height: 34px; position: relative; }
.tm-tab.today::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #06b6d4; }
.tm-tab.on { background: #0f172a; color: #fff; }
.tm-cd .tm-now { font-size: 26px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.tm-root { display: none; }
.tm-trunk { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.tm-br { position: relative; overflow: hidden; padding: 12px 14px 14px; border-radius: 16px; background: #ffffffd9;
border-inline-start: 5px solid var(--t); box-shadow: 0 4px 14px color-mix(in srgb, var(--t) 18%, transparent);
animation: tmin .55s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: calc(var(--j) * .1s); }
@keyframes tmin { from { opacity: 0; transform: translateX(40px) scale(.95); } }
.tm-br::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--t) 14%, transparent) 50%, transparent 70%);
transform: translateX(100%); animation: tmshine 3.5s ease-in-out infinite; animation-delay: calc(1s + var(--j) * .4s); pointer-events: none; }
@keyframes tmshine { 60%, 100% { transform: translateX(-100%); } }
.tm-dot { display: none; }
.tm-card { display: flex; gap: 10px; align-items: center; }
.tm-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; font-size: 21px; border-radius: 13px;
background: color-mix(in srgb, var(--t) 15%, #fff); animation: tmbob 3s ease-in-out infinite; animation-delay: calc(var(--j) * .3s); }
@keyframes tmbob { 50% { transform: translateY(-3px) rotate(-6deg); } }
.tm-card > div { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tm-card b { font-size: 14px; line-height: 1.35; color: var(--t); }
.tm-time { align-self: flex-start; font-size: 11.5px; font-weight: 800; color: #fff; background: #1e3a8a; padding: 2px 8px; border-radius: 7px; }
.tm-card small { font-size: 11px; color: #64748b; }
.tm-cnt { flex: none; max-width: 92px; text-align: center; font-size: 11.5px; font-weight: 800; line-height: 1.4; color: var(--t);
background: color-mix(in srgb, var(--t) 12%, #fff); padding: 6px 8px; border-radius: 12px; }
.tm-bar { position: absolute; bottom: 0; inset-inline: 0; height: 4px; background: color-mix(in srgb, var(--t) 12%, transparent); }
.tm-bar i { display: block; height: 100%; width: 0; background: var(--t); border-radius: 0 4px 4px 0; transition: width 1.2s ease-out; }
.tm-br.live { box-shadow: 0 0 0 2px var(--t), 0 8px 22px color-mix(in srgb, var(--t) 35%, transparent); }
.tm-br.live .tm-cnt { background: var(--t); color: #fff; animation: tmlive 1.4s ease-in-out infinite; }
@keyframes tmlive { 50% { transform: scale(1.07); } }
.tm-br.done { opacity: .6; }
.tm-free { text-align: center; font-weight: 700; color: #0891b2; margin: 20px 0 6px; }
@media (prefers-reduced-motion: reduce) { .tm *, .tm-bg * { animation: none !important; } }
.tm-now small { font-size: 13px; color: #64748b; }
.xk { --bg: #0b1020; --fg: #f8fafc; --mu: #94a3b8; --cell: #ffffff0f; --cl: #ffffff1f;
position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 20px 18px 18px; color: var(--fg);
background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--t) 45%, transparent), transparent 60%),
radial-gradient(90% 80% at 0% 100%, #2563eb55, transparent 60%), var(--bg);
box-shadow: 0 18px 40px color-mix(in srgb, var(--t) 30%, transparent); }
:root[data-theme="light"] .xk { --bg: #ffffff; --fg: #0f172a; --mu: #64748b; --cell: #f1f5f9; --cl: #e2e8f0;
background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--t) 22%, transparent), transparent 60%),
radial-gradient(90% 80% at 0% 100%, #2563eb1f, transparent 60%), #fff;
border: 1px solid color-mix(in srgb, var(--t) 25%, #e2e8f0); }
.xk::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; padding: 2px;
background: conic-gradient(from var(--a, 0deg), transparent 0 70%, var(--t) 85%, #06b6d4 95%, transparent);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
animation: xkspin 4s linear infinite; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes xkspin { to { --a: 360deg; } }
.xk-glow { position: absolute; width: 180px; height: 180px; top: -60px; left: -50px; z-index: -1; border-radius: 50%;
background: var(--t); filter: blur(60px); opacity: .35; animation: xkfloat 7s ease-in-out infinite alternate; }
@keyframes xkfloat { to { transform: translate(120px, 90px) scale(1.3); } }
.xk-orb { position: absolute; z-index: -1; width: 170px; height: 170px; top: -40px; left: -40px; opacity: .55; animation: xkrot 22s linear infinite; }
.xk-orb circle { fill: none; stroke: color-mix(in srgb, var(--t) 60%, transparent); stroke-width: 1; stroke-dasharray: 3 6; }
.xk-orb .xk-sat { fill: var(--t); stroke: none; filter: drop-shadow(0 0 4px var(--t)); }
.xk-orb .xk-sat2 { fill: #06b6d4; }
@keyframes xkrot { to { transform: rotate(360deg); } }
.xk-top { display: flex; align-items: center; gap: 12px; }
.xk-ic { flex: none; width: 54px; height: 54px; display: grid; place-items: center; font-size: 28px; border-radius: 18px;
background: color-mix(in srgb, var(--t) 22%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t) 55%, transparent);
animation: xkbob 3s ease-in-out infinite; }
@keyframes xkbob { 50% { transform: translateY(-4px) rotate(-8deg); } }
.xk-top > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xk-lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .3px; color: var(--t); }
.xk-name { font-size: 19px; line-height: 1.3; }
.xk-meta { font-size: 12px; color: var(--mu); }
.xk-clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.xk-u { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0 8px; border-radius: 16px; background: var(--cell); border: 1px solid var(--cl); }
.xk-u b { font: 800 clamp(22px, 7.5vw, 30px)/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--fg); }
.xk-u:first-child b { color: var(--t); }
.xk-u small { font-size: 10.5px; font-weight: 700; color: var(--mu); }
.xk-u b.flip { animation: xkflip .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes xkflip { from { transform: translateY(-60%) scale(.8); opacity: 0; filter: blur(3px); } }
.xk-say { margin: 14px 0 0; text-align: center; font-size: 13.5px; font-weight: 800; color: var(--fg); }
.xk.xk-hot .xk-u:first-child { background: color-mix(in srgb, #ef4444 18%, transparent); border-color: #ef4444; animation: xkpulse 1.2s ease-in-out infinite; }
@keyframes xkpulse { 50% { box-shadow: 0 0 0 6px #ef444433; } }
.xt { list-style: none; margin: 4px 0 0; padding: 0 22px 0 0; position: relative; display: flex; flex-direction: column; gap: 10px; }
.xt::before { content: ""; position: absolute; top: 8px; bottom: 8px; right: 7px; width: 2px; border-radius: 2px;
background: linear-gradient(var(--primary, #ea580c), #2563eb, #06b6d4); opacity: .6; }
.xt-i { position: relative; opacity: 0; transform: translateX(-24px); transition: opacity .5s, transform .6s cubic-bezier(.2,.9,.3,1.2); transition-delay: calc(var(--i) * .08s); }
.xt-i.in { opacity: 1; transform: none; }
.xt-node { position: absolute; right: -22px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
background: var(--t); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 22%, transparent); }
.xt-hot .xt-node { animation: xkpulse 1.2s ease-in-out infinite; }
.xt-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px;
background: color-mix(in srgb, var(--t) 9%, var(--surface, #111827)); border: 1px solid color-mix(in srgb, var(--t) 30%, transparent); }
:root[data-theme="light"] .xt-card { background: color-mix(in srgb, var(--t) 7%, #fff); }
.xt-date { flex: none; width: 50px; text-align: center; padding: 6px 0; border-radius: 13px; background: var(--t); color: #fff; line-height: 1.1; }
.xt-dd { display: block; font-size: 21px; font-weight: 800; }
.xt-mm { font-size: 10.5px; font-weight: 700; }
.xt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xt-body strong { font-size: 14px; color: var(--text); }
.xt-body small { font-size: 11px; color: var(--muted); }
.xt-left { flex: none; display: flex; flex-direction: column; align-items: center; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.xt-left b { font-size: 20px; line-height: 1; color: var(--t); }
@media (prefers-reduced-motion: reduce) { .xk *, .xk::before, .xt-i { animation: none !important; transition: none !important; } .xt-i { opacity: 1; transform: none; } }
.i3d { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.i3d-s { width: 1.25em; height: 1.25em; vertical-align: -.25em; filter: none; }
.hic .i3d { width: 22px; height: 22px; }
.ex-ic, .es-ic, .xk-ic, .tm-ic { overflow: visible; }
:root:not([data-theme="light"]) .tm { color: #e2e8f0;
background: radial-gradient(90% 60% at 100% 0%, #ef444426, transparent 60%), radial-gradient(90% 60% at 0% 100%, #06b6d426, transparent 60%), linear-gradient(170deg, #0b1020, #0f172a 55%, #0b1324); }
:root:not([data-theme="light"]) .tm-bg { opacity: .22; }
:root:not([data-theme="light"]) .tm-face circle:first-child { fill: #0f172a; stroke: #60a5fa; }
:root:not([data-theme="light"]) .tm-face .tm-h { stroke: #f8fafc; }
:root:not([data-theme="light"]) .tm-face line { stroke: #475569; }
:root:not([data-theme="light"]) .tm-cd .tm-now { color: #f8fafc; }
:root:not([data-theme="light"]) .tm-cd small, :root:not([data-theme="light"]) .tm-now small { color: #94a3b8; }
:root:not([data-theme="light"]) .tm-cd b { color: #f87171; }
:root:not([data-theme="light"]) .tm-cd span { color: #60a5fa; }
:root:not([data-theme="light"]) .tm-tab { color: #94a3b8; }
:root:not([data-theme="light"]) .tm-tab.on { background: linear-gradient(135deg, #ef4444, #2563eb); color: #fff; }
:root:not([data-theme="light"]) .tm-br { background: color-mix(in srgb, var(--t) 10%, #111827e6); box-shadow: 0 6px 18px #0006; }
:root:not([data-theme="light"]) .tm-card b { color: color-mix(in srgb, var(--t) 70%, #fff); }
:root:not([data-theme="light"]) .tm-card small { color: #94a3b8; }
:root:not([data-theme="light"]) .tm-ic { background: color-mix(in srgb, var(--t) 22%, #0f172a); }
:root:not([data-theme="light"]) .tm-time { background: #2563eb; }
:root:not([data-theme="light"]) .tm-cnt { background: color-mix(in srgb, var(--t) 20%, #0f172a); color: color-mix(in srgb, var(--t) 65%, #fff); }
:root:not([data-theme="light"]) .tm-free { color: #22d3ee; }
.tm-clock { justify-content: flex-start; gap: 10px; }
.tm-clock .tm-face { width: 46px; height: 46px; }
.tm-clock > div { display: flex; flex-direction: column; line-height: 1.15; }
.tm-clock small { font-size: 11px; font-weight: 700; color: #64748b; }
.tm-now { font-size: 22px; font-weight: 800; color: #0f172a; }
.tm-nx { --bg: #ffffff; --fg: #0f172a; --mu: #64748b; --cell: #f1f5f9;
position: relative; overflow: hidden; isolation: isolate; margin-top: 12px; padding: 14px 14px 18px; border-radius: 22px;
background: linear-gradient(135deg, color-mix(in srgb, var(--t) 14%, var(--bg)), var(--bg) 60%); color: var(--fg);
border: 1.5px solid color-mix(in srgb, var(--t) 40%, transparent); box-shadow: 0 12px 30px color-mix(in srgb, var(--t) 22%, transparent);
animation: nxin .6s cubic-bezier(.2,.9,.3,1.2) both; }
:root:not([data-theme="light"]) .tm-nx { --bg: #0f172a; --fg: #f8fafc; --mu: #94a3b8; --cell: #ffffff10; }
:root:not([data-theme="light"]) .tm-clock small { color: #94a3b8; }
:root:not([data-theme="light"]) .tm-now { color: #f8fafc; }
@keyframes nxin { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.tm-nx-glow { position: absolute; z-index: -1; width: 160px; height: 160px; top: -70px; left: -50px; border-radius: 50%;
background: var(--t); filter: blur(55px); opacity: .35; animation: xkfloat 6s ease-in-out infinite alternate; }
.tm-nx-lbl { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
background: color-mix(in srgb, var(--t) 16%, transparent); color: var(--t); font-size: 11.5px; font-weight: 800; }
.tm-nx-lbl i { width: 8px; height: 8px; border-radius: 50%; background: var(--t); animation: nxblink 1.4s ease-in-out infinite; }
.tm-nx.live .tm-nx-lbl { background: #ef4444; color: #fff; } .tm-nx.live .tm-nx-lbl i { background: #fff; }
@keyframes nxblink { 50% { opacity: .2; transform: scale(.6); } }
.tm-nx-top { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.tm-nx-ic { flex: none; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px;
background: color-mix(in srgb, var(--t) 18%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t) 45%, transparent);
animation: xkbob 3s ease-in-out infinite; }
.tm-nx-ic .i3d { width: 80%; height: 80%; }
.tm-nx-top > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tm-nx-n { font-size: 18px; line-height: 1.3; color: var(--fg); }
.tm-nx-w { font-size: 12px; font-weight: 700; color: var(--mu); }
.tm-nx-cd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.tm-nx-cd > div { display: flex; flex-direction: column; align-items: center; padding: 9px 0 7px; border-radius: 14px; background: var(--cell);
border: 1px solid color-mix(in srgb, var(--t) 22%, transparent); }
.tm-nx-cd b { font: 800 26px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--fg); }
.tm-nx-cd > div:first-child b { color: var(--t); }
.tm-nx-cd small { font-size: 10.5px; font-weight: 700; color: var(--mu); margin-top: 3px; }
.tm-nx-cd b.flip { animation: xkflip .45s cubic-bezier(.3,1.4,.5,1); }
.tm-nx-say { display: block; margin-top: 10px; text-align: center; font-size: 12.5px; font-weight: 800; color: var(--fg); }
.tm-nx-bar { position: absolute; bottom: 0; inset-inline: 0; height: 5px; background: color-mix(in srgb, var(--t) 15%, transparent); }
.tm-nx-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--t), #06b6d4); border-radius: 0 5px 5px 0; transition: width 1s linear; }
.tm-br.done { opacity: 1; border-inline-start-color: #22c55e; }
.tm-br.done .tm-time { background: #16a34a; }
.tm-br.done .tm-cnt { background: #22c55e; color: #fff; }
.tm-br.done .tm-bar i { background: #22c55e; }
.tm-br.done .tm-ic { filter: grayscale(.5); }
.tm-br.done::after { display: none; }
.tm-br.done .tm-card::after { content: "تمّت"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -12deg;
padding: 2px 14px; border: 2.5px solid #22c55e; border-radius: 10px; color: #22c55e; font-size: 20px; font-weight: 900; letter-spacing: 1px;
opacity: .22; pointer-events: none; animation: nxstamp .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes nxstamp { from { opacity: 0; scale: 2.2; } }
.tm-end { display: none; margin-top: 12px; padding: 12px; border-radius: 16px; text-align: center; font-size: 13.5px; font-weight: 800;
color: #15803d; background: linear-gradient(135deg, #dcfce7, #ecfeff); border: 1.5px dashed #22c55e; animation: nxin .6s both; }
:root:not([data-theme="light"]) .tm-end { color: #86efac; background: linear-gradient(135deg, #14532d66, #164e6355); }
.tm-day.ended .tm-end { display: block; }
@media (prefers-reduced-motion: reduce) { .tm-nx, .tm-nx *, .tm-end, .tm-br.done .tm-card::after { animation: none !important; } }
.tm-nx { border-color: transparent; padding: 16px 16px 20px; }
.tm-nx::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
background: conic-gradient(from var(--a, 0deg), color-mix(in srgb, var(--t) 25%, transparent) 0 60%, var(--t) 80%, #06b6d4 92%, color-mix(in srgb, var(--t) 25%, transparent));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
animation: xkspin 5s linear infinite; }
.tm-nx::after { content: ""; position: absolute; inset: 0 0 auto; height: 45%; z-index: -1; border-radius: 22px 22px 0 0;
background: linear-gradient(#ffffff14, transparent); pointer-events: none; }
.tm-nx-ring { position: relative; flex: none; width: 70px; height: 70px; display: grid; place-items: center; }
.tm-nx-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.tm-nx-ring circle { fill: none; stroke: color-mix(in srgb, var(--t) 18%, transparent); stroke-width: 4; }
.tm-nx-ring .tm-nx-arc { stroke: var(--t); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 4px var(--t)); }
.tm-nx-ring .tm-nx-ic { width: 54px; height: 54px; border-radius: 50%; box-shadow: none; }
.tm-nx-n { font-size: 19px; font-weight: 800; letter-spacing: -.2px; }
.tm-nx-cd { position: relative; gap: 0; padding: 4px; border-radius: 18px; background: var(--cell);
border: 1px solid color-mix(in srgb, var(--t) 22%, transparent); }
.tm-nx-cd > div { background: none; border: 0; position: relative; padding: 8px 0 6px; }
.tm-nx-cd > div + div::before { content: ":"; position: absolute; right: -4px; top: 6px; font: 800 24px/1 system-ui; color: var(--t); opacity: .55;
animation: nxblink 1s steps(2) infinite; }
.tm-nx-cd b { font-size: 30px; letter-spacing: 1px;
background: linear-gradient(180deg, var(--fg) 55%, color-mix(in srgb, var(--fg) 55%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tm-nx-cd > div:first-child b { background: linear-gradient(180deg, var(--t), color-mix(in srgb, var(--t) 60%, #06b6d4)); -webkit-background-clip: text; background-clip: text; }
.tm-nx-say { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px auto 0; width: max-content; max-width: 100%;
padding: 5px 14px; border-radius: 999px; background: color-mix(in srgb, var(--t) 12%, transparent); font-size: 12px; }
.tm-nx.live { animation: nxin .6s both, nxlive 2s ease-in-out infinite; }
@keyframes nxlive { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 25%, transparent), 0 12px 30px color-mix(in srgb, var(--t) 30%, transparent); } }
.xt-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px 2px 4px; font-size: 15px; }
.xt-h span { display: inline-flex; align-items: center; gap: 8px; }
.xt-h span::before { content: ""; width: 4px; height: 16px; border-radius: 4px; background: linear-gradient(#ef4444, #2563eb); }
.xt-h small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.xt-left { gap: 1px; min-width: 44px; padding: 5px 6px; border-radius: 12px; background: color-mix(in srgb, var(--t) 12%, transparent); }
.xt-left small { font-size: 9.5px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .tm-nx::before, .tm-nx-cd > div + div::before { animation: none !important; } }
.tm-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 12px 6px; border-radius: 14px; }
.tm-dots { display: flex; gap: 3px; height: 4px; }
.tm-dots s { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; }
.tm-tab.today::after { display: none; }
.tm-tab.today:not(.on) { color: #06b6d4; }
.dv { position: relative; display: block; height: calc(var(--hh) * var(--n) + 16px); margin-top: 10px; padding: 0; }
.dv::before { content: ""; position: absolute; top: 8px; bottom: 8px; right: 40px; width: 1.5px; margin: 0;
background: linear-gradient(#ef4444, #2563eb, #06b6d4); opacity: .5; animation: tmgrow .8s ease-out both; left: auto; }
.dv-h { position: absolute; right: 0; width: 34px; top: calc(8px + var(--k) * var(--hh)); translate: 0 -50%;
display: flex; align-items: baseline; justify-content: center; gap: 2px; color: #64748b; }
.dv-h b { font: 800 13px/1 system-ui, sans-serif; }
.dv-h small { font-size: 9px; font-weight: 700; }
.dv { background: repeating-linear-gradient(to bottom, #94a3b82e 0 1px, transparent 1px var(--hh)) 0 8px / calc(100% - 46px) calc(100% - 16px) no-repeat; }
:root:not([data-theme="light"]) .dv-h { color: #64748b; }
:root .dv .tm-br, :root:not([data-theme="light"]) .dv .tm-br { position: absolute; right: 50px; left: 0; width: auto; top: calc(8px + var(--y) * var(--hh) + 3px);
height: calc(var(--l) * var(--hh) - 6px); min-height: 64px; padding: 10px 12px; margin: 0; border: 0; border-radius: 18px; overflow: hidden;
color: #fff; background: linear-gradient(135deg, var(--t), color-mix(in srgb, var(--t) 55%, #1e1b4b));
box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--t) 60%, transparent), inset 0 1px 0 #ffffff40;
animation: dvin .7s cubic-bezier(.2,.9,.25,1.15) both; animation-delay: calc(.2s + var(--j) * .12s); }
@keyframes dvin { from { opacity: 0; transform: translateX(-30px) scale(.9); clip-path: inset(0 0 0 100% round 18px); } to { clip-path: inset(0 round 18px); } }
.dv .tm-br::before { content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(120px 80px at 0% 0%, #ffffff30, transparent 70%), radial-gradient(140px 100px at 100% 120%, #00000030, transparent 70%); }
.dv .tm-br.sec::before { background: repeating-linear-gradient(-45deg, #ffffff14 0 8px, transparent 8px 16px), radial-gradient(120px 80px at 0% 0%, #ffffff30, transparent 70%); }
.dv .tm-br::after { background: linear-gradient(100deg, transparent 35%, #ffffff35 50%, transparent 65%); }
.dv .tm-card { position: relative; height: 100%; align-items: flex-start; gap: 10px; flex-direction: row; text-align: start; }
.dv .tm-ic { width: 46px; height: 46px; border-radius: 14px; background: #ffffff26; box-shadow: inset 0 0 0 1px #ffffff40; backdrop-filter: blur(4px); }
.dv .tm-ic .i3d { width: 84%; height: 84%; filter: drop-shadow(0 4px 6px #0005); }
.dv .tm-card > div { align-items: flex-start; gap: 3px; }
.dv .tm-card b, :root:not([data-theme="light"]) .dv .tm-card b { color: #fff; font-size: 14.5px; text-shadow: 0 1px 2px #0003; }
.dv .tm-time, :root:not([data-theme="light"]) .dv .tm-time { background: #0000002e; color: #fff; padding: 2px 8px; border-radius: 8px; font-size: 11.5px; }
.dv .tm-card small, :root:not([data-theme="light"]) .dv .tm-card small { color: #ffffffd0; }
.dv .tm-card small .i3d-s { filter: drop-shadow(0 1px 1px #0004); }
.dv .tm-cnt, :root:not([data-theme="light"]) .dv .tm-cnt { margin-inline-start: auto; align-self: flex-start; background: #ffffff; color: var(--t); font-size: 11px;
padding: 5px 9px; border-radius: 999px; box-shadow: 0 4px 10px #0002; white-space: nowrap; max-width: none; }
.dv .tm-bar { height: 4px; background: #ffffff26; }
.dv .tm-bar i { background: #fff; }
.dv .tm-br.live { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--t), 0 14px 30px -6px var(--t); z-index: 2; }
.dv .tm-br.live .tm-cnt { background: #ef4444; color: #fff; }
:root .dv .tm-br.done, :root:not([data-theme="light"]) .dv .tm-br.done { opacity: 1; background: linear-gradient(135deg, color-mix(in srgb, var(--t) 35%, #334155), #1e293b); box-shadow: none; }
:root[data-theme="light"] .dv .tm-br.done { background: linear-gradient(135deg, color-mix(in srgb, var(--t) 25%, #cbd5e1), #94a3b8); }
.dv .tm-br.done .tm-ic { filter: grayscale(.7); }
.dv .tm-br.done .tm-time { background: #0000002e; }
.dv .tm-br.done .tm-cnt { background: #22c55e; color: #fff; }
.dv .tm-br.done .tm-card::after { content: "✓"; left: auto; right: auto; inset-inline-end: 6px; top: auto; bottom: 0; translate: none; rotate: 0deg;
border: 0; padding: 0; font-size: 46px; line-height: 1; color: #22c55e; opacity: .35; }
.dv-now[hidden] { display: none; }
.dv-now { position: absolute; z-index: 3; right: 34px; left: 0; top: calc(8px + var(--y) * var(--hh)); height: 0; pointer-events: none; transition: top 1s linear; }
.dv-now::before { content: ""; position: absolute; inset-inline: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, #ef4444 30%);
box-shadow: 0 0 10px #ef4444; }
.dv-now i { position: absolute; right: 0; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #ef4444;
box-shadow: 0 0 0 4px #ef444440; animation: xkpulse 1.4s ease-in-out infinite; }
.dv-now b { position: absolute; right: 16px; top: -21px; padding: 1px 7px; border-radius: 6px; background: #ef4444; color: #fff; font: 800 10.5px/1.5 system-ui; }
@media (prefers-reduced-motion: reduce) { .dv .tm-br, .dv::before { animation: none !important; } }
.dv .tm-card b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dv .tm-card > div { overflow: hidden; }
.dv-gap { position: absolute; right: 50px; left: 0; top: calc(8px + var(--y) * var(--hh)); height: calc(var(--l) * var(--hh)); display: grid; place-items: center; pointer-events: none; }
.dv-gap b { padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #64748b; border: 1.5px dashed #94a3b866;
background: color-mix(in srgb, #94a3b8 10%, transparent); animation: dvgap 3s ease-in-out infinite; }
@keyframes dvgap { 50% { transform: translateY(-3px); } }
.li { width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tm-nx-say .li, .xk-say .li { color: var(--t); }
.tm-nx-say, .xk-say { display: flex; align-items: center; justify-content: center; gap: 6px; }
.tm-end .li, .tm-free .li { color: #22c55e; width: 1.3em; height: 1.3em; }
.dv-gap .li { color: #f59e0b; }
.tm-cnt .li { width: 1em; height: 1em; stroke-width: 3; }
.dv { --nm: #f8fafc; --tc: #38bdf8; --mu: #94a3b8; }
:root[data-theme="light"] .dv { --nm: #0f172a; --tc: #2563eb; --mu: #64748b; }
:root .dv .tm-br, :root:not([data-theme="light"]) .dv .tm-br, :root .dv .tm-br.done, :root:not([data-theme="light"]) .dv .tm-br.done {
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--t) 7%, transparent)); box-shadow: none; border-radius: 0 14px 14px 0;
padding: 6px 18px 6px 4px; overflow: visible; color: var(--nm); animation: v3in .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.15s + var(--j) * .12s); }
@keyframes v3in { from { opacity: 0; transform: translateX(-18px); } }
.dv .tm-br::before, .dv .tm-br.sec::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 4px; border-radius: 4px; background: var(--t);
transform-origin: top; animation: v3bar .7s cubic-bezier(.6,0,.2,1) both; animation-delay: inherit; }
@keyframes v3bar { from { transform: scaleY(0); } }
.dv .tm-br.sec::before { background: repeating-linear-gradient(var(--t) 0 6px, transparent 6px 10px); }
.dv .tm-br::after { display: none; }
.dv .tm-card { align-items: flex-start; gap: 10px; }
.dv .tm-ic { width: 34px; height: 34px; background: none; box-shadow: none; backdrop-filter: none; border-radius: 0; margin-top: 2px; }
.dv .tm-ic .i3d { width: 100%; height: 100%; }
.dv .tm-card > div { padding-top: 0; gap: 2px; }
.dv .tm-card b, :root:not([data-theme="light"]) .dv .tm-card b { color: var(--nm); font-size: 15px; font-weight: 800; text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv .tm-time, :root:not([data-theme="light"]) .dv .tm-time { order: -1; background: none; padding: 0; color: var(--tc); font: 800 12.5px/1.3 system-ui, sans-serif;
font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.dv .tm-card small, :root:not([data-theme="light"]) .dv .tm-card small { color: var(--mu); font-size: 11.5px; }
.dv .tm-cnt, :root:not([data-theme="light"]) .dv .tm-cnt { position: static; margin-inline-start: auto; background: none; box-shadow: none; padding: 3px 0 0;
color: var(--mu); font-size: 11.5px; font-weight: 700; }
.dv .tm-bar { inset: 0 0 0 auto; width: 4px; height: auto; border-radius: 4px; background: none; overflow: hidden; }
.dv .tm-bar i { width: 100% !important; height: 0; background: linear-gradient(transparent, #ffffffcc); border-radius: 0; }
.dv .tm-br.sec .tm-card b::after { content: " · سكشن"; font-size: 11px; font-weight: 700; color: var(--mu); }
.dv .tm-br.live::before { box-shadow: 0 0 12px var(--t), 0 0 2px var(--t); }
.dv .tm-br.live .tm-bar i { height: 30%; animation: v3run 1.8s linear infinite; }
@keyframes v3run { from { transform: translateY(-100%); } to { transform: translateY(340%); } }
.dv .tm-br.live .tm-cnt, :root:not([data-theme="light"]) .dv .tm-br.live .tm-cnt { color: #ef4444; background: none; animation: nxblink 1.6s ease-in-out infinite; }
:root .dv .tm-br.live, :root:not([data-theme="light"]) .dv .tm-br.live { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--t) 16%, transparent)); box-shadow: none; }
.dv .tm-br.done::before { background: #22c55e; }
.dv .tm-br.done .tm-card b { color: var(--mu); }
.dv .tm-br.done .tm-time { color: var(--mu); }
.dv .tm-br.done .tm-cnt, :root:not([data-theme="light"]) .dv .tm-br.done .tm-cnt { color: #22c55e; background: none; }
.dv .tm-br.done .tm-card::after { display: none; }
.dv .tm-br.done .tm-ic { filter: grayscale(1); opacity: .6; }
.dv-gap b, :root:not([data-theme="light"]) .dv-gap b { background: none; box-shadow: none; border: 0; padding: 0; color: var(--mu); font-size: 11.5px; animation: none; }
.dv-gap::before, .dv-gap::after { content: ""; flex: 1; height: 0; border-top: 1px dashed color-mix(in srgb, var(--mu) 40%, transparent); }
.dv-gap { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.dv-cup em { display: none; }
@media (prefers-reduced-motion: reduce) { .dv .tm-br, .dv .tm-br::before, .dv .tm-bar i { animation: none !important; } }
.dv .tm-br.sec .tm-card b::after { content: none; }
.dv .tm-card b, :root:not([data-theme="light"]) .dv .tm-card b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.tm { --nm: #f1f5f9; --tc: #7dd3fc; --mu: #8b9ab0; --ln: #ffffff14; font-family: "Almarai", system-ui, sans-serif; }
:root[data-theme="light"] .tm { --nm: #0f172a; --tc: #1d4ed8; --mu: #64748b; --ln: #0f172a12; }
.tm-days { position: relative; isolation: isolate; display: flex; gap: 0; margin: 16px -4px 8px; padding: 5px; border-radius: 20px;
background: color-mix(in srgb, var(--nm) 6%, transparent); border: 1px solid var(--ln); overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.tm-ind { position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 15px;
background: linear-gradient(135deg, #ef4444, #7c3aed 55%, #2563eb); box-shadow: 0 8px 20px -6px #7c3aedaa;
transition: transform .45s cubic-bezier(.3,1.3,.5,1), width .45s cubic-bezier(.3,1.3,.5,1); }
.tm-tab, :root:not([data-theme="light"]) .tm-tab { position: relative; flex: 1 0 auto; min-width: 76px; display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 9px 8px 8px; border: 0; border-radius: 15px; background: none !important; color: var(--mu); font-family: inherit; cursor: pointer; transition: color .3s; }
.tm-tab + .tm-tab::before { content: ""; position: absolute; right: 0; top: 30%; height: 40%; width: 1px; background: var(--ln); }
.tm-dn { font-size: 14px; font-weight: 800; color: var(--nm); transition: color .3s; }
.tm-dc { font-size: 10px; font-weight: 700; white-space: nowrap; }
.tm-td { position: absolute; top: -1px; left: 50%; translate: -50% -50%; padding: 0 7px; border-radius: 999px; background: #06b6d4; color: #fff;
font: 800 9px/1.6 inherit; font-style: normal; box-shadow: 0 2px 6px #06b6d466; }
.tm-tab.on .tm-dn, .tm-tab.on .tm-dc { color: #fff; }
.tm-tab.on::before, .tm-tab.on + .tm-tab::before { opacity: 0; }
.tm-tab:not(.on):active { transform: scale(.95); }
.tm-days { padding-top: 10px; }
.ag { display: flex; flex-direction: column; gap: 0; margin-top: 6px; padding: 0; }
.ag::before { display: none; }
.tm .ag .tm-br, :root:not([data-theme="light"]) .tm .ag .tm-br { position: relative; display: grid; grid-template-columns: 50px 22px 1fr; align-items: stretch;
width: auto; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; color: var(--nm);
animation: aga .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.1s + var(--j) * .09s); }
@keyframes aga { from { opacity: 0; transform: translateY(12px); } }
.tm .ag .tm-br::after, .tm .ag .tm-br::before { display: none; }
.ag-t { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 0; font-variant-numeric: tabular-nums; }
.ag-t b { font: 800 15px/1.1 system-ui, sans-serif; color: var(--tc); letter-spacing: .3px; }
.ag-t small { margin-top: 4px; font: 700 11px/1 system-ui, sans-serif; color: var(--mu); }
.ag-rail { position: relative; display: flex; justify-content: center; }
.ag-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ln); }
.ag-i:first-of-type .ag-rail::before { top: 18px; }
.ag-i:last-child .ag-rail::before { bottom: calc(100% - 18px); }
.ag-rail i { position: relative; z-index: 1; margin-top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--t);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 22%, transparent); animation: agpop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(.25s + var(--j) * .09s); }
.ag-i.sec .ag-rail i { background: none; border: 2.5px solid var(--t); }
@keyframes agpop { from { scale: 0; } }
.tm .ag .tm-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px 12px 0; border-bottom: 1px solid var(--ln); background: none; flex-direction: row; text-align: start; }
.ag-i:last-child .tm-card { border-bottom: 0; }
.tm .ag .tm-ic, :root:not([data-theme="light"]) .tm .ag .tm-ic { width: 36px; height: 36px; flex: none; background: none; box-shadow: none; border-radius: 0; animation: none; }
.tm .ag .tm-ic .i3d { width: 100%; height: 100%; }
.tm .ag .tm-card > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.tm .ag .tm-card b, :root:not([data-theme="light"]) .tm .ag .tm-card b { color: var(--nm); font-size: 14.5px; font-weight: 800; line-height: 1.4; text-shadow: none; }
.tm .ag .tm-card small, :root:not([data-theme="light"]) .tm .ag .tm-card small { color: var(--mu); font-size: 11.5px; }
.tm .ag .tm-cnt, :root:not([data-theme="light"]) .tm .ag .tm-cnt { flex: none; margin-top: 2px; padding: 3px 9px; border-radius: 999px; max-width: none; white-space: nowrap;
font-size: 11px; font-weight: 800; color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent); box-shadow: none; animation: none; }
.tm .ag .tm-bar { display: none; }
.tm .ag .tm-br.live .ag-rail i { animation: xkpulse 1.3s ease-in-out infinite; background: #ef4444; box-shadow: 0 0 0 4px #ef444440; }
.tm .ag .tm-br.live .ag-t b { color: #ef4444; }
.tm .ag .tm-br.live .tm-cnt { color: #fff; background: #ef4444; }
.tm .ag .tm-br.live .tm-card b::after { content: "  الآن"; font-size: 10.5px; color: #ef4444; }
.tm .ag .tm-br.done { opacity: 1; }
.tm .ag .tm-br.done .ag-rail i { background: #22c55e; border-color: #22c55e; box-shadow: none; }
.tm .ag .tm-br.done .ag-t b, .tm .ag .tm-br.done .tm-card b { color: var(--mu); }
.tm .ag .tm-br.done .tm-ic { filter: grayscale(1); opacity: .55; }
.tm .ag .tm-br.done .tm-cnt { color: #22c55e; background: color-mix(in srgb, #22c55e 12%, transparent); }
.tm .ag .tm-br.done .tm-card::after { display: none; }
.ag-gap { display: grid; grid-template-columns: 50px 22px 1fr; align-items: center; font-size: 11px; font-weight: 700; color: #f59e0b; }
.ag-gap { position: relative; padding: 4px 0 4px 0; padding-inline-start: 72px; display: flex; gap: 6px; }
.ag-gap::before { content: ""; position: absolute; inset-inline-start: 60px; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(var(--ln) 0 4px, transparent 4px 8px); }
.ag-gap .li { color: #f59e0b; }
.tm-free { color: var(--mu); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .tm .ag .tm-br, .ag-rail i, .tm-ind { animation: none !important; transition: none !important; } }
.tm .ag { --pg: #160D1A; --tx: #f1f5f9; --mu: #94a3b8; --tl1: #34343f; --tl2: #1d1d26; --ln: #ffffff14; }
:root[data-theme="light"] .tm .ag { --tx: #0f172a; --mu: #64748b; --tl1: #ffffff; --tl2: #eef2f7; --ln: #e2e8f0; }
.tm .ag .tm-br.lc, :root:not([data-theme="light"]) .tm .ag .tm-br.lc {
display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 14px 0; margin: 0;
background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; color: var(--tx);
animation: aga .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.1s + var(--j) * .09s); }
.tm .ag .tm-br.lc + .tm-br.lc, .tm .ag .ag-gap + .tm-br.lc { border-top: 1px dashed var(--ln); }
.tm .ag .tm-br.lc::before, .tm .ag .tm-br.lc::after { display: none; }
.lc .tb { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 8px 9px; border-radius: 16px;
background: color-mix(in srgb, var(--sc) 8%, var(--tl1));
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sc) 28%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--sc) 55%, transparent); }
.lc .fl { display: flex; gap: 2px; direction: ltr; perspective: 300px; }
.lc .fl i { font: 800 26px/1 var(--num); font-style: normal; color: var(--tx); width: 21px; text-align: center; padding: 4px 0 2px;
border-radius: 6px; position: relative; background: linear-gradient(var(--tl1), var(--tl1) 49%, var(--tl2) 51%, var(--tl2));
box-shadow: 0 1px 0 var(--ln), 0 5px 12px #0f172a26, inset 0 1px 0 #ffffff33;
animation: lcflip .75s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--j) * .1s + var(--d) * .1s + .2s); }
.lc .fl i::after { content: ""; position: absolute; inset: 50% 2px auto; height: 1px; background: #0f172a2e; }
.lc .fl i.k { width: 7px; background: none; box-shadow: none; color: var(--sc); animation: lcblink 1s steps(2) infinite; }
.lc .fl i.k::after { display: none; }
@keyframes lcflip { 0% { transform: rotateX(-100deg); filter: brightness(.6); } }
@keyframes lcblink { 50% { opacity: .45; } }
.lc .tb em { font: 800 10px/1 "Almarai", sans-serif; font-style: normal; color: #fff; background: color-mix(in srgb, var(--sc) 88%, #000); border-radius: 999px; padding: 4px 8px; }
.tm .ag .lc .tm-card { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 0; border: 0; min-width: 0; }
.lc .tl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm .ag .lc .tl b, :root:not([data-theme="light"]) .tm .ag .lc .tl b { font: 700 19px/1.35 'Marhey', sans-serif; color: color-mix(in srgb, var(--sc) 55%, #fff); }
:root[data-theme="light"] .tm .ag .lc .tl b { color: color-mix(in srgb, var(--sc) 82%, #0f172a); }
.tm .ag .lc .tm-cnt, :root:not([data-theme="light"]) .tm .ag .lc .tm-cnt { margin: 0; padding: 4px 10px; border-radius: 999px; font: 800 11px "Almarai", sans-serif;
background: color-mix(in srgb, var(--sc) 14%, transparent); color: color-mix(in srgb, var(--sc) 55%, #fff); box-shadow: none; white-space: nowrap; }
:root[data-theme="light"] .tm .ag .lc .tm-cnt { color: color-mix(in srgb, var(--sc) 85%, #0f172a); }
.lc .meta { display: flex; gap: 6px; flex-wrap: wrap; }
.tm .ag .lc .meta small, .lc .meta span { display: inline-flex; align-items: center; gap: 5px; font: 700 12px "Almarai", sans-serif; color: var(--mu);
padding: 4px 9px; border-radius: 9px; background: color-mix(in srgb, var(--mu) 10%, transparent); }
.lc .meta svg { width: 14px; height: 14px; fill: none; stroke: var(--sc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lc .rg2 { display: flex; align-items: stretch; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ln); }
.lc .rg2 > div { display: flex; flex-direction: column; align-items: center; padding: 5px 12px; background: color-mix(in srgb, var(--mu) 7%, transparent); }
.lc .rg2 small { font: 800 10px "Almarai", sans-serif; color: var(--mu); }
.lc .rg2 b { font: 800 17px/1.1 var(--num); letter-spacing: 1px; color: var(--tx); direction: ltr; }
.lc .rg2 b sub { font: 800 10px "Almarai", sans-serif; color: var(--mu); vertical-align: baseline; margin-left: 3px; }
.lc .rg2 .to b { color: color-mix(in srgb, var(--sc) 60%, #fff); }
:root[data-theme="light"] .lc .rg2 .to b { color: color-mix(in srgb, var(--sc) 85%, #0f172a); }
.lc .rg2 > .ar { justify-content: center; padding: 0 8px; background: none; position: relative; min-width: 50px; }
.lc .rg2 .ar span { font: 800 10px "Almarai", sans-serif; color: #fff; background: color-mix(in srgb, var(--sc) 88%, #000); padding: 2px 7px; border-radius: 999px; position: relative; z-index: 1; white-space: nowrap; }
.lc .rg2 .ar::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--sc); border-radius: 2px; }
.lc .rg2 .ar::after { content: ""; position: absolute; left: 3px; top: 50%; margin-top: -4px; border: 4px solid transparent; border-right: 6px solid var(--sc); border-left: 0; }
.tm .ag .tm-br.lc.done { opacity: .6; }
.tm .ag .lc.done .tb { filter: saturate(.6); }
.tm .ag .lc.done .tm-cnt { background: #22c55e1f; color: #16a34a; }
.tm .ag .lc.live .tb { animation: lclive 1.6s ease-in-out infinite; }
@keyframes lclive { 50% { box-shadow: inset 0 0 0 2px var(--sc), 0 0 0 6px color-mix(in srgb, var(--sc) 25%, transparent); } }
.tm .ag .lc.live .tm-cnt { background: #ef4444; color: #fff; animation: lcblink 1.4s ease-in-out infinite; }
.tm .ag .lc.live .tl b::after { content: none; }
@media (max-width: 359px) { .lc .fl i { font-size: 26px; width: 18px; } .lc .rg2 > div { padding: 5px 9px; } }
@media (prefers-reduced-motion: reduce) { .lc .fl i, .lc .tb, .tm .ag .tm-br.lc { animation: none !important; } }
.tm .ag .lc .tm-ic[hidden], .tm .ag .lc .tm-bar[hidden], .tm .ag .lc .tm-time[hidden] { display: none !important; }
.tm .ag .lc .tm-card > div { flex: none; min-width: 0; gap: 0; }
.tm .ag .lc .tm-card > .tl { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm .ag .lc .tm-card > .meta { display: flex; flex-direction: row; gap: 6px; flex-wrap: wrap; }
.tm .ag .lc .tm-card > .rg2 { display: flex; flex-direction: row; align-items: stretch; gap: 0; }
.tm .ag .lc .tm-card { width: 100%; text-align: start; }
.tm .ag .ag-gap::before { display: none; } .tm .ag .ag-gap { padding-inline-start: 0; justify-content: center; }
.tm .ag .lc .tl b, :root:not([data-theme="light"]) .tm .ag .lc .tl b, :root[data-theme="light"] .tm .ag .lc .tl b { font-size: 18px; font-weight: 600; line-height: 1.45; letter-spacing: .1px; }
.tm .ag .lc .meta small, .lc .meta span { font-size: 11.5px; font-weight: 700; padding: 3px 8px; }
.lc .rg2 b { font-size: 19px; }
.exd { --tx: #f1f5f9; --mu: #94a3b8; --ln: #ffffff14; --pp: #1f2937; --pg: #f8fafc; font-family: "Almarai", sans-serif; color: var(--tx); }
:root[data-theme="light"] .exd { --tx: #0f172a; --mu: #64748b; --ln: #e2e8f0; --pp: #e2e8f0; --pg: #ffffff; }
.exd-kpi { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px 0 12px; border-bottom: 1px solid var(--ln); }
.exd-kpi > div { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; animation: exin .5s both; animation-delay: calc(var(--k, 0) * .1s); }
.exd-kpi > div:nth-child(2) { --k: 1; } .exd-kpi > div:nth-child(3) { --k: 2; }
.exd-kpi > div + div::before { content: ""; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1px; background: var(--ln); }
.exd-kpi b { font: 800 28px/1 var(--num); letter-spacing: 1px; color: var(--tx); }
.exd-kpi > div:nth-child(2) b { color: var(--sc); }
.exd-kpi small { font-size: 10.5px; font-weight: 700; color: var(--mu); }
@keyframes exin { from { opacity: 0; transform: translateY(8px); } }
.exd-hero { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--ln); }
.exd-paper { flex: none; width: 78px; height: 96px; overflow: visible; }
.exd-paper .pp { fill: var(--pp); }
.exd-paper .pg { fill: var(--pg); stroke: color-mix(in srgb, var(--sc) 45%, transparent); stroke-width: 1.5; filter: drop-shadow(0 6px 10px #0003); }
.exd-paper .gr { font: 800 13px var(--num); fill: var(--sc); text-anchor: middle; animation: exgr 3s ease-in-out infinite; transform-origin: 49px 30px; }
@keyframes exgr { 0%, 60%, 100% { transform: scale(1) rotate(-8deg); } 70% { transform: scale(1.25) rotate(-8deg); } }
.exd-paper .ln { stroke: #cbd5e1; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 44; stroke-dashoffset: 44; animation: exdraw 4s ease-out infinite; }
.exd-paper .l2 { animation-delay: .4s; } .exd-paper .l3 { animation-delay: .8s; } .exd-paper .l4 { animation-delay: 1.2s; }
.exd-paper .ck { fill: none; stroke: #22c55e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; animation: exdraw 4s ease-out infinite; }
.exd-paper .c1 { animation-delay: .5s; } .exd-paper .c2 { animation-delay: .9s; } .exd-paper .c3 { animation-delay: 1.3s; }
@keyframes exdraw { 0% { stroke-dashoffset: var(--o, 44); } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.exd-paper .pen { fill: #f59e0b; stroke: #92400e; stroke-width: .8; animation: expen 4s ease-in-out infinite; }
@keyframes expen { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-30px, -44px); } 30% { transform: translate(-14px, -32px); } 45% { transform: translate(-28px, -20px); } 60% { transform: translate(-10px, -8px); } }
.exd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.exd-lbl { font-size: 11px; font-weight: 800; color: var(--sc); }
.exd-name { font: 700 19px/1.4 'Marhey', sans-serif; color: var(--tx); }
.exd-meta { font-size: 11.5px; font-weight: 700; color: var(--mu); }
.exd-meta i { font-style: normal; }
.exd-cd { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; direction: rtl; }
.exd-cd span { display: flex; align-items: baseline; gap: 2px; }
.exd-cd span + span::before { content: ":"; font: 800 19px/1 var(--num); color: var(--mu); margin-inline-end: 8px; opacity: .6; }
.exd-cd b { font: 800 24px/1 var(--num); letter-spacing: 1px; color: var(--tx); font-variant-numeric: tabular-nums; }
.exd-cd span:first-child b { color: var(--sc); }
.exd-cd small { font-size: 10px; font-weight: 800; color: var(--mu); }
.exd-cd b.flip { animation: xkflip .45s cubic-bezier(.3,1.4,.5,1); }
.exd-say { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11.5px; font-weight: 800; color: var(--mu); }
.exd-say .li { color: var(--sc); }
.exd-hero.hot .exd-cd span:first-child b { color: #ef4444; animation: lcblink 1.2s ease-in-out infinite; }
.exd-lh { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; font-size: 12px; font-weight: 800; color: var(--mu); }
.exd-lh i { flex: 1; height: 1px; background: var(--ln); }
.exd-row { display: grid; grid-template-columns: 44px 10px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--ln);
animation: exin .5s both; animation-delay: calc(.2s + var(--i) * .08s); }
.exd-row:last-child { border-bottom: 0; }
.exd-dt { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.exd-dt b { font: 800 21px/1 var(--num); color: var(--sc); }
.exd-dt small { font-size: 9.5px; font-weight: 800; color: var(--mu); margin-top: 2px; }
.exd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 22%, transparent); }
.exd-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.exd-t b { font: 600 15px/1.4 'Marhey', sans-serif; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exd-t small { font-size: 10.5px; font-weight: 700; color: var(--mu); } .exd-t small i { font-style: normal; }
.exd-left { display: flex; align-items: baseline; gap: 3px; }
.exd-left b { font: 800 19px/1 var(--num); color: var(--tx); }
.exd-left small { font-size: 10px; font-weight: 800; color: var(--mu); }
.exd-row.hot .exd-left b { color: #ef4444; }
@media (prefers-reduced-motion: reduce) { .exd *, .exd-row, .exd-kpi > div { animation: none !important; } .exd-paper .ln, .exd-paper .ck { stroke-dashoffset: 0; } }
.exd-lh { direction: rtl; justify-content: flex-start; }
.lc .tb { background: color-mix(in srgb, var(--sc) 16%, var(--tl1)); box-shadow: inset 0 0 0 2px var(--sc), 0 10px 22px -10px var(--sc); }
.lc .tb em, .lc .rg2 .ar span { background: var(--sc); text-shadow: 0 1px 1px #0004; }
.lc .fl i.k { color: var(--sc); }
.tm .ag .lc .tl b, :root:not([data-theme="light"]) .tm .ag .lc .tl b { color: color-mix(in srgb, var(--sc) 80%, #fff); }
:root[data-theme="light"] .tm .ag .lc .tl b { color: color-mix(in srgb, var(--sc) 88%, #000); }
.tm .ag .lc .tm-cnt, :root:not([data-theme="light"]) .tm .ag .lc .tm-cnt { background: color-mix(in srgb, var(--sc) 20%, transparent); color: color-mix(in srgb, var(--sc) 75%, #fff); }
:root[data-theme="light"] .tm .ag .lc .tm-cnt { color: color-mix(in srgb, var(--sc) 85%, #000); }
.lc .rg2 .to b, :root[data-theme="light"] .lc .rg2 .to b { color: var(--sc); }
.tm .ag .tm-br.lc { position: relative; padding-inline-start: 10px; }
.tm .ag .tm-br.lc::before { display: block !important; content: ""; position: absolute; inset-inline-start: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 4px; background: var(--sc); box-shadow: 0 0 10px var(--sc); }
.tm > .tm-clock { display: none; }
.tm .tm-nx { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ic tx cd" "bar bar bar"; align-items: center; gap: 4px 10px;
margin: 0 0 4px; padding: 9px 12px 0; border-radius: 16px; box-shadow: none; overflow: hidden;
background: linear-gradient(90deg, color-mix(in srgb, var(--t) 16%, transparent), color-mix(in srgb, var(--t) 4%, transparent)); border: 1px solid color-mix(in srgb, var(--t) 35%, transparent); }
.tm .tm-nx[hidden] { display: none; }
.tm .tm-nx::before, .tm .tm-nx::after, .tm .tm-nx-glow, .tm .tm-nx-say, .tm .tm-nx-ring svg { display: none; }
.tm .tm-nx-lbl { position: absolute; top: 6px; left: 10px; padding: 1px 7px; font-size: 9.5px; background: var(--t); color: #fff; }
.tm .tm-nx-lbl i { width: 5px; height: 5px; background: #fff; }
.tm .tm-nx-top { display: contents; }
.tm .tm-nx-ring { grid-area: ic; width: 38px; height: 38px; }
.tm .tm-nx-ring .tm-nx-ic { width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--t) 22%, transparent); box-shadow: none; animation: none; }
.tm .tm-nx-top > div { grid-area: tx; min-width: 0; gap: 1px; }
.tm .tm-nx-n { font: 600 15px/1.35 'Marhey', sans-serif; color: color-mix(in srgb, var(--t) 70%, var(--fg)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm .tm-nx-w { font-size: 10.5px; font-weight: 700; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm .tm-nx-cd { grid-area: cd; display: flex; gap: 0; margin: 14px 0 0; padding: 0; background: none; border: 0; direction: ltr; }
.tm .tm-nx-cd > div { padding: 0; background: none; border: 0; flex-direction: row; align-items: baseline; }
.tm .tm-nx-cd > div + div::before { content: ":"; position: static; font: 800 17px/1 var(--num); color: var(--t); margin: 0 1px; animation: lcblink 1s steps(2) infinite; }
.tm .tm-nx-cd b { font: 800 21px/1 var(--num); letter-spacing: .5px; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--fg); }
.tm .tm-nx-cd > div:first-child b { color: var(--t); background: none; }
.tm .tm-nx-cd small { display: none; }
.tm .tm-nx-bar { grid-area: bar; position: relative; height: 3px; margin: 8px -12px 0; inset: auto; }
.tm .tm-nx.live { animation: none; border-color: #ef4444; }
.tm .tm-nx.live .tm-nx-lbl { background: #ef4444; }
.tm .tm-nx { grid-template-areas: "ic lb cd" "ic tx cd" "bar bar bar"; row-gap: 2px; padding-top: 8px; }
.tm .tm-nx-lbl { position: static; grid-area: lb; justify-self: start; }
.tm .tm-nx-cd { margin: 0; align-self: center; }
.tm .tm-nx-cd > div + div::before { opacity: 1; color: var(--t); }
:root[data-theme="light"] .tm .tm-nx-cd b { color: #0f172a; }
:root[data-theme="light"] .tm .tm-nx-cd > div:first-child b { color: var(--t); }
.tm .tm-nx-ring { align-self: center; }
.tm-kind { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin: 12px 0 0; border-radius: 16px;
background: color-mix(in srgb, var(--nm, #f1f5f9) 7%, transparent); border: 1px solid var(--ln, #ffffff14); }
.tm-kind-ind { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 12px;
background: linear-gradient(135deg, #f97316, #ec4899); box-shadow: 0 6px 16px -6px #ec4899aa; transition: transform .4s cubic-bezier(.3,1.3,.5,1), width .4s; }
.tm-kind button { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px; border: 0; background: none; cursor: pointer;
font: 800 14px "Almarai", sans-serif; color: var(--mu, #94a3b8); border-radius: 12px; transition: color .3s; min-height: 44px; }
.tm-kind button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tm-kind button.on { color: #fff; }
:root[data-theme="light"] .tm-kind { background: #ffffffb3; border-color: #e2e8f0; }
.tm-none { text-align: center; padding: 22px 0 8px; font-weight: 700; color: var(--mu, #94a3b8); }
.tm .ag .tm-br.lc[hidden], .ag-gap[hidden] { display: none !important; }
.exd-kpi, .exd-paper, .exd-say, .exd-lbl { display: none !important; }
.exd { --sc2: color-mix(in srgb, var(--sc) 55%, var(--mu)); }
.exd-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 10px 12px; margin-top: 4px;
border: 0; border-radius: 14px; background: color-mix(in srgb, var(--sc) 8%, transparent); border-inline-start: 3px solid var(--sc2); }
.exd-main { display: contents; }
.exd-name { grid-column: 1; font: 600 15px/1.35 'Marhey', sans-serif; }
.exd-meta { grid-column: 1; font-size: 11px; }
.exd-cd { grid-column: 2; grid-row: 1 / span 2; margin: 0; gap: 4px; direction: ltr; flex-direction: row-reverse; }
.exd-cd span + span::before { font-size: 14px; margin: 0 2px 0 0; }
.exd-cd b { font-size: 18px; color: var(--tx); }
.exd-cd span:first-child b { color: var(--sc2); }
.exd-cd small { font-size: 9px; }
.exd-cd span:last-child { display: none; }
.exd-lh { margin: 10px 0 0; font-size: 11px; }
.exd-row { grid-template-columns: 34px 6px 1fr auto; gap: 8px; padding: 7px 0; }
.exd-dt b { font-size: 18px; color: var(--sc2); } .exd-dt small { font-size: 8.5px; }
.exd-dot { width: 6px; height: 6px; box-shadow: none; background: var(--sc2); }
.exd-t b { font-size: 13px; font-weight: 600; } .exd-t small { font-size: 10px; }
.exd-left b { font-size: 16px; color: var(--mu); } .exd-left small { font-size: 9px; }
.exd-cd { direction: rtl !important; flex-direction: row !important; } .exd-cd span { gap: 3px; }
.sp, .pt-exam .stack { --card: #141019; --line: #ffffff12; --tx: #f1f5f9; --mu: #94a3b8; --sh: 0 1px 0 #ffffff08 inset, 0 10px 30px -12px #000a; }
:root[data-theme="light"] .sp, :root[data-theme="light"] .pt-exam .stack { --card: #ffffff; --line: #0f172a0f; --tx: #0f172a; --mu: #64748b; --sh: 0 1px 2px #0f172a0d, 0 12px 28px -14px #0f172a33; }
@keyframes spin { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.sp .sh2 { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "app k" "app t" "app d"; column-gap: 14px; row-gap: 2px; align-items: center;
padding: 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); overflow: hidden; animation: spin .5s both; }
.sp .sh2-orb { background: var(--sc) !important; opacity: .18; filter: blur(40px); }
.sp .sh2-app { grid-area: app; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; position: relative;
background: linear-gradient(145deg, color-mix(in srgb, var(--sc) 30%, #fff), var(--sc)); box-shadow: 0 10px 22px -8px var(--sc), inset 0 1px 0 #fff8;
animation: spin .6s .1s both, spbob 4s ease-in-out 1s infinite; }
.sp .sh2-app .i3d { width: 70%; height: 70%; filter: drop-shadow(0 4px 6px #0005); }
@keyframes spbob { 50% { transform: translateY(-3px) rotate(-3deg); } }
.sp .sh2-k { grid-area: k; justify-self: start; font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px;
background: color-mix(in srgb, var(--sc) 15%, transparent); color: color-mix(in srgb, var(--sc) 80%, var(--tx)); }
.sp .sh2-t { grid-area: t; margin: 0; font: 700 22px/1.3 'Marhey', sans-serif;
background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 85%, var(--tx)), color-mix(in srgb, var(--sc) 55%, #f97316)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp .sh2-t span { display: inline-block; animation: spin .5s both; animation-delay: calc(.15s + var(--d) * .07s); }
.sp .sh2-d { grid-area: d; margin: 0; font-size: 12px; font-weight: 700; color: var(--mu); display: flex; align-items: center; gap: 6px; }
.sp .sh2-d .avatar { width: 22px; height: 22px; font-size: 11px; background: color-mix(in srgb, var(--sc) 18%, transparent); color: var(--sc); }
.sp .seg { background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); border-radius: 18px; padding: 5px; }
.sp .seg-ind { background: color-mix(in srgb, var(--sc) 14%, transparent) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sc) 40%, transparent) !important; border-radius: 14px; }
.sp .seg button { color: var(--mu); font-weight: 800; gap: 6px; }
.sp .seg button[aria-selected="true"] { color: var(--tx); }
.sp .seg button b { background: color-mix(in srgb, var(--mu) 16%, transparent); color: var(--mu); }
.sp .seg button[aria-selected="true"] b { background: var(--sc); color: #fff; }
.sq { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; box-shadow: inset 0 1px 0 #fff6, 0 3px 8px -3px currentColor; }
.sq svg { width: 15px; height: 15px; }
.sq1 { background: linear-gradient(145deg, #60a5fa, #2563eb); } .sq2 { background: linear-gradient(145deg, #fb923c, #ea580c); } .sq3 { background: linear-gradient(145deg, #4ade80, #16a34a); }
.sp .pane.on { animation: spin .35s both; }
.sp details.lec { background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); border-radius: 18px; margin: 0 0 8px; overflow: hidden;
animation: spin .45s both; animation-delay: calc(var(--i) * .06s); }
.sp details.lec summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; list-style: none; cursor: pointer; }
.sp details.lec summary::-webkit-details-marker { display: none; }
.sp details.lec .num { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 800 17px/1 var(--num); letter-spacing: .5px;
color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--sc) 55%, #fff), var(--sc)); box-shadow: 0 6px 14px -6px var(--sc), inset 0 1px 0 #fff7; }
.sp details.lec summary strong { font: 600 15px/1.4 'Marhey', sans-serif; color: var(--tx); }
.lec-c { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--sc) 12%, transparent); color: color-mix(in srgb, var(--sc) 80%, var(--tx)); }
.lec-ch { width: 9px; height: 9px; border-inline-start: 2px solid var(--mu); border-bottom: 2px solid var(--mu); transform: rotate(45deg); transition: transform .3s; margin-inline-start: 4px; }
.sp details.lec[open] .lec-ch { transform: rotate(-45deg); }
.sp details.lec[open] { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sc) 35%, transparent), var(--sh); }
.sp details.lec .dlist { padding: 0 10px 10px; animation: spin .3s both; }
.sp .drow { border-radius: 12px; }
.sp .dn { color: var(--sc); }
.sp .qz { background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); border-radius: 16px; padding: 10px 12px; gap: 12px; animation: spin .45s both; animation-delay: calc(var(--i) * .06s); }
.sp .qz-ring { width: 42px; height: 42px; background: color-mix(in srgb, var(--sc) 14%, transparent); }
.sp .qz-ring b { font: 800 15px/1 var(--num); color: var(--sc); } .sp .qz-ring small { font-size: 8.5px; }
.sp .qz-b strong { font-size: 14px; color: var(--tx); } .sp .qz-b small { font-size: 11px; color: var(--mu); }
.sp .qz-go { font-size: 12px; padding: 6px 12px; border-radius: 999px; background: var(--sc); color: #fff; }
.pt-exam .es-h { padding: 12px 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); gap: 12px; animation: spin .45s both; }
.pt-exam .es-ic { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(145deg, color-mix(in srgb, var(--t) 30%, #fff), var(--t)); box-shadow: 0 8px 18px -8px var(--t), inset 0 1px 0 #fff8; }
.pt-exam .es-h h1 { font: 700 19px/1.3 'Marhey', sans-serif; margin: 0; color: color-mix(in srgb, var(--t) 80%, var(--tx)); }
.pt-exam .es-h small, .pt-exam .es-h p { font-size: 11px; color: var(--mu); margin: 0; }
.pt-exam .es-l { padding: 0; margin: 0 0 10px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); overflow: hidden; }
.pt-exam .es-lh { padding: 10px 12px; gap: 10px; border-bottom: 1px solid var(--line); }
.pt-exam .es-n { width: 30px; height: 30px; border-radius: 9px; font: 800 14px/30px var(--num); text-align: center; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--t) 55%, #fff), var(--t)); }
.pt-exam .es-lh strong { font: 600 14px/1.4 'Marhey', sans-serif; color: var(--tx); }
.pt-exam .es-q { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t b" "m b"; gap: 1px 10px; align-items: center; padding: 9px 12px; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pt-exam .es-q + .es-q { border-top: 1px solid var(--line); }
.pt-exam .es-q span { grid-area: t; font-size: 13px; font-weight: 700; color: var(--tx); }
.pt-exam .es-q small { grid-area: m; font-size: 10.5px; color: var(--mu); }
.pt-exam .es-q b { grid-area: b; font-size: 11.5px; padding: 5px 12px; border-radius: 999px; background: var(--t); color: #fff; transition: transform .2s; }
.pt-exam .es-q:active b { transform: scale(.94); }
.pt-exam .ex-grid { gap: 8px; }
.pt-exam .ex-s { padding: 10px; border-radius: 16px; gap: 2px; min-height: 0; background: var(--card) !important; border: 1px solid var(--line); box-shadow: var(--sh); }
.pt-exam .ex-s::after { display: none; }
.pt-exam .ex-ic { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(145deg, color-mix(in srgb, var(--t) 30%, #fff), var(--t)) !important; box-shadow: 0 6px 14px -6px var(--t); }
html body.pt-exam .ex-s strong { font: 600 13.5px/1.4 'Marhey', sans-serif; color: color-mix(in srgb, var(--t) 75%, var(--tx)) !important; margin-top: 6px; }
.pt-exam .ex-s small { font-size: 10.5px; color: var(--mu); }
.pt-exam .ex-m { font-size: 10.5px; color: var(--mu); } .pt-exam .ex-m b { color: var(--t); }
.pt-exam .ex-yt { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .sp *, .pt-exam * { animation: none !important; } }
.sp .sh2-t { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: color-mix(in srgb, var(--sc) 85%, var(--tx)); }
.sp .sh2-t span { color: inherit; -webkit-text-fill-color: currentColor; }
.pt-exam .es-l { margin-bottom: 8px; animation: spin .4s both; animation-delay: calc(var(--i) * .06s); }
.pt-exam .es-lh { padding: 8px 12px; }
.pt-exam .es-q { padding: 8px 12px; }
.pt-exam .es-q b { box-shadow: none !important; border: 0 !important; }
.pt-exam .stack { gap: 10px; }
html body.pt-exam .ex-grid { display: flex; flex-direction: column; gap: 0; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); }
html body.pt-exam .ex-s { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ic t m" "ic s m"; column-gap: 12px; row-gap: 0; align-items: center;
padding: 10px 12px; border: 0; border-radius: 0; box-shadow: none; background: none !important; transform: none; animation: spin .4s both; animation-delay: calc(var(--i) * .05s); }
html body.pt-exam .ex-s + .ex-s { border-top: 1px solid var(--line); }
html body.pt-exam .ex-s:active { background: color-mix(in srgb, var(--t) 8%, transparent) !important; }
html body.pt-exam .ex-ic { grid-area: ic; width: 40px; height: 40px; margin: 0; }
html body.pt-exam .ex-s strong { grid-area: t; margin: 0; font-size: 14px; }
html body.pt-exam .ex-s small { grid-area: s; }
html body.pt-exam .ex-m { grid-area: m; display: flex; flex-direction: column; align-items: center; font-size: 9.5px; line-height: 1.2; text-align: center; }
html body.pt-exam .ex-m b { font: 800 15px/1 var(--num); }
html body.pt-exam .ex-yt { margin: 6px 2px; }
html body.pt-exam .ex-m { flex-direction: row; gap: 3px; white-space: nowrap; align-items: baseline; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--t) 12%, transparent); } html body.pt-exam .ex-m b { font-size: 14px; }
.u { --card: #15111c; --line: #ffffff10; --tx: #f1f5f9; --mu: #8f9bb0; --press: #ffffff0a; --sh: 0 12px 30px -16px #000c;
display: flex; flex-direction: column; gap: 10px; font-family: "Almarai", sans-serif; color: var(--tx); }
:root[data-theme="light"] .u { --card: #ffffff; --line: #0f172a0d; --tx: #0f172a; --mu: #64748b; --press: #0f172a08; --sh: 0 1px 2px #0f172a0a, 0 10px 24px -14px #0f172a30; }
@keyframes uin { from { opacity: 0; transform: translateY(8px); } }
@keyframes upop { from { opacity: 0; transform: scale(.6) rotate(-8deg); } }
.u-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--mu); }
.u-crumbs a { color: var(--mu); text-decoration: none; } .u-crumbs a:last-of-type { color: var(--tx); }
.u-crumbs i { font-style: normal; opacity: .5; }
.u-head { display: flex; align-items: center; gap: 12px; padding: 4px 2px 6px; animation: uin .45s both; }
.u-app { flex: none; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
background: linear-gradient(150deg, color-mix(in srgb, var(--sc) 35%, #fff), var(--sc)); box-shadow: 0 10px 20px -10px var(--sc), inset 0 1px 0 #ffffff80;
animation: upop .55s cubic-bezier(.3,1.5,.5,1) both; }
.u-app .i3d { width: 68%; height: 68%; filter: drop-shadow(0 3px 5px #0005); }
.u-head > div { min-width: 0; display: flex; flex-direction: column; }
.u-head small { font-size: 10.5px; font-weight: 800; color: var(--sc); letter-spacing: .2px; }
.u-head h1 { margin: 0; font: 700 21px/1.3 'Marhey', sans-serif; color: var(--tx); }
.u-head p { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--mu); }
.u-label { margin: 6px 4px -4px; font-size: 11px; font-weight: 800; color: var(--mu); }
.u-list { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh); overflow: hidden; }
.u-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: inherit; text-decoration: none; position: relative;
animation: uin .4s both; animation-delay: calc(.08s + var(--i, 0) * .045s); transition: background .2s; -webkit-tap-highlight-color: transparent; }
.u-list > .u-row + .u-row, .u-list > .u-acc + .u-acc { border-top: 1px solid var(--line); }
.u-row:active { background: var(--press); }
.u-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
background: linear-gradient(150deg, color-mix(in srgb, var(--sc) 30%, #fff), var(--sc)); box-shadow: 0 6px 12px -7px var(--sc), inset 0 1px 0 #ffffff70; }
.u-ic .i3d { width: 70%; height: 70%; filter: drop-shadow(0 2px 3px #0004); }
.u-num { font: 800 16px/1 var(--num); letter-spacing: .5px; color: #fff; }
.u-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.u-tx b { font: 600 14.5px/1.4 'Marhey', sans-serif; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-tx small { font-size: 11px; font-weight: 700; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-ch { flex: none; width: 8px; height: 8px; border-inline-start: 2px solid var(--mu); border-bottom: 2px solid var(--mu); transform: rotate(45deg); opacity: .6; transition: transform .25s; }
.u-pill { flex: none; font-size: 10.5px; font-weight: 800; color: var(--mu); padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--sc) 12%, transparent); }
.u-pill b { font: 800 12px/1 var(--num); color: var(--sc); }
.u-new { flex: none; font-size: 9.5px; font-weight: 800; color: #fff; background: #FF3B5C; padding: 2px 7px; border-radius: 999px; }
.u-go { flex: none; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--sc); padding: 6px 13px; border-radius: 999px; box-shadow: 0 6px 12px -6px var(--sc); transition: transform .2s; }
.u-row:active .u-go { transform: scale(.94); }
.u-empty { padding: 26px 12px; text-align: center; font-weight: 700; color: var(--mu); background: var(--card); border: 1px dashed var(--line); border-radius: 18px; }
.u-acc summary { list-style: none; cursor: pointer; } .u-acc summary::-webkit-details-marker { display: none; }
.u-acc[open] .u-ch { transform: rotate(-45deg); }
.u-acc[open] > summary { background: color-mix(in srgb, var(--sc) 7%, transparent); }
.u-acc .u-files { padding: 4px 10px 10px; animation: uin .3s both; }
.u-files .drow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 4px; border: 0; background: none; box-shadow: none; border-radius: 0; }
.u-list.u-files .drow { padding: 9px 12px; }
.u-files .drow + .drow { border-top: 1px solid var(--line); }
.u-files .dn { font: 800 13px/1 var(--num); color: var(--sc); width: 22px; text-align: center; }
.u-files .dt { min-width: 0; color: inherit; text-decoration: none; }
.u-files .dt strong { display: block; font-size: 13px; font-weight: 800; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-files .dm { display: flex; gap: 6px; align-items: center; font-size: 10.5px; color: var(--mu); flex-wrap: wrap; }
.u-files .dk { font-size: 9.5px; padding: 1px 7px; border-radius: 999px; }
.u-files .dd { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, transparent); box-shadow: none; }
.u-files .dd svg { width: 16px; height: 16px; }
.u-seg { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(var(--tabs, 3), 1fr); padding: 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); animation: uin .45s .1s both; }
.u-seg-ind { position: absolute; z-index: -1; top: 4px; bottom: 4px; border-radius: 10px; background: var(--sc); box-shadow: 0 6px 14px -6px var(--sc); transition: left .35s cubic-bezier(.3,1.3,.5,1), width .35s; }
.u-seg button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border: 0; background: none; cursor: pointer;
font: 800 13px "Almarai", sans-serif; color: var(--mu); transition: color .25s; }
.u-seg button b { font: 800 11px/1 var(--num); padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--mu) 16%, transparent); }
.u-seg button[aria-selected="true"] { color: #fff; } .u-seg button[aria-selected="true"] b { background: #ffffff33; color: #fff; }
.u .pane.on { animation: uin .3s both; }
.u .pane { display: flex; flex-direction: column; gap: 10px; }
.u .pane[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .u, .u * { animation: none !important; transition: none !important; } }
.u-ch { border: 0; border-left: 2px solid var(--mu); border-bottom: 2px solid var(--mu); transform: rotate(45deg); }
.u-acc .u-ch { transform: rotate(-45deg); } .u-acc[open] .u-ch { transform: rotate(-135deg); }
.u-new { display: none; }
.u-files .dd, .u-files .drow { opacity: 1 !important; }
.u-files .dd { background: var(--sc); color: #fff; }
.u-row .u-ch { transform: rotate(-45deg); }
.u .u-ch, .u .u-row .u-ch, .u .u-acc .u-ch { width: auto; height: auto; border: 0; transform: none; opacity: .55; font: 700 22px/1 system-ui, sans-serif; font-style: normal; color: var(--mu); }
.u .u-ch::before { content: "‹"; }
.u .u-acc[open] .u-ch { transform: rotate(-90deg); }
.u .u-acc[open] .u-ch { transform: rotate(90deg); }
.u-code { position: relative; isolation: isolate; }
.u-code::before, .u-code::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.u-code::before { background-color: var(--sc); opacity: .07;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22240%22%20height%3D%22240%22%20font-family%3D%22monospace%22%20font-weight%3D%22700%22%3E%3Ctext%20x%3D%2212%22%20y%3D%2234%22%20font-size%3D%2222%22%3E%7B%20%7D%3C/text%3E%3Ctext%20x%3D%22128%22%20y%3D%2258%22%20font-size%3D%2216%22%3E%26lt%3B/%26gt%3B%3C/text%3E%3Ctext%20x%3D%2240%22%20y%3D%22104%22%20font-size%3D%2213%22%3E01101%3C/text%3E%3Ctext%20x%3D%22150%22%20y%3D%22128%22%20font-size%3D%2220%22%3E%3D%26gt%3B%3C/text%3E%3Ctext%20x%3D%2216%22%20y%3D%22168%22%20font-size%3D%2215%22%3Eif%28%29%3C/text%3E%3Ctext%20x%3D%22120%22%20y%3D%22196%22%20font-size%3D%2222%22%3E%3B%3C/text%3E%3Ctext%20x%3D%22176%22%20y%3D%22226%22%20font-size%3D%2213%22%3E%5B%20%5D%3C/text%3E%3Ctext%20x%3D%2264%22%20y%3D%22224%22%20font-size%3D%2214%22%3E%23%3C/text%3E%3Ctext%20x%3D%22196%22%20y%3D%2294%22%20font-size%3D%2214%22%3Efn%3C/text%3E%3C/svg%3E") 0 0 / 240px 240px repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22240%22%20height%3D%22240%22%20font-family%3D%22monospace%22%20font-weight%3D%22700%22%3E%3Ctext%20x%3D%2212%22%20y%3D%2234%22%20font-size%3D%2222%22%3E%7B%20%7D%3C/text%3E%3Ctext%20x%3D%22128%22%20y%3D%2258%22%20font-size%3D%2216%22%3E%26lt%3B/%26gt%3B%3C/text%3E%3Ctext%20x%3D%2240%22%20y%3D%22104%22%20font-size%3D%2213%22%3E01101%3C/text%3E%3Ctext%20x%3D%22150%22%20y%3D%22128%22%20font-size%3D%2220%22%3E%3D%26gt%3B%3C/text%3E%3Ctext%20x%3D%2216%22%20y%3D%22168%22%20font-size%3D%2215%22%3Eif%28%29%3C/text%3E%3Ctext%20x%3D%22120%22%20y%3D%22196%22%20font-size%3D%2222%22%3E%3B%3C/text%3E%3Ctext%20x%3D%22176%22%20y%3D%22226%22%20font-size%3D%2213%22%3E%5B%20%5D%3C/text%3E%3Ctext%20x%3D%2264%22%20y%3D%22224%22%20font-size%3D%2214%22%3E%23%3C/text%3E%3Ctext%20x%3D%22196%22%20y%3D%2294%22%20font-size%3D%2214%22%3Efn%3C/text%3E%3C/svg%3E") 0 0 / 240px 240px repeat; animation: ucode 60s linear infinite; }
.u-code::after { opacity: .9;
background: radial-gradient(420px 260px at 85% -40px, color-mix(in srgb, var(--sc) 22%, transparent), transparent 70%),
radial-gradient(360px 300px at 0% 105%, color-mix(in srgb, var(--sc) 14%, transparent), transparent 70%),
repeating-linear-gradient(0deg, color-mix(in srgb, var(--sc) 7%, transparent) 0 1px, transparent 1px 32px),
repeating-linear-gradient(90deg, color-mix(in srgb, var(--sc) 7%, transparent) 0 1px, transparent 1px 32px);
-webkit-mask: linear-gradient(#000 0 45%, transparent 95%); mask: linear-gradient(#000 0 45%, transparent 95%); }
:root[data-theme="light"] .u-code::before { opacity: .09; }
@keyframes ucode { to { -webkit-mask-position: 240px 480px; mask-position: 240px 480px; } }
@media (prefers-reduced-motion: reduce) { .u-code::before { animation: none; } }
body:has(.u-code) { background: #0c0a11 !important; background-image: none !important; }
:root[data-theme="light"] body:has(.u-code) { background: #f7f8fb !important; }
body:has(.u-code)::before, body:has(.u-code)::after { display: none !important; }
.u-code::before { opacity: .1; }
:root[data-theme="light"] .u-code::before { opacity: .12; }
.u-code::after { opacity: 1; }
.u-code::after { z-index: -2; -webkit-mask: none; mask: none;
background-color: color-mix(in srgb, var(--sc) 16%, #0c0a11); }
:root[data-theme="light"] .u-code::after { background-color: color-mix(in srgb, var(--sc) 11%, #fff); }
.u-code::before { opacity: .16; }
:root[data-theme="light"] .u-code::before { opacity: .17; }
.u-node .u-head h1 { font-family: "Marhey", sans-serif; background: linear-gradient(100deg, var(--sc), color-mix(in srgb, var(--sc) 45%, #ff3b8d) 50%, var(--sc)); background-size: 200% auto;
-webkit-background-clip: text; background-clip: text; color: transparent; animation: ushine 5s linear infinite; }
.u-node .u-head small { color: var(--sc); }
@keyframes ushine { to { background-position: -200% center; } }
.u-orb { position: fixed; z-index: -1; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; filter: blur(50px); opacity: .45;
background: var(--sc); top: 10%; inset-inline-start: -90px; animation: uorb 14s ease-in-out infinite alternate; }
.u-orb2 { top: auto; bottom: 8%; inset-inline-start: auto; inset-inline-end: -100px; background: color-mix(in srgb, var(--sc) 50%, #ff3b8d); animation-duration: 18s; animation-direction: alternate-reverse; }
:root[data-theme="light"] .u-orb { opacity: .3; }
@keyframes uorb { 50% { transform: translate(60px, 80px) scale(1.2); } to { transform: translate(-20px, 160px) scale(.9); } }
.u-node .u-app { animation: ufloat 4s ease-in-out infinite; }
@keyframes ufloat { 50% { transform: translateY(-6px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .u-orb, .u-node .u-app, .u-node .u-head h1 { animation: none; } }
.u-back { align-self: flex-start; justify-self: start; width: fit-content; margin-inline-start: 0; margin-inline-end: auto; display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
font: 700 12.5px/1 'Almarai', sans-serif; color: var(--tx); text-decoration: none; background: color-mix(in srgb, var(--sc) 18%, var(--card));
border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); box-shadow: 0 4px 14px color-mix(in srgb, var(--sc) 25%, transparent);
animation: uback .5s cubic-bezier(.2,.9,.3,1.3) both; transition: transform .2s; }
.u-back i { font-style: normal; transition: transform .25s; }
.u-back:hover i { transform: translateX(3px); } .u-back:active { transform: scale(.94); }
@keyframes uback { from { opacity: 0; transform: translateX(20px); } }
.u-node .u-head h1 { font: 800 24px/1.45 'Lemonada', sans-serif; letter-spacing: -.3px;
animation: utitle .9s cubic-bezier(.2,.8,.2,1) both, ushine 5s linear .9s infinite; }
.u-node .u-head h1::after { content: ""; display: block; height: 3px; width: 70%; margin-top: 2px; border-radius: 3px;
background: linear-gradient(90deg, transparent, var(--sc), #ff3b8d); transform-origin: right; animation: uline 1s .6s cubic-bezier(.6,0,.2,1) both; }
@keyframes utitle { from { opacity: 0; filter: blur(8px); transform: translateY(14px) scale(.96); clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes uline { from { transform: scaleX(0); } }
.u-node .u-head small { font-family: 'Lemonada', sans-serif; animation: uback .5s .3s both; }
.u-node .u-app { animation: upop .7s cubic-bezier(.2,1.4,.4,1) both, ufloat 4s ease-in-out .7s infinite; }
@keyframes upop { from { opacity: 0; transform: scale(.3) rotate(-25deg); } }
.u-node .u-tx b { font: 700 15px/1.5 'Lemonada', sans-serif; }
.u-node .u-row { animation: urow .6s cubic-bezier(.2,.9,.3,1.15) both; animation-delay: calc(.35s + var(--i, 0) * .09s); overflow: hidden; }
.u-node .u-row::before { content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--sc) 30%, transparent) 50%, transparent 70%);
transform: translateX(110%); animation: usweep 1.1s ease-out both; animation-delay: calc(.7s + var(--i, 0) * .09s); }
.u-node .u-row .u-ic { animation: upop .6s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(.45s + var(--i, 0) * .09s); transition: transform .3s; }
.u-node .u-row:hover .u-ic { transform: rotate(-8deg) scale(1.08); }
@keyframes urow { from { opacity: 0; transform: translateX(-40px); } }
@keyframes usweep { to { transform: translateX(-110%); } }
@media (prefers-reduced-motion: reduce) { .u-back, .u-node .u-head h1, .u-node .u-head h1::after, .u-node .u-head small, .u-node .u-app,
.u-node .u-row, .u-node .u-row::before, .u-node .u-row .u-ic { animation: none; } }
.u-node .u-back { color: #fff; border: 0; background: linear-gradient(120deg, var(--sc), color-mix(in srgb, var(--sc) 40%, #ff3b8d), var(--sc)); background-size: 200% auto;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc) 35%, transparent), 0 0 18px color-mix(in srgb, var(--sc) 70%, transparent);
animation: uback .5s cubic-bezier(.2,.9,.3,1.3) both, uglow 2.2s ease-in-out .5s infinite, ushine 4s linear infinite; }
@keyframes uglow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 25%, transparent), 0 0 30px color-mix(in srgb, var(--sc) 95%, transparent); } }
.u-node .xh-t { font-family: 'Lemonada', sans-serif; }
.u-node .xh-lead { font: 800 15px/1.6 'Lemonada', sans-serif; color: var(--sc); animation: uback .6s .5s both; }
.u-node .u-tx b { background: linear-gradient(100deg, var(--tx) 0 35%, var(--sc) 50%, var(--tx) 65% 100%); background-size: 300% auto; background-position: 100% center;
-webkit-background-clip: text; background-clip: text; color: transparent; animation: utxt 3.5s ease-in-out infinite; animation-delay: calc(1s + var(--i, 0) * .4s); }
@keyframes utxt { 0%, 30% { background-position: 100% center; } 70%, 100% { background-position: 0% center; } }
.u-view { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px;
font: 700 12px/1 'Almarai', sans-serif; color: #fff; background: var(--sc); box-shadow: 0 3px 12px color-mix(in srgb, var(--sc) 55%, transparent); transition: transform .2s; }
.u-view i { font-style: normal; font-size: 15px; transition: transform .25s; }
.u-row:hover .u-view i { transform: translateX(-3px); } .u-row:active .u-view { transform: scale(.92); }
@media (prefers-reduced-motion: reduce) { .u-node .u-back, .u-node .u-tx b, .u-node .xh-lead { animation: none; } }
.u-node a.u-back, .u-node a.u-back i { color: #fff !important; text-shadow: 0 1px 3px #0007; font-weight: 800; }
html body main .u-node a.u-back { color: #fff !important; padding: 8px 16px; min-height: 0; }
html body main .u-node a.u-back { background: linear-gradient(120deg, var(--sc), color-mix(in srgb, var(--sc) 40%, #ff3b8d), var(--sc)) !important; background-size: 200% auto !important; border: 0 !important; }
html body main .sp a.u-back { margin-bottom: 10px; color: #fff !important; padding: 8px 16px; min-height: 0; border: 0 !important; font-weight: 800; text-shadow: 0 1px 3px #0007;
background: linear-gradient(120deg, var(--sc), color-mix(in srgb, var(--sc) 40%, #ff3b8d), var(--sc)) !important; background-size: 200% auto !important;
animation: uback .5s cubic-bezier(.2,.9,.3,1.3) both, uglow 2.2s ease-in-out .5s infinite; }
.sp a.u-back i { color: #fff !important; }
.drow .u-view, .sp .u-row .u-view { text-decoration: none; color: #fff !important; }
.drow { align-items: center; }
.drow:has(.u-view) { grid-template-columns: 34px 1fr auto auto; gap: 8px; }
html body main .u-crumbs { gap: 6px; }
html body main .u-crumbs i { display: none; }
html body main .u-crumbs a { font: 700 12px/1.2 'Almarai', sans-serif !important; color: var(--tx) !important; -webkit-text-fill-color: var(--tx) !important; text-decoration: none;
background: color-mix(in srgb, var(--tx) 8%, transparent); border: 1px solid color-mix(in srgb, var(--tx) 16%, transparent); padding: 6px 11px; border-radius: 999px; transition: transform .2s; }
html body main .u-crumbs a:last-of-type { font: 700 13px/1.2 'Marhey', sans-serif !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0;
background: linear-gradient(120deg, #5b5bf0, #ff3b8d); box-shadow: 0 0 14px #ff3b8d88; }
html body main .u-crumbs a:active { transform: scale(.94); }
html body main .u-tx b, html body main .drow .dt strong { font: 700 15.5px/1.5 'Almarai', sans-serif !important; letter-spacing: -.2px; }
html body .tm .ag .lc .tl b {
font: 700 14px/1.4 'Almarai', sans-serif !important; letter-spacing: -.35px;
background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 55%, #fff), var(--sc)); -webkit-background-clip: text; background-clip: text; color: transparent !important;
padding-inline-start: 10px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
html body .tm .ag .lc .tl b::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 4px; height: 14px; translate: 0 -50%; border-radius: 4px; background: var(--sc); box-shadow: 0 0 8px var(--sc); }
:root[data-theme="light"] .tm .ag .lc .tl b { background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 90%, #0f172a), var(--sc)); -webkit-background-clip: text; background-clip: text; }
html body .tm .tm-nx-n { font: 700 13px/1.4 'Almarai', sans-serif !important; letter-spacing: -.3px; }
html body .tm .ag .lc .tm-card > .meta { display: grid !important; grid-template-columns: 1fr; gap: 0; width: 100%; border: 1px solid color-mix(in srgb, var(--sc) 25%, transparent); border-bottom: 0; border-radius: 14px 14px 0 0; overflow: hidden; background: color-mix(in srgb, var(--sc) 6%, transparent); }
html body .tm .ag .lc .tm-card > .meta > * { display: grid !important; grid-template-columns: 18px 52px 1fr; align-items: center; gap: 6px; padding: 8px 10px !important; margin: 0; border-radius: 0 !important; background: none !important; font: 700 12.5px/1.4 'Almarai', sans-serif !important; color: var(--tx) !important; border-bottom: 1px dashed color-mix(in srgb, var(--sc) 20%, transparent); }
html body .tm .ag .lc .tm-card > .meta > * svg { width: 16px; height: 16px; stroke: var(--sc); grid-row: 1; grid-column: 1; }
html body .tm .ag .lc .tm-card > .meta > small::before { content: "القاعة"; }
html body .tm .ag .lc .tm-card > .meta > span::before { content: "الدكتور"; }
html body .tm .ag .lc .tm-card > .meta > *::before { grid-column: 2; grid-row: 1; color: var(--mu); font-weight: 700; font-size: 11.5px; }
html body .tm .ag .lc .tm-card > .meta > * { text-indent: 0; }
html body .tm .ag .lc .tm-card > .rg2 { width: 100%; margin-top: -7px; border: 1px solid color-mix(in srgb, var(--sc) 25%, transparent) !important; border-top: 0 !important; border-radius: 0 0 14px 14px !important; background: color-mix(in srgb, var(--sc) 6%, transparent) !important; }
html body .tm .ag .lc .tm-card > .meta + .rg2 { margin-top: -7px; }
html body .tm .ag .lc > .tb { display: none !important; }
html body .tm .ag .lc { display: block !important; padding: 0 !important; margin: 0 0 4px; border: 0 !important; background: none !important; }
html body .tm .ag .lc::before, html body .tm .ag .lc::after { display: none !important; }
html body .tm .ag .lc .tm-card { position: relative; width: 100% !important; gap: 10px !important; padding: 14px 16px 14px 14px !important; border-radius: 20px !important;
background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 16%, var(--bg, #0f172a)), color-mix(in srgb, var(--sc) 4%, var(--bg, #0f172a))) !important;
border: 1px solid color-mix(in srgb, var(--sc) 35%, transparent) !important;
box-shadow: 0 10px 28px -14px var(--sc), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent) !important; overflow: hidden; }
html body .tm .ag .lc .tm-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sc); box-shadow: 0 0 12px var(--sc); }
:root[data-theme="light"] .tm .ag .lc .tm-card { background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 12%, #fff), #fff) !important; box-shadow: 0 10px 24px -16px var(--sc) !important; }
html body .tm .ag .lc .tl { width: 100%; justify-content: space-between; flex-wrap: nowrap !important; }
html body .tm .ag .lc .tl b { font-size: 15px !important; padding-inline-start: 0 !important; }
html body .tm .ag .lc .tl b::before { display: none !important; }
html body .tm .ag .lc .tm-cnt { flex: none; }
html body .tm .ag .lc .tm-card > .rg2 { order: -1; margin: 0 !important; border: 0 !important; border-radius: 14px !important; background: color-mix(in srgb, var(--sc) 14%, transparent) !important; box-shadow: none !important; }
html body .tm .ag .lc .tm-card > .rg2 > div { flex: 1; background: none !important; padding: 7px 8px !important; }
html body .tm .ag .lc .tm-card > .rg2 b { font-size: 24px !important; color: var(--tx); }
html body .tm .ag .lc .tm-card > .rg2 .ar span { background: var(--sc) !important; color: #fff !important; }
html body .tm .ag .lc .tm-card > .rg2 .to b { color: var(--sc) !important; }
html body .tm .ag .lc .tm-card > .meta { border: 0 !important; border-radius: 14px !important; background: color-mix(in srgb, var(--tx) 5%, transparent) !important; }
html body .tm .ag .lc .tm-card > .meta > *:last-child { border-bottom: 0 !important; }
html body .tm .ag .lc.live .tm-card { border-color: #ef4444 !important; box-shadow: 0 0 0 2px #ef444455, 0 10px 28px -12px #ef4444 !important; }
html body .tm .ag .lc.done .tm-card { opacity: .7; }
html body .tm .ag .lc .tm-card > .tl { order: -2; }
html body .tm .ag .lc .tm-card { display: grid !important; grid-template-columns: 70px 1fr; grid-template-areas: "t n" "t m"; align-items: center; column-gap: 12px !important; row-gap: 6px !important;
padding: 10px 12px 10px 10px !important; border-radius: 18px !important;
background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 14%, #160D1A), #160D1A 70%) padding-box, linear-gradient(135deg, var(--sc), transparent 45%, color-mix(in srgb, var(--sc) 50%, transparent)) border-box !important;
border: 1px solid transparent !important; box-shadow: 0 12px 24px -18px var(--sc) !important; }
html body .tm .ag .lc .tm-card::before { display: none !important; }
html body .tm .ag .lc .tm-card > .tl { grid-area: n; order: 0; align-self: end; gap: 6px; }
html body .tm .ag .lc .tl b { font-size: 14.5px !important; }
html body .tm .ag .lc .tm-cnt { font-size: 10.5px !important; padding: 2px 7px !important; }
html body .tm .ag .lc .tm-card > .rg2 { grid-area: t; order: 0; align-self: stretch; flex-direction: column !important; justify-content: center; gap: 0; padding: 6px 0 !important; border-radius: 14px !important; overflow: hidden;
background: linear-gradient(180deg, var(--sc), color-mix(in srgb, var(--sc) 55%, #000)) !important; box-shadow: inset 0 1px 0 #ffffff40, 0 6px 14px -8px var(--sc) !important; }
html body .tm .ag .lc .tm-card > .rg2 > div { flex: none; padding: 0 !important; }
html body .tm .ag .lc .tm-card > .rg2 small, html body .tm .ag .lc .tm-card > .rg2 .ar::before, html body .tm .ag .lc .tm-card > .rg2 .ar::after { display: none !important; }
html body .tm .ag .lc .tm-card > .rg2 b { font-size: 22px !important; color: #fff !important; text-shadow: 0 1px 3px #0005; }
html body .tm .ag .lc .tm-card > .rg2 b sub { color: #ffffffb0 !important; font-size: 9px; }
html body .tm .ag .lc .tm-card > .rg2 .to b { font-size: 13px !important; color: #ffffffd0 !important; }
html body .tm .ag .lc .tm-card > .rg2 .ar { padding: 2px 0 !important; }
html body .tm .ag .lc .tm-card > .rg2 .ar span { font-size: 9px !important; padding: 1px 6px !important; background: #00000040 !important; color: #fff !important; border-radius: 99px; }
html body .tm .ag .lc .tm-card > .meta { grid-area: m; order: 0; align-self: start; display: flex !important; flex-wrap: wrap; gap: 6px !important; border: 0 !important; background: none !important; border-radius: 0 !important; overflow: visible; }
html body .tm .ag .lc .tm-card > .meta > * { display: inline-flex !important; align-items: center; gap: 4px !important; padding: 4px 9px 4px 10px !important; border: 1px solid color-mix(in srgb, var(--sc) 35%, transparent) !important; border-radius: 99px !important;
background: color-mix(in srgb, var(--sc) 10%, transparent) !important; font: 700 11.5px/1.2 'Almarai', sans-serif !important; color: var(--tx) !important; white-space: nowrap; }
html body .tm .ag .lc .tm-card > .meta > *::before { content: none !important; }
html body .tm .ag .lc .tm-card > .meta > * svg { width: 13px !important; height: 13px !important; stroke: var(--sc) !important; }
html body .tm .ag .lc .tm-card > .meta > small { background: var(--sc) !important; color: #fff !important; border-color: transparent !important; font-weight: 800 !important; box-shadow: 0 4px 10px -5px var(--sc); }
html body .tm .ag .lc .tm-card > .meta > small svg { stroke: #fff !important; }
:root[data-theme="light"] .tm .ag .lc .tm-card { background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 10%, #fff), #fff 70%) padding-box, linear-gradient(135deg, var(--sc), transparent 45%, color-mix(in srgb, var(--sc) 40%, transparent)) border-box !important; }
html body .tm .ag .lc .tm-cnt { display: none !important; }
html body .tm .ag .lc .tm-card > .rg2 > div:not(.ar) { flex-direction: row !important; align-items: baseline; justify-content: center; gap: 4px; }
html body .tm .ag .lc .tm-card > .rg2 > div:not(.ar) small { display: inline !important; font: 800 10px "Almarai", sans-serif !important; color: #ffffffc0 !important; }
html body .tm .ag .lc .tm-card { grid-template-columns: 84px 1fr; }
html body .tm .ag .lc .tl b { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font: 700 14px/1.45 'Almarai', sans-serif !important; }
html body .tm .ag .lc .tm-card > .rg2 > div:not(.ar) { flex-direction: column !important; align-items: center; gap: 0; line-height: 1; }
html body .tm .ag .lc .tm-card > .rg2 > div:not(.ar) small { font-size: 9.5px !important; margin-bottom: 1px; }
html body .tm .ag .lc .tm-card > .rg2 > div:not(.ar) small { color: #e11d48 !important; background: #fff; padding: 1px 6px; border-radius: 99px; font-weight: 800 !important; margin-bottom: 2px; }
html body .tm .ag .lc { margin: 0 0 2px !important; }
html body .tm .ag .lc .tm-card { grid-template-columns: 66px minmax(0, 1fr) !important; column-gap: 10px !important; row-gap: 5px !important; padding: 8px 10px 8px 8px !important; border-radius: 16px !important; max-width: 100%; box-sizing: border-box; }
html body .tm .ag .lc .tm-card > .rg2 { padding: 5px 0 !important; border-radius: 12px !important; }
html body .tm .ag .lc .tm-card > .rg2 b { font-size: 18px !important; }
html body .tm .ag .lc .tm-card > .rg2 .to b { font-size: 12px !important; }
html body .tm .ag .lc .tm-card > .rg2 > div:not(.ar) small { font-size: 8.5px !important; padding: 0 5px; }
html body .tm .ag .lc .tl b { font-size: 13.5px !important; line-height: 1.4 !important; }
html body .tm .ag .lc .tm-card > .meta { gap: 5px !important; min-width: 0; }
html body .tm .ag .lc .tm-card > .meta > * { white-space: normal !important; max-width: 100%; padding: 3px 8px !important; font-size: 11px !important; line-height: 1.35 !important; }
html body .tm .ag .lc .tm-card > .meta > * svg { flex: none; width: 12px !important; height: 12px !important; }
@media (max-width: 760px) { body::before, body::after { animation: none; } }
@view-transition{navigation:auto}
.bottomnav{view-transition-name:nz-bnav}
header.top{view-transition-name:nz-top}
::view-transition-old(root){animation:nzVtOut .16s ease-in both}
::view-transition-new(root){animation:nzVtIn .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes nzVtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes nzVtIn{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
[hidden] { display: none !important; }
.skiplink { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 200; padding: 12px 18px; border-radius: 12px; background: var(--text); color: var(--bg) !important; font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform .2s; }
.skiplink:focus { transform: none; outline: 3px solid var(--primary); outline-offset: 2px; }
main:focus { outline: none; }
.theme-btn .th-sun, .theme-btn .th-moon { display: contents; }
:root[data-theme="light"] .theme-btn .th-moon, :root:not([data-theme="light"]) .theme-btn .th-sun { display: none; }
.tab { height: 44px; min-height: 44px; }
@media (max-width: 480px) {
.top-actions { gap: 4px; }
.icon-btn { width: 44px; height: 44px; }
.icon-btn svg { width: 20px; height: 20px; }
.top-actions .btn-sm { min-height: 44px; padding: 0 14px; }
.top-actions .icon-btn::after { content: none; }
}
html body main a.u-back, html body main .sp a.u-back { min-height: 44px !important; display: inline-flex; align-items: center; gap: 6px; padding: 0 18px !important; }
html body main .u-crumbs a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px !important; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.hx-head a, .dg-go, .st-back, .row-between > a.small, .card.empty a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
main label:has(> input[type=checkbox]) { min-height: 44px; cursor: pointer; }
main label > input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: none; }
:root:not([data-theme="light"]) .logo .pro, :root:not([data-theme="light"]) .chip-new { background: #D81B60; }
html[data-theme="light"] body:not(.pt-none) main a:not(.btn):not(.tab):not(.tile):not(.card) { color: color-mix(in srgb, var(--pcd) 85%, var(--st)) !important; }
html[data-theme="light"] body:not(.pt-none) .tab:not(.on) { color: color-mix(in srgb, var(--pcd) 80%, var(--st)) !important; }
html[data-theme="light"] body:not(.pt-none) .card.empty { color: color-mix(in srgb, var(--pcd) 75%, #222) !important; }
html[data-theme="light"] body:not(.pt-none) { --sm: #4f5763; }
:root[data-theme="light"] .u { --mu: #4f5b6e; }
:root[data-theme="light"] { --cyan-text: #096359; }
html body.pt-acc main .acc-stats a.card { border: 0 !important; box-shadow: 0 10px 22px -12px rgba(0,0,0,.45) !important; }
html body.pt-acc main .acc-stats a.card:nth-child(1) { background: linear-gradient(140deg, #e11d48, #be123c) !important; }
html body.pt-acc main .acc-stats a.card:nth-child(2) { background: linear-gradient(140deg, #c2410c, #9a3412) !important; }
html body.pt-acc main .acc-stats a.card:nth-child(3) { background: linear-gradient(140deg, #7c3aed, #6d28d9) !important; }
html body.pt-acc main .acc-stats a.card b, html body.pt-acc main .acc-stats a.card span { color: #fff !important; }
html body.pt-acc main .acc-stats a.card b svg { stroke: #fff; }
:root .pt-acc #profile > .btn-primary, :root .cf-dlg .btn[data-y] { background: linear-gradient(140deg, #0e7490, #155e75) !important; }
.u-view, .u-num, .drow .u-view, .sp .u-row .u-view, html body main .u-node a.u-back, html body main .sp a.u-back, html body main .u-node a.u-back i, html body main .sp a.u-back i { --ink: #14101a; }
@supports (color: oklch(from red l c h)) {
.u-view, .u-num, .drow .u-view, .sp .u-row .u-view, .sp details.lec .num, .dg-i, .pt-exam .es-n { --ink: oklch(from var(--sc, var(--k, var(--t, var(--pc)))) clamp(0, (0.6 - l) * 1000, 1) 0 0); }
.dg-i { --ink: oklch(from var(--k, var(--pc)) clamp(0, (0.6 - l) * 1000, 1) 0 0); }
.pt-exam .es-n { --ink: oklch(from var(--t) clamp(0, (0.6 - l) * 1000, 1) 0 0); }
}
.u-view, .drow .u-view, .sp .u-row .u-view { color: var(--ink) !important; }
.u-ic.u-num { color: var(--ink); background: linear-gradient(150deg, color-mix(in srgb, var(--sc) 85%, #fff), var(--sc)); }
.sp details.lec .num, .dg-i, .pt-exam .es-n { color: var(--ink) !important; }
.sp details.lec .num { background: linear-gradient(145deg, color-mix(in srgb, var(--sc) 85%, #fff), var(--sc)); }
.dg-i { background: linear-gradient(140deg, color-mix(in srgb, var(--k, var(--pc)) 85%, #fff), var(--k, var(--pc))) !important; }
.pt-exam .es-n { background: linear-gradient(145deg, color-mix(in srgb, var(--t) 85%, #fff), var(--t)); }
html body main .u-node a.u-back, html body main .sp a.u-back { background: linear-gradient(120deg, color-mix(in srgb, var(--sc) 62%, #000), color-mix(in srgb, #be185d 80%, var(--sc)), color-mix(in srgb, var(--sc) 62%, #000)) !important; background-size: 200% auto !important; }
html body main .u-crumbs a:last-of-type { background: linear-gradient(120deg, #4338ca, #be185d); }
:root[data-theme="light"] .u-node .xh-lead, :root[data-theme="light"] .u-head small { color: color-mix(in srgb, var(--sc) 60%, #000); }
:root[data-theme="light"] .authx-h em { color: color-mix(in srgb, var(--primary) 72%, #000); }
:root:not([data-theme="light"]) .xh--sum .xh-a { background-image: linear-gradient(transparent 58%, rgba(250, 204, 21, .22) 58% 88%, transparent 88%); }
.xh-stamp { position: relative; float: left; inset: auto; bottom: auto; width: 64px; height: 64px; margin: 0 12px 6px 0; z-index: 1; }
[dir="ltr"] .xh-stamp { float: right; margin: 0 0 6px 12px; }
.xh--news .xh-stamp { width: auto; height: auto; }
.xh-lead { padding-inline-end: 36px; }
.xh-mark.m1 { top: auto; bottom: 8px; inset-inline-start: auto; inset-inline-end: 12px; font-size: 20px; }
.xh-mark.m2, .xh-mark.m4 { display: none; }
.xh-mark.m3 { top: 8px; inset-inline-start: auto; inset-inline-end: 84px; font-size: 18px; }
@media (max-width: 599px) { .xh-mark.m3 { display: none; } }
@keyframes xhRise { from { transform: translateY(14px); } }
@keyframes xhInkT { from { transform: translateX(30px) skewX(-12deg); } }
.xh-a { animation: xhInkT .8s cubic-bezier(.2,.8,.2,1) both; }
.xh--sum .xh-a { animation: xhInkT .8s cubic-bezier(.2,.8,.2,1) both, xhHi .9s .4s ease-out forwards; }
.xh-b { animation: xhRise .6s .1s ease-out both; }
.xh-lead, .u-node .xh-lead { animation: xhRise .6s .15s ease-out both; }
.xh-b path { animation-delay: .35s; }
.xh ~ .tabs, .xh ~ section, .xh ~ .card { animation-delay: .15s; }
.xh ~ section:nth-of-type(2) { animation-delay: .22s; } .xh ~ section:nth-of-type(3) { animation-delay: .3s; }
body:not(.pt-none) .grid > *, body:not(.pt-none) .list > *, body:not(.pt-none) .news-item { animation-delay: calc(.12s + var(--i, 0) * 50ms); }
.nw-t span, .nw-t em { animation-name: xhRise; }
.xh-t { min-height: calc(1.25 * clamp(42px, 13vw, 64px)); }
.nw-h1 { display: flex; flex-direction: column; gap: 2px; margin: 0; font: inherit; line-height: 1.1; }
.nz-off, .nz-off *, .nz-off::before, .nz-off::after, .nz-off *::before, .nz-off *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html body .xh .xh-mark, html body .xh-mark, .xh-stamp, .nw-w b, .xh-fx i, .xh::after { animation: none !important; }
}
@media (max-width: 760px) {
header.top, .bottomnav, html body:not(.pt-none) header.top, html body:not(.pt-none) .bottomnav, .jump a, .seg, .dv .tm-ic { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
header.top { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.bottomnav { background: color-mix(in srgb, var(--card) 96%, transparent); }
html body:not(.pt-none) header.top, html body:not(.pt-none) .bottomnav { background: color-mix(in srgb, var(--pc) 8%, var(--sb)) !important; }
html[data-theme="light"] body:not(.pt-none) header.top, html[data-theme="light"] body:not(.pt-none) .bottomnav { background: color-mix(in srgb, var(--pc) 6%, #fff) !important; }
body::before, body::after { filter: none; opacity: .3; }
body::before { background: radial-gradient(closest-side, #FF4D8D, transparent); }
body::after { background: radial-gradient(closest-side, var(--primary), transparent); }
html body:not(.pt-none)::before, html body:not(.pt-none)::after { background: radial-gradient(closest-side, var(--pc), transparent) !important; }
}
html body:not(.pt-none) .card.empty p, .card.empty p { margin: 0; }
html body:not(.pt-none) .card.empty .btn { margin-top: 2px; }
.adm-sub { font-size: .55em; font-weight: 700; color: var(--muted); font-family: var(--font); }
.err { display: grid; justify-items: center; gap: 12px; margin-top: 24px; padding: 28px 18px !important; text-align: center; }
.err-art { position: relative; display: grid; place-items: center; width: 150px; height: 120px; }
.err-art b { font: 800 64px/1 var(--num); letter-spacing: -1px; color: var(--pcd, var(--primary)); }
:root:not([data-theme="light"]) .err-art b { color: color-mix(in srgb, var(--pc, var(--primary)) 60%, #fff); }
.err-art i { position: absolute; font-style: normal; font-family: var(--head); color: var(--pc, var(--primary)); opacity: .45; font-size: 22px; animation: xhFloat 6s ease-in-out infinite; }
.err-art i:nth-of-type(1) { top: 0; inset-inline-start: 6px; } .err-art i:nth-of-type(2) { bottom: 4px; inset-inline-end: 0; animation-delay: -2s; } .err-art i:nth-of-type(3) { top: 8px; inset-inline-end: 12px; animation-delay: -4s; }
.err h1 { margin: 0; font-size: clamp(24px, 7vw, 32px); }
.err p { margin: 0; max-width: 32em; }
.err-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.err-acts .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.top .logo { min-height: 44px; display: inline-flex; align-items: center; }
.abtn, .abtn-t { font-family: var(--font); }
.acc-stats b, .dn, .sh-n b, .qz-ring b, .xs-n, .qp-score b, .qp-timer b, .cd-ring b, .qx-tm, .sg-hours b, .dg-i, .pt-exam .es-n, .qc-o button b, .qx-o button b { font-family: var(--num) !important; font-weight: 800; }
.abtn-t { font-size: 15px; line-height: 1.35; }
.topnav a { min-height: 44px; display: inline-flex; align-items: center; }
.switch::after { content: ""; position: absolute; inset: -7px -4px; } 
.xh-fx { inset-inline-start: 58%; }
.searchbox input { min-height: 44px; }
.n3d { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .38em; margin-inline-start: .15em; vertical-align: .08em;
border-radius: .55em; font: 800 .8em/1 var(--num, inherit); color: #fff; letter-spacing: 0;
background: radial-gradient(120% 90% at 30% 15%, #b794ff 0%, transparent 55%), linear-gradient(160deg, #8b5cf6 0%, #6d28ef 45%, #380b94 100%);
text-shadow: 0 1px 0 rgba(30,0,80,.55), 0 0 6px rgba(255,255,255,.55);
box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(30,5,90,.55), 0 2px 0 #2a0874, 0 3px 6px rgba(56,11,148,.45), 0 0 12px rgba(139,92,246,.55);
animation: n3dglow 2.6s ease-in-out infinite; }
h1 .n3d { font-size: .85em; }
@keyframes n3dglow { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(30,5,90,.55), 0 2px 0 #2a0874, 0 3px 6px rgba(56,11,148,.45), 0 0 18px rgba(167,125,255,.85); } }
@media (prefers-reduced-motion: reduce) { .n3d { animation: none; } }
.u-files .dt strong:has(.n3d) { padding: 7px 8px; margin: -7px -8px; }
.u-seg.many { display: flex; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.u-seg.many::-webkit-scrollbar { display: none; }
.u-seg.many button { flex: 1 0 auto; padding-inline: 12px; white-space: nowrap; }
.searchbox input:focus-visible { outline: none; }
.splash.ns{--k:#071318;--k2:#0E2A30;--tl:#1FC8B4;--am:#FFB547;--cr:#FF6B4A;--tx:#ECE6DA;
background:var(--k)!important;color:var(--tx);overflow:hidden;font-family:'Almarai',sans-serif;
padding:24px 20px calc(70px + env(safe-area-inset-bottom))}
.splash.ns::before{display:none}
.splash.ns>*{position:absolute}
.cx-bg{inset:0;background:
radial-gradient(60% 45% at 50% 40%,rgba(31,200,180,.22),transparent 70%),
radial-gradient(40% 30% at 80% 90%,rgba(255,181,71,.12),transparent 70%),
linear-gradient(rgba(31,200,180,.07) 1px,transparent 1px) 0 0/28px 28px,
linear-gradient(90deg,rgba(31,200,180,.07) 1px,transparent 1px) 0 0/28px 28px;
animation:cxIn .6s both}
.cx-rain{inset:0;pointer-events:none}
.cx-rain i{position:absolute;top:-10%;left:var(--x);font:700 15px/1 ui-monospace,monospace;font-style:normal;color:var(--tl);opacity:0;
direction:ltr;animation:cxRain 4.5s var(--d) linear infinite}
.cx-rain i:nth-child(3n){color:var(--am)}
.cx-rain i:nth-child(4n){font-size:22px}
.cx-term{z-index:3;left:0;right:0;margin:auto;top:30%;width:min(330px,86vw);background:#0A1E23;border:1px solid rgba(31,200,180,.4);border-radius:14px;
box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(31,200,180,.15);padding:0 0 14px;overflow:hidden;
animation:cxPop .5s .15s cubic-bezier(.2,1.4,.4,1) both,cxOut .4s 2.7s ease-in forwards}
.cx-th{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--k2);direction:ltr}
.cx-th i{width:10px;height:10px;border-radius:50%;background:var(--cr)}.cx-th i+i{background:var(--am)}.cx-th i+i+i{background:var(--tl)}
.cx-th span{margin-left:auto;font:12px ui-monospace,monospace;color:#7FA7A8}
.cx-term p{margin:10px 14px 0;font:700 14px/1.4 'Almarai',sans-serif;white-space:nowrap;overflow:hidden;clip-path:inset(0 0 0 100%)}
.cx-term p.l1{direction:ltr;text-align:left;font-family:ui-monospace,monospace;clip-path:inset(0 100% 0 0);color:var(--tx)}
.cx-term p b{color:var(--tl)}.cx-term p em{font-style:normal;color:var(--tl)}
.cx-term .l4{color:var(--am)}
.cx-term .l1{animation:cxTypeL .5s .45s steps(14) forwards}
.cx-term .l2{animation:cxType .45s 1s steps(16) forwards}
.cx-term .l3{animation:cxType .45s 1.5s steps(16) forwards}
.cx-term .l4{animation:cxType .45s 2s steps(16) forwards}
.cx-scenes{inset:0;display:grid;place-items:center;z-index:3;pointer-events:none}
.sc{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0}
.sc svg{width:min(150px,40vw);height:auto;filter:drop-shadow(0 10px 30px rgba(31,200,180,.35))}
.sc b{font:400 clamp(40px,13vw,80px)/1.1 'Marhey',sans-serif;color:var(--tx)}
.sc.s1 b{color:var(--tl)}.sc.s2 b{color:var(--am)}.sc.s3 b{color:#fff;text-shadow:0 0 24px rgba(255,181,71,.6)}
.sc.s1{animation:cxScene 1.15s 2.95s both}
.sc.s2{animation:cxScene 1.15s 4.1s both}
.sc.s3{animation:cxScene 1.25s 5.25s both}
.sc .cd{stroke-dasharray:120;stroke-dashoffset:120;animation:cxDraw .7s 3.1s forwards}
.sc.s3 svg{animation:cxLaunch 1.25s 5.25s ease-in both}
.sc .fl{transform-origin:60px 62px;animation:cxFlame .12s linear infinite alternate}
.ns-msg{z-index:4;text-align:center;max-width:440px;left:20px;right:20px;margin:auto;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center}
.cx-logo{display:flex;align-items:baseline;gap:10px;opacity:0;animation:cxSlam .5s 6.4s cubic-bezier(.4,0,.5,1.5) both}
.cx-logo .t{font:400 clamp(64px,21vw,116px)/1.15 'Marhey',sans-serif;color:#fff;text-shadow:0 0 30px rgba(31,200,180,.55),3px 3px 0 var(--tl)}
.cx-logo .p{font:700 clamp(18px,5.5vw,28px) 'Lemonada',sans-serif;color:var(--k);background:var(--am);padding:2px 12px;border-radius:8px;transform:rotate(-6deg)}
.cx-inst{margin:4px 0 0;font-size:13px;font-weight:700;color:var(--tl);background:rgba(31,200,180,.1);border:1px solid rgba(31,200,180,.35);
padding:6px 14px;border-radius:999px;opacity:0;animation:cxUp .5s 6.8s both}
.ns-hi{font:700 clamp(18px,5.4vw,26px)/1.5 'Lemonada',sans-serif;margin:14px 0 4px;opacity:0;animation:cxUp .5s 7.1s both}
.ns-hi em{font-style:normal;color:var(--am)}
.ns-desc{display:grid;min-height:3.4em;align-items:center;font-weight:700;font-size:15.5px;line-height:1.7;color:#fff;margin:0 0 18px}
.ns-desc span{grid-area:1/1;opacity:0;animation:cxLine 2.4s both}
.ns-desc span:nth-child(1){animation-delay:7.4s}
.ns-desc span:nth-child(2){animation-delay:9.2s}
.ns-desc span:nth-child(3){animation-delay:11s}
.ns-desc span:nth-child(4){animation:cxUp .5s 12.8s both}
.cx-go{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;
font:700 18px 'Almarai',sans-serif;color:var(--k);background:linear-gradient(135deg,var(--am),#FFD27A);
border-radius:16px;padding:14px 22px 14px 26px;min-height:56px;overflow:hidden;
box-shadow:0 10px 30px rgba(255,181,71,.35);opacity:0;animation:cxUp .5s 7.6s both,cxBeat 1.8s 8.4s ease-in-out infinite}
.cx-go::before{content:"";position:absolute;inset:-3px;z-index:-2;border-radius:18px;
background:conic-gradient(from var(--g,0deg),var(--tl),transparent 30%,var(--am) 50%,transparent 80%,var(--tl));animation:cxRot 2.4s linear infinite}
.cx-go::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:14px;background:linear-gradient(135deg,var(--am),#FFD27A)}
.cx-go .ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--k);color:var(--tl);font-size:13px}
.cx-go .rk{display:inline-block;animation:cxRk 1s ease-in-out infinite alternate}
.cx-go .tx{background:linear-gradient(105deg,var(--k) 40%,#5a3a00 50%,var(--k) 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cxShine 2.2s 8s linear infinite}
.cx-go:active{transform:scale(.96)}
.cx-go:active .rk{transform:translate(-30px,-30px);opacity:0;transition:.3s}
.cx-hint{margin:10px 0 0;opacity:0;animation:cxUp .5s 8s both}
.cx-hint code{direction:ltr;display:inline-block;font:13px ui-monospace,monospace;color:#7FA7A8}
.cx-hint code::after{content:"_";color:var(--tl);animation:cxBlink 1s steps(1) infinite}
.splash.ns .skip{z-index:6;top:calc(16px + env(safe-area-inset-top));left:16px;background:rgba(255,255,255,.06);border:1px solid rgba(31,200,180,.4);
color:var(--tx);border-radius:999px;padding:9px 18px;font:700 13px 'Almarai',sans-serif;min-height:40px}
.cx-go:focus-visible,.splash.ns .skip:focus-visible{outline:3px solid var(--tl);outline-offset:3px}
.splash.ns .bar{z-index:4;left:0;right:0;margin:auto;bottom:calc(28px + env(safe-area-inset-bottom))}
.splash.ns .bar i{background:linear-gradient(90deg,var(--tl),var(--am));animation-duration:14s}
.splash.ns.out{opacity:0;visibility:hidden;transform:translateY(-100%);filter:none;transition:transform .6s cubic-bezier(.7,0,.3,1),opacity .2s .45s,visibility 0s .6s}
@property --g{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes cxRot{to{--g:360deg}}
@keyframes cxIn{from{opacity:0}}
@keyframes cxRain{0%{opacity:0;transform:translateY(0)}10%{opacity:.35}90%{opacity:.35}100%{opacity:0;transform:translateY(115vh)}}
@keyframes cxPop{from{opacity:0;transform:scale(.7) translateY(30px)}}
@keyframes cxOut{to{opacity:0;transform:scale(1.4);filter:blur(8px)}}
@keyframes cxType{to{clip-path:inset(0 0 0 0)}}
@keyframes cxTypeL{to{clip-path:inset(0 0 0 0)}}
@keyframes cxScene{0%{opacity:0;transform:scale(.5) rotate(-6deg)}18%{opacity:1;transform:scale(1.05)}28%,78%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.3);filter:blur(6px)}}
@keyframes cxDraw{to{stroke-dashoffset:0}}
@keyframes cxLaunch{0%,40%{transform:none}55%{transform:translate(2px,0)}60%{transform:translate(-2px,0)}100%{transform:translateY(-70vh)}}
@keyframes cxFlame{to{transform:scaleY(1.35)}}
@keyframes cxSlam{0%{opacity:0;transform:scale(3);filter:blur(10px)}100%{opacity:1;transform:none;filter:none}}
@keyframes cxUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes cxLine{0%{opacity:0;transform:translateY(16px)}15%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-16px)}}
@keyframes cxBeat{50%{box-shadow:0 10px 40px rgba(255,181,71,.6),0 0 0 8px rgba(31,200,180,.12)}}
@keyframes cxRk{to{transform:translate(-4px,-4px) rotate(-8deg)}}
@keyframes cxShine{to{background-position:-250% 0}}
@keyframes cxBlink{50%{opacity:0}}
@media (max-height:600px){.cx-inst,.cx-hint{display:none}.sc svg{width:90px}}
.cx-cut{inset:0;z-index:3;pointer-events:none}
.ct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;animation:cxCut .5s steps(1,end) forwards}
.ct i{font-style:normal;font-size:clamp(70px,24vw,120px);line-height:1;animation:cxPunch .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:inherit}
.ct b{font:400 clamp(46px,15vw,96px)/1.1 'Marhey',sans-serif;padding:.05em .3em;border-radius:12px;transform:rotate(-4deg);animation:cxZoom .5s ease-out both;animation-delay:inherit}
.ct small{font:700 15px 'Almarai',sans-serif;color:var(--tx);opacity:.9}
.ct.c1,.ct.c4{background:var(--tl)}.ct.c1 b,.ct.c4 b{background:var(--k);color:var(--tl)}.ct.c1 small,.ct.c4 small{color:var(--k)}
.ct.c2,.ct.c5{background:var(--am)}.ct.c2 b,.ct.c5 b{background:var(--k);color:var(--am)}.ct.c2 small,.ct.c5 small{color:var(--k)}
.ct.c3,.ct.c6{background:var(--k)}.ct.c3 b,.ct.c6 b{background:var(--tx);color:var(--k)}
.ct.c3 b,.ct.c6 b{transform:rotate(4deg)}
.ct.c1{animation-delay:.25s}.ct.c2{animation-delay:.7s}.ct.c3{animation-delay:1.15s}
.ct.c4{animation-delay:1.6s}.ct.c5{animation-delay:2.05s}.ct.c6{animation-delay:2.5s}
.cx-flash{inset:0;z-index:5;pointer-events:none}
.cx-flash i{position:absolute;inset:0;background:#fff;opacity:0;animation:cxFl .18s ease-out forwards}
.cx-flash i:nth-child(1){animation-delay:.25s}.cx-flash i:nth-child(2){animation-delay:.7s}.cx-flash i:nth-child(3){animation-delay:1.15s}
.cx-flash i:nth-child(4){animation-delay:1.6s}.cx-flash i:nth-child(5){animation-delay:2.05s}.cx-flash i:nth-child(6){animation-delay:2.5s}
.splash.ns.cx{animation:cxShk .45s .25s 6 both}
.sc.s1{animation-delay:3.05s}.sc .cd{animation-delay:3.2s}
@keyframes cxCut{0%{opacity:1}100%{opacity:0}}
@keyframes cxPunch{0%{transform:scale(2.6) rotate(-20deg)}100%{transform:none}}
@keyframes cxZoom{0%{scale:1.8;letter-spacing:.2em}60%{scale:1}100%{scale:1.08}}
@keyframes cxFl{0%{opacity:.85}100%{opacity:0}}
@keyframes cxShk{0%,100%{translate:0}10%{translate:-7px 5px}20%{translate:6px -4px}30%{translate:-3px -3px}40%{translate:0}}
.cx-shat{inset:0;z-index:8;pointer-events:none}
.cx-shat i{position:absolute;inset:0;background:linear-gradient(135deg,#0B2227,#050E11);
animation:cxShard .75s .45s cubic-bezier(.5,0,.9,.4) forwards}
.cx-shat i:nth-child(1){clip-path:polygon(50% 45%,0 0,50% 0)}
.cx-shat i:nth-child(2){clip-path:polygon(50% 45%,50% 0,100% 0)}
.cx-shat i:nth-child(3){clip-path:polygon(50% 45%,100% 0,100% 45%)}
.cx-shat i:nth-child(4){clip-path:polygon(50% 45%,100% 45%,100% 100%)}
.cx-shat i:nth-child(5){clip-path:polygon(50% 45%,100% 100%,50% 100%)}
.cx-shat i:nth-child(6){clip-path:polygon(50% 45%,50% 100%,0 100%)}
.cx-shat i:nth-child(7){clip-path:polygon(50% 45%,0 100%,0 45%)}
.cx-shat i:nth-child(8){clip-path:polygon(50% 45%,0 45%,0 0)}
.cx-shat::after{content:"";position:absolute;inset:0;opacity:0;
background:repeating-conic-gradient(from 0deg at 50% 45%,rgba(255,255,255,.95) 0 .5deg,transparent .5deg 26deg),
radial-gradient(circle at 50% 45%,#fff 0 6px,rgba(31,200,180,.7) 7px 40px,transparent 120px);
animation:cxCrack 1s .1s ease-out forwards}
.cx-shat b{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#fff,rgba(255,181,71,.6) 40%,transparent 75%);opacity:0;
animation:cxFl .35s .1s ease-out forwards,cxFl .3s .45s ease-out forwards}
.splash.ns.cx{animation:cxShk .3s .1s 2 both,cxShk .45s .5s 5 both,cxBig .6s 6.4s both}
.cx-logo{position:relative}
.cx-logo .t{position:relative;display:inline-block;animation:cxGl 2.6s 7.2s steps(1) infinite}
.cx-logo .t::before,.cx-logo .t::after{content:attr(data-t);position:absolute;inset:0;mix-blend-mode:screen;text-shadow:none;pointer-events:none}
.cx-logo .t::before{color:var(--cr);animation:cxSpA .7s 6.4s cubic-bezier(.2,.8,.2,1) both}
.cx-logo .t::after{color:var(--tl);animation:cxSpB .7s 6.4s cubic-bezier(.2,.8,.2,1) both}
.cx-logo::after{content:"";position:absolute;inset:0;pointer-events:none;overflow:hidden;
background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%) no-repeat;background-size:300% 100%;background-position:150% 0;
animation:cxSw 1.1s 7s ease-in-out both}
.cx-boom{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:-1}
.cx-boom u{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:5px solid var(--am);opacity:0;animation:cxRing .9s 6.45s ease-out forwards}
.cx-boom u:nth-child(2){border-color:var(--tl);animation-delay:6.55s}
.cx-boom u:nth-child(3){border-color:#fff;animation-delay:6.65s}
.cx-boom i{position:absolute;width:5px;height:26px;margin:-13px -2px;border-radius:4px;background:var(--am);opacity:0;
transform:rotate(var(--a));animation:cxSpk .8s 6.45s ease-out forwards}
.cx-boom i:nth-child(odd){background:var(--tl)}
.cx-orb{position:absolute;left:50%;top:55%;width:0;height:0;pointer-events:none}
.cx-orb u{position:absolute;left:-150px;top:-50px;width:300px;height:100px;border-radius:50%;border:2px solid var(--tl);box-shadow:0 0 14px rgba(31,200,180,.6);
opacity:0;animation:cxOI .5s 6.7s both,cxOrb 5s 6.7s linear infinite}
.cx-orb u+u{border-color:var(--am);box-shadow:0 0 14px rgba(255,181,71,.6);--r:55deg;animation-duration:.5s,6.5s;animation-direction:normal,reverse}
@media (max-width:360px){.cx-orb u{left:-120px;width:240px;top:-40px;height:80px}}
@keyframes cxShard{0%{transform:none;opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.6);opacity:0}}
@keyframes cxCrack{0%{opacity:0;transform:scale(.3)}15%{opacity:1;transform:scale(.7)}35%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.3)}}
@keyframes cxBig{0%{translate:0;filter:none}10%{translate:-14px 10px;filter:brightness(2.2)}25%{translate:12px -8px}40%{translate:-8px -6px;filter:brightness(1.3)}60%{translate:6px 4px}80%{translate:-3px 2px}100%{translate:0;filter:none}}
@keyframes cxSpA{from{transform:translate(-50px,-8px);opacity:1}to{transform:none;opacity:0}}
@keyframes cxSpB{from{transform:translate(50px,8px);opacity:1}to{transform:none;opacity:0}}
@keyframes cxGl{0%,86%{transform:none;text-shadow:0 0 30px rgba(31,200,180,.55),3px 3px 0 var(--tl)}
88%{transform:translateX(4px) skewX(10deg);text-shadow:-6px 2px 0 var(--cr),6px -2px 0 var(--tl)}
92%{transform:translateX(-4px);text-shadow:6px -3px 0 var(--am),-6px 3px 0 var(--cr)}}
@keyframes cxSw{to{background-position:-150% 0}}
@keyframes cxRing{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(7);border-width:1px}}
@keyframes cxSpk{0%{opacity:1;transform:rotate(var(--a)) translateY(-20px)}100%{opacity:0;transform:rotate(var(--a)) translateY(-170px) scaleY(.3)}}
@keyframes cxOI{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
@keyframes cxOrb{from{transform:rotateZ(var(--r,-20deg)) rotateX(0)}to{transform:rotateZ(calc(var(--r,-20deg) + 360deg)) rotateX(360deg)}}
.ct{overflow:hidden;perspective:600px}
.ct::before{content:"";position:absolute;inset:-60%;z-index:-1;
background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.22) 0 9deg,transparent 9deg 18deg);
animation:cxBurst .5s linear both;animation-delay:inherit}
.ct::after{content:attr(data-w) attr(data-w);position:absolute;z-index:-1;left:-50%;right:-50%;top:50%;
font:400 120px/1.25 'Marhey',sans-serif;white-space:normal;word-spacing:.2em;text-align:center;
color:transparent;-webkit-text-stroke:2px rgba(0,0,0,.25);transform:translateY(-50%) rotate(-14deg);
animation:cxMarq .5s linear both;animation-delay:inherit}
.ct.c3::after,.ct.c6::after{-webkit-text-stroke-color:rgba(31,200,180,.35)}
.ct.c1{background:radial-gradient(circle at 50% 45%,#5FF0DD,var(--tl) 40%,#0B7C70)}
.ct.c2{background:radial-gradient(circle at 50% 45%,#FFE3A6,var(--am) 40%,#C9741A)}
.ct.c3{background:radial-gradient(circle at 50% 45%,#1C4F57,var(--k) 70%)}
.ct.c4{background:radial-gradient(circle at 50% 45%,#5FF0DD,var(--tl) 40%,#065E55)}
.ct.c5{background:radial-gradient(circle at 50% 45%,#FFB08F,var(--cr) 45%,#8E2A13)}
.ct.c6{background:radial-gradient(circle at 50% 45%,#3A2A0C,var(--k) 70%)}
.ct.c3::before,.ct.c6::before{background:repeating-conic-gradient(from 0deg,rgba(255,181,71,.18) 0 9deg,transparent 9deg 18deg)}
.ct.c5 b{background:var(--k);color:#FFB08F}.ct.c5 small{color:#fff}
.ct.c6 b{background:var(--am);color:var(--k)}
.ct i{filter:drop-shadow(0 12px 0 rgba(0,0,0,.25)) drop-shadow(0 0 30px rgba(255,255,255,.5));animation:cxPunch3 .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:inherit}
.ct b{box-shadow:8px 8px 0 rgba(0,0,0,.3);animation:cxSlab .5s cubic-bezier(.2,1.4,.3,1) both,cxRgb .12s steps(2) 4;animation-delay:inherit}
.ct small{animation:cxUp .3s .1s both;animation-delay:inherit}
@keyframes cxBurst{from{transform:rotate(0) scale(.6)}to{transform:rotate(60deg) scale(1.3)}}
@keyframes cxMarq{from{transform:translate(20%,-50%) rotate(-14deg)}to{transform:translate(-20%,-50%) rotate(-14deg)}}
@keyframes cxPunch3{0%{transform:scale(3) rotate(-30deg) translateZ(200px);opacity:0}55%{transform:scale(.9) rotate(6deg);opacity:1}100%{transform:scale(1.1) rotate(0)}}
@keyframes cxSlab{0%{transform:rotateX(90deg) scale(1.6);opacity:0}100%{transform:rotate(-4deg);opacity:1}}
@keyframes cxRgb{50%{text-shadow:-4px 0 0 var(--cr),4px 0 0 #5FF0DD}}
.sv2 .splash.ns{--sh:3.3s}.sv3 .splash.ns{--sh:2.65s}
.sv2 .cx-scenes{display:none}
.sv3 .cx-shat,.sv3 .cx-cut,.sv3 .cx-flash{display:none}
.sv3 .sc.s1{animation-delay:.3s}.sv3 .sc.s2{animation-delay:1.45s}.sv3 .sc.s3,.sv3 .sc.s3 svg{animation-delay:2.6s}.sv3 .sc .cd{animation-delay:.45s}
.sv2 .splash.ns.cx{animation:cxShk .3s .1s 2 both,cxShk .45s .5s 5 both,cxBig .6s calc(6.4s - var(--sh)) both}
.sv3 .splash.ns.cx{animation:cxBig .6s calc(6.4s - var(--sh)) both}
:is(.sv2,.sv3) .cx-logo{animation-delay:calc(6.4s - var(--sh))}
:is(.sv2,.sv3) .cx-inst{animation-delay:calc(6.8s - var(--sh))}
:is(.sv2,.sv3) .ns-hi{animation-delay:calc(7.1s - var(--sh))}
:is(.sv2,.sv3) .ns-desc span:nth-child(1){animation-delay:calc(7.4s - var(--sh))}
:is(.sv2,.sv3) .ns-desc span:nth-child(2){animation-delay:calc(9.2s - var(--sh))}
:is(.sv2,.sv3) .ns-desc span:nth-child(3){animation-delay:calc(11s - var(--sh))}
:is(.sv2,.sv3) .ns-desc span:nth-child(4){animation-delay:calc(12.8s - var(--sh))}
:is(.sv2,.sv3) .cx-go{animation-delay:calc(7.6s - var(--sh)),calc(8.4s - var(--sh))}
:is(.sv2,.sv3) .cx-go .tx{animation-delay:calc(8s - var(--sh))}
:is(.sv2,.sv3) .cx-hint{animation-delay:calc(8s - var(--sh))}
:is(.sv2,.sv3) .cx-logo .t{animation-delay:calc(7.2s - var(--sh))}
:is(.sv2,.sv3) .cx-logo .t::before,:is(.sv2,.sv3) .cx-logo .t::after{animation-delay:calc(6.4s - var(--sh))}
:is(.sv2,.sv3) .cx-logo::after{animation-delay:calc(7s - var(--sh))}
:is(.sv2,.sv3) .cx-boom u{animation-delay:calc(6.45s - var(--sh))}
:is(.sv2,.sv3) .cx-boom u:nth-child(2){animation-delay:calc(6.55s - var(--sh))}
:is(.sv2,.sv3) .cx-boom u:nth-child(3){animation-delay:calc(6.65s - var(--sh))}
:is(.sv2,.sv3) .cx-boom i{animation-delay:calc(6.45s - var(--sh))}
:is(.sv2,.sv3) .cx-orb u{animation-delay:calc(6.7s - var(--sh)),calc(6.7s - var(--sh))}
.cx-net{position:absolute;inset:0;pointer-events:none;z-index:1;animation:netOut .8s 2.4s both}
.cx-net i{position:absolute;top:0;left:var(--x);width:2px;height:var(--h);background:linear-gradient(#2dd4bf00,#2dd4bf99);box-shadow:0 0 8px #2dd4bf;transform-origin:top;transform:scaleY(0);animation:netDrop .7s var(--d) cubic-bezier(.2,.8,.2,1) both}
.cx-net i::before{content:"";position:absolute;left:-2px;width:6px;height:28px;border-radius:3px;background:linear-gradient(#fff0,#fff,#f5c542);box-shadow:0 0 12px #f5c542;animation:netFlow 1s calc(var(--d) + .4s) linear infinite}
.cx-net i::after{content:"";position:absolute;bottom:-5px;left:-4px;width:10px;height:10px;border-radius:50%;background:#2dd4bf;box-shadow:0 0 14px #2dd4bf,0 0 4px #fff;transform:scale(0);animation:netNode .35s calc(var(--d) + .65s) both}
.cx-net b{position:absolute;top:var(--y);left:var(--l);width:var(--w);height:2px;background:linear-gradient(90deg,#2dd4bf,#f5c542,#2dd4bf);box-shadow:0 0 8px #2dd4bf;transform:scaleX(0);transform-origin:left;animation:netLink .4s var(--d) ease-out both}
@keyframes netDrop{to{transform:scaleY(1)}}
@keyframes netFlow{from{top:-28px;opacity:0}20%{opacity:1}to{top:100%;opacity:0}}
@keyframes netNode{60%{transform:scale(1.6)}to{transform:scale(1)}}
@keyframes netLink{to{transform:scaleX(1)}}
@keyframes netOut{to{opacity:.12}}
@media (prefers-reduced-motion:reduce){.cx-net{display:none}}
@supports (height: 1cqh) {
.cx-net i { container-type: size; }
.cx-net i::before { top: 0; animation-name: netFlowT; }
@keyframes netFlowT { from { transform: translateY(-28px); opacity: 0 } 20% { opacity: 1 } to { transform: translateY(100cqh); opacity: 0 } }
}
html body main a.nz-back:not(#x) {
display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 40px; margin: 0 0 12px; padding: 0 16px;
border-radius: 999px; border: 0; color: #fff !important; text-decoration: none;
font: 800 13px/1 'Almarai', sans-serif; text-shadow: 0 1px 3px #0005;
background: linear-gradient(120deg, #7c3aed, #5b16d6) !important;
box-shadow: 0 4px 14px rgba(98, 40, 220, .35); transition: transform .15s, filter .2s;
}
html body main a.nz-back:not(#x) i { font-style: normal; color: #fff !important; transition: transform .2s; }
html body main a.nz-back:not(#x):hover { filter: brightness(1.1); text-decoration: none; }
html body main a.nz-back:not(#x):hover i { transform: translateX(3px); }
html body main a.nz-back:not(#x):active { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) { html body main a.nz-back:not(#x), html body main a.nz-back:not(#x) i { transition: none; } }
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/86dcc0150b.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/a9e8e937c5.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;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/bd45ba01ba.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/abeac1b789.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;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/18fca0c18f.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/aba40d14b5.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;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/fonts/2e9470a653.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/fonts/0bda75704b.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;
}
.ui2 {
--n2-bg: #05101c; --n2-bg2: #0a1828; --n2-box: #071422; --n2-box2: #0a1727;
--n2-line: rgba(70, 105, 160, .2); --n2-line2: rgba(80, 115, 175, .3);
--n2-text: #ffffff; --n2-sub: #c9cfdc; --n2-mut: #aab2c5; --n2-ico: #e6dcff;
--n2-p1: #6d28ef; --n2-p2: #380b94; --n2-pb: #7c3aed; --n2-pl: #a35df3; --n2-glow: rgba(110, 40, 240, .45);
--n2-green: #62ec3a;
--n2-r-bg: rgba(200, 16, 40, .32); --n2-r: #ff5468;
--n2-b-bg: rgba(0, 110, 230, .3); --n2-b: #2ec5ff;
--n2-v-bg: rgba(125, 35, 220, .38); --n2-v: #d27bff;
--n2-g-bg: rgba(20, 170, 70, .28); --n2-g: #4fe377;
background: radial-gradient(120% 60% at 50% 0, var(--n2-bg2), var(--n2-bg) 70%) fixed, var(--n2-bg);
color: var(--n2-text);
padding-bottom: calc(112px + env(safe-area-inset-bottom));
}
:root[data-theme="light"] .ui2 {
--n2-bg: #f2f5fa; --n2-bg2: #e6edf7; --n2-box: #ffffff; --n2-box2: #f5f7fc;
--n2-line: rgba(30, 60, 110, .12); --n2-line2: rgba(30, 60, 110, .18); --n2-p2: #4c12c4;
--n2-text: #15122b; --n2-sub: #4d4966; --n2-mut: #5f5b78; --n2-ico: #4a4566;
--n2-glow: rgba(98, 40, 220, .32); --n2-green: #17a34a;
--n2-r-bg: #fde4e7; --n2-r: #c0182c;
--n2-b-bg: #e0edff; --n2-b: #0a5fc4;
--n2-v-bg: #efe4ff; --n2-v: #7027d6;
--n2-g-bg: #daf5e3; --n2-g: #12773a;
}
.ui2 .foot, .ui2::before, .ui2::after { display: none; }
html:has(> body.ui2) { background: #05101c !important; }
html[data-theme="light"]:has(> body.ui2) { background: #f2f5fa !important; }
html:has(> body.ui2)::before, html:has(> body.ui2)::after { display: none !important; }
html body.ui2:not(#x) { background: radial-gradient(120% 50% at 50% 0, var(--n2-bg2), var(--n2-bg) 70%) fixed, var(--n2-bg) !important; }
html body.ui2 main a.n2-go:not(#x) { color: #fff !important; font-weight: 700; }
html body.ui2 main a.n2-back:not(#x) { color: var(--n2-pl) !important; }
html[data-theme="light"] body.ui2 main a.n2-back:not(#x) { color: var(--n2-p2) !important; }
.ui2 main.wrap { max-width: 640px; padding: 0 12px; }
.ui2 :focus-visible { outline: 2px solid var(--n2-pl); outline-offset: 2px; }
.n2-top { max-width: 640px; margin: 0 auto; padding: 16px 12px 0; padding-top: max(16px, env(safe-area-inset-top)); }
.n2-top-in {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
height: 64px; padding: 0 9px; border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)), var(--n2-box);
border: 1px solid var(--n2-line2);
}
.n2-acts { display: flex; gap: 10px; }
.n2-ib {
display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 14px;
background: var(--n2-box2); border: 1px solid var(--n2-line2); color: var(--n2-text); cursor: pointer;
transition: background .2s, transform .15s;
}
.n2-ib:hover { background: color-mix(in srgb, var(--n2-p1) 14%, var(--n2-box2)); text-decoration: none; }
.n2-ib:active { transform: scale(.94); }
.n2-ib[data-done] { color: var(--n2-green); border-color: var(--n2-green); }
.n2-logo { font: 800 26px/1 var(--font); color: var(--n2-text); white-space: nowrap; letter-spacing: 0; }
.n2-logo:hover { text-decoration: none; }
.n2-logo span { color: var(--n2-green); }
.n2 { padding-top: 12px; }
.n2-tabs {
display: grid; grid-template-columns: 1fr 1fr; height: 54px; border-radius: 20px; overflow: hidden;
background: var(--n2-box); border: 1px solid var(--n2-line);
}
.n2-tabs button {
position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
border: 0; border-radius: 19px; background: transparent; color: var(--n2-sub);
font: 700 18px/1 var(--font); cursor: pointer; transition: color .2s, background .2s;
}
.n2-tabs button svg { color: var(--n2-ico); }
.n2-tabs button.on {
color: #fff; background: linear-gradient(90deg, var(--n2-p1), var(--n2-p2));
box-shadow: 0 6px 22px var(--n2-glow), inset 0 1px 0 rgba(255,255,255,.16);
}
.n2-tabs button.on svg { color: #fff; }
.n2-tabs button.on::after {
content: ""; position: absolute; bottom: 0; left: 50%; width: 34px; height: 4px; margin-left: -17px;
border-radius: 4px 4px 0 0; background: var(--n2-pl);
}
.n2-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 14px; min-height: 40px; }
.n2-h { display: flex; align-items: center; gap: 10px; font: 800 20px/1.3 var(--font); color: var(--n2-text); }
.n2-h::before { content: ""; flex: none; width: 4px; height: 24px; border-radius: 4px; background: linear-gradient(180deg, var(--n2-pl), var(--n2-p1)); }
.n2-sel { position: relative; display: block; }
.n2-sel select {
appearance: none; -webkit-appearance: none; height: 40px; min-width: 128px; padding: 0 16px 0 44px;
border-radius: 20px; border: 1px solid var(--n2-line2); background: var(--n2-box);
color: var(--n2-sub); font: 400 15px/1 var(--font); cursor: pointer;
}
.n2-sel svg { position: absolute; left: 14px; top: 50%; margin-top: -10px; color: var(--n2-text); pointer-events: none; }
.n2-feed, .n2-cards { list-style: none; margin: 0; padding: 0; }
.n2-feed { border-top: 1px solid var(--n2-line); }
.n2-row, .n2-card { display: flex; align-items: center; gap: 14px; }
.n2-row { padding: 14px 0; border-bottom: 1px solid var(--n2-line); min-height: 100px; }
.n2-ic {
position: relative; flex: none; display: grid; place-items: center; width: 60px; height: 62px; border-radius: 14px;
background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,0)), var(--n2-box2); border: 1px solid var(--n2-line);
}
.n2-ic img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.28)); }
.n2-ping { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #ff4757; box-shadow: 0 0 0 3px var(--n2-box2); }
.n2-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.n2-tag {
display: inline-flex; align-items: center; gap: 6px; height: 21px; padding: 0 10px; border-radius: 11px;
font: 700 12.5px/1 var(--font);
}
.n2-tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.t-red { background: var(--n2-r-bg); color: var(--n2-r); }
.t-blue { background: var(--n2-b-bg); color: var(--n2-b); }
.t-violet { background: var(--n2-v-bg); color: var(--n2-v); }
.t-green { background: var(--n2-g-bg); color: var(--n2-g); }
.n2-tx h3 { margin: 0; font: 800 16px/1.45 var(--font); color: var(--n2-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.n2-tx p { margin: 0; max-width: 100%; font: 400 13.5px/1.55 var(--font); color: var(--n2-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n2-time { display: inline-flex; align-items: center; gap: 6px; font: 400 13.5px/1.4 var(--font); color: var(--n2-mut); }
.n2-time svg { color: var(--n2-mut); }
.n2-go {
flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 38px; padding: 0 14px 0 12px; border-radius: 19px;
background: linear-gradient(90deg, var(--n2-p1), var(--n2-p2)); border: 1px solid color-mix(in srgb, var(--n2-pb) 75%, transparent);
color: #fff; font: 700 15px/1 var(--font); box-shadow: 0 4px 16px rgba(90, 25, 210, .3), inset 0 1px 0 rgba(255,255,255,.12);
transition: filter .2s, transform .15s;
}
.n2-go:hover { text-decoration: none; filter: brightness(1.12); }
.n2-go:active { transform: scale(.96); }
.n2-chips { display: flex; gap: 5px; margin: 18px -12px 0; padding: 4px 10px 8px; overflow-x: auto; scrollbar-width: none; }
.n2-chips::-webkit-scrollbar { display: none; }
.n2-chips button {
flex: none; display: inline-flex; align-items: center; gap: 3px; height: 38px; padding: 0 8px; margin: 0;
border-radius: 19px; border: 1px solid var(--n2-line2); background: var(--n2-box); letter-spacing: 0; min-height: 0;
color: var(--n2-text); font: 400 13px/1 var(--font); cursor: pointer; transition: background .2s, color .2s;
}
.n2-chips button svg { flex: none; width: 17px; height: 17px; color: var(--n2-ico); }
.n2-chips .n2-alert svg { width: 19px; height: 19px; }
.n2-chips button.on { min-width: 54px; justify-content: center; border-color: transparent; color: #fff; font-weight: 700;
background: linear-gradient(90deg, #7a2ff7, #5f17e6); box-shadow: 0 6px 18px var(--n2-glow); }
.n2-alert svg { color: #f43f5e !important; display: block; }
.n2-cards { display: flex; flex-direction: column; gap: 10px; }
.n2-card {
padding: 12px; border-radius: 16px; min-height: 88px;
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--n2-box); border: 1px solid var(--n2-line);
}
.n2-card .n2-ic { width: 48px; height: 48px; border-radius: 13px; }
.n2-card .n2-ic img { width: 36px; height: 36px; }
.n2-card .n2-tx { gap: 3px; }
.n2-card .n2-tag { height: 19px; font-size: 11.5px; padding: 0 8px; }
.n2-card h3 { font-size: 14.5px; line-height: 1.5; }
.n2-card p { font-size: 12.5px; }
.n2-card .n2-time { font-size: 12.5px; }
.n2-card .n2-go { height: 36px; padding: 0 12px 0 9px; gap: 4px; font-size: 13.5px; }
.n2-card .n2-go svg { width: 16px; height: 16px; }
.tone-red { --tc: 240, 40, 60; color: #ff4256; }
.tone-blue { --tc: 30, 130, 255; color: #2f8dff; }
.tone-amber { --tc: 255, 170, 30; color: #ffb21f; }
.tone-violet { --tc: 140, 70, 255; color: #a35cff; }
.tone-purple { --tc: 170, 60, 255; color: #b54cff; }
.tone-teal { --tc: 20, 190, 235; color: #22c8ef; }
.tone-slate { --tc: 140, 160, 200; color: #c3cbdb; }
.tone-rose { --tc: 245, 40, 90; color: #ff3d6e; }
.n2-ic[class*="tone-"] { background: linear-gradient(160deg, rgba(var(--tc), .2), rgba(var(--tc), .05)), var(--n2-box2); border-color: rgba(var(--tc), .38); }
:root[data-theme="light"] .n2-ic[class*="tone-"] { background: rgba(var(--tc), .1); border-color: rgba(var(--tc), .3); }
.n2-ai { width: 34px; height: 34px; overflow: visible; filter: drop-shadow(0 3px 6px rgba(var(--tc), .45)); }
.n2-one .n2-ai { width: 38px; height: 38px; }
.n2-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.n2 { position: relative; }
.n2-badge { position: absolute; right: 5px; bottom: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(180deg, #34d058, #16a34a); box-shadow: 0 0 0 2.5px var(--n2-box2), 0 3px 6px rgba(0,0,0,.3); }
.n2-badge svg { width: 14px; height: 14px; }
.n2-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 28px 0; padding: 28px 16px; text-align: center;
border: 1px dashed var(--n2-line2); border-radius: 16px; color: var(--n2-sub); font: 400 15px/1.7 var(--font); }
.n2-empty img { width: 56px; height: 56px; opacity: .9; }
.n2-empty[hidden], .n2-row[hidden], .n2-card[hidden], .n2-pane[hidden] { display: none !important; }
.n2-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--n2-pl); font: 700 15px/1 var(--font); }
.n2-back:hover { text-decoration: none; }
.n2-one { margin-top: 4px; padding: 20px 16px; border-radius: 18px; background: var(--n2-box); border: 1px solid var(--n2-line); }
.n2-one .n2-ic { width: 64px; height: 64px; }
.n2-one .n2-ic img { width: 46px; height: 46px; }
.n2-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.n2-one h1 { margin: 0; font: 800 22px/1.5 var(--font); color: var(--n2-text); }
.n2-meta { margin: 8px 0 0; color: var(--n2-mut); font: 400 14px/1.6 var(--font); }
.n2-body { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--n2-line); white-space: pre-line; overflow-wrap: anywhere; font: 400 16px/1.9 var(--font); color: var(--n2-text); }
.n2-nav {
position: fixed; z-index: 30; left: 8px; right: 8px; bottom: calc(10px + env(safe-area-inset-bottom));
max-width: 600px; margin: 0 auto; height: 76px; padding: 6px; border-radius: 28px;
display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
background: color-mix(in srgb, var(--n2-box) 92%, transparent); border: 1px solid var(--n2-line2);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"] .n2-nav { box-shadow: 0 10px 30px rgba(40,30,90,.12); }
.n2-nav a {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
border-radius: 22px; color: var(--n2-ico); font: 700 13.5px/1 var(--font); transition: background .2s, color .2s;
}
.n2-nav a:hover { text-decoration: none; color: var(--n2-text); }
.n2-nav a.on {
color: #fff; margin-top: -6px; margin-bottom: -2px;
background: linear-gradient(180deg, #7430f2, #5410cb);
box-shadow: 0 8px 26px var(--n2-glow), inset 0 1px 0 rgba(255,255,255,.2);
}
.n2-nav .dot { position: absolute; top: 9px; right: calc(50% - 18px); width: 9px; height: 9px; border-radius: 50%; background: #ff4757; }
.n2-nav .dot[hidden] { display: none; }
@media (max-width: 370px) {
.n2-top-in { padding: 0 7px; }
.n2-acts { gap: 6px; }
.n2-logo { font-size: 23px; }
.n2-row { gap: 10px; }
.n2-card { gap: 10px; padding: 10px; }
.n2-nav a { font-size: 12.5px; }
}
.n2 { padding-top: 8px; }
.n2-tabs { height: 46px; border-radius: 16px; }
.n2-tabs button { gap: 8px; border-radius: 15px; font-size: 16px; }
.n2-tabs button svg { width: 21px; height: 21px; }
.n2-tabs button.on::after { width: 28px; height: 3px; margin-left: -14px; }
.n2-chips { margin-top: 12px; padding-bottom: 4px; }
.n2-chips button { height: 34px; font-size: 12.5px; border-radius: 17px; }
.n2-chips button svg { width: 15px; height: 15px; }
.n2-chips .n2-alert svg { width: 17px; height: 17px; }
.n2-hd { margin: 14px 0 8px; min-height: 32px; }
.n2-h { font-size: 17px; gap: 8px; }
.n2-h::before { height: 20px; }
.n2-row { gap: 12px; padding: 10px 0; min-height: 0; }
.n2-ic { width: 50px; height: 50px; border-radius: 13px; }
.n2-ic img { width: 36px; height: 36px; }
.n2-ping { top: 4px; right: 4px; width: 8px; height: 8px; }
.n2-badge { right: 3px; bottom: 3px; width: 18px; height: 18px; }
.n2-badge svg { width: 11px; height: 11px; }
.n2-tx { gap: 2px; }
.n2-tag { height: 19px; padding: 0 8px; font-size: 11.5px; gap: 5px; }
.n2-tag i { width: 6px; height: 6px; }
.n2-tx h3 { font-size: 14.5px; line-height: 1.45; }
.n2-tx p { font-size: 12.5px; line-height: 1.5; }
.n2-time { font-size: 12px; gap: 5px; }
.n2-time svg { width: 14px; height: 14px; }
.n2-go { height: 34px; padding: 0 11px 0 8px; gap: 4px; font-size: 13.5px; border-radius: 17px; }
.n2-go svg { width: 16px; height: 16px; }
.n2-cards { gap: 8px; }
.n2-card { gap: 12px; padding: 10px; min-height: 0; border-radius: 14px; }
.n2-card .n2-ic { width: 44px; height: 44px; border-radius: 12px; }
.n2-card h3 { font-size: 14px; }
.n2-card p, .n2-card .n2-time { font-size: 12px; }
.n2-card .n2-go { height: 32px; font-size: 13px; padding: 0 10px 0 8px; }
.n2-card .n2-go svg { width: 15px; height: 15px; }
.n2-ai { width: 28px; height: 28px; }
.n2-one .n2-ic { width: 56px; height: 56px; }
.n2-one .n2-ai { width: 34px; height: 34px; }
.n2-one h1 { font-size: 19px; }
.n2-body { font-size: 15px; }
.ui2 { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.n2-nav { height: 64px; padding: 5px; border-radius: 24px; }
.n2-nav a { gap: 4px; border-radius: 19px; font-size: 12px; }
.n2-nav a svg { width: 21px; height: 21px; }
.n2-nav a.on { margin-top: -4px; margin-bottom: -1px; }
.n2-nav .dot { top: 7px; width: 8px; height: 8px; }
.n2-ic { perspective: 220px; }
.n2-ic > img, .n2-ic > .n2-ai { animation: n2-float 4.8s ease-in-out infinite; transform-origin: 50% 60%; will-change: transform; }
.n2-feed li:nth-child(3n+2) .n2-ic > img, .n2-cards li:nth-child(3n+2) .n2-ic > .n2-ai { animation-delay: -1.6s; }
.n2-feed li:nth-child(3n) .n2-ic > img, .n2-cards li:nth-child(3n) .n2-ic > .n2-ai { animation-delay: -3.2s; }
@keyframes n2-float {
0%, 100% { transform: translateY(0) rotateY(0) rotateX(0); }
25% { transform: translateY(-2px) rotateY(14deg) rotateX(4deg); }
50% { transform: translateY(-3px) rotateY(0) rotateX(6deg); }
75% { transform: translateY(-2px) rotateY(-14deg) rotateX(4deg); }
}
.n2-empty img { animation: none; }
@media (max-width: 370px) {
.n2-row, .n2-card { gap: 9px; }
.n2-go span { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
.ui2 *, .ui2 *::before, .ui2 *::after { transition: none !important; }
.n2-ic > img, .n2-ic > .n2-ai { animation: none; }
}
.n2 { --font: 'Tajawal', 'Almarai', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.n2 .n2-h { font-weight: 800; font-size: 24px; line-height: 1.2; }
.n2 .n2-tx h3 { font-weight: 700; font-size: 15.5px; line-height: 1.4; }
.n2 .n2-tx p { font-weight: 400; font-size: 13.5px; }
.n2 .n2-time { font-weight: 500; font-size: 12.5px; }
.n2 .n2-chips button { font-weight: 500; }
.n2 .n2-chips button.on { font-weight: 700; }
.n2 .n2-tag { font-weight: 700; }
.n2 a.n2-go { font-size: 14px; }
.n2 .n2-tabs button { font-weight: 700; }
@media (max-width: 430px) {
.n2 .n2-chips { gap: 4px; }
.n2 .n2-chips button { padding: 0 7px; gap: 3px; }
.n2 .n2-chips button.on { min-width: 46px; }
.n2 .n2-chips button svg { width: 14px; height: 14px; }
.n2 .n2-chips .n2-alert svg { width: 16px; height: 16px; }
}
@media (max-width: 379px) {
.n2 .n2-chips { gap: 3px; margin-inline: -10px; padding-inline: 8px; }
.n2 .n2-chips button { padding: 0 6px; gap: 2px; font-size: 12px; }
.n2 .n2-chips button.on { min-width: 40px; }
}
.n2-one .n2-subj { display: inline-flex; margin-top: 18px; height: 44px; padding: 0 16px 0 12px; gap: 6px; max-width: 100%; }
.n2-one .n2-subj span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k2 { --font: 'Tajawal', 'Almarai', system-ui, sans-serif; position: relative; padding-top: 10px; font-family: var(--font);
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
--k-box: #0a1526; --k-line: rgba(88, 120, 175, .26); --k-mut: #a3adc2; --k-tx: #f4f6fb; }
:root[data-theme="light"] .k2 { --k-box: #ffffff; --k-line: rgba(30, 60, 110, .14); --k-mut: #5f5b78; --k-tx: #15122b; }
.k2 > *:not(.k-deco):not(.k-sprite):not(dialog) { position: relative; z-index: 1; }
.k-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.k2 [hidden] { display: none !important; }
.k2 .t-r { --c1: #ffa04a; --c2: #f2700f; --c3: #b84d05; --ct: #ffbe85; }
.k2 .t-b { --c1: #a663ff; --c2: #7a2cf0; --c3: #4e14b8; --ct: #c9a2ff; }
.k2 .t-g { --c1: #4ef08a; --c2: #18bf58; --c3: #0b8a3e; --ct: #7ff0a8; }
.k2 .t-v { --c1: #a663ff; --c2: #7a2cf0; --c3: #4e14b8; --ct: #c9a2ff; }
.k2 .t-c { --c1: #4ef08a; --c2: #18bf58; --c3: #0b8a3e; --ct: #7ff0a8; }
.k2 .t-o { --c1: #ffa04a; --c2: #f2700f; --c3: #b84d05; --ct: #ffbe85; }
.k2 .t-p { --c1: #a663ff; --c2: #7a2cf0; --c3: #4e14b8; --ct: #c9a2ff; }
.k2 .t-y { --c1: #ffa04a; --c2: #f2700f; --c3: #b84d05; --ct: #ffbe85; }
:root[data-theme="light"] .k2 [class*="t-"] { --ct: var(--c3); }
.k-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.k-deco svg { position: absolute; fill: none; stroke: #6b8fd0; stroke-width: 5; opacity: .07; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="light"] .k-deco svg { stroke: #6a5bd8; }
.k-deco .dz1 { width: 74px; height: 66px; top: 120px; left: -18px; transform: rotate(-16deg); }
.k-deco .dz2 { width: 60px; height: 54px; top: 64px; left: 44%; transform: rotate(18deg); }
.k-deco .dz3 { width: 70px; height: 70px; top: 92px; right: -16px; }
.k-deco .dz4 { width: 64px; height: 58px; top: 46%; right: -14px; transform: rotate(14deg); }
.k-deco .dz5 { width: 56px; height: 50px; top: 58%; left: -14px; transform: rotate(-12deg); }
.k-deco .dz6 { width: 60px; height: 60px; top: 76%; left: 8%; }
.k-deco .dz7 { width: 66px; height: 60px; bottom: 120px; right: -10px; transform: rotate(-20deg); }
.k-hero { display: flex; align-items: center; gap: 12px; min-height: 84px; padding: 8px 12px 8px 14px; margin-bottom: 10px; overflow: hidden;
border-radius: 18px; border: 1px solid rgba(56, 214, 186, .42);
background: radial-gradient(90% 140% at 100% 50%, rgba(46, 200, 170, .16), transparent 60%), linear-gradient(90deg, #0b2230, #0a1d2c 55%, #0c2633);
box-shadow: 0 0 22px rgba(40, 210, 180, .16), inset 0 1px 0 rgba(255, 255, 255, .06); }
:root[data-theme="light"] .k-hero { border-color: rgba(16, 160, 140, .4);
background: radial-gradient(90% 140% at 100% 50%, rgba(46, 200, 170, .14), transparent 60%), linear-gradient(90deg, #f3fbfa, #ffffff 60%, #eef9f7);
box-shadow: 0 8px 24px rgba(20, 120, 110, .1); }
.k-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(60, 200, 190, .05); stroke: rgba(70, 210, 195, .28); stroke-width: 2.6;
stroke-linecap: round; stroke-linejoin: round; filter: blur(.4px); pointer-events: none; }
:root[data-theme="light"] .k-hero-bg { stroke: rgba(16, 150, 135, .2); }
.k-art { position: relative; flex: 0 0 66px; width: 66px; height: 62px; }
.k-art svg { width: 100%; height: 100%; overflow: visible; }
.k-hero-tx { position: relative; flex: 1; min-width: 0; }
.k-hero h1 { margin: 0; line-height: 1; }
.k-h1 { position: relative; display: inline-block; font: 800 28px/1.1 var(--font); color: var(--k-tx); letter-spacing: 0; }
.k-h1.k-l { font-size: 24px; }
.k-h1.k-xl { font-size: 20px; line-height: 1.25; }
.k-sw { position: absolute; left: -2px; bottom: -7px; width: 52%; max-width: 70px; height: 12px; fill: none; stroke: #4be27a; stroke-width: 4.2; stroke-linecap: round; }
.k-sub { margin: 5px 0 0; font: 500 14.5px/1.25 var(--font); color: #e6ebf4; }
.k-desc { margin: 2px 0 0; font: 500 12px/1.45 var(--font); color: #cad2e1; }
:root[data-theme="light"] .k-sub { color: #2b2840; }
:root[data-theme="light"] .k-desc { color: #4d4966; }
:root[data-theme="light"] .k-sw { stroke: #17a34a; }
.k-crumbs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 10px; padding: 2px; scrollbar-width: none; }
.k-crumbs::-webkit-scrollbar { display: none; }
html body.ui2 main .k-crumbs a:not(#x) { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 11px;
background: var(--k-box); border: 1px solid var(--k-line); color: var(--k-mut) !important; font: 700 12.5px/1 var(--font); text-decoration: none; }
html body.ui2 main .k-crumbs a.on:not(#x) { color: #fff !important; background: linear-gradient(180deg, #3d1794, #26105f); border-color: #8f5cff; }
html body.ui2 main .k-crumbs a.k-back:not(#x) { color: #071a0d !important; border-color: transparent; background: linear-gradient(90deg, #8ef47c, #3edc6a); }
.k-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; height: 44px; padding: 4px; margin-bottom: 10px; border-radius: 15px;
background: color-mix(in srgb, var(--k-box) 80%, transparent); border: 1px solid var(--k-line); }
.k-tabs > * { display: flex; align-items: center; justify-content: center; gap: 9px; height: 100%; padding: 0 10px; border-radius: 12px; cursor: pointer;
background: transparent; border: 1px solid var(--k-line); color: #c3cbe0; font: 500 15px/1 var(--font); text-decoration: none;
transition: background .2s, color .2s, box-shadow .2s, transform .15s; }
:root[data-theme="light"] .k-tabs > * { color: #4d4966; }
.k-tabs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.k-tabs > .on { color: #071a0d !important; font-weight: 800; border-color: transparent;
background: linear-gradient(90deg, #8ef47c, #57e86e 55%, #3edc6a);
box-shadow: 0 0 18px rgba(80, 230, 110, .35), inset 0 1px 0 rgba(255, 255, 255, .45); }
.k-tabs > *:active { transform: scale(.97); }
.k-list { display: flex; flex-direction: column; gap: 10px; }
.k-label { margin: 16px 2px 8px; font: 800 16.5px/1.3 var(--font); color: var(--k-tx); }
html body.ui2 main a.k-row:not(#x), .k-row { position: relative; display: flex; align-items: stretch; gap: 10px; min-height: 60px; padding: 6px; border-radius: 15px; overflow: hidden;
color: var(--k-tx) !important; text-decoration: none;
border: 1.5px solid color-mix(in srgb, var(--c1) 70%, transparent);
background: linear-gradient(270deg, color-mix(in srgb, var(--c2) 26%, #0b1322), color-mix(in srgb, var(--c2) 11%, #0b1322));
box-shadow: 0 0 16px color-mix(in srgb, var(--c2) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06);
animation: k-in .3s ease both; animation-delay: calc(var(--i, 0) * 40ms); transition: transform .15s; }
html body.ui2 main a.k-row:active { transform: scale(.985); }
:root[data-theme="light"] .k-row { border-color: color-mix(in srgb, var(--c2) 45%, transparent) !important;
background: linear-gradient(270deg, color-mix(in srgb, var(--c2) 11%, #fff), #fff) !important;
box-shadow: 0 6px 18px color-mix(in srgb, var(--c2) 14%, transparent) !important; }
@keyframes k-in { from { opacity: 0; transform: translateY(6px); } }
.k-box { flex: 0 0 42px; align-self: center; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 2px; border-radius: 11px; color: #fff; text-align: center;
background: linear-gradient(180deg, var(--c1), var(--c2) 55%, var(--c3));
border: 1px solid color-mix(in srgb, var(--c1) 60%, #fff);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px color-mix(in srgb, var(--c2) 45%, transparent); }
.t-g .k-box, .t-c .k-box { color: #04220f; }
.k-box small { font: 600 9px/1.1 var(--font); opacity: .92; }
.k-box b { font: 800 17px/1 var(--font); }
.k-box .i3d { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.k-box.k-ext b { font-size: 10.5px; letter-spacing: .5px; direction: ltr; }
.k-body { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 4px 0; }
.k-t { margin: 0; font: 800 15.5px/1.3 var(--font); color: var(--k-tx); overflow-wrap: anywhere; }
.k-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.k-pills span { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 11px; white-space: nowrap;
font: 700 11px/1 var(--font); color: var(--ct);
background: color-mix(in srgb, var(--c2) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c1) 34%, transparent); }
.k-pills svg { flex: none; width: 12px; height: 12px; }
.k-pills .k-dr { color: #e8ecf5; }
:root[data-theme="light"] .k-pills .k-dr { color: #2b2840; }
.k-pills .k-nw { color: #fff; background: linear-gradient(180deg, #ff3b63, #e3103d); border-color: transparent; }
.k-ill { position: absolute; left: 58px; top: 50%; width: 64px; height: 42px; margin-top: -21px; z-index: 0; pointer-events: none;
fill: color-mix(in srgb, var(--c2) 14%, transparent); stroke: var(--c1); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: .3; }
:root[data-theme="light"] .k-ill { opacity: .18; }
.k-go { position: relative; z-index: 1; flex: none; align-self: center; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px 0 0; border-radius: 14px;
background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); color: #e9edf5; font: 700 11.5px/1 var(--font); }
.k-go span { display: grid; place-items: center; width: 26px; height: 26px; flex: none; margin: -1px; border-radius: 50%;
background: color-mix(in srgb, var(--c2) 22%, #0b1322); border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent); color: #fff; }
:root[data-theme="light"] .k-go { background: #fff; border-color: rgba(30, 60, 110, .14); color: #2b2840; }
:root[data-theme="light"] .k-go span { background: color-mix(in srgb, var(--c2) 12%, #fff); color: var(--c3); }
.k-empty { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0; padding: 26px 16px; border-radius: 16px;
border: 1px dashed var(--k-line); color: var(--k-mut); font: 500 15px/1.6 var(--font); }
html:has(.k2), html:has(.k2) body { --pc: #ea580c !important; --pcd: #c2410c !important; }
.ui2 .n2-nav a.on { background: linear-gradient(180deg, #ff8c1f, #f25a06) !important; box-shadow: 0 8px 26px rgba(255, 110, 20, .45), inset 0 1px 0 rgba(255, 255, 255, .28) !important; }
@media (max-width: 380px) {
.k-hero { gap: 10px; padding-inline: 10px 12px; }
.k-art { flex-basis: 58px; width: 58px; height: 56px; }
.k-h1 { font-size: 25px; }
.k-h1.k-l { font-size: 22px; }
.k-h1.k-xl { font-size: 18.5px; }
.k-sub { font-size: 13.5px; }
.k-desc { font-size: 11.5px; }
.k-row { gap: 8px; }
.k-box { flex-basis: 40px; }
.k-t { font-size: 14.5px; }
.k-pills { gap: 4px; }
.k-pills span { padding: 0 6px; font-size: 10.5px; }
.k-go { padding-right: 8px; font-size: 11px; }
.k-go span { width: 24px; height: 24px; }
.k-ill { left: 50px; }
}
@media (prefers-reduced-motion: reduce) { .k-row { animation: none; } }
html.tg1 { --t-acc: #2EA6FF; --t-acc-tx: #fff; --t-bg: #0E1621; --t-card: #17212B; --t-tx: #F5F5F5; --t-hint: #8696A6; --t-sep: rgba(255,255,255,.07); --t-press: rgba(255,255,255,.05); --t-bar: rgba(23,33,43,.92); }
html.tg1[data-theme="light"] { --t-acc: #3390EC; --t-bg: #EFEFF4; --t-card: #fff; --t-tx: #000; --t-hint: #707579; --t-sep: rgba(60,60,67,.16); --t-press: rgba(0,0,0,.05); --t-bar: rgba(255,255,255,.88); }
html.tg2 { --t-acc: #9D7BFF; --t-acc-tx: #120A26; --t-bg: #100E14; --t-card: #1C1A22; --t-tx: #F2F0F7; --t-hint: #9A95A8; --t-sep: rgba(255,255,255,.07); --t-press: rgba(157,123,255,.08); --t-bar: rgba(28,26,34,.92); }
html.tg2[data-theme="light"] { --t-acc: #7C4DFF; --t-acc-tx: #fff; --t-bg: #F2F1F7; --t-card: #fff; --t-tx: #14121A; --t-hint: #6E6A7C; --t-sep: rgba(40,30,80,.1); --t-press: rgba(124,77,255,.06); --t-bar: rgba(255,255,255,.9); }
html.tg3 { --t-acc: #9C8CFF; --t-acc-tx: #fff; --t-bg: #000; --t-card: #1C1C1E; --t-tx: #fff; --t-hint: #8D8D93; --t-sep: #2C2C2E; --t-press: rgba(255,255,255,.06); --t-bar: rgba(22,22,24,.88); --t-grad: linear-gradient(135deg, #7B61FF, #4B7BFF 60%, #2AABEE); }
html.tg3[data-theme="light"] { --t-acc: #7B61FF; --t-bg: #F2F2F7; --t-card: #fff; --t-tx: #000; --t-hint: #6D6D72; --t-sep: rgba(60,60,67,.16); --t-press: rgba(0,0,0,.05); --t-bar: rgba(249,249,249,.88); }
html.tg { --t-red: #FF3B30; --t-green: #34C759; --t-orange: #FF9500; --t-f: 'Tajawal', 'Almarai', system-ui, sans-serif; }
html.tg[data-theme="light"] { --t-red: #E5372B; }
html.tg .t-b { --ic: #007AFF; } html.tg .t-v { --ic: #AF52DE; } html.tg .t-p { --ic: #5856D6; } html.tg .t-g { --ic: #34C759; }
html.tg .t-c { --ic: #30B0C7; } html.tg .t-o { --ic: #FF9500; } html.tg .t-r { --ic: #FF3B30; } html.tg .t-y { --ic: #FF9F0A; }
html.tg [data-kind="lecture"], html.tg [data-kind="section"] { --ic: #5856D6; }
html.tg [data-kind="summary"] { --ic: #34C759; }
html.tg [data-kind="exam"] { --ic: #FF9500; }
html.tg [data-kind="other"] { --ic: #8E8E93; }
html.tg, html.tg body { background: var(--t-bg) !important; color: var(--t-tx); }
html.tg body::before, html.tg body::after { display: none !important; }
html.tg .k2, html.tg .sc2 { --font: var(--t-f); --k-tx: var(--t-tx); --k-mut: var(--t-hint); --k-box: var(--t-card); --k-line: var(--t-sep); padding-top: 4px; font-family: var(--t-f); }
html.tg main.wrap { padding-bottom: 96px; }
html.tg .k-deco, html.tg .k-hero-bg, html.tg .k-ill, html.tg .k-sw, html.tg .sc-deco, html.tg .sc-hero-bg, html.tg .sc-ill, html.tg .sc-sw, html.tg .kh-no { display: none !important; }
html.tg footer.foot { color: var(--t-hint); }
html.tg body header.top { background: var(--t-bar) !important; -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
border-bottom: .5px solid var(--t-sep) !important; box-shadow: none !important; }
html.tg header.top .wrap { height: 56px; }
html.tg header.top .logo { color: var(--t-tx) !important; font-family: var(--t-f) !important; font-weight: 800 !important; font-size: 22px !important; text-shadow: none !important; }
html.tg header.top .logo .cursor { display: none !important; }
html.tg header.top .logo .pro { background: var(--t-acc) !important; color: var(--t-acc-tx) !important; box-shadow: none !important; border: 0 !important;
font: 700 12px/1 var(--t-f) !important; padding: 5px 7px 4px !important; border-radius: 7px !important; transform: none !important; }
html.tg3 header.top .logo .pro { background: var(--t-grad) !important; color: #fff !important; }
html.tg header.top .icon-btn, html.tg header.top .btn { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--t-acc) !important; border-radius: 50% !important; }
html.tg header.top .icon-btn:active { background: var(--t-press) !important; }
html.tg header.top .btn-primary { background: var(--t-acc) !important; color: var(--t-acc-tx) !important; border-radius: 10px !important; }
html.tg .n2-nav, html.tg .bottomnav { left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none !important; width: auto !important; margin: 0 !important; transform: none !important;
height: calc(62px + env(safe-area-inset-bottom)) !important; padding: 0 4px env(safe-area-inset-bottom) !important; gap: 0 !important; border-radius: 0 !important;
background: var(--t-bar) !important; border: 0 !important; border-top: .5px solid var(--t-sep) !important; box-shadow: none !important;
-webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
html.tg .n2-nav a, html.tg .bottomnav a { margin: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
color: var(--t-hint) !important; font: 500 11.5px/1 var(--t-f) !important; gap: 4px !important; transform: none !important; }
html.tg .n2-nav a svg { width: 25px !important; height: 25px !important; }
html.tg .n2-nav a.on, html.tg .bottomnav a.on { color: var(--t-acc) !important; font-weight: 700 !important; }
html.tg .n2-nav .dot { top: 8px !important; background: var(--t-red) !important; }
html.tg .k-hero, html.tg .sc-hero { flex-direction: column; justify-content: center; text-align: center; gap: 10px; min-height: 0; padding: 10px 8px 6px !important; margin: 0 0 6px;
background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0; overflow: visible; }
html.tg .k-art, html.tg .sc-art { flex: none !important; width: 76px !important; height: 72px !important; }
html.tg .k-hero-tx, html.tg .sc-hero-tx { flex: none; width: 100%; }
html.tg .k-h1, html.tg .sc-h1 { font: 800 24px/1.25 var(--t-f) !important; color: var(--t-tx) !important; }
html.tg .k-sub, html.tg .sc-sub { margin-top: 4px !important; font: 400 15px/1.4 var(--t-f) !important; color: var(--t-hint) !important; }
html.tg .k-desc, html.tg .sc-desc { font: 400 13px/1.4 var(--t-f) !important; color: var(--t-hint) !important; }
html.tg .kh > .k-hero { flex-direction: row; text-align: start; justify-content: flex-start; gap: 14px; padding: 14px 4px 4px !important; }
html.tg .kh > .k-hero .k-art { width: 58px !important; height: 56px !important; }
html.tg3 .kh > .k-hero { padding: 16px !important; margin: 6px 0 4px; border-radius: 20px; background: var(--t-grad) !important; }
html.tg3 .kh > .k-hero .k-h1, html.tg3 .kh > .k-hero .k-sub, html.tg3 .kh > .k-hero .k-desc { color: #fff !important; }
html.tg3 .kh > .k-hero .k-sub { opacity: .85; }
html.tg .k-crumbs { gap: 2px; margin: 0 0 4px; align-items: center; -webkit-mask-image: linear-gradient(to left, transparent, #000 18px); mask-image: linear-gradient(to left, transparent, #000 18px); padding-left: 18px; }
html.tg body.ui2 main .k-crumbs a:not(#x) { height: 40px; padding: 0 4px; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0;
color: var(--t-hint) !important; font: 400 13px/1 var(--t-f) !important; }
html.tg body.ui2 main .k-crumbs a:not(#x):not(.k-back)::before { content: "›"; margin-inline-end: 6px; opacity: .6; }
html.tg body.ui2 main .k-crumbs a.k-back:not(#x)::before { content: none; }
html.tg body.ui2 main .k-crumbs a.k-back + a:not(#x)::before { content: none; }
html.tg body.ui2 main .k-crumbs a.on:not(#x) { color: var(--t-tx) !important; font-weight: 700 !important; }
html.tg body.ui2 main .k-crumbs a.k-back:not(#x) { color: var(--t-acc) !important; font: 500 15px/1 var(--t-f) !important; padding-inline-end: 10px; }
html.tg .k-tabs, html.tg .ks-tabs, html.tg .kn-tabs, html.tg .sc-kind { height: 40px !important; padding: 3px !important; gap: 2px !important; border-radius: 12px !important;
background: color-mix(in srgb, var(--t-tx) 7%, transparent) !important; border: 0 !important; box-shadow: none !important; }
html.tg .k-tabs > *, html.tg .ks-tabs > *, html.tg .kn-tabs > *, html.tg .sc-kind > * { height: 100% !important; border: 0 !important; border-radius: 9px !important; background: none !important; box-shadow: none !important;
color: var(--t-tx) !important; font: 500 14px/1 var(--t-f) !important; gap: 6px !important; }
html.tg .k-tabs > .on, html.tg .ks-tabs > .on, html.tg .kn-tabs > .on, html.tg .sc-kind > .on,
html.tg .k-tabs > [aria-selected="true"], html.tg .ks-tabs > [aria-selected="true"], html.tg .sc-kind > [aria-selected="true"] {
background: var(--t-card) !important; color: var(--t-tx) !important; font-weight: 700 !important; box-shadow: 0 1px 3px rgba(0,0,0,.14) !important; }
html.tg[data-theme="dark"] .k-tabs > .on, html.tg[data-theme="dark"] .ks-tabs > .on, html.tg[data-theme="dark"] .kn-tabs > .on, html.tg[data-theme="dark"] .sc-kind > .on,
html.tg[data-theme="dark"] .k-tabs > [aria-selected="true"], html.tg[data-theme="dark"] .ks-tabs > [aria-selected="true"], html.tg[data-theme="dark"] .sc-kind > [aria-selected="true"] {
background: color-mix(in srgb, var(--t-tx) 16%, var(--t-card)) !important; }
html.tg .k-tabs svg, html.tg .ks-tabs svg, html.tg .sc-kind svg { width: 17px !important; height: 17px !important; }
html.tg .k-label { margin: 22px 16px 7px !important; font: 500 13px/1.2 var(--t-f) !important; color: var(--t-hint) !important; letter-spacing: .2px; }
html.tg .k-list { gap: 0 !important; background: var(--t-card); border-radius: 14px; overflow: hidden; }
html.tg[data-theme="light"] .k-list { box-shadow: 0 1px 2px rgba(0,0,0,.03); }
html.tg body.ui2 main .k-row:not(#x), html.tg .k-row { min-height: 56px; gap: 12px; padding: 8px 12px 8px 10px !important; border: 0 !important; border-radius: 0 !important;
background: var(--t-card) !important; box-shadow: none !important; color: var(--t-tx) !important; animation: none !important; overflow: visible; }
html.tg .k-list > .k-row + .k-row::before, html.tg .k-list > * + .k-row::before { content: ""; position: absolute; top: 0; left: 0; right: 56px; border-top: .5px solid var(--t-sep); }
html.tg body.ui2 main a.k-row:active, html.tg .k-row:active { background: color-mix(in srgb, var(--t-tx) 6%, var(--t-card)) !important; transform: none !important; }
html.tg :not(.k-list) > .k-row:not(.kh-tile) { border-radius: 14px !important; }
html.tg .k-body { gap: 3px !important; padding: 2px 0 !important; }
html.tg .k-t { font: 500 16px/1.35 var(--t-f) !important; color: var(--t-tx) !important; }
html.tg .k-pills { gap: 6px !important; }
html.tg .k-pills span { height: auto !important; padding: 0 !important; background: none !important; border: 0 !important; color: var(--t-hint) !important; font: 400 13px/1.3 var(--t-f) !important; }
html.tg .k-pills span + span::before { content: "·"; margin-inline-end: 6px; }
html.tg .k-pills svg { display: none; }
html.tg .k-pills .k-nw, html.tg .k-pills .kn-new, html.tg .k-pills [class*="red"], html.tg .k-pills [class*="soon"] {
padding: 3px 7px !important; border-radius: 6px !important; color: var(--t-red) !important; background: color-mix(in srgb, var(--t-red) 13%, transparent) !important; font-weight: 700 !important; }
html.tg .kh-d, html.tg .kn-desc { color: var(--t-hint) !important; font: 400 13px/1.3 var(--t-f) !important; }
html.tg .k-box { flex: 0 0 32px !important; width: 32px; height: 32px !important; min-height: 0 !important; padding: 0 !important; gap: 0 !important; border-radius: 9px !important; align-self: center !important;
background: var(--ic, #8E8E93) !important; border: 0 !important; box-shadow: none !important; color: #fff !important; }
html.tg .k-box small { display: none !important; }
html.tg .k-box b { font: 800 15px/1 var(--t-f) !important; color: inherit !important; }
html.tg .k-box .i3d, html.tg .k-box img { width: 20px !important; height: 20px !important; filter: brightness(0) invert(1) !important; }
html.tg .k-box.k-ext b { font-size: 9.5px !important; }
html.tg2 .k-box { flex-basis: 36px !important; width: 36px; height: 36px !important; border-radius: 11px !important; background: color-mix(in srgb, var(--ic, #8E8E93) 14%, var(--t-card)) !important; color: var(--ic, var(--t-tx)) !important; }
html.tg2 .k-box .i3d, html.tg2 .k-box img { width: 26px !important; height: 26px !important; filter: none !important; }
html.tg3 .k-box { background: linear-gradient(145deg, color-mix(in srgb, var(--ic, #8E8E93) 65%, #fff), var(--ic, #8E8E93)) !important; }
html.tg .k-go { font-size: 0 !important; gap: 0 !important; padding: 0 !important; height: auto !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html.tg .k-go span { width: auto !important; height: auto !important; margin: 0 !important; background: none !important; border: 0 !important; color: var(--t-hint) !important; opacity: .6; }
html.tg .k-go svg { width: 18px; height: 18px; }
html.tg .ks-f .ks-a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
html.tg .ks-f { cursor: pointer; }
html.tg .kh-cta { margin: 10px 0 0 !important; }
html.tg .kh-stats { display: none !important; }
html.tg .kh-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
html.tg .kh-grid .kh-wide { grid-column: auto !important; }
html.tg body.ui2 main .kh-grid a.kh-tile:not(#x), html.tg .kh-grid .kh-tile { flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; padding: 12px 2px 10px !important;
border-radius: 14px !important; text-align: center; }
html.tg .kh-grid .kh-tile:first-child { grid-column: 1 / -1 !important; flex-direction: row; justify-content: flex-start; text-align: start; padding: 10px 12px !important; }
html.tg .kh-grid .kh-tile .k-box { flex-basis: 44px !important; width: 44px; height: 44px !important; border-radius: 13px !important; }
html.tg .kh-grid .kh-tile .k-box img { width: 26px !important; height: 26px !important; }
html.tg2 .kh-grid .kh-tile .k-box img { width: 32px !important; height: 32px !important; }
html.tg .kh-grid .kh-tile .k-t { font: 700 13px/1.2 var(--t-f) !important; }
html.tg .kh-grid .kh-tile:first-child .k-t { font: 500 16px/1.3 var(--t-f) !important; }
html.tg .kh-grid .kh-tile:not(:first-child) .kh-d { display: none !important; }
html.tg .kh-head { display: flex; align-items: center; justify-content: space-between; }
html.tg .kh-head a { color: var(--t-acc) !important; background: none !important; border: 0 !important; font: 500 14px/1 var(--t-f) !important; margin: 22px 8px 7px; padding: 0 !important; height: auto !important; }
html.tg .kh-head .k-label { margin-inline: 16px 0 !important; }
html.tg .kh-bio { background: var(--t-card); border-radius: 14px; padding: 4px 14px; margin-top: 10px; }
html.tg .kh-bio > div { border: 0 !important; background: none !important; padding: 10px 0 !important; }
html.tg .kh-bio > div + div { border-top: .5px solid var(--t-sep) !important; }
html.tg .kh-bio dt { color: var(--t-hint) !important; font: 500 13px/1.3 var(--t-f) !important; }
html.tg .kh-bio dd { color: var(--t-tx) !important; font: 400 15px/1.5 var(--t-f) !important; }
html.tg .kh-me .k-box { flex-basis: 56px !important; width: 56px; height: 56px !important; border-radius: 50% !important; overflow: hidden; background: none !important; }
html.tg .kh-me .k-box img { width: 56px !important; height: 56px !important; filter: none !important; object-fit: cover; }
html.tg .kh-path { background: var(--t-card) !important; border-radius: 14px !important; border: 0 !important; box-shadow: none !important; }
html.tg .kh-path li { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--t-tx) !important; }
html.tg .kh-path li i { background: var(--ic) !important; color: #fff !important; box-shadow: none !important; border: 0 !important; }
html.tg .kh-path li small { color: var(--t-hint) !important; }
html.tg .kh-end { background: none !important; border: 0 !important; box-shadow: none !important; text-align: center; }
html.tg .kh-end h2 { color: var(--t-tx) !important; font: 800 20px/1.3 var(--t-f) !important; }
html.tg .kh-end p { color: var(--t-hint) !important; }
html.tg .kh-main, html.tg .kn-cta:not(.kn-red):not(.kn-ghost), html.tg .qx-next, html.tg .kf-btn, html.tg .ks-pb, html.tg .sc-sh-go, html.tg .kn-gbtn {
min-height: 50px; border-radius: 12px !important; border: 0 !important; background: var(--t-acc) !important; color: var(--t-acc-tx) !important; box-shadow: none !important; text-shadow: none !important;
font: 700 16px/1 var(--t-f) !important; transition: transform .15s, filter .15s; }
html.tg3 .kh-main, html.tg3 .kn-cta:not(.kn-red):not(.kn-ghost), html.tg3 .qx-next, html.tg3 .kf-btn, html.tg3 .ks-pb, html.tg3 .sc-sh-go { background: linear-gradient(90deg, #7B61FF, #2AABEE) !important; color: #fff !important; }
html.tg .kh-main:active, html.tg .kn-cta:active, html.tg .qx-next:active, html.tg .kf-btn:active { transform: scale(.98); filter: brightness(.95); }
html.tg .kh-ghost, html.tg .kn-ghost, html.tg .kf-ght, html.tg .qx-alt, html.tg .kn-btn, html.tg .kf-more {
border: 0 !important; box-shadow: none !important; background: color-mix(in srgb, var(--t-acc) 13%, transparent) !important; color: var(--t-acc) !important; font-family: var(--t-f) !important; }
html.tg .kn-red, html.tg .kn-btn-red { border: 0 !important; box-shadow: none !important; background: var(--t-card) !important; color: var(--t-red) !important; }
html.tg .kn-btn-red { background: color-mix(in srgb, var(--t-red) 12%, transparent) !important; }
html.tg .kn-panel, html.tg .kn-pane, html.tg .ks-pcard, html.tg .kn-note, html.tg .k-empty, html.tg .kn-login { background: var(--t-card) !important; border: 0 !important; border-radius: 14px !important; box-shadow: none !important; color: var(--t-tx) !important; }
html.tg .kn-panel h2, html.tg .kn-panel h3 { color: var(--t-hint) !important; font: 500 13px/1.2 var(--t-f) !important; }
html.tg .kn-hint, html.tg .kn-mail, html.tg .kn-ptxt span { color: var(--t-hint) !important; }
html.tg .kn-set { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding-block: 10px !important; }
html.tg .kn-set + .kn-set { border-top: .5px solid var(--t-sep) !important; }
html.tg .kn-set strong { color: var(--t-tx) !important; font: 500 16px/1.3 var(--t-f) !important; }
html.tg .kn-set small { color: var(--t-hint) !important; font: 400 13px/1.4 var(--t-f) !important; }
html.tg .kn-si { width: 32px !important; height: 32px !important; border-radius: 9px !important; background: var(--ic) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
html.tg2 .kn-si { background: color-mix(in srgb, var(--ic) 14%, var(--t-card)) !important; color: var(--ic) !important; }
html.tg .switch { background: color-mix(in srgb, var(--t-tx) 16%, transparent) !important; border: 0 !important; box-shadow: none !important; }
html.tg .switch[aria-checked="true"] { background: var(--t-green) !important; }
html.tg .switch i { background: #fff !important; box-shadow: 0 2px 6px rgba(0,0,0,.2) !important; }
html.tg .kn-tile { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; color: var(--t-tx) !important; }
html.tg .kn-tile b { color: var(--ic) !important; }
html.tg .kn-tile span { color: var(--t-hint) !important; }
html.tg .kn-in, html.tg input[type="search"], html.tg .kf-sb input, html.tg select.kn-in { background: color-mix(in srgb, var(--t-tx) 7%, transparent) !important; border: 0 !important; box-shadow: none !important;
border-radius: 10px !important; color: var(--t-tx) !important; font-family: var(--t-f) !important; }
html.tg .kn-field { color: var(--t-hint) !important; }
html.tg .kn-chips > *, html.tg .kf-chips > *, html.tg .sc-years > *, html.tg .sc-days > * { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; color: var(--t-tx) !important; font-family: var(--t-f) !important; }
html.tg .kn-chips > .on, html.tg .kf-chips > .on, html.tg .sc-years > .on, html.tg .sc-days > .on, html.tg .sc-days > [aria-selected="true"], html.tg .kn-chips > [aria-pressed="true"] {
background: var(--t-acc) !important; color: var(--t-acc-tx) !important; }
html.tg3 .kn-chips > .on, html.tg3 .sc-years > .on, html.tg3 .sc-days > .on, html.tg3 .sc-days > [aria-selected="true"] { background: var(--t-grad) !important; color: #fff !important; }
html.tg .sc-days > * small, html.tg .sc-days > * span { color: inherit !important; opacity: .75; }
html.tg .kf-sb { background: none !important; border: 0 !important; box-shadow: none !important; }
html.tg .kf-hint { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; color: var(--t-hint) !important; }
html.tg .sc2 { --sc-tx: var(--t-tx); --sc-mut: var(--t-hint); --sc-box: var(--t-card); --sc-line: var(--t-sep); }
html.tg .sc-card { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; animation: none !important; }
html.tg .sc-time { background: color-mix(in srgb, var(--ic) 14%, var(--t-card)) !important; color: var(--ic) !important; border: 0 !important; box-shadow: none !important; }
html.tg .sc-time * { color: inherit !important; }
html.tg .sc-pills span { background: none !important; border: 0 !important; color: var(--t-hint) !important; padding: 0 !important; }
html.tg .sc-more { font-size: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; position: absolute !important; inset: 0; justify-content: flex-end; padding-left: 10px !important; color: var(--t-hint) !important; }
html.tg .sc-more span { background: none !important; border: 0 !important; color: var(--t-hint) !important; opacity: .6; }
html.tg .sc-body h3, html.tg .sc-body b, html.tg .sc-body .sc-t { color: var(--t-tx) !important; }
html.tg .sc-exams, html.tg .sc-ex { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; }
html.tg .sc-ex-d { background: color-mix(in srgb, var(--t-orange) 15%, var(--t-card)) !important; color: var(--t-orange) !important; border: 0 !important; box-shadow: none !important; }
html.tg .sc-sheet .sc-sh-in { background: var(--t-card) !important; color: var(--t-tx) !important; border: 0 !important; }
html.tg .sc-now { background: var(--t-red) !important; color: #fff !important; box-shadow: none !important; }
html.tg .qx-card { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 16px !important; }
html.tg .qx-q { color: var(--t-tx) !important; font: 700 17px/1.5 var(--t-f) !important; }
html.tg .qx-o button { background: color-mix(in srgb, var(--t-tx) 6%, var(--t-card)) !important; border: 0 !important; box-shadow: none !important; border-radius: 12px !important; color: var(--t-tx) !important; font-family: var(--t-f) !important; }
html.tg .qx-o button b { background: color-mix(in srgb, var(--t-acc) 15%, transparent) !important; color: var(--t-acc) !important; border: 0 !important; box-shadow: none !important; }
html.tg .qx-o button.ok { background: color-mix(in srgb, var(--t-green) 16%, var(--t-card)) !important; }
html.tg .qx-o button.ok b { background: var(--t-green) !important; color: #fff !important; }
html.tg .qx-o button.bad { background: color-mix(in srgb, var(--t-red) 14%, var(--t-card)) !important; }
html.tg .qx-o button.bad b { background: var(--t-red) !important; color: #fff !important; }
html.tg .qx-seg i { background: color-mix(in srgb, var(--t-tx) 14%, transparent) !important; box-shadow: none !important; }
html.tg .qx-seg i.cur { background: var(--t-acc) !important; }
html.tg .qx-seg i.d-ok { background: var(--t-green) !important; }
html.tg .qx-seg i.d-bad { background: var(--t-red) !important; }
html.tg .qx-tm, html.tg .qx-x { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; color: var(--t-tx) !important; }
html.tg .qx-meta { color: var(--t-hint) !important; }
html.tg .qx-e { background: color-mix(in srgb, var(--t-tx) 5%, transparent) !important; border: 0 !important; color: var(--t-tx) !important; }
html.tg .ks-prev, html.tg .ks-thumbs { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; }
html.tg .ks-acc, html.tg .ks-pbar, html.tg .ks-pbar2 { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; }
html.tg .ks-pbar a, html.tg .ks-pbar button, html.tg .ks-pbar2 a, html.tg .ks-pbar2 button { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--t-acc) !important; font-family: var(--t-f) !important; }
html.tg .kn-due-tx, html.tg .ks-due { color: var(--t-tx) !important; }
html.tg .ks-dot, html.tg .kn-c { background: var(--t-red) !important; }
@media (prefers-reduced-motion: reduce) { html.tg * { transition: none !important; } }
html.tg body .n2-nav a.on, html.tg body .bottomnav a.on { background: none !important; box-shadow: none !important; }
html.tg .ks-label i { display: none !important; }
html.tg .ks-label { display: flex; align-items: center; gap: 8px; }
html.tg .ks-label .ks-gn { background: none !important; padding: 0 !important; color: var(--t-hint) !important; font: 400 13px/1 var(--t-f) !important; }
html.tg .k-t .n3d, html.tg .k-h1 .n3d { display: inline !important; min-width: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important;
box-shadow: none !important; color: inherit !important; font: inherit !important; animation: none !important; text-shadow: none !important; }
html.tg body.ui2 main .kh-grid a.kh-tile.kh-wide:not(#x) { grid-column: 1 / -1 !important; flex-direction: row; justify-content: flex-start; text-align: start; padding: 10px 12px !important; }
html.tg body.ui2 main .kh-grid a.kh-tile:not(.kh-wide):not(#x) .k-go { display: none !important; }
html.tg .kh-grid .kh-tile.kh-wide .k-t { font: 500 16px/1.3 var(--t-f) !important; }
html.tg .kh-grid .kh-tile.kh-wide .kh-d { display: block !important; }
html.tg .kh-grid .kh-tile:first-child:not(.kh-wide) { grid-column: auto !important; flex-direction: column; }
html.tg .kh-cta { display: flex; gap: 8px; }
html.tg .kh-cta .kh-btn { flex: 1; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
html.tg .kh-cta .kh-ghost { flex: 0 0 auto; padding: 0 16px; border-radius: 12px !important; font: 700 15px/1 var(--t-f) !important; }
html.tg .qx-q { background: none !important; border: 0 !important; box-shadow: none !important; }
html.tg .kn-duebox { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; }
html.tg .kn-duebox .kn-bx { --ic: var(--t-orange); }
html.tg .kn-duebox.s-soon .kn-bx, html.tg .kn-duebox.s-today .kn-bx { --ic: var(--t-red); }
html.tg .kn-due-tx span { color: var(--t-hint) !important; }
html.tg .kn-duebox.s-soon .kn-due-tx span, html.tg .kn-duebox.s-today .kn-due-tx span { color: var(--t-red) !important; font-weight: 700; }
html.tg .kn-body, html.tg .kn-text { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; color: var(--t-tx) !important; }
html.tg .k2 .kf-sb .searchbox { height: 44px !important; border: 0 !important; box-shadow: none !important; border-radius: 12px !important; background: color-mix(in srgb, var(--t-tx) 8%, transparent) !important; }
html.tg .k2 .kf-sb .searchbox > svg { color: var(--t-hint) !important; width: 19px; height: 19px; }
html.tg .k2 .kf-sb .searchbox button, html.tg .k2 .kf-sb button[type="submit"] { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--t-acc) !important; font: 700 15px/1 var(--t-f) !important; }
html.tg .kf-gh .kf-n { background: var(--t-acc) !important; color: var(--t-acc-tx) !important; border: 0 !important; box-shadow: none !important; width: 28px; min-width: 28px !important; height: 28px !important; border-radius: 8px !important; font: 700 14px/1 var(--t-f) !important; }
html.tg .kf-gh .kf-ght b { font: 700 17px/1.3 var(--t-f) !important; }
html.tg body.ui2 main .kf-gh a.kf-more:not(#x) { height: 32px; border: 0 !important; box-shadow: none !important; background: none !important; color: var(--t-acc) !important; padding: 0 4px; font: 500 14px/1 var(--t-f) !important; }
html.tg .kf-rh { background: none !important; border: 0 !important; box-shadow: none !important; }
html.tg .kn-menu .k-box, html.tg .kn-stats .kn-tile b svg { color: inherit; }
html.tg .kn-tile b { font: 800 20px/1 var(--t-f) !important; }
html.tg .kn-pav, html.tg .kn-av { box-shadow: none !important; border: 0 !important; }
html.tg1 .k-box:has(img), html.tg3 .k-box:has(img) { background: color-mix(in srgb, var(--ic, #8E8E93) 16%, var(--t-card)) !important; }
html.tg1 .k-box img, html.tg3 .k-box img, html.tg1 .k-box .i3d, html.tg3 .k-box .i3d { filter: none !important; width: 24px !important; height: 24px !important; }
html.tg3 .k-box:has(img) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic, #8E8E93) 35%, transparent) !important; }
html.tg[data-theme] body header.top.top { background: var(--t-bar) !important; background-image: none !important; }
html.tg4 { --t-acc: #4be27a; --t-acc-tx: #071a0d; --t-bg: #05101c; --t-card: #0a1526; --t-tx: #f4f6fb; --t-hint: #a3adc2; --t-sep: rgba(88,120,175,.26); --t-press: rgba(255,255,255,.05); --t-bar: rgba(7,20,34,.92); --t-nav: #ff8c1f; }
html.tg4[data-theme="light"] { --t-acc: #17a34a; --t-acc-tx: #fff; --t-bg: #f2f5fa; --t-card: #fff; --t-tx: #15122b; --t-hint: #5f5b78; --t-sep: rgba(30,60,110,.14); --t-press: rgba(0,0,0,.05); --t-bar: rgba(255,255,255,.9); --t-nav: #f25a06; }
html.tg4 [class*="t-"], html.tg4 [data-kind] { --ic: var(--c2); }
html.tg4 .k-box { background: linear-gradient(180deg, var(--c1), var(--c2) 55%, var(--c3)) !important; color: #fff !important; }
html.tg4 .k-box:has(img) { background: linear-gradient(180deg, var(--c1), var(--c2) 55%, var(--c3)) !important; box-shadow: none !important; }
html.tg4 .t-g .k-box, html.tg4 .t-c .k-box { color: #04220f !important; }
html.tg4 .k-box img, html.tg4 .k-box .i3d { filter: none !important; width: 24px !important; height: 24px !important; }
html.tg4 .kh-grid .kh-tile .k-box img { width: 28px !important; height: 28px !important; }
html.tg4 .k-tabs > .on, html.tg4 .ks-tabs > .on, html.tg4 .kn-tabs > .on, html.tg4 .sc-kind > .on,
html.tg4 .k-tabs > [aria-selected="true"], html.tg4 .ks-tabs > [aria-selected="true"], html.tg4 .sc-kind > [aria-selected="true"],
html.tg4[data-theme="dark"] .k-tabs > .on, html.tg4[data-theme="dark"] .ks-tabs > .on, html.tg4[data-theme="dark"] .kn-tabs > .on, html.tg4[data-theme="dark"] .sc-kind > .on,
html.tg4[data-theme="dark"] .k-tabs > [aria-selected="true"], html.tg4[data-theme="dark"] .ks-tabs > [aria-selected="true"], html.tg4[data-theme="dark"] .sc-kind > [aria-selected="true"] {
background: linear-gradient(90deg, #8ef47c, #57e86e 55%, #3edc6a) !important; color: #071a0d !important; }
html.tg4 .kh-main, html.tg4 .kn-cta:not(.kn-red):not(.kn-ghost), html.tg4 .qx-next, html.tg4 .kf-btn, html.tg4 .ks-pb, html.tg4 .sc-sh-go, html.tg4 .kn-gbtn {
background: linear-gradient(90deg, #8ef47c, #57e86e 55%, #3edc6a) !important; color: #071a0d !important; }
html.tg4 .n2-nav a.on, html.tg4 .bottomnav a.on { color: var(--t-nav) !important; }
html.tg4 header.top .logo .pro { background: linear-gradient(180deg, #ff8c1f, #f25a06) !important; color: #fff !important; }
html.tg4 header.top .icon-btn { color: var(--t-tx) !important; }
html.tg4 .kn-chips > .on, html.tg4 .kf-chips > .on, html.tg4 .sc-days > .on, html.tg4 .sc-days > [aria-selected="true"] { background: linear-gradient(180deg, #3d1794, #26105f) !important; color: #fff !important; }
html.tg4 .sc-years > .on { background: linear-gradient(180deg, #3d1794, #26105f) !important; color: #fff !important; }
html.tg4 .kn-si { background: linear-gradient(180deg, var(--c1), var(--c2) 55%, var(--c3)) !important; color: #fff !important; }
html.tg4 .kf-gh .kf-n { background: linear-gradient(180deg, #a663ff, #7a2cf0 55%, #4e14b8) !important; color: #fff !important; }
html.tg4 .k-pills .k-nw { color: #fff !important; background: linear-gradient(180deg, #ff3b63, #e3103d) !important; }
html.tg .tgp { font-family: var(--t-f); color: var(--t-tx); padding-top: 4px; }
html.tg .tgp a { color: inherit; text-decoration: none; }
html.tg .tgp .hero { display: flex; align-items: center; gap: 14px; padding: 14px 4px 6px; }
html.tg .tgp .av { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; font: 800 24px/1 var(--t-f); color: #fff; background: linear-gradient(160deg, #6AB8FF, #2F7FE0); }
html.tg2 .tgp .av { background: linear-gradient(160deg, #B49CFF, #6A3DF0); }
html.tg3 .tgp .av { background: linear-gradient(135deg, #9C8CFF, #2AABEE); }
html.tg4 .tgp .av { background: linear-gradient(180deg, #a663ff, #7a2cf0 55%, #4e14b8); }
html.tg .tgp .av img { width: 100%; height: 100%; object-fit: cover; }
html.tg .tgp .av.big { width: 88px; height: 88px; font-size: 38px; }
html.tg .tgp .hero h1 { margin: 0; font: 800 24px/1.2 var(--t-f); color: var(--t-tx); }
html.tg .tgp .hero p, html.tg .tgp .phead p { margin: 2px 0 0; color: var(--t-hint); font: 400 15px/1.4 var(--t-f); }
html.tg3 .tgp .hero { margin: 6px 0 4px; padding: 18px 16px; border-radius: 20px; background: var(--t-grad); }
html.tg3 .tgp .hero h1 { color: #fff; } html.tg3 .tgp .hero p { color: rgba(255,255,255,.85); }
html.tg3 .tgp .hero .av { background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
html.tg .tgp .quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 4px; }
html.tg .tgp .qa { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 2px 10px; border-radius: 14px; background: var(--t-card); font: 700 13px/1 var(--t-f); color: var(--t-tx); transition: transform .15s; }
html.tg .tgp .qa:active { transform: scale(.96); }
html.tg .tgp .grp { margin-top: 22px; }
html.tg .tgp .gh { margin: 0; padding: 0 16px 7px; font: 500 13px/1.2 var(--t-f); color: var(--t-hint); letter-spacing: .2px; }
html.tg .tgp .gl { background: var(--t-card); border-radius: 14px; overflow: hidden; }
html.tg[data-theme="light"] .tgp .gl, html.tg[data-theme="light"] .tgp .qa { box-shadow: 0 1px 2px rgba(0,0,0,.04); }
html.tg .tgp .gf { margin: 0; padding: 7px 16px 0; font: 400 13px/1.45 var(--t-f); color: var(--t-hint); }
html.tg .tgp .row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 8px 14px 8px 10px; border: 0; border-radius: 0; background: none; color: var(--t-tx); font: inherit; text-align: start; cursor: pointer; }
html.tg .tgp .gl > .row + .row::before, html.tg .tgp .gl > * + form .row::before, html.tg .tgp .gl > form + .row::before { content: ""; position: absolute; top: 0; left: 0; right: 58px; border-top: .5px solid var(--t-sep); }
html.tg .tgp .gl > form { margin: 0; }
html.tg .tgp .row:active { background: var(--t-press); }
html.tg .tgp .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.tg .tgp .rt b { font: 500 16px/1.3 var(--t-f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t-tx); }
html.tg .tgp .rt small { font: 400 13px/1.3 var(--t-f); color: var(--t-hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.tg .tgp .acc { flex: none; color: var(--t-hint); font: 400 15px/1 var(--t-f); }
html.tg .tgp .chev { flex: none; display: grid; color: var(--t-hint); opacity: .55; }
html.tg .tgp .danger { justify-content: flex-start; }
html.tg .tgp .danger .rt b { color: var(--t-red); }
html.tg .tgp .ib { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #fff; background: var(--ic); }
html.tg .tgp .ib .d3 { display: none; }
html.tg .tgp .ib .g, html.tg .tgp .ib .d3 { place-items: center; }
html.tg .tgp .ib .g { display: grid; }
html.tg .tgp .ib img, html.tg .tgp .ib .i3d { width: 24px; height: 24px; object-fit: contain; filter: none !important; }
html.tg2 .tgp .ib, html.tg4 .tgp .ib { width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--ic) 14%, var(--t-card)); }
html.tg2 .tgp .ib .g, html.tg4 .tgp .ib .g { display: none; }
html.tg2 .tgp .ib .d3, html.tg4 .tgp .ib .d3 { display: grid; color: var(--ic); }
html.tg3 .tgp .ib { background: linear-gradient(145deg, color-mix(in srgb, var(--ic) 70%, #fff), var(--ic)); }
html.tg .tgp .qa .ib { width: 44px; height: 44px; border-radius: 13px; }
html.tg .tgp .qa .ib svg { width: 22px; height: 22px; }
html.tg2 .tgp .qa .ib img, html.tg4 .tgp .qa .ib img { width: 32px; height: 32px; }
html.tg .tgp .nb { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; font: 800 15px/1 var(--t-f); color: #fff; background: var(--ic); }
html.tg2 .tgp .nb, html.tg4 .tgp .nb { color: var(--ic); background: color-mix(in srgb, var(--ic) 14%, var(--t-card)); }
html.tg .tgp .tm { display: inline-block; padding: 5px 9px; border-radius: 9px; background: color-mix(in srgb, var(--t-acc) 13%, transparent); color: var(--t-acc); font: 700 13px/1 var(--t-f); }
html.tg .tgp .tag { font-style: normal; font: 700 12.5px/1 var(--t-f); padding: 3px 7px; border-radius: 6px; display: inline-block; }
html.tg .tgp .tag.red { color: var(--t-red); background: color-mix(in srgb, var(--t-red) 13%, transparent); }
html.tg .tgp .tag.warn { color: #C77700; background: rgba(255,149,0,.14); }
html.tg[data-theme="dark"] .tgp .tag.warn { color: #FFB340; }
html.tg .tgp .mainbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin: 26px 0 8px; border: 0; border-radius: 12px; background: var(--t-acc); color: var(--t-acc-tx) !important; font: 700 16px/1 var(--t-f); cursor: pointer; transition: transform .15s, filter .15s; }
html.tg .tgp .grp .mainbtn { margin-top: 12px; }
html.tg .tgp .mainbtn:active { transform: scale(.98); filter: brightness(.95); }
html.tg3 .tgp .mainbtn { background: linear-gradient(90deg, #7B61FF, #2AABEE); color: #fff !important; }
html.tg4 .tgp .mainbtn { background: linear-gradient(90deg, #8ef47c, #57e86e 55%, #3edc6a); color: #071a0d !important; }
html.tg .tgp .phead { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 4px; }
html.tg .tgp .phead h1 { margin: 12px 0 0; font: 800 24px/1.25 var(--t-f); color: var(--t-tx); }
html.tg .tgp .tg-av { position: relative; cursor: pointer; }
html.tg .tgp .tg-cam { position: absolute; bottom: 2px; left: 2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--t-acc); color: var(--t-acc-tx); box-shadow: 0 0 0 3px var(--t-bg); }
html.tg .tgp .pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; margin-top: 12px; border-radius: 18px; background: color-mix(in srgb, var(--t-acc) 13%, transparent); color: var(--t-acc) !important; font: 700 14px/1 var(--t-f); }
html.tg .tgp .tg-note { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--t-acc) 12%, var(--t-card)); color: var(--t-tx); font: 500 14px/1.5 var(--t-f); }
html.tg .tgp .tg-note.err { background: color-mix(in srgb, var(--t-red) 12%, var(--t-card)); color: var(--t-red); }
html.tg .tgp .tg-field { cursor: text; }
html.tg .tgp .tg-field input, html.tg .tgp .tg-field select { width: 100%; height: 30px; padding: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: none !important; color: var(--t-tx) !important; font: 500 16px/1.3 var(--t-f) !important; }
html.tg .tgp .tg-field select option { color: #000; }
html.tg .tgp .tg-link .rt b { color: var(--t-acc); }
html.tg .tgp .tg-empty { cursor: default; }
html.tg .tgp .tg-empty small { white-space: normal; }
html.tg .tgp .switch { flex: none; position: relative; width: 51px; height: 31px; padding: 0; border: 0; border-radius: 16px; cursor: pointer; }
html.tg .tgp .switch i { position: absolute; top: 2px; right: 2px; width: 27px; height: 27px; border-radius: 50%; transition: right .2s; }
html.tg .tgp .switch[aria-checked="true"] i, html.tg .tgp .switch.tg-theme[aria-pressed="true"] i { right: 22px; }
html.tg .tgp .switch.tg-theme[aria-pressed="true"] { background: var(--t-green) !important; }
html.tg .tgp .k-list { margin: 0; }
html.tg header.top .top-actions a[href="/account"], html.tg header.top .top-actions .bell { display: none !important; }
html.tg body.ui2 main .k-crumbs a.on:not(#x) { display: none !important; }
html.tg body.ui2 main .k-crumbs a.k-back:not(#x) { font-size: 0 !important; }
html.tg body.ui2 main .k-crumbs a.k-back:not(#x)::after { content: "‹ رجوع"; font: 500 15px/1 var(--t-f); }
html.tg .k-crumbs { -webkit-mask-image: none; mask-image: none; padding-left: 0; }
html.tg .tgp .gl > .tg-inst { position: relative; }
html.tg .tgp .gl > .tg-inst::before { content: ""; position: absolute; top: 0; left: 0; right: 58px; border-top: .5px solid var(--t-sep); z-index: 1; }
html.tg .tgp .gl > .tg-inst[hidden] { display: none; }