.topicsPageContainer{width:86.5%;max-width:1500px;margin:0 auto;padding:20px}@media (max-width:1550px){.topicsPageContainer{width:77.5%}}@media (max-width:1159px){.topicsPageContainer{width:98%}}@media (max-width:768px){.topicsPageContainer{padding:15px!important}}@media (max-width:321px){.topicsPageContainer{padding:5px!important}}
.topicCard{-webkit-backdrop-filter:blur(10px);cursor:pointer;background:#ffffff1a;border:1px solid #ffffff2e;border-radius:30px;padding:12px 28px;transition:all .3s;position:relative;box-shadow:0 4px 12px #0000000d,inset 0 1px #fff6,inset 0 -1px #ffffff1a,inset 1px 0 #ffffff40,inset -1px 0 #ffffff40}.topicCard:hover{background:#ffffff26;box-shadow:0 6px 16px #00000014,inset 0 1px #fff6,inset 0 -1px #ffffff1a,inset 1px 0 #ffffff40,inset -1px 0 #ffffff40}.topicHeader{align-items:center;gap:16px;width:100%;display:flex}.topicNumber{text-align:center;color:#1a1a1a;background:#ffffff1a;border:1px solid #ffffff2e;border-radius:30px;justify-content:center;align-items:center;min-width:54px;height:42px;padding:0 18px;font-size:18px;font-weight:600;display:flex;position:relative;box-shadow:0 2px 8px #0000000d,inset 0 1px #fff6,inset 0 -1px #ffffff1a,inset 1px 0 #ffffff40,inset -1px 0 #ffffff40}.topicContent{flex-direction:column;flex:1;gap:4px;display:flex}.topicName{color:#1a1a1a;font-size:18px;font-weight:500;line-height:1.2}.topicStats{white-space:nowrap;align-items:center;gap:12px;display:flex}.topicCount{color:#6b7280;font-size:16px;font-weight:500}.toggleBtn{width:42px;height:42px;color:rgb(var(--subject-rgb));cursor:pointer;background:#ffffff1a;border:1px solid #ffffff2e;border-radius:30px;justify-content:center;align-items:center;margin-left:auto;transition:all .3s;display:flex;position:relative;box-shadow:0 2px 8px #0000000d,inset 0 1px #fff6,inset 0 -1px #ffffff1a,inset 1px 0 #ffffff40,inset -1px 0 #ffffff40}.toggleBtn:hover{background:#fff3;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a,inset 0 1px #fff6,inset 0 -1px #ffffff1a,inset 1px 0 #ffffff40,inset -1px 0 #ffffff40}.toggleBtn:active{transform:translateY(0)}.subtopicsList{background:0 0;border:1px solid #fff3;border-radius:20px;flex-direction:column;gap:8px;margin-top:16px;padding:12px;display:flex;box-shadow:0 4px 16px #00000014,inset 0 1px #fff6}.subtopicItem{cursor:pointer;background:0 0;border-radius:12px;justify-content:space-between;align-items:center;gap:16px;padding:8px 12px;transition:all .2s;display:flex}.subtopicItem:hover{background:#ffffff1a;transform:translate(2px)}.subtopicName{color:#1a1a1a;word-break:break-word;overflow-wrap:break-word;flex:1;align-items:center;gap:8px;min-width:0;font-size:15px;font-weight:400;display:flex}.subtopicLinkIcon{opacity:0;flex-shrink:0;transition:opacity .2s}.subtopicItem:hover .subtopicLinkIcon{opacity:1}.subtopicCount{color:#6b7280;white-space:nowrap;text-align:left;flex-shrink:0;font-size:14px;font-weight:500}@media (max-width:1550px){.topicCard{padding:12px 24px}.topicNumber{min-width:40px;height:36px;padding:0 14px;font-size:16px}.topicName{font-size:16px}.topicCount{font-size:15px}.toggleBtn{width:36px;height:36px}}
.codifierCard{-webkit-backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #ffffff2e;border-radius:30px;align-items:center;min-height:70px;padding:16px 28px;transition:all .3s;display:flex;position:relative;box-shadow:0 4px 12px #0000000d,inset 0 1px #fff6,inset 0 -1px #ffffff1a,inset 1px 0 #ffffff40,inset -1px 0 #ffffff40}.codifierCard:hover{background:#ffffff26;transform:translate(2px);box-shadow:0 6px 16px #00000014,inset 0 1px #fff6,inset 0 -1px #ffffff1a,inset 1px 0 #ffffff40,inset -1px 0 #ffffff40}.codifierHeader{align-items:center;gap:16px;width:100%;display:flex}.codifierName{color:#1a1a1a;align-items:center;gap:8px;font-size:18px;font-weight:500;line-height:1.2;display:flex}.codifierLinkIcon{opacity:0;flex-shrink:0;transition:opacity .2s}.codifierCard:hover .codifierLinkIcon{opacity:1}.codifierStats{white-space:nowrap;align-items:center;gap:12px;display:flex}.codifierCount{color:#6b7280;font-size:16px;font-weight:500}@media (max-width:1550px){.codifierCard{min-height:64px;padding:12px 24px}.codifierName{font-size:16px}.codifierCount{font-size:15px}}