* {
    box-sizing: border-box;
}

.detail-layout .detail-info dl > div.weight-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(118px, 1fr)) !important;
    gap: 18px 18px !important;
    width: 100% !important;
}

.detail-layout .detail-info dl > div.weight-row .weight-field {
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.detail-layout .detail-info dl > div.weight-row .weight-field dt {
    flex: 0 0 auto !important;
    max-width: none !important;
}

.detail-layout .detail-info dl > div.weight-row .weight-field dd {
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
}

.detail-layout .detail-info dl > div.weight-row .weight,
.detail-layout .detail-info dl > div.weight-row .weight-img {
    flex: 0 0 auto;
}

@media (max-width: 1180px) {
    .detail-layout .detail-info dl > div.weight-row {
        grid-template-columns: repeat(5, minmax(96px, 1fr)) !important;
        gap: 14px 12px !important;
    }

    .detail-layout .detail-info dl > div.weight-row .weight-field {
        gap: 6px !important;
    }
}

@media (max-width: 760px) {
    .detail-layout .detail-info dl > div.weight-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 12px !important;
    }

    .weight-rule-grid {
        grid-template-columns: .8fr 1.2fr;
    }

    .weight-rule-cell {
        min-height: 32px;
        padding: 0 10px;
        font-size: 13px;
    }
}

@media (max-width: 420px) {
    .detail-layout .detail-info dl > div.weight-row {
        grid-template-columns: 1fr !important;
    }
}

body {
    margin: 0;
    color: #243042;
    background: #f5f7fb;
    font: 15px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

.navtx-wrap {
    width: min(1260px, calc(100% - 32px));
    margin: 0 auto;
}

.navtx-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid #e7ebf2;
    backdrop-filter: blur(12px);
}

.navtx-header-inner {
    height: 74px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.navtx-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
}

.navtx-logo span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    background: #1f8f5f;
    border-radius: 8px;
}

.navtx-logo img {
    width: auto;
    max-width: 160px;
    max-height: 42px;
    object-fit: contain;
}

.navtx-logo strong {
    font-size: 20px;
    color: #172033;
    white-space: nowrap;
}

.navtx-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.navtx-menu > a,
.navtx-menu-dropdown > a {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    color: #526173;
    border-radius: 8px;
    font-size: 15px;
}

.navtx-menu a:hover,
.navtx-menu .is-active {
    color: #168454;
    background: #e8f6ef;
}

.navtx-menu-dropdown {
    position: relative;
}

.navtx-dropdown-panel {
    position: absolute;
    left: 0;
    top: 44px;
    width: 360px;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(27, 39, 61, .12);
}

.navtx-menu-dropdown:hover .navtx-dropdown-panel {
    display: grid;
}

.navtx-dropdown-panel a {
    padding: 7px 8px;
    color: #526173;
    border-radius: 6px;
    text-align: center;
}

.navtx-header-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    white-space: nowrap;
}

.navtx-weather {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 10px 0 8px;
    color: #334155;
    border: 1px solid #eef2f7;
    border-radius: 15px;
    background: #fff;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    min-width: 0;
}

.navtx-weather-line {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.weather-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.navtx-weather .weather-city {
    max-width: 48px;
    overflow: hidden;
    color: #1f2937;
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navtx-weather .weather-name {
    color: #475569;
}

.navtx-weather em {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    padding: 0 4px;
    color: #fff;
    background: #6ac51d;
    border-radius: 9px;
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
}

.navtx-weather small {
    margin-left: 2px;
    color: #64748b;
    font-size: 12px;
}

.navtx-weather.is-loading {
    color: #667085;
    background: #f8fbff;
}

.weather-dot {
    position: relative;
    width: 14px;
    height: 9px;
    border: 1px solid #98a2b3;
    border-top: 0;
    border-radius: 50%;
}

.weather-dot::before {
    content: "";
    position: absolute;
    left: 2px;
    top: -5px;
    width: 8px;
    height: 8px;
    border: 1px solid #98a2b3;
    border-bottom: 0;
    border-radius: 50%;
    background: #fff;
}

.navtx-clock {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: #738094;
    white-space: nowrap;
}

.navtx-clock span {
    font-size: 22px;
    font-weight: 700;
    color: #1f8f5f;
}

.navtx-group-link {
    height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    color: #1f8f5f;
    background: #e8f6ef;
    border-radius: 8px;
    white-space: nowrap;
}

.navtx-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    background: #eef2f6;
    border-radius: 8px;
}

.navtx-menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px auto;
    background: #526173;
}

.search-hero {
    padding: 28px 0 24px;
    background:
        radial-gradient(circle at 22% 0%, rgba(238, 232, 246, .82), transparent 34%),
        radial-gradient(circle at 78% 12%, rgba(245, 236, 229, .72), transparent 38%),
        #faf9fb;
    border-bottom: 1px solid #edf0f5;
}

.search-box {
    display: grid;
    gap: 0;
    max-width: 860px;
    margin: 0 auto;
}

.search-tabs,
.search-engine-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-tabs {
    gap: 34px;
    height: 34px;
}

.search-tabs button,
.search-engine-row button {
    border: 0;
    padding: 0;
    color: #8e8b94;
    background: transparent;
    font-size: 14px;
    cursor: pointer;
}

.search-tabs button {
    position: relative;
    height: 34px;
}

.search-tabs button.is-active {
    color: #34313a;
    font-weight: 600;
}

.search-tabs button.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 34px;
    height: 4px;
    border-radius: 4px;
    background: #77747c;
    transform: translateX(-50%);
}

.search-input-shell {
    position: relative;
    height: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    align-items: center;
    margin-top: -1px;
    background: #c6c4c7;
    border-radius: 999px;
}

.search-input-shell::after {
    content: "";
    position: absolute;
    left: 238px;
    bottom: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #c6c4c7;
}

.search-box input,
.search-input-shell input {
    width: 100%;
    border: 0;
    padding: 0 22px;
    color: #53515a;
    background: transparent;
    outline: 0;
    font-size: 15px;
}

.search-box input::placeholder,
.search-input-shell input::placeholder {
    color: #8d8a92;
}

.search-input-shell > button {
    position: relative;
    width: 58px;
    height: 52px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.search-input-shell > button::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 17px;
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 50%;
}

.search-input-shell > button::after {
    content: "";
    position: absolute;
    left: 33px;
    top: 31px;
    width: 10px;
    height: 3px;
    border-radius: 3px;
    background: #fff;
    transform: rotate(45deg);
}

.search-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 30;
    padding: 10px;
    background: #fff;
    border: 1px solid #e7e3ea;
    border-radius: 16px;
    box-shadow: 0 20px 44px rgba(22, 18, 30, .12);
}

.search-suggest[hidden] {
    display: none !important;
}

.search-suggest-list {
    display: grid;
    gap: 4px;
}

.search-suggest-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    color: #4b4a53;
    font-size: 14px;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.search-suggest-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-suggest-item i {
    color: #a19da8;
    font-style: normal;
}

.search-suggest-item:hover,
.search-suggest-item.is-active {
    color: #202127;
    background: #f3f6fb;
}

.search-suggest-empty,
.search-suggest-loading {
    padding: 12px 14px;
    color: #8d8a92;
    font-size: 13px;
}

.search-engine-row {
    gap: 38px;
    min-height: 42px;
    padding-top: 10px;
}

.search-engine-row button.is-active {
    color: #6d6972;
    font-weight: 600;
}

.search-hot-wrap {
    position: relative;
    z-index: 8;
    margin: 0 auto;
    width: min(100%, 880px);
}

.search-hot-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 38px 0 6px;
    overflow: hidden;
}

.search-hot-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 118px;
    height: 24px;
    padding: 0 10px;
    color: #4b5563;
    border-radius: 14px;
    background: #f1f3f7;
    font-size: 13px;
    line-height: 24px;
}

.search-hot-chip:hover {
    color: #2563eb;
    background: #eef4ff;
}

.search-hot-wrap.is-loading .search-hot-row {
    color: #667085;
}

.search-hot-loading {
    max-width: none;
    border: 1px dashed #d7e3f3;
    color: #667085;
    background: #f8fbff;
}

.search-hot-chip img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.search-hot-chip span,
.search-hot-more span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-hot-chip em,
.search-hot-more em {
    display: inline-grid;
    min-width: 16px;
    height: 16px;
    place-items: center;
    padding: 0 3px;
    color: #fff;
    border-radius: 4px;
    background: #ff4d1f;
    font-size: 11px;
    font-style: normal;
    line-height: 16px;
    flex: 0 0 auto;
}

.search-hot-chip em.is-new,
.search-hot-more em.is-new {
    background: #18c46f;
}

.search-hot-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.search-hot-toggle::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 10px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #64748b;
    border-bottom: 1.5px solid #64748b;
    transform: rotate(45deg);
    transition: transform .18s ease, top .18s ease;
}

.search-hot-wrap:hover .search-hot-toggle::before,
.search-hot-wrap:focus-within .search-hot-toggle::before {
    top: 12px;
    transform: rotate(225deg);
}

.search-hot-more {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 35px;
    z-index: 20;
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 28px;
    padding: 18px 20px 18px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .14);
}

.search-hot-wrap:hover .search-hot-more,
.search-hot-wrap:focus-within .search-hot-more {
    display: grid;
}

.search-hot-more::before {
    content: "";
    position: absolute;
    right: 18px;
    top: -7px;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: rotate(45deg);
}

.search-hot-more a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #475569;
    font-size: 13px;
}

.search-hot-more a:hover {
    color: #2563eb;
}

.search-hot-more i {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: #cfd6df;
    flex: 0 0 auto;
    position: relative;
}

.search-hot-more i::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
}

.hero-recommend {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.home-directory {
    display: grid;
    gap: 14px;
    padding: 14px 0;
}

.home-link-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 52px;
    gap: 18px 36px;
    padding: 34px 44px 36px;
    background: #fff;
    border: 1px solid #eef1f5;
    overflow: visible;
}

.home-link-item {
    position: relative;
    min-width: 0;
    height: 52px;
    color: #1e293b;
    font-size: 15px;
}

.home-link-item:hover {
    color: #1f8f5f;
}

.home-link-grid:first-child .home-link-item:first-child {
    color: #f45c4f;
}

.home-link-main {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-link-main img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
    flex: 0 0 auto;
}

.home-link-main span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-link-main b {
    width: 0;
    height: 0;
    margin-left: auto;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #f36a5a;
    opacity: 0;
}

.home-link-item:hover .home-link-main b,
.home-link-item:focus-within .home-link-main b {
    opacity: 1;
}

.home-link-item em {
    position: absolute;
    right: -8px;
    top: -7px;
    z-index: 2;
    padding: 1px 4px;
    color: #fff;
    background: #ff8a00;
    border-radius: 2px;
    font-size: 10px;
    font-style: normal;
    line-height: 1.4;
    pointer-events: none;
}

.home-link-menu {
    position: absolute;
    left: -12px;
    top: 52px;
    z-index: 12;
    width: 126px;
    display: none;
    padding: 10px 0;
    background: #fff;
    border: 1px solid #edf0f5;
    box-shadow: 0 14px 28px rgba(29, 41, 57, .12);
}

.home-link-menu a {
    height: 40px;
    display: grid;
    place-items: center;
    color: #333d4d;
}

.home-link-menu a:hover {
    color: #1f8f5f;
    background: #f6fbf8;
}

.home-link-item:hover .home-link-menu,
.home-link-item:focus-within .home-link-menu {
    display: block;
}

.home-tool-strip {
    position: relative;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    min-height: 136px;
    margin-bottom: 14px;
    padding: 26px 30px;
    background: #fff;
    border: 1px solid #eef1f5;
}

.home-tool-title {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: start;
    padding-top: 8px;
}

.home-tool-title span {
    width: 3px;
    height: 16px;
    background: #20b483;
}

.home-tool-title h2 {
    margin: 0;
    color: #0f513f;
    font-size: 17px;
    font-weight: 500;
}

.home-tool-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    align-items: center;
    min-width: 0;
}

.home-tool-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    min-width: 0;
    color: #1f2937;
}

.home-tool-item:hover {
    color: #13966b;
}

.home-tool-item img {
    grid-row: 1 / 3;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    background: #f4f7fb;
}

.home-tool-item strong {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 500;
}

.home-tool-item em {
    color: #7b8794;
    font-size: 14px;
    font-style: normal;
}

.home-tool-more {
    position: absolute;
    top: 18px;
    right: 24px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: #c6ccd4;
    font-size: 28px;
    line-height: 1;
}

.home-tool-more:hover {
    color: #13966b;
}

.home-novel-panel {
    display: grid;
    gap: 18px;
    margin-bottom: 0;
    padding: 26px 28px 28px;
    background: #fff;
    border: 1px solid #eef1f5;
}

.home-novel-head {
    display: flex;
    align-items: center;
    gap: 18px;
}

.home-novel-head h2 {
    margin: 0;
    color: #10243f;
    font-size: 21px;
    font-weight: 600;
}

.home-novel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-novel-tabs span {
    height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    color: #40536b;
    font-size: 13px;
    border-radius: 15px;
    background: #f1f5f9;
}

.home-novel-tabs button {
    height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    color: #40536b;
    font-size: 13px;
    border: 0;
    border-radius: 15px;
    background: #f1f5f9;
    cursor: pointer;
}

.home-novel-tabs .is-active {
    color: #fff;
    background: #ff3d7f;
}

.home-novel-content {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.home-novel-rank {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
}

.home-novel-rank a {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    color: #112844;
    font-size: 14px;
    font-weight: 400;
}

.home-novel-rank i {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #334155;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    border-radius: 6px;
    background: #e2e8f0;
}

.home-novel-rank a:nth-child(1) i {
    color: #fff;
    background: #ffbf3f;
}

.home-novel-rank a:nth-child(2) i {
    color: #fff;
    background: #ff6b5f;
}

.home-novel-rank a:nth-child(3) i {
    color: #fff;
    background: #8aa0bd;
}

.home-novel-rank span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
}

.home-novel-rank em {
    color: #94a3b8;
    font-size: 12px;
    font-style: normal;
}

.home-novel-card {
    display: grid;
    min-width: 0;
    color: #10243f;
    background: linear-gradient(180deg, #fff3f7 0%, #fff 100%);
    border-radius: 8px;
    overflow: hidden;
}

.home-novel-card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #eef2f6;
}

.home-novel-card strong {
    min-width: 0;
    margin: 10px 10px 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 500;
}

.home-novel-card span {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 10px 10px;
}

.home-novel-card em {
    color: #52657d;
    font-size: 12px;
    font-style: normal;
}

.home-novel-card em {
    padding: 3px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .78);
}

.home-novel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(118px, 1fr));
    gap: 16px;
}

.home-novel-card {
    grid-template-rows: auto auto auto;
}

.home-info-right .home-novel-panel {
    padding: 22px 26px 24px;
    overflow: hidden;
}

.home-info-right .home-novel-content {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.home-info-right .home-novel-rank {
    grid-column: 1 / span 2;
    grid-row: 1;
}

.home-info-right .home-novel-grid {
    display: contents;
}

.home-info-right .home-novel-card {
    grid-template-rows: auto auto auto;
}

.home-info-right .home-novel-card:nth-child(1) {
    grid-column: 3;
    grid-row: 1;
}

.home-info-right .home-novel-card:nth-child(2) {
    grid-column: 4;
    grid-row: 1;
}

.home-info-right .home-novel-card:nth-child(3) {
    grid-column: 5;
    grid-row: 1;
}

.home-info-right .home-novel-card:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
}

.home-info-right .home-novel-card:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
}

.home-info-right .home-novel-card:nth-child(6) {
    grid-column: 3;
    grid-row: 2;
}

.home-info-right .home-novel-card:nth-child(7) {
    grid-column: 4;
    grid-row: 2;
}

.home-info-right .home-novel-card:nth-child(8) {
    grid-column: 5;
    grid-row: 2;
}

.home-anime-panel {
    display: grid;
    gap: 16px;
    padding: 22px 26px 24px;
    background: #fff;
    border: 1px solid #eef1f5;
}

.home-anime-head {
    display: flex;
    align-items: center;
    gap: 18px;
}

.home-anime-head h2 {
    margin: 0;
    color: #10243f;
    font-size: 21px;
    font-weight: 600;
}

.home-anime-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-anime-tabs button {
    height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    color: #40536b;
    font-size: 13px;
    border: 0;
    border-radius: 15px;
    background: #f1f5f9;
    cursor: pointer;
}

.home-anime-tabs button.is-active {
    color: #fff;
    background: #ff3d7f;
}

.home-anime-content {
    display: none;
}

.home-anime-content.is-active {
    display: grid;
    grid-template-columns: 1.35fr 1.4fr;
    gap: 16px;
}

.home-anime-lead,
.home-anime-feature a {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #fff;
    border-radius: 8px;
    background: #eef2f6;
}

.home-anime-lead {
    min-height: 236px;
}

.home-anime-lead img,
.home-anime-feature img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .22s ease;
}

.home-anime-lead:hover img,
.home-anime-feature a:hover img {
    transform: scale(1.03);
}

.home-anime-lead::after,
.home-anime-feature a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .66) 100%);
}

.home-anime-lead strong,
.home-anime-feature strong {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 42px;
    z-index: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 18px;
    font-weight: 500;
}

