/* === PREVENT TEXT SELECTION ON INTERACTIVE ELEMENTS === */
.btn,
button,
.attendance-btn,
.sleepover-btn,
.tracking-btn,
.form-check-label,
.form-switch,
.badge,
.nav-link,
.list-group-item[style*="cursor: pointer"],
.student-card,
.tree-card-header,
.report-mentor-item {
    user-select: none;
}

/* === GENDER BADGES === */
/* Male Badge/Label */
.badge-male {
  background-color: #0d6dfd3b;
  color: #ffffff; /* White text */
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.25rem;
  display: inline-block;
}

/* Female Badge/Label */
.badge-female {
  background-color: #0d6dfd3b;
  color: #ffffff; /* White text */
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.25rem;
  display: inline-block;
}
/* === GLOBAL BASE === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
  transition: background 0.5s, color 0.5s;
}

/* Smooth rounded cards globally — solid bg so starfield doesn't bleed through */
.card {
  border-radius: 12px !important;
  overflow: hidden;
  --bs-card-bg: rgba(13, 17, 23, 0.85);
  background: rgba(13, 17, 23, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
}
.card .card-header:first-child {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}
.card .card-footer:last-child {
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* Light mode – commented out, always dark mode now
body {
  background-color: #f8f9fa;
  color: #212529;
}
*/

/* Dark mode – always active.
   body must be transparent so the z-index:-1 fixed #starfield is visible.
   Override Bootstrap's --bs-body-bg which would otherwise paint over it. */
body {
  --bs-body-bg: transparent;
  background: transparent !important;
  color: #c9d1d9;
}

/* Dark glass overrides — keep starfield visible but prevent bleed-through on content */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .table > :not(caption) > * > * {
  --bs-table-bg: rgba(13, 17, 23, 0.75);
  --bs-table-striped-bg: rgba(13, 17, 23, 0.8);
}
[data-bs-theme="dark"] .modal-content {
  background: rgba(13, 17, 23, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .dropdown-menu {
  background: rgba(13, 17, 23, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .list-group-item {
  background: rgba(13, 17, 23, 0.75);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ======= STARFIELD BACKGROUND ======= */
#starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  z-index: -1;
}

#starfield.paused #stars,
#starfield.paused #stars::after,
#starfield.paused #stars2,
#starfield.paused #stars2::after,
#starfield.paused #stars3,
#starfield.paused #stars3::after {
  animation-play-state: paused;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    501px 811px #fff, 1450px 1324px #fff, 1093px 1780px #fff, 1469px 678px #fff,
    904px 741px #fff, 1160px 781px #fff, 1841px 1962px #fff, 1630px 1667px #fff,
    1788px 676px #fff, 367px 1734px #fff, 1343px 156px #fff, 1283px 1142px #fff,
    1062px 378px #fff, 1395px 467px #fff, 1017px 1891px #fff, 137px 1114px #fff,
    1767px 1403px #fff, 1543px 11px #fff, 1078px 181px #fff, 1189px 1574px #fff,
    1697px 1551px #fff, 439px 472px #fff, 1491px 677px #fff, 1364px 599px #fff,
    34px 382px #fff, 1221px 1584px #fff, 1266px 1499px #fff, 169px 1907px #fff,
    1219px 1125px #fff, 659px 18px #fff, 1731px 1959px #fff, 332px 1216px #fff,
    1913px 788px #fff, 80px 712px #fff, 326px 1605px #fff, 574px 1502px #fff,
    473px 1653px #fff, 404px 975px #fff, 322px 1797px #fff, 425px 1321px #fff,
    1121px 1797px #fff, 731px 647px #fff, 891px 1584px #fff, 1523px 109px #fff,
    1379px 244px #fff, 865px 1064px #fff, 493px 956px #fff, 624px 1380px #fff,
    440px 619px #fff, 1630px 767px #fff, 955px 1196px #fff, 62px 729px #fff,
    126px 946px #fff, 1256px 896px #fff, 1444px 256px #fff, 661px 1628px #fff,
    1078px 1716px #fff, 300px 737px #fff, 1734px 413px #fff, 1296px 129px #fff,
    1771px 1678px #fff, 977px 1764px #fff, 1879px 549px #fff, 665px 1531px #fff,
    89px 701px #fff, 1084px 1183px #fff, 1597px 1576px #fff, 1354px 1774px #fff,
    554px 1471px #fff, 1469px 287px #fff, 887px 106px #fff, 1962px 766px #fff,
    638px 805px #fff, 1651px 741px #fff, 1517px 1826px #fff, 24px 1152px #fff,
    507px 558px #fff, 1262px 652px #fff, 246px 1048px #fff, 1077px 421px #fff,
    1866px 1847px #fff, 1986px 1561px #fff, 704px 632px #fff, 1991px 1875px #fff,
    1227px 395px #fff, 45px 1116px #fff, 247px 786px #fff, 890px 607px #fff,
    787px 1235px #fff, 557px 524px #fff, 1582px 1285px #fff, 1725px 1366px #fff,
    952px 747px #fff, 251px 458px #fff, 1500px 1250px #fff, 1999px 1734px #fff,
    1336px 1955px #fff, 1705px 1464px #fff, 728px 697px #fff, 594px 510px #fff,
    1345px 1990px #fff, 1919px 1803px #fff, 1117px 966px #fff, 1629px 97px #fff,
    1046px 1196px #fff, 810px 1092px #fff, 722px 976px #fff, 406px 18px #fff,
    1665px 1860px #fff, 1758px 1628px #fff, 1183px 463px #fff, 564px 239px #fff,
    13px 1767px #fff, 1482px 1472px #fff, 1700px 347px #fff, 1362px 244px #fff,
    1141px 1708px #fff, 22px 885px #fff, 374px 1309px #fff, 1034px 1037px #fff,
    1725px 1086px #fff, 1343px 1921px #fff, 596px 903px #fff, 1061px 478px #fff,
    18px 1409px #fff, 729px 1364px #fff, 264px 911px #fff, 677px 1442px #fff,
    123px 33px #fff, 1303px 646px #fff, 1945px 792px #fff, 1305px 938px #fff,
    918px 1536px #fff, 620px 948px #fff, 183px 646px #fff, 695px 687px #fff,
    881px 272px #fff, 1521px 1212px #fff, 1423px 1022px #fff, 1545px 1271px #fff,
    1393px 348px #fff, 685px 1910px #fff, 1446px 856px #fff, 73px 1201px #fff,
    736px 999px #fff, 673px 796px #fff, 469px 850px #fff, 1912px 142px #fff,
    1278px 664px #fff, 184px 1990px #fff, 1173px 1312px #fff, 782px 1879px #fff,
    323px 1035px #fff, 611px 908px #fff, 565px 1449px #fff, 748px 1713px #fff,
    1047px 490px #fff, 1040px 1872px #fff, 1818px 1659px #fff, 1806px 1327px #fff,
    386px 575px #fff, 1550px 463px #fff, 148px 687px #fff, 651px 1683px #fff,
    1588px 1194px #fff, 1831px 2px #fff, 581px 876px #fff, 1396px 1743px #fff,
    1212px 1810px #fff, 421px 1920px #fff, 658px 1461px #fff, 1859px 1809px #fff,
    1456px 388px #fff, 186px 1627px #fff, 1528px 1145px #fff, 171px 97px #fff,
    674px 1072px #fff, 676px 1052px #fff, 1165px 1131px #fff, 1088px 781px #fff,
    1231px 948px #fff, 330px 257px #fff, 426px 1046px #fff, 549px 652px #fff,
    1338px 74px #fff, 1749px 364px #fff, 931px 369px #fff, 383px 1428px #fff,
    1558px 389px #fff, 927px 133px #fff, 234px 1888px #fff, 1785px 1617px #fff,
    556px 643px #fff, 401px 275px #fff, 406px 1644px #fff, 1253px 1852px #fff,
    1599px 883px #fff, 744px 1721px #fff, 524px 1297px #fff, 1226px 1177px #fff,
    1679px 55px #fff, 874px 1811px #fff, 838px 790px #fff, 1241px 430px #fff,
    1676px 652px #fff, 1191px 568px #fff, 53px 1990px #fff, 1163px 237px #fff,
    61px 223px #fff, 592px 456px #fff, 1844px 271px #fff, 1324px 1488px #fff,
    1373px 717px #fff, 1822px 709px #fff, 1464px 941px #fff, 1445px 1118px #fff,
    991px 1414px #fff, 1964px 1076px #fff, 108px 172px #fff, 641px 1722px #fff,
    1539px 427px #fff, 1697px 45px #fff, 1301px 1353px #fff, 1060px 329px #fff,
    967px 1396px #fff, 493px 301px #fff, 1228px 1406px #fff, 1211px 1653px #fff,
    444px 1822px #fff, 1746px 353px #fff, 1449px 381px #fff, 671px 887px #fff,
    650px 138px #fff, 30px 1839px #fff, 1094px 1405px #fff, 273px 796px #fff,
    1618px 1964px #fff, 1045px 1849px #fff, 1472px 1155px #fff, 1529px 1312px #fff,
    728px 448px #fff, 44px 1908px #fff, 691px 818px #fff, 254px 293px #fff,
    1981px 1133px #fff, 1307px 375px #fff, 196px 316px #fff, 1241px 1975px #fff,
    1138px 1706px #fff, 1769px 463px #fff, 1768px 1428px #fff, 1730px 590px #fff,
    1780px 523px #fff, 1862px 1526px #fff, 1613px 909px #fff, 1266px 1781px #fff,
    470px 352px #fff, 699px 1682px #fff, 1002px 614px #fff, 1209px 133px #fff,
    1842px 518px #fff, 1422px 1836px #fff, 1720px 1901px #fff, 470px 1788px #fff,
    1355px 1387px #fff, 146px 1162px #fff, 933px 80px #fff, 681px 1063px #fff,
    313px 1341px #fff, 740px 1498px #fff, 168px 1014px #fff, 345px 1355px #fff,
    1498px 1562px #fff, 1626px 1358px #fff, 890px 403px #fff, 663px 562px #fff,
    1481px 168px #fff, 22px 719px #fff, 774px 1041px #fff, 1899px 829px #fff,
    430px 158px #fff, 430px 361px #fff, 1592px 1334px #fff, 224px 323px #fff,
    1639px 1131px #fff, 7px 271px #fff, 1646px 1514px #fff, 1605px 1444px #fff,
    1820px 1665px #fff, 1549px 1641px #fff, 1609px 1377px #fff, 486px 1098px #fff,
    229px 613px #fff, 542px 1694px #fff, 318px 256px #fff, 1861px 918px #fff,
    889px 892px #fff, 442px 1524px #fff, 19px 422px #fff, 1935px 1908px #fff,
    828px 109px #fff, 862px 1248px #fff, 1275px 560px #fff, 906px 63px #fff,
    337px 1605px #fff, 1691px 918px #fff, 1414px 679px #fff, 1726px 749px #fff,
    1540px 1149px #fff, 1337px 1466px #fff, 446px 430px #fff, 676px 1616px #fff,
    840px 326px #fff, 976px 977px #fff, 1840px 642px #fff, 1273px 804px #fff,
    1071px 928px #fff, 1292px 1675px #fff, 29px 1148px #fff, 1585px 135px #fff,
    1007px 563px #fff, 1035px 78px #fff, 1174px 574px #fff, 120px 1304px #fff,
    845px 1292px #fff, 861px 540px #fff, 234px 232px #fff, 1940px 1367px #fff,
    759px 639px #fff, 1775px 1381px #fff, 906px 372px #fff, 1104px 1165px #fff,
    1524px 911px #fff, 1882px 330px #fff, 1389px 700px #fff, 300px 1629px #fff,
    220px 1614px #fff, 563px 140px #fff, 1611px 1586px #fff, 793px 1316px #fff,
    325px 1070px #fff, 1722px 1462px #fff, 1406px 1120px #fff, 1169px 1768px #fff,
    1956px 1053px #fff, 959px 1587px #fff, 585px 1566px #fff, 370px 204px #fff,
    1606px 1416px #fff, 443px 1606px #fff, 1499px 1102px #fff, 1943px 105px #fff,
    1121px 1594px #fff, 1512px 32px #fff, 871px 1425px #fff, 433px 100px #fff,
    294px 1471px #fff, 1688px 1755px #fff, 1666px 591px #fff, 1034px 300px #fff,
    734px 1178px #fff, 1342px 313px #fff, 1616px 1590px #fff, 1763px 1472px #fff,
    632px 1935px #fff, 1708px 872px #fff, 1871px 915px #fff, 1829px 1020px #fff,
    1599px 578px #fff, 42px 585px #fff, 1163px 1382px #fff, 1744px 1272px #fff,
    984px 1426px #fff, 1786px 1584px #fff, 1813px 379px #fff, 1867px 1127px #fff,
    97px 567px #fff, 626px 988px #fff, 1178px 79px #fff, 1703px 211px #fff,
    961px 1785px #fff, 110px 975px #fff, 953px 1941px #fff, 1027px 1790px #fff,
    1665px 107px #fff, 11px 964px #fff, 1718px 1147px #fff, 21px 1728px #fff,
    1358px 1922px #fff, 872px 65px #fff, 1191px 1635px #fff, 762px 681px #fff,
    1519px 1033px #fff, 906px 566px #fff, 1074px 657px #fff, 1093px 415px #fff,
    51px 198px #fff, 1075px 1418px #fff, 1547px 1070px #fff, 225px 920px #fff,
    850px 1974px #fff, 981px 595px #fff, 1425px 131px #fff, 460px 917px #fff,
    56px 495px #fff, 714px 428px #fff, 920px 493px #fff, 470px 1521px #fff,
    532px 821px #fff, 1905px 71px #fff, 883px 1501px #fff, 294px 196px #fff,
    381px 1999px #fff, 332px 793px #fff, 1246px 408px #fff, 233px 149px #fff,
    315px 231px #fff, 1594px 1302px #fff, 696px 1585px #fff, 791px 136px #fff,
    479px 199px #fff, 1627px 1413px #fff, 1824px 924px #fff, 1631px 342px #fff,
    1251px 1151px #fff, 284px 1781px #fff, 497px 1052px #fff, 204px 1161px #fff,
    646px 1499px #fff, 1762px 558px #fff, 854px 1833px #fff, 883px 945px #fff,
    44px 982px #fff, 1101px 834px #fff, 515px 1748px #fff, 1578px 1435px #fff,
    819px 1258px #fff, 776px 670px #fff, 115px 385px #fff, 1478px 434px #fff,
    885px 20px #fff, 192px 1513px #fff, 78px 1129px #fff, 1774px 1105px #fff,
    955px 1149px #fff, 1817px 1929px #fff, 1106px 1832px #fff, 1107px 1997px #fff,
    94px 23px #fff, 243px 982px #fff, 43px 1972px #fff, 1798px 673px #fff,
    1131px 1589px #fff, 841px 14px #fff, 826px 345px #fff, 687px 56px #fff,
    1084px 32px #fff, 1887px 1878px #fff, 153px 526px #fff, 1828px 253px #fff,
    1947px 1105px #fff, 886px 700px #fff, 1307px 1723px #fff, 1274px 651px #fff,
    1530px 837px #fff, 1699px 1637px #fff, 1703px 1331px #fff, 1929px 1557px #fff,
    1763px 737px #fff, 1118px 1680px #fff, 1545px 692px #fff, 1462px 1092px #fff,
    208px 1667px #fff, 1393px 859px #fff, 186px 1794px #fff, 351px 1199px #fff,
    642px 1995px #fff, 1061px 1726px #fff, 1708px 115px #fff, 1233px 1305px #fff,
    637px 1786px #fff, 1730px 603px #fff, 75px 1240px #fff, 1704px 1326px #fff,
    584px 346px #fff, 438px 1554px #fff, 561px 513px #fff, 1382px 225px #fff,
    467px 1674px #fff, 1403px 815px #fff, 1546px 1835px #fff, 127px 1119px #fff,
    276px 591px #fff, 688px 1458px #fff, 765px 646px #fff, 474px 984px #fff,
    171px 361px #fff, 94px 1480px #fff, 1962px 1666px #fff, 909px 1037px #fff,
    1725px 222px #fff, 253px 1355px #fff, 1892px 1901px #fff, 275px 1847px #fff,
    28px 1184px #fff, 1725px 1382px #fff, 882px 647px #fff, 1935px 1046px #fff,
    10px 344px #fff, 292px 1328px #fff, 127px 1352px #fff, 752px 929px #fff,
    1589px 384px #fff, 284px 1829px #fff, 381px 820px #fff, 1229px 1125px #fff,
    777px 429px #fff, 1811px 1499px #fff, 1573px 287px #fff, 295px 756px #fff,
    389px 616px #fff, 781px 41px #fff, 1092px 333px #fff, 794px 1588px #fff,
    386px 1847px #fff, 1802px 710px #fff, 662px 60px #fff, 640px 264px #fff,
    463px 746px #fff, 1859px 799px #fff, 763px 37px #fff, 639px 396px #fff,
    357px 1071px #fff, 1190px 1430px #fff, 1814px 257px #fff, 1382px 235px #fff,
    606px 1304px #fff, 1939px 1470px #fff, 1124px 349px #fff, 307px 1567px #fff,
    310px 1323px #fff, 1145px 922px #fff, 1196px 1922px #fff, 1647px 544px #fff,
    788px 1337px #fff, 257px 632px #fff, 1413px 414px #fff, 590px 620px #fff,
    582px 794px #fff, 1702px 1481px #fff, 1055px 53px #fff, 157px 346px #fff,
    50px 1901px #fff, 1038px 1369px #fff, 796px 1941px #fff, 215px 194px #fff,
    1567px 1538px #fff, 367px 800px #fff, 1044px 489px #fff, 1109px 1712px #fff,
    524px 327px #fff, 525px 1252px #fff, 1475px 1240px #fff, 529px 436px #fff,
    795px 834px #fff, 122px 1371px #fff, 79px 482px #fff, 520px 1249px #fff,
    336px 1878px #fff, 188px 944px #fff, 325px 1259px #fff, 1491px 1942px #fff,
    620px 1054px #fff, 1606px 1153px #fff, 1448px 502px #fff, 53px 1381px #fff,
    107px 1670px #fff, 1380px 618px #fff, 967px 1557px #fff, 1116px 1722px #fff,
    1174px 1044px #fff, 1805px 717px #fff, 663px 394px #fff, 1848px 1007px #fff,
    389px 802px #fff, 49px 392px #fff, 1650px 852px #fff, 1678px 1012px #fff,
    335px 1009px #fff, 1818px 1631px #fff, 1568px 742px #fff, 1162px 1991px #fff,
    52px 1190px #fff, 1401px 928px #fff, 119px 1549px #fff, 537px 1529px #fff,
    2px 1709px #fff, 122px 387px #fff, 543px 2px #fff, 27px 1971px #fff,
    507px 1377px #fff, 1362px 1080px #fff, 1031px 1544px #fff, 1631px 1174px #fff,
    1603px 312px #fff, 1626px 1422px #fff, 1430px 615px #fff, 1958px 1431px #fff,
    1946px 1412px #fff, 1848px 247px #fff, 984px 1808px #fff, 1396px 225px #fff,
    319px 717px #fff, 1252px 875px #fff, 1619px 156px #fff, 951px 1971px #fff,
    386px 355px #fff, 1406px 1151px #fff, 273px 1538px #fff, 844px 1570px #fff,
    947px 151px #fff, 1363px 525px #fff, 209px 307px #fff, 1923px 1718px #fff,
    993px 1741px #fff, 1513px 353px #fff, 1353px 61px #fff, 664px 352px #fff,
    1382px 359px #fff, 1487px 1707px #fff, 657px 1045px #fff, 1107px 490px #fff,
    1834px 1176px #fff, 837px 1438px #fff, 1947px 448px #fff, 1196px 333px #fff,
    151px 555px #fff, 18px 992px #fff, 458px 748px #fff, 1801px 890px #fff,
    1093px 1012px #fff, 315px 1101px #fff, 194px 323px #fff, 754px 292px #fff,
    1737px 7px #fff, 40px 840px #fff, 1170px 805px #fff, 176px 1753px #fff,
    805px 1148px #fff, 1578px 1271px #fff, 367px 1494px #fff, 363px 1111px #fff,
    1955px 243px #fff, 1451px 1093px #fff, 375px 617px #fff, 1223px 720px #fff,
    1178px 13px #fff, 1456px 865px #fff, 1440px 49px #fff, 186px 1569px #fff,
    320px 1853px #fff, 300px 539px #fff, 1559px 509px #fff, 1985px 1108px #fff,
    1588px 828px #fff, 525px 1432px #fff, 831px 363px #fff, 141px 281px #fff,
    1319px 402px #fff, 40px 456px #fff, 1955px 478px #fff, 1758px 818px #fff,
    1924px 688px #fff, 1030px 953px #fff, 1982px 210px #fff, 917px 1401px #fff,
    1051px 1837px #fff, 1045px 463px #fff, 1744px 573px #fff, 529px 1530px #fff,
    542px 469px #fff, 1982px 324px #fff, 1902px 1422px #fff, 1968px 782px #fff,
    1666px 1561px #fff, 955px 304px #fff, 323px 778px #fff, 272px 443px #fff,
    485px 581px #fff, 1353px 1058px #fff, 1257px 131px #fff, 434px 98px #fff,
    1587px 1953px #fff, 1749px 68px #fff, 1984px 839px #fff, 1518px 183px #fff,
    1071px 855px #fff, 1662px 1994px #fff, 1111px 106px #fff, 1954px 838px #fff;
  animation: animStar 50s linear infinite;
}
#stars::after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    501px 811px #fff, 1450px 1324px #fff, 1093px 1780px #fff, 1469px 678px #fff,
    904px 741px #fff, 1160px 781px #fff, 1841px 1962px #fff, 1630px 1667px #fff,
    1788px 676px #fff, 367px 1734px #fff, 1343px 156px #fff, 1283px 1142px #fff,
    1062px 378px #fff, 1395px 467px #fff, 1017px 1891px #fff, 137px 1114px #fff,
    1767px 1403px #fff, 1543px 11px #fff, 1078px 181px #fff, 1189px 1574px #fff,
    1697px 1551px #fff, 439px 472px #fff, 1491px 677px #fff, 1364px 599px #fff,
    34px 382px #fff, 1221px 1584px #fff, 1266px 1499px #fff, 169px 1907px #fff,
    1219px 1125px #fff, 659px 18px #fff, 1731px 1959px #fff, 332px 1216px #fff,
    1913px 788px #fff, 80px 712px #fff, 326px 1605px #fff, 574px 1502px #fff,
    473px 1653px #fff, 404px 975px #fff, 322px 1797px #fff, 425px 1321px #fff,
    1121px 1797px #fff, 731px 647px #fff, 891px 1584px #fff, 1523px 109px #fff,
    1379px 244px #fff, 865px 1064px #fff, 493px 956px #fff, 624px 1380px #fff,
    440px 619px #fff, 1630px 767px #fff, 955px 1196px #fff, 62px 729px #fff,
    126px 946px #fff, 1256px 896px #fff, 1444px 256px #fff, 661px 1628px #fff,
    1078px 1716px #fff, 300px 737px #fff, 1734px 413px #fff, 1296px 129px #fff,
    1771px 1678px #fff, 977px 1764px #fff, 1879px 549px #fff, 665px 1531px #fff,
    89px 701px #fff, 1084px 1183px #fff, 1597px 1576px #fff, 1354px 1774px #fff,
    554px 1471px #fff, 1469px 287px #fff, 887px 106px #fff, 1962px 766px #fff,
    638px 805px #fff, 1651px 741px #fff, 1517px 1826px #fff, 24px 1152px #fff,
    507px 558px #fff, 1262px 652px #fff, 246px 1048px #fff, 1077px 421px #fff,
    1866px 1847px #fff, 1986px 1561px #fff, 704px 632px #fff, 1991px 1875px #fff,
    1227px 395px #fff, 45px 1116px #fff, 247px 786px #fff, 890px 607px #fff,
    787px 1235px #fff, 557px 524px #fff, 1582px 1285px #fff, 1725px 1366px #fff,
    952px 747px #fff, 251px 458px #fff, 1500px 1250px #fff, 1999px 1734px #fff,
    1336px 1955px #fff, 1705px 1464px #fff, 728px 697px #fff, 594px 510px #fff,
    1345px 1990px #fff, 1919px 1803px #fff, 1117px 966px #fff, 1629px 97px #fff,
    1046px 1196px #fff, 810px 1092px #fff, 722px 976px #fff, 406px 18px #fff,
    1665px 1860px #fff, 1758px 1628px #fff, 1183px 463px #fff, 564px 239px #fff,
    13px 1767px #fff, 1482px 1472px #fff, 1700px 347px #fff, 1362px 244px #fff,
    1141px 1708px #fff, 22px 885px #fff, 374px 1309px #fff, 1034px 1037px #fff,
    1725px 1086px #fff, 1343px 1921px #fff, 596px 903px #fff, 1061px 478px #fff,
    18px 1409px #fff, 729px 1364px #fff, 264px 911px #fff, 677px 1442px #fff,
    123px 33px #fff, 1303px 646px #fff, 1945px 792px #fff, 1305px 938px #fff,
    918px 1536px #fff, 620px 948px #fff, 183px 646px #fff, 695px 687px #fff,
    881px 272px #fff, 1521px 1212px #fff, 1423px 1022px #fff, 1545px 1271px #fff,
    1393px 348px #fff, 685px 1910px #fff, 1446px 856px #fff, 73px 1201px #fff,
    736px 999px #fff, 673px 796px #fff, 469px 850px #fff, 1912px 142px #fff,
    1278px 664px #fff, 184px 1990px #fff, 1173px 1312px #fff, 782px 1879px #fff,
    323px 1035px #fff, 611px 908px #fff, 565px 1449px #fff, 748px 1713px #fff,
    1047px 490px #fff, 1040px 1872px #fff, 1818px 1659px #fff, 1806px 1327px #fff,
    386px 575px #fff, 1550px 463px #fff, 148px 687px #fff, 651px 1683px #fff,
    1588px 1194px #fff, 1831px 2px #fff, 581px 876px #fff, 1396px 1743px #fff,
    1212px 1810px #fff, 421px 1920px #fff, 658px 1461px #fff, 1859px 1809px #fff,
    1456px 388px #fff, 186px 1627px #fff, 1528px 1145px #fff, 171px 97px #fff,
    674px 1072px #fff, 676px 1052px #fff, 1165px 1131px #fff, 1088px 781px #fff,
    1231px 948px #fff, 330px 257px #fff, 426px 1046px #fff, 549px 652px #fff,
    1338px 74px #fff, 1749px 364px #fff, 931px 369px #fff, 383px 1428px #fff,
    1558px 389px #fff, 927px 133px #fff, 234px 1888px #fff, 1785px 1617px #fff,
    556px 643px #fff, 401px 275px #fff, 406px 1644px #fff, 1253px 1852px #fff,
    1599px 883px #fff, 744px 1721px #fff, 524px 1297px #fff, 1226px 1177px #fff,
    1679px 55px #fff, 874px 1811px #fff, 838px 790px #fff, 1241px 430px #fff,
    1676px 652px #fff, 1191px 568px #fff, 53px 1990px #fff, 1163px 237px #fff,
    61px 223px #fff, 592px 456px #fff, 1844px 271px #fff, 1324px 1488px #fff,
    1373px 717px #fff, 1822px 709px #fff, 1464px 941px #fff, 1445px 1118px #fff,
    991px 1414px #fff, 1964px 1076px #fff, 108px 172px #fff, 641px 1722px #fff,
    1539px 427px #fff, 1697px 45px #fff, 1301px 1353px #fff, 1060px 329px #fff,
    967px 1396px #fff, 493px 301px #fff, 1228px 1406px #fff, 1211px 1653px #fff,
    444px 1822px #fff, 1746px 353px #fff, 1449px 381px #fff, 671px 887px #fff,
    650px 138px #fff, 30px 1839px #fff, 1094px 1405px #fff, 273px 796px #fff,
    1618px 1964px #fff, 1045px 1849px #fff, 1472px 1155px #fff, 1529px 1312px #fff,
    728px 448px #fff, 44px 1908px #fff, 691px 818px #fff, 254px 293px #fff,
    1981px 1133px #fff, 1307px 375px #fff, 196px 316px #fff, 1241px 1975px #fff,
    1138px 1706px #fff, 1769px 463px #fff, 1768px 1428px #fff, 1730px 590px #fff,
    1780px 523px #fff, 1862px 1526px #fff, 1613px 909px #fff, 1266px 1781px #fff,
    470px 352px #fff, 699px 1682px #fff, 1002px 614px #fff, 1209px 133px #fff,
    1842px 518px #fff, 1422px 1836px #fff, 1720px 1901px #fff, 470px 1788px #fff,
    1355px 1387px #fff, 146px 1162px #fff, 933px 80px #fff, 681px 1063px #fff,
    313px 1341px #fff, 740px 1498px #fff, 168px 1014px #fff, 345px 1355px #fff,
    1498px 1562px #fff, 1626px 1358px #fff, 890px 403px #fff, 663px 562px #fff,
    1481px 168px #fff, 22px 719px #fff, 774px 1041px #fff, 1899px 829px #fff,
    430px 158px #fff, 430px 361px #fff, 1592px 1334px #fff, 224px 323px #fff,
    1639px 1131px #fff, 7px 271px #fff, 1646px 1514px #fff, 1605px 1444px #fff,
    1820px 1665px #fff, 1549px 1641px #fff, 1609px 1377px #fff, 486px 1098px #fff,
    229px 613px #fff, 542px 1694px #fff, 318px 256px #fff, 1861px 918px #fff,
    889px 892px #fff, 442px 1524px #fff, 19px 422px #fff, 1935px 1908px #fff,
    828px 109px #fff, 862px 1248px #fff, 1275px 560px #fff, 906px 63px #fff,
    337px 1605px #fff, 1691px 918px #fff, 1414px 679px #fff, 1726px 749px #fff,
    1540px 1149px #fff, 1337px 1466px #fff, 446px 430px #fff, 676px 1616px #fff,
    840px 326px #fff, 976px 977px #fff, 1840px 642px #fff, 1273px 804px #fff,
    1071px 928px #fff, 1292px 1675px #fff, 29px 1148px #fff, 1585px 135px #fff,
    1007px 563px #fff, 1035px 78px #fff, 1174px 574px #fff, 120px 1304px #fff,
    845px 1292px #fff, 861px 540px #fff, 234px 232px #fff, 1940px 1367px #fff,
    759px 639px #fff, 1775px 1381px #fff, 906px 372px #fff, 1104px 1165px #fff,
    1524px 911px #fff, 1882px 330px #fff, 1389px 700px #fff, 300px 1629px #fff,
    220px 1614px #fff, 563px 140px #fff, 1611px 1586px #fff, 793px 1316px #fff,
    325px 1070px #fff, 1722px 1462px #fff, 1406px 1120px #fff, 1169px 1768px #fff,
    1956px 1053px #fff, 959px 1587px #fff, 585px 1566px #fff, 370px 204px #fff,
    1606px 1416px #fff, 443px 1606px #fff, 1499px 1102px #fff, 1943px 105px #fff,
    1121px 1594px #fff, 1512px 32px #fff, 871px 1425px #fff, 433px 100px #fff,
    294px 1471px #fff, 1688px 1755px #fff, 1666px 591px #fff, 1034px 300px #fff,
    734px 1178px #fff, 1342px 313px #fff, 1616px 1590px #fff, 1763px 1472px #fff,
    632px 1935px #fff, 1708px 872px #fff, 1871px 915px #fff, 1829px 1020px #fff,
    1599px 578px #fff, 42px 585px #fff, 1163px 1382px #fff, 1744px 1272px #fff,
    984px 1426px #fff, 1786px 1584px #fff, 1813px 379px #fff, 1867px 1127px #fff,
    97px 567px #fff, 626px 988px #fff, 1178px 79px #fff, 1703px 211px #fff,
    961px 1785px #fff, 110px 975px #fff, 953px 1941px #fff, 1027px 1790px #fff,
    1665px 107px #fff, 11px 964px #fff, 1718px 1147px #fff, 21px 1728px #fff,
    1358px 1922px #fff, 872px 65px #fff, 1191px 1635px #fff, 762px 681px #fff,
    1519px 1033px #fff, 906px 566px #fff, 1074px 657px #fff, 1093px 415px #fff,
    51px 198px #fff, 1075px 1418px #fff, 1547px 1070px #fff, 225px 920px #fff,
    850px 1974px #fff, 981px 595px #fff, 1425px 131px #fff, 460px 917px #fff,
    56px 495px #fff, 714px 428px #fff, 920px 493px #fff, 470px 1521px #fff,
    532px 821px #fff, 1905px 71px #fff, 883px 1501px #fff, 294px 196px #fff,
    381px 1999px #fff, 332px 793px #fff, 1246px 408px #fff, 233px 149px #fff,
    315px 231px #fff, 1594px 1302px #fff, 696px 1585px #fff, 791px 136px #fff,
    479px 199px #fff, 1627px 1413px #fff, 1824px 924px #fff, 1631px 342px #fff,
    1251px 1151px #fff, 284px 1781px #fff, 497px 1052px #fff, 204px 1161px #fff,
    646px 1499px #fff, 1762px 558px #fff, 854px 1833px #fff, 883px 945px #fff,
    44px 982px #fff, 1101px 834px #fff, 515px 1748px #fff, 1578px 1435px #fff,
    819px 1258px #fff, 776px 670px #fff, 115px 385px #fff, 1478px 434px #fff,
    885px 20px #fff, 192px 1513px #fff, 78px 1129px #fff, 1774px 1105px #fff,
    955px 1149px #fff, 1817px 1929px #fff, 1106px 1832px #fff, 1107px 1997px #fff,
    94px 23px #fff, 243px 982px #fff, 43px 1972px #fff, 1798px 673px #fff,
    1131px 1589px #fff, 841px 14px #fff, 826px 345px #fff, 687px 56px #fff,
    1084px 32px #fff, 1887px 1878px #fff, 153px 526px #fff, 1828px 253px #fff,
    1947px 1105px #fff, 886px 700px #fff, 1307px 1723px #fff, 1274px 651px #fff,
    1530px 837px #fff, 1699px 1637px #fff, 1703px 1331px #fff, 1929px 1557px #fff,
    1763px 737px #fff, 1118px 1680px #fff, 1545px 692px #fff, 1462px 1092px #fff,
    208px 1667px #fff, 1393px 859px #fff, 186px 1794px #fff, 351px 1199px #fff,
    642px 1995px #fff, 1061px 1726px #fff, 1708px 115px #fff, 1233px 1305px #fff,
    637px 1786px #fff, 1730px 603px #fff, 75px 1240px #fff, 1704px 1326px #fff,
    584px 346px #fff, 438px 1554px #fff, 561px 513px #fff, 1382px 225px #fff,
    467px 1674px #fff, 1403px 815px #fff, 1546px 1835px #fff, 127px 1119px #fff,
    276px 591px #fff, 688px 1458px #fff, 765px 646px #fff, 474px 984px #fff,
    171px 361px #fff, 94px 1480px #fff, 1962px 1666px #fff, 909px 1037px #fff,
    1725px 222px #fff, 253px 1355px #fff, 1892px 1901px #fff, 275px 1847px #fff,
    28px 1184px #fff, 1725px 1382px #fff, 882px 647px #fff, 1935px 1046px #fff,
    10px 344px #fff, 292px 1328px #fff, 127px 1352px #fff, 752px 929px #fff,
    1589px 384px #fff, 284px 1829px #fff, 381px 820px #fff, 1229px 1125px #fff,
    777px 429px #fff, 1811px 1499px #fff, 1573px 287px #fff, 295px 756px #fff,
    389px 616px #fff, 781px 41px #fff, 1092px 333px #fff, 794px 1588px #fff,
    386px 1847px #fff, 1802px 710px #fff, 662px 60px #fff, 640px 264px #fff,
    463px 746px #fff, 1859px 799px #fff, 763px 37px #fff, 639px 396px #fff,
    357px 1071px #fff, 1190px 1430px #fff, 1814px 257px #fff, 1382px 235px #fff,
    606px 1304px #fff, 1939px 1470px #fff, 1124px 349px #fff, 307px 1567px #fff,
    310px 1323px #fff, 1145px 922px #fff, 1196px 1922px #fff, 1647px 544px #fff,
    788px 1337px #fff, 257px 632px #fff, 1413px 414px #fff, 590px 620px #fff,
    582px 794px #fff, 1702px 1481px #fff, 1055px 53px #fff, 157px 346px #fff,
    50px 1901px #fff, 1038px 1369px #fff, 796px 1941px #fff, 215px 194px #fff,
    1567px 1538px #fff, 367px 800px #fff, 1044px 489px #fff, 1109px 1712px #fff,
    524px 327px #fff, 525px 1252px #fff, 1475px 1240px #fff, 529px 436px #fff,
    795px 834px #fff, 122px 1371px #fff, 79px 482px #fff, 520px 1249px #fff,
    336px 1878px #fff, 188px 944px #fff, 325px 1259px #fff, 1491px 1942px #fff,
    620px 1054px #fff, 1606px 1153px #fff, 1448px 502px #fff, 53px 1381px #fff,
    107px 1670px #fff, 1380px 618px #fff, 967px 1557px #fff, 1116px 1722px #fff,
    1174px 1044px #fff, 1805px 717px #fff, 663px 394px #fff, 1848px 1007px #fff,
    389px 802px #fff, 49px 392px #fff, 1650px 852px #fff, 1678px 1012px #fff,
    335px 1009px #fff, 1818px 1631px #fff, 1568px 742px #fff, 1162px 1991px #fff,
    52px 1190px #fff, 1401px 928px #fff, 119px 1549px #fff, 537px 1529px #fff,
    2px 1709px #fff, 122px 387px #fff, 543px 2px #fff, 27px 1971px #fff,
    507px 1377px #fff, 1362px 1080px #fff, 1031px 1544px #fff, 1631px 1174px #fff,
    1603px 312px #fff, 1626px 1422px #fff, 1430px 615px #fff, 1958px 1431px #fff,
    1946px 1412px #fff, 1848px 247px #fff, 984px 1808px #fff, 1396px 225px #fff,
    319px 717px #fff, 1252px 875px #fff, 1619px 156px #fff, 951px 1971px #fff,
    386px 355px #fff, 1406px 1151px #fff, 273px 1538px #fff, 844px 1570px #fff,
    947px 151px #fff, 1363px 525px #fff, 209px 307px #fff, 1923px 1718px #fff,
    993px 1741px #fff, 1513px 353px #fff, 1353px 61px #fff, 664px 352px #fff,
    1382px 359px #fff, 1487px 1707px #fff, 657px 1045px #fff, 1107px 490px #fff,
    1834px 1176px #fff, 837px 1438px #fff, 1947px 448px #fff, 1196px 333px #fff,
    151px 555px #fff, 18px 992px #fff, 458px 748px #fff, 1801px 890px #fff,
    1093px 1012px #fff, 315px 1101px #fff, 194px 323px #fff, 754px 292px #fff,
    1737px 7px #fff, 40px 840px #fff, 1170px 805px #fff, 176px 1753px #fff,
    805px 1148px #fff, 1578px 1271px #fff, 367px 1494px #fff, 363px 1111px #fff,
    1955px 243px #fff, 1451px 1093px #fff, 375px 617px #fff, 1223px 720px #fff,
    1178px 13px #fff, 1456px 865px #fff, 1440px 49px #fff, 186px 1569px #fff,
    320px 1853px #fff, 300px 539px #fff, 1559px 509px #fff, 1985px 1108px #fff,
    1588px 828px #fff, 525px 1432px #fff, 831px 363px #fff, 141px 281px #fff,
    1319px 402px #fff, 40px 456px #fff, 1955px 478px #fff, 1758px 818px #fff,
    1924px 688px #fff, 1030px 953px #fff, 1982px 210px #fff, 917px 1401px #fff,
    1051px 1837px #fff, 1045px 463px #fff, 1744px 573px #fff, 529px 1530px #fff,
    542px 469px #fff, 1982px 324px #fff, 1902px 1422px #fff, 1968px 782px #fff,
    1666px 1561px #fff, 955px 304px #fff, 323px 778px #fff, 272px 443px #fff,
    485px 581px #fff, 1353px 1058px #fff, 1257px 131px #fff, 434px 98px #fff,
    1587px 1953px #fff, 1749px 68px #fff, 1984px 839px #fff, 1518px 183px #fff,
    1071px 855px #fff, 1662px 1994px #fff, 1111px 106px #fff, 1954px 838px #fff;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    1925px 1320px #fff, 693px 1778px #fff, 1016px 711px #fff, 1171px 563px #fff,
    661px 1919px #fff, 1610px 44px #fff, 1275px 140px #fff, 1208px 1802px #fff,
    1473px 1587px #fff, 11px 1117px #fff, 853px 1757px #fff, 1149px 937px #fff,
    1353px 428px #fff, 270px 279px #fff, 258px 1404px #fff, 417px 1188px #fff,
    286px 561px #fff, 393px 1765px #fff, 147px 881px #fff, 666px 1097px #fff,
    1425px 1278px #fff, 806px 156px #fff, 1252px 561px #fff, 218px 52px #fff,
    1371px 1980px #fff, 171px 745px #fff, 1424px 89px #fff, 137px 244px #fff,
    939px 1922px #fff, 137px 1080px #fff, 1757px 50px #fff, 904px 536px #fff,
    1938px 1001px #fff, 1172px 440px #fff, 72px 1475px #fff, 102px 121px #fff,
    804px 1671px #fff, 1314px 270px #fff, 440px 1341px #fff, 1216px 511px #fff,
    1061px 1523px #fff, 97px 274px #fff, 704px 1318px #fff, 52px 1872px #fff,
    1962px 296px #fff, 111px 289px #fff, 1157px 1236px #fff, 1347px 1451px #fff,
    820px 286px #fff, 1389px 1169px #fff, 644px 841px #fff, 1286px 522px #fff,
    955px 659px #fff, 428px 1805px #fff, 237px 557px #fff, 1689px 1058px #fff,
    636px 1882px #fff, 1349px 1664px #fff, 1548px 432px #fff, 1841px 504px #fff,
    302px 252px #fff, 827px 1765px #fff, 620px 123px #fff, 207px 748px #fff,
    1454px 1234px #fff, 1967px 1790px #fff, 542px 33px #fff, 742px 1214px #fff,
    255px 1402px #fff, 74px 1772px #fff, 699px 475px #fff, 980px 1253px #fff,
    534px 1676px #fff, 909px 202px #fff, 1498px 1251px #fff, 1796px 120px #fff,
    1409px 1263px #fff, 1627px 995px #fff, 969px 710px #fff, 1674px 676px #fff,
    1832px 759px #fff, 1623px 563px #fff, 251px 1790px #fff, 96px 1688px #fff,
    886px 239px #fff, 778px 150px #fff, 1767px 430px #fff, 765px 1259px #fff,
    1189px 877px #fff, 444px 1629px #fff, 1560px 324px #fff, 1952px 1097px #fff,
    712px 1173px #fff, 541px 911px #fff, 827px 1420px #fff, 1233px 285px #fff,
    784px 546px #fff, 645px 285px #fff, 1273px 1255px #fff, 1821px 174px #fff,
    221px 1795px #fff, 1004px 456px #fff, 1298px 941px #fff, 274px 387px #fff,
    174px 376px #fff, 1491px 258px #fff, 1489px 1946px #fff, 1134px 1382px #fff,
    1289px 1145px #fff, 464px 358px #fff, 1249px 1842px #fff, 1665px 831px #fff,
    1982px 84px #fff, 541px 774px #fff, 1994px 523px #fff, 762px 1644px #fff,
    1730px 867px #fff, 1951px 1287px #fff, 911px 1691px #fff, 1454px 725px #fff,
    1287px 1940px #fff, 70px 564px #fff, 1980px 638px #fff, 1674px 1774px #fff,
    1720px 116px #fff, 1747px 182px #fff, 1040px 450px #fff, 1795px 375px #fff,
    857px 1471px #fff, 1326px 1730px #fff, 915px 274px #fff, 1224px 358px #fff,
    1808px 60px #fff, 43px 1870px #fff, 1810px 1536px #fff, 1564px 1719px #fff,
    731px 1388px #fff, 1953px 1967px #fff, 1744px 1119px #fff, 794px 1384px #fff,
    959px 714px #fff, 18px 1932px #fff, 1358px 1437px #fff, 355px 939px #fff,
    1355px 1648px #fff, 608px 719px #fff, 383px 758px #fff, 1164px 1681px #fff,
    1045px 253px #fff, 424px 1279px #fff, 1899px 359px #fff, 379px 488px #fff,
    214px 465px #fff, 179px 905px #fff, 830px 1993px #fff, 448px 1077px #fff,
    1880px 1354px #fff, 1973px 347px #fff, 745px 1025px #fff, 788px 1007px #fff,
    1377px 883px #fff, 6px 290px #fff, 1312px 407px #fff, 1398px 622px #fff,
    1405px 339px #fff, 1198px 1709px #fff, 988px 1226px #fff, 87px 1459px #fff,
    1113px 1698px #fff, 997px 732px #fff, 708px 331px #fff, 1876px 1112px #fff,
    1729px 1797px #fff, 719px 703px #fff, 1295px 522px #fff, 758px 1061px #fff,
    1309px 1014px #fff, 1327px 1365px #fff, 854px 1317px #fff, 531px 1001px #fff,
    1751px 1040px #fff, 1354px 190px #fff, 800px 1538px #fff, 88px 1455px #fff,
    668px 39px #fff, 1379px 41px #fff, 892px 524px #fff, 54px 649px #fff,
    1289px 730px #fff, 727px 488px #fff, 181px 842px #fff, 1230px 64px #fff,
    3px 857px #fff, 292px 1201px #fff, 1343px 673px #fff, 1096px 1412px #fff,
    1520px 292px #fff, 104px 1683px #fff, 934px 1387px #fff, 314px 739px #fff;
  animation: animStar 100s linear infinite;
}
#stars2::after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    1925px 1320px #fff, 693px 1778px #fff, 1016px 711px #fff, 1171px 563px #fff,
    661px 1919px #fff, 1610px 44px #fff, 1275px 140px #fff, 1208px 1802px #fff,
    1473px 1587px #fff, 11px 1117px #fff, 853px 1757px #fff, 1149px 937px #fff,
    1353px 428px #fff, 270px 279px #fff, 258px 1404px #fff, 417px 1188px #fff,
    286px 561px #fff, 393px 1765px #fff, 147px 881px #fff, 666px 1097px #fff,
    1425px 1278px #fff, 806px 156px #fff, 1252px 561px #fff, 218px 52px #fff,
    1371px 1980px #fff, 171px 745px #fff, 1424px 89px #fff, 137px 244px #fff,
    939px 1922px #fff, 137px 1080px #fff, 1757px 50px #fff, 904px 536px #fff,
    1938px 1001px #fff, 1172px 440px #fff, 72px 1475px #fff, 102px 121px #fff,
    804px 1671px #fff, 1314px 270px #fff, 440px 1341px #fff, 1216px 511px #fff,
    1061px 1523px #fff, 97px 274px #fff, 704px 1318px #fff, 52px 1872px #fff,
    1962px 296px #fff, 111px 289px #fff, 1157px 1236px #fff, 1347px 1451px #fff,
    820px 286px #fff, 1389px 1169px #fff, 644px 841px #fff, 1286px 522px #fff,
    955px 659px #fff, 428px 1805px #fff, 237px 557px #fff, 1689px 1058px #fff,
    636px 1882px #fff, 1349px 1664px #fff, 1548px 432px #fff, 1841px 504px #fff,
    302px 252px #fff, 827px 1765px #fff, 620px 123px #fff, 207px 748px #fff,
    1454px 1234px #fff, 1967px 1790px #fff, 542px 33px #fff, 742px 1214px #fff,
    255px 1402px #fff, 74px 1772px #fff, 699px 475px #fff, 980px 1253px #fff,
    534px 1676px #fff, 909px 202px #fff, 1498px 1251px #fff, 1796px 120px #fff,
    1409px 1263px #fff, 1627px 995px #fff, 969px 710px #fff, 1674px 676px #fff,
    1832px 759px #fff, 1623px 563px #fff, 251px 1790px #fff, 96px 1688px #fff,
    886px 239px #fff, 778px 150px #fff, 1767px 430px #fff, 765px 1259px #fff,
    1189px 877px #fff, 444px 1629px #fff, 1560px 324px #fff, 1952px 1097px #fff,
    712px 1173px #fff, 541px 911px #fff, 827px 1420px #fff, 1233px 285px #fff,
    784px 546px #fff, 645px 285px #fff, 1273px 1255px #fff, 1821px 174px #fff,
    221px 1795px #fff, 1004px 456px #fff, 1298px 941px #fff, 274px 387px #fff,
    174px 376px #fff, 1491px 258px #fff, 1489px 1946px #fff, 1134px 1382px #fff,
    1289px 1145px #fff, 464px 358px #fff, 1249px 1842px #fff, 1665px 831px #fff,
    1982px 84px #fff, 541px 774px #fff, 1994px 523px #fff, 762px 1644px #fff,
    1730px 867px #fff, 1951px 1287px #fff, 911px 1691px #fff, 1454px 725px #fff,
    1287px 1940px #fff, 70px 564px #fff, 1980px 638px #fff, 1674px 1774px #fff,
    1720px 116px #fff, 1747px 182px #fff, 1040px 450px #fff, 1795px 375px #fff,
    857px 1471px #fff, 1326px 1730px #fff, 915px 274px #fff, 1224px 358px #fff,
    1808px 60px #fff, 43px 1870px #fff, 1810px 1536px #fff, 1564px 1719px #fff,
    731px 1388px #fff, 1953px 1967px #fff, 1744px 1119px #fff, 794px 1384px #fff,
    959px 714px #fff, 18px 1932px #fff, 1358px 1437px #fff, 355px 939px #fff,
    1355px 1648px #fff, 608px 719px #fff, 383px 758px #fff, 1164px 1681px #fff,
    1045px 253px #fff, 424px 1279px #fff, 1899px 359px #fff, 379px 488px #fff,
    214px 465px #fff, 179px 905px #fff, 830px 1993px #fff, 448px 1077px #fff,
    1880px 1354px #fff, 1973px 347px #fff, 745px 1025px #fff, 788px 1007px #fff,
    1377px 883px #fff, 6px 290px #fff, 1312px 407px #fff, 1398px 622px #fff,
    1405px 339px #fff, 1198px 1709px #fff, 988px 1226px #fff, 87px 1459px #fff,
    1113px 1698px #fff, 997px 732px #fff, 708px 331px #fff, 1876px 1112px #fff,
    1729px 1797px #fff, 719px 703px #fff, 1295px 522px #fff, 758px 1061px #fff,
    1309px 1014px #fff, 1327px 1365px #fff, 854px 1317px #fff, 531px 1001px #fff,
    1751px 1040px #fff, 1354px 190px #fff, 800px 1538px #fff, 88px 1455px #fff,
    668px 39px #fff, 1379px 41px #fff, 892px 524px #fff, 54px 649px #fff,
    1289px 730px #fff, 727px 488px #fff, 181px 842px #fff, 1230px 64px #fff,
    3px 857px #fff, 292px 1201px #fff, 1343px 673px #fff, 1096px 1412px #fff,
    1520px 292px #fff, 104px 1683px #fff, 934px 1387px #fff, 314px 739px #fff;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow:
    200px 981px #fff, 1731px 521px #fff, 132px 1039px #fff, 1888px 1547px #fff,
    899px 1226px #fff, 1887px 580px #fff, 1548px 1092px #fff, 1626px 689px #fff,
    254px 1072px #fff, 1684px 1211px #fff, 672px 1267px #fff, 939px 668px #fff,
    1969px 645px #fff, 1126px 983px #fff, 457px 568px #fff, 476px 876px #fff,
    829px 1896px #fff, 1364px 1846px #fff, 1507px 1120px #fff, 936px 1948px #fff,
    1833px 832px #fff, 1424px 285px #fff, 1377px 1596px #fff, 432px 153px #fff,
    1348px 1410px #fff, 1529px 954px #fff, 1102px 387px #fff, 264px 297px #fff,
    811px 977px #fff, 1931px 673px #fff, 1734px 978px #fff, 1772px 1567px #fff,
    1197px 1400px #fff, 764px 282px #fff, 1103px 822px #fff, 872px 1803px #fff,
    1057px 1763px #fff, 52px 1299px #fff, 1312px 1236px #fff, 235px 1082px #fff,
    299px 1086px #fff, 1017px 1602px #fff, 1950px 626px #fff, 1306px 132px #fff,
    1358px 1618px #fff, 1873px 1718px #fff, 1447px 940px #fff, 1888px 1195px #fff,
    1704px 1765px #fff, 872px 1357px #fff, 1555px 1120px #fff, 250px 1415px #fff,
    450px 415px #fff, 492px 901px #fff, 170px 1641px #fff, 56px 1129px #fff,
    627px 1514px #fff, 1221px 500px #fff, 324px 1895px #fff, 1397px 1775px #fff,
    1966px 598px #fff, 1550px 763px #fff, 326px 1605px #fff, 261px 969px #fff,
    890px 281px #fff, 736px 544px #fff, 589px 1262px #fff, 1581px 368px #fff,
    1900px 1132px #fff, 1914px 585px #fff, 1864px 1517px #fff, 241px 217px #fff,
    859px 787px #fff, 996px 1729px #fff, 741px 121px #fff, 418px 414px #fff,
    142px 967px #fff, 387px 896px #fff, 703px 562px #fff, 968px 1136px #fff,
    1682px 332px #fff, 1287px 846px #fff, 256px 1427px #fff, 1885px 432px #fff,
    1739px 1458px #fff, 345px 1769px #fff, 1140px 1612px #fff, 192px 1921px #fff,
    920px 471px #fff, 834px 881px #fff, 917px 1803px #fff, 466px 1266px #fff,
    483px 1108px #fff, 689px 986px #fff, 1279px 786px #fff, 458px 910px #fff,
    1250px 870px #fff, 785px 1654px #fff, 1543px 1757px #fff, 287px 1272px #fff;
  animation: animStar 150s linear infinite;
}
#stars3::after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow:
    200px 981px #fff, 1731px 521px #fff, 132px 1039px #fff, 1888px 1547px #fff,
    899px 1226px #fff, 1887px 580px #fff, 1548px 1092px #fff, 1626px 689px #fff,
    254px 1072px #fff, 1684px 1211px #fff, 672px 1267px #fff, 939px 668px #fff,
    1969px 645px #fff, 1126px 983px #fff, 457px 568px #fff, 476px 876px #fff,
    829px 1896px #fff, 1364px 1846px #fff, 1507px 1120px #fff, 936px 1948px #fff,
    1833px 832px #fff, 1424px 285px #fff, 1377px 1596px #fff, 432px 153px #fff,
    1348px 1410px #fff, 1529px 954px #fff, 1102px 387px #fff, 264px 297px #fff,
    811px 977px #fff, 1931px 673px #fff, 1734px 978px #fff, 1772px 1567px #fff,
    1197px 1400px #fff, 764px 282px #fff, 1103px 822px #fff, 872px 1803px #fff,
    1057px 1763px #fff, 52px 1299px #fff, 1312px 1236px #fff, 235px 1082px #fff,
    299px 1086px #fff, 1017px 1602px #fff, 1950px 626px #fff, 1306px 132px #fff,
    1358px 1618px #fff, 1873px 1718px #fff, 1447px 940px #fff, 1888px 1195px #fff,
    1704px 1765px #fff, 872px 1357px #fff, 1555px 1120px #fff, 250px 1415px #fff,
    450px 415px #fff, 492px 901px #fff, 170px 1641px #fff, 56px 1129px #fff,
    627px 1514px #fff, 1221px 500px #fff, 324px 1895px #fff, 1397px 1775px #fff,
    1966px 598px #fff, 1550px 763px #fff, 326px 1605px #fff, 261px 969px #fff,
    890px 281px #fff, 736px 544px #fff, 589px 1262px #fff, 1581px 368px #fff,
    1900px 1132px #fff, 1914px 585px #fff, 1864px 1517px #fff, 241px 217px #fff,
    859px 787px #fff, 996px 1729px #fff, 741px 121px #fff, 418px 414px #fff,
    142px 967px #fff, 387px 896px #fff, 703px 562px #fff, 968px 1136px #fff,
    1682px 332px #fff, 1287px 846px #fff, 256px 1427px #fff, 1885px 432px #fff,
    1739px 1458px #fff, 345px 1769px #fff, 1140px 1612px #fff, 192px 1921px #fff,
    920px 471px #fff, 834px 881px #fff, 917px 1803px #fff, 466px 1266px #fff,
    483px 1108px #fff, 689px 986px #fff, 1279px 786px #fff, 458px 910px #fff,
    1250px 870px #fff, 785px 1654px #fff, 1543px 1757px #fff, 287px 1272px #fff;
}

@keyframes animStar {
  from { transform: translateY(0px); }
  to { transform: translateY(-2000px); }
}

/* Pause/Resume toggle button */
.btn-toggle-stars {
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 1000;
  --color: white;
  --size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: var(--size);
  user-select: none;
  fill: var(--color);
}

.btn-toggle-stars input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.btn-toggle-stars .play {
  position: absolute;
  display: none;
  animation: toggleStarsFill 0.6s;
}

.btn-toggle-stars .pause {
  position: absolute;
  animation: toggleStarsFill 0.6s;
}

/* When checkbox is checked (stars paused) → show play, hide pause */
.btn-toggle-stars input:checked ~ .play {
  display: block;
}

.btn-toggle-stars input:checked ~ .pause {
  display: none;
}

@keyframes toggleStarsFill {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
}


/* Files Section */
.files-bg {
  background-color: #0d6dfd3b !important;
}

/* ── Modern Files Page ── */
.files-upload-zone {
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 8px;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.files-upload-zone:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.03);
}

.files-upload-zone.help-upload-zone {
  max-width: 420px;
  margin: 0 auto;
  padding: 0.8rem;
}

.files-upload-zone.help-upload-zone .files-drop-label {
  padding: 1rem 0.85rem;
}

.files-upload-zone.help-upload-zone .files-upload-icon {
  font-size: 1.4rem;
}

.files-upload-zone.help-upload-zone .files-drop-text {
  font-size: 0.93rem;
}

.files-upload-zone.help-upload-zone .files-drop-hint {
  font-size: 0.72rem;
}

.files-drop-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.3s ease;
}

