/* ==================== Reset & Base ==================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: #FFF5F7; color: var(--text); line-height: 1.6;
  width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
input, button { border: none; outline: none; font-family: inherit; }
button { cursor: pointer; }

/* ==================== Variables - Pop Mart Theme ==================== */
:root {
  --primary: #FF6B9D;
  --primary-light: #FF8FB3;
  --secondary: #4ECDC4;
  --accent: #FFD93D;
  --green: #6BCB77;
  --orange: #FF8C69;
  --bg: #FFF5F7;
  --card-bg: #FFFFFF;
  --text: #2D3436;
  --text-light: #636E72;
  --text-muted: #B2BEC3;
  --border-color: #F0E6EA;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --radius-btn: 28px;
  --shadow: 0 4px 20px rgba(255,107,157,0.10);
  --shadow-card: 0 6px 24px rgba(255,107,157,0.08);
  --shadow-lg: 0 10px 40px rgba(255,107,157,0.12);
  --tab-height: 60px;
}

/* ==================== Header Bar ==================== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(135deg, #FF6B9D, #FF8C69); color: #fff;
  padding: 14px 20px; display: flex; align-items: center; justify-content: space-between;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 4px 16px rgba(255,107,157,0.15);
}
.header h1 { font-size: 1.25rem; font-weight: 700; letter-spacing: 1px; }
.header .date { font-size: .75rem; opacity: .9; font-weight: 500; }

/* ==================== Bottom Nav ==================== */
.bottom-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 100;
  background: #fff; display: flex;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -2px 20px rgba(255,107,157,0.08);
  padding: 4px 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav .nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 0 4px; font-size: .625rem; color: var(--text-light); transition: all .3s ease;
}
.bottom-nav .nav-item .nav-icon {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; background: transparent; margin-bottom: 2px; transition: all .3s ease;
}
.bottom-nav .nav-item.active { color: var(--primary); font-weight: 600; }
.bottom-nav .nav-item.active .nav-icon {
  background: linear-gradient(135deg, #FFF0F5, #FFE0EC);
  color: var(--primary);
  box-shadow: 0 2px 10px rgba(255,107,157,0.2);
}

/* ==================== Cards ==================== */
.card {
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 20px; margin: 12px 16px;
  transition: all .3s ease;
}

/* ==================== Banner / Swiper ==================== */
.banner {
  margin: 16px 16px 12px; border-radius: var(--radius-lg); overflow: hidden;
  position: relative; box-shadow: var(--shadow-lg);
}
.banner .swiper-wrapper { display: flex; transition: transform .5s ease; }
.banner .swiper-slide {
  min-width: 100%; height: 170px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.25rem; font-weight: 700; letter-spacing: 1px;
}
.banner .swiper-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.banner .swiper-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); transition: all .3s; }
.banner .swiper-dot.active { width: 24px; border-radius: 4px; background: #fff; }

/* ==================== Buttons ==================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 28px; border-radius: var(--radius-btn); font-size: .875rem;
  font-weight: 600; transition: all .3s ease; cursor: pointer; border: none; letter-spacing: .5px;
}
.btn-primary {
  background: linear-gradient(135deg, #FF6B9D, #FF8C69); color: #fff;
  box-shadow: 0 4px 16px rgba(255,107,157,0.25);
}
.btn-primary:active { opacity: .85; transform: scale(.98); }
.btn-outline {
  background: transparent; border: 2px solid var(--primary); color: var(--primary);
}
.btn-outline:active { background: #FFF0F5; }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 34px; padding: 6px 18px; font-size: .75rem; border-radius: 20px; }

/* ==================== Modal ==================== */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,.4); z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-content {
  background: #fff; width: 100%; max-width: 480px; max-height: 85vh;
  box-sizing: border-box;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow-y: auto; padding: 24px 20px;
  animation: slideUp .3s ease;
  box-shadow: 0 -4px 24px rgba(0,0,0,.1);
}
.modal-center { align-items: center; }
.modal-center .modal-content {
  border-radius: var(--radius-lg); margin: 0 20px; width: calc(100% - 40px);
}
.detail-modal .modal-content { width: calc(100% - 20px); max-width: 460px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal-title { font-size: 1.125rem; font-weight: 700; color: var(--text); }
.modal-close { font-size: 1.5rem; color: var(--text-light); cursor: pointer; background: none; border: none; padding: 4px; transition: color .3s; }
.policy-modal { padding-bottom: 18px; }
.policy-list { margin: -6px 0 0; }
.policy-item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 15px 2px;
  border: 0; border-bottom: 1px solid var(--border-color); background: transparent;
  color: var(--text); text-align: left; cursor: pointer; font: inherit;
}
.policy-item:last-child { border-bottom: 0; }
.policy-item:active { background: #fff5f8; }
.policy-item-title { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.policy-item-arrow { color: var(--text-muted); font-size: 1rem; }
.policy-detail-header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.policy-detail-header .modal-title { flex: 1; min-width: 0; text-align: center; overflow-wrap: anywhere; }
.policy-back { border: 0; padding: 4px 0; background: transparent; color: var(--primary); font-size: .78rem; white-space: nowrap; cursor: pointer; }
.policy-content { color: var(--text); font-size: .875rem; line-height: 1.85; overflow-wrap: anywhere; }
.policy-content img { max-width: 100%; height: auto; }
.policy-content table { max-width: 100%; border-collapse: collapse; }
.policy-content th, .policy-content td { border: 1px solid var(--border-color); padding: 6px 8px; }
.policy-content p { margin: 0 0 12px; }

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ==================== Login Prompt ==================== */
.login-prompt {
  background: linear-gradient(135deg, #FF6B9D, #4ECDC4); color: #fff;
  padding: 12px 20px; margin: 12px 16px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: var(--shadow);
}
.login-prompt .login-btn {
  background: #fff; color: var(--primary); border: none; padding: 8px 18px;
  border-radius: 20px; font-size: .8125rem; font-weight: 600; white-space: nowrap;
  transition: all .3s ease;
}
.login-prompt .login-btn:active { transform: scale(.95); }

/* ==================== Notice Bar ==================== */
.notice-bar {
  margin: 12px 16px; padding: 12px 16px; background: var(--card-bg); border-radius: var(--radius);
  display: flex; align-items: center; gap: 10px; font-size: .8125rem; cursor: pointer;
  box-shadow: var(--shadow); transition: all .3s ease;
}
.notice-bar:active { transform: scale(.99); }
.notice-bar .notice-icon { color: var(--accent); font-size: 1.125rem; flex-shrink: 0; }
.notice-bar .notice-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-weight: 500; }

/* ==================== Grid ==================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 16px; margin-bottom: 90px; }
.grid-item { text-align: center; cursor: pointer; transition: all .3s ease; }
.grid-item:active { transform: scale(.95); }
.grid-item .cover {
  width: 100%; aspect-ratio: 3/4; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.5rem; margin-bottom: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08); transition: all .3s ease;
}
.grid-item:active .cover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.grid-item .name { font-size: .75rem; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==================== Entry Buttons ==================== */
.entry-btns { display: flex; gap: 12px; padding: 0 16px; margin: 14px 0; }
.entry-btns .entry-btn {
  flex: 1; padding: 16px; border-radius: var(--radius);
  background: linear-gradient(135deg, #FF6B9D, #4ECDC4); color: #fff;
  text-align: center; font-size: .9375rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px rgba(255,107,157,0.2); transition: all .3s ease;
  letter-spacing: 1px;
}
.entry-btns .entry-btn:active { opacity: .85; transform: scale(.97); }

/* ==================== Novel Detail ==================== */
.novel-detail { padding: 0 4px; }
.novel-detail .detail-cover {
  width: 130px; height: 173px; border-radius: var(--radius); margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.novel-detail .detail-name { font-size: 1.25rem; font-weight: 700; text-align: center; margin-bottom: 10px; color: var(--text); }
.novel-detail .detail-meta { font-size: .8125rem; color: var(--text-light); text-align: center; margin-bottom: 14px; display: flex; justify-content: center; gap: 20px; }
.novel-detail .detail-intro { font-size: .8125rem; color: var(--text-light); line-height: 1.7; margin-bottom: 20px; }
.novel-detail .detail-buy { margin: 20px 0 8px; }

/* ==================== Search Bar ==================== */
.search-bar {
  margin: 14px 16px; display: flex; background: #fff; border-radius: 30px;
  padding: 5px; box-shadow: var(--shadow);
}
.search-bar input { flex: 1; height: 40px; padding: 0 18px; font-size: .875rem; background: transparent; color: var(--text); }
.search-bar input::placeholder { color: var(--text-muted); }
.search-bar .search-btn {
  width: 72px; border-radius: 30px; background: linear-gradient(135deg, #FF6B9D, #FF8C69);
  color: #fff; font-size: .8125rem; font-weight: 600; transition: all .3s ease;
}
.search-bar .search-btn:active { opacity: .85; }

/* ==================== Category Tabs ==================== */
.cat-tabs {
  display: flex; gap: 10px; padding: 0 16px; margin: 8px 0 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.cat-tabs .cat-tab {
  flex-shrink: 0; padding: 10px 22px; font-size: .8125rem; font-weight: 600;
  color: var(--text-light); border-radius: 24px;
  background: #fff; border: 2px solid var(--border-color); cursor: pointer;
  transition: all .3s ease;
}
.cat-tabs .cat-tab.active {
  color: #fff; background: var(--primary); border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(255,107,157,0.3);
}

/* ==================== Novel List ==================== */
.novel-list { padding: 0 16px; margin-bottom: 90px; }
.novel-item {
  display: flex; gap: 14px; padding: 14px; background: var(--card-bg);
  border-radius: var(--radius); margin-bottom: 12px;
  box-shadow: var(--shadow-card); cursor: pointer; transition: all .3s ease;
  align-items: center;
}
.novel-item:active { transform: scale(.98); }
.novel-item .novel-cover {
  width: 76px; height: 102px; border-radius: var(--radius-sm);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.25rem; box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.novel-item .novel-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.novel-item .novel-title { font-size: .9375rem; font-weight: 700; color: var(--text); }
.novel-item .novel-author { font-size: .75rem; color: var(--text-light); }
.novel-item .novel-desc { font-size: .6875rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; }
.novel-item .novel-action { flex-shrink: 0; }

/* ==================== Reader ==================== */
.reader-content { padding: 24px 20px; line-height: 2; font-size: 1rem; color: var(--text); }
.reader-content .chapter-title { font-size: 1.25rem; font-weight: 700; text-align: center; margin-bottom: 24px; color: var(--primary); }
.reader-content p { text-indent: 2em; margin-bottom: 8px; }
.reader-paywall {
  margin: 24px 20px; padding: 24px 20px; background: var(--card-bg);
  border-radius: var(--radius); box-shadow: var(--shadow-card); text-align: center;
  border-top: 4px solid var(--primary);
}
.reader-paywall .paywall-title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--primary); }
.reader-paywall .paywall-desc { font-size: .8125rem; color: var(--text-light); margin-bottom: 16px; }

/* 服务端阅读器：章节和章内滚动位置由 Java 接口保存。 */
body.server-reader-open { overflow: hidden; }
.server-reader-overlay {
  position: fixed; inset: 0; z-index: 260; display: flex; justify-content: center;
  background: #f5f6f7;
}
.server-reader-shell {
  width: min(100%, 720px); height: 100%; display: flex; flex-direction: column;
  background: #fff; box-shadow: 0 0 24px rgba(31,32,38,.08);
}
.server-reader-header {
  min-height: 64px; padding: 10px 14px; display: grid; grid-template-columns: 40px minmax(0,1fr) minmax(110px,180px);
  align-items: center; gap: 10px; border-bottom: 1px solid var(--border-color); background: #fff;
}
.server-reader-header > div { min-width: 0; display: flex; flex-direction: column; }
.server-reader-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; }
.server-reader-header span { margin-top: 2px; color: var(--text-light); font-size: .6875rem; }
.server-reader-icon { width: 40px; height: 40px; border: 0; background: transparent; color: var(--text); font-size: 1.75rem; }
.server-reader-header select {
  width: 100%; height: 38px; padding: 0 8px; border: 1px solid var(--border-color); border-radius: 6px;
  background: #fff; color: var(--text); font-size: .75rem;
}
.server-reader-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.server-reader-article { max-width: 640px; margin: 0 auto; padding: 34px 24px 80px; }
.server-reader-article h1 { margin-bottom: 30px; text-align: center; font-size: 1.25rem; }
.server-reader-article p { margin-bottom: 1em; text-indent: 2em; color: #34383b; font-size: 1rem; line-height: 2; }
.server-reader-loading, .server-reader-error { padding: 80px 24px; text-align: center; color: var(--text-light); }
.server-reader-error p { margin-top: 10px; }
.server-reader-footer {
  min-height: 66px; padding: 10px 16px; display: grid; grid-template-columns: minmax(90px,1fr) 80px minmax(90px,1fr);
  align-items: center; gap: 12px; border-top: 1px solid var(--border-color); background: #fff;
}
.server-reader-footer span { text-align: center; color: var(--text-light); font-size: .75rem; }
.server-reader-footer .btn { min-height: 42px; padding: 8px 16px; border-radius: 6px; }
.server-reader-footer .btn:disabled { opacity: .4; cursor: default; }
@media (max-width: 420px) {
  .server-reader-header { grid-template-columns: 40px minmax(0,1fr) 120px; padding-inline: 8px; gap: 6px; }
  .server-reader-article { padding-inline: 20px; }
}

/* ==================== Payment Modal ==================== */
.pay-tabs { display: flex; background: #f8f8f8; border-radius: 14px; padding: 4px; margin-bottom: 20px; gap: 4px; }
.pay-tab {
  flex: 1; text-align: center; padding: 10px 0; font-size: .8125rem; font-weight: 600;
  color: var(--text-light); cursor: pointer; border-radius: 12px; transition: all .3s ease;
}
.pay-tab.active { color: #fff; background: var(--primary); box-shadow: 0 2px 8px rgba(255,107,157,0.3); }
.pay-panel { display: none; text-align: center; }
.pay-panel.active { display: block; }
.pay-panel .qr-code {
  width: 200px; height: 200px; margin: 14px auto; background: #f8f8f8;
  border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
  font-size: .875rem; color: var(--text-muted);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.pay-panel .pay-tip { font-size: .8125rem; color: var(--text-light); margin-bottom: 14px; }
.qr-download-btn {
  min-height: 34px; padding: 7px 13px; border: 1px solid var(--border-color); border-radius: 6px;
  background: #fff; color: var(--text-color); font-size: .75rem; font-weight: 700; cursor: pointer;
}
.server-pay-qr-wrap { display: grid; justify-items: start; gap: 7px; width: 100%; margin-top: 8px; }
.pay-proof-picker { margin-top: 16px; }
.pay-proof-trigger {
  position: relative; min-height: 54px; padding: 12px; border: 1px dashed #ff9eba; border-radius: 7px;
  background: #fff7fa; display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #d74271; font-size: .78rem; cursor: pointer;
}
.pay-proof-trigger > span { font-size: 1.2rem; line-height: 1; }
.pay-proof-trigger input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pay-proof-preview { display: none; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 9px; margin-top: 9px; text-align: left; }
.pay-proof-preview.selected { display: grid; }
.pay-proof-preview img { width: 58px; height: 58px; object-fit: cover; border: 1px solid var(--border-color); border-radius: 6px; }
.pay-proof-preview span { overflow: hidden; color: var(--text-light); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.pay-panel .bank-info {
  text-align: left; background: #fdf2f7; border-radius: var(--radius);
  padding: 18px; margin: 14px 0; border: 1px solid #fce4ec;
}
.pay-panel .bank-info .bank-row { display: flex; justify-content: space-between; font-size: .8125rem; padding: 6px 0; }
.pay-panel .bank-info .bank-row .label { color: var(--text-light); font-weight: 500; }
.pay-btn-confirm { margin-top: 20px; }

/* ==================== Warehouse ==================== */
.warehouse-list { padding: 0 16px; margin-bottom: 90px; }
.warehouse-item {
  display: flex; gap: 14px; padding: 14px; background: var(--card-bg);
  border-radius: var(--radius); margin-bottom: 12px;
  box-shadow: var(--shadow-card); cursor: pointer; transition: all .3s ease;
  align-items: center;
}
.warehouse-item:active { transform: scale(.98); }
.warehouse-item .wh-cover {
  width: 64px; height: 86px; border-radius: var(--radius-sm);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.warehouse-item .wh-info { flex: 1; min-width: 0; }
.warehouse-item .wh-title { font-size: .9375rem; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.warehouse-item .wh-progress { font-size: .75rem; color: var(--text-light); }
.warehouse-item .wh-progress-bar {
  height: 6px; background: #f0e6ea; border-radius: 3px; margin-top: 8px; overflow: hidden;
}
.warehouse-item .wh-progress-fill {
  height: 100%; background: linear-gradient(135deg, #FF6B9D, #FF8C69); border-radius: 3px; transition: width .5s ease;
}

/* ==================== My Page ==================== */
.user-header {
  background: linear-gradient(135deg, #FF6B9D, #FF8C69); padding: 28px 20px 22px; color: #fff;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 4px 16px rgba(255,107,157,0.15);
}
.user-info { display: flex; align-items: center; gap: 14px; }
.user-avatar {
  width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  overflow: hidden; border: 3px solid rgba(255,255,255,.4);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-name { font-size: 1.125rem; font-weight: 700; }
.order-status {
  display: flex; margin-top: 18px; background: rgba(255,255,255,.15);
  border-radius: var(--radius); padding: 14px 0;
}
.order-status .status-item { flex: 1; text-align: center; font-size: .75rem; transition: all .3s ease; }
.order-status .status-item .status-icon { font-size: 1.375rem; margin-bottom: 4px; }
.order-status .status-item .status-num { font-size: .9375rem; font-weight: 700; }

.menu-section { margin: 16px; background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.menu-item {
  display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-color);
  cursor: pointer; font-size: .875rem; font-weight: 500; transition: all .3s ease;
}
.menu-item:last-child { border-bottom: none; }
.menu-item:active { background: #fdf2f7; }
.menu-item .menu-icon {
  width: 36px; height: 36px; border-radius: 12px; font-size: 1.125rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); margin-right: 14px; background: #FFF0F5;
}
.menu-item .menu-arrow { margin-left: auto; color: var(--text-muted); font-size: .75rem; }

/* ==================== Misc ==================== */
.tab-content { margin-bottom: 90px; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: .875rem; }

/* Cover gradients - Pop Mart Colorful */
.c1 { background: linear-gradient(135deg, #FF6B9D, #FF8C69); }
.c2 { background: linear-gradient(135deg, #4ECDC4, #6BCB77); }
.c3 { background: linear-gradient(135deg, #A18CD1, #FBC2EB); }
.c4 { background: linear-gradient(135deg, #FFD93D, #FF8C69); }
.c5 { background: linear-gradient(135deg, #4ECDC4, #45B7D1); }
.c6 { background: linear-gradient(135deg, #FF6B9D, #C084FC); }
.c7 { background: linear-gradient(135deg, #FFD93D, #6BCB77); }
.c8 { background: linear-gradient(135deg, #4ECDC4, #FFD93D); }
.c9 { background: linear-gradient(135deg, #FF8C69, #FF6B9D); }
.c10 { background: linear-gradient(135deg, #6BCB77, #4ECDC4); }

/* ==================== Scrollbar ==================== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,107,157,.3); border-radius: 2px; }
::-webkit-scrollbar-track { background: transparent; }

/* Pop Mart inspired visual refresh */
:root {
  --primary: #1f2026;
  --primary-light: #373943;
  --secondary: #68c8e8;
  --accent: #ff4d72;
  --green: #71c9a7;
  --orange: #ff936f;
  --bg: #f5f6f7;
  --card-bg: #ffffff;
  --text: #202127;
  --text-light: #747780;
  --text-muted: #b4b7bd;
  --border-color: #eceef1;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --radius-btn: 999px;
  --shadow: 0 4px 18px rgba(34, 37, 45, .05);
  --shadow-card: 0 6px 20px rgba(34, 37, 45, .055);
  --shadow-lg: 0 12px 30px rgba(34, 37, 45, .08);
}
body { background: var(--bg); color: var(--text); }
.header { background: rgba(255,255,255,.94); color: var(--text); border-radius: 0; box-shadow: 0 1px 0 rgba(31,32,38,.04); padding: 16px 20px 13px; }
.header h1 { font-size: 1.2rem; letter-spacing: .2px; }
.header .date { color: var(--text-light); opacity: 1; }
.header-back { color: var(--text); }
.bottom-nav { background: rgba(255,255,255,.97); border-radius: 22px 22px 0 0; box-shadow: 0 -4px 18px rgba(34,37,45,.08); padding-top: 5px; }
.bottom-nav .nav-item { color: #a4a7ad; font-size: .68rem; padding: 6px 0 5px; }
.bottom-nav .nav-item .nav-icon { width: 38px; height: 30px; border-radius: 14px; font-size: 1.15rem; margin-bottom: 3px; }
.bottom-nav .nav-item.active { color: var(--text); font-weight: 700; }
.bottom-nav .nav-item.active .nav-icon { background: var(--text); color: #ffe85f; box-shadow: none; }
.card, .novel-item, .warehouse-item, .menu-section { box-shadow: var(--shadow-card); border: 1px solid rgba(31,32,38,.025); }
.banner { box-shadow: var(--shadow-lg); border-radius: 20px; }
.banner .swiper-slide { height: 164px; font-size: 1.18rem; }
.login-prompt { background: #dff5fc; color: #21404a; box-shadow: none; border: 1px solid #c9edf7; }
.login-prompt .login-btn { background: var(--text); color: #fff; }
.notice-bar { border: 1px solid var(--border-color); box-shadow: none; }
.notice-bar .notice-icon { color: var(--accent); }
.entry-btns .entry-btn { background: var(--text); box-shadow: none; border-radius: 16px; padding: 14px 12px; }
.entry-btns .entry-btn:nth-child(2) { background: var(--secondary); color: #12343d; }
.search-bar { background: #fff; border: 1px solid var(--border-color); box-shadow: none; padding: 4px 5px 4px 8px; }
.search-bar .search-btn { background: var(--text); border-radius: 999px; width: 66px; }
.cat-tabs .cat-tab { background: #fff; border: 1px solid var(--border-color); padding: 9px 19px; }
.cat-tabs .cat-tab.active { background: var(--text); border-color: var(--text); box-shadow: none; }
.grid-item .cover, .novel-item .novel-cover, .warehouse-item .wh-cover, .novel-detail .detail-cover { border-radius: 15px; box-shadow: 0 5px 14px rgba(31,32,38,.1); }
.grid-item .name, .novel-item .novel-title, .warehouse-item .wh-title { color: var(--text); }
.novel-item { padding: 12px; }
.novel-item .novel-author { color: var(--text-light); }
.btn-primary { background: var(--text); color: #fff; box-shadow: none; }
.btn-outline { border: 1px solid #d8dbe0; color: var(--text); }
.btn-outline:active { background: #f2f3f5; }
.user-header { background: linear-gradient(145deg, #e4f7fc 0%, #ccecf7 55%, #eaf8fb 100%); color: var(--text); border-radius: 0 0 28px 28px; padding: 30px 20px 22px; box-shadow: none; }
.user-avatar { background: #fff; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 5px 14px rgba(37,93,107,.12); }
.user-name { color: var(--text); }
.order-status { background: rgba(255,255,255,.86); color: var(--text); box-shadow: 0 6px 18px rgba(37,93,107,.08); border-radius: 18px; padding: 16px 0; }
.order-status .status-item { color: var(--text-light); }
.order-status .status-item .status-num { color: var(--text); font-size: 1.2rem; }
.order-status .status-item .status-icon { filter: grayscale(1); opacity: .8; }
.order-status-head { display: flex; justify-content: space-between; align-items: center; margin: 16px 4px 0; font-size: .8125rem; color: var(--text-light); }
.order-status-all { color: var(--primary); font-weight: 700; cursor: pointer; }
.order-status-all:active { opacity: .7; }
.menu-section { margin: 16px; border-radius: 18px; }
.menu-item { padding: 17px 18px; border-bottom-color: #f0f1f3; }
.menu-item:active { background: #f5fbfd; }
.menu-item .menu-icon { background: #edf9fc; color: #3b91aa; border-radius: 11px; }
.menu-item:nth-child(2n) .menu-icon { background: #fff0f3; color: var(--accent); }
.menu-item .menu-arrow { font-size: 1.1rem; color: #c5c8cd; }
.pi-tabs { background: #fff; border-bottom-color: var(--border-color); }
.pi-tab { color: var(--text-light); }
.pi-tab.active { color: var(--text); border-bottom-color: var(--text); }
.pi-upload-box { border-color: #bfe7f1; background: #f1fbfd; }
.pi-upload-box:hover { border-color: var(--secondary); background: #e6f8fc; }
.pi-upload-icon { color: var(--secondary); }
.pi-form-input { background: #fff; border: 1px solid var(--border-color); border-radius: 13px; }
.pi-form-input:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(104,200,232,.14); }
.pi-bank-card { background: var(--text); box-shadow: 0 8px 22px rgba(31,32,38,.15); }
@media (min-width: 481px) { body { border-left: 1px solid #eef0f2; border-right: 1px solid #eef0f2; } }

/* ==================== Page layout rebuild ==================== */
.app-topbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: calc(22px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 13px max(18px, env(safe-area-inset-left)); background: #fff;
}
.app-topbar h1 { font-size: 1.45rem; line-height: 1.2; font-weight: 800; }
.app-topbar p { color: var(--text-light); font-size: .75rem; margin-top: 2px; }
.brand-mark { font-size: 1.38rem; line-height: 1; font-weight: 900; }
.brand-mark span { display: inline-block; color: #fff; background: #ff405f; padding: 4px 6px 3px; border-radius: 5px; }
.round-action {
  width: 42px; height: 32px; border: 1px solid #e4e5e8; border-radius: 18px;
  background: #fff; color: #26272c; font-size: 1.1rem; line-height: 1;
}
.section-eyebrow { display: block; color: #9b9da4; font-size: .6rem; font-weight: 800; letter-spacing: 0; margin-bottom: 3px; }

.pop-hero { margin-top: 6px; box-shadow: none; }
.pop-hero .swiper-slide { height: 224px; }
.hero-slide { padding: 24px 25px; justify-content: space-between !important; text-align: left; overflow: hidden; }
.hero-slide > div:first-child { position: relative; z-index: 2; }
.hero-slide small { display: inline-block; color: inherit; font-size: .65rem; font-weight: 800; margin-bottom: 8px; }
.hero-slide h2 { font-size: 1.55rem; line-height: 1.3; font-weight: 900; }
.hero-slide button { margin-top: 15px; padding: 8px 14px; border-radius: 16px; background: #202126; color: #fff; font-size: .7rem; font-weight: 700; }
.hero-blue { background: #cceef7; color: #163943 !important; }
.hero-red { background: #ff6478; color: #fff !important; }
.hero-yellow { background: #f5d65d; color: #312a13 !important; }
.hero-red button { background: #fff; color: #d82e4c; }
.hero-book {
  width: 103px; height: 148px; flex-shrink: 0; padding: 22px 12px 15px;
  background: #fff; border: 4px solid #232429; border-radius: 5px 9px 9px 5px;
  color: #232429; font-size: 1.45rem; line-height: 1.1; font-weight: 900;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 10px 11px 0 rgba(31,32,38,.13); transform: rotate(7deg);
}
.hero-book::before { content: '兜钥书社'; font-size: .42rem; font-weight: 800; margin-bottom: 12px; }
.hero-book span { margin-top: auto; font-size: .52rem; font-weight: 700; color: #777981; }
.hero-red .hero-book { transform: rotate(-6deg); }
.hero-yellow .hero-book { background: #232429; border-color: #fff; color: #fff; }
.pop-hero .swiper-dots { left: 26px; transform: none; bottom: 12px; }
.pop-hero .swiper-dot { background: rgba(31,32,38,.2); }
.pop-hero .swiper-dot.active { width: 18px; background: #202126; }

.notice-bar { margin: 10px 16px 15px; padding: 10px 13px; border-radius: 12px; }
.notice-badge { background: #ff405f; color: #fff; border-radius: 4px; padding: 3px 5px; font-size: .55rem; font-weight: 900; }
.line-arrow { color: #a9abb0; font-size: 1.2rem; }

.store-list-section, .warehouse-section { padding: 0 16px; }

.section-heading { min-height: 66px; display: flex; align-items: center; justify-content: space-between; }
.section-heading h2 { font-size: 1.14rem; line-height: 1.2; font-weight: 800; }
.section-heading button { background: transparent; color: #999ca3; font-size: .72rem; }
.section-heading button span { font-size: 1rem; }
.home-flash-sales { padding: 0 16px 92px; }
.flash-sales-state {
  min-height: 84px; display: flex; align-items: center; justify-content: center;
  color: #8f9299; font-size: .75rem;
}
.book-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 13px; }
.book-product-card { min-width: 0; cursor: pointer; }
.book-cover-art {
  position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  padding: 15px 13px; border-radius: 8px; color: #fff;
  display: flex; flex-direction: column; align-items: flex-start;
  box-shadow: 0 7px 16px rgba(31,32,38,.13);
}
.book-cover-art::before { content: ''; position: absolute; top: 42%; left: -12%; width: 125%; height: 27%; border: 2px solid rgba(255,255,255,.34); transform: rotate(-13deg); }
.book-cover-art::after { content: ''; position: absolute; right: 13px; top: 14px; width: 20px; height: 20px; border: 1px solid currentColor; opacity: .45; }
.book-cover-art .book-cover-label { position: relative; z-index: 1; font-size: .48rem; font-weight: 800; opacity: .78; }
.book-cover-art strong { position: relative; z-index: 1; margin-top: auto; max-width: 100%; font-size: 1.2rem; line-height: 1.15; font-weight: 900; overflow-wrap: anywhere; }
.book-cover-art small { position: relative; z-index: 1; width: 100%; margin-top: 7px; font-size: .55rem; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-cover-art.c1 { background: #e94d62; }
.book-cover-art.c2 { background: #45a790; }
.book-cover-art.c3 { background: #596fc7; }
.book-cover-art.c4 { background: #eaa92f; color: #332714; }
.book-cover-art.c5 { background: #3196ac; }
.book-cover-art.c6 { background: #995caa; }
.book-cover-art.c7 { background: #77aa52; }
.book-cover-art.c8 { background: #278f88; }
.book-cover-art.c9 { background: #e96e47; }
.book-cover-art.c10 { background: #538c69; }
.book-product-info { display: flex; gap: 6px; justify-content: space-between; align-items: center; padding-top: 9px; }
.book-product-info > div { min-width: 0; }
.book-product-info h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; font-weight: 800; }
.book-product-info p { margin-top: 1px; color: #96989e; font-size: .63rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-product-info button { width: 27px; height: 27px; flex-shrink: 0; border-radius: 50%; background: #202126; color: #fff; font-size: 1rem; }
.book-product-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: .6rem; color: #a0a2a7; }
.book-product-meta b { color: #ff405f; font-size: .72rem; }

/* Bookstore */
.bookstore-topbar { padding-bottom: 10px; }
.bookstore-search { margin: 4px 16px 12px; height: 48px; align-items: center; border-radius: 16px; }
.search-symbol { position: relative; width: 17px; height: 17px; margin-left: 8px; border: 2px solid #777a80; border-radius: 50%; }
.search-symbol::after { content: ''; position: absolute; width: 6px; height: 2px; right: -5px; bottom: -2px; background: #777a80; transform: rotate(45deg); }
.bookstore-search .search-btn { height: 36px; }
.store-feature { margin-top: 0; box-shadow: none; }
.store-feature .swiper-slide { height: 155px; }
.store-slide { padding: 20px 25px; justify-content: space-between !important; text-align: left; }
.store-slide > div:first-child { position: relative; z-index: 2; }
.store-slide span { font-size: .58rem; font-weight: 800; }
.store-slide h2 { margin-top: 5px; font-size: 1.35rem; font-weight: 900; }
.store-slide p { margin-top: 3px; font-size: .68rem; opacity: .72; }
.store-blue { background: #ceeef7; color: #153842 !important; }
.store-yellow { background: #f2d25d; color: #382f14 !important; }
.store-mint { background: #bce7d8; color: #183b31 !important; }
.mini-book { width: 70px; height: 98px; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; border-radius: 5px; color: #fff; font-size: .95rem; line-height: 1.1; font-weight: 900; text-align: center; box-shadow: 7px 8px 0 rgba(31,32,38,.13); transform: rotate(5deg); }
.store-feature .swiper-dots { bottom: 9px; }
.store-tabs { margin: 16px 0 5px; padding: 0 16px; gap: 6px; }
.store-tabs .cat-tab { flex: 1; padding: 8px 6px; text-align: center; }
.compact-heading { min-height: 62px; }
.result-count { color: #a0a2a8; font-size: .68rem; }
.store-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 13px; padding: 0; margin-bottom: 92px; }
.store-book-card { min-width: 0; cursor: pointer; }
.store-book-card .book-cover-art { aspect-ratio: 3 / 3.75; }
.store-book-info { padding-top: 9px; }
.store-book-info h3 { font-size: .82rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-book-info > p { margin-top: 2px; color: #999ca2; font-size: .62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-book-info > div { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.store-book-info > div span { color: #a3a5aa; font-size: .57rem; }
.store-book-info button { padding: 6px 10px; border-radius: 13px; background: #202126; color: #fff; font-size: .62rem; font-weight: 700; }
.store-grid .empty-state { grid-column: 1 / -1; }

/* Library */
.warehouse-topbar { padding-bottom: 15px; }
.warehouse-topbar .date { color: #96999f; font-size: .62rem; }
.library-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 16px 12px; padding: 19px 5px; background: #dff4fa; border-radius: 18px; }
.library-summary div { display: flex; flex-direction: column; align-items: center; border-right: 1px solid rgba(31,32,38,.08); }
.library-summary div:last-child { border-right: 0; }
.library-summary strong { font-size: 1.35rem; line-height: 1.1; }
.library-summary span { margin-top: 5px; color: #73838a; font-size: .63rem; }
.library-tabs { display: flex; gap: 20px; padding: 4px 18px 2px; }
.library-tabs button { position: relative; padding: 9px 0; background: transparent; color: #999ba1; font-size: .75rem; font-weight: 700; }
.library-tabs button.active { color: #202126; }
.library-tabs button.active::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 16px; height: 3px; background: #202126; border-radius: 3px; transform: translateX(-50%); }
.warehouse-list { padding: 0; margin-bottom: 92px; }
.warehouse-item { align-items: stretch; min-height: 154px; margin-bottom: 12px; padding: 12px; border-radius: 16px; box-shadow: none; border: 1px solid var(--border-color); }
.warehouse-cover { width: 92px; height: 126px; flex-shrink: 0; padding: 10px 9px; }
.warehouse-cover strong { font-size: .93rem; }
.warehouse-item .wh-info { display: flex; flex-direction: column; padding: 2px 0 1px; }
.warehouse-item .wh-title { margin-bottom: 1px; font-size: .9rem; }
.wh-author { color: #9a9ca2; font-size: .62rem; }
.warehouse-item .wh-progress { margin-top: 18px; font-size: .63rem; }
.warehouse-item .wh-progress-bar { height: 4px; margin-top: 6px; background: #eceef1; }
.warehouse-item .wh-progress-fill { background: #68c8e8; }
.continue-button { align-self: flex-start; margin-top: auto; padding: 0; background: transparent; color: #222329; font-size: .68rem; font-weight: 800; }
.continue-button span { font-size: .9rem; }
.library-empty { padding: 42px 20px; border-radius: 18px; background: #fff; text-align: center; }
.library-empty > span { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 17px; background: #edf8fb; color: #55b8d3; font-size: 1.5rem; }
.library-empty h3 { font-size: .95rem; }
.library-empty p { margin-top: 4px; color: #9b9da3; font-size: .68rem; }
.library-empty a { display: inline-block; margin-top: 16px; padding: 9px 17px; border-radius: 18px; background: #202126; color: #fff; font-size: .68rem; font-weight: 700; }
.library-recommendations { margin-top: 22px; padding-bottom: 20px; }
.recommend-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid #eceef1; }
.recommend-cover { width: 45px; height: 60px; flex-shrink: 0; padding: 6px 5px; }
.recommend-cover .book-cover-label, .recommend-cover small { display: none; }
.recommend-cover strong { font-size: .48rem; }
.recommend-row > div:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.recommend-row strong { font-size: .78rem; }
.recommend-row span { color: #a0a2a7; font-size: .6rem; }
.recommend-row > button { padding: 7px 11px; border-radius: 14px; background: #202126; color: #fff; font-size: .65rem; font-weight: 800; }
.detail-book-cover { width: 130px; height: 173px; margin: 0 auto 16px; }

@media (max-width: 359px) {
  .hero-slide { padding: 21px 19px; }
  .hero-slide h2 { font-size: 1.35rem; }
  .hero-book { width: 88px; height: 130px; font-size: 1.15rem; }
  .book-product-grid, .store-grid { gap: 15px 10px; }
}

/* ==================== 限时秒杀 Seckill ==================== */
.seckill-section {
  margin: 0 16px 16px; background: #fff; border-radius: 20px;
  box-shadow: 0 6px 24px rgba(255,107,157,0.15); overflow: hidden;
  transition: all .3s ease;
}
.home-flash-sales .seckill-section { margin-right: 0; margin-left: 0; }
.seckill-section.ended { opacity: 0.6; }
.seckill-section.disabled { opacity: 0.72; filter: grayscale(.15); }
  .seckill-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-radius: 20px 20px 0 0;
  background: linear-gradient(135deg, #FF6B9D, #FF8C69);
  }
  .seckill-more { background: transparent; border: 1px solid rgba(255,255,255,.6); border-radius: 12px; color: #fff; font-size: .66rem; padding: 4px 8px; white-space: nowrap; }
.seckill-title {
  display: flex; align-items: center; gap: 7px;
  color: #fff; font-size: 1.05rem; font-weight: 900; letter-spacing: 1px;
}
.seckill-title small { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .62rem; font-weight: 600; opacity: .86; letter-spacing: 0; }
.seckill-icon { font-size: 1.25rem; line-height: 1; }
.seckill-independent-label { padding: 4px 8px; border: 1px solid rgba(255,255,255,.5); border-radius: 10px; color: #fff; font-size: .58rem; font-weight: 700; white-space: nowrap; }
.seckill-timer { display: flex; align-items: center; gap: 3px; }
.seckill-time-block {
  display: inline-block; min-width: 32px; text-align: center;
  padding: 4px 6px; border-radius: 8px; background: #fff; color: #FF6B9D;
  font-size: .88rem; font-weight: 900; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(255,255,255,.25);
}
.seckill-timer em { font-style: normal; color: #fff; font-weight: 900; font-size: .8rem; }
.seckill-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px;
}
.seckill-empty {
  grid-column: 1 / -1; min-height: 76px; display: flex; align-items: center; justify-content: center;
  color: #8f9299; font-size: .72rem;
}
.seckill-list::-webkit-scrollbar { display: none; }
.seckill-card {
  position: relative; min-width: 0; padding: 9px;
  background: #FFF9FB; border: 1px solid #FFE4EC; border-radius: 14px;
  display: flex; flex-direction: column; gap: 7px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.seckill-card:active { transform: scale(.97); }
.seckill-cover {
  position: relative; width: 100%; aspect-ratio: 3/4; border-radius: 10px;
  overflow: hidden; background: #fdf2f7;
}
.seckill-cover img { width: 100%; height: 100%; object-fit: cover; }
.seckill-cover .seckill-cover-art {
  width: 100%; height: 100%; padding: 9px 8px; border-radius: 0;
  box-shadow: none;
}
.seckill-cover-art::before, .seckill-cover-art::after { display: none; }
.seckill-cover-art .book-cover-label { font-size: .4rem; }
.seckill-cover-art strong { font-size: .78rem; line-height: 1.15; }
.seckill-cover-art small { margin-top: 4px; font-size: .45rem; }
.seckill-status {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  padding: 2px 7px; border-radius: 9px; font-size: .55rem; font-weight: 800; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18); white-space: nowrap;
}
.seckill-status.ongoing { background: #FF6B9D; }
.seckill-status.upcoming { background: #4A9DFF; }
.seckill-status.ended { background: #B2BEC3; }
.seckill-status.disabled { background: #7F8C8D; }
.seckill-name {
  font-size: .75rem; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seckill-price-row { display: flex; align-items: baseline; gap: 7px; }
.seckill-price { color: #FF6B9D; font-size: 1.05rem; font-weight: 900; line-height: 1; }
.seckill-origin { color: #B2BEC3; font-size: .62rem; text-decoration: line-through; }
.seckill-item-countdown {
  min-height: 28px; display: flex; align-items: center; justify-content: center;
  padding: 6px 5px; border-radius: 8px; background: #fff0f5; color: #e54779;
  font-size: .66rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.seckill-item-countdown.upcoming { background: #edf5ff; color: #357fd1; }
.seckill-item-countdown.ended, .seckill-item-countdown.disabled { background: #f0f1f2; color: #8f969c; }

/* ==================== 交易状态：角标 / 遮罩 / 会员 ==================== */
.book-cover-wrap { position: relative; }

/* 右上角状态角标 */
.vip-corner {
  position: absolute; top: 6px; left: 6px; z-index: 5;
  display: inline-flex; align-items: center; gap: 2px;
  border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
.vip-corner.corner-top { top: 6px; left: 6px; }
.novel-badge {
  display: inline-block; padding: 3px 8px;
  font-size: .6rem; font-weight: 800; letter-spacing: .5px; color: #fff;
  white-space: nowrap;
}
.vip-badge {
  display: inline-block; padding: 2px 8px; border-radius: 8px;
  background: linear-gradient(135deg, #FFB800, #FF9500); color: #fff;
  font-size: .62rem; font-weight: 800; letter-spacing: .5px;
  vertical-align: middle;
}
.svip-badge {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #7A4A00; box-shadow: 0 1px 4px rgba(255, 180, 0, .4);
}
.vip-badge-normal {
  background: #EDEDED; color: #999; font-weight: 600;
}
.sold-badge { background: linear-gradient(135deg, #636E72, #2D3436); }
.locked-badge { background: linear-gradient(135deg, #4A9DFF, #3D6DE0); }
.mine-badge { background: linear-gradient(135deg, #FF6B9D, #FF3D7F); }

/* 封面遮罩 */
.locked-overlay {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(45, 52, 54, .55); backdrop-filter: blur(2px);
  color: #fff; text-align: center;
}
.locked-overlay .locked-overlay-icon { font-size: 1.4rem; line-height: 1; }
.locked-overlay .locked-overlay-text {
  font-size: .68rem; font-weight: 800; letter-spacing: 1px;
  background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 8px;
}
.locked-overlay.sold-overlay { background: rgba(45, 52, 54, .6); }

/* 详情页购买按钮状态 */
.detail-buy.disabled {
  background: linear-gradient(135deg, #B2BEC3, #95A5A6);
  color: #fff; cursor: not-allowed; box-shadow: none;
}
.detail-buy-reason {
  margin-top: 8px; text-align: center; font-size: .72rem; color: #999;
}
.detail-purchase-panel { margin-top: 14px; padding-top: 13px; border-top: 1px solid #f0e6ea; }
.detail-purchase-title { margin-bottom: 9px; color: var(--text); font-size: .82rem; font-weight: 800; }
.detail-commerce-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-commerce-actions .btn { min-width: 0; min-height: 42px; padding: 9px 8px; font-size: .76rem; }
.detail-commerce-actions .detail-lock-action { grid-column: 1 / -1; color: #704c00; background: #ffe7a6; border: 1px solid #e7bd4b; }
.detail-sale-panel { margin-top: 14px; padding: 14px; border: 1px solid #eadde2; border-radius: 8px; background: #fff; }
.detail-sale-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid #f1e7ea; }
.detail-sale-head > div { display: flex; align-items: baseline; gap: 8px; }
.detail-sale-head small { color: var(--text-muted); font-size: .7rem; }
.detail-sale-head strong { color: var(--primary); font-size: 1.35rem; }
.detail-sale-state { flex: 0 0 auto; padding: 4px 8px; border: 1px solid #ffc5d7; border-radius: 4px; color: #d94872; background: #fff4f7; font-size: .68rem; font-weight: 700; }
.detail-sale-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding-top: 9px; font-size: .75rem; line-height: 1.45; }
.detail-sale-row span { color: var(--text-muted); }
.detail-sale-row b { min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.detail-sale-countdown { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; padding: 10px 12px; border-radius: 6px; background: #292426; color: #fff; }
.detail-sale-countdown span { font-size: .72rem; }
.detail-sale-countdown strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.server-pay-summary { display: grid; gap: 6px; padding: 14px; margin-bottom: 14px; border: 1px solid #f0e6ea; border-radius: 8px; }
.server-pay-summary strong { color: var(--primary); font-size: 1.35rem; }
.server-pay-summary small { color: var(--text-muted); overflow-wrap: anywhere; }
.server-pay-options { display: grid; gap: 8px; margin-bottom: 14px; }
.server-pay-option { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid #eee; border-radius: 8px; font-size: .78rem; }
.server-pay-option span { display: flex; flex-wrap: wrap; gap: 6px; }
.server-pay-option code { width: 100%; color: var(--text); overflow-wrap: anywhere; }
.server-pay-qr { width: 72px; height: 72px; object-fit: contain; border: 1px solid #eee; border-radius: 4px; }
.server-proof-upload { display: grid; gap: 7px; margin-bottom: 14px; font-size: .78rem; font-weight: 700; }
.cart-list { max-height: 60vh; overflow-y: auto; }
.cart-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid #f0e6ea; }
.cart-row-info { display: grid; gap: 4px; min-width: 0; }
.cart-row-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.cart-row-info span { color: var(--text-muted); font-size: .72rem; }
.cart-row-actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* 支付弹窗锁定提示 */
.pay-lock-banner {
  margin-bottom: 12px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(135deg, #EAF4FF, #E8F0FF);
  border: 1px solid #CFE4FF; color: #3D6DE0;
  font-size: .78rem; line-height: 1.6;
}
.pay-lock-timer { color: #FF3D7F; font-weight: 900; font-variant-numeric: tabular-nums; }

/* 会员引导弹窗 */
.vip-guide-modal { text-align: center; }
.vip-lock-icon { font-size: 3rem; line-height: 1; margin: 8px 0; }
.vip-lock-title { font-size: 1rem; font-weight: 800; color: #2D3436; margin: 10px 0 6px; line-height: 1.5; }
.vip-lock-desc { font-size: .78rem; color: #999; line-height: 1.6; }
.vip-plan-grid { display: flex; gap: 10px; margin-top: 4px; }
.vip-plan {
  flex: 1; padding: 14px 10px; border-radius: 16px; cursor: pointer;
  background: #FFF9FB; border: 1px solid #FFE4EC;
  transition: transform .2s ease, box-shadow .2s ease;
}
.vip-plan:active { transform: scale(.97); }
.vip-plan-name { margin-bottom: 6px; }
.vip-plan-desc { font-size: .72rem; color: #999; line-height: 1.5; }

/* 我的页会员入口与订单标签 */
.vip-open-btn {
  background: linear-gradient(135deg, #FFB800, #FF9500);
  color: #fff; border-radius: 999px; padding: 4px 16px;
  font-size: .75rem; font-weight: 800; border: none;
}
.order-tag {
  display: inline-block; padding: 2px 8px; border-radius: 8px;
  font-size: .62rem; font-weight: 800; color: #fff;
}
.tag-lock { background: linear-gradient(135deg, #4A9DFF, #3D6DE0); }
.tag-pending { background: linear-gradient(135deg, #FFB800, #FF9500); }
.tag-paid { background: linear-gradient(135deg, #07C160, #06A855); }

/* ==================== 详情页：锁定提示横幅 ==================== */
.detail-lock-banner {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(135deg, #FFF1E6, #FFE4EC);
  border: 1px solid #FFD0B8;
  box-shadow: 0 4px 14px rgba(255, 107, 157, .12);
}
.detail-lock-icon { font-size: 1.4rem; line-height: 1; }
.detail-lock-text { flex: 1; min-width: 0; }
.detail-lock-title { font-size: .82rem; font-weight: 800; color: #E8604C; }
.detail-lock-sub {
  margin-top: 3px; font-size: .72rem; color: #C7796B; line-height: 1.6;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.detail-lock-countdown {
  display: inline-block; color: #FF3D7F; font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: #fff; padding: 2px 8px; border-radius: 8px;
  box-shadow: 0 2px 6px rgba(255, 107, 157, .2);
}

/* ==================== 详情页：版权合约模块 ==================== */
.copyright-module { margin-top: 14px; }
.copyright-entry {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 14px;
  background: #FFF9FB; border: 1px solid #FFE4EC;
  cursor: pointer; transition: box-shadow .25s ease, transform .2s ease;
}
.copyright-entry:active { transform: scale(.98); }
.copyright-entry.active {
  box-shadow: 0 4px 14px rgba(255, 107, 157, .18);
  border-color: #FFB8CF;
}
.copyright-entry-icon { font-size: 1.1rem; line-height: 1; }
.copyright-entry-text {
  flex: 1; font-size: .82rem; font-weight: 700; color: #2D3436;
}
.copyright-arrow { color: #FF6B9D; font-size: .8rem; }
.copyright-body {
  display: none; margin-top: 10px; padding: 14px; border-radius: 16px;
  background: #FFF9FB; border: 1px solid #FFE4EC;
  box-shadow: 0 6px 18px rgba(255, 107, 157, .1);
}
.copyright-body.open { display: block; animation: detailFadeUp .25s ease; }
@keyframes detailFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.copyright-desc {
  font-size: .76rem; line-height: 1.7; color: #666; margin-bottom: 12px;
}
.copyright-qr {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.qr-placeholder {
  width: 120px; height: 120px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #fff; border: 2px dashed #FFB8CF;
  color: #FF6B9D; box-shadow: 0 4px 12px rgba(255, 107, 157, .12);
}
.qr-wechat { font-size: 1.7rem; line-height: 1; }
.qr-placeholder span:last-child { font-size: .72rem; font-weight: 800; color: #FF6B9D; }
.qr-tip { font-size: .68rem; color: #999; }
.copyright-tip {
  padding: 10px 12px; border-radius: 12px; text-align: center;
  background: linear-gradient(135deg, #FFE4EC, #FFF1E6);
  color: #E8604C; font-size: .74rem; font-weight: 700; line-height: 1.6;
}

/* ==================== 仓库页：订单卡片 & 状态标签 ==================== */
.order-list {
  padding: 0 16px; margin-bottom: 12px;
}
.order-empty {
  padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: .8125rem;
}
.order-count {
  font-size: .72rem; color: var(--text-muted); font-weight: 700;
}
.order-card {
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 16px; margin-bottom: 12px;
  border: 1px solid #F5E3EA; transition: box-shadow .3s ease;
}
.order-card:active { transform: scale(.99); }
.order-card-main { flex: 1; min-width: 0; }
.order-card-title {
  font-size: .9375rem; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.order-card-sub {
  font-size: .75rem; color: var(--text-light); line-height: 1.7;
}
.order-amount { color: #FF6B9D; font-size: .88rem; }
.order-card-side {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.order-card-extra { margin-top: 10px; }
.order-extra {
  font-size: .75rem; color: var(--text-light); line-height: 1.6;
}
.auditing-text { color: #4A9DFF; font-weight: 600; }
.reject-reason {
  padding: 8px 12px; border-radius: 10px; background: #FFF0F0; border: 1px solid #FFD0D0;
  font-size: .75rem; color: #D63031; line-height: 1.6; margin-bottom: 8px;
}

/* ==================== 订单状态标签（五种颜色） ==================== */
.order-status-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 12px; border-radius: 999px; font-size: .68rem; font-weight: 800;
  white-space: nowrap; letter-spacing: .3px;
}
.st-pending { background: #F0F0F0; color: #888; }
.st-confirming { background: #E8F4FF; color: #2E86DE; }
.st-paid { background: #E8F8E8; color: #07A35A; }
.st-rejected { background: #FFE8E8; color: #D63031; }
.st-timeout { background: #FFF3E8; color: #E67E22; }

/* ==================== 待付款订单卡片 ==================== */
.pay-card { padding: 18px; }
.pay-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pending-order-cover { width: 42px; height: 56px; margin-right: 10px; flex: 0 0 auto; border-radius: 4px; object-fit: cover; }
.pay-card-title { font-size: 1rem; font-weight: 700; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-card-amount { font-size: 1.15rem; color: var(--text); margin-bottom: 14px; }
.pay-card-amount b { font-size: 1.45rem; color: #FF6B9D; }
.pay-card-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .78rem; color: var(--text-light); padding: 5px 0; border-bottom: 1px dashed #F5E3EA;
}
.pay-card-row:last-of-type { border-bottom: none; }
.pay-deadline { font-weight: 700; }
.countdown {
  font-variant-numeric: tabular-nums; font-weight: 900; color: #FF3D7F;
  letter-spacing: .5px; min-width: 5em; display: inline-block;
}
.pay-card-qr {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 14px 0; padding: 14px; background: #FFF9FB; border-radius: var(--radius);
  border: 1px solid #FFE4EC;
}
.pay-card-qr canvas {
  display: block; width: 150px; height: 150px; border-radius: 12px;
  box-shadow: 0 2px 12px rgba(255,107,157,.12);
}
.pay-card-qr p { font-size: .68rem; color: var(--text-muted); }

/* ==================== 付款确认分组 ==================== */
.confirm-group { margin-bottom: 14px; }
.confirm-group-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 4px 8px;
  border-bottom: 1px solid #F5E3EA; margin-bottom: 10px;
}
.confirm-group-desc { flex: 1; font-size: .72rem; color: var(--text-muted); }
.confirm-group-count {
  width: 22px; height: 22px; border-radius: 50%; background: #FFF0F5;
  color: #FF6B9D; font-size: .68rem; font-weight: 800; text-align: center; line-height: 22px;
}
.confirm-group-body .order-card { margin-bottom: 8px; }
.confirm-account-link { margin-left: auto; color: var(--primary); font-size: .75rem; font-weight: 700; }
.server-owner-proof {
  width: 76px; height: 76px; margin-top: 8px; object-fit: cover;
  border: 1px solid var(--border-color); border-radius: 6px;
}

/* ==================== 上传凭证面板 ==================== */
.voucher-modal { max-width: 380px; }
.voucher-tip {
  font-size: .8125rem; color: var(--text-light); line-height: 1.6; margin-bottom: 16px;
}
.voucher-upload-box {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 32px 20px; border: 2px dashed #FFB8CF; border-radius: var(--radius);
  background: #FFF9FB; cursor: pointer; transition: border-color .3s ease, background .3s ease;
}
.voucher-upload-box:active { border-color: #FF6B9D; background: #FFF0F5; }
.voucher-upload-icon {
  width: 48px; height: 48px; border-radius: 50%; background: #FFE4EC;
  color: #FF6B9D; font-size: 1.5rem; font-weight: 300; display: flex; align-items: center; justify-content: center;
}
.voucher-upload-box p { font-size: .8125rem; color: var(--text-muted); }
.voucher-preview { margin-top: 12px; }
.voucher-preview img {
  max-width: 100%; max-height: 240px; border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,.08); margin: 0 auto;
}

/* ==================== 仓库页：粉系统一覆盖 ==================== */
.library-summary {
  background: linear-gradient(135deg, #FFF0F5, #FFE4EC);
  border: 1px solid #F5D3DF;
}
.library-summary strong { color: #FF6B9D; }
.library-summary span { color: #C97A9B; }
.library-summary div { border-right-color: rgba(255,107,157,.15); }
.library-tabs button.active { color: #FF6B9D; }
.library-tabs button.active::after { background: #FF6B9D; }
.warehouse-item { border-color: #F5E3EA; }
.warehouse-item .wh-progress-fill {
  background: linear-gradient(135deg, #FF6B9D, #FF8C69);
}
.continue-button { color: #FF6B9D; font-weight: 800; }
.library-empty > span { background: #FFF0F5; color: #FF6B9D; }
.library-empty a { background: linear-gradient(135deg, #FF6B9D, #FF8C69); }
.warehouse-topbar .date { color: #C97A9B; }

/* ==================== 我的页：分享推广二维码 ==================== */
.share-qr-title { font-size: .82rem; font-weight: 700; color: #2D3436; margin-top: 14px; }
.share-qr-box {
  width: 152px; height: 152px; margin: 8px auto; padding: 4px;
  background: #fff; border: 2px dashed #FFB8CF; border-radius: 16px;
  box-shadow: 0 4px 12px rgba(255, 107, 157, .12);
  display: flex; align-items: center; justify-content: center;
}
.share-qr-box canvas, .share-qr-box img { display: block; }
.share-qr-tip { font-size: .72rem; color: #999; margin: 2px 0 4px; }

/* ==================== 我的页：确认/驳回/平台介入（粉系） ==================== */
.tag-confirming { background: linear-gradient(135deg, #4A9DFF, #3D6DE0); }
.tag-platform { background: linear-gradient(135deg, #B06AB3, #8E44AD); }
.tag-rejected { background: linear-gradient(135deg, #FF7675, #D63031); }
.tag-timeout { background: linear-gradient(135deg, #95A5A6, #7F8C8D); }
.voucher-thumb {
  display: inline-block; width: 56px; height: 56px; object-fit: cover;
  border-radius: 10px; border: 1px solid #F0E6EA; margin-top: 4px; vertical-align: middle;
}
.reject-reason-group { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.reject-option {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px; background: #FFF5F7;
  border: 1px solid #F5D8E0; font-size: .8125rem; color: #2D3436;
}
.reject-option input { accent-color: #FF6B9D; }
.reject-platform-check {
  display: flex; align-items: center; gap: 6px; margin: 12px 0;
  font-size: .8125rem; color: #666;
}
.reject-platform-check input { accent-color: #FF6B9D; }