.home-anime-lead span {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 1;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.home-anime-lead em {
    padding: 3px 8px;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    border-radius: 5px;
    background: rgba(0, 0, 0, .32);
}

.home-anime-feature {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.home-anime-feature a {
    min-height: 111px;
}

.home-anime-feature strong {
    bottom: 12px;
    font-size: 15px;
}

.home-anime-lists {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.home-anime-list {
    min-width: 0;
    padding: 14px 12px 12px;
    border-radius: 8px;
    background: linear-gradient(180deg, #eff8ff 0%, #fff 100%);
}

.home-anime-list h3 {
    margin: 0 0 10px;
    color: #0f5ca8;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
}

.home-anime-list a {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    color: #10243f;
}

.home-anime-list a + a {
    margin-top: 10px;
}

.home-anime-list img {
    width: 58px;
    height: 42px;
    object-fit: cover;
    border-radius: 6px;
    background: #eef2f6;
}

.home-anime-list span {
    min-width: 0;
}

.home-anime-list strong,
.home-anime-list em {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-anime-list strong {
    font-size: 13px;
    font-weight: 500;
}

.home-anime-list em {
    margin-top: 4px;
    color: #7b8794;
    font-size: 12px;
    font-style: normal;
}

.home-douyin-panel {
    padding: 24px 26px 26px;
    background: #fff;
    border: 1px solid #eef1f5;
}

.home-douyin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.home-douyin-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 21px;
    font-weight: 600;
}

.home-douyin-head a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 12px;
    color: #ff5a3c;
    font-size: 13px;
    border: 1px solid #ff9b86;
    border-radius: 15px;
    background: #fff;
}

.home-douyin-layout {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.home-douyin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.home-douyin-top-grid {
    grid-column: span 3;
}

.home-douyin-bottom {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.home-douyin-card {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #fff;
    border-radius: 8px;
    background: linear-gradient(180deg, #edf2f7 0%, #d8e0e8 100%);
    aspect-ratio: 3 / 4.9;
}

.home-douyin-card::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .68) 100%);
}

.home-douyin-card::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5V7z' fill='%23111827'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .24);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.86);
    transition: opacity .18s ease, transform .18s ease, background .18s ease;
    pointer-events: none;
}

.home-douyin-card:hover::before,
.home-douyin-card:focus-visible::before {
    opacity: 1;
    background-color: #fff;
    transform: translate(-50%, -50%) scale(1);
}

.home-douyin-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .22s ease;
}

.home-douyin-card:hover img {
    transform: scale(1.035);
}

.home-douyin-card span {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 11px;
    z-index: 1;
    display: -webkit-box;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-douyin-rank {
    display: flex;
    grid-column: span 2;
    flex-direction: column;
    min-width: 0;
    padding: 16px 18px 12px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 90% 0%, rgba(255, 61, 127, .22), transparent 34%),
        linear-gradient(180deg, #f4fffb 0%, #fff 62%);
}

.home-douyin-rank h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 11px;
    color: #10243f;
    font-size: 17px;
    font-weight: 600;
}

.home-douyin-rank h3 b {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: #fff;
    font-size: 15px;
    border-radius: 7px;
    background: linear-gradient(135deg, #00f2ea, #ff0050);
}

.home-douyin-rank a {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
    height: 29px;
    color: #15243d;
}

.home-douyin-rank i {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: #0f172a;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    border-radius: 5px;
}

.home-douyin-rank a:nth-of-type(1) i {
    background: #ffc43d;
}

.home-douyin-rank a:nth-of-type(2) i {
    background: #ff6b5f;
}

.home-douyin-rank a:nth-of-type(3) i {
    background: #8aa0bd;
}

.home-douyin-rank span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
}

.home-news-panel {
    padding: 22px 26px 24px;
    background: #fff;
    border: 1px solid #eef1f5;
}

.home-news-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.home-news-head h2 {
    margin: 0;
    color: #10243f;
    font-size: 21px;
    font-weight: 600;
}

.home-news-head div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #7b8794;
    font-size: 13px;
}

.home-news-head a {
    color: #334155;
}

.home-news-head span {
    width: 1px;
    height: 12px;
    background: #d9dee7;
}

.home-news-layout {
    display: grid;
    grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr);
    gap: 20px;
    align-items: start;
}

.home-news-left {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.home-news-lead {
    position: relative;
    display: block;
    min-height: 228px;
    color: #fff;
    border-radius: 8px;
    overflow: hidden;
    background: #eef2f6;
}

.home-news-lead img {
    width: 100%;
    height: 100%;
    min-height: 228px;
    object-fit: cover;
    transition: transform .25s ease;
}

.home-news-lead:hover img {
    transform: scale(1.03);
}

.home-news-lead::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .66) 100%);
}

.home-news-lead span {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 1;
}

.home-news-lead strong {
    display: -webkit-box;
    margin-bottom: 7px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-news-lead em {
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-style: normal;
}

.home-news-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.home-news-under {
    display: grid;
    gap: 12px;
}

.home-news-small {
    display: grid;
    gap: 12px;
}

.home-news-item,
.home-news-under-item,
.home-news-small a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 12px;
    min-height: 76px;
    color: #10243f;
}

.home-news-item {
    grid-template-columns: minmax(0, 1fr) 114px;
    min-height: 74px;
}

.home-news-item span,
.home-news-under-item span,
.home-news-small a span {
    min-width: 0;
}

.home-news-item strong,
.home-news-under-item strong,
.home-news-small a strong {
    display: -webkit-box;
    color: #1e293b;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-news-item em,
.home-news-under-item em,
.home-news-small a em {
    display: block;
    margin-top: 6px;
    color: #8a94a3;
    font-size: 12px;
    font-style: normal;
}

.home-news-item img,
.home-news-under-item img,
.home-news-small a img {
    width: 92px;
    height: 68px;
    object-fit: cover;
    border-radius: 8px;
    background: #eef2f6;
}

.home-news-item img {
    width: 114px;
    height: 74px;
}

.home-news-item:hover strong,
.home-news-under-item:hover strong,
.home-news-small a:hover strong {
    color: #ff3d7f;
}

.home-video-panel {
    position: relative;
    padding: 20px 20px 20px;
    background: #fff;
    border: 0;
}

.home-video-panel::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: 0;
    height: 1px;
    background: #e9edf4;
}

.home-video-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    margin-bottom: 14px;
}

.home-video-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #111827;
    font-size: 17px;
    font-weight: 500;
}

.home-video-head h2 i {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: conic-gradient(from 30deg, #2bd66f, #19b8ff, #ffe33b, #2bd66f);
    position: relative;
}

.home-video-head h2 i::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    width: 0;
    height: 0;
    border-left: 8px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.home-video-head h2 span {
    color: #404a57;
    font-size: 15px;
    font-weight: 400;
}

.home-video-head a {
    color: #1f2937;
    font-size: 13px;
}

.home-video-head a b {
    margin-left: 5px;
    color: #64748b;
    font-size: 20px;
    font-weight: 400;
    vertical-align: -2px;
}

.home-video-top {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(170px, .98fr) minmax(170px, .98fr);
    gap: 8px;
    align-items: stretch;
}

.home-video-hero {
    position: relative;
    min-height: 232px;
    overflow: hidden;
    border-radius: 7px;
    background: #111827;
}

.home-video-slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity .24s ease;
}

.home-video-slide.is-active {
    opacity: 1;
    z-index: 1;
}

.home-video-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.02);
}

.home-video-slide::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8));
}

.home-video-slide span {
    position: absolute;
    z-index: 2;
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 28px);
    overflow: hidden;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-video-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 28px;
    height: 42px;
    margin-top: -21px;
    color: #fff;
    border: 0;
    background: rgba(0, 0, 0, .22);
    cursor: pointer;
    font-size: 28px;
    font-family: Arial, sans-serif;
    line-height: 38px;
}

.home-video-arrow:hover {
    background: rgba(0, 0, 0, .36);
}

.home-video-arrow.is-prev {
    left: 0;
    border-radius: 0 20px 20px 0;
}

.home-video-arrow.is-next {
    right: 0;
    border-radius: 20px 0 0 20px;
}

.home-video-dots {
    position: absolute;
    z-index: 3;
    right: 16px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-video-dots button {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
}

.home-video-dots button.is-active {
    background: #fff;
}

.home-video-categories,
.home-video-rank {
    min-width: 0;
    padding: 16px 16px 12px;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    background: #f8fafc;
}

.home-video-categories h3,
.home-video-rank h3 {
    margin: 0 0 14px;
    color: #111827;
    font-size: 18px;
    font-weight: 600;
}

.home-video-categories div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px 12px;
}

.home-video-categories a {
    overflow: hidden;
    color: #334155;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-video-categories a:hover {
    color: #0ea5e9;
}

.home-video-rank-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.home-video-rank-head span {
    display: flex;
    gap: 4px;
}

.home-video-rank-head span i {
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    color: #4b5563;
    border-radius: 2px;
    background: #e5e7eb;
    font-size: 12px;
    font-style: normal;
}

.home-video-rank-head span i:first-child {
    color: #fff;
    background: #858b96;
}

.home-video-rank ol {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-video-rank li a {
    display: grid;
    grid-template-columns: 20px minmax(0, .8fr) minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: #334155;
}

.home-video-rank li i {
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    color: #9ca3af;
    border-radius: 4px;
    font-size: 13px;
    font-style: italic;
    font-weight: 600;
}

.home-video-rank li:nth-child(1) i,
.home-video-rank li:nth-child(2) i,
.home-video-rank li:nth-child(3) i {
    color: #fff;
}

.home-video-rank li:nth-child(1) i { background: #ff3b30; }
.home-video-rank li:nth-child(2) i { background: #ff9500; }
.home-video-rank li:nth-child(3) i { background: #ffcc00; }

.home-video-rank li span,
.home-video-rank li em {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-video-rank li em {
    color: #9aa4b2;
    font-style: normal;
}

.home-video-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 20px;
}

.home-video-card {
    overflow: hidden;
    border: 1px solid #dfe5ee;
    border-radius: 7px;
    background: #f8fafc;
}

.home-video-card-cover {
    position: relative;
    display: block;
    height: 116px;
    overflow: hidden;
    color: #fff;
}

.home-video-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .22s ease;
}

.home-video-card:hover .home-video-card-cover img {
    transform: scale(1.04);
}

.home-video-card-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .68));
}

.home-video-card-cover b,
.home-video-card-cover strong {
    position: absolute;
    z-index: 1;
    left: 10px;
}

.home-video-card-cover b {
    top: 12px;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .45);
    font-size: 12px;
    font-weight: 600;
}

.home-video-card-cover strong {
    right: 10px;
    bottom: 10px;
    overflow: hidden;
    font-size: 18px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-video-mini-list {
    display: grid;
    gap: 8px;
    padding: 9px 8px 2px;
}

.home-video-mini-list a {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
}

.home-video-mini-list img {
    width: 58px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    background: #eef2f6;
}

.home-video-mini-list span {
    min-width: 0;
}

.home-video-mini-list strong,
.home-video-mini-list em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-video-mini-list strong {
    color: #1f2937;
    font-size: 13px;
    font-weight: 500;
}

.home-video-mini-list em {
    margin-top: 3px;
    color: #8a94a3;
    font-size: 12px;
    font-style: normal;
}

.home-video-card-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 10px 0 9px;
}

.home-video-card-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c6ccd6;
}

.home-video-card-dots i:first-child {
    background: #9ca3af;
}

.home-drama-panel {
    gap: 10px;
    padding-top: 20px;
    padding-bottom: 22px;
    container-type: inline-size;
}

.home-drama-content {
    display: none;
}

.home-drama-content.is-active {
    display: grid;
}

.home-info-right .home-drama-content.is-active {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px 12px;
    align-items: start;
}

.home-drama-top {
    display: contents;
    align-items: start;
}

.home-drama-top-cards {
    display: grid;
    grid-column: 3 / -1;
    grid-row: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.home-drama-bottom {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px 12px;
    min-width: 0;
}

.home-info-right .home-drama-card,
.home-info-right .home-drama-card:nth-child(1),
.home-info-right .home-drama-card:nth-child(2),
.home-info-right .home-drama-card:nth-child(3),
.home-info-right .home-drama-card:nth-child(4),
.home-info-right .home-drama-card:nth-child(5),
.home-info-right .home-drama-card:nth-child(6),
.home-info-right .home-drama-card:nth-child(7),
.home-info-right .home-drama-card:nth-child(8) {
    grid-column: auto;
    grid-row: auto;
}

.home-info-right .home-drama-rank {
    grid-column: 1 / span 2;
    grid-row: 1;
    min-width: 0;
}

.home-drama-rank a {
    position: relative;
    grid-template-columns: 24px minmax(0, 1fr);
    min-height: 25px;
    padding: 0;
    border-radius: 8px;
    transition: background .18s ease;
}

.home-drama-rank a:hover {
    background: #fff3f7;
}

.home-drama-rank a.is-active {
    background: #fff3f7;
    padding: 6px 8px;
}

.home-drama-rank-text {
    position: relative;
    z-index: 1;
}

.home-drama-rank-preview {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) 62px;
    gap: 8px;
    align-items: start;
    margin: 0 0 0 32px;
    min-width: 0;
}

.home-drama-rank a.is-active .home-drama-rank-preview,
.home-drama-rank a:hover .home-drama-rank-preview {
    display: grid;
}

.home-drama-rank-preview strong {
    display: block;
    margin-bottom: 4px;
    color: #ff3d7f;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-drama-rank-preview small {
    display: -webkit-box;
    color: #7a8798;
    font-size: 12px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-drama-rank-preview img {
    width: 62px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 6px;
    background: #eef2f6;
}

.home-drama-card {
    min-width: 0;
    background: #f8fbff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.home-drama-card:nth-child(5n + 1) {
    background: #fff3f7;
}

.home-drama-card:nth-child(5n + 2) {
    background: #eef8ff;
}

.home-drama-card:nth-child(5n + 3) {
    background: #f1f8f3;
}

.home-drama-card:nth-child(5n + 4) {
    background: #fff8eb;
}

.home-drama-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 36, 63, .08);
}

.home-drama-cover {
    position: relative;
    display: block;
    margin: 0;
}

.home-drama-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
}

.home-drama-cover b {
    position: absolute;
    right: 7px;
    bottom: 7px;
    padding: 2px 7px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    border-radius: 999px;
    background: rgba(0, 0, 0, .56);
}

.home-drama-card strong {
    font-size: 14px;
    font-weight: 500;
}

.home-drama-bottom .home-drama-card strong {
    margin: 6px 8px 3px;
    font-size: 13px;
}

.home-drama-bottom .home-drama-card span:last-child {
    margin: 0 8px 6px;
}

.home-drama-card span:last-child {
    min-height: 22px;
}

@container (max-width: 760px) {
    .home-info-right .home-drama-content.is-active {
        grid-template-columns: 1fr;
    }

    .home-drama-top {
        display: grid;
        grid-template-columns: 1fr;
    }

    .home-drama-top-cards {
        grid-column: auto;
        grid-row: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-drama-bottom {
        grid-column: auto;
        grid-row: auto;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

}

@media (max-width: 1160px) {
    .home-video-top {
        grid-template-columns: 1fr;
    }

    .home-video-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-novel-content {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .home-info-right .home-novel-content {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .home-info-right .home-drama-content.is-active {
        grid-template-columns: 1fr;
    }

    .home-drama-top {
        display: grid;
        grid-template-columns: 1fr;
    }

    .home-drama-top-cards {
        grid-column: auto;
        grid-row: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-drama-bottom {
        grid-column: auto;
        grid-row: auto;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .home-news-layout {
        grid-template-columns: 1fr;
    }

    .home-anime-content.is-active {
        grid-template-columns: 1fr;
    }

    .home-anime-lists {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-drama-rank-preview {
        grid-template-columns: minmax(0, 1fr) 64px;
    }

    .home-drama-rank-preview img {
        width: 64px;
    }

    .home-novel-grid {
        grid-template-columns: repeat(4, minmax(96px, 1fr));
    }

    .home-info-right .home-novel-grid {
        display: contents;
    }

    .home-novel-card {
        grid-template-rows: auto auto auto;
    }
}

.ad-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 0 14px;
}

.ad-strip a {
    height: 44px;
    display: grid;
    place-items: center;
    color: #167252;
    background: #ecfbf4;
    border: 1px solid #cceedd;
    border-radius: 8px;
    font-weight: 700;
}

.collect-page {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 42px;
    padding: 34px 0 52px;
    background: #fff;
}

.navtx-collect-body .navtx-header {
    position: absolute;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
}

.navtx-collect-body main {
    padding-top: 0;
    background: #fff;
}

.navtx-collect-body .navtx-logo span {
    color: #fff;
    background: transparent;
    border: 2px solid rgba(255,255,255,.88);
}

.navtx-collect-body .navtx-logo strong,
.navtx-collect-body .navtx-menu a,
.navtx-collect-body .navtx-clock,
.navtx-collect-body .navtx-clock span,
.navtx-collect-body .navtx-clock small,
.navtx-collect-body .navtx-group-link {
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .28);
}

.navtx-collect-body .navtx-menu a:hover,
.navtx-collect-body .navtx-menu a.is-active {
    color: #169b7c;
    text-shadow: none;
    background: rgba(255,255,255,.9);
}

.collect-hero {
    position: relative;
    min-height: 330px;
    display: grid;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 9% 8%, rgba(255,255,255,.22), transparent 18%),
        radial-gradient(circle at 84% 0%, rgba(255,255,255,.14), transparent 18%),
        linear-gradient(135deg, rgba(255, 176, 74, .92) 0%, rgba(245, 93, 55, .9) 38%, rgba(17, 162, 126, .93) 72%, rgba(14, 150, 128, .95) 100%);
    overflow: hidden;
}

.collect-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(17, 24, 39, .24), rgba(17, 24, 39, .08) 42%, rgba(17, 24, 39, 0));
    pointer-events: none;
}

.collect-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 28%, rgba(255,255,255,.22) 0 6%, transparent 7%),
        radial-gradient(ellipse at 35% 65%, rgba(70, 34, 54, .24) 0 18%, transparent 19%),
        radial-gradient(ellipse at 68% 28%, rgba(45, 62, 98, .35) 0 22%, transparent 23%);
    filter: blur(10px);
    opacity: .75;
}

.collect-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.collect-hero p {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 300;
}

.collect-hero h1 {
    margin: 0;
    font-size: 42px;
    font-weight: 300;
    letter-spacing: 2px;
}

.collect-main {
    min-width: 0;
}

.collect-side-nav {
    display: grid;
    gap: 22px;
    align-content: start;
    padding-top: 6px;
    border-right: 1px solid #eef1f5;
}

.collect-side-nav a {
    color: #172033;
    font-size: 15px;
}

.collect-side-nav a::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    vertical-align: -4px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.collect-side-nav .collect-nav-about::before {
    border-radius: 50%;
    background-image: radial-gradient(circle at 50% 35%, currentColor 0 2px, transparent 2.5px), radial-gradient(circle at 50% 76%, currentColor 0 5px, transparent 5.5px);
}

.collect-side-nav .collect-nav-ad::before {
    border-radius: 50%;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 8px 8px;
}

.collect-side-nav .collect-nav-submit::before {
    background-image: linear-gradient(90deg, currentColor 0 2px, transparent 2px), linear-gradient(currentColor 0 2px, transparent 2px), linear-gradient(currentColor 0 2px, transparent 2px);
    background-size: 9px 9px, 9px 9px, 5px 5px;
    background-position: 4px 4px, 4px 9px, 9px 11px;
}