.files-drop-label:hover {
  background: rgba(255, 255, 255, 0.04);
}

.files-drop-label.has-file {
  background: rgba(23, 62, 110, 0.25);
  border-color: rgba(13, 109, 253, 0.4);
}

.files-drop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.files-upload-icon {
  font-size: 2rem;
  opacity: 0.4;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.files-drop-label:hover .files-upload-icon {
  opacity: 0.7;
  transform: translateY(-2px);
}

.files-drop-text {
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.7;
}

.files-drop-hint {
  font-size: 0.75rem;
  opacity: 0.35;
}

.files-upload-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.files-chosen-name {
  font-size: 0.8rem;
  opacity: 0.5;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.files-upload-btn {
  border: none;
  outline: none;
  background-color: #173e6e;
  padding: 10px 24px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: all ease 0.15s;
  box-shadow: 0px 4px 0px 0px #0f2846;
}

.files-upload-btn:hover {
  background-color: #1d4f8a;
}

.files-upload-btn:active {
  transform: translateY(4px);
  box-shadow: 0px 0px 0px 0px #0f2846;
}

.files-list-header {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.files-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.file-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.5s ease, transform 0.5s ease;
}

.file-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
}

.file-card-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.file-card-icon {
  font-size: 1.4rem;
  opacity: 0.45;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}

.file-card-info {
  flex: 1;
  min-width: 0;
}

.file-card-name {
  font-weight: 600;
  font-size: 0.9rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-card-meta {
  font-size: 0.75rem;
  opacity: 0.4;
  margin-top: 2px;
}

.file-card-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.ticket-card {
  border-radius: 12px;
}

.ticket-screenshots-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ticket-screenshot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.ticket-screenshot-thumb {
  width: 80px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1px solid rgba(255,255,255,0.12);
}

.ticket-screenshot-thumb.expanded {
  width: 240px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

.file-download-btn {
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.file-download-btn:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.2));
  box-shadow: 0 4px rgba(255, 255, 255, 0.15);
  transform: translateY(-4px);
  color: #fff;
}

.file-download-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

/* Share action buttons (link + share-with) */
.file-action-btn {
  color: rgba(110, 168, 254, 0.7);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 109, 253, 0.06);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.file-action-btn:hover {
  border-color: rgba(13, 109, 253, 0.4);
  background: rgba(13, 109, 253, 0.12);
  color: #6ea8fe;
  box-shadow: 0 4px rgba(13, 109, 253, 0.2);
  transform: translateY(-4px);
}

.file-action-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

.file-delete-btn {
  color: rgba(220, 53, 69, 0.7);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 53, 69, 0.06);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.file-delete-btn:hover {
  border-color: rgba(220, 53, 69, 0.5);
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
  box-shadow: 0 4px rgba(220, 53, 69, 0.2);
  transform: translateY(-4px);
}

.file-delete-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

.file-confirm-delete {
  margin-top: 0.5rem;
  padding: 0.5rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.files-empty-icon {
  font-size: 3rem;
  opacity: 0.2;
}


/* === NAVBAR (keep your previous hover fixes if you like) === */
.navbar {
  backdrop-filter: blur(12px);
  border-bottom: 0px solid rgba(255, 255, 255, 0.08);
}

.navbar-nav {
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 640px) {
  .navbar-nav {
    gap: 0.5rem;
  }
}

.bell-nav-link {
  text-decoration: none !important;
  color: inherit;
}

.user-auth-block {
  gap: 1rem;
}

.user-auth-block .logout-link {
  margin-left: 0.75rem;
}

.nav-link {
  --animation-color: #37FF8B;
  border-radius: 0 !important;
  padding: 1rem 1.5rem !important;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: "Arial", sans-serif;
  color: #ffffff !important;
}

/* Hover text sweep effect — color fills left-to-right, reverses on dehover */
.nav-link .hover-text {
  position: absolute;
  color: var(--animation-color);
  inset: 0;
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 700;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s ease, filter 0.4s ease;
  filter: drop-shadow(0 0 0px var(--animation-color));
}

.nav-link:hover .hover-text {
  clip-path: inset(0 0 0 0);
  filter: drop-shadow(0 0 10px var(--animation-color));
}

/* === PAGE FADE TRANSITIONS === */
/* NOTE: no `forwards` on the fade-IN rules. A forwards-filling opacity/transform
   animation keeps a stacking context on .page-content even after it finishes,
   which traps Bootstrap modals (backdrop is appended to <body>) underneath the
   backdrop and makes them un-clickable. The fade-in keyframe ends on the element's
   default values (opacity:1; transform:none), so dropping `forwards` leaves the
   exact same visual result — just without the lingering stacking context. */
.page-content {
  animation: pageFadeIn 0.4s ease;
}

.page-content.fade-in {
  animation: pageFadeIn 0.4s ease;
}

/* fade-OUT keeps `forwards` so the old content stays hidden until the swap. */
.page-content.fade-out {
  animation: pageFadeOut 0.3s ease forwards;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  /* End on `transform: none` (NOT translateY(0)) so the forwards-retained
     value does not leave a stacking context / fixed-positioning containing
     block on .page-content — that would trap Bootstrap modals (whose backdrop
     is appended to <body>) and make them un-clickable. */
  to   { opacity: 1; transform: none; }
}

@keyframes pageFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}

/* === STUDENT MANAGEMENT === */
.student-mgmt-header {
  background: #051b38;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* === ACTIVITY LOG TERMINAL === */
.log-terminal {
  background: #0a0e17;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.82rem;
  max-height: 70vh;
  overflow-y: auto;
  padding: 12px 16px;
}

.log-entry {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  line-break: anywhere;
}

.log-time {
  color: #666;
  margin-right: 8px;
}

.log-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-right: 8px;
  text-transform: uppercase;
}

.log-badge-auth     { background: #1a3a5c; color: #5bb8ff; }
.log-badge-student  { background: #1a3c2a; color: #5bffa0; }
.log-badge-report   { background: #3c3a1a; color: #ffe85b; }
.log-badge-admin    { background: #3c1a1a; color: #ff5b5b; }
.log-badge-config   { background: #2a1a3c; color: #b05bff; }
.log-badge-general  { background: #1a2a2a; color: #5bffda; }

.log-user {
  color: #7cb3ff;
  margin-right: 6px;
}

.log-action {
  color: #ddd;
}

.log-details {
  color: #888;
  font-style: italic;
}

/* === SEND REPORT BUTTON === */
.btn-send-report {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid #fff;
  border-radius: 12px;
  color: #fff;
  font-weight: 900;
  background: #000;
  text-transform: uppercase;
  padding: 14px 32px;
  font-size: 0.95rem;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  isolation: isolate;
  transition: color 0.7s ease, background 0.7s ease;
}

.btn-send-report::before {
  content: '';
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  left: -100%;
  border-radius: 50%;
  background: #fff;
  z-index: -1;
  transition: all 0.7s ease;
  transform: scale(0);
}

.btn-send-report:hover::before {
  left: 0;
  transform: scale(1.5);
}

.btn-send-report:hover {
  color: #000;
  background: #fff;
}

.btn-send-report:hover .btn-send-icon {
  fill: #000;
}

.btn-send-report:active {
  transform: scale(0.95);
  transition-duration: 0s;
}

.btn-send-text {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.btn-send-processing {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-200%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.btn-send-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.6s linear infinite;
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

.btn-send-icon {
  fill: #fff;
  transition: fill 0.7s ease, transform 0.3s ease, opacity 0.3s ease;
}

/* Processing state */
.btn-send-report.sending .btn-send-text {
  transform: translateX(200%);
  opacity: 0;
}

.btn-send-report.sending .btn-send-processing {
  transform: translateX(0);
  opacity: 1;
}

.btn-send-report.sending .btn-send-icon {
  transform: translateX(200%);
  opacity: 0;
}

.btn-send-report.sending {
  pointer-events: none;
  background: #fff;
  color: #000;
}

.btn-send-report.sending::before {
  left: 0;
  transform: scale(1.5);
}

/* === LOGIN / REGISTER CARD === */
.auth-container {
  max-width: 420px;
  margin: 1rem auto 1rem;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: background 0.4s, border-color 0.4s;
}

.pw-toggle {
  border-color: rgba(255,255,255,0.15);
  color: #8b949e;
}
.pw-toggle:hover,
.pw-toggle:focus {
  color: #c9d1d9;
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
}

/* Light mode card – commented out, always dark mode now
.auth-container-mode {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #212529;
  margin-bottom:5vw;
  align-self: center;
}
*/

/* Dark mode card – always active */
.auth-container-mode {
  background: #161b22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c9d1d9;
  margin-bottom:5vw;
  align-self: center;
}

/* Inputs - inherit from card, no forced dark bg */
.form-control {
  background: inherit;
  border-color: rgba(128, 128, 128, 0.4);
  color: inherit;
  height: 50px;
  border-radius: 10px;
  transition: border-color 0.3s;
}

.form-control:focus {
  border-color: #0d6dfd3b;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Labels */
.form-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: inherit;
}

/* Buttons */

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus {
  box-shadow: none !important;
  outline: none !important;
}

.btn-primary, .btn-success {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.05rem;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: #0d6dfd3b !important;
  border-color: #0d6dfd3b !important;
  color: #fff !important;
}

.btn-primary:hover {
  background-color: #0d6dfd3b !important;
  border-color: #0d6dfd3b !important;
  box-shadow: 0 10px 20px rgba(13, 109, 253, 0.3);
}

.btn-outline-primary {
  color: #7aaafd !important;
  border-color: #0d6dfd3b !important;
}

.btn-outline-primary:hover {
  background-color: #0d6dfd3b !important;
  border-color: #0d6dfd3b !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(13, 109, 253, 0.3);  
}

.bg-primary {
  background-color: #0d6dfd3b !important;
}

.bg-info {
  background-color: #0d6dfd3b !important;
}

.text-primary {
  color: #7aaafd !important;
}

.text-info {
  color: #7aaafd !important;
}

.border-primary {
  border-color: #0d6dfd3b !important;
}

.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px #0d6dfd3b;
}

.btn-login {
  background-color:#0d6dfd3b;
  color: #fff;
  height: 50px;
  font-size: 1.05rem;
  border-radius: 10px;
  transition: all 0.2s ease;
  margin-top: 1rem;
  border: none ;
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 5px #0d6dfd3b;
  box-shadow: 0 0 15px #1d5391;
  font-weight:bolder;
}

.btn-login:active {
  transform: translateZ(50px)
}

.btn-register {
  background-color:rgb(25, 121, 30);
  height: 50px;
  font-size: 1.05rem;
  border-radius: 10px;
  transition: all 0.2s ease;
  margin-top: 1rem;
  border: none ;
}

.btn-register:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 5px rgba(2, 59, 7, 0.979);
  box-shadow: 0 0 15px #2da029c0;
  font-weight:bolder;
}

.btn-register:active {
  transform: translateZ(50px)
}

/* ── Lexion loading animation (button + overlay) ── */
.lex-loader {
  display: inline-flex;
  gap: 0.18em;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-family: inherit;
  user-select: none;
}
.lex-loader span {
  display: inline-block;
  opacity: 0.25;
  animation: lex-pulse 1.2s ease-in-out infinite;
}
.lex-loader span:nth-child(1) { animation-delay: 0.00s; }
.lex-loader span:nth-child(2) { animation-delay: 0.12s; }
.lex-loader span:nth-child(3) { animation-delay: 0.24s; }
.lex-loader span:nth-child(4) { animation-delay: 0.36s; }
.lex-loader span:nth-child(5) { animation-delay: 0.48s; }
.lex-loader span:nth-child(6) { animation-delay: 0.60s; }

@keyframes lex-pulse {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0) scale(1); }
  30%           { opacity: 1;    transform: translateY(-3px) scale(1.15); }
}

/* Inline (in-button) variant — inherits button color */
.btn-login .lex-loader,
.btn-register .lex-loader {
  font-size: 1.1rem;
  color: #fff;
}

/* Disable button while submitting */
.btn-loading {
  pointer-events: none;
  opacity: 0.85;
  cursor: wait;
}

/* Full-screen overlay */
#lex-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease-in-out, backdrop-filter 0.7s ease-in-out;
}
#lex-loading-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
#lex-loading-overlay .lex-loader {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.6s ease-in-out 0.1s, transform 0.6s ease-in-out 0.1s;
}
#lex-loading-overlay.is-visible .lex-loader {
  opacity: 1;
  transform: scale(1);
}
#lex-loading-overlay .lex-loader {
  font-size: 2.6rem;
  color: #e8eef7;
  text-shadow: 0 0 18px rgba(13, 109, 253, 0.55);
}
#lex-loading-overlay .lex-loading-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
#lex-loading-overlay .lex-loading-msg {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 238, 247, 0.55);
  font-weight: 400;
  user-select: none;
}


