/*======================================================================
  QiYu Literature Theme
  Warm healing feminine literary style
  brand purple #541A91 / accent pink #F583B0 / reading cream #FFF8F0
  ======================================================================*/

:root {
    /* ---- brand purple ---- */
    --qy-primary:        #541A91;
    --qy-primary-light:  #7A3DB8;
    --qy-primary-pale:   #E9DDF7;
    --qy-primary-deep:   #3E126E;

    /* ---- accent pink ---- */
    --qy-pink:           #F583B0;
    --qy-pink-light:     #FBC7DC;
    --qy-pink-pale:      #FFF0F6;

    /* ---- neutral (reading friendly) ---- */
    --qy-bg:             #FAF8FC;
    --qy-card:           #FFFFFF;
    --qy-read-bg:        #FFF8F0;
    --qy-text-1:         #332A40;
    --qy-text-2:         #6B5F7A;
    --qy-text-3:         #9A8FAA;
    --qy-border:         #ECE6F2;
    --qy-shadow:         rgba(84, 26, 145, 0.08);

    /* ---- functional ---- */
    --qy-success:        #34A77C;
    --qy-warning:        #F29900;
    --qy-error:          #E24A53;

    /* ---- radius system ---- */
    --qy-r-card:         12px;
    --qy-r-btn:          10px;
    --qy-r-tag:          20px;
    --qy-r-modal:        16px;
    --qy-r-banner:       16px;
    --qy-r-cover:        8px;

    /* ---- motion ---- */
    --qy-ease:           cubic-bezier(.25, .8, .25, 1);
}

/*======================================================================
  1. Base
  ======================================================================*/

body {
    background: var(--qy-bg);
    color: var(--qy-text-1);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--qy-primary-pale);
    color: var(--qy-primary-deep);
}

a { color: var(--qy-text-1); transition: color .25s var(--qy-ease); }
a:hover { color: var(--qy-primary); }

input, textarea, select, button { font-family: inherit; }

/* focus ring uses pale purple instead of browser blue */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--qy-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(84, 26, 145, .10) !important;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
    background: var(--qy-primary-pale);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--qy-pink-light); }
::-webkit-scrollbar-track { background: transparent; }

/*======================================================================
  2. Decorative symbols - book / heart / star from the logo
  ======================================================================*/

.qy-heart,
.qy-star,
.qy-book {
    display: inline-block;
    vertical-align: -2px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.qy-heart {
    width: 16px; height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F583B0' d='M12 21.3l-1.5-1.36C5.36 15.3 2 12.25 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.75-3.36 6.8-8.5 11.45L12 21.3z'/%3E%3C/svg%3E");
}

.qy-star {
    width: 16px; height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F583B0' d='M12 2l2.2 6.6L21 10.4l-5 4.2 1.6 6.6L12 17.8 6.4 21.2 8 14.6 3 10.4l6.8-1.8L12 2z'/%3E%3C/svg%3E");
}

.qy-book {
    width: 16px; height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23541A91' d='M12 6.5C10.5 5.2 8.5 4.5 6 4.5H3.5v14H6c2.5 0 4.5.7 6 2 1.5-1.3 3.5-2 6-2h2.5v-14H18c-2.5 0-4.5.7-6 2zm-1 11.2c-1.2-1-2.7-1.7-4.5-1.7H6V6h1c1.8 0 3.4.4 4.7 1.2M13 17.7c1.3-.8 2.9-1.2 4.7-1.2h1V6h-1c-1.8 0-3.3.7-4.7 1.7'/%3E%3C/svg%3E");
}

/*======================================================================
  3. Header / navigation
  ======================================================================*/

#header {
    background: var(--qy-card);
    border-bottom: 1px solid var(--qy-border);
    box-shadow: 0 2px 10px var(--qy-shadow);
}

.djc-search input[type=text] {
    background: var(--qy-bg);
    border: 1px solid var(--qy-border);
    border-radius: var(--qy-r-tag);
    color: var(--qy-text-1);
}
.djc-search input[type=text]:focus {
    background: #fff;
    border-color: var(--qy-primary-light);
    box-shadow: 0 0 0 3px rgba(84, 26, 145, .10);
}
.djc-search input[type=submit] { border-radius: 50%; }

