/* Shared spacing fixes loaded after every front-end theme bundle. */
html[data-front-theme] #header + .sitepath {
  margin-top: 14px !important;
}

html[data-front-theme] #header + #txtbox {
  box-sizing: border-box;
  margin-top: 12px !important;
  width: 100%;
}

html[data-front-theme] #txtbox + .sitepath {
  margin-top: 12px !important;
}

html[data-front-theme] body .sitepath a:link,
html[data-front-theme] body .sitepath a:visited {
  background: rgba(255, 255, 255, .72) !important;
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

html[data-front-theme] body .sitepath a:hover,
html[data-front-theme] body .sitepath a:focus-visible,
html[data-front-theme] body .sitepath a:active {
  background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-front-theme] body #footer .footer-action {
  align-items: center !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .30) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: 34px !important;
  overflow: hidden !important;
  padding: 8px 13px !important;
  position: relative !important;
  text-align: center !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-front-theme] body #footer .footer-action::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .58), transparent) !important;
  content: "" !important;
  display: block !important;
  height: 100% !important;
  left: -85% !important;
  position: absolute !important;
  top: 0 !important;
  transform: skewX(-18deg) !important;
  transition: left .55s ease !important;
  width: 54% !important;
}

html[data-front-theme] body #footer .footer-action-vip {
  background: linear-gradient(135deg, #f59e0b, #f97316 52%, #ef4444) !important;
  border-color: rgba(254, 215, 170, .78) !important;
}

html[data-front-theme] body #footer .footer-action-pending {
  background: linear-gradient(135deg, #2563eb, #06b6d4 54%, #14b8a6) !important;
  border-color: rgba(191, 219, 254, .78) !important;
}

html[data-front-theme] body #footer .footer-action-rejected {
  background: linear-gradient(135deg, #ef4444, #e11d48 52%, #be123c) !important;
  border-color: rgba(254, 202, 202, .78) !important;
}

html[data-front-theme] body #footer .footer-action-black {
  background: linear-gradient(135deg, #111827, #334155 52%, #0f172a) !important;
  border-color: rgba(148, 163, 184, .70) !important;
}

html[data-front-theme] body #footer .footer-action:hover,
html[data-front-theme] body #footer .footer-action:focus-visible {
  box-shadow: 0 14px 28px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .40) !important;
  color: #fff !important;
  filter: saturate(1.08) !important;
  transform: translateY(-2px) !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-front-theme] body #footer .footer-action:hover::before,
html[data-front-theme] body #footer .footer-action:focus-visible::before {
  left: 125% !important;
}