.collect-side-nav .collect-nav-feedback::before {
    background-image: linear-gradient(135deg, transparent 40%, currentColor 40% 58%, transparent 58%), linear-gradient(currentColor, currentColor);
    background-size: 12px 12px, 8px 2px;
    background-position: 3px 2px, 5px 13px;
}

.collect-side-nav a.is-active {
    color: #16b99a;
}

.collect-head {
    margin-bottom: 24px;
}

.collect-head h1 {
    position: relative;
    margin: 0;
    padding-left: 16px;
    color: #172033;
    font-size: 16px;
    font-weight: 500;
}

.collect-head h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 16px;
    background: #16b99a;
    transform: translateY(-50%);
}

.collect-alert {
    margin: -6px 0 22px;
    padding: 12px 16px;
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 1.6;
}

.collect-alert-success {
    color: #0f7b5b;
    background: #effbf6;
    border-color: #bfead9;
}

.collect-alert-error {
    color: #c93522;
    background: #fff4f1;
    border-color: #ffd4cc;
}

.collect-layout {
    display: grid;
    grid-template-columns: minmax(0, 520px) 320px;
    gap: 104px;
    align-items: start;
}

.collect-form {
    display: grid;
    gap: 24px;
}

.collect-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.collect-form input,
.collect-form textarea {
    width: 100%;
    border: 1px solid #e5e8ef;
    border-radius: 0;
    padding: 0 16px;
    color: #182235;
    background: #fff;
    outline: none;
}

.collect-form input {
    height: 36px;
}

.collect-form textarea {
    min-height: 128px;
    padding-top: 14px;
    resize: vertical;
}

.collect-form input:focus,
.collect-form textarea:focus {
    border-color: #24c2a3;
}

.collect-code {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    align-items: center;
}

.collect-code-img {
    height: 36px;
    display: block;
    object-fit: cover;
    background: #eef4ef;
    border: 1px solid #e5e8ef;
    border-left: 0;
    transform: skew(-8deg);
    cursor: pointer;
}

.collect-form button {
    width: 184px;
    height: 36px;
    color: #fff;
    background: #25c1a7;
    border: 0;
    border-radius: 2px;
    font-weight: 700;
    cursor: pointer;
}

.collect-code .collect-code-img {
    width: 116px;
    padding: 0;
    background-color: #eef4ef;
}

.collect-form button:hover {
    background: #18a98f;
}

.collect-notice {
    min-height: 168px;
    padding: 22px 24px;
    color: #ff3b24;
    background: #fff8f1;
    line-height: 2;
}

.collect-closed {
    max-width: 620px;
    padding: 34px;
    background: #fff;
    border: 1px solid #eef1f5;
}

.collect-closed h2 {
    margin: 0 0 12px;
    font-size: 20px;
}

.category-page {
    padding: 14px 0 30px;
}

.category-filter-panel {
    padding: 28px 30px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #eef1f5;
}

.category-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.category-filter-head h1 {
    position: relative;
    margin: 0;
    padding-left: 16px;
    color: #172033;
    font-size: 16px;
    font-weight: 500;
}

.category-filter-head h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 3px;
    height: 17px;
    background: #24bea6;
}

.category-page-search {
    width: 282px;
    height: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    border: 1px solid #dfe7ef;
    border-radius: 20px;
    overflow: hidden;
}

.category-page-search input {
    min-width: 0;
    border: 0;
    padding: 0 16px;
    outline: 0;
}

.category-page-search button {
    border: 0;
    background: #fff;
    color: #152033;
    font-size: 22px;
    cursor: pointer;
}

.category-tabs {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 18px 22px;
}

.category-tabs a {
    height: 34px;
    display: grid;
    place-items: center;
    color: #526173;
    border: 1px solid #e5e9ef;
    background: #fff;
}

.category-tabs a.is-active,
.category-tabs a:hover {
    color: #fff;
    background: #24bea6;
    border-color: #24bea6;
}

.category-site-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #fff;
    border-top: 1px solid #eef1f5;
    border-left: 1px solid #eef1f5;
}

.category-site-card {
    min-height: 200px;
    padding: 34px 36px 28px;
    border-right: 1px solid #eef1f5;
    border-bottom: 1px solid #eef1f5;
    background: #fff;
    transition: background .18s ease, transform .18s ease;
}

.category-site-card:hover {
    background: #fbfffd;
}

.category-site-card img {
    width: 190px;
    height: 62px;
    margin: 0 auto 22px;
    object-fit: contain;
}

.category-site-card strong {
    display: block;
    margin-bottom: 10px;
    color: #243042;
    font-size: 16px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.category-site-card p {
    margin: 0;
    color: #8a96a6;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.category-site-card.is-hidden {
    display: none;
}

.category-empty {
    grid-column: 1 / -1;
    padding: 50px 20px;
    color: #8a96a6;
    text-align: center;
    background: #fff;
}

.updates-page {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 22px;
    padding: 22px 0 42px;
}

.updates-hero {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 30px;
    background: linear-gradient(135deg, #ffffff 0%, #eefaf5 100%);
    border: 1px solid #e2efe9;
    border-radius: 8px;
}

.updates-hero span {
    color: #24bea6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.updates-hero h1 {
    margin: 4px 0 4px;
    color: #172033;
    font-size: 24px;
}

.updates-hero p {
    margin: 0;
    color: #7a8799;
}

.updates-hero strong {
    min-width: 116px;
    height: 70px;
    display: grid;
    place-items: center;
    color: #1f8f5f;
    background: #fff;
    border: 1px solid #d9efe5;
    border-radius: 8px;
    font-size: 24px;
}

.updates-hero em {
    display: block;
    color: #8a96a6;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.updates-source-nav {
    align-self: start;
    padding: 12px;
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 8px;
}

.updates-source-nav a {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    color: #526173;
    margin-bottom: 6px;
    border-radius: 7px;
}

.updates-source-nav a:last-child {
    margin-bottom: 0;
}

.updates-source-nav a.is-active,
.updates-source-nav a:hover {
    color: #138568;
    background: #e9f8f2;
}

.updates-source-nav a.is-active {
    font-weight: 700;
}

.updates-source-nav img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.updates-table-card {
    padding: 10px 24px 18px;
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 8px;
}

.updates-table {
    display: grid;
    grid-template-columns: 140px minmax(300px, 1fr) 130px 110px 78px;
    gap: 18px;
    align-items: center;
    min-height: 58px;
    color: #243042;
    border-bottom: 1px solid #f0f3f7;
}

.updates-table:last-child {
    border-bottom: 0;
}

.updates-table:not(.updates-table-head):hover {
    background: #fbfffd;
}

.updates-table-head {
    min-height: 50px;
    color: #8a96a6;
    font-size: 13px;
    font-weight: 700;
}

.updates-table a:not(.updates-view) {
    min-width: 0;
    color: #172033;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.updates-table a:not(.updates-view):hover {
    color: #1f8f5f;
}

.updates-table time,
.updates-table span {
    min-width: 0;
}

.updates-view {
    width: 64px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #526173;
    border: 1px solid #e0e6ee;
    border-radius: 15px;
    background: #fff;
}

.updates-view:hover {
    color: #fff;
    background: #24bea6;
    border-color: #24bea6;
}

.updates-empty {
    padding: 60px 0;
    color: #8a96a6;
    text-align: center;
}

.rank-page {
    min-height: 720px;
    background: #f6f7f9;
}

.rank-hero {
    min-height: 500px;
    margin-top: -1px;
    color: #fff;
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 169, 0, .72) 0 9%, transparent 22%),
        radial-gradient(circle at 88% 72%, rgba(247, 0, 92, .62) 0 26%, transparent 45%),
        linear-gradient(135deg, #ff7a20 0%, #ff463d 46%, #ff0759 100%);
    overflow: hidden;
}

.rank-hero-inner {
    min-height: 500px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: center;
    gap: 40px;
}

.rank-hero-copy {
    text-align: center;
    transform: translateY(-28px);
}

.rank-hero-copy h1 {
    margin: 0 0 22px;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 300;
    letter-spacing: 2px;
}

.rank-hero-copy p {
    margin: 0;
    font-size: 24px;
    font-weight: 300;
}

.rank-switch {
    display: grid;
    gap: 18px;
}

.rank-switch a {
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 4px;
}

.rank-switch a.is-active {
    color: #ff2854;
    background: #fff;
}

.rank-list-card {
    position: relative;
    z-index: 2;
    margin-top: -144px;
    background: #fff;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 20px 50px rgba(60, 70, 86, .08);
    overflow: hidden;
}

.rank-row {
    min-height: 148px;
    display: grid;
    grid-template-columns: 52px 230px minmax(0, 1fr) 150px 108px;
    gap: 24px;
    align-items: center;
    padding: 0 36px;
    border-bottom: 1px solid #f0f2f5;
    background: #fff;
}

.rank-row:hover {
    background: #fffdfb;
}

.rank-medal {
    color: #b8c4d5;
    font-size: 30px;
    text-align: center;
}

.rank-1 {
    color: #ffd000;
}

.rank-2 {
    color: #b7c8dc;
}

.rank-3 {
    color: #dca75e;
}

.rank-row > img {
    width: 190px;
    height: 70px;
    object-fit: contain;
}

.rank-row-main {
    min-width: 0;
}

.rank-row-main strong {
    display: block;
    margin-bottom: 12px;
    color: #ff315f;
    font-size: 26px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rank-row-main em {
    display: -webkit-box;
    color: #8a96a6;
    font-style: normal;
    line-height: 1.9;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rank-clicks {
    color: #ff6c00;
    white-space: nowrap;
}

.rank-view {
    width: 108px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #8a96a6;
    border: 1px solid #e4e8ef;
    border-radius: 20px;
    background: #fff;
}

.rank-row:hover .rank-view {
    color: #fff;
    background: #ff315f;
    border-color: #ff315f;
}

.tools-page {
    padding: 12px 0 34px;
}

.tools-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.tools-page-card {
    min-height: 128px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 28px;
    background: #fff;
    border: 1px solid #f0f2f5;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tools-page-card:hover {
    border-color: #dcefe8;
    box-shadow: 0 14px 34px rgba(27, 54, 75, .08);
    transform: translateY(-2px);
}

.tools-page-card img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 9px;
    background: #f2f5f8;
}

.tools-page-card span {
    min-width: 0;
}

.tools-page-card strong {
    display: block;
    margin-bottom: 10px;
    color: #101828;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.tools-page-card em {
    display: -webkit-box;
    color: #697586;
    font-size: 13px;
    font-style: normal;
    line-height: 1.75;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tools-page-empty {
    grid-column: 1 / -1;
    padding: 56px 24px;
    color: #8a96a6;
    text-align: center;
    background: #fff;
    border: 1px solid #eef1f5;
}

.webmaster-page {
    padding: 12px 0 38px;
}

.home-async-panels {
    display: grid;
    gap: 14px;
}

.home-async-loading {
    padding: 18px;
    color: #667085;
    font-size: 13px;
}

.home-async-loading p {
    margin: 0;
    line-height: 1.7;
}

.home-async-loading::after {
    content: "";
    display: block;
    width: 42%;
    height: 8px;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #edf4ff, #d9eaff, #edf4ff);
    background-size: 200% 100%;
    animation: navtx-loading-bar 1.15s linear infinite;
}

@keyframes navtx-loading-bar {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.webmaster-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.webmaster-head span {
    display: block;
    margin-bottom: 5px;
    color: #2c7be5;
    font-size: 12px;
    letter-spacing: 0;
}

.webmaster-head h1 {
    margin: 0;
    color: #101828;
    font-size: 26px;
    font-weight: 500;
}

.webmaster-head p {
    max-width: 540px;
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.7;
}

.webmaster-shell,
.webmaster-status,
.webmaster-results {
    background: #fff;
    border: 1px solid #e8edf3;
}

.webmaster-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 12px;
    border-bottom: 1px solid #edf1f6;
    overflow-x: auto;
}

.webmaster-tabs button {
    height: 42px;
    padding: 0 16px;
    color: #344054;
    font-size: 13px;
    background: transparent;
    border: 0;
    border-top: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.webmaster-tabs button.is-active {
    color: #1677ff;
    border-top-color: #1677ff;
    background: #f7fbff;
}

.webmaster-tabs button:disabled {
    color: #98a2b3;
    cursor: default;
}

.webmaster-query {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) 128px 112px;
    gap: 0;
    padding: 12px;
}

.webmaster-query.is-tracert {
    grid-template-columns: 140px minmax(0, 1fr) 128px 112px 96px 96px;
}

.webmaster-query select,
.webmaster-query input,
.webmaster-query button {
    height: 44px;
    border: 1px solid #d6e3f1;
    font-size: 13px;
}

.webmaster-query select {
    padding: 0 12px;
    color: #344054;
    background: #fff;
    border-right: 0;
}

.webmaster-query input {
    min-width: 0;
    padding: 0 14px;
    color: #101828;
    border-right: 0;
}

.webmaster-query > .webmaster-submit {
    color: #fff;
    background: #1677ff;
    border-color: #1677ff;
    border-right: 0;
    cursor: pointer;
}

.webmaster-query > .webmaster-sponsor-open {
    color: #175cd3;
    background: #f5f9ff;
    border-color: #d6e3f1;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.webmaster-query > .webmaster-sponsor-open:hover {
    color: #0b5bd3;
    background: #eaf4ff;
    border-color: #b8d7ff;
}

.webmaster-query.is-loading > .webmaster-submit {
    opacity: .76;
    cursor: wait;
}

.webmaster-probes {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    border: 1px solid #d6e3f1;
    border-left: 0;
}

.webmaster-probes[hidden] {
    display: none !important;
}

.webmaster-probes span {
    color: #667085;
    font-size: 12px;
    text-align: center;
}

.webmaster-probes input {
    width: 100%;
    height: 42px;
    padding: 0 8px;
    border: 0;
}

.webmaster-status {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 10px;
    padding: 16px 18px;
    color: #667085;
    font-size: 13px;
}

.webmaster-status strong {
    color: #101828;
    font-weight: 500;
}

.webmaster-status.is-loading strong {
    color: #1677ff;
}

.webmaster-status.is-success strong {
    color: #079455;
}

.webmaster-status.is-error strong {
    color: #d92d20;
}

.webmaster-results {
    margin-top: 10px;
    padding: 18px;
}

.webmaster-results.is-loading {
    border-color: #d8e9ff;
    box-shadow: inset 3px 0 0 #1677ff;
}

.webmaster-results.is-error {
    border-color: #ffd6d6;
    box-shadow: inset 3px 0 0 #d92d20;
}

.webmaster-placeholder-row td {
    height: 54px;
    color: #667085;
    text-align: center;
    background: #fbfcfe;
}

.webmaster-results.is-loading .webmaster-placeholder-row td {
    color: #1677ff;
    background: linear-gradient(90deg, #f6fbff 0%, #fff 50%, #f6fbff 100%);
    background-size: 220% 100%;
    animation: navtxLoadingStripe 1.4s ease-in-out infinite;
}

@keyframes navtxLoadingStripe {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.webmaster-result-head,
.webmaster-table-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.webmaster-result-head small {
    display: block;
    margin-bottom: 4px;
    color: #667085;
    font-size: 12px;
}

.webmaster-result-head h2 {
    margin: 0;
    color: #101828;
    font-size: 18px;
    font-weight: 500;
}

.webmaster-result-head span,
.webmaster-table-title span {
    color: #667085;
    font-size: 12px;
}

.webmaster-overview {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr);
    gap: 16px;
}

.webmaster-map,
.webmaster-summary,
.webmaster-table-card {
    border: 1px solid #edf1f6;
    background: #fbfcfe;
}

.webmaster-map {
    min-height: 430px;
    position: relative;
    display: block;
    padding: 20px;
    overflow: hidden;
}

.webmaster-map::before {
    content: "";
    position: absolute;
    inset: 14px;
    background:
        linear-gradient(90deg, rgba(22, 119, 255, .05) 1px, transparent 1px),
        linear-gradient(rgba(22, 119, 255, .05) 1px, transparent 1px);
    background-size: 30px 30px;
    border-radius: 8px;
    pointer-events: none;
}

.webmaster-map-title,
.webmaster-latency-card,
.webmaster-map-footer,
.webmaster-map-legend,
.webmaster-china-map,
.webmaster-region-list {
    position: relative;
    z-index: 1;
}

.webmaster-map-title strong,
.webmaster-map-title span {
    display: block;
}

.webmaster-map-title strong {
    color: #101828;
    font-weight: 500;
}

.webmaster-map-title span {
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
}

.webmaster-china-map {
    height: 300px;
    margin: 16px 0 14px;
    overflow: hidden;
    border: 1px solid #dbeafe;
    background: #fff;
}

.webmaster-china-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/china-map.svg") center / 100% 100% no-repeat;
    pointer-events: none;
}

.webmaster-china-map::after {
    display: none;
}

.webmaster-map-dot {
    position: absolute;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, .88);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 0 0 5px rgba(255, 255, 255, .14);
}

.webmaster-map-dot b,
.webmaster-map-dot em {
    display: none;
    font-weight: 400;
    font-style: normal;
    white-space: nowrap;
}

.webmaster-map-dot.is-active {
    width: auto;
    min-width: 54px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    border: 2px solid rgba(255, 255, 255, .92);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .20);
}

.webmaster-map-dot.is-active b,
.webmaster-map-dot.is-active em {
    display: inline;
}

.webmaster-map-dot.is-active em {
    opacity: .9;
}

.webmaster-map-dot:hover {
    z-index: 5;
}

.webmaster-map-dot:not(.is-active):hover b {
    display: block;
    position: absolute;
    left: 12px;
    top: -8px;
    padding: 4px 6px;
    color: #344054;
    font-size: 11px;
    background: #fff;
    border: 1px solid #dbe3ee;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

.webmaster-map-dot.is-fastest,
.webmaster-map-legend .is-fastest,
.wm-region-dot.is-fastest {
    background: #087443;
}

.webmaster-map-dot.is-fast,
.webmaster-map-legend .is-fast,
.wm-region-dot.is-fast {
    background: #12b76a;
}

.webmaster-map-dot.is-normal,
.webmaster-map-legend .is-normal,
.wm-region-dot.is-normal {
    background: #86cb5a;
}

.webmaster-map-dot.is-warn,
.webmaster-map-legend .is-warn,
.wm-region-dot.is-warn {
    background: #fdb022;
}

.webmaster-map-dot.is-slow,
.webmaster-map-legend .is-slow,
.wm-region-dot.is-slow {
    background: #f79009;
}

.webmaster-map-dot.is-timeout,
.webmaster-map-legend .is-timeout,
.wm-region-dot.is-timeout {
    background: #d92d20;
}

.webmaster-map-dot.is-empty {
    background: #c8d4e3;
    opacity: .72;
}

.webmaster-map-footer {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    margin-bottom: 12px;
}

.webmaster-latency-card {
    width: auto;
    padding: 14px;
    background: #fff;
    border: 1px solid #e6edf5;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .06);
}

.webmaster-latency-card b {
    display: block;
    color: #1677ff;
    font-size: 26px;
    font-weight: 500;
}

.webmaster-latency-card span {
    color: #667085;
    font-size: 12px;
}

.webmaster-map-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    color: #667085;
    font-size: 12px;
    background: #fff;
    border: 1px solid #e6edf5;
}

.webmaster-map-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

.webmaster-map-legend i,
.wm-region-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
}