/* nav item : selected / hover -> primary + 2px underline */
.djc-login-in li > a,
.nav-rlist > a {
    position: relative;
    color: var(--qy-text-2);
}
.nav-rlist > a::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 8px;
    width: 0; height: 2px;
    border-radius: 2px;
    background: var(--qy-primary);
    transition: all .25s var(--qy-ease);
    transform: translateX(-50%);
}
.nav-rlist:hover > a { color: var(--qy-primary) !important; }
.nav-rlist:hover > a::after { width: 22px; }

.nav-rlist.active > a { color: var(--qy-primary) !important; font-weight: 500; }
.nav-rlist.active > a::after { width: 22px; }

/* dropdown panels */
.search-help,
.main-useInfo,
.header-download,
.header-hover {
    border-radius: var(--qy-r-modal);
    border: 1px solid var(--qy-border);
    background: var(--qy-card);
    box-shadow: 0 8px 24px var(--qy-shadow);
}
.header-hover-thumb { border-radius: var(--qy-r-cover); }

/* login button in dropdown */
.his-login-btn {
    border-radius: var(--qy-r-btn);
    background: var(--qy-primary);
    color: #fff;
    transition: all .25s var(--qy-ease);
}
.his-login-btn:hover {
    background: var(--qy-primary-light);
    transform: translateY(-1px);
}

/*======================================================================
  4. Buttons
  ======================================================================*/

.btn,
.update-btn,
.btn-primary {
    display: inline-block;
    border-radius: var(--qy-r-btn);
    transition: all .25s var(--qy-ease);
    cursor: pointer;
}

/* primary solid */
.btn-primary,
.btn.btn-primary {
    background: var(--qy-primary);
    color: #fff;
    border: 1px solid var(--qy-primary);
}
.btn-primary:hover {
    background: var(--qy-primary-light);
    border-color: var(--qy-primary-light);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(84, 26, 145, .18);
}
.btn-primary:active {
    background: var(--qy-primary-deep);
    border-color: var(--qy-primary-deep);
    transform: translateY(0);
}

/* secondary outline */
.btn,
.update-btn {
    background: var(--qy-card);
    color: var(--qy-primary);
    border: 1px solid var(--qy-primary-pale);
}
.btn:hover,
.update-btn:hover {
    color: var(--qy-primary);
    border-color: var(--qy-primary-light);
    background: var(--qy-primary-pale);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px var(--qy-shadow);
}

/* text button */
.btn-icon {
    color: var(--qy-primary);
    background: none;
}
.btn-icon:hover { color: var(--qy-primary-light); }

.btn-xl { border-radius: var(--qy-r-btn); padding: 0 28px; height: 46px; line-height: 44px; }

/* 书本页操作按钮：图标 + 文字水平/垂直居中
   （上面 .btn 的 inline-block 会覆盖 site.css 的 inline-flex，导致内容不居中） */
.manga-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* svg 图标跟随按钮文字颜色：避免被 .btn-icon 的 color 覆盖成深紫，在实底按钮上看不见 */
.manga-actions .btn-icon { color: currentColor; }

/* disabled */
.btn.disabled,
.btn[disabled] {
    background: var(--qy-border);
    color: var(--qy-text-3);
    border-color: var(--qy-border);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/*======================================================================
  5. Section headers (with book / star / heart ornament)
  ======================================================================*/

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--qy-primary-deep);
    font-weight: 600;
}

/* the icon slot inside every section title */
.card-title-icon {
    display: inline-block;
    width: 18px; height: 18px;
    margin-right: 6px;
    vertical-align: -3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F583B0' d='M12 2l2.2 6.6L21 10.4l-5 4.2 1.6 6.6L12 17.8 6.4 21.2 8 14.6 3 10.4l6.8-1.8L12 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.section-more {
    color: var(--qy-text-3);
    transition: color .25s var(--qy-ease);
}
.section-more:hover { color: var(--qy-pink); }

.page-title { color: var(--qy-primary-deep); font-weight: 600; }
.page-subtitle { color: var(--qy-text-2); }

/*======================================================================
  6. Breadcrumb
  ======================================================================*/

.breadcrumb { color: var(--qy-text-2); }
.breadcrumb a { color: var(--qy-text-2); }
.breadcrumb a:hover { color: var(--qy-primary); }
.breadcrumb-sep { color: var(--qy-pink-light); margin: 0 6px; }
.breadcrumb-current { color: var(--qy-primary); }

/*======================================================================
  7. Book cards - white, 12px radius, purple shadow, cover 8px
  ======================================================================*/

.recommend-item,
.update-item,
.topic-card,
.rank-item,
.side-card {
    background: var(--qy-card);
    border-radius: var(--qy-r-card);
    box-shadow: 0 2px 10px var(--qy-shadow);
    transition: transform .28s var(--qy-ease), box-shadow .28s var(--qy-ease);
}

.recommend-item:hover,
.update-item:hover,
.topic-card:hover,
.side-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(84, 26, 145, .14);
}

