/* A compact channel index, with independent country/category boards. */
.main.top-rankings-main {max-width:1280px; padding:40px 48px 64px; margin:0 auto;}
.top-rankings {font-size:14px; line-height:1.6; color:#f5f5f7;}
.top-rankings h1,.top-rankings h2,.top-rankings h3,.top-rankings p {margin:0;}
.top-rankings svg,.top-preview svg {width:16px; height:16px; flex-shrink:0;}
.top-rankings button,.top-rankings select,.top-rankings input {font:inherit;}
.top-intro {padding:0 0 34px; border-bottom:1px solid #ffffff12; margin-bottom:30px;}
.top-snapshot {display:flex; align-items:center; gap:8px; color:#aaaab3; font-size:12px; margin-bottom:14px;}
.top-snapshot>span {width:6px; height:6px; border-radius:50%; background:#ff365b;}
.top-intro h1 {font-size:34px; line-height:1.3; letter-spacing:-.7px; font-weight:650;}
.top-intro>p {margin-top:12px; color:#a8a8b0; font-size:14px;}
.top-layout {display:grid; grid-template-columns:200px minmax(0,1fr); gap:36px; align-items:start;}
.top-sidebar {position:sticky; top:98px;}
.top-sidebar h2 {font-size:13px; font-weight:600; display:flex; gap:9px; align-items:center; margin-bottom:12px; color:#d8d8de;}
.top-sidebar h2 svg {color:#9999a3;}
.top-global-nav>div {display:grid; gap:3px;}
.top-global-nav button {display:flex; align-items:center; justify-content:space-between; min-height:44px; border:1px solid transparent; background:none; padding:10px 12px; color:#aaaab5; border-radius:6px; font-size:13px; text-align:left;}
.top-global-nav button>span {display:flex; color:#777780;}
.top-global-nav button:hover {color:#fff; background:#18181c;}
.top-global-nav button[aria-current] {background:#241117; border-color:#ff365b25; color:#ff6482; font-weight:600;}
.top-global-nav button[aria-current]>span {color:#ff6482;}
.top-selects {border-top:1px solid #ffffff12; margin-top:22px; padding-top:22px;}
.top-selects label {display:block; font-size:12px; color:#a3a3ae; margin-bottom:9px;}
.top-select-wrap {position:relative; margin-bottom:22px;}
.top-select-wrap select {width:100%; background:#131316; color:#dfdfe4; border:1px solid #ffffff1c; border-radius:6px; min-height:44px; appearance:none; padding:9px 32px 9px 12px; font-size:13px; cursor:pointer;}
.top-select-wrap>svg {position:absolute; right:12px; top:14px; color:#92929d; pointer-events:none;}
.top-small-link {display:flex; align-items:center; justify-content:space-between; min-height:44px; font-size:12px; color:#aaaab5; padding:0 4px;}
.top-small-link:hover {color:#fff;}
.top-content {min-width:0;}
.top-list-heading {display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px;}
.top-list-heading h2 {font-size:20px; line-height:1.5; font-weight:600; letter-spacing:-.3px; scroll-margin-top:96px;}
.top-list-heading p {font-size:12px; margin-top:4px; color:#8f8f9c;}
.top-search {display:flex; align-items:center; border:1px solid #ffffff20; border-radius:7px; min-height:42px; width:242px; padding:0 12px; gap:8px; background:#131316; flex-shrink:0;}
.top-search:focus-within {border-color:#a6a6b3;}
.top-search>svg {color:#9797a3;}
.top-search input {width:100%; min-width:0; border:0; color:#eeeef2; background:none; padding:10px 0; font-size:12px; outline:none;}
.top-search input::placeholder {color:#8e8e9a;}
.top-search input:focus-visible {outline:none;}
.top-search button {border:0; background:none; width:28px; height:30px; display:grid; place-items:center; color:#aaaab5; padding:0; flex-shrink:0;}
.top-results-note {font-size:12px; color:#8f8f9c; min-height:24px; margin-bottom:10px; overflow-wrap:anywhere;}
.top-mobile-sort {display:none;}
.top-table-wrap {border:1px solid #ffffff12; border-radius:9px; overflow:hidden; background:#111114;}
.top-table {width:100%; border-collapse:collapse; table-layout:fixed;}
.top-table th,.top-table td {border-bottom:1px solid #ffffff0e; padding:0 15px;}
.top-table tr:last-child td {border-bottom:0;}
.top-table th {height:44px; color:#8f8f9c; background:#151518; font-size:11px; text-align:left; font-weight:400;}
.top-table th:first-child {width:66px;}
.top-table th:nth-child(3),.top-table th:nth-child(4) {width:137px; text-align:right;}
.top-table th:last-child {width:36px; padding:0;}
.top-table th button {border:0; padding:0; min-height:42px; background:none; display:inline-flex; align-items:center; gap:5px; font-size:11px; white-space:nowrap; color:inherit;}
.top-table th button:hover {color:#fff;}
.top-table th svg {width:12px; height:12px; color:#656571;}
.top-table th[aria-sort=ascending] svg,.top-table th[aria-sort=descending] svg {color:#ff6482;}
.top-table td {height:69px; font-size:13px;}
.top-table tbody tr:hover {background:#1a1a1f;}
.top-position {font-size:13px; color:#777785; font-variant-numeric:tabular-nums;}
.top-position.top-leading {color:#ff6482; font-weight:600;}
.top-channel {display:flex; width:100%; min-width:0; align-items:center; gap:12px; padding:10px 0; border:0; background:none; color:inherit; text-align:left;}
.top-avatar {position:relative; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#25252c; color:#c7c7d1; font-size:14px; font-weight:500; flex-shrink:0; overflow:hidden; border:1px solid #ffffff0a;}
.top-avatar img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:transparent; opacity:0;}
.top-avatar img.is-loaded {opacity:1;}
.top-channel-copy {display:flex; flex-direction:column; gap:3px; min-width:0;}
.top-channel strong {font-size:13px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#f1f1f5;}
.top-channel small {font-size:11px; color:#8c8c99;}
.top-channel:hover strong {text-decoration:underline; text-underline-offset:3px;}
.top-numeric {text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:550; letter-spacing:.05px;}
.top-table td.top-views {color:#aaaab7; font-weight:400;}
.top-table td:last-child {padding:0;}
.top-row-open {display:grid; place-items:center; width:32px; height:44px; border:0; background:none; color:#696977; padding:0;}
.top-row-open:hover,.top-table tr:hover .top-row-open {color:#eeeef3;}
.top-table-footer {display:flex; justify-content:space-between; gap:20px; align-items:center; padding:18px 0; color:#92929f; font-size:12px; font-variant-numeric:tabular-nums; overflow-anchor:none;}
.top-source {margin-top:4px; border-top:1px solid #ffffff12; padding:16px 0; color:#92929f; font-size:12px;}
.top-source summary {display:flex; align-items:center; gap:9px; cursor:pointer; list-style:none; width:fit-content; min-height:30px;}
.top-source summary::-webkit-details-marker {display:none;}
.top-source summary svg {width:13px; height:13px;}
.top-source[open] summary svg {transform:rotate(180deg);}
.top-source p {margin-top:12px; line-height:1.85;}
.top-source a {color:#c8c8d2; text-decoration:underline; text-underline-offset:3px;}
.top-source a svg {width:12px; height:12px; vertical-align:middle;}
.top-discover-next {border-top:1px solid #ffffff12; margin-top:18px; padding-top:28px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.top-discover-next h3 {font-size:16px; font-weight:550;}
.top-discover-next p {font-size:12px; color:#8f8f9c; margin-top:6px;}
.top-discover-next a {display:inline-flex; gap:8px; align-items:center; font-size:13px; color:#ff6482; white-space:nowrap; min-height:44px;}
.top-empty,.top-loading {padding:90px 24px; text-align:center; background:#111114; border:1px solid #ffffff12; border-radius:9px;}
.top-empty>svg {width:28px; height:28px; margin:0 auto 20px; color:#81818f;}
.top-empty h1,.top-loading h1 {font-size:28px;}
.top-empty h3 {font-size:18px; font-weight:550;}
.top-empty p,.top-loading p {font-size:13px; color:#9999a6; margin:12px 0 20px;}
.top-empty button {display:inline-flex; gap:8px; align-items:center; padding:8px 14px; min-height:42px; border:1px solid #ffffff28; border-radius:6px; background:#1c1c22; color:#eeeef4; font-size:13px;}
.top-empty>a {margin-left:18px; font-size:13px; color:#bbb;}
.top-preview {font-size:13px; color:#c6c6d0;}
.top-preview-identity {display:flex; align-items:center; gap:16px; margin:8px 0 28px;}
.top-preview-identity .top-avatar {width:60px; height:60px; font-size:22px;}
.top-preview-identity>div {min-width:0;}
.top-preview-identity h3 {font-size:23px; color:#f7f7fa; font-weight:600; line-height:1.35; overflow-wrap:anywhere; margin:0;}
.top-preview-identity p {font-size:12px; color:#92929f; margin-top:8px; overflow-wrap:anywhere;}
.top-preview-stats {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #ffffff18; border-bottom:1px solid #ffffff18; padding:22px 0; margin:0; gap:14px;}
.top-preview-stats dt {font-size:12px; color:#9999a6;}
.top-preview-stats dd {font-size:23px; color:#f2f2f7; margin:10px 0 0; font-weight:600; font-variant-numeric:tabular-nums;}
.top-preview-note {font-size:12px; margin-top:16px; color:#92929f;}
.top-preview-actions {display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.top-preview-actions a {display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px; border:1px solid #ffffff26; border-radius:6px; color:#eeeef4; font-size:13px;}
.top-preview-actions a:first-child {background:#e6002e; border-color:#e6002e;}
.top-preview-actions a:first-child:hover {background:#c90028;}
@media(max-width:1100px){
  .main.top-rankings-main {padding-left:32px; padding-right:32px;}
  .top-layout {grid-template-columns:174px minmax(0,1fr); gap:26px;}
  .top-table th,.top-table td {padding-left:10px; padding-right:10px;}
  .top-table th:first-child {width:52px;}
  .top-table th:nth-child(3),.top-table th:nth-child(4) {width:108px;}
  .top-channel {gap:9px;}
  .top-search {width:216px;}
}
@media(max-width:900px){
  .top-layout {display:block;}
  .top-sidebar {position:static; display:grid; grid-template-columns:1fr 1.45fr; gap:24px; margin-bottom:26px;}
  .top-global-nav>div {display:flex; gap:5px;}
  .top-global-nav button {flex:1; justify-content:center; padding:9px 10px;}
  .top-global-nav button>span {display:none;}
  .top-global-nav h2 {margin-bottom:8px; font-size:12px; font-weight:400; color:#a3a3ae;}
  .top-global-nav h2 svg {display:none;}
  .top-selects {display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; padding:0; margin:0; border:0;}
  .top-selects label {margin:0; grid-row:1;}
  .top-selects .top-select-wrap {margin:0; grid-row:2;}
  .top-small-link {display:none;}
  .top-table th:nth-child(3),.top-table th:nth-child(4) {width:130px;}
}
@media(max-width:600px){
  .main.top-rankings-main {padding:26px 18px 36px;}
  .top-intro {padding-bottom:25px; margin-bottom:22px;}
  .top-intro h1 {font-size:27px; letter-spacing:-.5px;}
  .top-intro>p {font-size:13px; line-height:1.85; max-width:290px; margin-top:10px;}
  .top-snapshot {font-size:11px; margin-bottom:12px;}
  .top-sidebar {display:block; margin-bottom:24px;}
  .top-global-nav h2 {display:none;}
  .top-global-nav button {border-color:#ffffff18; font-size:13px;}
  .top-global-nav>div {gap:8px;}
  .top-selects {margin-top:18px; gap:8px 12px;}
  .top-selects label {font-size:11px;}
  .top-select-wrap select {font-size:12px; padding-left:10px;}
  .top-list-heading {display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; margin-bottom:14px;}
  .top-list-heading h2 {font-size:19px;}
  .top-list-heading p {display:none;}
  .top-search {width:100%; min-height:44px; grid-column:1/-1; grid-row:2;}
  .top-search input {font-size:16px;}
  .top-search input::placeholder {font-size:12px;}
  .top-results-note {display:none; font-size:11px; line-height:1.8; margin-bottom:12px;}
  .top-results-note.has-query {display:block;}
  .top-mobile-sort {display:flex; align-items:center; justify-content:flex-end; gap:6px; margin:0; font-size:11px; color:#92929f; grid-column:2; grid-row:1;}
  .top-mobile-sort select {font-size:12px; min-height:40px; max-width:130px; padding:6px 9px; border:1px solid #ffffff20; border-radius:5px; background:#131316; color:#d1d1da;}
  .top-table th:first-child {width:43px;}
  .top-table th:nth-child(3) {width:87px;}
  .top-table th:nth-child(4),.top-table td:nth-child(4) {display:none;}
  .top-table th:last-child,.top-table td:last-child {display:none;}
  .top-table td {height:70px; padding:0 9px;}
  .top-table th {padding:0 8px;}
  .top-table th button {font-size:10px; gap:2px;}
  .top-table th svg {width:10px; height:10px;}
  .top-avatar {width:30px; height:30px; font-size:12px;}
  .top-channel {gap:8px; min-height:60px;}
  .top-channel strong {font-size:12px;}
  .top-channel small {font-size:10px;}
  .top-position {font-size:12px;}
  .top-table td.top-numeric {font-size:12px;}
  .top-table-footer {flex-wrap:wrap; gap:12px; font-size:11px;}
  .top-source {font-size:11px;}
  .top-discover-next {display:block; margin-top:10px; padding-top:23px;}
  .top-discover-next h3 {font-size:15px;}
  .top-discover-next a {margin-top:12px;}
  .top-empty {padding:50px 16px;}
  .top-empty h3 {font-size:16px;}
  .top-preview-identity .top-avatar {width:46px; height:46px;}
  .top-preview-identity h3 {font-size:20px;}
  .top-preview-stats {gap:8px; padding:20px 0;}
  .top-preview-stats dt {font-size:10px;}
  .top-preview-stats dd {font-size:18px;}
  .top-preview-actions {display:grid; grid-template-columns:1fr;}
}
@media(max-width:360px){
  .main.top-rankings-main {padding-left:14px; padding-right:14px;}
  .top-intro h1 {font-size:24px;}
  .top-table th:first-child {width:36px;}
  .top-table td,.top-table th {padding-left:6px; padding-right:6px;}
  .top-table th:nth-child(3) {width:76px;}
  .top-channel {gap:6px;}
  .top-avatar {width:26px; height:26px;}
  .top-preview-stats dd {font-size:16px;}
}