.wm-region-dot {
    display: inline-block;
    margin-right: 6px;
    vertical-align: 1px;
}

.webmaster-region-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.webmaster-region-list span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    color: #344054;
    font-size: 12px;
    background: #fff;
    border: 1px solid #edf1f6;
}

.webmaster-region-list b,
.webmaster-region-list em {
    font-weight: 400;
    font-style: normal;
}

.webmaster-region-list .fast em {
    color: #079455;
}

.webmaster-region-list .fastest em {
    color: #087443;
}

.webmaster-region-list .normal em {
    color: #4ca30d;
}

.webmaster-region-list .warn em {
    color: #dc6803;
}

.webmaster-region-list .slow em {
    color: #f79009;
}

.webmaster-region-list .timeout em {
    color: #d92d20;
}

.webmaster-summary {
    padding: 0 12px 14px;
}

.webmaster-summary-tabs {
    display: flex;
    gap: 6px;
    padding: 0 0 12px;
    border-bottom: 1px solid #edf1f6;
}

.webmaster-summary-tabs button {
    min-width: 64px;
    height: 38px;
    color: #344054;
    background: transparent;
    border: 0;
    border-top: 2px solid transparent;
    cursor: pointer;
}

.webmaster-summary-tabs button.is-active {
    color: #1677ff;
    border-top-color: #1677ff;
    background: #fff;
}

.webmaster-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 0;
}

.webmaster-metrics div {
    padding: 12px;
    text-align: center;
    background: #fff;
    border: 1px solid #edf1f6;
}

.webmaster-metrics strong,
.webmaster-metrics span {
    display: block;
}

.webmaster-metrics strong {
    color: #101828;
    font-size: 18px;
    font-weight: 500;
}

.webmaster-metrics span {
    margin-top: 5px;
    color: #667085;
    font-size: 12px;
}

.webmaster-line-table,
.webmaster-table {
    width: 100%;
    border-collapse: collapse;
}

.webmaster-line-table th,
.webmaster-line-table td,
.webmaster-table th,
.webmaster-table td {
    padding: 12px 14px;
    color: #344054;
    font-size: 12px;
    text-align: left;
    border-top: 1px solid #edf1f6;
}

.webmaster-line-table th,
.webmaster-table th {
    color: #475467;
    background: #fff;
    font-weight: 500;
}

.webmaster-line-table em {
    margin-left: 6px;
    color: #079455;
    font-style: normal;
}

.webmaster-table-card {
    margin-top: 16px;
    padding: 14px;
}

.webmaster-table-title strong {
    color: #101828;
    font-weight: 500;
}

.webmaster-table-scroll {
    overflow-x: auto;
}

.webmaster-table {
    min-width: 760px;
    background: #fff;
}

.webmaster-table .is-fast {
    color: #079455;
}

.webmaster-table .is-error {
    color: #d92d20;
}

.wm-state {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
}

.wm-state.ok {
    color: #067647;
    background: #ecfdf3;
}

.wm-state.bad {
    color: #b42318;
    background: #fef3f2;
}

.webmaster-dns-verdict {
    margin-bottom: 12px;
    padding: 16px 18px;
    border: 1px solid #d8e9ff;
    background: #f6fbff;
}

.webmaster-dns-verdict strong {
    display: block;
    margin-bottom: 6px;
    color: #1677ff;
    font-size: 18px;
    font-weight: 500;
}

.webmaster-dns-verdict p {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.7;
}

.webmaster-dns-verdict.is-bad {
    border-color: #ffd6d6;
    background: #fff8f7;
}

.webmaster-dns-verdict.is-bad strong {
    color: #e5484d;
}

.webmaster-dns-verdict.is-neutral strong {
    color: #1677ff;
}

.webmaster-metrics-wide {
    margin-bottom: 12px;
}

.webmaster-trace-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 12px;
    padding: 14px 18px;
    color: #344054;
    border: 1px solid #e8edf3;
    background: #f8fbff;
    font-size: 13px;
}

.webmaster-trace-meta span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.webmaster-trace-meta b {
    color: #2f63ff;
    font-weight: 500;
}

.webmaster-trace-table th,
.webmaster-trace-table td {
    text-align: center;
}

.webmaster-note {
    margin-top: 10px;
    padding: 12px 14px;
    color: #667085;
    border: 1px dashed #d7e3f3;
    background: #fbfdff;
    font-size: 12px;
    line-height: 1.7;
}

.webmaster-sponsor-link {
    display: inline-flex;
    align-items: center;
    max-width: 150px;
    height: 26px;
    padding: 0 10px;
    overflow: hidden;
    color: #175cd3;
    font-size: 12px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #eff8ff;
    border: 1px solid #b2ddff;
    border-radius: 13px;
    cursor: pointer;
    vertical-align: middle;
}

a.webmaster-sponsor-link {
    text-decoration: none;
}

.webmaster-sponsor-link:hover {
    color: #0b5bd3;
    background: #dff0ff;
}

button.webmaster-sponsor-link {
    font-family: inherit;
}

.webmaster-sponsor-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    background: rgba(15, 23, 42, .42);
    transition: opacity .18s ease, visibility .18s ease;
}

.webmaster-sponsor-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.webmaster-sponsor-dialog {
    position: relative;
    width: min(100%, 560px);
    padding: 30px 32px 28px;
    background: #fff;
    border: 1px solid #e5edf7;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
    transform: translateY(10px);
    transition: transform .18s ease;
}

.webmaster-sponsor-modal.is-open .webmaster-sponsor-dialog {
    transform: translateY(0);
}

.webmaster-sponsor-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    color: #667085;
    font-size: 22px;
    line-height: 1;
    background: #f6f8fb;
    border: 1px solid #edf1f6;
    cursor: pointer;
}

.webmaster-sponsor-close:hover {
    color: #175cd3;
    background: #eff8ff;
}

.webmaster-sponsor-dialog h2 {
    margin: 0 42px 18px 0;
    color: #101828;
    font-size: 22px;
    font-weight: 500;
}

.webmaster-sponsor-content {
    display: grid;
    gap: 10px;
    color: #344054;
    font-size: 14px;
    line-height: 1.8;
}

.webmaster-sponsor-content p {
    margin: 0;
}

.webmaster-sponsor-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 16px;
    color: #175cd3;
    background: #eff8ff;
    border: 1px solid #b2ddff;
}

.webmaster-sponsor-contact span {
    color: #667085;
    font-size: 13px;
}

.webmaster-sponsor-contact strong {
    color: #175cd3;
    font-size: 18px;
    font-weight: 500;
}

.navtx-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    padding-bottom: 34px;
}

.navtx-layout > .home-info-board,
.navtx-layout > .navtx-main,
.navtx-layout > .navtx-side {
    grid-column: 1 / -1;
    min-width: 0;
}

.site-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    margin: 0 0 18px;
    list-style: none;
}

.site-card {
    position: relative;
    min-width: 0;
}

.site-card a {
    min-height: 74px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 8px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.site-card a:hover {
    transform: translateY(-2px);
    border-color: #99d8bb;
    box-shadow: 0 14px 30px rgba(34, 54, 84, .09);
}

.site-card img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 8px;
    background: #eef2f6;
}

.site-card-body {
    min-width: 0;
}

.site-card strong,
.site-card em {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-style: normal;
}

.site-card strong {
    color: #202b3c;
    font-size: 15px;
}

.site-card em {
    color: #7a8799;
    font-size: 12px;
}

.site-card-meta {
    color: #a0a9b7;
    font-size: 12px;
}

.site-card-compact a {
    min-height: 76px;
}

.money-list .site-card a {
    background: #fbfcff;
}

.section-title {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e7ebf2;
}

.section-title h2 {
    margin: 0;
    color: #1d2939;
    font-size: 18px;
}

.section-title a {
    color: #7b8794;
    font-size: 13px;
}

.software-panel,
.update-panel,
.rank-panel,
.side-panel,
.article-card {
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 8px;
    padding: 0 16px 16px;
}

.software-panel {
    margin-bottom: 18px;
}

.software-panel ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px 0 0;
    margin: 0;
    list-style: none;
}

.software-panel a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.software-panel img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
}

.software-panel strong,
.software-panel em {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-style: normal;
}

.software-panel em {
    color: #8a96a6;
}

.info-columns {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 18px;
}

.home-info-board {
    display: grid;
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    min-width: 0;
}

.home-info-left {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.home-info-right {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.home-card-panel {
    min-width: 0;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 0;
    padding: 0 26px 22px;
}

.home-card-panel .section-title {
    height: 60px;
}

.home-card-panel .section-title h2 {
    position: relative;
    padding-left: 14px;
    font-size: 16px;
    font-weight: 500;
}

.home-card-panel .section-title h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 16px;
    background: #16b99a;
    transform: translateY(-50%);
}

.home-card-panel .section-title a {
    color: #c8ced7;
    font-size: 30px;
    line-height: 1;
}

.home-info-board .update-panel ul {
    padding-top: 14px;
}

.home-info-board .update-panel li {
    gap: 14px;
    padding: 12px 0;
    border-bottom: 0;
}

.home-info-board .update-panel li::before {
    content: "";
    width: 3px;
    height: 3px;
    margin-top: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #ccd3dd;
}

.home-info-board .update-panel li a {
    color: #1f2937;
    font-size: 14px;
}

.home-info-board .update-panel span {
    color: #7f8897;
    font-size: 14px;
}

.side-hot-tabs {
    padding: 12px 20px 14px;
    background: #fff;
    border-radius: 8px;
}

.side-hot-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.side-hot-nav button {
    height: 28px;
    color: #222;
    background: transparent;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px;
}

.side-hot-nav button.is-active {
    color: #fff;
    background: #0878ff;
    font-weight: 700;
}

.side-hot-cover {
    position: relative;
    display: block;
    height: 126px;
    overflow: hidden;
    border-radius: 6px;
    background: #eef3f8;
}

.side-hot-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .28s ease;
}

.side-hot-cover:hover img {
    transform: scale(1.04);
}

.side-hot-cover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.68));
}

.side-hot-cover strong {
    position: absolute;
    z-index: 1;
    left: 12px;
    right: 12px;
    bottom: 10px;
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.side-hot-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.side-hot-list li {
    position: relative;
    min-width: 0;
    padding: 4px 0 4px 14px;
    color: #666;
    font-size: 15px;
    line-height: 1.38;
}

.side-hot-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 13px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #d7dce3;
}

