@charset "utf-8";
/* 墨阅小说主题 */

:root {
    --my-bg: #fafafa;
    --my-card: #fff;
    --my-footer-bg: #fffbeb;
    --my-accent: #d97706;
    --my-accent-hover: #b45309;
    --my-accent-light: #fff7e6;
    --my-text: #1a1a1a;
    --my-text-2: #666;
    --my-text-3: #999;
    --my-border: #eee;
    --my-radius: 10px;
    --my-radius-pill: 999px;
    --my-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    --my-container: 1200px;
    --my-green: #16a34a;
    --my-green-bg: #dcfce7;
    --my-input-bg: #fafafa;
    --my-subtle-bg: #f9fafb;
    --my-subtle-border: #f3f4f6;
    --my-tab-track: #f3f4f6;
    --my-hover-border: #e5e7eb;
    --my-icon-muted: #d1d5db;
    --my-footer-divider: #f0e6c8;
    --my-footer-chip-divider: #e8dfc0;
    --my-accent-border: #fde68a;
    --my-danger: #dc2626;
}

html.theme-dark {
    color-scheme: dark;
    --my-bg: #121212;
    --my-card: #1e1e1e;
    --my-footer-bg: #1a1814;
    --my-accent: #f59e0b;
    --my-accent-hover: #fbbf24;
    --my-accent-light: #292524;
    --my-text: #e8e8e8;
    --my-text-2: #a3a3a3;
    --my-text-3: #737373;
    --my-border: #333;
    --my-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    --my-green: #4ade80;
    --my-green-bg: #14532d;
    --my-input-bg: #2a2a2a;
    --my-subtle-bg: #252525;
    --my-subtle-border: #333;
    --my-tab-track: #2a2a2a;
    --my-hover-border: #444;
    --my-icon-muted: #555;
    --my-footer-divider: #2d2a24;
    --my-footer-chip-divider: #3d3830;
    --my-accent-border: #78350f;
    --my-danger: #f87171;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

html, body {
    margin: 0;
    padding: 0;
}

body.my-body {
    overflow-x: hidden;
    max-width: 100vw;
}

body.my-body,
body {
    background: var(--my-bg);
    color: var(--my-text);
    font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

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

a:hover { text-decoration: none; }

.my-container {
    width: min(var(--my-container), calc(100% - 32px));
    margin: 0 auto;
}

/* ===== Header ===== */
.my-header {
    background: var(--my-card);
    border-bottom: 1px solid var(--my-border);
    position: sticky;
    top: 0;
    z-index: 200;
}

.my-header__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 64px;
    padding: 10px 0;
}

.my-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--my-text);
}

.my-logo i {
    font-size: 22px;
    color: var(--my-accent);
    flex-shrink: 0;
}

.my-logo svg { flex-shrink: 0; }

.my-btn-login i {
    font-size: 14px;
}

.my-search {
    flex: 1;
    max-width: 520px;
    margin: 0 auto;
    position: relative;
}

.my-search input {
    width: 100%;
    height: 40px;
    padding: 0 16px 0 40px;
    border: 1px solid var(--my-border);
    border-radius: var(--my-radius-pill);
    background: var(--my-input-bg);
    font-size: 14px;
    outline: none;
}

.my-search input:focus {
    border-color: var(--my-accent-hover);
    background: var(--my-card);
}

.my-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--my-text-3);
    pointer-events: none;
}

.my-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

.my-nav a {
    color: var(--my-text-2);
    font-size: 15px;
}

.my-nav a.on,
.my-nav a:hover {
    color: var(--my-text);
    font-weight: 600;
}

.my-btn-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--my-radius-pill);
    background: var(--my-accent-light);
    color: var(--my-accent);
    font-size: 14px;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
}

.my-header .user_link {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.my-header .user_link .line { display: none; }

.my-header .user_link a {
    color: var(--my-text-2);
}

.my-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.my-header-theme-btn i {
    font-size: 20px;
}

.my-header-tools {
    display: none;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.my-header-icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--my-text-2);
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 201;
}

.my-header-icon-btn:hover {
    background: var(--my-subtle-bg);
    color: var(--my-text);
}

/* 手机端顶栏下拉（对齐静态 site.css mobile-search / mobile-nav） */
.my-mobile-search,
.my-mobile-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 56px;
    z-index: 205;
    background: var(--my-card);
    border-bottom: 1px solid var(--my-subtle-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.my-mobile-search.is-open,
.my-mobile-nav.is-open {
    display: block;
}

.my-mobile-search__inner {
    padding: 12px 16px 8px;
}

.my-mobile-search__field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    background: var(--my-input-bg);
    border: 1px solid var(--my-border);
    border-radius: var(--my-radius-pill);
}

.my-mobile-search__field:focus-within {
    border-color: var(--my-accent-hover);
    background: var(--my-card);
}

.my-mobile-search__field > .ri-search-line {
    color: var(--my-text-3);
    font-size: 16px;
    flex-shrink: 0;
}

