/* ============================================================
   意初图库 · 清新绿主题
   ============================================================ */
:root {
  --primary: #0aa6c0;
  --primary-dark: #06829a;
  --primary-light: #12c2e9;
  --primary-deep: #063e4d;
  --primary-bg: #e8f7fa;
  --accent: #ff9a3d;
  --gold: #e0b45c;
  --ink: #17323b;
  --ink-2: #51707b;
  --ink-3: #8aa4ad;
  --line: #dfeef2;
  --bg: #f5fafc;
  --card: #ffffff;
  --danger: #e05d5d;
  --grad-hero: radial-gradient(900px 380px at 85% -60%, rgba(18,194,233,.35), transparent 60%), radial-gradient(700px 420px at 8% 120%, rgba(10,166,192,.25), transparent 55%), linear-gradient(135deg, #06303f 0%, #075e73 52%, #0aa6c0 100%);
  --grad-vip-hero: linear-gradient(135deg, #052a36 0%, #086077 60%, #0aa6c0 100%);
  --grad-vip-tip: linear-gradient(135deg, #103c4b, #0a6b83);
  --grad-me-card: linear-gradient(135deg, #06303f, #0a7d97);
  --radius: 14px;
  --shadow: 0 2px 12px rgba(6, 62, 77, .07);
  --shadow-lg: 0 10px 34px rgba(6, 62, 77, .14);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: var(--bg); color: var(--ink);
  font-size: 15px; line-height: 1.65;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1240px, 93%); margin: 0 auto; }

/* ---------- 顶栏 ---------- */
.topbar {
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.topbar-inner { display: flex; align-items: center; gap: 22px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-logo { display: grid; place-items: center; }
.brand-logo-img { width: 34px; height: 34px; object-fit: contain; border-radius: 9px; display: block; }
.brand-name { font-size: 21px; font-weight: 800; letter-spacing: 1px; color: var(--primary-deep); }
.main-nav { display: flex; gap: 4px; }
.main-nav a {
  padding: 7px 14px; border-radius: 9px; font-weight: 500; color: var(--ink-2);
  transition: all .18s;
}
.main-nav a:hover { color: var(--primary-dark); background: var(--primary-bg); }
.main-nav a.active { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.main-nav a.vip-link { color: #a3722a; font-weight: 600; }
.main-nav a.vip-link:hover { background: #fdf3e3; color: #8a5a17; }
.searchbox {
  flex: 1; max-width: 340px; display: flex; align-items: center;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 0 6px 0 16px; height: 40px; margin-left: auto; transition: all .2s;
}
.searchbox:focus-within { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(10,166,192,.12); }
.searchbox input { border: none; outline: none; background: transparent; flex: 1; font-size: 14px; color: var(--ink); }
.searchbox button {
  border: none; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
}
.user-area { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--primary-bg); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark)); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.uname { font-weight: 600; font-size: 14px; }
.vip-badge-s {
  background: linear-gradient(135deg, #f2d18b, #d9a441); color: #6b4a10;
  font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; letter-spacing: .5px;
}
.menu-toggle { display: none; border: none; background: none; color: var(--ink); cursor: pointer; }

/* ---------- 按钮 ---------- */
.primary-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; font-weight: 600; border: none; cursor: pointer;
  padding: 11px 26px; border-radius: 999px; font-size: 15px;
  transition: all .2s; box-shadow: 0 4px 14px rgba(10,166,192,.32);
}
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(10,166,192,.4); }
.primary-btn.sm { padding: 8px 18px; font-size: 14px; }
.primary-btn.lg { padding: 14px 38px; font-size: 16px; }
.ghost-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-2);
  padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: all .2s;
}
.ghost-btn:hover { border-color: var(--primary); color: var(--primary-dark); }
.gold-btn {
  background: linear-gradient(135deg, #f5d78e, #dda648); color: #5c3f0e;
  border: none; font-weight: 700;
}
.orange-btn { background: linear-gradient(135deg, #ffb057, #f28122); box-shadow: 0 4px 14px rgba(242,129,34,.35); }

/* ---------- Flash ---------- */
.flashes { margin-top: 14px; }
.flash {
  padding: 11px 16px; border-radius: 11px; margin-bottom: 10px; font-size: 14px;
  display: flex; justify-content: space-between; align-items: center; animation: slideIn .25s ease;
}
@keyframes slideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }
.flash-success { background: #e5f8ee; color: #177245; border: 1px solid #bce8d0; }
.flash-error { background: #fdecec; color: #a33; border: 1px solid #f2c9c9; }
.flash-close { border: none; background: none; font-size: 18px; cursor: pointer; color: inherit; opacity: .6; }

/* ---------- 首页 Hero ---------- */
.hero { background: var(--grad-hero); color: #fff; padding: 74px 0 86px; position: relative; overflow: hidden; }
.hero-inner { display: flex; align-items: center; justify-content: flex-end; gap: 40px; }
.hero-text { flex: 1.2; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.25);
  padding: 6px 14px; border-radius: 999px; font-size: 13px; margin-bottom: 18px; letter-spacing: 1px;
}
.hero h1 { font-size: 42px; font-weight: 800; line-height: 1.25; margin-bottom: 16px; letter-spacing: 1px; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #9be8ff, #fff7ae); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.sub { font-size: 16px; opacity: .88; margin-bottom: 30px; max-width: 540px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .ghost-btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.hero .ghost-btn:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }
.hero-stats { display: flex; gap: 38px; margin-top: 38px; }
.hero-stats b { font-size: 26px; font-weight: 800; display: block; }
.hero-stats span { font-size: 13px; opacity: .75; }
.hero-card {
  flex: .9; max-width: 380px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px; padding: 26px; backdrop-filter: blur(6px);
}
.vip-card-mini h3 { font-size: 19px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.vip-card-mini .price-line { font-size: 34px; font-weight: 800; margin: 10px 0 4px; }
.vip-card-mini .price-line small { font-size: 14px; font-weight: 400; opacity: .8; }
.vip-card-mini ul { list-style: none; margin: 14px 0 18px; }
.vip-card-mini li { padding: 6px 0; font-size: 14px; opacity: .92; display: flex; gap: 9px; align-items: center; }
.vip-card-mini li::before { content: "✓"; font-weight: 800; color: #9be8ff; }

/* ---------- 分类筛选 ---------- */
.filter-bar { display: flex; align-items: center; gap: 10px; margin: 34px 0 22px; flex-wrap: wrap; }
.chip {
  padding: 8px 20px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line);
  font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: all .18s;
}
.chip:hover { border-color: var(--primary); color: var(--primary-dark); }
.chip.active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-color: transparent; color: #fff; font-weight: 600; }
.section-title { font-size: 21px; font-weight: 700; margin: 36px 0 18px; display: flex; align-items: center; gap: 10px; }
.section-title::before { content: ""; width: 5px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, var(--primary), var(--primary-dark)); }

/* ---------- 素材网格 ---------- */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.res-card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: all .22s; display: flex; flex-direction: column;
  border: 1px solid rgba(223,238,242,.6);
}
.res-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.res-cover { aspect-ratio: 3/4; overflow: hidden; position: relative; background: #e9f3f6; }
.res-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.res-card:hover .res-cover img { transform: scale(1.055); }
.res-cover .cat-tag {
  position: absolute; top: 10px; left: 10px; font-size: 12px; font-weight: 600;
  background: rgba(6,62,77,.62); color: #fff; padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(4px);
}
.res-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.res-title { font-weight: 600; font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.res-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.res-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.res-tags span { font-size: 12px; color: var(--ink-3); background: var(--bg); padding: 2px 9px; border-radius: 6px; }
.price { font-weight: 800; font-size: 17px; color: var(--accent); }
.price small { font-size: 12px; font-weight: 600; }
.price.free { color: #1fa860; font-size: 15px; }

/* ---------- 分页 ---------- */
.pagination { display: flex; justify-content: center; gap: 8px; margin: 40px 0 20px; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; display: grid; place-items: center; padding: 0 12px;
  border-radius: 10px; background: #fff; border: 1.5px solid var(--line); color: var(--ink-2); font-size: 14px;
}
.pagination .cur { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-color: transparent; font-weight: 700; }
.pagination a:hover { border-color: var(--primary); color: var(--primary-dark); }

/* ---------- 详情页 ---------- */
.detail-wrap { display: flex; gap: 28px; margin: 34px auto 0; align-items: stretch; max-width: 1120px; }
.detail-preview {
  flex: 1.5; min-height: 420px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; border: 1px solid rgba(223,238,242,.6); position: relative;
}
.detail-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.detail-side { flex: 1; min-width: 340px; }
.detail-panel {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 28px; border: 1px solid rgba(223,238,242,.6); height: 100%;
}
.detail-panel h1 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.kv { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kv .tag { font-size: 12.5px; background: var(--primary-bg); color: var(--primary-dark); padding: 3px 11px; border-radius: 7px; font-weight: 500; }
.price-row { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 6px; }
.price-row .p { font-size: 34px; font-weight: 800; color: var(--accent); }
.price-row .p small { font-size: 15px; }
.price-row .free-p { font-size: 26px; font-weight: 800; color: #1fa860; }
.price-row .old { color: var(--ink-3); text-decoration: line-through; font-size: 14px; }
.buy-actions { display: flex; flex-direction: column; gap: 11px; margin: 20px 0; }
.buy-actions .primary-btn, .buy-actions .gold-btn, .buy-actions .ghost-btn { width: 100%; padding: 13px; font-size: 15.5px; }
.vip-tip {
  background: var(--grad-vip-tip); color: #fff; border-radius: 12px;
  padding: 14px 16px; font-size: 13.5px; margin-top: 8px; line-height: 1.7;
}
.vip-tip b { color: #ffd98e; }
.vip-tip a { color: #9be8ff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.desc-block { margin-top: 18px; font-size: 14px; color: var(--ink-2); white-space: pre-wrap; }

/* 详情图展示：所有图片统一宽度（宽度一致，高度自适应） */
.detail-gallery { margin: 44px 0 8px; max-width: 750px; }
.detail-gallery .gallery-head {
  font-size: 19px; font-weight: 800; margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.detail-gallery .gallery-head::before {
  content: ""; width: 5px; height: 20px; border-radius: 3px;
  background: linear-gradient(180deg, var(--primary), var(--primary-dark)); display: inline-block;
}
.detail-gallery img {
  display: block; width: 100%; height: auto; border-radius: 14px; margin-bottom: 18px;
  border: 1px solid rgba(223,238,242,.7); box-shadow: var(--shadow);
}

/* ---------- 会员页 ---------- */
.vip-hero { background: var(--grad-hero); color: #fff; text-align: center; padding: 66px 0 60px; }
.vip-hero h1 { font-size: 36px; font-weight: 800; margin-bottom: 12px; }
.vip-hero p { opacity: .85; font-size: 16px; }
.vip-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 860px; margin: -30px auto 40px; padding: 0 4%; position: relative; z-index: 2; }
.plan {
  background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg); padding: 34px 34px 30px;
  border: 2px solid transparent; position: relative;
}
.plan.hot { border-color: var(--primary); }
.plan .ribbon {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff;
  font-size: 12.5px; font-weight: 700; padding: 5px 18px; border-radius: 999px; letter-spacing: 1px;
}
.plan h3 { font-size: 19px; margin-bottom: 4px; }
.plan .sub { color: var(--ink-3); font-size: 13px; }
.plan .amount { font-size: 44px; font-weight: 800; color: var(--primary-dark); margin: 16px 0 2px; }
.plan .amount small { font-size: 15px; color: var(--ink-3); font-weight: 500; }
.plan .amount.no { color: var(--ink-2); text-decoration: none; }
.plan ul { list-style: none; margin: 18px 0 24px; }
.plan li { padding: 7px 0; font-size: 14.5px; color: var(--ink-2); display: flex; gap: 10px; align-items: center; }
.plan li.no { opacity: .45; }
.plan li .tick { width: 19px; height: 19px; border-radius: 50%; background: var(--primary-bg); color: var(--primary-dark); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.plan li.no .tick { background: #eef1f2; color: #9aa8ad; }
.vip-faq { max-width: 860px; margin: 0 auto 60px; padding: 0 4%; }
.vip-faq h2 { font-size: 21px; margin-bottom: 18px; }
.faq-item { background: #fff; border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; box-shadow: var(--shadow); }
.faq-item b { display: block; margin-bottom: 5px; font-size: 15px; }
.faq-item p { font-size: 14px; color: var(--ink-2); }

/* ---------- 认证页 ---------- */
.auth-wrap { min-height: calc(100vh - 240px); display: grid; place-items: center; padding: 54px 0; }
.auth-card {
  width: 420px; max-width: 94vw; background: #fff; border-radius: 20px;
  box-shadow: var(--shadow-lg); padding: 40px 38px; border-top: 4px solid var(--primary);
}
.auth-card h1 { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.auth-card .sub { color: var(--ink-3); font-size: 14px; margin-bottom: 26px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.field input {
  width: 100%; padding: 12px 15px; border: 1.5px solid var(--line); border-radius: 11px;
  font-size: 15px; outline: none; transition: all .18s; background: var(--bg);
}
.field input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(10,166,192,.12); }
.auth-card .primary-btn { width: 100%; padding: 13px; font-size: 15.5px; margin-top: 8px; }
.auth-swap { text-align: center; margin-top: 20px; font-size: 14px; color: var(--ink-3); }
.auth-swap a { color: var(--primary-dark); font-weight: 600; }
.demo-tip { margin-top: 16px; font-size: 12.5px; background: var(--primary-bg); border-radius: 9px; padding: 9px 13px; color: var(--ink-2); }

/* ---------- 支付页 ---------- */
.pay-wrap { max-width: 900px; margin: 40px auto 60px; }
.pay-card { background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
.pay-head { padding: 24px 30px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.pay-head .t { font-size: 18px; font-weight: 700; }
.pay-head .amt { font-size: 26px; font-weight: 800; color: var(--accent); }
.pay-body { display: flex; gap: 0; }
.pay-methods { width: 240px; border-right: 1px solid var(--line); padding: 22px 18px; }
.pm {
  display: flex; align-items: center; gap: 12px; padding: 14px 15px; border-radius: 12px;
  cursor: pointer; border: 1.5px solid transparent; margin-bottom: 10px; transition: all .16s; font-weight: 600;
}
.pm:hover { background: var(--bg); }
.pm.active { border-color: var(--primary); background: var(--primary-bg); }
.pm .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; }
.pm-alipay .ic { background: #1677ff; }
.pm-wechat .ic { background: #07c160; }
.pm small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; }
.pay-qr { flex: 1; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 380px; }
.qr-box { padding: 14px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; display: grid; place-items: center; min-width: 248px; min-height: 248px; }
.qr-box img { max-width: 220px; max-height: 220px; width: auto; height: auto; display: block; object-fit: contain; }
.pay-hint { color: var(--ink-3); font-size: 13.5px; text-align: center; }
.pay-status { display: flex; align-items: center; gap: 8px; color: var(--primary-dark); font-size: 14px; }
.spin { width: 15px; height: 15px; border: 2.5px solid var(--primary-bg); border-top-color: var(--primary); border-radius: 50%; animation: rot .8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.mock-tip { background: #fff8ec; border: 1px dashed #f0c987; color: #8a5a17; border-radius: 12px; padding: 12px 18px; font-size: 13px; text-align: center; max-width: 340px; }

/* 线下转账付款指引 */
.pay-offline { margin: 0 30px 26px; border: 1.5px dashed var(--line); border-radius: 14px; padding: 16px 20px; background: var(--bg-2, #fafbfc); }
.pay-offline .po-title { font-weight: 700; font-size: 14.5px; color: var(--ink-1); margin-bottom: 8px; }
.pay-offline .po-body { font-size: 13px; color: var(--ink-2); line-height: 1.9; white-space: pre-line; }
.pay-offline .po-order { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--ink-3); }
.pay-offline .po-order b { color: var(--primary-dark); font-size: 13.5px; letter-spacing: .3px; user-select: all; }

/* ---------- 订单结果 / 个人中心 ---------- */
.result-wrap { max-width: 680px; margin: 60px auto 80px; text-align: center; }
.result-icon { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 20px; display: grid; place-items: center; font-size: 40px; }
.result-icon.ok { background: #e5f8ee; color: #1fa860; }
.result-icon.wait { background: var(--primary-bg); color: var(--primary-dark); }
.result-wrap h1 { font-size: 26px; margin-bottom: 10px; }
.result-wrap p { color: var(--ink-2); margin-bottom: 26px; }
.result-actions { display: flex; gap: 14px; justify-content: center; }

.me-wrap { display: flex; gap: 26px; margin: 34px 0 60px; align-items: flex-start; }
.me-side { width: 280px; flex-shrink: 0; }
.me-card { background: var(--grad-me-card); border-radius: 18px; color: #fff; padding: 26px 24px; box-shadow: var(--shadow-lg); }
.me-card .avatar { width: 54px; height: 54px; font-size: 22px; margin-bottom: 12px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); }
.me-card h2 { font-size: 20px; }
.me-vip-state { margin-top: 14px; font-size: 13.5px; background: rgba(255,255,255,.1); border-radius: 11px; padding: 12px 14px; line-height: 1.7; }
.me-vip-state b { color: #ffd98e; }
.me-stats { display: flex; gap: 10px; margin-top: 16px; }
.me-stats div { flex: 1; background: rgba(255,255,255,.1); border-radius: 11px; padding: 10px 6px; text-align: center; }
.me-stats b { display: block; font-size: 19px; }
.me-stats span { font-size: 12px; opacity: .75; }
.me-nav { background: #fff; border-radius: 14px; box-shadow: var(--shadow); margin-top: 16px; overflow: hidden; }
.me-nav a { display: block; padding: 13px 20px; font-size: 14.5px; color: var(--ink-2); border-bottom: 1px solid var(--line); font-weight: 500; }
.me-nav a:last-child { border-bottom: none; }
.me-nav a:hover, .me-nav a.active { background: var(--primary-bg); color: var(--primary-dark); font-weight: 600; }
.me-main { flex: 1; min-width: 0; }
.me-panel { background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 24px 26px; }
.me-panel h3 { font-size: 17px; margin-bottom: 16px; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; padding: 10px 12px; color: var(--ink-3); font-weight: 600; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: #fafdfe; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 999px; }
.badge-paid { background: #e5f8ee; color: #177245; }
.badge-pending { background: #fff4e2; color: #a3722a; }
.badge-closed { background: #f0f3f4; color: #7c8b90; }
.badge-vip { background: #fdf3e3; color: #a3722a; }
.badge-image, .badge-font { background: var(--primary-bg); color: var(--primary-dark); }
.badge-font { background: #eef0fb; color: #4a5bbf; }
.empty { text-align: center; color: var(--ink-3); padding: 44px 0; font-size: 14px; }
.empty .big { font-size: 42px; margin-bottom: 10px; }

/* ---------- 404 ---------- */
.nf-wrap { text-align: center; padding: 90px 0 110px; }
.nf-wrap .code { font-size: 90px; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--primary-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf-wrap p { color: var(--ink-2); margin: 8px 0 26px; }

/* ---------- 页脚 ---------- */
.footer { background: #04222c; color: #9fc3cd; margin-top: 70px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 34px 0; flex-wrap: wrap; }
.footer-brand p { font-size: 13px; margin-top: 6px; color: #6f96a1; }
.footer-links { display: flex; gap: 22px; font-size: 14px; }
.footer-links a:hover { color: #fff; }
.footer-links .footer-admin-link { color: #6f96a1; border: 1px solid rgba(159,195,205,.25); border-radius: 999px; padding: 3px 12px; transition: all .2s; }
.footer-links .footer-admin-link:hover { color: #fff; border-color: rgba(45,212,230,.6); background: rgba(45,212,230,.12); }
.footer-copy { font-size: 13px; color: #6f96a1; }

/* ---------- 联系我们页 ---------- */
.ct-hero {
  background: radial-gradient(900px 380px at 88% -60%, rgba(18,194,233,.35), transparent 60%),
              radial-gradient(700px 420px at -5% 120%, rgba(10,166,192,.25), transparent 55%),
              var(--grad-hero);
  color: #fff; padding: 86px 0; position: relative; overflow: hidden;
}
.ct-hero-inner { display: flex; align-items: center; gap: 58px; }
.ct-hero-text { flex: 1 1 0; min-width: 0; text-align: left; }
.ct-hero h1 { font-size: 44px; font-weight: 800; letter-spacing: 2px; margin: 16px 0 14px; text-align: left; }
.ct-hero .sub { font-size: 16px; line-height: 1.75; opacity: .88; max-width: 520px; margin: 0; }
.ct-hero-nav { display: flex; gap: 12px; margin-top: 30px; }
.ct-hero-nav a {
  padding: 10px 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.38);
  color: #fff; font-size: 14px; font-weight: 500; transition: all .2s; backdrop-filter: blur(4px);
}
.ct-hero-nav a:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* 轮播（hero 右侧，图片完整呈现） */
.ct-hero-slide { flex: 0 0 47%; max-width: 47%; }
.ct-carousel {
  position: relative; border-radius: 22px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(3, 34, 44, .45); background: #0b3a49; min-height: 240px;
  border: 1px solid rgba(255,255,255,.16);
}
.ct-slide { display: none; }
.ct-slide.active { display: block; animation: ctFadeIn .65s ease; }
.ct-slide img { width: 100%; height: auto; display: block; }
@keyframes ctFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ct-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(6,48,63,.45); color: #fff; cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: all .25s; backdrop-filter: blur(6px);
}
.ct-carousel:hover .ct-arrow { opacity: 1; }
.ct-arrow:hover { background: rgba(6,48,63,.75); }
.ct-arrow.prev { left: 14px; }
.ct-arrow.next { right: 14px; }
.ct-dots {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3;
}
.ct-dots span {
  width: 24px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.45);
  cursor: pointer; transition: all .3s;
}
.ct-dots span.active { background: #fff; width: 38px; }

/* 章节通用 */
.ct-section { padding: 66px 0; }
.ct-section.alt { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ct-eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 3px;
  color: var(--primary-dark); background: var(--primary-bg);
  padding: 5px 16px; border-radius: 999px;
}

/* 图库简介 */
.ct-about { display: flex; gap: 58px; align-items: center; }
.ct-about-text { flex: 1.35; }
.ct-about h2, .ct-sec-head h2 { font-size: 30px; font-weight: 800; margin: 14px 0 18px; letter-spacing: 1px; }
.ct-intro { color: var(--ink-2); font-size: 15px; line-height: 1.95; white-space: pre-wrap; margin-bottom: 26px; }
.ct-about-stats { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-about-stats > div {
  background: #fff; border-radius: 16px; box-shadow: var(--shadow);
  padding: 28px 20px 24px; text-align: center; border: 1px solid var(--line);
  transition: all .22s;
}
.ct-about-stats > div:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ct-about-stats b {
  display: block; font-size: 30px; font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ct-about-stats span { font-size: 13px; color: var(--ink-3); }

/* 服务板块 */
.ct-sec-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.ct-sec-head p { color: var(--ink-2); font-size: 15px; }
.ct-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ct-svc-card {
  position: relative; background: var(--card); border-radius: 18px; padding: 30px 26px 26px;
  box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; transition: all .25s;
}
.ct-svc-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  opacity: 0; transition: opacity .25s;
}
.ct-svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.ct-svc-card:hover::before { opacity: 1; }
.ct-num {
  position: absolute; top: 14px; right: 18px; font-size: 46px; font-weight: 800;
  color: var(--primary-bg); letter-spacing: -2px; user-select: none;
}
.ct-svc-ic {
  width: 58px; height: 58px; border-radius: 16px; background: var(--primary-bg);
  display: grid; place-items: center; margin-bottom: 20px; color: var(--primary-dark);
  transition: all .25s; font-size: 27px; line-height: 1;
}
.ct-svc-card:hover .ct-svc-ic {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff;
  transform: scale(1.06);
}
.ct-svc-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.ct-svc-card p { font-size: 13.8px; color: var(--ink-2); line-height: 1.85; min-height: 102px; }

/* 联系方式 */
.ct-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 930px; margin: 0 auto; }
.ct-contact-card {
  background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); padding: 38px 36px 32px;
  text-align: center; border: 1px solid var(--line); position: relative; overflow: hidden;
  transition: all .25s;
}
.ct-contact-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}
.ct-contact-card:hover { transform: translateY(-4px); }
.ct-ct-ic {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 16px;
  background: var(--primary-bg); color: var(--primary-dark); display: grid; place-items: center;
}
.ct-contact-card h3 { font-size: 19px; margin-bottom: 6px; }
.ct-qr {
  display: inline-block; padding: 12px; background: #fff; border: 1.5px solid var(--line);
  border-radius: 16px; margin: 16px auto 14px; box-shadow: 0 4px 14px rgba(6,62,77,.08);
}
.ct-qr img { width: 188px; height: 188px; border-radius: 8px; object-fit: cover; }
.ct-qr-empty { width: 212px; height: 212px; display: grid; place-items: center; border-style: dashed; }
.ct-qr-empty span { color: var(--ink-3); font-size: 14px; }
.ct-ct-tip { font-size: 14.5px; color: var(--ink-2); margin: 8px 0 4px; }
.ct-contact-card small { color: var(--ink-3); font-size: 12.5px; }
.ct-mail {
  display: inline-block; font-size: 21px; font-weight: 700; color: var(--primary-dark);
  margin: 18px 0 2px; word-break: break-all; transition: color .2s;
}
.ct-mail:hover { color: var(--primary); }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .detail-wrap { flex-direction: column; margin-top: 24px; }
  .detail-preview { min-height: 0; }
  .detail-preview img { position: static; width: 100%; height: auto; aspect-ratio: 3/4; }
  .detail-side { min-width: 0; width: 100%; }
  .ct-hero-inner { gap: 40px; }
  .ct-hero h1 { font-size: 38px; }
}
@media (max-width: 920px) {
  .ct-services { grid-template-columns: 1fr 1fr; }
  .ct-about { flex-direction: column; gap: 36px; }
  .ct-about-text { width: 100%; }
  .ct-contact-grid { grid-template-columns: 1fr; }
  .ct-hero-inner { flex-direction: column; gap: 34px; }
  .ct-hero-text { text-align: center; }
  .ct-hero .sub { margin: 0 auto; }
  .ct-hero-nav { justify-content: center; }
  .ct-hero-slide { flex-basis: 100%; max-width: 620px; width: 100%; }
}
@media (max-width: 860px) {
  .main-nav, .searchbox { display: none; }
  .menu-toggle { display: grid; }
  .topbar-inner { justify-content: space-between; }
  .hero-inner { flex-direction: column; }
  .hero h1 { font-size: 30px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .vip-plans { grid-template-columns: 1fr; }
  .pay-body { flex-direction: column; }
  .pay-methods { width: 100%; border-right: none; border-bottom: 1px solid var(--line); display: flex; }
  .pm { margin: 0 8px 0 0; flex: 1; }
  .me-wrap { flex-direction: column; }
  .me-side { width: 100%; }
  .footer-inner { flex-direction: column; text-align: center; }
  .ct-hero { padding: 56px 0; }
  .ct-hero h1 { font-size: 32px; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .container { width: 96%; }
  .ct-services { grid-template-columns: 1fr; }
  .ct-svc-card p { min-height: 0; }
  .ct-about-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ct-carousel { min-height: 180px; }
  .ct-arrow { width: 36px; height: 36px; }
}

/* ---------- 作品入驻分成页 ---------- */
.cr-hero {
  background: var(--grad-hero);
  color: #fff; padding: 88px 0 84px; position: relative; overflow: hidden; text-align: center;
}
.cr-hero-inner { max-width: 760px; margin: 0 auto; }
.cr-hero .hero-kicker { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); }
.cr-hero h1 { font-size: 46px; font-weight: 800; letter-spacing: 2px; margin: 16px 0 14px; }
.cr-hero h1 em { font-style: normal; background: linear-gradient(90deg, #ffd97a, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cr-hero .sub { font-size: 16px; line-height: 1.85; opacity: .9; max-width: 620px; margin: 0 auto 0; }
.cr-hero-nav { display: flex; gap: 12px; margin-top: 32px; justify-content: center; flex-wrap: wrap; }
.cr-hero-nav a {
  padding: 10px 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.38);
  color: #fff; font-size: 14px; font-weight: 500; transition: all .2s; backdrop-filter: blur(4px);
}
.cr-hero-nav a:hover { background: rgba(255,255,255,.16); border-color: #fff; }

/* 四步入驻流程 */
.cr-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cr-step {
  position: relative; background: var(--card); border-radius: 18px; padding: 30px 26px 26px;
  box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; transition: all .25s;
}
.cr-step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #f7b733, #ff8a3d); opacity: 0; transition: opacity .25s;
}
.cr-step:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cr-step:hover::before { opacity: 1; }
.cr-step-num {
  position: absolute; top: 14px; right: 18px; font-size: 46px; font-weight: 800;
  color: rgba(255,138,61,.12); letter-spacing: -2px; user-select: none;
}
.cr-step-ic {
  width: 58px; height: 58px; border-radius: 16px; background: rgba(255,138,61,.1);
  display: grid; place-items: center; margin-bottom: 20px; color: #ff8a3d;
  transition: all .25s; font-size: 27px; line-height: 1;
}
.cr-step:hover .cr-step-ic {
  background: linear-gradient(135deg, #f7b733, #ff8a3d); color: #fff; transform: scale(1.06);
}
.cr-step h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.cr-step p { font-size: 13.8px; color: var(--ink-2); line-height: 1.85; }

/* 入驻要求 */
.cr-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1080px; margin: 0 auto; }
.cr-rule-card {
  background: var(--card); border-radius: 18px; padding: 36px 32px; box-shadow: var(--shadow);
  border: 1px solid var(--line); transition: all .25s; text-align: center;
}
.cr-rule-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(255,138,61,.3); }
.cr-rule-ic {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 22px;
  background: linear-gradient(135deg, rgba(247,183,51,.15), rgba(255,138,61,.15));
  display: grid; place-items: center; color: #ff8a3d;
}
.cr-rule-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.cr-rule-card p { font-size: 14px; color: var(--ink-2); line-height: 1.9; }

/* 分成收益 */
.cr-share-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: center; max-width: 1080px; margin: 0 auto; }
.cr-share-visual { text-align: center; }
.cr-share-ring { position: relative; display: inline-block; }
.cr-share-pct {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.cr-share-pct b { font-size: 52px; font-weight: 800; line-height: 1; background: linear-gradient(135deg, #f7b733, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cr-share-pct b span { font-size: 28px; }
.cr-share-pct > span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 6px; letter-spacing: 1px; }
.cr-share-note { margin-top: 22px; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.cr-share-note b { color: #ff8a3d; }

.cr-share-rules { display: grid; gap: 18px; }
.cr-share-item { display: flex; gap: 16px; align-items: flex-start; }
.cr-share-ic {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,138,61,.1); color: #ff8a3d; display: grid; place-items: center;
}
.cr-share-item h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.cr-share-item p { font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }

/* 响应式 */
@media (max-width: 900px) {
  .cr-flow { grid-template-columns: 1fr 1fr; }
  .cr-rules { grid-template-columns: 1fr; }
  .cr-share-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .cr-hero { padding: 60px 0 56px; }
  .cr-hero h1 { font-size: 34px; }
  .cr-flow { grid-template-columns: 1fr; }
  .cr-share-pct b { font-size: 44px; }
}