.side-hot-list a {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.side-hot-list a:hover {
    color: #0878ff;
}

.knowledge-quiz {
    padding: 0 14px 16px;
    overflow: hidden;
}

.quiz-title {
    height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.quiz-title span {
    width: 18px;
    height: 18px;
    position: relative;
    border: 2px solid #2f80ff;
    border-radius: 3px;
}

.quiz-title span::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 2px;
    width: 9px;
    height: 12px;
    border: 2px solid #2f80ff;
    border-left: 0;
    border-radius: 0 3px 3px 0;
}

.quiz-title h2 {
    margin: 0;
    color: #17233d;
    font-size: 16px;
    font-weight: 600;
}

.quiz-board {
    position: relative;
    min-height: 160px;
    padding: 14px 12px 64px;
    border: 1px solid #9be8fb;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(205, 248, 255, .92), rgba(222, 253, 246, .88));
    box-shadow: inset 0 0 0 3px rgba(183, 244, 255, .6);
}

.quiz-board::marker {
    content: "";
}

.quiz-board::before,
.quiz-board::after {
    content: "";
    position: absolute;
    width: 54px;
    height: 44px;
    pointer-events: none;
    background:
        linear-gradient(#d7f7ff, #d7f7ff) left 8px top 8px / 18px 8px no-repeat,
        linear-gradient(#d7f7ff, #d7f7ff) left 22px top 20px / 18px 8px no-repeat;
    opacity: .75;
}

.quiz-board::before {
    right: 14px;
    top: 12px;
}

.quiz-board::after {
    left: -18px;
    bottom: 10px;
}

.quiz-board p {
    position: relative;
    z-index: 1;
    min-height: 50px;
    margin: 0 0 12px;
    color: #263238;
    font-size: 14px;
    line-height: 1.7;
}

.quiz-board p::before {
    content: "?";
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    background: #ff8a3d;
    text-decoration: none;
}

.quiz-options {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    transition: opacity .22s ease, transform .22s ease;
}

.quiz-option {
    position: relative;
    height: 30px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    padding: 0 10px 0 0;
    color: #111827;
    background: #fff;
    border: 1px solid #91c8ff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.quiz-option i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    margin-left: -6px;
    color: #fff;
    font-style: normal;
    font-weight: 700;
    border-radius: 50%;
    background: linear-gradient(135deg, #8de9ff, #55b8ff);
    transform: rotate(-12deg);
    box-shadow: 0 2px 5px rgba(55, 142, 220, .25);
}

.quiz-option span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

.quiz-option.is-selected {
    border-color: #39a9ff;
    background: #eef9ff;
}

.quiz-option.is-right {
    border-color: #16b26a;
    background: #ecfdf3;
}

.quiz-option.is-wrong {
    border-color: #ff6b6b;
    background: #fff1f1;
}

.quiz-feedback {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 28px;
    min-width: 176px;
    height: 54px;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 0 18px 0 10px;
    color: #fff;
    border-radius: 28px;
    box-shadow: 0 10px 18px rgba(30, 96, 210, .2);
    transform: translateX(-50%) scale(.84);
    transform-origin: center;
}

.quiz-feedback i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #d88900;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 34%, #fff7a5 0 8%, transparent 9%),
        radial-gradient(circle at 34% 36%, #8e5b00 0 4%, transparent 5%),
        radial-gradient(circle at 64% 36%, #8e5b00 0 4%, transparent 5%),
        radial-gradient(circle at 52% 66%, #c95f10 0 10%, transparent 11%),
        linear-gradient(135deg, #ffe97a, #ffb321);
    box-shadow: 0 4px 10px rgba(221, 130, 15, .28);
}

.quiz-feedback span {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.quiz-feedback.is-correct {
    display: flex;
    background: linear-gradient(135deg, #2b83ff, #61a5ff);
    animation: quizPop .42s cubic-bezier(.2, 1.35, .36, 1) both;
}

.quiz-feedback.is-wrong {
    display: flex;
    background: linear-gradient(135deg, #ff3d5f, #ff6b7f);
    animation: quizPop .42s cubic-bezier(.2, 1.35, .36, 1) both, quizShake .34s ease .08s both;
}

.knowledge-quiz.is-correct .quiz-board {
    box-shadow: inset 0 0 0 3px rgba(183, 244, 255, .6), 0 0 0 2px rgba(73, 143, 255, .18);
}

.knowledge-quiz.is-wrong .quiz-board {
    box-shadow: inset 0 0 0 3px rgba(183, 244, 255, .6), 0 0 0 2px rgba(255, 88, 111, .18);
}

.knowledge-quiz.is-correct .quiz-options,
.knowledge-quiz.is-wrong .quiz-options {
    opacity: .16;
    transform: translateY(4px);
    pointer-events: none;
}

.quiz-analysis {
    display: none;
    position: relative;
    z-index: 2;
    margin: -2px 0 10px;
    padding: 8px 10px;
    color: #24607a;
    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(79, 189, 229, .32);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.65;
}

.quiz-analysis.is-open {
    display: block;
}

.quiz-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 12px 10px 0;
}

.quiz-actions button {
    height: 30px;
    color: #1677ff;
    background: #fff;
    border: 1px solid #a9cdff;
    border-radius: 16px;
    cursor: pointer;
    font-size: 13px;
}

.quiz-actions button:hover {
    color: #fff;
    background: #3b8cff;
}

@keyframes quizPop {
    0% { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.78); }
    70% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.04); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes quizShake {
    0%, 100% { margin-left: 0; }
    25% { margin-left: -5px; }
    50% { margin-left: 5px; }
    75% { margin-left: -3px; }
}

.zhougong-card {
    padding: 0 12px 16px;
    overflow: visible;
}

.zhougong-title {
    height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.zhougong-title span {
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px solid #2f86ff;
    border-radius: 50%;
}

.zhougong-title span::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2f86ff;
    box-shadow: 6px 0 0 rgba(47, 134, 255, .45);
}

.zhougong-title span::after {
    content: "";
    position: absolute;
    left: 1px;
    bottom: -5px;
    width: 7px;
    height: 7px;
    border-left: 2px solid #2f86ff;
    border-bottom: 2px solid #2f86ff;
    border-radius: 0 0 0 7px;
}

.zhougong-title h2 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
}

.zhougong-board {
    position: relative;
    padding: 14px 8px 16px;
    overflow: hidden;
    border: 2px solid #d09a7d;
    border-radius: 10px;
    background:
        linear-gradient(rgba(159, 105, 78, .78), rgba(159, 105, 78, .72)),
        radial-gradient(circle at 78% 12%, rgba(255, 255, 255, .28), transparent 0 56px),
        linear-gradient(135deg, #bc8a71 0%, #e7b18e 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 232, 212, .56), 0 8px 16px rgba(158, 95, 64, .12);
}

.zhougong-board::before,
.zhougong-board::after {
    content: "";
    position: absolute;
    width: 86px;
    height: 86px;
    border: 12px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
}

.zhougong-board::before {
    left: -34px;
    top: -28px;
}

.zhougong-board::after {
    right: -28px;
    top: -34px;
}

.zhougong-tags {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 2px 10px 12px;
}

.zhougong-tags button {
    height: 28px;
    color: #fff;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 220, 200, .34);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: transform .18s ease, background .18s ease;
}

.zhougong-tags button:hover,
.zhougong-tags button.is-active {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .35);
}

.zhougong-result {
    position: relative;
    z-index: 1;
    min-height: 122px;
    padding: 14px 14px 12px;
    color: #5a3529;
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 22px rgba(123, 73, 52, .12);
}

.zhougong-result strong {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #2f2b2a;
    font-size: 14px;
    font-weight: 500;
}

.zhougong-result em {
    font-style: normal;
    font-weight: 500;
}

.zhougong-result b {
    min-width: 0;
    max-width: 170px;
    padding: 2px 7px;
    overflow: hidden;
    color: #fff;
    border-radius: 5px;
    background: #e53935;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zhougong-result p {
    margin: 0;
    color: #5a3529;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.72;
}

.zhougong-card.is-loading .zhougong-result p {
    color: #8a5a44;
}

.zhougong-card.is-loaded .zhougong-result {
    animation: zhougongFloat .28s ease both;
}

.zhougong-form {
    position: relative;
    z-index: 1;
    display: none;
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 8px;
    margin: 10px 8px 0;
}

.zhougong-card.is-asking .zhougong-form {
    display: grid;
}

.zhougong-form input {
    height: 32px;
    min-width: 0;
    padding: 0 10px;
    color: #5a3529;
    border: 1px solid rgba(157, 94, 66, .3);
    border-radius: 6px;
    background: rgba(255, 255, 255, .92);
    font-size: 13px;
    outline: 0;
}

.zhougong-form button,
.zhougong-actions button {
    height: 32px;
    color: #a66e53;
    border: 1px solid #d7a88f;
    border-radius: 6px;
    background: rgba(255, 255, 255, .88);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: transform .18s ease, color .18s ease, border-color .18s ease;
}

.zhougong-actions {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.zhougong-actions button {
    min-width: 62px;
    padding: 0 13px;
}

.zhougong-form button:hover,
.zhougong-actions button:hover {
    transform: translateY(-1px);
    color: #d54a2d;
    border-color: #d54a2d;
}

.zhougong-card.is-loading .zhougong-form button,
.zhougong-card.is-loading .zhougong-actions button {
    opacity: .68;
    pointer-events: none;
}

@keyframes zhougongFloat {
    from { transform: translateY(4px); opacity: .72; }
    to { transform: translateY(0); opacity: 1; }
}

.constellation-card {
    padding: 0 14px 16px;
    overflow: visible;
}

.constellation-title {
    height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.constellation-title span {
    width: 18px;
    height: 18px;
    position: relative;
    transform: rotate(18deg);
}

.constellation-title span::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: #2f80ff;
    clip-path: polygon(50% 0, 63% 34%, 100% 38%, 72% 61%, 81% 100%, 50% 80%, 19% 100%, 28% 61%, 0 38%, 37% 34%);
}

.constellation-title h2 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
}

.constellation-board {
    position: relative;
    padding: 12px;
    border: 2px solid #88e5fb;
    border-radius: 10px;
    background: linear-gradient(135deg, #d4fbff 0%, #9af0ff 100%);
    box-shadow: 0 8px 16px rgba(65, 178, 218, .16);
}

.constellation-head {
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.constellation-avatar {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: #36a6ff;
    font-size: 30px;
    font-weight: 700;
    border: 4px solid rgba(255,255,255,.86);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fff 0 26%, #dff8ff 27% 100%);
    box-shadow: 0 3px 8px rgba(38, 154, 218, .18);
}

.constellation-head strong {
    display: block;
    color: #268bff;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
}

.constellation-head em {
    display: block;
    margin-top: 3px;
    color: #42a4ff;
    font-style: normal;
    font-size: 14px;
}

.constellation-head > button {
    height: 30px;
    padding: 0 10px;
    color: #1682ff;
    background: rgba(255,255,255,.86);
    border: 0;
    border-radius: 15px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}

.constellation-menu {
    position: absolute;
    z-index: 8;
    right: 0;
    top: 38px;
    width: 160px;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 6px;
    padding: 12px 10px;
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 12px 28px rgba(36, 102, 150, .18);
}

.constellation-card.is-open .constellation-menu {
    display: grid;
}

.constellation-menu button {
    height: 28px;
    color: #111827;
    background: transparent;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
}

.constellation-menu button:hover,
.constellation-menu button.is-active {
    color: #1677ff;
    background: #eef8ff;
}

.constellation-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    margin-top: 10px;
    padding: 9px 8px;
    color: #6b7280;
    background: rgba(255,255,255,.76);
    border-radius: 8px;
    font-size: 12px;
}

.constellation-meta span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.constellation-meta i {
    color: #ffb300;
    font-style: normal;
    letter-spacing: 1px;
}

.constellation-meta b {
    color: #334155;
    font-weight: 500;
}

.constellation-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.constellation-tabs button {
    padding: 0;
    color: #111827;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.constellation-tabs button.is-active {
    color: #006dff;
}

.constellation-board p {
    margin: 10px 0 0;
    color: #222;
    font-size: 14px;
    line-height: 1.85;
}

.tarot-card {
    padding: 0 12px 16px;
    overflow: visible;
}

.tarot-title {
    height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tarot-title span {
    width: 18px;
    height: 18px;
    position: relative;
    border: 2px solid #3192ff;
    border-radius: 5px;
}

.tarot-title span::before,
.tarot-title span::after {
    content: "";
    position: absolute;
    background: #3192ff;
}

.tarot-title span::before {
    left: 5px;
    top: 3px;
    width: 5px;
    height: 8px;
    border-radius: 4px;
}

.tarot-title span::after {
    right: -5px;
    top: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.tarot-title h2 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
}

.tarot-board {
    position: relative;
    min-height: 286px;
    padding: 12px 12px 16px;
    overflow: hidden;
    border: 2px solid #c989ff;
    border-radius: 12px;
    background:
        radial-gradient(circle at 20% 45%, rgba(255,255,255,.9) 0 2px, transparent 3px),
        radial-gradient(circle at 74% 28%, rgba(255,255,255,.78) 0 2px, transparent 3px),
        linear-gradient(135deg, rgba(137, 67, 236, .9), rgba(233, 181, 255, .88)),
        #d8a7ff;
    box-shadow: 0 7px 0 rgba(194, 102, 255, .62), 0 14px 24px rgba(135, 71, 201, .14);
}

.tarot-card.has-result .tarot-board {
    min-height: 0;
    padding: 8px;
}

.tarot-board::before,
.tarot-board::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tarot-board::before {
    background:
        linear-gradient(110deg, transparent 0 12%, rgba(255,255,255,.16) 13% 18%, transparent 19% 100%),
        linear-gradient(250deg, transparent 0 18%, rgba(255,255,255,.18) 19% 24%, transparent 25% 100%);
}

.tarot-board::after {
    background: radial-gradient(circle at 50% 62%, rgba(255,255,255,.32), transparent 44%);
}

.tarot-stage {
    position: relative;
    z-index: 1;
    height: 142px;
    display: grid;
    place-items: center;
}

.tarot-fan {
    position: relative;
    width: 132px;
    height: 102px;
    transform-style: preserve-3d;
}

.tarot-fan i,
.tarot-single {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 58px;
    height: 88px;
    margin-left: -29px;
    border: 2px solid #f5c765;
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 16px, rgba(255,210,106,.85) 17px 18px, transparent 19px),
        repeating-radial-gradient(circle at 50% 50%, rgba(246, 203, 99, .85) 0 1px, transparent 2px 8px),
        linear-gradient(135deg, #4d1f83, #7a38bb 48%, #45166f);
    box-shadow: 0 6px 12px rgba(68, 22, 117, .28);
}

.tarot-fan i:nth-child(1) { transform: translateX(-34px) rotate(-24deg); }
.tarot-fan i:nth-child(2) { transform: translateX(-17px) rotate(-12deg); }
.tarot-fan i:nth-child(3) { transform: rotate(0); }
.tarot-fan i:nth-child(4) { transform: translateX(17px) rotate(12deg); }
.tarot-fan i:nth-child(5) { transform: translateX(34px) rotate(24deg); }

.tarot-single {
    display: none;
    animation: tarotFloat 1.2s ease-in-out infinite alternate;
}

.tarot-glow {
    position: absolute;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(255,226,95,.92), transparent 42%);
    filter: blur(.2px);
    opacity: 0;
}

.tarot-card.is-loading .tarot-fan {
    animation: tarotShuffle .72s ease-in-out infinite;
}

.tarot-card.is-loading .tarot-fan i {
    animation: tarotCardShake .72s ease-in-out infinite;
}

.tarot-card.is-loading .tarot-fan i:nth-child(2),
.tarot-card.is-loading .tarot-fan i:nth-child(4) {
    animation-delay: .12s;
}

.tarot-card.is-loading .tarot-fan i:nth-child(3) {
    animation-delay: .22s;
}

.tarot-card.is-loading .tarot-single {
    display: block;
}

.tarot-card.is-loading .tarot-glow {
    opacity: .86;
    animation: tarotGlow 1.3s linear infinite;
}

.tarot-card.has-result .tarot-fan,
.tarot-card.has-result .tarot-single,
.tarot-card.has-result .tarot-glow {
    display: none;
}

.tarot-card.has-result .tarot-stage {
    display: none;
}

.tarot-intro {
    position: relative;
    z-index: 1;
    padding: 18px 18px 16px;
    color: #3f3f46;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(196, 157, 255, .8);
    border-radius: 8px;
}

.tarot-intro p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
}

.tarot-intro button {
    display: block;
    min-width: 108px;
    height: 28px;
    margin: 10px auto 0;
    color: #b026ff;
    background: #fff;
    border: 1px solid #c34dff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
}

.tarot-loading {
    position: relative;
    z-index: 1;
    display: none;
    margin-top: 18px;
    color: #bf36ff;
    text-align: center;
    font-size: 13px;
}

.tarot-card.is-loading .tarot-intro,
.tarot-card.has-result .tarot-intro {
    display: none;
}

.tarot-card.is-loading .tarot-loading {
    display: block;
}

.tarot-result {
    position: relative;
    z-index: 3;
    display: none;
    padding: 12px 12px 14px;
    background: rgba(255,255,255,.92);
    border-radius: 8px;
}

.tarot-card.has-result .tarot-result {
    display: block;
}

.tarot-result-main {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.tarot-result-main img {
    width: 104px;
    height: 144px;
    object-fit: cover;
    border: 2px solid #c78666;
    border-radius: 7px;
    background: #f3e7ff;
}

.tarot-result-main h3 {
    margin: 0 0 6px;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
}

.tarot-result-main p {
    max-height: 120px;
    margin: 0;
    overflow: auto;
    color: #222;
    font-size: 14px;
    line-height: 1.65;
    padding-right: 2px;
}

.tarot-result-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 28px;
    margin-top: 12px;
}

.tarot-result-nav strong {
    min-width: 0;
    max-width: calc(100% - 64px);
    color: #111827;
    font-size: 14px;
    line-height: 1.55;
}

.tarot-result-nav button {
    position: relative;
    z-index: 5;
    width: 28px;
    height: 28px;
    color: #4b5563;
    background: #f2f3f5;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    pointer-events: auto;
}

.tarot-result-nav button:hover {
    color: #fff;
    background: #b026ff;
}

.tarot-tags {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}

.tarot-tags span {
    height: 28px;
    display: grid;
    place-items: center;
    color: #c026ff;
    border: 1px solid #d563ff;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
}

@keyframes tarotShuffle {
    0%, 100% { transform: translateX(0) rotate(0); }
    35% { transform: translateX(-5px) rotate(-2deg); }
    70% { transform: translateX(5px) rotate(2deg); }
}

@keyframes tarotCardShake {
    0%, 100% { top: 8px; }
    50% { top: 1px; }
}

@keyframes tarotFloat {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-8px) scale(1.03); }
}

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

.funny-sentence-card {
    padding: 0 12px 18px;
}

.funny-sentence-title {
    height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.funny-sentence-title span {
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px solid #2f86ff;
    border-radius: 4px;
}

.funny-sentence-title span::before,
.funny-sentence-title span::after {
    content: "";
    position: absolute;
    background: #2f86ff;
}

.funny-sentence-title span::before {
    left: 4px;
    top: 4px;
    width: 8px;
    height: 2px;
    box-shadow: 0 5px 0 #2f86ff;
}

.funny-sentence-title span::after {
    right: -5px;
    bottom: -4px;
    width: 7px;
    height: 7px;
    border-radius: 0 0 7px 0;
    background: transparent;
    border-right: 2px solid #2f86ff;
    border-bottom: 2px solid #2f86ff;
}

.funny-sentence-title h2 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
}

.funny-sentence-board {
    position: relative;
    min-height: 118px;
    padding: 28px 22px 18px;
    overflow: hidden;
    color: #fff;
    border-radius: 8px;
    background:
        radial-gradient(circle at 90% 28%, rgba(255, 255, 255, .14), transparent 0 36px),
        linear-gradient(135deg, #b490ff 0%, #9b7af8 58%, #a57df6 100%);
}

.funny-sentence-board::before {
    content: "JOKES";
    position: absolute;
    left: 14px;
    top: -8px;
    color: rgba(255, 255, 255, .1);
    font-size: 44px;
    font-weight: 800;
    letter-spacing: 1px;
}

.funny-sentence-board::after {
    content: "“”";
    position: absolute;
    left: 15px;
    top: 16px;
    color: rgba(255, 255, 255, .18);
    font-size: 42px;
    font-family: Georgia, serif;
    line-height: 1;
}

.funny-sentence-board p {
    position: relative;
    z-index: 1;
    min-height: 46px;
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.65;
}

.funny-sentence-board button {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 84px;
    height: 28px;
    margin: 12px auto 0;
    color: #fff;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    cursor: pointer;
    font-size: 13px;
    transition: transform .18s ease, background .18s ease;
}

.funny-sentence-board button:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .36);
}

.funny-sentence-card.is-loading .funny-sentence-board button {
    opacity: .72;
    pointer-events: none;
}

.eat-today-card {
    padding: 0 12px 18px;
}

.eat-today-title {
    height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.eat-today-title span {
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px solid #2f86ff;
    border-radius: 50%;
}

.eat-today-title span::before,
.eat-today-title span::after {
    content: "";
    position: absolute;
    background: #2f86ff;
}

.eat-today-title span::before {
    left: 7px;
    top: -6px;
    width: 2px;
    height: 8px;
    border-radius: 2px;
}

.eat-today-title span::after {
    left: 4px;
    top: 6px;
    width: 8px;
    height: 2px;
    border-radius: 2px;
    box-shadow: 0 4px 0 #2f86ff;
}

.eat-today-title h2 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
}

.eat-today-board {
    position: relative;
    min-height: 126px;
    padding: 22px 18px 18px;
    overflow: hidden;
    border-radius: 8px;
    background:
        radial-gradient(circle at 84% 24%, rgba(255, 255, 255, .45), transparent 0 34px),
        linear-gradient(135deg, #ffd96a 0%, #ffb13b 52%, #ff8f2d 100%);
    box-shadow: inset 0 -14px 28px rgba(207, 91, 22, .08);
}

.eat-today-board::before {
    content: "";
    position: absolute;
    right: -12px;
    bottom: -18px;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}

.eat-today-board::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 24px;
    width: 36px;
    height: 24px;
    border-radius: 50% 50% 48% 48%;
    background: rgba(255, 255, 255, .35);
    box-shadow: -18px 19px 0 rgba(255, 255, 255, .18);
}

.eat-today-board p {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    color: #7a3b12;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
}

.eat-today-result {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.eat-today-result strong {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 13px;
    overflow: hidden;
    color: #d64b14;
    border: 1px solid rgba(235, 91, 29, .34);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    font-size: 15px;
    font-weight: 600;
    line-height: 34px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(184, 83, 26, .08);
}

.eat-today-result button {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 15px;
    color: #fff;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6842 0%, #f04425 100%);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 18px rgba(240, 68, 37, .22);
    transition: transform .18s ease, box-shadow .18s ease;
}

.eat-today-result button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(240, 68, 37, .28);
}

.eat-today-card.is-shaking .eat-today-result strong {
    animation: eatTodayShake .34s ease both;
}

@keyframes eatTodayShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.free-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 14px;
    padding-top: 20px;
    min-width: 0;
}

.free-tools-grid a {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-width: 0;
    color: #1f2937;
    font-size: 13px;
}

.free-tools-grid a:hover {
    color: #159b76;
}

.free-tools-grid img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 9px;
    background: #f4f7fb;
}

.free-tools-grid span {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.category-table-panel {
    padding-bottom: 10px;
    min-width: 0;
}

.category-table {
    padding: 14px 0 0;
    min-width: 0;
}

.category-table-row {
    display: grid;
    grid-template-columns: 80px repeat(5, minmax(0, 1fr)) 26px;
    align-items: center;
    gap: 34px;
    min-height: 50px;
    border-bottom: 1px solid #f0f2f5;
}

.category-table-row:nth-child(5n) {
    border-bottom-color: #e8ebf0;
}

.category-table-row-sub {
    margin-top: -1px;
    border-top: 0;
}

.category-table-row-split {
    margin-top: 18px;
    border-top: 1px solid #f0f2f5;
}

.category-table-row-sub .category-table-link,
.category-table-row-sub .category-table-empty {
    color: #475467;
}

.category-table-name {
    color: #04a989;
    font-weight: 500;
    font-size: 15px;
}

.category-table-name-blank,
.category-table-more-blank {
    pointer-events: none;
}

.category-table-link,
.category-table-empty {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #111827;
    font-size: 14px;
}

.category-table-link:hover {
    color: #f05a42;
}

.category-table-empty {
    color: #a6afbd;
}

.category-table-more {
    color: #b7bec8;
    font-size: 28px;
    line-height: 1;
    text-align: right;
}

.category-table-more:hover {
    color: #159b76;
}

.home-info-board .rank-panel ol {
    padding-top: 18px;
}

.home-info-board .rank-panel li a {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    padding: 9px 0;
}

.home-info-board .rank-panel i {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    background: #babfc6;
    font-size: 12px;
    line-height: 16px;
}

.home-info-board .rank-panel li:nth-child(1) i {
    background: #ff5e67;
}

.home-info-board .rank-panel li:nth-child(2) i {
    background: #ff7f45;
}

.home-info-board .rank-panel li:nth-child(3) i {
    background: #ffac39;
}

.home-info-board .rank-panel em {
    color: #7b8493;
}

.home-info-board .heat-panel {
    padding-bottom: 26px;
}

.home-info-board .heat-panel p {
    margin: 18px 0 0;
    color: #758196;
    line-height: 1.9;
}

.home-info-board .heat-panel strong {
    margin: 0 2px;
    color: #f44336;
    font-weight: 500;
}

.fresh-panel {
    min-height: 222px;
}

.fresh-placeholder {
    min-height: 150px;
    display: grid;
    place-items: center;
    color: #98a2b3;
}

.fresh-list {
    padding: 12px 0 0;
}

.fresh-item {
    display: grid;
    grid-template-columns: 28px 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    color: #1f2937;
    border-bottom: 1px solid #f0f2f5;
}

.fresh-item:hover {
    color: #159b76;
}

.fresh-rank {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #b8bec8;
    border-radius: 3px;
    font-size: 12px;
}

.fresh-item:nth-child(1) .fresh-rank {
    background: #ff5e67;
}

.fresh-item:nth-child(2) .fresh-rank {
    background: #ff7f45;
}

.fresh-item:nth-child(3) .fresh-rank {
    background: #ffac39;
}

.fresh-item img {
    width: 52px;
    height: 38px;
    object-fit: cover;
    border-radius: 4px;
    background: #f4f7fb;
}

.fresh-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.fresh-copy strong,
.fresh-copy em {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fresh-copy strong {
    font-weight: 500;
}

.fresh-copy em {
    color: #7b8493;
    font-size: 12px;
    font-style: normal;
}

.fresh-item small {
    color: #ff5e45;
    white-space: nowrap;
}

.update-panel ul,
.rank-panel ol {
    padding: 10px 0 0;
    margin: 0;
    list-style: none;
}

.update-panel li {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #edf0f5;
}

.update-panel li a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.update-panel span {
    color: #98a2b3;
}

.rank-panel li a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
}

.rank-panel i {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #1f8f5f;
    border-radius: 6px;
    font-style: normal;
    font-weight: 700;
}

.rank-panel span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rank-panel em {
    color: #98a2b3;
    font-style: normal;
    font-size: 12px;
}

.navtx-side {
    display: grid;
    gap: 18px;
}

.category-line {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed #edf0f5;
}

.category-name {
    display: grid;
    place-items: center;
    height: 30px;
    color: #fff;
    background: #1f8f5f;
    border-radius: 7px;
    font-weight: 700;
}

.category-links {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 12px;
}

.category-links a,
.category-links span {
    color: #556274;
    max-width: 96px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.category-links .more {
    color: #1f8f5f;
}

.heat-panel p {
    margin: 12px 0 0;
    color: #647084;
}

.heat-panel strong {
    color: #f15a24;
}

.navtx-pagination {
    margin-bottom: 34px;
    text-align: center;
}

.article-layout {
    padding: 28px 0 40px;
}

.detail-layout {
    width: min(1260px, calc(100% - 56px));
    padding: 14px 0 42px;
}

.detail-layout .site-detail-card {
    display: grid !important;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    width: 100%;
    padding: 30px;
    margin: 0 0 14px;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 0;
}

.detail-layout .detail-cover {
    width: 252px;
}

.detail-layout .detail-cover img {
    width: 252px !important;
    height: 180px !important;
    object-fit: cover;
    border: 1px solid #edf0f5;
    background: #f3f6fa;
    border-radius: 0;
}

.detail-layout .detail-primary,
.detail-layout .detail-secondary {
    width: 252px;
    height: 40px;
    display: grid !important;
    place-items: center;
    margin-top: 18px;
    border: 1px solid #24bea6;
    font-size: 14px;
}

.detail-layout .detail-primary {
    color: #fff;
    background: #24bea6;
}

.detail-layout .detail-secondary {
    color: #16a58f;
    background: #fff;
}

.detail-layout .detail-info {
    min-width: 0;
    padding-top: 4px;
}

.detail-layout .detail-info h1 {
    margin: 0 0 28px;
    color: #172033;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-layout .detail-info h1 a {
    color: #18bca5;
}

.detail-layout .detail-info dl {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 34px;
    margin: 0;
}

.detail-layout .detail-info dl div {
    min-width: 0;
    display: flex !important;
    align-items: center;
    gap: 10px;
    line-height: 22px;
}

.detail-layout .detail-info dl > div.weight-row {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(108px, 1fr));
    gap: 18px 20px;
}

.detail-layout .detail-info dl > div.domain-check-row {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 28px;
    padding-top: 4px;
}

.detail-layout .detail-info dl .weight-field {
    min-width: 0;
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.detail-layout .detail-info dt {
    flex: 0 0 auto;
    color: #9199a7;
    white-space: nowrap;
    font-weight: 400;
}

.detail-layout .detail-info dd {
    min-width: 0;
    margin: 0;
    color: #152033;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.detail-layout .detail-info dd a {
    color: #152033;
}

.stars {
    color: #ffb300 !important;
    letter-spacing: 2px;
}

.weight {
    display: inline-flex;
    align-items: center;
    height: 20px;
    color: #fff;
    border-radius: 4px;
    overflow: hidden;
    font-weight: 700;
    line-height: 20px;
}

.weight i,
.weight b {
    height: 20px;
    display: grid;
    place-items: center;
    font-style: normal;
}

.weight i {
    min-width: 24px;
    padding: 0 5px;
    background: rgba(255,255,255,.16);
}

.weight b {
    min-width: 22px;
    padding: 0 6px;
}

.weight.baidu,
.weight.baidu b {
    background: #4a8dff;
}

.weight.sogou,
.weight.sogou b {
    background: #ff6b5f;
}

.weight.google,
.weight.google b {
    background: #40b76a;
}

.weight.shenma,
.weight.shenma b {
    background: #7b61ff;
}

.weight.so360,
.weight.so360 b {
    background: #17a66a;
}

.weight.bing,
.weight.bing b {
    background: #0a7bc1;
}

.weight.local,
.weight.local b {
    background: #22b36b;
}

.domain-check-row dd {
    color: #475467;
}

.domain-check-row dd:not(:empty) {
    font-weight: 500;
}

.weight-img {
    display: inline-block;
    width: auto;
    height: 20px;
    max-width: 90px;
    vertical-align: middle;
}

.weight-fallback {
    display: none;
}

.detail-layout .detail-panel {
    padding: 28px 30px 32px;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 0;
}

.detail-layout .detail-panel h2 {
    position: relative;
    margin: 0 0 22px;
    padding-left: 16px;
    color: #172033;
    font-size: 16px;
    font-weight: 500;
}

.detail-layout .detail-panel h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: 17px;
    background: #24bea6;
}

.detail-layout .detail-panel p {
    margin: 0 0 18px;
    color: #7a8799;
}

.site-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 20px;
    color: #667085;
    font-size: 13px;
}

.site-tags strong {
    color: #475467;
    font-weight: 500;
}

.site-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    color: #1685c7;
    background: #eef8ff;
    border: 1px solid #d8efff;
    border-radius: 3px;
}

.site-ai-description {
    margin: 20px 0 22px;
    padding: 18px 20px;
    background: #f8fbfa;
    border-left: 3px solid #1ac8a2;
}

.site-ai-description h3 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 700;
}