.my-mobile-search__field input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
    color: var(--my-text);
}

.my-mobile-search__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--my-text-3);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.my-mobile-nav a {
    display: block;
    padding: 14px 20px;
    font-size: 14px;
    color: var(--my-text);
    text-align: left;
    border-bottom: 1px solid var(--my-subtle-border);
}

.my-mobile-nav a.on {
    color: var(--my-accent);
    font-weight: 600;
}

.my-mobile-nav a:active {
    background: var(--my-subtle-bg);
}

.my-mobile-nav__user {
    border-top: 1px solid var(--my-subtle-border);
}

.my-mobile-nav__login {
    display: block;
    padding: 14px 20px;
    font-size: 14px;
    color: var(--my-accent) !important;
    font-weight: 500;
    text-align: left;
}

.my-mobile-nav__user a {
    display: block;
    padding: 14px 20px;
    border-bottom: 1px solid var(--my-subtle-border);
    color: var(--my-text);
    font-weight: 400;
    text-align: left;
}

.my-mobile-nav__user a.on {
    color: var(--my-accent);
    font-weight: 600;
}

.my-mobile-nav__user a.my-mobile-nav__logout {
    color: var(--my-text-3);
    font-weight: 400;
    border-bottom: none;
}

@media (max-width: 767px) {
    .my-container {
        width: calc(100% - 24px);
    }

    .my-header__inner {
        gap: 8px;
        min-height: 56px;
        padding: 8px 0;
    }

    .my-logo {
        font-size: 16px;
        min-width: 0;
        flex: 1;
    }

    .my-logo span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .my-search--desktop,
    .my-nav--desktop,
    .my-header-user--desktop {
        display: none !important;
    }

    .my-header-tools {
        display: flex;
    }

    .my-main {
        padding-top: 16px;
    }
}

@media (min-width: 768px) {
    .my-header-tools,
    .my-mobile-search,
    .my-mobile-nav {
        display: none !important;
    }
}

/* ===== Main ===== */
.my-main {
    padding: 24px 0 48px;
    min-height: calc(100vh - 200px);
}

.my-page-head {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--my-border);
}

.my-page-tabs-section {
    padding-top: 8px;
    margin-bottom: 24px;
}

.my-breadcrumb {
    font-size: 13px;
    color: var(--my-text-3);
    margin-bottom: 8px;
}

.my-breadcrumb a { color: var(--my-text-3); }

.my-page-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--my-text);
}

.my-page-desc {
    color: var(--my-text-3);
    font-size: 14px;
    margin: 0;
}

/* ===== Card ===== */
.my-card {
    background: var(--my-card);
    border-radius: var(--my-radius);
    box-shadow: var(--my-shadow);
    padding: 20px;
    margin-bottom: 20px;
}

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

.my-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.my-section-more {
    color: var(--my-accent);
    font-size: 14px;
}

/* ===== 首页区块 ===== */
.my-index-section {
    margin-bottom: 28px;
    min-width: 0;
}

.my-index-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.my-index-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--my-text);
}

.my-index-section__title i {
    font-size: 20px;
    color: var(--my-accent);
}

.my-hot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    min-width: 0;
}

@media (min-width: 640px) {
    .my-hot-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .my-hot-grid { grid-template-columns: repeat(4, 1fr); }
}

.my-hot-card {
    background: var(--my-card);
    border-radius: 8px;
    border: 1px solid var(--my-subtle-border);
    padding: 12px;
    min-height: 88px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    color: inherit;
    transition: border-color 0.15s;
    overflow: hidden;
}

.my-hot-card:hover {
    color: inherit;
    border-color: var(--my-hover-border);
}

.my-hot-card:hover .my-hot-card__title {
    color: var(--my-accent);
}

.my-hot-card__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    color: var(--my-text);
    transition: color 0.15s;
}

.my-hot-card .my-book-card__sub {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 首页双栏 ===== */
.my-home-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 1024px) {
    .my-home-layout { grid-template-columns: 1fr; }
}

.my-home-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* 分类列表卡片（首页左侧） */
.my-cat-block {
    background: var(--my-card);
    border-radius: 8px;
    border: 1px solid var(--my-subtle-border);
    overflow: hidden;
    width: 100%;
}

.my-cat-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--my-subtle-border);
    background: var(--my-card);
}

.my-cat-block__head-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.my-cat-block__head-left > i {
    font-size: 16px;
    color: var(--my-accent);
    flex-shrink: 0;
}

.my-cat-block__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--my-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-cat-block__more {
    font-size: 12px;
    color: var(--my-accent);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    white-space: nowrap;
}

.my-cat-block__more:hover {
    color: var(--my-accent-hover);
}

.my-cat-block__more i {
    font-size: 14px;
}

.my-cat-block__list {
    display: flex;
    flex-direction: column;
    background: var(--my-card);
}