.btn-config_user {
  background-color: #0d6dfd3b;
  height: 35px;
  width: 70px;
  border: none;
  text-align: center;
    /* The centering magic */
  justify-content: center;     /* horizontal center */
  color: white;                /* ← add this — dark bg needs light text */
}

.btn-config_user:hover{
  background-color: #0f2846;
  color: white; 
}


.btn-general {
    background-color: #0d6dfd3b;
    color: white;                /* ← add this — dark bg needs light text */
    height: 30px;
    width: 90px;
    border: none;
    border-radius: 4px;          /* ← optional but looks much nicer */
    
    /* The centering magic */
    display: flex;
    align-items: center;         /* vertical center */
    justify-content: center;     /* horizontal center */
    
    /* Optional improvements */
    font-size: 14px;
    cursor: pointer;
}

.btn-general:hover {
    background-color: #0f2846;   /* darker on hover */
    color: white; 
}

.btn-asign {
  background-color: #0d6dfd3b;
  color: white;                /* ← add this — dark bg needs light text */
  height: 30px;
  width: 90px;
  border: none;
  border-radius: 4px;          /* ← optional but looks much nicer */
  
  /* The centering magic */
  display: flex;
  align-items: center;         /* vertical center */
  justify-content: center;     /* horizontal center */
  
  /* Optional improvements */
  font-size: 14px;
  cursor: pointer;
}


