.toc-discover h1 {
    margin: 16px 0 12px;
    font-size: 22px;
    font-weight: 800
}

.toc-discover__status {
    color: var(--toc-text-muted);
    font-size: 14px;
    margin: 8px 0 12px
}

.toc-discover__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px
}

.toc-discover__pill {
    border: 1px solid var(--toc-border);
    background: var(--toc-bg-card);
    color: var(--toc-text-muted);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer
}

.toc-discover__pill--active {
    border-color: var(--toc-accent);
    color: var(--toc-accent);
    background: var(--toc-accent-soft)
}

.toc-channel__h1 {
    margin: 16px 0 8px;
    font-size: 22px;
    font-weight: 800
}

.toc-channel__intro {
    margin: 0 0 12px;
    color: var(--toc-text-muted, #666);
    font-size: 14px;
    line-height: 1.65
}

.toc-channel__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px
}

.toc-channel__pill {
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--toc-border);
    background: var(--toc-bg-elevated);
    color: var(--toc-text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer
}

.toc-channel__pill--active {
    border-color: transparent;
    background: var(--toc-accent);
    color: var(--toc-accent-ink);
    font-weight: 700
}

.toc-channel__subs {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--toc-border)
}

.toc-channel__sub {
    border: 0;
    background: transparent;
    padding: 0 0 10px;
    font-size: 14px;
    color: var(--toc-text-muted);
    font-weight: 400;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px
}

.toc-channel__sub--active {
    color: var(--toc-text);
    font-weight: 700;
    border-bottom-color: var(--toc-accent)
}

.toc-discover__grid {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
    grid-gap: 12px;
    gap: 12px
}

@media (min-width: 900px) {
    .toc-discover__grid {
        grid-template-columns:repeat(6, minmax(0, 1fr))
    }
}

.toc-discover__more {
    display: block;
    margin: 20px auto;
    border: 0;
    border-radius: 999px;
    padding: 10px 20px;
    background: var(--toc-accent-soft);
    color: var(--toc-accent);
    font-weight: 700;
    cursor: pointer
}

.toc-discover__error {
    color: var(--toc-danger)
}

.toc-discover__banners {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-bottom: 16px
}

.toc-discover__banner {
    flex: 0 0 200px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
    background: #222
}

.toc-discover__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.toc-rank__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none
}

.toc-rank__hero {
    margin-bottom: 14px
}

.toc-rank__title {
    margin: 16px 0 6px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .02em
}

.toc-rank__desc {
    margin: 0 0 12px;
    color: var(--toc-text-muted);
    font-size: 13px;
    line-height: 1.5
}

.toc-rank__nominate {
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--toc-accent-soft);
    border: 1px solid rgba(245, 197, 66, .35);
    color: var(--toc-accent);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer
}

.toc-rank__stats {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    grid-gap: 8px;
    gap: 8px;
    margin-bottom: 14px
}

.toc-rank__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: 8px;
    background: var(--toc-bg-elevated);
    border: 1px solid var(--toc-border)
}

.toc-rank__stat-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--toc-accent);
    line-height: 1.2
}

.toc-rank__stat-label {
    font-size: 10px;
    color: var(--toc-text-muted);
    text-align: center;
    line-height: 1.3
}

.toc-rank__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px
}

.toc-rank__pill {
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--toc-border);
    background: var(--toc-bg-elevated);
    color: var(--toc-text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer
}

.toc-rank__pill--active {
    border-color: transparent;
    background: var(--toc-accent);
    color: var(--toc-accent-ink);
    font-weight: 700
}

.toc-rank__row {
    padding: 10px;
    border-radius: 12px;
    background: var(--toc-bg-elevated);
    border: 1px solid var(--toc-border)
}

.toc-rank__main, .toc-rank__row {
    display: flex;
    align-items: center;
    gap: 10px
}

.toc-rank__main {
    flex: 1 1;
    min-width: 0;
    color: inherit;
    text-decoration: none
}

.toc-rank__no {
    flex-shrink: 0;
    width: 24px;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    line-height: 1;
    color: var(--toc-text-muted)
}

.toc-rank__no--1 {
    color: var(--toc-accent)
}

.toc-rank__no--2 {
    color: #c084fc
}

.toc-rank__no--3 {
    color: #22d3ee
}