.my-cat-block__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--my-subtle-border);
    color: inherit;
    transition: background 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.my-cat-block__row:last-child {
    border-bottom: none;
}

.my-cat-block__row:hover {
    background: var(--my-subtle-bg);
}

.my-cat-block__row:hover .my-cat-block__name,
.my-cat-block__row:hover .my-cat-block__compact-name {
    color: var(--my-accent);
}

.my-cat-block__row--compact {
    align-items: center;
    padding: 10px 16px;
}

.my-cat-block__body {
    flex: 1;
    min-width: 0;
}

.my-cat-block__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    min-width: 0;
}

.my-cat-block__name {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--my-text);
    transition: color 0.15s;
}

.my-cat-block__sub {
    font-size: 12px;
    color: var(--my-text-2);
    margin: 0 0 4px;
    line-height: 1.4;
}

.my-cat-block__desc {
    font-size: 12px;
    color: var(--my-text-3);
    margin: 0 0 6px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.my-cat-block__desc p,
.my-cat-block__desc div,
.my-cat-block__desc span,
.my-cat-block__desc a {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    background: none;
    border: none;
}

.my-cat-block__desc br {
    display: none;
}

.my-cat-block__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--my-text-3);
}

.my-cat-block__stats .score {
    color: var(--my-accent);
    font-weight: 600;
}

.my-cat-block__views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.my-cat-block__views i {
    font-size: 12px;
}

.my-cat-block__compact-line {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-cat-block__compact-name {
    font-weight: 600;
    color: var(--my-text);
    transition: color 0.15s;
}

.my-cat-block__compact-sep,
.my-cat-block__compact-author {
    color: var(--my-text-3);
}

.my-cat-block__arrow {
    color: var(--my-text-3);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    line-height: 1;
    opacity: 0.6;
}

.my-cat-block__row--compact .my-cat-block__arrow {
    margin-top: 0;
}

/* 侧栏面板 */
.my-home-aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.my-aside-panel {
    background: var(--my-card);
    border-radius: 8px;
    border: 1px solid var(--my-subtle-border);
    overflow: hidden;
}

.my-aside-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--my-subtle-border);
}

.my-aside-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--my-text);
}

.my-aside-panel__title i {
    color: var(--my-accent);
    font-size: 16px;
}

.my-aside-panel__more {
    font-size: 12px;
    color: var(--my-accent);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.my-aside-panel__body {
    padding: 8px 12px;
}

.my-aside-panel__body--compact {
    padding: 4px 8px;
}

.my-aside-rec {
    display: block;
    padding: 10px 8px;
    border-radius: 6px;
    color: inherit;
    transition: background 0.15s;
}

.my-aside-rec:hover {
    background: var(--my-subtle-bg);
}

.my-aside-rec:hover .my-aside-rec__name {
    color: var(--my-accent);
}

.my-aside-rec__name {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--my-text);
}

.my-aside-rec__sub {
    font-size: 12px;
    color: var(--my-text-3);
    margin: 0 0 4px;
}

.my-aside-rec__meta {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--my-text-3);
}

.my-aside-rec__meta .score {
    color: var(--my-accent);
    font-weight: 600;
}

.my-aside-rank {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 6px;
    color: inherit;
    transition: background 0.15s;
    min-width: 0;
}

.my-aside-rank:hover {
    background: var(--my-subtle-bg);
}

.my-aside-rank__num {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--my-tab-track);
    color: var(--my-text-3);
}

.my-aside-rank__num.top {
    background: var(--my-accent-light);
    color: var(--my-accent);
}

.my-aside-rank__info {
    flex: 1;
    min-width: 0;
}

.my-aside-rank__info .name {
    font-size: 14px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--my-text);
}

.my-aside-rank__info .author {
    font-size: 12px;
    color: var(--my-text-3);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-aside-rank__views {
    font-size: 12px;
    color: var(--my-text-3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== 书籍列表项 ===== */
.my-book-item {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--my-border);
    position: relative;
}

.my-book-item:last-child { border-bottom: none; }

.my-book-item__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.my-book-item__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--my-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-book-item__sub {
    font-size: 13px;
    color: var(--my-text-3);
    margin-bottom: 8px;
}

.my-book-item__desc {
    font-size: 13px;
    color: var(--my-text-2);
    line-height: 1.6;
    height: 42px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 8px;
}

.my-book-item__stats {
    font-size: 12px;
    color: var(--my-text-3);
}

.my-book-item__stats .score {
    color: var(--my-accent);
    font-weight: 600;
    margin-right: 10px;
}

.my-book-item__arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--my-icon-muted);
    font-size: 18px;
}

.my-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--my-radius-pill);
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

.my-tag--done {
    background: var(--my-green-bg);
    color: var(--my-green);
}

.my-tag--serial {
    background: var(--my-accent-light);
    color: var(--my-accent);
}

/* ===== 排行榜侧栏 ===== */
.my-rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.my-rank-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--my-border);
}