/* End of buttons */
/* Cards */

.guider-card {
    transition: all 0.2s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.guider-card:hover {
    border: 2px solid #6c757d;
    box-shadow: 0 0 15px rgba(108, 117, 125, 0.4);
}

.guider-card.selected {
    border: 4px solid #28a745 !important;
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.6);
}

.guider_confi {
    height: 200px; /* Set a fixed height for all card-body sections */
    overflow-y: auto; /* Enable vertical scrolling */
}

/* End of Cards */
/* Theme switch – commented out, always dark mode now
.theme-switch {
  cursor: pointer;
  font-size: 1.3rem;
  margin-top: 0rem;
}
*/

/* Title */
.auth-title {
  text-align: center;
  margin-bottom: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: inherit;
}

/* ── Auth mode toggle (switch + animated label) ── */
.auth-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Equal-width slots flank the switch so it stays perfectly centred */
.auth-label-slot {
  width: 5.5rem;
  height: 2em;
  font-size: 17px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}
/* Left slot: text presses against the switch */
#auth-slot-left  { justify-content: flex-end; }
/* Right slot: text presses against the switch */
#auth-slot-right { justify-content: flex-start; }

.auth-mode-text {
  font-weight: 700;
  font-size: 1rem;
  color: #c9d1d9;
  white-space: nowrap;
  display: inline-block;
}

