/*======================================================================
  QiYu Literature Theme - Mobile
  warm healing feminine literary style
  ======================================================================*/

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

    --qy-pink:           #F583B0;
    --qy-pink-light:     #FBC7DC;
    --qy-pink-pale:      #FFF0F6;

    --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);

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

    --qy-r-card:         12px;
    --qy-r-btn:          10px;
    --qy-r-tag:          20px;
    --qy-r-cover:        8px;
    --qy-ease:           cubic-bezier(.25, .8, .25, 1);

    --safe-bottom:       env(safe-area-inset-bottom, 0px);
}

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

a { color: var(--qy-text-1); -webkit-tap-highlight-color: transparent; }
a:active { color: var(--qy-primary); }

/* suppress the default grey tap flash in favour of a brand tint */
a, button, .btn, .more-btn, .rank-item, .pic, .photo {
    -webkit-tap-highlight-color: rgba(84, 26, 145, .06);
}

/*======================================================================
  Search bar
  ======================================================================*/

.search-bar {
    background: var(--qy-card);
    border-radius: var(--qy-r-tag);
    box-shadow: 0 2px 10px var(--qy-shadow);
    overflow: hidden;
}
.search-bar input,
.search-bar input[type=text] {
    background: transparent;
    border: none;
    color: var(--qy-text-1);
    caret-color: var(--qy-primary);
}
.search-bar input::placeholder { color: var(--qy-text-3); }
.seach-btnnew,
.search-icon {
    color: var(--qy-primary);
}

/*======================================================================
  Section titles
  ======================================================================*/

.title-ctn,
.mid-title {
    display: flex;
    align-items: center;
}
.tit,
.title {
    color: var(--qy-primary-deep);
    font-weight: 600;
    position: relative;
    padding-left: 12px;
}
.tit::before,
.title::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 6px; height: 16px;
    margin-top: -8px;
    border-radius: 3px;
    background: linear-gradient(to bottom, var(--qy-primary) 0%, var(--qy-pink) 100%);
}

.mid-more,
.more {
    color: var(--qy-text-3);
}
.mid-more:active,
.more:active { color: var(--qy-pink); }

/*======================================================================
  Cards & covers
  ======================================================================*/

.rank-item,
.news-list li,
.topic-list li,
.links-box {
    background: var(--qy-card);
    border-radius: var(--qy-r-card);
    box-shadow: 0 2px 10px var(--qy-shadow);
    transition: transform .25s var(--qy-ease), box-shadow .25s var(--qy-ease);
}
.rank-item:active {
    transform: scale(.985);
    box-shadow: 0 4px 14px rgba(84, 26, 145, .12);
}

.pic,
.photo,
.picauto,
.rank-cover,
.picauto-box {
    border-radius: var(--qy-r-cover);
    overflow: hidden;
}
.pic img,
.photo img,
.picauto img,
.rank-cover img { border-radius: var(--qy-r-cover); }

.rank-title,
.name,
.nm {
    color: var(--qy-text-1);
    font-weight: 600;
}
.rank-author,
.rank-desc,
.date,
.inf,
.info,
.text {
    color: var(--qy-text-2);
}
.tip,
.little {
    color: var(--qy-text-3);
}

/*======================================================================
  Rank badge
  ======================================================================*/

.rank-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--qy-primary-pale);
    color: var(--qy-primary);
    font-weight: 700;
}
.rank-item:nth-child(1) .rank-order,
.rank-item:nth-child(2) .rank-order,
.rank-item:nth-child(3) .rank-order {
    background: linear-gradient(135deg, var(--qy-pink) 0%, var(--qy-pink-light) 100%);
    color: #fff;
}

/*======================================================================
  Tabs & buttons
  ======================================================================*/

.rank-tabs,
.news-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rank-tab,
.news-nav-item {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: var(--qy-r-tag);
    background: var(--qy-card);
    border: 1px solid var(--qy-border);
    color: var(--qy-text-2);
}
.rank-tab.active,
.rank-tab.current,
.news-nav-item.active,
.news-nav-item.current {
    background: var(--qy-primary);
    border-color: var(--qy-primary);
    color: #fff;
}

.btn,
.more-btn,
.login-btn,
.updata-btn,
.cancel-btn {
    border-radius: var(--qy-r-btn);
    transition: all .25s var(--qy-ease);
}
.btn-primary,
.login-btn {
    color: #fff;
    border: none;
}
.btn-primary:active,
.login-btn:active {
    background: var(--qy-primary-deep);
    transform: scale(.98);
}

.more-btn,
.updata-btn,
.btn {
    background: var(--qy-card);
    color: var(--qy-primary);
    border: 1px solid var(--qy-primary-pale);
}
.more-btn:active,
.updata-btn:active { background: var(--qy-primary-pale); }

.cancel-btn {
    background: var(--qy-bg);
    color: var(--qy-text-2);
    border: 1px solid var(--qy-border);
}

/*======================================================================
  Floating / bottom elements respect safe-area
  ======================================================================*/

/* .down 在 M 端是列表/详情里的按钮，不能被安全区内边距撑变形 */
.dis-bot,
.form-ctn {
    padding-bottom: calc(8px + var(--safe-bottom));
}

/*======================================================================
  Loading shimmer with brand tint
  ======================================================================*/

.lazy {
    background: var(--qy-primary-pale);
    border-radius: var(--qy-r-cover);
}