.my-rank-list li:last-child { border-bottom: none; }

.my-rank-num {
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--my-text-3);
    background: var(--my-tab-track);
    flex-shrink: 0;
}

.my-rank-num.top1,
.my-rank-num.top2,
.my-rank-num.top3 {
    background: var(--my-accent-light);
    color: var(--my-accent);
}

.my-rank-info { flex: 1; min-width: 0; }

.my-rank-info .name {
    display: block;
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-rank-info .author {
    display: block;
    font-size: 12px;
    color: var(--my-text-3);
    margin-top: 2px;
}

.my-rank-views {
    font-size: 12px;
    color: var(--my-text-3);
    flex-shrink: 0;
    padding-top: 2px;
}

/* ===== 分类筛选 ===== */
.my-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--my-border);
}

.my-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.my-filter-label {
    color: var(--my-text-3);
    font-size: 14px;
    margin-right: 4px;
}

.my-filter-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--my-radius-pill);
    font-size: 13px;
    color: var(--my-text-2);
    background: transparent;
}

.my-filter-pill.on,
.my-filter-pill:hover {
    background: var(--my-accent-light);
    color: var(--my-accent);
}

/* ===== 分类页书籍卡片 ===== */
.my-book-card {
    display: block;
    background: var(--my-card);
    border-radius: 8px;
    border: 1px solid var(--my-subtle-border);
    padding: 16px 20px;
    margin-bottom: 12px;
    position: relative;
    transition: border-color 0.15s;
}

.my-book-card:hover {
    border-color: var(--my-hover-border);
}

.my-book-card:hover .my-book-card__title {
    color: var(--my-accent);
}

.my-book-card__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding-right: 24px;
}

.my-book-card__title {
    font-size: 17px;
    font-weight: 700;
}

.my-book-card__sub {
    font-size: 13px;
    color: var(--my-text-3);
    margin-bottom: 10px;
}

.my-book-card__desc {
    font-size: 14px;
    color: var(--my-text-2);
    line-height: 1.6;
    height: 44px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 12px;
}

.my-book-card__stats {
    font-size: 13px;
    color: var(--my-text-3);
}

.my-book-card__stats .score {
    color: var(--my-accent);
    font-weight: 600;
    margin-right: 12px;
}

.my-book-card__arrow,
.my-book-card__arrow-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--my-icon-muted);
    font-size: 18px;
}

.my-book-card__views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.my-book-card__views i {
    font-size: 12px;
}

/* ===== 排行榜页 ===== */
.my-rank-tabs {
    display: flex;
    width: 100%;
    max-width: 640px;
    background: var(--my-tab-track);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 0;
    gap: 4px;
    border: 1px solid var(--my-border);
}

.my-rank-tab {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--my-text-2);
    min-width: 0;
    transition: color 0.15s, background 0.15s;
}

.my-rank-tab:hover {
    color: var(--my-text);
}

.my-rank-tab.on {
    background: var(--my-card);
    color: var(--my-accent);
    font-weight: 600;
    box-shadow: var(--my-shadow);
}

.my-rank-list-card {
    background: var(--my-card);
    border-radius: 8px;
    border: 1px solid var(--my-subtle-border);
    overflow: hidden;
}

.my-rank-list-card__head {
    padding: 12px 20px;
    border-bottom: 1px solid var(--my-subtle-border);
    background: var(--my-subtle-bg);
    font-size: 14px;
    font-weight: 600;
    color: var(--my-text);
}

.my-rank-list-card__body {
    padding: 8px 8px;
}

.my-rank-list-card__body:first-child {
    padding-top: 12px;
}

.my-rank-page-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--my-subtle-border);
}

.my-rank-page-item:last-child { border-bottom: none; }

.my-rank-page-num {
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    color: var(--my-text-3);
    background: var(--my-tab-track);
    flex-shrink: 0;
}

.my-rank-page-num.top { background: var(--my-accent-light); color: var(--my-accent); }

.my-rank-page-main { flex: 1; min-width: 0; }

.my-rank-page-main .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.my-rank-page-main .meta {
    font-size: 13px;
    color: var(--my-text-3);
}

.my-rank-page-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--my-text-3);
}

.my-rank-page-stats .score { color: var(--my-accent); font-weight: 600; }

/* ===== 最新小说表格 ===== */
.my-latest-table-wrap .updateTable {
    color: var(--my-text-3);
}

.my-latest-table-wrap .updateTable table {
    width: 100%;
    border-collapse: collapse;
}

.my-latest-table-wrap .updateTable th,
.my-latest-table-wrap .updateTable td {
    height: 40px;
    line-height: 40px;
    padding: 0 8px;
    text-align: left;
    vertical-align: middle;
}

.my-latest-table-wrap .updateTable th {
    font-weight: 600;
    color: var(--my-text);
    border-bottom: 1px solid var(--my-subtle-border);
    background: var(--my-subtle-bg);
}