/* ── Label slide animations ── */
/* Left-slot exits: text flies right into the switch */
@keyframes auth-exit-right {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(120%);  opacity: 0; }
}
/* Right-slot exits: text flies left into the switch */
@keyframes auth-exit-left {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-120%); opacity: 0; }
}
/* Left-slot enters: text peeks out of switch's left side (comes from right) */
@keyframes auth-enter-right {
  from { transform: translateX(120%);  opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
/* Right-slot enters: text peeks out of switch's right side (comes from left) */
@keyframes auth-enter-left {
  from { transform: translateX(-120%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.auth-label-exit-right  { animation: auth-exit-right  0.22s ease forwards; }
.auth-label-exit-left   { animation: auth-exit-left   0.22s ease forwards; }
.auth-label-enter-right { animation: auth-enter-right 0.28s ease forwards; }
.auth-label-enter-left  { animation: auth-enter-left  0.28s ease forwards; }

/* ── Form content slides up when switching modes ── */
@keyframes auth-form-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.auth-form-entering {
  animation: auth-form-enter 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ── Uiverse toggle switch ── */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
  transform-style: preserve-3d;
  perspective: 500px;
  flex-shrink: 0;
}

.switch::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  filter: blur(18px);
  z-index: -1;
  border-radius: 50px;
  /* Subtle blue glow to match the site accent */
  background: radial-gradient(ellipse at 30% 60%, rgba(13,109,253,0.45) 0%, transparent 70%),
              radial-gradient(ellipse at 70% 40%, rgba(13,109,253,0.25) 0%, transparent 70%);
  transition: background 0.4s;
}

/* Shift glow to green when checked (register) */
.input__check:checked ~ .switch::before,
.switch:has(.input__check:checked)::before {
  background: radial-gradient(ellipse at 30% 60%, rgba(25,121,30,0.5) 0%, transparent 70%),
              radial-gradient(ellipse at 70% 40%, rgba(25,121,30,0.3) 0%, transparent 70%);
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Unchecked (Login): dark track with blue tint */
  background-color: #1a2744;
  border: 1px solid rgba(13,109,253,0.45);
  transition: background-color .4s, border-color .4s, box-shadow .4s;
  border-radius: 30px;
  box-shadow: inset 0 0 8px rgba(13,109,253,0.15);
}

.slider::before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  left: 0.3em;
  bottom: 0.3em;
  transition: transform .4s, background-color .4s;
  border-radius: 50%;
  /* Knob: site blue (#0d6efd) */
  background-color: #3b82f6;
  box-shadow: 0 0 8px rgba(59,130,246,0.6), 0 2px 4px rgba(0,0,0,0.4);
}

.input__check:checked + .slider {
  /* Checked (Register): green track */
  background-color: #0d2b10;
  border-color: rgba(25,121,30,0.6);
  box-shadow: inset 0 0 8px rgba(25,121,30,0.2);
}

.input__check:checked + .slider::before {
  transform: translateX(1.5em);
  /* Knob turns green */
  background-color: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.6), 0 2px 4px rgba(0,0,0,0.4);
}

/* ── Donate page preset buttons ── */
.donate-preset-btn {
  padding: 0.4rem 1rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #c9d1d9;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.donate-preset-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
  transform: translateY(-1px);
}
.donate-preset-btn.active {
  background: rgba(13,109,253,0.2);
  border-color: #0d6dfd;
  color: #6ea8fe;
  font-weight: 600;
}

/* Link text */
.text-muted a {
  color: #3b82f6;
  text-decoration: none;
}

.text-muted a:hover {
  text-decoration: underline;
}

.btn-outline-danger{
  color: #dc3545;
  border-color: #dc3545;
  --bs-btn-color:#dc3545;
  --bs-btn-border-color:#dc3545;
  --bs-btn-hover-color:#d83b3bde;
  --bs-btn-hover-bg:#4e1319;
  --bs-btn-hover-border-color:#dc3545;
  --bs-btn-focus-shadow-rgb:220,53,69;
  --bs-btn-active-color:#220000;
  --bs-btn-active-bg:#dc3545;
  --bs-btn-active-border-color:#dc3545;
  --bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:#dc3545;
  --bs-btn-disabled-bg:transparent;
  --bs-btn-disabled-border-color:#dc3545;
  --bs-gradient:none
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #25080b;
  border-color: #701b24;
}

.btn-general-profile-view {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid transparent;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.2rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-general-profile-view:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.2));
  box-shadow: 0 4px rgba(255, 255, 255, 0.15);
  transform: translateY(-4px);
  color: #fff;
}