.recommend-cover,
.update-cover,
.topic-card-cover,
.manga-cover {
    border-radius: var(--qy-r-cover);
    overflow: hidden;
    background: var(--qy-primary-pale);
}
.recommend-cover img,
.update-cover img,
.topic-card-cover img { border-radius: var(--qy-r-cover); }

/* 卡片均为白底，标题必须用深色文字，否则白底白字看不见 */
.recommend-title,
.update-name,
.topic-card-title {
    color: var(--qy-text-1);
    font-weight: 600;
}
.recommend-item:hover .recommend-title,
.update-item:hover .update-name,
.topic-card:hover .topic-card-title {
    color: var(--qy-primary);
}
.recommend-meta,
.update-meta,
.recommend-desc,
.update-desc,
.topic-card-desc,
.meta-author,
.meta-date,
.meta-status {
    color: var(--qy-text-2);
}

.update-subtitle { color: var(--qy-text-3); }

/* heat / score -> soft pink */
.recommend-meta em,
.update-meta em,
.manga-info-value em,
.hot-val,
.star,
.star span,
.star i {
    color: var(--qy-pink);
}
.star,
.star i { position: relative; }

/*======================================================================
  8. Tags & filters - 20px pill radius
  ======================================================================*/

.tag-item,
.manga-tag,
.filter-tag,
.update-tab {
    display: inline-block;
    padding: 5px 14px;
    border-radius: var(--qy-r-tag);
    background: var(--qy-card);
    border: 1px solid var(--qy-border);
    color: var(--qy-text-2);
    transition: all .25s var(--qy-ease);
}
.tag-item:hover,
.manga-tag:hover,
.filter-tag:hover,
.update-tab:hover {
    color: var(--qy-primary);
    border-color: var(--qy-primary-light);
    background: var(--qy-primary-pale);
    transform: translateY(-1px);
}

/* selected state */
.tag-item.active,
.filter-tag.active,
.update-tab.active,
.update-tab.current {
    background: var(--qy-primary);
    border-color: var(--qy-primary);
    color: #fff;
}
.update-tab.active:hover,
.filter-tag.active:hover { background: var(--qy-primary-light); color: #fff; }

/* hot tag -> pink background */
.tag-item.hot,
.tag-item.hot:hover,
.filter-tag.hot {
    background: var(--qy-pink-pale);
    border-color: var(--qy-pink-light);
    color: var(--qy-pink);
}

.tags-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.update-tabs { display: flex; flex-wrap: wrap; gap: 8px; }

/*======================================================================
  9. Ranking list
  ======================================================================*/

.rank-list { background: transparent; }

.rank-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--qy-card);
}
.rank-item:last-child { margin-bottom: 0; }
.rank-item:hover { transform: translateX(2px); }

.rank-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    margin-right: 10px;
    border-radius: 8px;
    background: var(--qy-primary-pale);
    color: var(--qy-primary);
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
}

.rank-item:nth-child(1) .rank-num,
.rank-item:nth-child(2) .rank-num,
.rank-item:nth-child(3) .rank-num {
    background: var(--qy-pink);
    color: #fff;
}