@media (max-width: 640px) {
  html[data-front-theme] body #footer .footer-action {
    min-height: 44px !important;
  }

  html[data-front-theme] #header + .sitepath {
    margin-top: 10px !important;
  }

  html[data-front-theme] #header + #txtbox,
  html[data-front-theme] #txtbox + .sitepath {
    margin-top: 10px !important;
  }

  html[data-front-theme] body #header #navbox {
    overflow: visible !important;
  }

  html[data-front-theme] body #header #navbox .navbar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html[data-front-theme] body #header #navbox .navbar > li:not(.navline) {
    min-width: 0 !important;
    width: auto !important;
  }

  html[data-front-theme] body #header #navbox .navbar > li:not(.navline) > a {
    overflow: hidden !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
  }

  html[data-front-theme] #quickbox .quick-review-sites {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow: visible !important;
    width: 100% !important;
  }

  html[data-front-theme] #quickbox a.quick-site {
    box-sizing: border-box !important;
    gap: 4px !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 6px !important;
    width: 100% !important;
  }

  html[data-front-theme] #quickbox .quick-site-name {
    flex: 1 1 auto !important;
  }

  html[data-front-theme] #siteinfo .site-profile-basic {
    align-items: start !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
  }

  html[data-front-theme] #siteinfo .site-profile-basic > dt,
  html[data-front-theme] #siteinfo .site-profile-basic > dd {
    align-self: start !important;
    grid-column: auto !important;
    min-width: 0 !important;
  }

  html[data-front-theme] #siteinfo .site-profile-basic > dt {
    align-items: center !important;
    min-height: 28px !important;
  }

  html[data-front-theme] #siteinfo .site-profile-basic > dd {
    min-height: 28px !important;
    overflow-wrap: anywhere !important;
  }

  html[data-front-theme] #siteinfo .site-profile-basic > dt:first-child,
  html[data-front-theme] #siteinfo .site-profile-basic > dt:first-child + dd {
    grid-column: 1 / -1 !important;
  }

  html[data-front-theme] #siteinfo .site-profile-basic .site-trust-value {
    flex-direction: row !important;
  }

  html[data-front-theme] #siteinfo .site-profile-basic .site-trust-note {
    flex-basis: 100% !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 359px) {
  html[data-front-theme] body #header #navbox .navbar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

html[data-front-theme] .front-notice-dialog {
  background: transparent;
  border: 0;
  color: #172033;
  margin: auto;
  max-width: calc(100vw - 32px);
  padding: 0;
  transform: translateY(-7vh);
  width: 410px;
}

html[data-front-theme] .front-notice-dialog::backdrop {
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(4px);
}

html[data-front-theme] .front-notice-card {
  background: linear-gradient(180deg, #fff, #fbfdff);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
  box-sizing: border-box;
  display: grid;
  gap: 14px 16px;
  grid-template-columns: 54px minmax(0, 1fr);
  overflow: hidden;
  padding: 24px;
  position: relative;
}

html[data-front-theme] .front-notice-card::before {
  background: linear-gradient(90deg, #2563eb, #0ea5e9);
  content: "";
  height: 4px;
  inset: 0 0 auto;
  position: absolute;
}

html[data-front-theme] .front-notice-close {
  align-items: center;
  background: #f2f5fa !important;
  border: 0 !important;
  border-radius: 50%;
  color: #64748b !important;
  cursor: pointer;
  display: flex;
  font-size: 22px;
  height: 34px !important;
  justify-content: center;
  line-height: 1;
  padding: 0 !important;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 34px !important;
}

html[data-front-theme] .front-notice-icon {
  align-items: center;
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .22);
  color: #fff;
  display: flex;
  font-size: 27px;
  font-weight: 900;
  height: 54px;
  justify-content: center;
  width: 54px;
}

html[data-front-theme] .front-notice-icon::before { content: "✓"; }
html[data-front-theme] .front-notice-dialog.is-info .front-notice-icon::before { content: "i"; }
html[data-front-theme] .front-notice-dialog.is-warning .front-notice-icon { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 12px 26px rgba(249, 115, 22, .2); }
html[data-front-theme] .front-notice-dialog.is-warning .front-notice-icon::before { content: "!"; }

html[data-front-theme] .front-notice-content {
  min-width: 0;
  padding-right: 28px;
}

html[data-front-theme] .front-notice-content h2 {
  color: #172033;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.35;
  margin: 1px 0 5px;
}

html[data-front-theme] .front-notice-content p {
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  overflow-wrap: anywhere;
}

html[data-front-theme] .front-notice-actions {
  align-items: center;
  display: flex;
  gap: 9px;
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: 4px;
}

html[data-front-theme] .front-notice-confirm,
html[data-front-theme] .front-notice-action {
  align-items: center;
  border-radius: 10px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  height: 40px !important;
  justify-content: center;
  min-width: 90px;
  padding: 0 17px !important;
  text-decoration: none !important;
}

html[data-front-theme] .front-notice-confirm {
  background: #f5f8fc !important;
  border: 1px solid #d7e1ee !important;
  color: #52627a !important;
}

html[data-front-theme] .front-notice-action {
  background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
  border: 1px solid #2563eb !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(37, 99, 235, .2);
}

@media (max-width: 520px) {
  html[data-front-theme] .front-notice-dialog {
    transform: translateY(-3vh);
    width: calc(100vw - 28px);
  }

  html[data-front-theme] .front-notice-card {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 21px 18px 18px;
  }

  html[data-front-theme] .front-notice-icon {
    border-radius: 14px;
    font-size: 23px;
    height: 46px;
    width: 46px;
  }

  html[data-front-theme] .front-notice-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  html[data-front-theme] .front-notice-confirm,
  html[data-front-theme] .front-notice-action {
    width: 100%;
  }
}
/* TOP ranking cards avoid stretching groups that currently contain fewer entries. */
html[data-front-theme] #mainbox-left:has(> .topsite) {
    align-items: start !important;
}

html[data-front-theme] #mainbox-left:has(> .topsite) > .topsite.is-short-ranking {
    order: 1;
}

html[data-front-theme] #homebox-right .home-statusbar .view-count-badge,
html[data-front-theme] #homebox-right .home-statusbar .pending-badge {
    background: #c2410c !important;
}

html[data-front-theme] #homebox-right .home-statusbar .rejected-badge {
    background: #a44908 !important;
}

html[data-front-theme] #homebox-right .home-statusbar .tab-label .status-svg-icon {
    flex: 0 0 1.625em !important;
    height: 1.625em !important;
    width: 1.625em !important;
}

html[data-front-theme] #homebox-right .home-statusbar .status-promo .tab-label {
    color: #1d4ed8 !important;
}

html[data-front-theme] #homebox-right .home-statusbar .status-wait .tab-label {
    color: #b45309 !important;
}

html[data-front-theme] #homebox-right .home-statusbar .status-black .tab-label {
    color: #334155 !important;
}

html[data-front-theme] #homebox-right .home-statusbar .status-fail .tab-label {
    color: #dc2626 !important;
}