.btn-general-profile-view:active {
  transform: translateY(2px);
  box-shadow: none;
}

.label-bg-general {
  background-color:#051b38;
}

.admin-profile-card {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(23,62,110,0.45);
  background: linear-gradient(160deg, #0d1b2e 0%, #0d1117 100%);
}

.admin-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0d6efd, #1d74ff);
  box-shadow: 0 0 0 0 rgba(13,109,253,0.25);
  position: relative;
  animation: admin-pulse-glow 2.8s ease-in-out infinite;
}

@keyframes admin-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13,109,253,0.28); }
  50% { box-shadow: 0 0 0 18px rgba(13,109,253,0.08); }
}

.admin-profile-name {
  font-size: 1.6rem;
}

.admin-profile-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #9bb3ff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

.admin-action-group {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  padding: 1rem;
}

.admin-action-label {
  color: #8aa9ff;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

.admin-action-btn {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  justify-content: flex-start;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  text-align: left;
  font-weight: 500;
}

.admin-action-btn i {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: #9fc5ff;
}

.admin-action-btn:hover i {
  color: #fff;
}

.admin-action-btn-danger {
  background: rgba(220,53,69,0.08);
  border-color: rgba(220,53,69,0.25) !important;
}

.admin-delete-zone {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.25rem;
}

.admin-profile-tile {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 1.35rem;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.admin-profile-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(13,110,253,0.4);
  background: rgba(13,110,253,0.08);
}

.tile-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,110,253,0.16);
  color: #0d6efd;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.tile-label {
  color: #a3b1d6;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.tile-value {
  color: #f8fafc;
  font-size: 1.4rem;
  font-weight: 700;
}

.admin-profile-card .border-end {
  border-color: rgba(255,255,255,0.08) !important;
}

@media (max-width: 991px) {
  .admin-profile-card .border-end {
    border-color: transparent !important;
  }
}


/* === STRONGER NAVBAR HOVER FIX === */

/* Remove Bootstrap's weak hover/focus that causes gray flash */
.nav-link:focus,
.nav-link:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Old light/dark hover blocks – replaced by sweep effect above */

/* === GENDER BADGES === */
/* Male Badge/Label */
.badge-male {
  background-color: #0d6dfd3b;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
  border-radius: 1rem;
  display: inline-block;
}

/* Female Badge/Label */
.badge-female {
  background-color: #0d6dfd3b;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
  border-radius: 1rem;
  display: inline-block;
}

/* === GUIDER CONFIG PAGE === */
.guider-config-scrollable {
  max-height: 600px;
  overflow-y: auto;
}

.assign-btn-nowrap {
  white-space: nowrap;
}

.guider-card {
  transition: all 0.18s ease;
  cursor: pointer;
}

.guider-card:hover {
  background: rgba(13, 110, 253, 0.12);
  border-color: rgba(13, 110, 253, 0.35);
}

.guider-card.selected {
  background: rgba(13, 110, 253, 0.18);
  border-color: rgba(13, 110, 253, 0.5);
  box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.3);
}

.guider-card.selected .assign-item-name {
  color: #fff;
  font-weight: 600;
}

.guider-card.selected .badge {
  background-color: rgba(13, 110, 253, 0.3) !important;
  color: #fff !important;
}

/* Guider List Card Styling */
.guider-list-card {
  transition: all 0.3s ease !important;
  border: 2px solid transparent !important;
}

.guider-list-card.highlight {
  border: 2px solid rgba(13, 110, 253, 0.5) !important;
  box-shadow: 0 0 20px rgba(13, 109, 253, 0.3) !important;
}

/* Assign Button – always dark mode now */
.assign-btn {
  transition: all 0.2s ease !important;
  background-color: #0d6dfd3b !important;
  border-color: #0d6dfd3b !important;
  color: #e6edf3 !important;
  font-weight: 600 !important;
}

.assign-btn:hover {
  background-color: #0d6dfd3b !important;
  border-color: #0d6dfd3b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(13, 109, 253, 0.5) !important;
}

.assign-btn:active {
  transform: translateY(0) !important;
}

/* Cancel Button – always dark mode now */
.assign-btn.btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  animation: pulse-danger 1.5s ease-in-out infinite !important;
}

.assign-btn.btn-danger:hover {
  background-color: #e85555 !important;
  border-color: #e85555 !important;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5) !important;
}

/* Remove Button Styling */
.remove-btn {
  transition: all 0.2s ease !important;
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: white !important;
}

.remove-btn:hover {
  background-color: #c82333 !important;
  border-color: #bd2130 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3) !important;
}

.remove-btn:active {
  transform: translateY(0) !important;
}

/* Dark Mode - Remove Button */
[data-bs-theme="dark"] .remove-btn {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

[data-bs-theme="dark"] .remove-btn:hover {
  background-color: #e85555 !important;
  border-color: #e85555 !important;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4) !important;
}

/* Pulse Animation for Cancel Button */
@keyframes pulse-danger {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4) !important;
  }
  50% {
    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0) !important;
  }
}

/* Dark Mode - Gender Badges */
[data-bs-theme="dark"] .badge-male {
  background-color: #0d6dfd3b;
  color: #e6edf3;
}

[data-bs-theme="dark"] .badge-female {
  background-color: #0d6dfd3b;
  color: #ffffff;
}

/* Card Header - Golden Style */
.card-header-golden {
  background-color: #0d6dfd3b !important;
  color: #1a1a1a !important;
  font-weight: 600;
  border-bottom: 2px solid #0d6dfd3b !important;
}

.card-header-golden h5 {
  color: #1a1a1a !important;
  font-weight: 600;
}

.card-header-golden small {
  color: rgba(0, 0, 0, 0.7) !important;
}

/* Dark Mode - Golden Header */
[data-bs-theme="dark"] .card-header-golden {
  background-color: #0d6dfd3b !important;
  color: #e6edf3 !important;
  border-bottom: 2px solid #0d6dfd3b !important;
}

[data-bs-theme="dark"] .card-header-golden h5 {
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .card-header-golden small {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* === TOGGLE BUTTON STYLE === */
/* Hidden checkbox */
.toggle-checkbox {
  display: none;
}

/* Toggle Button Container */
.toggle-button {
  display: inline-block;
  padding: 8px 16px;
  min-width: 50px;
  text-align: center;
  border: 2px solid #0d6dfd3b;
  border-radius: 6px;
  background-color: transparent;
  color: #3b82f6;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

/* Toggle Button - Hover State (Unselected) */
.toggle-button:hover {
  background-color: rgba(13, 109, 253, 0.1);
  border-color: #0d6dfd3b;
  transform: translateY(-2px);
}

/* Toggle Button - Active/Selected State */
.toggle-checkbox:checked + .toggle-button {
  background-color: #0d6dfd3b !important;
  color: #1a1a1a !important;
  border-color: #0d6dfd3b !important;
  box-shadow: 0 4px 12px rgba(13, 109, 253, 0.4) !important;
  font-weight: 700;
}

/* Toggle Button - Active Hover */
.toggle-checkbox:checked + .toggle-button:hover {
  background-color: #0d6dfd3b !important;
  box-shadow: 0 6px 16px rgba(13, 109, 253, 0.5) !important;
  transform: translateY(-3px);
}

/* Dark Mode - Toggle Button */
[data-bs-theme="dark"] .toggle-button {
  border-color: #0d6dfd3b;
  color: #6ea8fe;
  background-color: transparent;
}

[data-bs-theme="dark"] .toggle-button:hover {
  background-color: rgba(13, 109, 253, 0.15);
  border-color: #0d6dfd3b;
}

[data-bs-theme="dark"] .toggle-checkbox:checked + .toggle-button {
  background-color: #0d6dfd3b !important;
  color: #e6edf3 !important;
  border-color: #0d6dfd3b !important;
  box-shadow: 0 4px 16px rgba(13, 109, 253, 0.5) !important;
}

[data-bs-theme="dark"] .toggle-checkbox:checked + .toggle-button:hover {
  background-color: #0d6dfd3b !important;
  box-shadow: 0 6px 20px rgba(13, 109, 253, 0.6) !important;
}


/* === ATTENDANCE TOGGLE BUTTONS === */
.attendance-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  min-width: 30px;
  height: 30px;
  border: 2px solid #0d6dfd3b;
  border-radius: 8px;
  background-color: transparent;
  color: #3b82f6;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  padding: 0;
}

/* Checkmark hidden when not active */
.attendance-btn .checkmark {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.attendance-btn.active .checkmark {
  opacity: 1;
}

/* Light mode - normal state */
.attendance-btn {
  background-color: transparent;
  color: rgba(59, 130, 246, 0.3);
  box-shadow: none;
}

/* Light mode - hover */
.attendance-btn:hover:not(.active) {
  border-color: #0d6dfd3b;
  color: rgba(59, 130, 246, 0.5);
  background-color: rgba(13, 109, 253, 0.1);
}

/* Light mode - active/selected state */
.attendance-btn.active {
  background-color: #0d6dfd3b;
  color: #1a1a1a;
  border-color: #0d6dfd3b;
  box-shadow: 0 4px 12px rgba(13, 109, 253, 0.4);
  font-weight: 700;
}

/* Light mode - active hover */
.attendance-btn.active:hover {
  background-color: #0d6dfd3b;
  border-color: #0d6dfd3b;
  box-shadow: 0 6px 16px rgba(13, 109, 253, 0.5);
}

/* Dark mode - normal state */
[data-bs-theme="dark"] .attendance-btn {
  background-color: transparent;
  color: rgba(110, 168, 254, 0.5);
  border-color: rgba(13, 109, 253, 0.3);
}

/* Dark mode - hover */
[data-bs-theme="dark"] .attendance-btn:hover:not(.active) {
  border-color: #0d6dfd3b;
  color: rgba(110, 168, 254, 0.5);
  background-color: rgba(13, 109, 253, 0.15);
}

/* Dark mode - active state */
[data-bs-theme="dark"] .attendance-btn.active {
  background-color: rgba(13, 109, 253, 0.35);
  color: #e6edf3;
  border-color: rgba(13, 109, 253, 0.6);
  box-shadow: 0 4px 12px rgba(13, 109, 253, 0.5), inset 0 0 10px rgba(13, 109, 253, 0.2);
}

/* Dark mode - active hover */
[data-bs-theme="dark"] .attendance-btn.active:hover {
  background-color: rgba(13, 109, 253, 0.45);
  border-color: rgba(13, 109, 253, 0.7);
  box-shadow: 0 6px 16px rgba(13, 109, 253, 0.6), inset 0 0 10px rgba(13, 109, 253, 0.3);
}

/* Disabled state */
.attendance-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Week-locked / disabled column styles */
.week-locked {
  opacity: 0.45;
  position: relative;
}

.attendance-btn.week-disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
  background: #e9ecef;
  color: #adb5bd;
  border-color: #dee2e6;
}

[data-bs-theme="dark"] .attendance-btn.week-disabled {
  background: #2a2a2a;
  color: #555;
  border-color: #444;
}

/* === PROGRESS TABLE STYLING === */
.progress-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
}

.progress-table thead {
  background-color: #0d6dfd3b !important;
}

.progress-table thead th {
  color: #1a1a1a;
  font-weight: 600;
  border: none !important;
  padding: 1rem !important;
  background-color: #0d6dfd3b;
}

.progress-table tbody tr {
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  transition: background-color 0.2s ease;
}

.progress-table tbody tr:hover {
  background-color: rgba(13, 109, 253, 0.05);
}

.progress-table tbody td {
  border: none !important;
  padding: 1rem !important;
  vertical-align: middle;
}

.progress-table tbody td:first-child {
  text-align: center !important;
  font-weight: 600;
}

.progress-table tbody tr:last-child {
  border-bottom: none !important;
}

/* Dark Mode - Progress Table */
[data-bs-theme="dark"] .progress-table thead th {
  background-color: #0d6dfd3b;
  color: #e6edf3;
}

[data-bs-theme="dark"] .progress-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(13, 17, 23, 0.6);
}

[data-bs-theme="dark"] .progress-table tbody tr:hover {
  background-color: rgba(13, 109, 253, 0.08);
}

/* Transparent alert styling */
.alert-info {
  background-color: transparent !important;
  border: none !important;
  color: inherit;
}

/* ═══════════════════════════════════════════════
   PROGRESS FORM – Card Headers & Inputs
   ═══════════════════════════════════════════════ */

.progress-table-header {
  background-color: #9c7709 !important;
  color: #1a1a1a !important;
  font-weight: 600;
  border-bottom: 2px solid #0d6dfd3b !important;
}