.site-ai-description p {
    margin: 0;
    color: #5d6b82;
    line-height: 1.9;
}

.weight-rule-panel {
    padding-top: 22px;
}

.weight-rule-panel h2 {
    margin-bottom: 16px;
    padding-left: 0;
    color: #24c86d;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
}

.weight-rule-panel h2::before {
    display: none;
}

.weight-rule-grid {
    display: grid;
    grid-template-columns: .9fr 1fr .9fr 1fr;
    border: 1px solid #e6ebf2;
    border-bottom: 0;
    border-right: 0;
    background: #fafafa;
}

.weight-rule-cell {
    min-height: 30px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: #8b95a4;
    background: #f7f7f8;
    border-right: 1px solid #e6ebf2;
    border-bottom: 1px solid #e6ebf2;
    font-size: 14px;
    font-weight: 400;
}

.weight-rule-cell:nth-child(4n + 1),
.weight-rule-cell:nth-child(4n + 3) {
    color: #778293;
    background: #f5f6f8;
}

.detail-layout .trend-chart {
    position: relative;
    height: 250px;
    padding-top: 8px;
    border-top: 1px solid #f0f2f6;
}

.detail-layout .trend-chart svg {
    width: 100%;
    height: 210px;
    display: block;
}

.detail-layout .trend-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    color: #b2bac6;
    font-weight: 700;
}

.detail-layout .trend-days span:last-child {
    text-align: right;
}

.trend-point {
    cursor: crosshair;
}

.trend-hit-area {
    fill: transparent;
    cursor: crosshair;
    pointer-events: all;
}

.trend-hover-line {
    position: absolute;
    top: 8px;
    bottom: 40px;
    width: 1px;
    display: none;
    background: rgba(82, 166, 224, .32);
    pointer-events: none;
}

.trend-tooltip {
    position: absolute;
    min-width: 180px;
    display: none;
    background: #fff;
    border: 1px solid #68bff4;
    box-shadow: 0 12px 24px rgba(32, 45, 68, .12);
    pointer-events: none;
}

.trend-tooltip strong,
.trend-tooltip span {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
}

.trend-tooltip strong {
    color: #fff;
    background: #68bff4;
}

.trend-tooltip span {
    color: #2d8dcc;
    background: #fff;
}

.related-nav-panel {
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid #eef1f5;
}

.related-nav-panel h2 {
    position: relative;
    margin: 0;
    padding: 22px 30px 20px 46px;
    color: #172033;
    font-size: 16px;
    font-weight: 500;
}

.related-nav-panel h2::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 26px;
    width: 3px;
    height: 17px;
    background: #24bea6;
}

.related-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #f0f2f6;
}

.related-nav-item {
    min-height: 198px;
    padding: 28px 30px;
    border-right: 1px solid #f0f2f6;
    border-bottom: 1px solid #f0f2f6;
    transition: background .18s ease;
}

.related-nav-item:hover {
    background: #fbfffd;
}

.related-nav-item:nth-child(4n) {
    border-right: 0;
}

.related-nav-item img {
    width: 160px;
    height: 56px;
    margin: 0 auto 20px;
    object-fit: contain;
}

.related-nav-item strong {
    display: block;
    margin-bottom: 10px;
    color: #243042;
    font-size: 16px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.related-nav-item p {
    margin: 0;
    color: #8a96a6;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card {
    max-width: 860px;
    margin: 0 auto;
    padding: 24px;
}

.article-card h1 {
    margin: 0 0 12px;
    color: #172033;
    font-size: 28px;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    color: #7a8799;
}

.article-cover {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.article-content {
    color: #2f3a4b;
    font-size: 16px;
}

.article-content img {
    height: auto;
    border-radius: 8px;
}

.neighbor-log {
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
}

.neighbor-log a,
.primary-link,
.comment-post button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    color: #fff;
    background: #1f8f5f;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.comments,
.comment-post {
    margin-top: 28px;
    border-top: 1px solid #edf0f5;
    padding-top: 18px;
}

.comments h2,
.comment-post h2 {
    margin: 0 0 14px;
    font-size: 18px;
}

.comment {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f5;
}

.comment img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.comment time {
    margin-left: 8px;
    color: #98a2b3;
    font-size: 12px;
}

.comment-child {
    margin-left: 18px;
}

.comment-post textarea,
.comment-post input {
    width: 100%;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    padding: 10px 12px;
    outline: 0;
    font: inherit;
}

.comment-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 10px 0;
}

.verify-code {
    margin: 10px 0;
}

.navtx-footer {
    padding: 34px 0 32px;
    color: #71809a;
    background: #fff;
    border-top: 1px solid #e7ebf2;
    text-align: center;
}

.detail-layout > .neighbor-log,
.detail-layout > .comments,
.detail-layout > .comment-post {
    background: #fff;
    border: 1px solid #eef1f5;
    padding: 18px 24px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.footer-links a {
    color: #71809a;
}

.footer-links a:hover {
    color: #168454;
}

.navtx-footer p {
    margin: 0;
    color: #71809a;
}

.navtx-backtop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 42px;
    height: 42px;
    display: none;
    color: #fff;
    background: #1f8f5f;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(31, 143, 95, .24);
    cursor: pointer;
}

.navtx-backtop.is-visible {
    display: block;
}

.navtx-tool-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .42);
}

.navtx-tool-modal.is-open {
    display: grid;
}

.navtx-tool-dialog {
    position: relative;
    width: min(860px, 100%);
    max-height: min(720px, 90vh);
    overflow: auto;
    padding: 22px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}

.navtx-tool-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    color: #667085;
    background: #f2f4f7;
    font-size: 22px;
    line-height: 1;
}

.navtx-tool-dialog h3 {
    margin: 0 38px 8px 0;
    color: #101828;
    font-size: 20px;
}

.navtx-tool-dialog p {
    margin: 0 0 14px;
    color: #667085;
}

.navtx-tool-dialog form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 10px;
    margin-bottom: 12px;
}

.navtx-tool-dialog input {
    height: 42px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    padding: 0 12px;
    outline: 0;
}

.navtx-tool-dialog form button {
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #159b76;
}

.navtx-tool-actions-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.navtx-tool-actions-row a {
    color: #159b76;
}

.navtx-tool-result {
    min-height: 180px;
    max-height: 430px;
    overflow: auto;
    margin: 0;
    padding: 14px;
    color: #1d2939;
    background: #f8fafc;
    border: 1px solid #eaecf0;
    border-radius: 6px;
    white-space: normal;
    word-break: break-word;
}

.tool-empty {
    display: grid;
    min-height: 150px;
    place-items: center;
    color: #667085;
    text-align: center;
}

.tool-result-head,
.tool-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.tool-result-head strong,
.tool-board-head strong {
    color: #101828;
    font-size: 18px;
}

.tool-result-head span,
.tool-board-head span {
    color: #667085;
    font-size: 13px;
}

.tool-oil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
}

.tool-oil-card {
    padding: 14px 12px;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
}

.tool-oil-card span,
.tool-oil-card em {
    display: block;
    color: #667085;
    font-style: normal;
    font-size: 12px;
}

.tool-oil-card strong {
    display: block;
    margin: 8px 0 4px;
    color: #0f766e;
    font-size: 24px;
    line-height: 1;
}

.tool-delta-list {
    display: grid;
    gap: 12px;
}

.tool-delta-card {
    padding: 14px;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
}

.tool-delta-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.tool-delta-meta b {
    color: #101828;
    font-size: 16px;
}

.tool-delta-meta p {
    margin: 6px 0 0;
    color: #667085;
    line-height: 1.6;
}

.tool-delta-meta strong {
    flex: 0 0 auto;
    min-width: 86px;
    padding: 8px 12px;
    color: #0f766e;
    background: #ecfdf3;
    border: 1px solid #a6f4c5;
    border-radius: 8px;
    font-size: 22px;
    text-align: center;
    letter-spacing: 2px;
}

.tool-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.tool-image-grid a {
    display: block;
    overflow: hidden;
    background: #f2f4f7;
    border-radius: 8px;
}

.tool-image-grid img {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
}

.tool-railway {
    background: #f1f7ff;
}

.tool-board-head {
    padding: 12px 14px;
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8, #0f766e);
    border-radius: 8px;
}

.tool-board-head strong,
.tool-board-head span {
    color: #fff;
}

.tool-board-table {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
}

.tool-board-table table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.tool-board-table th:nth-child(1),
.tool-board-table td:nth-child(1) {
    width: 70px;
}

.tool-board-table th:nth-child(2),
.tool-board-table td:nth-child(2) {
    width: 156px;
}

.tool-board-table th:nth-child(3),
.tool-board-table td:nth-child(3) {
    width: 150px;
}

.tool-board-table th:nth-child(5),
.tool-board-table td:nth-child(5) {
    width: 74px;
}

.tool-board-table th,
.tool-board-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #eef2f7;
    color: #344054;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

.tool-board-table th {
    color: #175cd3;
    background: #eff8ff;
    font-weight: 500;
}

.tool-board-table td b {
    color: #101828;
}

.tool-board-table tr:last-child td {
    border-bottom: 0;
}

.tool-board-table .is-ok,
.tool-board-table .is-delay {
    display: inline-flex;
    align-items: center;
    min-width: 52px;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
}

.tool-board-table .is-ok {
    color: #027a48;
    background: #ecfdf3;
}

.tool-board-table .is-delay {
    color: #b54708;
    background: #fffaeb;
}

@media (max-width: 760px) {
    .tool-board-table {
        border: 0;
        background: transparent;
    }

    .tool-board-table table,
    .tool-board-table thead,
    .tool-board-table tbody,
    .tool-board-table tr,
    .tool-board-table td {
        display: block;
        width: 100%;
    }

    .tool-board-table thead {
        display: none;
    }

    .tool-board-table tr {
        margin-bottom: 10px;
        padding: 10px 12px;
        background: #fff;
        border: 1px solid #dbeafe;
        border-radius: 8px;
    }

    .tool-board-table td {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 7px 0;
        border-bottom: 1px dashed #eef2f7;
    }

    .tool-board-table td:last-child {
        border-bottom: 0;
    }

    .tool-board-table td::before {
        content: attr(data-label);
        flex: 0 0 94px;
        color: #667085;
    }
}

.tool-express-timeline {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0 0 0 22px;
    list-style: none;
}

.tool-express-timeline li {
    position: relative;
    padding: 0 0 16px 18px;
    border-left: 1px solid #d0d5dd;
}

.tool-express-timeline li:before {
    content: "";
    position: absolute;
    left: -5px;
    top: 4px;
    width: 9px;
    height: 9px;
    background: #159b76;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #d1fadf;
}

.tool-express-timeline time {
    display: block;
    margin-bottom: 4px;
    color: #667085;
    font-size: 12px;
}

.tool-express-timeline p {
    margin: 0;
    color: #344054;
    line-height: 1.7;
}

.tool-error-box {
    display: grid;
    gap: 10px;
    padding: 14px;
    color: #344054;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    line-height: 1.8;
}

.tool-error-box p {
    margin: 0;
}

.tool-error-box section + section,
.tool-error-box p + p {
    padding-top: 10px;
    border-top: 1px dashed #e4e7ec;
}

.tool-error-box b {
    display: block;
    margin-bottom: 4px;
    color: #101828;
}

.tool-epic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.tool-epic-card {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 10px;
    color: #1d2939;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
}

.tool-epic-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #f2f4f7;
    border-radius: 6px;
}