.toc-rank__cover {
    flex-shrink: 0;
    width: 56px;
    height: 80px;
    border-radius: 8px;
    background: #222;
    border: 1px solid var(--toc-border)
}

.toc-rank__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px
}

.toc-rank__body {
    flex: 1 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.toc-rank__name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.toc-rank__pin {
    margin-left: 6px;
    font-style: normal;
    color: var(--toc-accent);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap
}

.toc-rank__sub {
    color: var(--toc-text-muted);
    font-size: 12px
}

.toc-rank__vote {
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--toc-accent);
    color: var(--toc-accent-ink);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer
}

.toc-rank__empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--toc-text-muted);
    font-size: 14px;
    border-radius: 12px
}

.toc-rank__empty, .toc-rank__toast {
    background: var(--toc-bg-elevated);
    border: 1px solid var(--toc-border)
}

.toc-rank__toast {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    padding: 8px 14px;
    border-radius: 8px
}

.toc-rank__modal-title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 800
}

.toc-rank__field {
    display: block;
    margin-bottom: 10px;
    color: var(--toc-text-muted);
    font-size: 13px
}

.toc-rank__field input, .toc-rank__field textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    border-radius: 8px;
    border: 1px solid var(--toc-border);
    background: var(--toc-bg-card);
    color: var(--toc-text);
    padding: 10px 12px;
    font: inherit
}

.toc-rank__required {
    color: var(--toc-accent)
}

.toc-rank__field--invalid input, .toc-rank__field--invalid textarea {
    border-color: #e85d5d
}

.toc-rank__field-error {
    display: block;
    margin-top: 6px;
    color: #e85d5d;
    font-size: 12px;
    line-height: 1.35
}

.toc-rank__modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px
}

.toc-rank__modal-cancel {
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--toc-border);
    background: transparent;
    color: var(--toc-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer
}

@media (max-width: 560px) {
    .toc-rank__stats {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

.toc-topic__hero {
    margin: 16px 0
}

.toc-topic__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .02em
}

.toc-topic__desc {
    margin: 0;
    color: var(--toc-text-muted);
    font-size: 13px;
    line-height: 1.5
}

.toc-topic__list {
    display: flex;
    flex-direction: column;
    gap: 22px
}

.toc-topic__block {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.toc-topic__preview {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    grid-gap: 12px 10px;
    gap: 12px 10px
}

.toc-topic__banner {
    position: relative;
    display: block;
    height: 168px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--toc-border);
    background-color: #2a2a2a;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    color: inherit;
    text-decoration: none
}

.toc-topic__count {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 11px;
    font-weight: 700
}

.toc-topic__banner-body {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: min(520px, 72%)
}

.toc-topic__banner-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff
}

.toc-topic__banner-desc {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .78);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.toc-topic__empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--toc-text-muted);
    font-size: 14px;
    border-radius: 12px;
    background: var(--toc-bg-elevated);
    border: 1px solid var(--toc-border)
}

.toc-topic__card {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--toc-border);
    color: inherit
}

.toc-topic__cover {
    width: 96px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    background: #222
}

.toc-search__hots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 20px
}

.toc-search__form {
    display: flex;
    gap: 8px;
    margin-bottom: 16px
}

.toc-search__form input {
    flex: 1 1;
    border-radius: 999px;
    border: 1px solid var(--toc-border);
    background: var(--toc-bg-card);
    color: var(--toc-text);
    padding: 12px 16px
}

.toc-search__form button {
    border: 0;
    border-radius: 999px;
    padding: 0 18px;
    background: var(--toc-accent);
    color: var(--toc-accent-ink);
    font-weight: 700;
    cursor: pointer
}

.toc-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .65);
    overscroll-behavior: contain;
    touch-action: none
}

.toc-modal__sheet {
    width: 100%;
    max-width: 480px;
    max-height: min(90vh, 640px);
    overflow-y: auto;
    touch-action: auto;
    background: var(--toc-bg-elevated);
    border: 1px solid var(--toc-border);
    border-radius: 16px;
    padding: 16px;
    box-sizing: border-box
}

.toc-modal__sheet input, .toc-modal__sheet textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0;
    border-radius: 8px;
    border: 1px solid var(--toc-border);
    background: var(--toc-bg-card);
    color: var(--toc-text);
    padding: 10px
}