.progress-table-header h5 {
  color: #1a1a1a !important;
  font-weight: 600;
}

[data-bs-theme="dark"] .progress-table-header {
  background-color: #0d6dfd3b !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .progress-table-header h5 {
  color: #e6edf3 !important;
}

/* Lesson number input */
.lesson-input {
  text-align: center;
  font-weight: 600;
  border: 2px solid #0d6dfd3b !important;
  border-radius: 8px !important;
}

.lesson-input:focus {
  border-color: #0d6dfd3b !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 109, 253, 0.25) !important;
}

/* Book dropdown */
.book-select {
  border: 2px solid #0d6dfd3b !important;
  border-radius: 8px !important;
  font-size: 0.9rem;
}

.book-select:focus {
  border-color: #0d6dfd3b !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 109, 253, 0.25) !important;
}

[data-bs-theme="dark"] .lesson-input,
[data-bs-theme="dark"] .book-select {
  background-color: #161b22;
  color: #c9d1d9;
  border-color: #0d6dfd3b !important;
}

/* === DARK THEME SELECT DROPDOWNS === */
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] select {
  background-color: #0d1117;
  color: #c9d1d9;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .form-select option,
[data-bs-theme="dark"] select option {
  background-color: #161b22;
  color: #c9d1d9;
}

[data-bs-theme="dark"] .form-select option:disabled,
[data-bs-theme="dark"] select option:disabled {
  color: #6b7280;
}

[data-bs-theme="dark"] .form-select option:hover,
[data-bs-theme="dark"] select option:hover,
[data-bs-theme="dark"] .form-select option:focus,
[data-bs-theme="dark"] select option:focus,
[data-bs-theme="dark"] .form-select option:checked,
[data-bs-theme="dark"] select option:checked {
  background-color: #1a3a5c;
  color: #ffffff;
}


/* Sleepover button – Yes/No pair */
.sleepover-btn {
  width: auto;            /* override .attendance-btn's 30% */
  min-width: 60px;
  height: 36px;           /* slightly taller than the 30px base for a cleaner pill */
  padding: 0 14px;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Lesson-type button – Online / In Person / Hybrid trio.
   Until now this had NO custom CSS and inherited `.attendance-btn`'s
   `width: 30%; height: 30px; font-size: 1.2rem`. On a narrow flex row
   that squeezed "In Person" onto two lines and looked nothing like the
   sibling Sleepover Yes/No pair. Match the sleepover look but give
   "In Person" enough horizontal room to stay on one line. */
.lesson-type-btn {
  width: auto;
  min-width: 84px;        /* fits "In Person" comfortably without wrapping */
  height: 36px;
  padding: 0 16px;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Tighten the in-table attendance (✓) button. The base `.attendance-btn`
   uses `width: 30%; height: 30px`, which on a wide single-column table
   cell stretches the button to 180-200 px and dwarfs the date header
   above it. Cap the width and bump the height a touch so the proportions
   match the screenshot the user expected. The percentage stays so mobile
   (narrow cells) still gives a comfortable tap target. */
.progress-table .attendance-btn {
  width: 35%;
  max-width: 180px;
  height: 40px;
}

/* Give the week column header ("Jun W1 (1-7)") more visual weight so it
   reads as a real label instead of a thin caption tucked above the ✓. */
.progress-table thead th#weekColumnHeader {
  font-size: 0.95rem;
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
  letter-spacing: 0.01em;
}

/* Mobile — keep the in-table button comfortably tappable. */
@media (max-width: 575.98px) {
  .progress-table .attendance-btn {
    width: 55%;
    max-width: 160px;
    height: 38px;
  }
  .lesson-type-btn,
  .sleepover-btn {
    min-width: 76px;
    height: 34px;
    padding: 0 12px;
  }
}

/* Sleepover buttons - unselected dim */
[data-bs-theme="dark"] .sleepover-btn:not(.active) {
  opacity: 0.6;
}

[data-bs-theme="dark"] .sleepover-btn.active {
  opacity: 1;
  background-color: rgba(13, 109, 253, 0.4);
  border-color: rgba(13, 109, 253, 0.7);
  color: #fff;
  box-shadow: 0 4px 14px rgba(13, 109, 253, 0.5);
}

.fw-500 {
  font-weight: 500;
}

/* ═══════════════════════════════════════════════
   GUIDER REPORTS – Home Page Mentor List
   ═══════════════════════════════════════════════ */

.guider-reports-section {
  max-width: 700px;
  margin: 0 auto;
}

.report-mentor-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}

.report-mentor-item {
  padding: 1rem 1.3rem;
  background: #fff;
  color: #212529;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.2s ease, transform 0.15s ease;
  cursor: pointer;
}

.report-mentor-item:last-child {
  border-bottom: none;
}

.report-mentor-item:hover {
  background: #fffbf0;
  transform: translateX(4px);
  color: #212529;
}

.report-mentor-name {
  font-weight: 600;
  font-size: 1rem;
}

.report-unread-badge {
  background: #0d6dfd3b;
  color: #1a1a1a;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 1rem;
  letter-spacing: 0.02em;
}

.report-date-label {
  font-size: 0.82rem;
  opacity: 0.55;
  white-space: nowrap;
}

/* Dark mode – mentor list */
[data-bs-theme="dark"] .report-mentor-list {
  border-color: rgba(255,255,255,0.08);
}

[data-bs-theme="dark"] .report-mentor-item {
  background: #161b22;
  color: #c9d1d9;
  border-bottom-color: rgba(255,255,255,0.06);
}

[data-bs-theme="dark"] .report-mentor-item:hover {
  background: #1c2333;
  color: #e6edf3;
}

[data-bs-theme="dark"] .report-unread-badge {
  background: #0d6dfd3b;
  color: #e6edf3;
}

/* ═══════════════════════════════════════════════
   MENTOR REPORTS PAGE – Expandable Cards
   ═══════════════════════════════════════════════ */

.reports-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.report-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  cursor: pointer;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.report-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-color: rgba(255,193,7,0.3);
}

.report-card-header {
  padding: 0.9rem 1.2rem;
  user-select: none;
}

.report-icon {
  color: #7a5d05;
  font-size: 1rem;
}

[data-bs-theme="dark"] .report-icon {
  color: #d4a844;
}

.report-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.report-time {
  font-size: 0.8rem;
  opacity: 0.5;
}

.report-chevron {
  font-size: 0.75rem;
  opacity: 0.4;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.report-card.open .report-chevron {
  transform: rotate(180deg);
}

/* Expandable body */
.report-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s ease;
  padding: 0 1.2rem;
}

.report-card.open .report-card-body {
  max-height: 800px;
  padding: 0 1.2rem 1rem;
}

.report-content {
  padding-top: 0.4rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Student sections inside report */
.report-student-section {
  margin-bottom: 0.8rem;
}

.report-student-section:last-child {
  margin-bottom: 0;
}

.report-student-name {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  color: #3b82f6;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.report-values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  padding-left: 1.1rem;
}

.report-value-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.2rem 0;
}

.report-value-label {
  font-weight: 500;
  opacity: 0.65;
  min-width: 30px;
}

.report-value-answer {
  font-weight: 600;
}

/* Dark mode – report cards */
[data-bs-theme="dark"] .report-card {
  background: #161b22;
  border-color: rgba(255,255,255,0.08);
}

[data-bs-theme="dark"] .report-card.report-reviewed {
  border-left: 3px solid rgba(25, 135, 84, 0.5);
}

[data-bs-theme="dark"] .report-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  border-color: rgba(255,193,7,0.25);
}

.fs-065 { font-size: 0.65rem; }
.opacity-60 { opacity: 0.6; }

[data-bs-theme="dark"] .report-content {
  border-top-color: rgba(255,255,255,0.06);
}

[data-bs-theme="dark"] .report-student-name {
  color: #6ea8fe;
}

/* Report section labels */
.report-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.45;
  margin-bottom: 0.4rem;
}

.report-quick-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

[data-bs-theme="dark"] .report-quick-info {
  border-bottom-color: rgba(255,255,255,0.06);
}

/* Remove mode – report cards */
.remove-mode .report-card {
  cursor: pointer;
  transition: all 0.2s ease;
}

.remove-mode .report-card:hover {
  border-color: rgba(220, 53, 69, 0.4);
}

.report-card.remove-selected {
  border-color: #dc3545 !important;
  background: rgba(220, 53, 69, 0.08) !important;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25) !important;
}

[data-bs-theme="dark"] .report-card.remove-selected {
  background: rgba(220, 53, 69, 0.15) !important;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.35) !important;
}

/* ── Tree cards (coordinator / admin hierarchy) ── */
.tree-card {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  margin-bottom: 0.6rem;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.tree-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  border-color: rgba(255,193,7,0.3);
}

.tree-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  user-select: none;
}

.tree-chevron {
  transition: transform 0.25s ease;
  opacity: 0.5;
  font-size: 0.8rem;
}

.tree-card.open > .tree-card-header .tree-chevron {
  transform: rotate(180deg);
}

.tree-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding: 0 1rem;
}

.tree-card.open > .tree-card-body {
  max-height: 1200px;
  padding: 0.4rem 1rem 0.75rem;
}

/* Nested tree cards (admin: guider inside coordinator) */
.tree-card-nested {
  border-color: rgba(0,0,0,0.07);
  margin-bottom: 0.4rem;
  background: rgba(0,0,0,0.015);
}

.tree-card-nested .tree-card-header {
  padding: 0.55rem 0.8rem;
  font-size: 0.92rem;
}

.tree-card-nested .tree-card-body {
  padding: 0 0.6rem;
}

.tree-card-nested.open > .tree-card-body {
  padding: 0.3rem 0.6rem 0.5rem;
}

/* Dark mode – tree cards */
[data-bs-theme="dark"] .tree-card {
  background: #161b22;
  border-color: rgba(255,255,255,0.08);
}

[data-bs-theme="dark"] .tree-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  border-color: rgba(255,193,7,0.25);
}

[data-bs-theme="dark"] .tree-card-nested {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}

/* Tree stat counters */
.tree-stat {
  font-size: 0.72rem;
  opacity: 0.55;
  white-space: nowrap;
}

.tree-stat i {
  margin-right: 2px;
  font-size: 0.65rem;
}

/* Visibility badge */
.tree-vis-badge {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,193,7,0.15);
  color: #b8860b;
  white-space: nowrap;
}

[data-bs-theme="dark"] .tree-vis-badge {
  background: rgba(13, 109, 253, 0.15);
  color: #8db4f0;
}

/* Student list inside mentor card */
.tree-student-list {
  padding: 0.3rem 0;
}

.tree-student-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  border-radius: 5px;
}

.tree-student-item:hover {
  background: rgba(0,0,0,0.03);
}

[data-bs-theme="dark"] .tree-student-item:hover {
  background: rgba(255,255,255,0.04);
}

/* === SHAKE ANIMATION (progress validation) === */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-6px); }
    30% { transform: translateX(6px); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
    90% { transform: translateX(2px); }
}
.shake {
    animation: shake 0.5s ease-in-out;
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* === ASSIGN STUDENTS PAGE === */
.assign-header-assigned {
    background: #0a2e14;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.assign-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
}

.assign-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.18s ease;
    user-select: none;
    cursor: pointer;
}

.assign-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.assign-item-name {
    font-size: 0.9rem;
    color: #c9d1d9;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assign-item-action {
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.available-student-row:hover {
    background: rgba(13, 110, 253, 0.12);
    border-color: rgba(13, 110, 253, 0.35);
}

.available-student-row:hover .assign-item-action {
    opacity: 1;
    color: #5ba4ff;
}

.available-student-row.selected {
    background: rgba(13, 110, 253, 0.18);
    border-color: rgba(13, 110, 253, 0.5);
    box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.3);
}

.available-student-row.selected .assign-item-name {
    color: #fff;
}

.available-student-row.selected .assign-item-action {
    opacity: 1;
    color: #5ba4ff;
}

.assigned-student-row:hover {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
}

.assigned-student-row.selected {
    background: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.5);
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.3);
}

.assigned-student-row.selected .assign-item-name {
    color: #fff;
    text-decoration: line-through;
    opacity: 0.7;
}

.assign-remove-btn {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.assign-remove-btn:hover {
    background: rgba(220, 53, 69, 0.35);
    border-color: #dc3545;
    color: #fff;
}

.assigned-student-row.selected .assign-remove-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}

.assign-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #8b949e;
}

.available-student-row td,
.assigned-student-row td {
    vertical-align: middle;
}
.assign-students-table {
    table-layout: fixed;
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    color: #c9d1d9;
}
.assign-students-table thead th {
    background-color: rgba(255, 255, 255, 0.06);
    color: #c9d1d9;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.assign-students-table td {
    border-color: rgba(255, 255, 255, 0.06);
}
.assign-students-table th:first-child,
.assign-students-table td:first-child {
    width: 60%;
}
.assign-students-table th:nth-child(2),
.assign-students-table td:nth-child(2) {
    width: 25%;
}
.assign-students-table th:nth-child(3),
.assign-students-table td:nth-child(3) {
    width: 15%;
}

/* === UTILITY CLASSES (extracted from inline styles) === */

/* Opacity utilities */
.opacity-80 { opacity: 0.8; }
.opacity-70 { opacity: 0.7; }
.opacity-60 { opacity: 0.6; }
.opacity-50 { opacity: 0.5; }
.opacity-45 { opacity: 0.45; }

/* Font size utilities */
.fs-06 { font-size: 0.6rem; }
.fs-065 { font-size: 0.65rem; }
.fs-07 { font-size: 0.7rem; }
.fs-075 { font-size: 0.75rem; }
.fs-078 { font-size: 0.78rem; }
.fs-08 { font-size: 0.8rem; }
.fs-085 { font-size: 0.85rem; }
.fs-09 { font-size: 0.9rem; }
.fs-095 { font-size: 0.95rem; }
.fs-1r { font-size: 1rem; }
.fs-12 { font-size: 1.2rem; }
.fs-14 { font-size: 1.4rem; }
.fs-25 { font-size: 2.5rem; }
.fs-3r { font-size: 3rem; }

/* Icon block (large centered icon) */
.icon-block {
    display: block;
    margin-bottom: 0.8rem;
}
.icon-block-lg {
    display: block;
    margin-bottom: 1rem;
}