.tool-epic-card span {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: 4px 8px;
    color: #fff;
    background: #1570ef;
    border-radius: 999px;
    font-size: 12px;
}

.tool-epic-card span.is-next {
    background: #f79009;
}

.tool-epic-card strong,
.tool-epic-card p,
.tool-epic-card em,
.tool-epic-card small {
    overflow: hidden;
    display: block;
    margin: 0;
}

.tool-epic-card strong {
    color: #101828;
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tool-epic-card p {
    min-height: 38px;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}

.tool-epic-card em {
    color: #039855;
    font-style: normal;
}

.tool-epic-card small {
    color: #7a8799;
    font-size: 12px;
}

.navtx-tool-result.tool-beauty-video {
    max-height: none;
    overflow: visible;
    padding: 14px;
}

.tool-beauty-video .tool-result-head {
    margin-bottom: 10px;
}

.tool-video-shell {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #0f172a;
    border-radius: 8px;
}

.tool-video-player {
    width: 100%;
    max-width: 420px;
    height: min(48vh, 430px);
    overflow: hidden;
    background: #101828;
}

.tool-video-player video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #101828;
}

.tool-video-actions {
    display: flex;
    justify-content: center;
}

.tool-refresh-video {
    height: 34px;
    margin-top: 12px;
    padding: 0 18px;
    color: #fff;
    background: #1677ff;
    border: 0;
    border-radius: 17px;
    cursor: pointer;
    font-size: 14px;
}

@media (max-width: 760px) {
    .tool-video-player {
        height: min(54vh, 420px);
    }
}

.empty-state,
.notfound {
    color: #7a8799;
}