.my-latest-table-wrap .updateTable td {
    border-top: 1px solid var(--my-subtle-border);
    color: var(--my-text-2);
}

.my-latest-table-wrap .updateTable tr:nth-child(2n) td {
    background: var(--my-subtle-bg);
}

.my-latest-table-wrap .updateTable .name a,
.my-latest-table-wrap .updateTable .chapter a {
    color: var(--my-text);
}

.my-latest-table-wrap .updateTable .style a,
.my-latest-table-wrap .updateTable .author a {
    color: var(--my-text-3);
}

.my-latest-table-wrap .updateTable .name a:hover,
.my-latest-table-wrap .updateTable .chapter a:hover,
.my-latest-table-wrap .updateTable .style a:hover {
    color: var(--my-accent);
}

.my-latest-table-wrap .updateTable .rank i {
    display: inline-block;
    min-width: 22px;
    text-align: center;
    font-style: normal;
    font-weight: 600;
    color: var(--my-text-3);
    background: var(--my-tab-track);
    border-radius: 4px;
    padding: 2px 4px;
}

.my-latest-table-wrap .updateTable .rank i.num1,
.my-latest-table-wrap .updateTable .rank i.num2,
.my-latest-table-wrap .updateTable .rank i.num3 {
    background: var(--my-accent-light);
    color: var(--my-accent);
}

.my-latest-page-item .my-rank-page-main .title a {
    color: var(--my-text);
    text-decoration: none;
}

.my-latest-page-item .my-rank-page-main .title a:hover {
    color: var(--my-accent);
}

@media (max-width: 767px) {
    .my-latest-page-item {
        gap: 12px;
        padding: 12px;
    }

    .my-latest-page-item .my-rank-page-main .title {
        font-size: 15px;
    }

    .my-latest-page-item .my-rank-page-stats {
        font-size: 12px;
    }
}

/* ===== 登录/注册 ===== */
.my-auth-wrap {
    display: flex;
    justify-content: center;
    padding: 40px 16px 60px;
}

.my-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--my-card);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
    padding: 40px 36px;
}

.my-auth-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--my-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--my-accent);
}

.my-auth-icon i {
    font-size: 24px;
}

.my-auth-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 6px;
}

.my-auth-sub {
    text-align: center;
    color: var(--my-text-3);
    font-size: 14px;
    margin: 0 0 28px;
}

.my-form-group {
    margin-bottom: 16px;
}

.my-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--my-text);
}

.my-form-input-wrap {
    position: relative;
}

.my-form-input-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--my-text-3);
}

.my-form-input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--my-border);
    border-radius: 8px;
    background: var(--my-input-bg);
    font-size: 14px;
    outline: none;
    color: var(--my-text);
}

.my-form-input:focus {
    border-color: var(--my-accent-hover);
    background: var(--my-card);
}

.my-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--my-text-3);
}

.my-form-row a { color: var(--my-accent); }

.my-btn-primary {
    display: block;
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: var(--my-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.my-btn-primary:hover { background: var(--my-accent-hover); }

.my-auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--my-text-3);
}

.my-auth-footer a { color: var(--my-accent); font-weight: 600; }

.my-form-error {
    color: var(--my-danger);
    font-size: 13px;
    min-height: 20px;
    margin-bottom: 8px;
}

.my-captcha-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.my-captcha-row .my-form-input { flex: 1; }

.my-captcha-row img {
    height: 44px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--my-border);
}

/* ===== 分页 ===== */
.my-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 24px 0;
    font-size: 14px;
    color: var(--my-text-3);
}

.my-pagination a {
    color: var(--my-accent);
}

/* ===== 搜索页 ===== */
.my-search-page {
    max-width: 960px;
}

.my-search-page .my-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--my-text-3);
    margin-bottom: 16px;
}

.my-search-page .my-breadcrumb a {
    color: var(--my-text-3);
}

.my-search-page .my-breadcrumb a:hover {
    color: var(--my-accent);
}

.my-search-page .my-breadcrumb i {
    font-size: 14px;
}

.my-search-page__title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px;
}

.my-search-page__form {
    margin-bottom: 16px;
}

.my-search-page__field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 5px 5px 5px 14px;
    background: var(--my-card);
    border: 1px solid var(--my-border);
    border-radius: 8px;
}

.my-search-page__field:focus-within {
    border-color: var(--my-accent-hover);
}

.my-search-page__field > .ri-search-line {
    color: var(--my-text-3);
    font-size: 18px;
    flex-shrink: 0;
}

.my-search-page__field input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 15px;
    outline: none;
    color: var(--my-text);
}