/* Crown icon color */
.text-crown { color: #aa8822; }
[data-bs-theme="dark"] .text-crown { color: #d4a844; }

/* Whitespace */
.ws-nowrap { white-space: nowrap; }

/* Student label in tree */
.tree-student-label {
    opacity: 0.45;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

/* Lock icon (week header) */
.week-lock-icon {
    font-size: 0.6rem;
    display: block;
    opacity: 0.5;
    margin-top: 2px;
}

/* Lesson input */
.lesson-input {
    max-width: 80px;
    height: 40px;
}

/* Book select */
.book-select {
    max-width: 340px;
    height: 40px;
}

/* Progress student column */
.progress-student-col {
    width: 20%;
    min-width: 120px;
}

/* Validation message (hidden by default) */
.validation-msg {
    display: none;
}

/* Report link rounded */
.report-link-rounded {
    border-radius: 6px;
}

/* Auto margin left */
.ms-auto-inline { margin-left: auto; }

/* Delete form inline */
.form-inline { display: inline; }

/* Guider config container */
.guider-config-container { max-width: 1400px; }

/* JS-controlled hidden (toggled via JS) */
.js-hidden { display: none; }

/* Student card (mentor students page) */
.student-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Toggle icon transition */
.toggle-icon {
    transition: transform 0.3s ease;
}

/* Tracking options (animated via max-height, starts collapsed) */
.tracking-options {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.3s ease;
}
.tracking-options.open {
    max-height: 4000px;
    opacity: 1;
}

/* Report mentor list no-border variant */
.report-mentor-list-flat {
    border: none;
    padding: 0;
}

/* ── Admin Comment Truncation ── */
.comment-cell {
    max-width: 120px;
    cursor: pointer;
    position: relative;
}

.comment-cell .comment-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.85;
}

.comment-cell .comment-full {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    background: #1a2332;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    min-width: 220px;
    max-width: 350px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    white-space: normal;
    word-break: break-word;
    font-size: 0.82rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.comment-cell.expanded .comment-full {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

/* ── Rounded table corners ── */
.table-rounded {
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
}

.table-rounded thead th:first-child {
    border-top-left-radius: 10px;
}

.table-rounded thead th:last-child {
    border-top-right-radius: 10px;
}

.table-rounded tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.table-rounded tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

/* ── Role Accordion (Manage Users) ── */
.role-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.role-group {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
}

.role-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.2rem;
    cursor: pointer;
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--role-color, #555);
    transition: background 0.2s ease;
    user-select: none;
}

.role-group-header:hover {
    background: rgba(255,255,255,0.07);
}

.role-group-title {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
}

.role-group-count {
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    padding: 2px 8px;
    border-radius: 10px;
}

.role-group-chevron {
    font-size: 0.7rem;
    opacity: 0.4;
    transition: transform 0.3s ease;
}

.role-group.open .role-group-chevron {
    transform: rotate(180deg);
}

.role-group-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.role-group.open .role-group-body {
    max-height: 2000px;
}

.role-user-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.2rem 0.5rem 1.8rem;
    border-top: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s ease;
}

.role-user-row:hover {
    background: rgba(255,255,255,0.03);
}

.role-user-name {
    flex: 0 0 150px;
}

.role-user-input {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    font-size: 0.85rem;
}

.role-user-fields {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}

.role-user-select {
    width: 120px;
    min-width: 100px;
    font-size: 0.8rem;
}

.role-user-save {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.6);
    border-radius: 6px;
    padding: 4px 10px;
    transition: all 0.2s ease;
}

.role-user-save:hover {
    background: #173e6e;
    border-color: #173e6e;
    color: #fff;
}

/* Mobile: let each admin role-group user row scroll horizontally so the
   role/visibility/coordinator/region fields + action buttons stay reachable
   (mirrors the All Users table's horizontal scroll). Desktop is untouched. */
@media (max-width: 767px) {
    /* Parent group must allow horizontal scroll while keeping its expand/collapse
       animation. Using overflow-x: auto + overflow-y: clip preserves max-height
       transition without clipping the row's horizontal content. */
    .role-group.open .role-group-body {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    /* Row stays its natural width so it can be panned horizontally */
    .role-user-row {
        width: max-content;
        min-width: 100%;
    }
    .role-user-name { flex: 0 0 130px; }
    .role-user-fields {
        flex: 0 0 auto;
        justify-content: flex-start;
    }
    .role-user-select { flex: 0 0 auto; }
}

/* ── Unsaved changes indicators ── */
.mod-changed {
    border-color: #e6a919 !important;
    box-shadow: 0 0 0 1px rgba(230, 169, 25, 0.3);
}

.mod-unsaved-warn {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.4) !important;
}

/* ── Delete Button (per-row) ── */
.mod-delete-btn {
    color: rgba(220, 53, 69, 0.5);
    background: transparent;
    border: 1px solid rgba(220, 53, 69, 0.25);
    border-radius: 6px;
    padding: 4px 8px;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.mod-delete-btn:hover {
    color: #fff;
    background: rgba(220, 53, 69, 0.7);
    border-color: rgba(220, 53, 69, 0.8);
    transform: translateY(-1px);
}

.mod-delete-btn.mod-delete-confirm {
    color: #fff;
    background: rgba(220, 53, 69, 0.8);
    border-color: #dc3545;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    white-space: nowrap;
}

/* ── Reset Password Button (per-row) ── */
.mod-reset-pwd-btn {
    color: rgba(230, 169, 25, 0.5);
    background: transparent;
    border: 1px solid rgba(230, 169, 25, 0.25);
    border-radius: 6px;
    padding: 4px 8px;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.mod-reset-pwd-btn:hover {
    color: #fff;
    background: rgba(230, 169, 25, 0.6);
    border-color: rgba(230, 169, 25, 0.8);
    transform: translateY(-1px);
}

.mod-reset-pwd-btn.mod-reset-confirm {
    color: #fff;
    background: rgba(230, 169, 25, 0.7);
    border-color: #e6a919;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    white-space: nowrap;
}

/* ── Revert Button (fade in/out) ── */
.mod-revert-all {
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.3;
    pointer-events: none;
    color: #f8d7da;
    background: transparent;
    border: 1px solid rgba(220, 53, 69, 0.4);
    border-radius: 6px;
    transition: opacity 0.35s ease, transform 0.2s ease, background 0.2s ease;
}

.mod-revert-all.active {
    opacity: 1;
    pointer-events: auto;
}

.mod-revert-all.active:hover {
    background: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.7);
    transform: translateY(-1px);
}

/* ── Save All Button (fade in/out) ── */
.mod-save-all {
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.2s ease;
}

.mod-save-all.active {
    opacity: 1;
    pointer-events: auto;
}

.mod-save-all.active:hover {
    transform: translateY(-1px);
}

/* ── Unsaved Changes Toast ── */
.mod-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #1a2332;
    border: 1px solid rgba(220, 53, 69, 0.5);
    border-radius: 10px;
    padding: 12px 24px;
    color: #f8d7da;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.mod-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.mod-toast-success {
    background: #0d2318;
    border-color: rgba(46, 160, 67, 0.6);
    color: #aff5b4;
}

/* ======= LANGUAGE TOGGLE (EN / TR) ======= */
.checkbox-wrapper-8 .tgl {
  display: none;
}
.checkbox-wrapper-8 .tgl,
.checkbox-wrapper-8 .tgl:after,
.checkbox-wrapper-8 .tgl:before,
.checkbox-wrapper-8 .tgl *,
.checkbox-wrapper-8 .tgl *:after,
.checkbox-wrapper-8 .tgl *:before,
.checkbox-wrapper-8 .tgl + .tgl-btn {
  box-sizing: border-box;
}
.checkbox-wrapper-8 .tgl::-moz-selection,
.checkbox-wrapper-8 .tgl:after::-moz-selection,
.checkbox-wrapper-8 .tgl:before::-moz-selection,
.checkbox-wrapper-8 .tgl *::-moz-selection,
.checkbox-wrapper-8 .tgl *:after::-moz-selection,
.checkbox-wrapper-8 .tgl *:before::-moz-selection,
.checkbox-wrapper-8 .tgl + .tgl-btn::-moz-selection,
.checkbox-wrapper-8 .tgl::selection,
.checkbox-wrapper-8 .tgl:after::selection,
.checkbox-wrapper-8 .tgl:before::selection,
.checkbox-wrapper-8 .tgl *::selection,
.checkbox-wrapper-8 .tgl *:after::selection,
.checkbox-wrapper-8 .tgl *:before::selection,
.checkbox-wrapper-8 .tgl + .tgl-btn::selection {
  background: none;
}
.checkbox-wrapper-8 .tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkbox-wrapper-8 .tgl + .tgl-btn:after,
.checkbox-wrapper-8 .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.checkbox-wrapper-8 .tgl + .tgl-btn:after {
  left: 0;
}
.checkbox-wrapper-8 .tgl + .tgl-btn:before {
  display: none;
}
.checkbox-wrapper-8 .tgl:checked + .tgl-btn:after {
  left: 50%;
}
.checkbox-wrapper-8 .tgl-skewed + .tgl-btn {
  overflow: hidden;
  transform: skew(-10deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.2s ease;
  font-family: sans-serif;
  background: #555;
}
.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after,
.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
  transform: skew(10deg);
  display: inline-block;
  transition: all 0.2s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after {
  left: 100%;
  content: attr(data-tg-on);
}
.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
  left: 0;
  content: attr(data-tg-off);
}
.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active {
  background: #555;
}
.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active:before {
  left: -10%;
}
.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn {
  background: #2a6496;
}
.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:before {
  left: -100%;
}
.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:after {
  left: 0;
}
.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:active:after {
  left: 10%;
}
/* Wrapper positioning in navbar */
.lang-toggle-wrapper {
  display: flex;
  align-items: center;
  font-size: 0.78rem;
}

/* Language switch fade transition.
 *
 * NOTE: `will-change` is intentionally NOT applied to the baseline
 * `.page-content` rule. Listing `opacity`, `filter`, or `transform` in
 * `will-change` creates a stacking context on `.page-content` even when
 * those properties hold their initial values. That stacking context
 * trapped Bootstrap modals (`#shareWithModal`, `#virusModal`) below the
 * `.modal-backdrop` — backdrop sits in <body>'s root context, modal sat
 * inside `.page-content`'s context, so on mobile the whole screen dimmed
 * and nothing inside the modal could be tapped.
 *
 * Apply `will-change` only while the language transition is actually
 * running, so the GPU hint is still there when we need it but the
 * stacking-context trap is gone the rest of the time. */
.page-content {
  transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.lang-switching {
  opacity: 0 !important;
  filter: blur(4px) !important;
  transform: scale(0.985) translateY(-4px) !important;
  transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.2s ease-in-out !important;
  will-change: opacity, filter, transform;
}

/* === PROFILE PAGE TABS === */
.profile-tabs {
  gap: 0.1rem;
}
.profile-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  padding: 0.25rem 0.85rem 0.2rem;
  font-size: 0.87rem;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: color 0.2s, border-color 0.2s;
  outline: none;
}
.profile-tab-btn:hover {
  color: rgba(255, 255, 255, 0.82);
}
.profile-tab-btn.active {
  color: #fff;
  border-bottom: 2px solid #6ea8fe;
}

/* === CUSTOM CHECKBOX (preferences) === */
.custom-checkbox {
  display: inline-flex;
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
  font-size: 0.93rem;
  color: #c9d1d9;
  transition: color 0.3s;
}
.custom-checkbox input[type="checkbox"] {
  display: none;
}
.custom-checkbox .checkmark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 2px solid #4b5563;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  transform-style: preserve-3d;
  transition: background-color 1.3s, border-color 1.3s, color 1.3s, transform 0.3s;
}
.custom-checkbox .checkmark::before {
  content: "\2713";
  font-size: 14px;
  color: transparent;
  transition: color 0.3s, transform 0.3s;
}
.custom-checkbox input[type="checkbox"]:checked + .checkmark {
  background-color: #1a3a6e;
  border-color: #6ea8fe;
  transform: scale(1.1) rotateZ(360deg) rotateY(360deg);
}
.custom-checkbox input[type="checkbox"]:checked + .checkmark::before {
  color: #6ea8fe;
}
.custom-checkbox:hover:not(.pref-disabled) {
  color: #8db4e4;
}
.custom-checkbox:hover:not(.pref-disabled) .checkmark {
  border-color: #6ea8fe;
  background-color: rgba(110, 168, 254, 0.08);
  transform: scale(1.05);
}
.custom-checkbox input[type="checkbox"]:focus + .checkmark {
  box-shadow: 0 0 3px 2px rgba(110, 168, 254, 0.25);
  outline: none;
}
.custom-checkbox.pref-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* === MOBILE NAVBAR: push language toggle left of hamburger === */
@media (max-width: 991.98px) {
  .lang-toggle-fixed {
    right: 60px !important;   /* clear the ~44px hamburger button */
    top: 14px !important;
    transform: scale(0.82);
    transform-origin: top right;
  }
  /* Hide bell dropdown on mobile — JS redirects to /notification_center instead */
  #bellDropdownWrapper .dropdown-menu {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE OPTIMISATION — consolidated, scoped so desktop is untouched
   ═══════════════════════════════════════════════════════════════ */

/* Kill stray horizontal scrolling caused by any wide child */
body { overflow-x: hidden; }

/* ── Collapsed navbar (hamburger menu, < lg) ── */
@media (max-width: 991.98px) {
  .navbar { padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .navbar .container-fluid { padding-left: 1rem; padding-right: 1rem; }
  .navbar-brand { font-size: 1.5rem !important; }

  /* Solid, readable panel for the dropdown menu over the starfield */
  #navbarNav {
    background: rgba(13, 17, 23, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    margin-top: 10px;
    padding: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    max-height: calc(100vh - 86px);
    overflow-y: auto;
  }
  .navbar-nav {
    gap: 0 !important;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
  }

  /* Vertical nav links: left-aligned, full-width tap targets, no overlap */
  .nav-link {
    height: auto !important;
    padding: 0.8rem 1rem !important;
    letter-spacing: 1px;
    font-size: 0.95rem;
    border-radius: 10px !important;
    justify-content: flex-start;
  }
  /* The desktop "sweep" overlay mis-positions in a vertical menu — drop it */
  .nav-link .hover-text { display: none !important; }
  .nav-link:hover, .nav-link:active { background: rgba(255, 255, 255, 0.06) !important; }

  /* Username + logout get their own full-width row */
  .user-auth-block {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.7rem 1rem;
    gap: 0.5rem !important;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .user-auth-block .username-link { font-size: 0.95rem !important; }

  .bell-nav-link { padding: 0.55rem 1rem; }

  /* Floating star-toggle: tuck into the corner so it doesn't block content */
  .btn-toggle-stars { bottom: 16px; right: 16px; --size: 15px; opacity: 0.45; }
}

/* ── Phone-size tightening (< sm) ── */
@media (max-width: 575.98px) {
  .container, .container-fluid { padding-left: 14px; padding-right: 14px; }

  h1, .h1 { font-size: 1.55rem; }
  h2, .h2 { font-size: 1.35rem; }
  h3, .h3 { font-size: 1.2rem; }
  h4, .h4 { font-size: 1.05rem; }

  .card-body { padding: 1rem; }

  /* Tables always scroll instead of breaking the layout */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table { font-size: 0.85rem; }

  /* Profile action buttons: comfortable but compact */
  .btn-general-profile-view { padding: 0.72rem 0.9rem; font-size: 0.88rem; }

  /* Modals hug the screen edges with a small gutter */
  .modal-dialog { margin: 0.6rem; }
}

/* ======= DYNAMIC STARFIELD SIZING =======
   The star positions above only cover a 2000x2000 area. On viewports larger
   than that in CSS pixels (browser zoomed out, 4K screens), JS in base.html
   regenerates the box-shadows to cover the real viewport and sets
   --starfield-h so the scroll loop stays seamless. These overrides make the
   ::after clone offset and the loop distance follow that variable. */
#stars::after,
#stars2::after,
#stars3::after {
  top: var(--starfield-h, 2000px);
}
@keyframes animStar {
  from { transform: translateY(0px); }
  to   { transform: translateY(calc(-1 * var(--starfield-h, 2000px))); }
}