* {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.5;
}

.container {
    max-width: 600px;
    margin: 10px auto;
    background-color: #fff;
    border-radius: 0px;
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
    padding: 10px;
}

.search-box {
    display: flex;
    margin-bottom: 0px;
}

.search-box input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
}

.search-box button {
    padding: 10px 20px;
    background-color: #a064f2;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

/* 鎺掕姒滄ā鍧� */
.ranking {
    background-color: #fff;
}

.ranking-header {
    margin-bottom: 15px;
}

.title {
    display: flex;
    align-items: center;
}

.line {
    width: 4px;
    height: 20px;
    background-color: #ff4d4f;
    margin-right: 10px;
}

/* 鍙粦鍔ㄧ殑鏍囩鏍� */
.tabs-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* 鎻愪緵iOS璁惧涓婄殑骞虫粦婊氬姩 */
    margin-bottom: 15px;
    /* 闅愯棌婊氬姩鏉′絾淇濇寔鍔熻兘 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.tabs-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.ranking-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
    min-width: min-content; /* 纭繚鍐呭涓嶄細琚帇缂� */
    padding-bottom: 1px; /* 闃叉涓嬪垝绾胯瑁佸壀 */
}

.tab {
    padding: 10px 0;
    margin-right: 30px;
    cursor: pointer;
    position: relative;
    color: #666;
    white-space: nowrap; /* 闃叉鏂囨湰鎹㈣ */
}

.tab:last-child {
    margin-right: 0;
}

.tab.active {
    color: #ff4d4f;
}

.tab.active:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ff4d4f;
}

.ranking-list {
    display: flex;
    flex-direction: column;
}

.ranking-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    margin-bottom: 10px; /* 娣诲姞10px鐨勯棿闅� */
    background-color: #f9f9f9; /* 杞诲井鐨勮儗鏅壊浠ュ尯鍒嗛」鐩� */
    border-radius: 8px; /* 鍦嗚杈规 */
    padding: 15px; /* 鍐呰竟璺� */
}

.ranking-item:last-child {
    margin-bottom: 0; /* 鏈€鍚庝竴椤逛笉闇€瑕佸簳閮ㄩ棿闅� */
}

.rank {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.rank-1 {
    background-color: #fe7173;
}

.rank-2 {
    background-color: #ff7875;
}

.rank-3 {
    background-color: #ffa39e;
}

.rank-4 {
    background-color: #d9d9d9;
    color: #666;
}

.book-info {
    flex: 1;
}

.book-info h3 {
    font-size: 16px;
    margin-bottom: 5px;
}

.book-info p {
    font-size: 12px;
    color: #999;
}

.read-btn {
    padding: 5px 0px;
    color: #888;
    text-decoration: none;
}




/* 鍒嗛〉瀹瑰櫒瀹氫綅鍒板彸渚� */
.swiper-pagination {
  position: absolute;
  right: 10px !important;    /* 鍙充晶瀹氫綅 */
  left: auto !important;     /* 鍙栨秷榛樿灞呬腑 */
  bottom: 15px;              /* 搴曢儴闂磋窛 */
  display: flex;
  flex-direction: column;    /* 鍨傜洿鎺掑垪 */
  gap: 6px;                  /* 鍦嗙偣闂磋窛 */
}

/* 鍒嗛〉瀹瑰櫒瀹氫綅 */
.swiper-pagination {
  position: absolute;
  right: 10px;
  left: auto !important;
  bottom: 10px !important; /* 搴曢儴璺濈 */
  z-index: 10;
  bottom: 10px;
  width: auto !important;    /* 鍙栨秷榛樿瀹藉害闄愬埗 */
  flex-direction: row;       /* 姘村钩鎺掑垪 */
  gap: 6px;
}

/* 榛樿鍦嗙偣鏍峰紡 */
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.9) !important; /* 鐧借壊 */
  opacity: 1 !important;
  margin: 0 1px !important;
  transition: all 0.3s; /* 棰滆壊杩囨浮鍔ㄧ敾 */
}

/* 婵€娲绘€佺传鑹� */
.swiper-pagination-bullet-active {
  background: #f264ce !important; /* 绱壊 */
  transform: scale(1); /* 淇濇寔澶у皬涓€鑷� */
  box-shadow: 0 0 8px rgba(139,92,246,0.3); /* 鍙€夊厜鏅� */
}