.my-search-page__submit {
    width: auto;
    min-width: 64px;
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: 6px;
    background: var(--my-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.my-search-page__submit:hover {
    background: var(--my-accent-hover);
}

.my-search-page__summary {
    font-size: 14px;
    color: var(--my-text-3);
    margin: 0 0 20px;
}

.my-search-page__summary strong {
    color: var(--my-accent);
    font-weight: 600;
}

.my-search-hit {
    color: var(--my-accent);
}

.my-search-empty {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 32px 24px;
    background: var(--my-card);
    border: 1px solid var(--my-subtle-border);
    border-radius: 8px;
}

.my-search-empty__icon {
    flex-shrink: 0;
    color: var(--my-icon-muted);
    font-size: 48px;
    line-height: 1;
}

.my-search-empty__body {
    flex: 1;
    min-width: 0;
}

.my-search-empty__title {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--my-text);
}

.my-search-empty__hint {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--my-text-3);
}

.my-search-empty__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.my-search-empty__tags a {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--my-text-2);
    background: var(--my-input-bg);
    border: 1px solid var(--my-border);
    border-radius: var(--my-radius-pill);
}

.my-search-empty__tags a:hover {
    border-color: var(--my-accent-border);
    color: var(--my-accent);
    background: var(--my-accent-light);
}

@media (max-width: 640px) {
    .my-search-page__title {
        font-size: 22px;
    }

    .my-search-empty {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 28px 20px;
    }

    .my-search-empty__tags {
        justify-content: center;
    }
}

/* ===== Footer ===== */
.my-footer {
    background: var(--my-card);
    border-top: 1px solid var(--my-border);
    padding: 28px 0 24px;
    margin-top: 32px;
}

.my-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.my-footer-categories-wrap {
    width: 100%;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--my-subtle-border);
}

.my-footer-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
    line-height: 1.5;
    font-size: 13px;
}

.my-footer-categories a {
    color: var(--my-text-3);
}

.my-footer-categories a:hover {
    color: var(--my-accent);
}

.my-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--my-text);
}

.my-footer-brand i {
    font-size: 20px;
    color: var(--my-accent);
}

.my-footer-brand:hover {
    color: var(--my-accent);
}

.my-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 20px;
}

.my-footer-nav a {
    font-size: 13px;
    color: var(--my-text-2);
}

.my-footer-nav a:hover {
    color: var(--my-accent);
}

.my-footer-copy {
    margin: 0;
    font-size: 12px;
    color: var(--my-text-3);
}

@media (max-width: 640px) {
    .my-footer {
        padding: 24px 0 20px;
        margin-top: 24px;
    }

    .my-footer__inner {
        gap: 12px;
    }

    .my-footer-nav {
        gap: 6px 16px;
    }
}

/* hide legacy chrome */
.header .topBar,
.header .mainNav { display: none !important; }

.footer:not(.my-footer) { display: none !important; }

/* ===== 子页面兼容（详情/阅读/用户中心等沿用旧结构） ===== */
.main.box_center {
    width: min(var(--my-container), calc(100% - 32px));
    margin: 0 auto;
    padding: 24px 0;
}

.channelBookContent,
.channelWrap,
.userBox {
    background: var(--my-card);
    border-radius: var(--my-radius);
    box-shadow: var(--my-shadow);
    padding: 20px;
}

.my-body .btn_red,
.my-body .btn_ora {
    background: var(--my-accent);
    border-color: var(--my-accent);
    border-radius: 8px;
}

.my-body .btn_ora_white {
    border-color: var(--my-accent);
    color: var(--my-accent);
    border-radius: 8px;
}

/* ===== 书籍详情页 ===== */
.my-detail-card {
    background: var(--my-card);
    border-radius: var(--my-radius);
    box-shadow: var(--my-shadow);
    padding: 28px;
    margin-bottom: 20px;
}

.my-detail-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--my-text);
}

.my-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: 14px;
    color: var(--my-text-2);
    margin-bottom: 16px;
}

.my-detail-meta a {
    color: var(--my-text-2);
}

.my-detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
    color: var(--my-text-3);
    margin-bottom: 20px;
}

.my-detail-stats .score {
    color: var(--my-accent);
    font-weight: 600;
}

.my-detail-desc {
    font-size: 14px;
    color: var(--my-text-2);
    line-height: 1.7;
    margin-bottom: 24px;
    max-height: 48px;
    overflow: hidden;
}

.my-detail-desc.is-expanded {
    max-height: none;
}

.my-detail-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.my-btn-read {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 42px;
    padding: 0 24px;
    border: none;
    border-radius: 8px;
    background: var(--my-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.my-btn-shelf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 42px;
    padding: 0 24px;
    border: 1px solid var(--my-border);
    border-radius: 8px;
    background: var(--my-input-bg);
    color: var(--my-text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.my-btn-shelf:hover {
    background: var(--my-subtle-bg);
    border-color: var(--my-text-3);
}

.my-btn-shelf.is-added {
    color: var(--my-text-3);
    cursor: default;
}

.my-btn-shelf.is-added:hover {
    background: var(--my-input-bg);
    border-color: var(--my-border);
}

.my-chapter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.my-chapter-head h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.my-chapter-head .sub {
    font-size: 13px;
    font-weight: normal;
    color: var(--my-text-3);
}

.my-chapter-head .update-time {
    font-size: 13px;
    color: var(--my-accent);
}

.my-chapter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--my-border);
}

@media (max-width: 768px) {
    .my-chapter-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .my-chapter-grid { grid-template-columns: 1fr; }
}

.my-chapter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--my-border);
    font-size: 14px;
    color: var(--my-text);
    text-decoration: none;
}