html[data-front-theme] #topbox .logo h1.logo-text {
    margin: 0 !important;
}

html[data-front-theme] #subcate > h1.front-primary-heading,
html[data-front-theme] #listbox > h1.front-primary-heading,
html[data-front-theme] #listbox > .update-primary-heading {
    align-items: center !important;
    background: linear-gradient(90deg, rgba(37, 99, 235, .14), transparent) !important;
    border: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    color: #1f2937 !important;
    display: flex !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    gap: 8px !important;
    line-height: 1.35 !important;
    margin: -16px -16px 14px !important;
    min-height: 44px !important;
    padding: 11px 16px !important;
    text-indent: 0 !important;
    width: auto !important;
}

html[data-front-theme] #subcate > h1.front-primary-heading::before,
html[data-front-theme] #listbox > h1.front-primary-heading::before,
html[data-front-theme] #listbox > .update-primary-heading::before {
    background: #2563eb !important;
    border-radius: 99px !important;
    content: "" !important;
    display: inline-block !important;
    flex: 0 0 4px !important;
    height: 18px !important;
}

html[data-front-theme] #listbox > .update-primary-heading {
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    justify-content: space-between !important;
}

html[data-front-theme] #listbox > .update-primary-heading > h1.update-title-text {
    margin: 0 !important;
    padding: 0 !important;
}

html[data-front-theme] #arcbox > h1.front-primary-heading {
    align-items: center !important;
    color: #172033 !important;
    display: flex !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    margin: 0 0 12px !important;
    padding: 0 0 12px !important;
}

html[data-front-theme] h1.front-standalone-heading {
    color: #172033 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    grid-column: 1 / -1 !important;
    line-height: 1.3 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

@media (max-width: 640px) {
    html[data-front-theme] #listbox > .update-primary-heading {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

html[data-front-theme] .site-rank-badge--baidu {
    --rank-color: #245fb8 !important;
}

html[data-front-theme] .site-rank-badge--sogou {
    --rank-color: #b83a24 !important;
}

html[data-front-theme] .site-rank-badge--so {
    --rank-color: #18743a !important;
}

html[data-front-theme] #subcate.webdir-subcategories .scatelist {
    align-items: center !important;
    gap: 10px 12px !important;
    padding: 12px 0 2px !important;
}

html[data-front-theme] #subcate.webdir-subcategories .scatelist li {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transform: none !important;
}

html[data-front-theme] #subcate.webdir-subcategories .scatelist li > a {
    display: inline-flex !important;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 0 8px 0 14px;
    border: 1px solid #dbe7f5;
    border-radius: 12px;
    background: linear-gradient(145deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 4px 12px rgba(30, 64, 175, .06);
    color: #2459bd !important;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}

html[data-front-theme] #subcate.webdir-subcategories .webdir-subcategory-name {
    white-space: nowrap;
}

html[data-front-theme] #subcate.webdir-subcategories .webdir-subcategory-count {
    display: inline-flex;
    min-width: 28px;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 8px;
    background: #edf4ff;
    color: #4f6382;
    font-size: 12px;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease;
}

html[data-front-theme] #subcate.webdir-subcategories .scatelist li > a:hover {
    border-color: #9bb9ed;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .12);
    color: #17469d !important;
    transform: translateY(-2px);
}

html[data-front-theme] #subcate.webdir-subcategories .scatelist li > a:hover .webdir-subcategory-count {
    background: #2563eb;
    color: #ffffff;
}

html[data-front-theme] #subcate.webdir-subcategories .scatelist li > a:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .24);
    outline-offset: 2px;
}

.front-vip-ad-slot iframe {
    display: block;
    max-width: 100%;
    border: 0;
}

@media (max-width: 760px) {
    html[data-front-theme] #mainbox-left:has(> .topsite) > .topsite.is-short-ranking {
        order: 0;
    }

    html[data-front-theme] #subcate.webdir-subcategories {
        box-sizing: border-box;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        overflow: hidden;
    }

    html[data-front-theme] #subcate.webdir-subcategories .scatelist {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        box-sizing: border-box;
        gap: 8px !important;
    }

    html[data-front-theme] #subcate.webdir-subcategories .scatelist li {
        width: 100% !important;
        min-width: 0 !important;
    }

    html[data-front-theme] #subcate.webdir-subcategories .scatelist li > a {
        width: 100%;
        min-height: 38px;
        box-sizing: border-box;
        justify-content: space-between;
        gap: 7px;
        padding: 0 7px 0 11px;
        font-size: 14px;
    }

    html[data-front-theme] #subcate.webdir-subcategories .webdir-subcategory-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html[data-front-theme] #subcate.webdir-subcategories .webdir-subcategory-count {
        min-width: 25px;
        height: 24px;
        padding: 0 7px;
        font-size: 11px;
    }
}