.rank-link {
    color: var(--qy-text-1);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rank-link:hover { color: var(--qy-primary); }

/*======================================================================
  10. Banner / hero - 16px radius + deep purple gradient scrim
  ======================================================================*/

.hero-section {
    display: flex;
    gap: 16px;
}

.hero-banner {
    position: relative;
    border-radius: var(--qy-r-banner);
    overflow: hidden;
    box-shadow: 0 8px 24px var(--qy-shadow);
    background: var(--qy-primary-pale);
}

/* deep purple gradient scrim over the banner image */
.hero-mask {
    padding: 18px 20px;
    background: linear-gradient(to top, rgba(62, 18, 110, .78) 0%, rgba(84, 26, 145, .34) 45%, rgba(84, 26, 145, 0) 100%);
}

.hero-title {
    display: block;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(62, 18, 110, .45);
}

/* carousel dots - pastel inactive, brand pink active */
.hero-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hero-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: all .3s var(--qy-ease);
}
.hero-dot:hover { background: #fff; }
.hero-dot.active {
    width: 22px;
    background: var(--qy-pink);
    box-shadow: 0 0 8px rgba(245, 131, 176, .6);
}

.hero-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: rgba(255, 255, 255, .82);
    color: var(--qy-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 14px var(--qy-shadow);
    transition: all .25s var(--qy-ease);
    user-select: none;
}
.hero-arrow:hover {
    background: #fff;
    color: var(--qy-primary-light);
    /* 保留 index.css 的 translateY(-50%) 垂直居中，避免 hover 跳动 */
    transform: translateY(-50%) scale(1.08);
}

/* banner side panel */
.hero-side {
    background: var(--qy-card);
    border-radius: var(--qy-r-card);
    box-shadow: 0 2px 10px var(--qy-shadow);
    overflow: hidden;
}
.hero-side-hd {
    display: flex;
    align-items: center;
    color: var(--qy-primary-deep);
    font-weight: 600;
}
.hero-side-list li { transition: color .25s var(--qy-ease); }
.hero-side-list li:hover { color: var(--qy-primary); }

/*======================================================================
  11. Sidebar cards
  ======================================================================*/

.side-card { padding: 16px; }
.side-card-title {
    color: var(--qy-primary-deep);
    font-weight: 600;
    display: flex;
    align-items: center;
}
.side-card-feature {
    border-radius: var(--qy-r-card);
}
/* 侧栏卡片同样是白底，标题/链接沿用深色文字，避免白底白字 */
.side-card-feature .side-card-title { color: var(--qy-primary-deep); }

/*======================================================================
  12. Pagination
  ======================================================================*/

.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination a,
.pagination span {
    display: inline-block;
    min-width: 36px;
    height: 36px;
    line-height: 34px;
    padding: 0 10px;
    text-align: center;
    border-radius: var(--qy-r-btn);
    background: var(--qy-card);
    border: 1px solid var(--qy-border);
    color: var(--qy-text-2);
    transition: all .25s var(--qy-ease);
}
.pagination a:hover {
    color: var(--qy-primary);
    border-color: var(--qy-primary-light);
    background: var(--qy-primary-pale);
    transform: translateY(-1px);
}
.pagination .current,
.pagination .active {
    background: var(--qy-primary);
    border-color: var(--qy-primary);
    color: #fff;
}

/*======================================================================
  13. Friend links & footer
  ======================================================================*/

.links-inner { background: var(--qy-card); border-radius: var(--qy-r-card); box-shadow: 0 2px 10px var(--qy-shadow); }
.links a { color: var(--qy-text-2); }
.links a:hover { color: var(--qy-primary); }

/*======================================================================
  14. Loading & empty state - star + book + heart motifs
  ======================================================================*/

.qy-loading,
.loading::before {
    content: '';
    display: inline-block;
    width: 28px; height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F583B0' d='M12 2l2.2 6.6L21 10.4l-5 4.2 1.6 6.6L12 17.8 6.4 21.2 8 14.6 3 10.4l6.8-1.8L12 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation: qy-twinkle 1.4s var(--qy-ease) infinite;
}

@keyframes qy-twinkle {
    0%   { opacity: .35; transform: scale(.86) rotate(0deg); }
    50%  { opacity: 1;   transform: scale(1.06) rotate(180deg); }
    100% { opacity: .35; transform: scale(.86) rotate(360deg); }
}

.empty-state {
    padding: 48px 0;
    text-align: center;
    color: var(--qy-text-3);
}
.empty-state::before {
    content: '';
    display: block;
    width: 72px; height: 72px;
    margin: 0 auto 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E9DDF7' d='M12 6.5C10.5 5.2 8.5 4.5 6 4.5H3.5v14H6c2.5 0 4.5.7 6 2 1.5-1.3 3.5-2 6-2h2.5v-14H18c-2.5 0-4.5.7-6 2zm-1 11.2c-1.2-1-2.7-1.7-4.5-1.7H6V6h1c1.8 0 3.4.4 4.7 1.2M13 17.7c1.3-.8 2.9-1.2 4.7-1.2h1V6h-1c-1.8 0-3.3.7-4.7 1.7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/*======================================================================
  15. Reading surface - shared tokens (defaults: cream #FFF8F0)
  ======================================================================*/

.read-pages,
.read-main {
    --rd-bg:      #FFF8F0;
    --rd-panel:   #FFFFFF;
    --rd-text:    #332A40;
    --rd-muted:   #6B5F7A;
    --rd-faint:   #9A8FAA;
    --rd-border:  #ECE6F2;
    --rd-accent:  #541A91;
    --rd-shadow:  rgba(84, 26, 145, 0.08);
}

/* alternative reading themes */
.read-pages.qy-read-white,
.read-main.qy-read-white {
    --rd-bg:    #FFFFFF;
    --rd-panel: #FFFFFF;
    --rd-text:  #332A40;
    --rd-muted: #6B5F7A;
    --rd-faint: #9A8FAA;
}
.read-pages.qy-read-green,
.read-main.qy-read-green {
    --rd-bg:    #EFF6EE;
    --rd-panel: #FFFFFF;
    --rd-text:  #2F3A2E;
    --rd-muted: #5C6B5A;
    --rd-faint: #8B9A89;
}
.read-pages.qy-read-dark,
.read-main.qy-read-dark {
    --rd-bg:     #241F33;
    --rd-panel:  #2E2740;
    --rd-text:   #E9DDF7;
    --rd-muted:  #B9A9CF;
    --rd-faint:  #8E7FA6;
    --rd-border: #3D3455;
    --rd-accent: #C9A7F0;
    --rd-shadow: rgba(0, 0, 0, .35);
}

/* page-edge glow when turning pages */
.read-content {
    transition: background .3s var(--qy-ease);
}
.read-content::before,
.read-content::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 46px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s var(--qy-ease);
    z-index: 1;
}
.read-content::before {
    left: 0;
    background: linear-gradient(to right, rgba(84, 26, 145, .10), transparent);
}
.read-content::after {
    right: 0;
    background: linear-gradient(to left, rgba(245, 131, 176, .12), transparent);
}
.read-content:hover::before,
.read-content:hover::after { opacity: 1; }

/*======================================================================
  16. 书本详情页 hover 收敛 - 与其它页面保持同一强度
  只作用于书本页专属容器（mh-extra-block / manga-actions / chapter-item /
  manga-tag-label / screenshot-item），不影响首页、列表页、资讯页等
  ======================================================================*/

/* 大块扩展卡片（最新资讯 / 最新专题 / 资讯推荐 …）：只轻微提亮阴影，不再整块上浮 */
.mh-extra-block:hover {
    transform: none;
    box-shadow: 0 4px 14px rgba(84, 26, 145, .08);
}

/* 列表行：不上浮、不铺紫色渐变，封面不放大，与 update-item / topic-item 一致 */
.mh-extra-block .recommend-item:hover {
    transform: none;
    box-shadow: 0 2px 10px var(--qy-shadow);
    background: var(--qy-bg);
}
.mh-extra-block .recommend-item:hover .recommend-cover { transform: none; }

/* 主按钮：去掉超大发光阴影，与通用 .btn-primary 一致 */
.manga-actions .btn-primary { box-shadow: 0 3px 10px rgba(84, 26, 145, .25); }
.manga-actions .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(84, 26, 145, .35);
}

/* 次按钮：位移与阴影与通用 .btn 一致 */
.manga-actions .btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px var(--qy-shadow);
}

/* 标签：淡紫底 + 深紫字，不再整块反色成实心紫 */
.manga-tag-label:hover {
    background: var(--qy-primary-pale);
    color: var(--qy-primary-deep);
}

/* 截图预览：去掉放大，与 topic-grid-item 等图卡一致 */
.screenshot-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(84, 26, 145, .08);
    border-color: #ECE6F2;
}

/* 章节格子：淡底 + 紫字，不再整块变紫并描紫边 */
.chapter-item:hover {
    background: #F4EFFB;
    color: var(--qy-primary);
    border-color: transparent;
    transform: none;
}

/*======================================================================
  17. Responsive helper
  ======================================================================*/

@media (max-width: 1200px) {
    .recommend-item:hover,
    .update-item:hover,
    .topic-card:hover { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}