.my-chapter-item:hover {
    background: var(--my-subtle-bg);
}

.my-chapter-item .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.my-chapter-item .words {
    color: var(--my-text-3);
    font-size: 12px;
    flex-shrink: 0;
}

.my-chapter-item .vip {
    color: var(--my-accent);
    font-size: 11px;
    margin-right: 4px;
}

/* 目录默认折叠为 2 行：3 列×2 / 2 列×2 / 1 列×2 */
.my-chapter-grid.is-collapsed .my-chapter-item:nth-child(n+7) {
    display: none;
}

@media (max-width: 768px) {
    .my-chapter-grid.is-collapsed .my-chapter-item:nth-child(n+7) {
        display: flex;
    }

    .my-chapter-grid.is-collapsed .my-chapter-item:nth-child(n+5) {
        display: none;
    }
}

@media (max-width: 480px) {
    .my-chapter-grid.is-collapsed .my-chapter-item:nth-child(n+5) {
        display: flex;
    }

    .my-chapter-grid.is-collapsed .my-chapter-item:nth-child(n+3) {
        display: none;
    }
}

.my-chapter-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    text-align: center;
    padding: 16px 0 4px;
    color: var(--my-accent);
    font-size: 14px;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

.my-chapter-more:hover {
    color: var(--my-accent-hover);
}

.my-chapter-more i {
    font-size: 16px;
}

.my-rec-section-head {
    margin-bottom: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--my-subtle-border);
}

.my-rec-section-head .my-section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--my-text);
}

.my-rec-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.my-rec-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--my-subtle-border);
}

.my-rec-item:last-child { border-bottom: none; }

.my-rec-item__link {
    flex: 1;
    min-width: 0;
    display: block;
    color: inherit;
    text-decoration: none;
}

.my-rec-item__link:hover .my-rec-item__title {
    color: var(--my-accent);
}

.my-rec-item__title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--my-text);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s;
}

.my-rec-item__sub {
    display: block;
    font-size: 12px;
    color: var(--my-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-rec-item__status {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--my-text-3);
}

/* ===== 书架 / 个人中心 ===== */
.my-user-page {
    max-width: 960px;
}

.my-shelf-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.my-shelf-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: var(--my-radius-pill);
    border: 1px solid transparent;
    background: transparent;
    color: var(--my-text-2);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.my-shelf-tab i {
    font-size: 16px;
}

.my-shelf-tab__count {
    font-size: 12px;
    color: var(--my-text-3);
}

.my-shelf-tab.on {
    background: var(--my-accent-light);
    color: var(--my-accent);
    border-color: var(--my-accent-border);
    font-weight: 600;
}

.my-shelf-tab.on .my-shelf-tab__count {
    color: var(--my-accent);
}

.my-shelf-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.my-shelf-panel[hidden] {
    display: none !important;
}

.my-shelf-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.my-shelf-card--wrap {
    position: relative;
    background: var(--my-card);
    border: 1px solid var(--my-subtle-border);
    border-radius: 8px;
    transition: border-color 0.15s, background 0.15s;
}

a.my-shelf-card--wrap:hover {
    color: inherit;
    border-color: var(--my-hover-border);
}

.my-shelf-card__link {
    display: block;
    color: inherit;
}

.my-shelf-card--wrap .my-shelf-card__foot {
    padding: 0 18px 14px;
    margin-top: -4px;
}

.my-shelf-card__inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
}

.my-shelf-card__main {
    flex: 1;
    min-width: 0;
}

.my-shelf-card__top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.my-shelf-card__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--my-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    transition: color 0.15s;
}

.my-shelf-card:hover .my-shelf-card__title {
    color: var(--my-accent);
}

.my-shelf-card__sub {
    font-size: 12px;
    color: var(--my-text-2);
    margin: 0 0 6px;
}

.my-shelf-card__extra {
    font-size: 12px;
    color: var(--my-text-3);
    margin: 0 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-shelf-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.my-shelf-card__time {
    font-size: 12px;
    color: var(--my-text-3);
}

.my-shelf-card__continue {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--my-accent);
    font-weight: 500;
    text-decoration: none;
}

.my-shelf-card__continue:hover {
    color: var(--my-accent-hover);
}

.my-shelf-card__actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.my-shelf-card__arrow {
    color: var(--my-icon-muted);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    transition: color 0.15s;
}

.my-shelf-card:hover .my-shelf-card__arrow {
    color: var(--my-accent);
}

