:root { --colorPrimary: #8a2be2; --colorPrimaryDark: #6a1b9a; --colorPrimaryLight: #b39ddb; --colorTextLight: #ffffff; --colorShine: rgba(255, 255, 255, 0.5); --bgCard: var(--colorCardBg); --colorAccent: var(--colorPrimary); --heightInput: 40px; --paddingBtnSmall: .4rem .8rem; --fontBtnSmall: .85rem; --iconSizeSmall: 1rem; --logoSizeSmall: 35px; --paddingListSm: .8rem 1rem; --colorError: #ff4500; --colorWhatsapp: #25d366; --colorFacebook: #3b5998; --colorInstagram: #e1306c; --colorTelegram: #0088cc; --colorTiktok: #000000; --colorDiscord: #7289da; --colorYoutube: #ff0000; --colorNpm: #cb3837; --colorGithub: var(--colorText); --colorVerified: var(--colorPrimary); --colorUnverified: #ffc107; --colorDropdownText: var(--colorText); }
.dark { --colorTiktok: #ffffff; --colorDropdownText: #eeeeee; }
@keyframes shineLoop { 0% { left: -100%; } 100% { left: 100%; } }
@keyframes dotBlink { 0%, 100% { background-color: var(--colorPrimaryLight); } 50% { background-color: var(--colorAccent); } }
.listMidmanContainerWrapper { padding: 2rem 1rem; max-width: 1400px; margin: 0 auto; }
.backButton { background: none; border: 1px solid var(--colorBorder); border-radius: 50px; color: var(--colorText); cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 500; padding: .5rem 1rem; margin-bottom: 1.5rem; transition: all var(--transitionFast); }
.backButton:hover { background: rgba(var(--colorPrimaryRgb), 0.1); border-color: var(--colorAccent); color: var(--colorAccent); transform: translateX(-5px); }
.listMidmanHeader { text-align: center; margin-bottom: 2rem; }
.listMidmanHeader h2 { font-size: 2.2rem; font-weight: 700; color: var(--colorAccent); margin-bottom: .4rem; }
.listMidmanHeader h2 i { color: var(--colorPrimaryDark); margin-left: .5rem; font-size: 2rem; }
.listMidmanHeader p { font-size: 1rem; color: var(--colorTextSub); }
.midmanCardsCarouselContainer { margin-bottom: 2.5rem; position: relative; padding: 1rem 0; overflow: hidden; }
.midmanCardsCarousel { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 1.5rem; padding-bottom: 1.5rem; }
.carouselCard { flex: 0 0 300px; scroll-snap-align: center; border-radius: 15px; padding: 2rem; border: 1px solid var(--colorBorder); box-shadow: var(--shadowSoft); background: linear-gradient(145deg, var(--bgCard), rgba(var(--colorPrimaryDarkRgb), 0.05)); position: relative; overflow: hidden; transition: all var(--transitionFast); height: 100%; display: flex; flex-direction: column; }
.carouselCard:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 8px 16px rgba(var(--colorPrimaryRgb), 0.15); }
.cardIcon { font-size: 2.5rem; color: var(--colorPrimaryLight); margin-bottom: 1rem; }
.carouselCard h3 { font-size: 1.2rem; color: var(--colorAccent); margin-bottom: .6rem; font-weight: 600; }
.carouselCard p { font-size: .95rem; color: var(--colorTextSub); line-height: 1.5; flex-grow: 1; }
.reportCard { border-left: 5px solid var(--colorDanger); }
.reportCard h3 { color: var(--colorDanger); }
.carouselDots { text-align: center; position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.carouselDot { height: 10px; width: 10px; border-radius: 50%; background-color: var(--colorPrimaryLight); cursor: pointer; transition: background-color var(--transitionFast); }
.carouselDot.active { background-color: var(--colorAccent); animation: dotBlink 2s infinite ease-in-out; }
.listMidmanErrorWrapper { max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
.listMidmanErrorCard { border-left: 5px solid var(--colorError); max-width: 100%; margin: 0; background: var(--bgCard); border-radius: 12px; padding: 2rem; box-shadow: var(--shadowMedium); text-align: center; }
.listMidmanErrorCard h2 { color: var(--colorError); margin-bottom: 1rem; font-size: 1.8rem; }
.listMidmanErrorCard p { color: var(--colorTextSub); margin-bottom: 1.5rem; }
.errorContactBtn { background-color: var(--colorError); color: var(--colorTextLight); }
.errorContactBtn:hover { background-color: #d13a00; }
.midmanSearchSection { position: relative; max-width: 500px; margin: 0 auto 2.5rem; }
.modernSearchInput { width: 100%; padding: .9rem 3rem .9rem 1.2rem; border-radius: 30px; border: 2px solid var(--colorPrimaryLight); font-size: 1rem; background: var(--bgCard); color: var(--colorText); transition: all var(--transitionFast); }
.modernSearchInput:focus { border-color: var(--colorAccent); box-shadow: 0 0 15px rgba(var(--colorPrimaryRgb), 0.3); }
.searchIcon { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--colorPrimaryLight); font-size: 1.1rem; pointer-events: none; }
.tableResponsiveWrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--bgCard); border-radius: 12px; box-shadow: var(--shadowMedium); padding: .5rem; }
.midmanListTable { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 600px; }
.midmanListTable thead th { background-color: var(--colorAccent); color: var(--colorTextLight); padding: var(--paddingListSm); text-align: left; font-weight: 600; font-size: .9rem; position: sticky; top: 0; z-index: 10; border: none; }
.midmanListTable thead th.colIndex { width: 50px; text-align: center; }
.midmanListTable thead th.colStatus { width: 120px; }
.midmanListTable thead th.colAction { width: 80px; text-align: center; }
.midmanListTable thead th:first-child { border-top-left-radius: 8px; }
.midmanListTable thead th:last-child { border-top-right-radius: 8px; }
.midmanListTable tbody tr.midmanRow { border-bottom: 1px solid var(--colorBorder); transition: all var(--transitionFast); }
.midmanListTable tbody tr.midmanRow.highlighted { background-color: rgba(var(--colorPrimaryRgb), 0.1); border: 2px solid var(--colorAccent); }
.midmanListTable tbody tr:last-of-type { border-bottom: none; }
.midmanListTable tbody tr.midmanRow:hover { background-color: rgba(var(--colorPrimaryRgb), 0.05); }
.dark .midmanListTable tbody tr.midmanRow:hover { background-color: rgba(var(--colorPrimaryRgb), 0.15); }
.midmanListTable td { padding: var(--paddingListSm); vertical-align: middle; font-size: .9rem; }
.midmanIndexCell { text-align: center; font-weight: 500; color: var(--colorTextSub); }
.midmanNameCell { font-weight: 600; position: relative; }
.midmanIdentity { display: flex; align-items: center; gap: 10px; }
.midmanLogo { width: var(--logoSizeSmall); height: var(--logoSizeSmall); border-radius: 50%; object-fit: cover; border: 2px solid var(--colorPrimaryLight); flex-shrink: 0; pointer-events: none; user-select: none; }
.midmanNameContainer { display: flex; align-items: center; gap: 4px; }
.verifiedTickSmall { color: var(--colorVerifyTick); font-size: 0.7rem; margin-left: 0.3rem; }
.statusBadge { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; padding: .3rem .6rem; border-radius: 12px; }
.verifiedBadge { background-color: rgba(var(--colorAccentRgb), 0.15); color: var(--colorVerified); border: 1px solid var(--colorVerified); }
.unverifiedBadge { background-color: rgba(255, 193, 7, 0.15); color: var(--colorUnverified); border: 1px solid var(--colorUnverified); }
.midmanActionCell { position: relative; width: 80px; text-align: center; }
.infoBtn { background: none; border: none; color: var(--colorAccent); width: 30px; height: 30px; cursor: pointer; font-size: 1rem; transition: all var(--transitionFast); display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.infoBtn:hover { background-color: rgba(var(--colorPrimaryRgb), 0.1); transform: scale(1.1); }
.actionDropdown { position: absolute; right: 10px; top: 100%; z-index: 20; background: var(--bgCard); border: 1px solid var(--colorPrimaryLight); border-radius: 8px; box-shadow: var(--shadowMedium); min-width: 200px; padding: .5rem 0; transform: translateY(5px); }
.actionDropdown.hidden { display: none; }
.dropdownHeader { padding: .5rem 1.2rem; font-size: .8rem; font-weight: 700; color: var(--colorAccent); border-bottom: 1px solid var(--colorBorder); margin-bottom: .5rem; }
.dropdownLink { display: flex; align-items: center; gap: 10px; padding: .7rem 1.2rem; text-decoration: none; color: var(--colorDropdownText); font-size: .9rem; transition: background-color var(--transitionFast), color var(--transitionFast); background: none; border: none; width: 100%; text-align: left; cursor: pointer; }
.dropdownLink:hover { background-color: rgba(var(--colorPrimaryRgb), 0.1); color: var(--colorAccent); }
.dropdownLink i { font-size: 1rem; }
.whatsappLink { color: var(--colorWhatsapp); }
.facebookLink { color: var(--colorFacebook); }
.instagramLink { color: var(--colorInstagram); }
.telegramLink { color: var(--colorTelegram); }
.tiktokLink { color: var(--colorTiktok); }
.whatsappChannelLink { color: var(--colorWhatsapp); }
.discordLink { color: var(--colorDiscord); }
.youtubeLink { color: var(--colorYoutube); }
.npmLink { color: var(--colorNpm); }
.githubLink { color: var(--colorGithub); }
.websiteLink { color: var(--colorAccent); }
.shareLink { color: var(--colorAccent); }
.noResultsMessage { text-align: center; padding: 1.5rem; border-top: 1px solid var(--colorBorder); margin-top: 1rem; }
.noResultsMessage p { font-size: 1rem; color: var(--colorTextSub); }
.shareToast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: var(--colorVerified); color: var(--colorTextLight); padding: 10px 20px; border-radius: 8px; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: opacity 0.3s ease-in-out; opacity: 0; }
.shareToast.show { opacity: 1; }
.paginationControls { display: flex; justify-content: center; gap: 8px; margin-top: 2rem; }
.paginationLink { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background-color: var(--bgCard); border: 1px solid var(--colorBorder); text-decoration: none; color: var(--colorText); font-weight: 500; transition: all var(--transitionFast); }
.paginationLink:hover { background-color: rgba(var(--colorPrimaryRgb), 0.1); color: var(--colorAccent); }
.paginationLink.activePage { background-color: var(--colorAccent); color: var(--colorTextLight); border-color: var(--colorAccent); box-shadow: 0 4px 8px rgba(var(--colorPrimaryRgb), 0.3); }
.paginationEllipsis { padding: 0 5px; color: var(--colorTextSub); }
.paginationLink.prevLink i, .paginationLink.nextLink i { font-size: .8rem; }
@media (max-width: 768px) { .midmanCardsCarousel { scroll-snap-type: x mandatory; } .carouselCard { flex: 0 0 80%; } .midmanListTable { min-width: 500px; } .midmanListTable thead th { font-size: .8rem; padding: .6rem .8rem; } .midmanListTable td { font-size: .85rem; padding: .6rem .8rem; } .midmanIndexCell { width: 40px; } .midmanActionCell { width: 60px; } .statusBadge { font-size: .7rem; padding: .2rem .4rem; } .infoBtn { font-size: .8rem; } }
@media (max-width: 480px) { .listMidmanHeader h2 { font-size: 1.8rem; } .midmanCardsCarousel { scroll-snap-type: x mandatory; } .carouselCard { flex: 0 0 90%; } .tableResponsiveWrapper { padding: 0; } .midmanListTable { min-width: 100%; } .midmanListTable thead th { font-size: .75rem; padding: .5rem .5rem; } .midmanListTable td { font-size: .8rem; padding: .5rem .5rem; } .midmanIdentity { gap: 5px; } .midmanLogo { width: 25px; height: 25px; } .infoBtn { width: 25px; height: 25px; } .midmanListTable td.midmanNameCell, .midmanListTable th.colName { width: 40%; } .midmanListTable td.midmanStatusCell, .midmanListTable th.colStatus { width: 30%; } .midmanListTable td.midmanActionCell, .midmanListTable th.colAction { width: 30%; } .actionDropdown { min-width: 150px; right: 5px; } }