@media (max-width: 980px) {
    .navtx-header-inner {
        height: auto;
        min-height: 64px;
        flex-wrap: wrap;
        padding: 12px 0;
    }

    .navtx-menu-toggle {
        display: block;
        margin-left: auto;
    }

    .navtx-menu {
        order: 4;
        width: 100%;
        display: none;
        flex-wrap: wrap;
    }

    body.nav-open .navtx-menu {
        display: flex;
    }

    .navtx-header-tools {
        margin-left: auto;
    }

    .navtx-layout,
    .info-columns,
    .home-info-board,
    .detail-layout .site-detail-card,
    .updates-page {
        grid-template-columns: 1fr;
    }

    .category-table-row {
        grid-template-columns: 70px repeat(5, minmax(0, 1fr)) 22px;
        gap: 10px;
    }

    .category-table-row .category-table-link:nth-of-type(n+7),
    .category-table-row .category-table-empty:nth-of-type(n+7) {
        display: none;
    }

    .updates-source-nav {
        min-height: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 16px;
        border-right: 0;
    }

    .updates-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .updates-source-nav a {
        margin: 0;
    }

    .updates-table-card {
        overflow-x: auto;
        padding-top: 10px;
    }

    .updates-table {
        min-width: 860px;
    }

    .rank-hero-inner {
        grid-template-columns: 1fr;
        padding: 70px 0 190px;
    }

    .rank-hero-copy {
        transform: none;
    }

    .rank-switch {
        grid-template-columns: repeat(3, 1fr);
    }

    .rank-row {
        grid-template-columns: 40px 120px minmax(0, 1fr);
        gap: 14px;
        min-height: 128px;
        padding: 18px;
    }

    .rank-clicks,
    .rank-view {
        grid-column: 3;
    }

    .rank-row-main strong {
        font-size: 20px;
    }

    .detail-layout .detail-cover {
        width: 100%;
        display: grid;
        grid-template-columns: 252px minmax(0, 1fr);
        gap: 14px;
        align-items: start;
    }

    .detail-layout .detail-info dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-layout .detail-info dl > div.weight-row,
    .detail-layout .detail-info dl > div.domain-check-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .related-nav-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .related-nav-item:nth-child(4n) {
        border-right: 1px solid #f0f2f6;
    }

    .related-nav-item:nth-child(2n) {
        border-right: 0;
    }

    .hero-recommend,
    .home-tool-list,
    .site-grid,
    .software-panel ul,
    .category-site-grid,
    .tools-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-tool-strip {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 16px;
        padding: 22px;
    }

    .home-tool-list {
        grid-template-columns: repeat(3, minmax(116px, 1fr));
    }

    .home-tool-item {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .home-tool-item img {
        width: 44px;
        height: 44px;
    }

    .home-link-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 44px;
        gap: 12px 18px;
        padding: 20px;
    }

    .home-link-item,
    .home-link-main {
        height: 44px;
    }

    .home-link-menu {
        top: 44px;
    }

    .category-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .webmaster-overview {
        grid-template-columns: 1fr;
    }

    .webmaster-query,
    .webmaster-query.is-tracert {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .webmaster-query > button,
    .webmaster-probes {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .navtx-wrap {
        width: min(100% - 20px, 1180px);
    }

    .navtx-logo {
        min-width: 0;
    }

    .navtx-logo strong {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navtx-clock {
        display: none;
    }

    .navtx-dropdown-panel {
        width: calc(100vw - 20px);
        grid-template-columns: repeat(3, 1fr);
    }

    .search-box {
        grid-template-columns: 88px 1fr;
        height: auto;
    }

    .search-engine,
    .search-engine-select,
    .search-box input,
    .search-box button {
        min-height: 48px;
    }

    .search-box button {
        grid-column: 1 / -1;
    }

    .hero-recommend,
    .ad-strip,
    .home-tool-list,
    .site-grid,
    .software-panel ul,
    .comment-fields,
    .category-site-grid,
    .tools-page-grid {
        grid-template-columns: 1fr;
    }

    .tools-page-card {
        min-height: 110px;
        padding: 20px;
    }

    .webmaster-head {
        display: block;
    }

    .webmaster-head p {
        margin-top: 10px;
    }

    .webmaster-query,
    .webmaster-query.is-tracert {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .webmaster-query select,
    .webmaster-query input,
    .webmaster-query button,
    .webmaster-probes {
        border: 1px solid #d6e3f1;
    }

    .webmaster-query > .webmaster-submit {
        border-color: #1677ff;
    }

    .webmaster-query > .webmaster-sponsor-open {
        width: 100%;
    }

    .webmaster-sponsor-modal {
        align-items: flex-end;
        padding: 14px;
    }

    .webmaster-sponsor-dialog {
        padding: 24px 20px 20px;
    }

    .webmaster-sponsor-dialog h2 {
        margin-right: 38px;
        font-size: 19px;
    }

    .webmaster-sponsor-contact {
        align-items: flex-start;
        flex-direction: column;
    }

    .webmaster-tabs {
        padding: 0 8px;
    }

    .webmaster-results {
        padding: 12px;
    }

    .webmaster-map {
        min-height: auto;
        padding: 14px;
    }

    .webmaster-china-map {
        height: 220px;
        margin: 14px 0 12px;
    }

    .webmaster-map-footer {
        grid-template-columns: 1fr;
    }

    .webmaster-map-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .webmaster-map-dot.is-active {
        min-width: 46px;
        height: 22px;
        padding: 0 6px;
        font-size: 10px;
    }

    .webmaster-metrics,
    .webmaster-region-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .webmaster-result-head,
    .webmaster-table-title,
    .webmaster-status {
        display: block;
    }

    .webmaster-status span {
        display: block;
        margin-top: 6px;
    }

    .home-tool-strip {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px;
    }

    .home-tool-title {
        grid-column: 1 / -1;
    }

    .home-tool-list {
        grid-column: 1 / -1;
        gap: 14px;
    }

    .home-tool-more {
        top: 14px;
        right: 18px;
    }

    .home-link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 42px;
        gap: 10px 16px;
        padding: 16px;
    }

    .home-link-item,
    .home-link-main {
        height: 42px;
    }

    .home-link-menu {
        top: 42px;
        left: 0;
        width: 118px;
    }

    .category-filter-panel {
        padding: 18px;
    }

    .collect-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .collect-page {
        grid-template-columns: 1fr;
    }

    .collect-side-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        border-right: 0;
        border-bottom: 1px solid #eef1f5;
        padding-bottom: 14px;
    }

    .collect-side-nav a::before {
        display: none;
    }

    .collect-fields {
        grid-template-columns: 1fr;
    }

    .category-filter-head {
        align-items: stretch;
        flex-direction: column;
    }

    .category-page-search {
        width: 100%;
    }

    .category-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .site-card a {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .site-card-meta {
        display: none;
    }

    .category-line {
        grid-template-columns: 1fr;
    }

    .detail-layout {
        width: min(100% - 20px, 1260px);
    }

    .detail-layout .site-detail-card,
    .detail-layout .detail-panel {
        padding: 18px;
    }

    .detail-layout .detail-cover,
    .detail-layout .detail-info dl {
        grid-template-columns: 1fr;
    }

    .detail-layout .detail-info dl > div.weight-row,
    .detail-layout .detail-info dl > div.domain-check-row {
        grid-template-columns: 1fr;
    }

    .detail-layout .detail-cover img,
    .detail-layout .detail-primary,
    .detail-layout .detail-secondary {
        width: 100%;
    }

    .detail-layout .detail-info h1 {
        white-space: normal;
    }

    .detail-layout .trend-chart {
        overflow-x: auto;
    }

    .detail-layout .trend-chart svg,
    .detail-layout .trend-days {
        min-width: 640px;
    }

    .related-nav-grid {
        grid-template-columns: 1fr;
    }

    .rank-hero-copy h1 {
        font-size: 34px;
    }

    .rank-hero-copy p {
        font-size: 16px;
    }

    .rank-list-card {
        margin-top: -120px;
    }

    .rank-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .rank-row > img {
        grid-column: 2;
        width: 160px;
        height: 56px;
    }

    .rank-row-main,
    .rank-clicks,
    .rank-view {
        grid-column: 2;
    }

    .related-nav-item,
    .related-nav-item:nth-child(2n),
    .related-nav-item:nth-child(4n) {
        border-right: 0;
    }
}

@media (max-width: 760px) {
    body {
        background: #f6f8fb;
        font-size: 13px;
    }

    .navtx-header {
        position: sticky;
    }

    .navtx-header-inner {
        gap: 10px;
        padding: 10px 0;
    }

    .navtx-logo {
        flex: 1;
    }

    .navtx-logo span {
        width: 34px;
        height: 34px;
    }

    .navtx-logo strong {
        font-size: 17px;
    }

    .navtx-menu-toggle {
        order: 3;
        display: block;
        margin-left: 0;
    }

    .navtx-menu {
        order: 8;
        width: 100%;
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
        background: #fff;
        border: 1px solid #e7ebf2;
        border-radius: 8px;
        box-shadow: 0 14px 30px rgba(29, 41, 57, .08);
    }

    body.nav-open .navtx-menu {
        display: grid;
    }

    .navtx-menu > a,
    .navtx-menu-dropdown > a {
        width: 100%;
        height: 40px;
        justify-content: center;
        padding: 0 10px;
        background: #f7fafc;
    }

    .navtx-menu-dropdown {
        min-width: 0;
    }

    .navtx-dropdown-panel {
        position: static;
        width: 100%;
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 8px;
        box-shadow: none;
    }

    .navtx-menu-dropdown:hover .navtx-dropdown-panel,
    .navtx-menu-dropdown:focus-within .navtx-dropdown-panel {
        display: grid;
    }

    .navtx-header-tools,
    .navtx-clock,
    .navtx-group-link {
        display: none;
    }

    .home-video-panel {
        display: none;
    }

    .search-hero {
        padding: 22px 0 18px;
    }

    .search-box {
        max-width: 100%;
    }

    .search-tabs {
        justify-content: flex-start;
        gap: 22px;
        overflow-x: auto;
        padding: 0 6px;
    }

    .search-box input {
        font-size: 14px;
    }

    .search-input-shell {
        height: 48px;
        grid-template-columns: minmax(0, 1fr) 52px;
    }

    .search-input-shell::after {
        left: 32%;
    }

    .search-input-shell > button {
        width: 52px;
        height: 48px;
    }

    .search-engine-row {
        justify-content: flex-start;
        gap: 24px;
        overflow-x: auto;
        padding: 10px 6px 0;
    }

    .search-hot-wrap {
        display: none;
    }

    .hero-recommend {
        grid-template-columns: 1fr;
    }

    .home-directory {
        padding: 10px 0;
    }

    .home-link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 40px;
        gap: 8px 12px;
        padding: 14px;
    }

    .home-link-item,
    .home-link-main {
        height: 40px;
    }

    .home-link-menu {
        top: 40px;
    }

    .home-link-item em {
        right: -5px;
    }

    .home-tool-strip {
        min-height: 0;
        padding: 16px;
    }

    .home-tool-list {
        grid-template-columns: 1fr;
    }

    .home-novel-panel,
    .home-douyin-panel,
    .home-anime-panel {
        display: none;
    }

    .home-news-panel {
        display: none;
    }

    .ad-strip {
        grid-template-columns: 1fr;
    }

    .navtx-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .site-grid,
    .software-panel ul,
    .info-columns {
        grid-template-columns: 1fr;
    }

    .home-info-board {
        grid-template-columns: 1fr;
    }

    .home-info-right {
        gap: 12px;
    }

    .home-card-panel {
        padding: 0 16px 16px;
    }

    .free-tools-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 10px;
    }

    .category-table-row {
        grid-template-columns: 50px repeat(5, minmax(0, 1fr)) 18px;
        gap: 6px;
        min-height: 44px;
    }

    .category-table-row .category-table-link:nth-of-type(n+7),
    .category-table-row .category-table-empty:nth-of-type(n+7) {
        display: none;
    }

    .category-filter-head {
        gap: 14px;
    }

    .category-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-site-grid {
        grid-template-columns: 1fr;
    }

    .updates-page {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-top: 14px;
    }

    .updates-hero {
        padding: 20px;
    }

    .updates-hero h1 {
        font-size: 22px;
    }

    .updates-source-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
    }

    .updates-source-nav a {
        margin: 0;
        min-height: 40px;
    }

    .updates-table-card {
        padding: 8px 12px;
        overflow-x: auto;
    }

    .updates-table {
        min-width: 760px;
        grid-template-columns: 110px minmax(260px, 1fr) 110px 90px 70px;
        gap: 12px;
    }

    .rank-hero {
        min-height: 420px;
    }

    .rank-hero-inner {
        min-height: 420px;
        padding: 56px 0 140px;
    }

    .rank-switch {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .rank-list-card {
        width: min(100% - 20px, 1180px);
    }

    .rank-row {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
        padding: 16px;
    }

    .rank-row > img,
    .rank-row-main,
    .rank-clicks,
    .rank-view {
        grid-column: 2;
    }

    .rank-row > img {
        width: 150px;
        height: 52px;
    }

    .rank-row-main strong {
        font-size: 18px;
    }

    .detail-layout {
        width: min(100% - 20px, 1260px);
    }

    .detail-layout .site-detail-card {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .detail-layout .detail-cover {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .detail-layout .detail-cover img,
    .detail-layout .detail-primary,
    .detail-layout .detail-secondary {
        width: 100% !important;
    }

    .detail-layout .detail-info h1 {
        white-space: normal;
        font-size: 18px;
    }

    .detail-layout .detail-info dl {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .detail-layout .detail-info dl div {
        justify-content: space-between;
        gap: 14px;
        padding-bottom: 10px;
        border-bottom: 1px dashed #edf0f5;
    }

    .detail-layout .detail-info dd {
        text-align: right;
    }

    .detail-layout .detail-panel,
    .related-nav-panel {
        padding: 16px;
    }

    .related-nav-grid {
        grid-template-columns: 1fr;
    }

    .related-nav-item {
        min-height: 150px;
        padding: 22px;
        border-right: 0;
    }
}

@media (max-width: 760px) {
    body {
        background: #f4f6f8;
        color: #1f2937;
        font-size: 13px;
        overflow-x: hidden;
    }

    body.nav-open {
        overflow: hidden;
    }

    .navtx-wrap {
        width: calc(100% - 16px);
    }

    .navtx-mobile-mask {
        position: fixed;
        inset: 0;
        z-index: 29;
        display: none;
        background: rgba(0, 0, 0, .34);
    }

    body.nav-open .navtx-mobile-mask {
        display: block;
    }

    .navtx-header {
        position: sticky;
        top: 0;
        z-index: 30;
        background: #fff;
        border-bottom: 1px solid #e8edf3;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
        backdrop-filter: none;
    }

    .navtx-header-inner {
        width: 100%;
        height: 48px;
        padding: 0 12px;
        gap: 8px;
    }

    .navtx-logo {
        flex: 1;
        min-width: 0;
        gap: 9px;
    }

    .navtx-logo span {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background: #1f9b6b;
    }

    .navtx-logo strong {
        max-width: 180px;
        color: #111827;
        font-size: 17px;
        font-weight: 800;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .navtx-header-tools,
    .navtx-clock,
    .navtx-group-link {
        display: none;
    }

    .navtx-menu-toggle {
        position: relative;
        z-index: 33;
        display: grid;
        place-items: center;
        width: 40px;
        height: 36px;
        margin: 0;
        padding: 0;
        background: #eef2f6;
        border-radius: 6px;
    }

    .navtx-menu-toggle span {
        width: 18px;
        height: 2px;
        margin: 0;
        background: #344054;
        transition: transform .18s ease, opacity .18s ease;
    }

    .navtx-menu-toggle span + span {
        margin-top: -10px;
    }

    .navtx-menu-toggle span:nth-child(3) {
        margin-top: -10px;
    }

    body.nav-open .navtx-menu-toggle span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    body.nav-open .navtx-menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    body.nav-open .navtx-menu-toggle span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .navtx-menu {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 32;
        width: min(72vw, 260px);
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 62px 28px 24px;
        background: #fff;
        border: 0;
        border-radius: 0;
        box-shadow: -18px 0 40px rgba(15, 23, 42, .16);
        transform: translateX(105%);
        transition: transform .24s ease;
    }

    body.nav-open .navtx-menu {
        transform: translateX(0);
    }

    .navtx-menu > a,
    .navtx-menu-dropdown > a {
        height: 48px;
        justify-content: flex-start;
        padding: 0 0 0 36px;
        color: #111827;
        background: transparent;
        border-radius: 0;
        font-size: 15px;
    }

    .navtx-menu > a::before,
    .navtx-menu-dropdown > a::before {
        position: absolute;
        left: 0;
        width: 24px;
        text-align: center;
    }

    .navtx-menu > a,
    .navtx-menu-dropdown > a {
        position: relative;
    }

    .navtx-menu > a:nth-child(1)::before { content: "⌂"; color: #22c55e; }
    .navtx-menu-dropdown > a::before { content: "▦"; color: #eab308; }
    .navtx-menu > a:nth-of-type(2)::before { content: "▤"; color: #60a5fa; }
    .navtx-menu > a:nth-of-type(3)::before { content: "✣"; color: #22c55e; }
    .navtx-menu > a:nth-of-type(4)::before { content: "▣"; color: #f59e0b; }
    .navtx-menu > a:nth-of-type(5)::before { content: "券"; color: #ef4444; }

    .navtx-menu a:hover,
    .navtx-menu .is-active {
        color: #ff2d2d;
        background: transparent;
    }

    .navtx-menu-dropdown {
        min-width: 0;
    }

    .navtx-dropdown-panel {
        position: static;
        width: 100%;
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin: 0 0 8px;
        padding: 8px;
        background: #f8fafc;
        border: 1px solid #eef2f6;
        border-radius: 6px;
        box-shadow: none;
    }

    .navtx-menu-dropdown:hover .navtx-dropdown-panel,
    .navtx-menu-dropdown:focus-within .navtx-dropdown-panel {
        display: grid;
    }

    .navtx-dropdown-panel a {
        padding: 7px 4px;
        color: #475467;
        font-size: 12px;
        background: #fff;
    }

    .search-hero {
        padding: 0;
        background: #18b8b0;
        border-bottom: 0;
    }

    .search-hero .navtx-wrap {
        width: 100%;
        padding: 14px 12px 16px;
        background:
            radial-gradient(circle at 82% 20%, rgba(255,255,255,.22) 0 10px, transparent 11px),
            radial-gradient(circle at 55% 2%, rgba(255,255,255,.18) 0 9px, transparent 10px),
            linear-gradient(135deg, #21c77e, #14a5cc);
    }

    .search-box {
        max-width: none;
        gap: 0;
    }

    .search-tabs {
        order: 2;
        height: auto;
        justify-content: flex-start;
        gap: 9px;
        overflow-x: auto;
        padding: 12px 2px 0;
        scrollbar-width: none;
    }

    .search-tabs button {
        flex: 0 0 auto;
        min-width: 46px;
        height: 44px;
        padding: 0 12px;
        color: rgba(255,255,255,.92);
        background: rgba(255,255,255,.18);
        border-radius: 14px;
        font-size: 12px;
        font-weight: 700;
    }

    .search-tabs button.is-active {
        color: #fff;
        background: rgba(255,255,255,.28);
    }

    .search-tabs button.is-active::after {
        display: none;
    }

    .search-input-shell {
        order: 1;
        height: 42px;
        grid-template-columns: 42px minmax(0, 1fr) 44px;
        margin: 0;
        background: rgba(255,255,255,.9);
        border-radius: 4px;
        overflow: hidden;
    }

    .search-input-shell::before {
        content: "⌕";
        display: grid;
        grid-column: 1;
        place-items: center;
        color: #0b9f8f;
        font-size: 16px;
        font-weight: 800;
        text-shadow: none;
    }

    .search-input-shell::after {
        display: none;
    }

    .search-input-shell input {
        grid-column: 2;
        height: 42px;
        padding: 0 8px;
        color: #37546a;
        background: transparent;
        font-size: 14px;
    }

    .search-input-shell > button {
        display: block;
        grid-column: 3;
        width: 44px;
        height: 42px;
        background: transparent;
    }

    .search-input-shell > button::before {
        left: 12px;
        top: 10px;
        width: 12px;
        height: 12px;
        border-width: 3px;
        border-color: #0b9f8f;
    }

    .search-input-shell > button::after {
        left: 26px;
        top: 25px;
        width: 9px;
        height: 3px;
        background: #0b9f8f;
    }

    .search-engine-row {
        order: 3;
        display: flex;
        justify-content: start;
        gap: 17px;
        overflow-x: auto;
        padding: 16px 2px 0;
        scrollbar-width: none;
    }

    .search-engine-row button {
        min-width: 0;
        min-height: 0;
        grid-column: auto;
        color: rgba(255,255,255,.94);
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .search-engine-row button.is-active {
        color: #fff;
        font-weight: 700;
    }

    .home-directory {
        width: 100%;
        padding: 0;
        background: #fff;
        border-bottom: 1px solid #e8edf3;
    }

    .home-link-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 38px;
        gap: 0;
        padding: 14px 12px 4px;
        background: #fff;
        border: 0;
        box-shadow: none;
    }

    .home-link-grid + .home-link-grid {
        padding-top: 0;
    }

    .home-link-item,
    .home-link-main {
        height: 38px;
        min-width: 0;
    }

    .home-link-main {
        justify-content: flex-start;
        gap: 8px;
        padding: 0 2px;
        background: transparent;
        border: 0;
    }

    .home-link-main img {
        width: 18px;
        height: 18px;
        border-radius: 4px;
    }

    .home-link-main span {
        color: #1f2937;
        font-size: 13px;
        font-weight: 400;
    }

    .home-link-main b,
    .home-link-menu {
        display: none;
    }

    .home-link-item em {
        top: 0;
        right: 2px;
        padding: 1px 4px;
        font-size: 10px;
    }

    .home-info-board {
        gap: 10px;
    }

    .home-card-panel {
        border: 0;
        border-top: 1px solid #e8edf3;
        border-bottom: 1px solid #e8edf3;
        padding: 0 16px 18px;
        border-radius: 0;
    }

    .home-card-panel .section-title {
        height: 48px;
    }

    .home-card-panel .section-title h2 {
        padding-left: 12px;
        color: #1f2937;
        font-size: 15px;
        font-weight: 500;
    }

    .home-card-panel .section-title h2::before {
        width: 2px;
        height: 16px;
        background: #12b76a;
    }

    .home-tool-strip {
        width: 100%;
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 6px 10px;
        padding: 0 16px 16px;
        margin: 10px 0;
        background: #fff;
        border: 0;
        border-top: 1px solid #e8edf3;
        border-bottom: 1px solid #e8edf3;
        box-shadow: none;
    }

    .home-tool-title {
        grid-column: 1 / -1;
        height: 48px;
        grid-template-columns: 2px 1fr;
        gap: 10px;
    }

    .home-tool-title span {
        width: 2px;
        height: 16px;
        background: #12b76a;
    }

    .home-tool-title h2 {
        font-size: 15px;
        font-weight: 500;
    }

    .home-tool-list {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 18px;
    }

    .home-tool-item {
        min-height: 48px;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 9px;
        padding: 0;
        background: transparent;
    }

    .home-tool-item img {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }

    .home-tool-item strong {
        font-size: 13px;
    }

    .home-tool-item em {
        color: #667085;
        font-size: 12px;
    }

    .home-tool-more {
        top: 10px;
        right: 16px;
        width: 28px;
        height: 28px;
        color: #c4ccd6;
        background: transparent;
        font-size: 28px;
    }

    .home-novel-panel {
        display: none;
    }

    .home-news-panel {
        display: none;
    }

    .free-tools-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px 12px;
        padding-top: 4px;
    }

    .free-tools-grid a {
        gap: 7px;
        min-width: 0;
    }

    .free-tools-grid img {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .free-tools-grid span {
        color: #1f2937;
        font-size: 12px;
        white-space: nowrap;
    }

    .category-table-panel {
        padding-bottom: 10px;
    }

    .category-table {
        overflow: hidden;
    }

    .category-table-row {
        grid-template-columns: 46px repeat(5, minmax(0, 1fr)) 18px;
        gap: 6px;
        min-height: 38px;
        align-items: center;
        border-bottom: 1px solid #f3f5f8;
    }

    .category-table-name {
        color: #12a05c;
        font-size: 13px;
        font-weight: 500;
        min-width: 0;
        overflow: hidden;
        white-space: normal;
        line-height: 1.2;
    }

    .category-table-link,
    .category-table-empty {
        display: block;
        min-width: 0;
        height: auto;
        color: #4b5563;
        background: transparent;
        border: 0;
        font-size: 12px;
        line-height: 1.4;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .category-table-row .category-table-link:nth-of-type(n+7),
    .category-table-row .category-table-empty:nth-of-type(n+7) {
        display: none;
    }

    .category-table-more {
        display: grid;
        place-items: center;
        width: 16px;
        justify-self: end;
        color: #c4ccd6;
        background: transparent;
        font-size: 22px;
        line-height: 1;
    }

    .fresh-list {
        gap: 0;
    }

    .fresh-item {
        min-height: 44px;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        padding: 8px 0;
        border-bottom: 1px solid #f1f3f6;
        border-radius: 0;
    }

    .fresh-item img,
    .fresh-copy em {
        display: none;
    }

    .fresh-rank {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .fresh-copy strong {
        font-size: 13px;
        font-weight: 400;
    }

    .fresh-item small {
        font-size: 11px;
    }
}

@media (max-width: 760px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .navtx-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
    }

    .navtx-menu-toggle span,
    .navtx-menu-toggle span + span,
    .navtx-menu-toggle span:nth-child(3) {
        margin: 0;
    }

    body.nav-open .navtx-menu-toggle span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    body.nav-open .navtx-menu-toggle span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .navtx-menu {
        right: 0;
        left: auto;
        display: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: none;
    }

    body.nav-open .navtx-menu {
        display: flex;
        transform: none;
    }

    .navtx-menu > a::before,
    .navtx-menu-dropdown > a::before,
    .search-input-shell::before {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 700;
    }

    .navtx-menu > a:nth-child(1)::before { content: "H"; color: #22c55e; }
    .navtx-menu-dropdown > a::before { content: "C"; color: #eab308; }
    .navtx-menu > a:nth-of-type(2)::before { content: "N"; color: #60a5fa; }
    .navtx-menu > a:nth-of-type(3)::before { content: "T"; color: #22c55e; }
    .navtx-menu > a:nth-of-type(4)::before { content: "R"; color: #f59e0b; }
    .navtx-menu > a:nth-of-type(5)::before { content: "S"; color: #ef4444; }

    .navtx-menu-dropdown.is-open .navtx-dropdown-panel {
        display: grid;
    }

    .search-input-shell {
        grid-template-columns: 40px minmax(0, 1fr);
        background: rgba(255, 255, 255, .88);
        overflow: hidden;
    }

    .search-input-shell::before {
        content: "S";
        color: #16a085;
        font-size: 16px;
        text-shadow: none;
    }

    .search-tabs,
    .search-engine-row {
        padding-bottom: 2px;
    }

    .home-link-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 40px;
    }

    .home-link-main {
        gap: 6px;
    }

    .home-link-main span,
    .category-table-link,
    .free-tools-grid span,
    .home-tool-item strong {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .software-panel ul {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .software-panel li {
        border-bottom: 1px solid #f1f3f6;
    }

    .software-panel li:last-child {
        border-bottom: 0;
    }

    .software-panel a {
        min-height: 54px;
    }

    .home-tool-list {
        gap: 12px;
    }

    .home-tool-item {
        min-width: 0;
    }

    .free-tools-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .category-table {
        padding-top: 2px;
    }

    .category-table-row {
        grid-template-columns: 44px repeat(5, minmax(0, 1fr)) 14px;
        gap: 6px;
    }

    .category-table-row-sub .category-table-name-blank {
        display: block;
    }

    .updates-table-card,
    .rank-list-card,
    .detail-layout .site-detail-card,
    .detail-layout .detail-panel,
    .tools-page-card,
    .collect-main {
        border-radius: 0;
    }

    .detail-layout {
        width: 100%;
        padding: 8px 0 28px;
        overflow-x: hidden;
    }

    .detail-layout .site-detail-card,
    .detail-layout .detail-panel,
    .related-nav-panel,
    .detail-layout > .neighbor-log,
    .detail-layout > .comments,
    .detail-layout > .comment-post {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
        border-left: 0;
        border-right: 0;
    }

    .detail-layout .site-detail-card {
        gap: 14px;
        padding: 14px;
    }

    .detail-layout .detail-cover img {
        height: 190px !important;
    }

    .detail-layout .detail-primary,
    .detail-layout .detail-secondary {
        height: 38px;
        margin-top: 10px;
    }

    .detail-layout .detail-info h1 {
        margin-bottom: 14px;
        font-size: 17px;
        line-height: 1.45;
    }

    .detail-layout .detail-info dl,
    .detail-layout .detail-info dl > div.weight-row,
    .detail-layout .detail-info dl > div.domain-check-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .detail-layout .detail-info dl div,
    .detail-layout .detail-info dl .weight-field,
    .detail-layout .detail-info dl .domain-check-row > div {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .detail-layout .detail-info dt {
        max-width: 42%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .detail-layout .detail-info dd {
        max-width: 58%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .detail-layout .detail-panel {
        padding: 16px 14px;
    }

    .detail-layout .detail-panel p,
    .site-ai-description p,
    .article-content {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .detail-layout .trend-chart {
        height: 220px;
        overflow: hidden;
    }

    .detail-layout .trend-chart svg {
        height: 180px;
    }

    .detail-layout .trend-days {
        font-size: 11px;
    }

    .trend-tooltip {
        max-width: calc(100vw - 32px);
    }

    .related-nav-panel h2 {
        padding: 18px 14px 16px 28px;
    }

    .related-nav-panel h2::before {
        left: 14px;
        top: 21px;
    }

    .related-nav-grid {
        grid-template-columns: 1fr;
        width: 100%;
        min-width: 0;
    }

    .related-nav-item {
        min-width: 0;
        min-height: 0;
        padding: 18px 14px;
        box-sizing: border-box;
    }

    .related-nav-item img {
        max-width: 110px;
        width: 38%;
        height: 54px;
        margin-bottom: 12px;
    }

    .related-nav-item strong,
    .related-nav-item p {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .neighbor-log {
        gap: 10px;
        padding: 14px !important;
    }

    .neighbor-log a {
        min-width: 0;
        flex: 1 1 0;
        padding: 0 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .comment-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .navtx-logo strong {
        max-width: 138px;
    }

    .home-link-grid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .home-link-main img {
        width: 16px;
        height: 16px;
    }

    .home-link-main span,
    .category-table-link,
    .category-table-empty {
        font-size: 11px;
    }

    .free-tools-grid {
        gap: 14px 8px;
    }

    .category-table-row {
        grid-template-columns: 40px repeat(5, minmax(0, 1fr)) 14px;
        gap: 4px;
    }
}

.mobile-click-mode {
    display: none;
}

@media (max-width: 760px) {
    .search-hero,
    .search-hero .navtx-wrap,
    .search-box {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .search-box {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        width: 100% !important;
    }

    .search-tabs,
    .search-engine-row {
        grid-column: 1 / -1 !important;
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .search-tabs::-webkit-scrollbar,
    .search-engine-row::-webkit-scrollbar {
        display: none;
    }

    .search-tabs button,
    .search-engine-row button {
        flex: 0 0 auto;
    }

    .search-input-shell {
        grid-column: 1 / -1 !important;
        order: 1 !important;
        width: 100% !important;
        height: 42px !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 44px !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, .9) !important;
        border-radius: 4px !important;
    }

    .search-suggest {
        top: calc(100% + 6px);
        padding: 6px;
        border-radius: 10px;
    }

    .search-suggest-item {
        padding: 10px 12px;
        font-size: 13px;
        border-radius: 8px;
    }

    .search-input-shell::before {
        content: "S" !important;
        display: grid !important;
        grid-column: 1;
        place-items: center;
        color: #0b9f8f;
        font-size: 15px;
        font-weight: 700;
        text-shadow: none;
    }

    .search-input-shell::after {
        display: none !important;
    }

    .search-input-shell input {
        min-width: 0;
        grid-column: 2 !important;
        width: 100%;
        height: 42px !important;
        padding: 0 8px !important;
        color: #1f2937 !important;
        font-size: 14px !important;
    }

    .search-input-shell > button {
        display: block !important;
        grid-column: 3 !important;
        width: 44px;
        height: 42px;
        background: transparent;
    }

    .search-input-shell > button::before {
        left: 12px;
        top: 10px;
        width: 12px;
        height: 12px;
        border-width: 3px;
        border-color: #0b9f8f;
    }

    .search-input-shell > button::after {
        left: 26px;
        top: 25px;
        width: 9px;
        height: 3px;
        background: #0b9f8f;
    }

    .search-tabs {
        order: 2 !important;
        margin-top: 0;
        padding-top: 12px;
        gap: 9px;
    }

    .search-tabs button {
        min-width: 46px;
        height: 44px;
        padding: 0 12px;
        border-radius: 14px;
        font-weight: 700;
    }

    .search-engine-row {
        order: 3 !important;
        display: flex !important;
        justify-content: start;
        gap: 17px;
        margin-top: 0;
        padding-top: 16px;
    }

    .search-engine-row button {
        width: auto !important;
        flex: 0 0 auto !important;
        min-height: 0 !important;
        grid-column: auto !important;
        font-weight: 700;
        line-height: 1;
    }

    .mobile-click-mode {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 100%;
        margin-top: 18px;
        padding: 22px 0 0;
        background: #fff;
        border-top: 1px solid #eef2f6;
        border-bottom: 0;
        color: #344054;
        font-size: 14px;
    }

    .mobile-click-switch {
        position: relative;
        width: 52px;
        height: 30px;
        flex: 0 0 auto;
        border: 0;
        border-radius: 999px;
        background: #d5dce6;
        cursor: pointer;
        transition: background .18s ease;
    }

    .mobile-click-switch i {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 5px rgba(15, 23, 42, .22);
        transition: transform .18s ease;
    }

    .mobile-click-switch.is-active {
        background: #31d05f;
    }

    .mobile-click-switch.is-active i {
        transform: translateX(22px);
    }

    .home-info-board .rank-panel,
    .home-info-board .heat-panel,
    .rank-panel,
    .heat-panel {
        display: none !important;
    }

    .home-info-board {
        grid-template-columns: 1fr !important;
        width: 100%;
        min-width: 0;
    }

    .home-info-left,
    .home-info-right {
        width: 100%;
        min-width: 0;
    }

    .related-nav-panel,
    .related-nav-grid,
    .related-nav-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .related-nav-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .related-nav-item {
        display: block;
        padding: 18px 14px !important;
    }

    .related-nav-item img {
        display: block;
        max-width: 110px;
        width: 38%;
        height: 54px;
        margin: 0 auto 12px;
        object-fit: contain;
    }

    .related-nav-item strong,
    .related-nav-item p {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        white-space: normal !important;
        overflow: hidden;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .related-nav-item strong {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .related-nav-item p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
}