.my-shelf-card__remove {
    padding: 0;
    border: none;
    background: none;
    font-size: 12px;
    color: var(--my-text-3);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.my-shelf-card__remove:hover {
    color: var(--my-danger);
}

.my-shelf-empty {
    text-align: center;
    padding: 48px 20px;
    background: var(--my-card);
    border: 1px dashed var(--my-hover-border);
    border-radius: 8px;
    color: var(--my-text-3);
}

.my-shelf-empty i {
    font-size: 40px;
    color: var(--my-icon-muted);
    display: block;
    margin-bottom: 12px;
}

.my-profile-head {
    margin-bottom: 24px;
}

.my-profile-head .my-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--my-text-3);
    margin-bottom: 16px;
}

.my-profile-head .my-breadcrumb a {
    color: var(--my-text-3);
}

.my-profile-head .my-breadcrumb a:hover {
    color: var(--my-accent);
}

.my-profile-head .my-breadcrumb i {
    font-size: 14px;
}

.my-profile-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

.my-profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--my-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.my-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-profile-avatar i {
    font-size: 24px;
    color: var(--my-accent);
}

.my-profile-name {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
}

.my-profile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--my-text-3);
}

.my-profile-link {
    color: var(--my-accent);
}

.my-profile-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.my-profile-card {
    background: var(--my-card);
    border: 1px solid var(--my-subtle-border);
    border-radius: 8px;
    padding: 20px 24px;
}

.my-profile-card--plain {
    text-align: center;
    padding: 16px;
}

.my-profile-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.my-profile-card__head i {
    font-size: 18px;
    color: var(--my-accent);
}

.my-profile-card__head h2 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.my-profile-form-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 640px) {
    .my-profile-form-row {
        flex-direction: row;
        align-items: flex-end;
    }

    .my-profile-form-row .my-profile-field {
        flex: 1;
    }
}

.my-profile-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (min-width: 640px) {
    .my-profile-form-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.my-profile-field label {
    display: block;
    font-size: 12px;
    color: var(--my-text-3);
    margin-bottom: 6px;
}

.my-profile-input {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
    border: 1px solid var(--my-border);
    border-radius: 8px;
    background: var(--my-input-bg);
    outline: none;
    font-family: inherit;
    color: var(--my-text);
}

.my-profile-input:focus {
    border-color: var(--my-accent-hover);
    background: var(--my-card);
}

.my-profile-actions {
    display: flex;
    align-items: flex-end;
}

.my-profile-hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--my-danger);
    min-height: 18px;
}

.my-profile-tip {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--my-text-3);
}

.my-profile-logout {
    font-size: 14px;
    color: var(--my-text-2);
}

.my-profile-logout:hover {
    color: var(--my-danger);
}

html.theme-dark .my-book-card,
html.theme-dark .my-hot-card,
html.theme-dark .my-cat-block,
html.theme-dark .my-aside-panel,
html.theme-dark .my-search-empty,
html.theme-dark .my-profile-card,
html.theme-dark .my-shelf-card--wrap,
html.theme-dark .my-shelf-empty,
html.theme-dark .my-detail-card,
html.theme-dark .my-rank-list-card,
html.theme-dark .my-auth-card {
    background: var(--my-card);
    border-color: var(--my-border);
}

html.theme-dark .userBox,
html.theme-dark .channelWrap,
html.theme-dark .channelBookContent,
html.theme-dark .wrap_bg,
html.theme-dark .newsBox {
    background: var(--my-card);
    color: var(--my-text);
}

html.theme-dark .updateTable th {
    background: var(--my-subtle-bg);
    color: var(--my-text);
    border-color: var(--my-border);
}

html.theme-dark .updateTable td {
    border-color: var(--my-border);
    color: var(--my-text-2);
}

html.theme-dark .updateTable tr:nth-child(2n) td {
    background: var(--my-subtle-bg);
}

html.theme-dark .updateTable .name a,
html.theme-dark .updateTable .chapter a {
    color: var(--my-text);
}

html.theme-dark .my_l li a {
    color: var(--my-text-2);
}

html.theme-dark .my_l li .on {
    background: var(--my-subtle-bg);
    color: var(--my-text);
}

html.theme-dark .my-mobile-nav a,
html.theme-dark .my-mobile-nav__user a {
    border-bottom-color: var(--my-border);
}

html.theme-dark .my-search-page__field {
    background: var(--my-card);
    border-color: var(--my-border);
}

/* ===== 回到顶部 ===== */
.my-back-top {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 300;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--my-border);
    border-radius: 50%;
    background: var(--my-card);
    color: var(--my-accent);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .2s, visibility .2s, transform .2s, background .15s;
}

.my-back-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.my-back-top:hover {
    background: var(--my-accent-light);
    border-color: var(--my-accent);
}

@media (max-width: 767px) {
    .my-back-top {
        right: 16px;
        bottom: 20px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}