/* ============================================================================
 * 造字咖 · 会员 / 积分 / 充值 / 后台管理 样式
 * 只新增类名，完全不影响既有 style.css 的规则。
 * ==========================================================================*/

/* ---- 顶部用户区 ---- */
.user-area { display: flex; align-items: center; gap: 10px; flex: none; margin-left: 24px; }
.ua-login {
  border: 1px solid var(--primary); color: var(--primary); background: #fff;
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}
.ua-login:hover { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(66,147,229,.35); }
.ua-points {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid #ffe0a3; background: linear-gradient(180deg, #fffaf0, #fff3d8);
  color: #a06b00; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
}
.ua-points:hover { border-color: #f5c45e; }
.ua-pts-label { font-weight: 500; color: #b98a2e; }
.ua-user { position: relative; }
.ua-name {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 7px 12px; border-radius: 999px; font-size: 14px; font-weight: 600;
}
.ua-name:hover { border-color: var(--primary); color: var(--primary); }
.ua-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.ua-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 156px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column;
}
.ua-menu button {
  border: none; background: transparent; text-align: left; padding: 9px 12px;
  border-radius: 8px; font-size: 14px; color: var(--text-2); cursor: pointer;
}
.ua-menu button:hover { background: var(--primary-soft); color: var(--primary); }
.ua-menu button.danger:hover { background: #fdeceb; color: var(--danger); }

/* ---- 通用弹窗（复用 .modal / .modal-mask） ---- */
.zzk-modal { width: 460px; padding: 24px; position: relative; display: block; }
.zzk-close {
  position: absolute; top: 14px; right: 14px; border: none; background: var(--surface-2);
  color: var(--text-2); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.zzk-close:hover { background: var(--border); color: var(--text); }
.zzk-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text); }
.zzk-tabs { display: flex; gap: 6px; background: var(--surface-2); padding: 4px; border-radius: 12px; margin-bottom: 18px; }
.zzk-tabs button {
  flex: 1; border: none; background: transparent; padding: 9px; border-radius: 9px;
  font-size: 15px; font-weight: 600; color: var(--text-2); cursor: pointer;
}
.zzk-tabs button.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
.zzk-form { display: flex; flex-direction: column; gap: 14px; }
.zzk-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.zzk-field > span { font-weight: 600; }
.zzk-field input, .zzk-field textarea {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  font-size: 14px; background: var(--surface); color: var(--text); width: 100%; font-family: inherit;
}
.zzk-field input:focus, .zzk-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(66,147,229,.12); }
.zzk-primary {
  border: none; background: linear-gradient(135deg, #4293e5, #2e7cc9); color: #fff;
  padding: 12px 18px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(66,147,229,.32);
}
.zzk-primary:hover { filter: brightness(1.06); }
.zzk-primary:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.zzk-primary.sm { padding: 9px 14px; font-size: 13.5px; border-radius: 10px; box-shadow: none; }
.zzk-ghost {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  padding: 9px 14px; border-radius: 10px; font-size: 13.5px; cursor: pointer;
}
.zzk-ghost:hover { border-color: var(--primary); color: var(--primary); }
.zzk-ghost.sm { padding: 8px 12px; font-size: 13px; }
.zzk-hint { font-size: 12px; color: var(--text-3); line-height: 1.6; }
.zzk-err { background: #fdeceb; color: var(--danger); font-size: 13px; padding: 8px 12px; border-radius: 8px; }

/* ---- 充值弹窗 ---- */
.pay-need { background: #fff6e5; color: #a06b00; font-size: 13px; padding: 9px 12px; border-radius: 9px; margin-bottom: 12px; }
.pay-rate { font-size: 13.5px; color: var(--text-2); margin-bottom: 12px; }
.pay-rate b, .pay-need b { color: var(--primary); }
.pay-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pay-presets button {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  padding: 7px 14px; border-radius: 999px; font-size: 13px; cursor: pointer;
}
.pay-presets button:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.pay-calc { font-size: 14px; color: var(--text-2); margin: 12px 0; }
.pay-calc b { color: var(--danger); font-size: 18px; }
.pay-qr-wrap { text-align: center; margin: 14px 0; }
.pay-qr { width: 200px; height: 200px; object-fit: contain; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.pay-qr-empty {
  display: inline-flex; align-items: center; justify-content: center; flex-direction: column;
  border: 2px dashed var(--border); color: var(--text-3); font-size: 13px; line-height: 1.7; padding: 20px;
}
.pay-qr-empty small { font-size: 11.5px; }
.pay-notice { font-size: 12.5px; color: var(--text-3); margin-top: 10px; line-height: 1.7; }
.pay-order-box { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--surface-2); display: flex; flex-direction: column; gap: 12px; }
.pay-order-head { font-size: 13.5px; font-weight: 700; color: var(--success); }
.pay-order-line { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-2); }
.pay-order-line b.hl { color: var(--primary); }

/* ---- 会员中心 ---- */
#viewAccount, #viewAdmin { flex: 1 0 auto; }
.page-wrap { max-width: 1180px; margin: 0 auto; padding: 26px 20px 40px; }
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.acc-hello { font-size: 20px; font-weight: 700; color: var(--text); }
.acc-points-card {
  display: flex; align-items: center; gap: 16px; padding: 18px 26px; border-radius: 16px;
  background: linear-gradient(135deg, #4293e5, #2e7cc9); color: #fff;
  box-shadow: 0 10px 28px rgba(66,147,229,.32);
}
.acc-points-num { font-size: 36px; font-weight: 800; line-height: 1; }
.acc-points-label { font-size: 13px; opacity: .85; margin-right: 8px; }
.acc-points-card .zzk-primary { background: #fff; color: var(--primary); box-shadow: none; }
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.acc-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); }
.acc-panel h4 { font-size: 15px; margin-bottom: 12px; color: var(--text); }
.acc-list { display: flex; flex-direction: column; max-height: 420px; overflow: auto; }
.acc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.acc-row:last-child { border-bottom: none; }
.acc-row-main { min-width: 0; }
.acc-row-title { font-size: 13.5px; color: var(--text); font-weight: 600; }
.acc-row-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; word-break: break-all; }
.acc-row-delta { font-size: 15px; font-weight: 800; flex: none; }
.acc-row-delta.up { color: var(--success); }
.acc-row-delta.down { color: var(--danger); }
.acc-badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; flex: none; font-weight: 600; }
.acc-badge.pending { background: #fff4e0; color: #b47b00; }
.acc-badge.confirmed { background: var(--success-soft); color: var(--success); }
.acc-badge.rejected { background: #fdeceb; color: var(--danger); }
.acc-empty, .acc-guest { color: var(--text-3); font-size: 14px; padding: 20px 0; text-align: center; }

/* ---- 后台管理 ---- */
.admin-login {
  max-width: 380px; margin: 40px auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 28px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 14px;
}
.admin-login h3 { font-size: 18px; text-align: center; margin-bottom: 6px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.admin-title { font-size: 20px; font-weight: 800; color: var(--text); }
.admin-who { font-size: 13.5px; color: var(--text-2); display: flex; align-items: center; gap: 10px; }
.admin-who button { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.admin-who button:hover { border-color: var(--danger); color: var(--danger); }
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.admin-tabs button {
  border: none; background: transparent; padding: 11px 16px; font-size: 14.5px; font-weight: 600;
  color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tabs button:hover { color: var(--primary); }
.admin-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); }
.admin-card.warn { border-color: #f5c45e; background: #fffaf0; }
.admin-card-val { font-size: 24px; font-weight: 800; color: var(--text); }
.admin-card-label { font-size: 13px; color: var(--text-3); margin-top: 6px; }
.admin-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-toolbar input[type="text"] { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; min-width: 240px; }
.admin-seg { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 10px; }
.admin-seg button { border: none; background: transparent; padding: 7px 14px; border-radius: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.admin-seg button.active { background: var(--surface); color: var(--primary); font-weight: 700; box-shadow: var(--shadow); }
.admin-list { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 6px 14px; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th { text-align: left; padding: 11px 8px; color: var(--text-3); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table td { padding: 11px 8px; border-bottom: 1px dashed var(--border); color: var(--text-2); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.admin-table .hl { color: var(--primary); }
.admin-table .muted { color: var(--text-3); font-size: 12.5px; }
.admin-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-ops button { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.admin-ops button:hover { border-color: var(--primary); color: var(--primary); }
.admin-ops button.ok { border-color: var(--success); color: var(--success); }
.admin-ops button.ok:hover { background: var(--success-soft); }
.admin-ops button.danger:hover { border-color: var(--danger); color: var(--danger); background: #fdeceb; }
.admin-empty { padding: 28px; text-align: center; color: var(--text-3); font-size: 14px; }
.admin-form { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; max-width: 620px; box-shadow: var(--shadow); }
.admin-form h4 { font-size: 14px; color: var(--text); margin: 16px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.admin-form h4:first-child { margin-top: 0; }
.admin-form .zzk-field { margin-bottom: 12px; }
.cfg-qr { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.cfg-qr-preview { width: 120px; height: 120px; border: 1px dashed var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 12px; flex: none; overflow: hidden; background: var(--surface-2); }
.cfg-qr-preview img { width: 100%; height: 100%; object-fit: contain; }
.admin-pw { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.admin-pw .zzk-field { flex: 1; min-width: 150px; margin-bottom: 0; }

@media (max-width: 900px) {
  .acc-grid { grid-template-columns: 1fr; }
  .user-area { margin-left: 0; }
}

/* ============================================================================
 * 字体商城（艺术家字体库） · 列表 / 详情 / 购买 / 后台
 * ==========================================================================*/
.shop-root { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }
.shop-loading, .shop-empty { padding: 60px 20px; text-align: center; color: var(--text-3); font-size: 14px; }

.shop-hero {
  background: linear-gradient(120deg, #eaf3ff 0%, #f6faff 45%, #fff6e8 100%);
  border: 1px solid #dfeafe; border-radius: 18px; padding: 30px 32px; margin-bottom: 16px;
}
.shop-hero h2 { font-size: 26px; font-weight: 800; color: #1b3b63; margin: 0 0 10px; letter-spacing: .5px; }
.shop-hero p { color: #4a6b8a; font-size: 14.5px; line-height: 1.7; margin: 0 0 14px; max-width: 760px; }
.shop-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.shop-hero-tags span {
  background: rgba(255,255,255,.85); border: 1px solid #cfe2fb; color: #2f6bb0;
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
}

/* ---------- 第一栏：轮播广告位 ---------- */
.shop-ads {
  position: relative; height: 210px; margin-bottom: 20px;
  border-radius: 18px; overflow: hidden; background: #eef3fa; border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.shop-ad-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s; cursor: pointer;
}
.shop-ad-slide.active { opacity: 1; visibility: visible; }
.shop-ad-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-ad-poster {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: #fff; text-align: center; padding: 0 30px;
}
.shop-ad-poster.p0 { background: linear-gradient(120deg, #2f6bb0 0%, #4293e5 55%, #22b3e6 100%); }
.shop-ad-poster.p1 { background: linear-gradient(120deg, #b0472f 0%, #e8683f 55%, #f0a11a 100%); }
.shop-ad-poster.p2 { background: linear-gradient(120deg, #1f3b63 0%, #3a5b8c 55%, #7d9ecb 100%); }
.shop-ad-poster b { font-size: 25px; font-weight: 800; letter-spacing: .6px; text-shadow: 0 2px 10px rgba(0,0,0,.18); }
.shop-ad-poster span { font-size: 14.5px; opacity: .94; }
.shop-ad-dots {
  position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; z-index: 2;
}
.shop-ad-dots i {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.6);
  box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: pointer; transition: width .2s, background .2s;
}
.shop-ad-dots i.active { background: #fff; width: 22px; border-radius: 99px; }
@media (max-width: 720px) { .shop-ads { height: 150px; } .shop-ad-poster b { font-size: 19px; } }

/* ---------- 第二栏：编辑推荐（两格 1:2 横版大图，不轮播，与大图区左右对齐） ---------- */
.shop-rec { margin-bottom: 20px; }
.shop-rec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.shop-rec-head b { font-size: 18px; color: #1b3b63; letter-spacing: .3px; }
.shop-rec-head span { font-size: 13px; color: var(--text-3); }
.shop-rec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.shop-rec-cell {
  border: 1px solid var(--border); background: var(--surface); border-radius: 16px; overflow: hidden;
  padding: 0; cursor: pointer; text-align: left; transition: box-shadow .2s, transform .2s, border-color .2s;
}
.shop-rec-cell:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: #cfe2fb; }
.shop-rec-visual {
  position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1;
  background: linear-gradient(180deg, #fbfcfe, #f3f7fc); overflow: hidden;
}
.shop-rec-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-rec-ph { font-size: 34px; color: #22303f; padding: 0 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-rec-name {
  display: block; padding: 12px 16px; font-size: 16px; font-weight: 600; color: #22303f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 860px) { .shop-rec-grid { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- 第三栏：永久会员推荐（对角渐变背景，颜色后台可改；保留文字动效） ---------- */
.shop-member {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px;
  height: 80px; padding: 0 26px; margin-bottom: 20px; border-radius: 16px;
  background: linear-gradient(135deg, var(--mem-from, #ff5a1f) 0%, var(--mem-to, #d92b1f) 100%);
  box-shadow: 0 10px 26px rgba(23, 33, 51, .12);
}
.shop-member-txt { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.shop-member-slogan {
  display: inline-block;
  font-family: "Source Han Sans SC", "Noto Sans SC", "思源黑体", "PingFang SC", "DengXian", "等线",
               "WenQuanYi Micro Hei", "Hiragino Sans GB", sans-serif;
  font-size: 30px; font-weight: 900; letter-spacing: .6px; line-height: 1.2;
  background: linear-gradient(100deg, #fff 0%, #fff 28%, #ffe9a8 40%, #ffd76a 46%, #fff6de 50%, #ffd76a 55%, #ffe9a8 61%, #fff 74%, #fff 100%);
  background-size: 240% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 12px rgba(120, 25, 0, .28);
  animation: shopMemberShine 2.3s linear infinite, shopMemberRise .6s cubic-bezier(.2,.8,.25,1) both,
             shopMemberGlow 2.3s ease-in-out infinite;
}
@keyframes shopMemberShine { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
@keyframes shopMemberRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes shopMemberGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 214, 106, 0)); }
  50% { filter: drop-shadow(0 0 9px rgba(255, 214, 106, .85)); }
}
@media (prefers-reduced-motion: reduce) {
  .shop-member-slogan { animation: none; -webkit-text-fill-color: #fff; color: #fff; filter: none; }
}
.shop-member-right { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; flex: none; }
.shop-member-right em {
  font-style: normal; font-size: 22px; font-weight: 900; color: #fff;
  letter-spacing: .4px;
}
.shop-member-btn {
  border: none; cursor: pointer; white-space: nowrap;
  font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: .8px;
  padding: 10px 26px; border-radius: 999px; color: #8a3d00;
  background: linear-gradient(120deg, #ffe9a8 0%, #ffc23e 52%, #f0a11a 100%);
  box-shadow: none;
  transition: transform .16s ease, filter .16s ease;
}
.shop-member-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.shop-member-btn:active { transform: translateY(0); filter: brightness(.98); }
@media (max-width: 860px) {
  .shop-member { height: auto; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .shop-member-slogan { font-size: 18px; }
  .shop-member-btn { padding: 9px 22px; font-size: 13px; }
  .shop-member-right em { font-size: 18px; }
}

.shop-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.shop-search { display: flex; gap: 8px; flex: none; }
.shop-search input {
  width: 280px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 14px; color: var(--text); background: var(--surface); outline: none;
}
.shop-search input:focus { border-color: var(--primary); }
.shop-tagbar { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-tag {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  padding: 6px 13px; border-radius: 999px; font-size: 13px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
}
.shop-tag i { font-style: normal; font-size: 11px; color: var(--text-3); }
.shop-tag:hover { border-color: var(--primary); color: var(--primary); }
.shop-tag.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.shop-tag.active i { color: rgba(255,255,255,.8); }

.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.shop-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  cursor: pointer; transition: box-shadow .2s, transform .2s, border-color .2s;
}
.shop-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: #cfe2fb; }
.shop-card-visual {
  position: relative; aspect-ratio: 2 / 1; height: auto; background: linear-gradient(180deg, #fbfcfe, #f3f7fc);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.shop-card-cover { width: 100%; height: 100%; object-fit: cover; }
.shop-card-text {
  font-size: 30px; line-height: 1.3; color: #22303f; text-align: center; padding: 0 14px;
  max-height: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%;
}
.shop-own {
  position: absolute; top: 10px; right: 10px; background: var(--success); color: #fff;
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px; font-weight: 600;
}
.shop-card-body { padding: 14px 16px 16px; }
.shop-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.shop-card-top h3 { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.shop-price { font-size: 14px; font-weight: 800; color: #d48806; flex: none; }
.shop-price i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-3); }
.shop-price.free { color: var(--success); }
.shop-card-meta { display: flex; gap: 12px; font-size: 12.5px; color: var(--text-3); margin-bottom: 10px; }
.shop-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.shop-card-tags i {
  font-style: normal; font-size: 11.5px; color: #2f6bb0; background: #eef5ff;
  border-radius: 6px; padding: 2px 8px;
}

.shop-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.shop-pager button {
  min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); border-radius: 9px; cursor: pointer; font-size: 13.5px;
}
.shop-pager button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.shop-pager button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.shop-pager button:disabled { opacity: .45; cursor: not-allowed; }
.shop-pager-gap { color: var(--text-3); }
.shop-pager-info { margin-left: 8px; font-size: 13px; color: var(--text-3); }

/* ---- 详情 ---- */
.shop-back {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  padding: 7px 14px; border-radius: 9px; cursor: pointer; font-size: 13.5px; margin-bottom: 16px;
}
.shop-back:hover { border-color: var(--primary); color: var(--primary); }
.shop-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.shop-stage {
  background: linear-gradient(180deg, #fbfcfe, #f2f7fd); border: 1px solid var(--border);
  border-radius: 16px; min-height: 260px; display: flex; align-items: center; justify-content: center;
  padding: 26px 20px; overflow: hidden;
}
.shop-stage-text { font-size: 64px; line-height: 1.25; color: #1f2430; text-align: center; word-break: break-all; }
.shop-detail-cover {
  margin-top: 14px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #fbfcfe, #f3f7fc);
}
.shop-detail-cover img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.shop-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 14px 0 18px; }
.shop-controls input[type="text"] {
  flex: 1; min-width: 200px; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 14px; outline: none; background: var(--surface); color: var(--text);
}
.shop-controls input[type="text"]:focus { border-color: var(--primary); }
.shop-slider, .shop-color { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.shop-slider input[type="range"] { width: 130px; }
.shop-slider b { color: var(--primary); min-width: 30px; }
.shop-color input[type="color"] { width: 34px; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: none; padding: 0; cursor: pointer; }
.shop-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.shop-meta { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; }
.shop-meta span { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
.shop-meta b { font-size: 14px; color: var(--text); font-weight: 600; word-break: break-all; }
.shop-desc { font-size: 14px; color: var(--text-2); line-height: 1.8; margin: 0 0 16px; }
.shop-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }
.shop-shots img { width: 100%; border-radius: 10px; border: 1px solid var(--border); }

.shop-buy-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.shop-buy-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.shop-buy-head h3 { font-size: 18px; margin: 0; color: var(--text); }
.shop-free-badge { background: var(--success-soft); color: var(--success); font-size: 12px; padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.shop-own-box { background: var(--success-soft); color: #1f7a45; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.7; margin-bottom: 14px; }
.shop-tier-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.shop-tier {
  display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; transition: border-color .18s, background .18s;
}
.shop-tier:hover { border-color: #cfe2fb; background: #fafdff; }
.shop-tier.active { border-color: var(--primary); background: var(--primary-soft); }
.shop-tier input { display: none; }
.shop-tier-main { flex: 1; min-width: 0; }
.shop-tier-name { font-size: 14.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shop-tier-name em { font-style: normal; font-size: 11.5px; font-weight: 500; color: #2f6bb0; background: #eef5ff; border-radius: 5px; padding: 2px 7px; }
.shop-tier-desc { font-size: 12.5px; color: var(--text-3); line-height: 1.6; margin-top: 4px; }
.shop-tier-price { font-size: 18px; font-weight: 800; color: #d48806; flex: none; text-align: right; }
.shop-tier-price i { display: block; font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-3); }
.shop-buy-btn { width: 100%; padding: 13px; font-size: 15px; font-weight: 700; }
.shop-buy-hint { font-size: 12px; color: var(--text-3); line-height: 1.7; margin: 10px 0 0; text-align: center; }
.shop-license { background: #fff5f5; border: 1px solid #ffd9d4; border-radius: 14px; padding: 16px 18px 18px; }
.shop-license h4 { font-size: 14px; color: #c0392b; margin: 0 0 10px; }
.shop-license ol { margin: 0; padding-left: 18px; }
.shop-license li { font-size: 12.5px; color: #8a4b45; line-height: 1.85; margin-bottom: 6px; }

.shop-order-sum { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.shop-order-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--text-2); padding: 5px 0; }
.shop-order-line b { color: var(--text); font-weight: 600; text-align: right; }
.shop-order-amount { border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 10px; }
.shop-order-amount b { font-size: 20px; color: #d48806; }
.shop-enterprise { border-top: 1px dashed var(--border); padding-top: 12px; margin-top: 4px; }
.shop-ok-text { font-size: 14px; color: var(--text-2); line-height: 1.8; margin: 6px 0 16px; }

.shop-modal { max-width: 520px; width: 92vw; max-height: 88vh; overflow-y: auto; }
.shop-admin-upload { max-width: none; margin-bottom: 18px; }
.shop-up-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.shop-up-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.shop-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.admin-sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }

/* ---- 会员中心：字体订单 ---- */
.acc-panel-wide { grid-column: 1 / -1; }
.acc-vip { margin-left: 10px; background: linear-gradient(100deg,#fff2cf,#ffe1a6); color: #a06b00; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.acc-vip-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(100deg,#fff8e6,#fffdf7);
  border: 1px solid #ffe1a6; border-radius: 12px; padding: 13px 18px; margin-bottom: 16px; font-size: 13.5px; color: #8a7440;
}
.acc-vip-bar b { color: #a06b00; }
.acc-row-ops { display: flex; align-items: center; gap: 10px; flex: none; }
.acc-tier { font-style: normal; font-size: 11.5px; color: #2f6bb0; background: #eef5ff; border-radius: 5px; padding: 2px 7px; font-weight: 500; }
.acc-dl { font-size: 12.5px; color: var(--primary); text-decoration: none; font-weight: 600; }
.acc-dl:hover { text-decoration: underline; }
.acc-badge-btn { border: 1px solid var(--primary); color: var(--primary); background: #fff; font-size: 12px; padding: 4px 10px; border-radius: 8px; cursor: pointer; }
.acc-badge-btn:hover { background: var(--primary); color: #fff; }

@media (max-width: 1080px) {
  .shop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .shop-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .shop-grid { grid-template-columns: 1fr; }
  .shop-meta-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .shop-up-row { grid-template-columns: 1fr; }
  .shop-search input { width: 190px; }
}

/* ---- 页脚：左侧信息组 + 右侧「管理登录」图标按钮（垂直居中对齐） ---- */
.footer-info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
.footer-admin {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: 14.5px; line-height: 1; color: var(--text-3); text-decoration: none;
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2);
  transition: color .18s, border-color .18s, background .18s;
}
.footer-admin svg { display: block; flex: none; }
.footer-admin:hover { color: var(--primary); border-color: var(--primary); background: #f4f9ff; }
@media (max-width: 640px) {
  .footer-info { gap: 6px 14px; }
  .footer-admin { font-size: 13.5px; padding: 6px 12px; }
}

/* ============================================================================
 * 会员中心 · 折叠面板（默认收起，点开才展示详情）
 * ==========================================================================*/
.acc-sub { display: block; font-size: 12px; font-weight: 400; color: var(--text-3); margin-top: 5px; }
.acc-folds { display: flex; flex-direction: column; gap: 10px; }

.acc-fold {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; transition: border-color .18s, box-shadow .18s;
}
.acc-fold[open] { border-color: #cfe2fb; box-shadow: var(--shadow); }
.acc-fold > summary {
  list-style: none; cursor: pointer; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; user-select: none;
}
.acc-fold > summary::-webkit-details-marker { display: none; }
.acc-fold > summary:hover { background: var(--surface-2); }
.acc-fold-t { font-size: 15px; font-weight: 700; color: var(--text); flex: none; }
.acc-fold-hint { font-size: 12.5px; color: var(--text-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-fold-i {
  flex: none; width: 9px; height: 9px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg); transition: transform .2s; margin-right: 3px; margin-top: -4px;
}
.acc-fold[open] .acc-fold-i { transform: rotate(-135deg); margin-top: 4px; }
.acc-fold-body { padding: 4px 18px 18px; border-top: 1px solid var(--border); }

/* 用户信息 */
.acc-kv { display: flex; flex-direction: column; gap: 2px; }
.acc-kv-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 0;
  border-bottom: 1px dashed var(--border); font-size: 14px;
}
.acc-kv-row:last-child { border-bottom: none; }
.acc-kv-row > span { flex: none; width: 110px; color: var(--text-3); font-size: 13px; }
.acc-kv-row > b { color: var(--text); font-weight: 600; word-break: break-all; }
.acc-edit { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.acc-edit.hidden { display: none; }
.acc-edit input {
  flex: 1; max-width: 260px; padding: 9px 13px; border: 1px solid var(--border);
  border-radius: 9px; font-size: 14px; outline: none; background: var(--surface); color: var(--text);
}
.acc-edit input:focus { border-color: var(--primary); }

/* 我的特权 */
.acc-priv { display: flex; flex-direction: column; gap: 10px; }
.acc-priv-row {
  display: flex; gap: 14px; align-items: flex-start; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2);
}
.acc-priv-row.on { background: var(--primary-soft); border-color: #cfe2fb; }
.acc-priv-ic {
  flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: #eceff3; color: var(--text-3); margin-top: 2px;
}
.acc-priv-row.on .acc-priv-ic { background: var(--primary); color: #fff; }
.acc-priv-main { flex: 1; min-width: 0; }
.acc-priv-t { font-size: 14.5px; font-weight: 700; color: var(--text); }
.acc-priv-d { font-size: 12.5px; color: var(--text-2); line-height: 1.65; margin-top: 4px; }
.acc-note {
  margin-top: 12px; font-size: 13px; color: var(--text-2);
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: 10px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* 收藏列表 */
.acc-fav-list { display: flex; flex-direction: column; gap: 8px; }
.acc-fav-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px;
}
.acc-fav-main { flex: 1; min-width: 0; cursor: pointer; }
.acc-fav-main:hover .acc-fav-name { color: var(--primary); }
.acc-fav-name { font-size: 14.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.acc-fav-sub { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }

/* 收益 / 结算汇总 */
.acc-sec-t {
  font-size: 13px; font-weight: 700; color: var(--text-2); margin: 18px 0 10px;
  padding-left: 9px; border-left: 3px solid var(--primary);
}
.acc-sec-t:first-child { margin-top: 8px; }
.acc-sum { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 10px 0 4px; }
.acc-sum-cell {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 14px 16px;
}
.acc-sum-cell span { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.acc-sum-cell b { font-size: 20px; color: var(--text); font-weight: 800; }
.acc-sum-cell b.hot { color: #d48806; }

/* 上传我的字体 */
.acc-upload {
  border: 1px dashed var(--border); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; background: var(--surface-2);
}
.acc-file { display: inline-flex; align-items: center; }
.acc-file input { display: none; }
.acc-file > span {
  border: 1px solid var(--primary); color: var(--primary); background: #fff;
  padding: 9px 16px; border-radius: 9px; font-size: 13.5px; cursor: pointer; font-weight: 600;
}
.acc-file > span:hover { background: var(--primary); color: #fff; }
.acc-up-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.acc-upload input[type="text"], .acc-upload textarea {
  width: 100%; padding: 9px 13px; border: 1px solid var(--border); border-radius: 9px;
  font-size: 13.5px; outline: none; background: var(--surface); color: var(--text); font-family: inherit;
}
.acc-upload input[type="text"]:focus, .acc-upload textarea:focus { border-color: var(--primary); }
.acc-upload textarea { min-height: 62px; resize: vertical; }
.acc-up-hint { font-size: 12px; color: var(--text-3); line-height: 1.7; margin: 0; }

/* ============================================================================
 * 字体商城 · 收藏按钮
 * ==========================================================================*/
.shop-fav {
  position: absolute; top: 10px; left: 10px; width: 32px; height: 32px; padding: 0;
  border-radius: 9px; border: 1px solid #ffd9a8; background: rgba(255,255,255,.94);
  color: #f59a23; font-size: 18px; line-height: 1; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center; transition: color .18s, border-color .18s, transform .18s, background .18s;
}
.shop-fav:hover { color: #ef8a00; border-color: #ffc46b; transform: scale(1.1); }
.shop-fav.on { color: #ff8a00; border-color: #ffbe4d; background: #fff7ea; text-shadow: 0 1px 2px rgba(255,138,0,.28); }
/* 封面下载角标（紧跟在收藏图标右侧，白底 + #d48806 描边与文字） */
.shop-dl-badge {
  position: absolute; top: 10px; left: 52px; height: 32px; padding: 0 11px; max-width: calc(100% - 62px);
  display: inline-flex; align-items: center; gap: 4px; border-radius: 9px;
  border: 1px solid #d48806; background: #fff;
  color: #d48806; font-size: 12.5px; font-weight: 800; letter-spacing: .3px; white-space: nowrap;
  box-shadow: 0 2px 7px rgba(23, 33, 51, .08); pointer-events: none; z-index: 2; overflow: hidden;
}
.shop-dl-badge svg { width: 13px; height: 13px; flex: none; display: block; }
.shop-fav-line {
  flex: none; border: 1px solid #ffd9a8; background: var(--surface); color: #d48806;
  font-size: 12.5px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.shop-fav-line:hover { border-color: #ffc46b; color: #ef8a00; }
.shop-fav-line.on { color: #ff8a00; border-color: #ffbe4d; background: #fff7ea; font-weight: 600; }

/* ============================================================================
 * 后台 · 筛选 / 状态标签 / 列表提示
 * ==========================================================================*/
.admin-filter { display: inline-flex; gap: 6px; }
.admin-filter button {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.admin-filter button:hover { border-color: var(--primary); color: var(--primary); }
.admin-filter button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.admin-list-note { font-size: 12.5px; color: var(--text-3); padding: 4px 2px 10px; }
.admin-ops button.ok { border-color: #b7e3c8; color: #1f7a45; background: #f2fbf5; }
.admin-ops button.ok:hover { background: #1f7a45; border-color: #1f7a45; color: #fff; }
.st-published { color: #1f7a45; font-weight: 600; }
.st-pending { color: #d48806; font-weight: 600; }
.st-rejected { color: #c0392b; font-weight: 600; }
.st-draft { color: var(--text-3); }

@media (max-width: 900px) {
  .acc-sum { grid-template-columns: 1fr; }
  .acc-up-grid { grid-template-columns: 1fr; }
  .acc-fold-hint { display: none; }
}

/* ============================================================================
 * 后台 · 主题设置（字体商城主题 / 造字首页主题）
 * ==========================================================================*/
.th-card {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 16px 18px; margin-bottom: 16px;
}
.th-card-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.th-card-t b { font-size: 15px; color: #1b3b63; }
.th-card-t span { font-size: 12.5px; color: var(--text-3); }
.th-hint {
  font-size: 12.5px; color: #8a6a2f; background: #fffaf0; border: 1px dashed #ffdca8;
  border-radius: 9px; padding: 8px 12px; margin: 6px 0 12px; line-height: 1.7;
}
.th-hint b { color: #b8741a; }
.th-ads { display: flex; flex-direction: column; gap: 12px; }
.th-ad-row {
  display: flex; gap: 14px; align-items: flex-start; position: relative;
  border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface-2);
}
.th-ad-pic { flex: none; width: 260px; display: flex; flex-direction: column; gap: 7px; }
.th-ad-preview {
  width: 100%; height: 92px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border);
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-3); text-align: center; line-height: 1.4;
}
.th-ad-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-ad-preview--wide { height: 56px; }
.th-file {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px;
  font-size: 12.5px; color: var(--text-2); background: var(--surface);
}
.th-file:hover { border-color: var(--primary); color: var(--primary); }
.th-mini {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-3);
  border-radius: 8px; padding: 5px 9px; font-size: 12px; cursor: pointer;
}
.th-mini:hover { color: var(--danger); border-color: #f3c0b9; }
.th-ad-fields { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.th-ad-fields label, .th-mem label, .th-rec label {
  display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-2);
}
.th-ad-fields input, .th-mem input, .th-rec select {
  width: 100%; padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; color: var(--text); background: var(--surface); outline: none; font-family: inherit;
}
.th-ad-fields input:focus, .th-mem input:focus, .th-rec select:focus { border-color: var(--primary); }
.th-del {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-3);
  cursor: pointer; font-size: 15px; line-height: 1;
}
.th-del:hover { color: #fff; background: var(--danger); border-color: var(--danger); }
.th-rec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.th-mem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.th-add {
  margin-top: 12px; border: 1px dashed var(--border); background: transparent; color: var(--text-2);
  border-radius: 10px; padding: 9px 16px; font-size: 13px; cursor: pointer;
}
.th-add:hover { border-color: var(--primary); color: var(--primary); }
.th-add[disabled] { opacity: .5; cursor: not-allowed; }
.th-save { display: flex; align-items: center; gap: 14px; padding: 4px 2px 10px; }
.th-msg { font-size: 13px; }
.th-msg.ok { color: var(--success); }
.th-msg.err { color: var(--danger); }
@media (max-width: 900px) {
  .th-ad-row { flex-direction: column; }
  .th-ad-pic { width: 100%; }
  .th-rec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-mem { grid-template-columns: 1fr; }
}

/* 后台主题设置 · 会员卡渐变颜色控件与实时预览 */
.th-sub { font-size: 12.5px; font-weight: 700; color: #1b3b63; margin: 16px 0 8px; }
.th-mem-bg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.th-mem-bg-fields { display: flex; flex-direction: column; gap: 10px; }
.th-color { display: flex; align-items: center; gap: 8px; }
.th-color input[type="color"] {
  width: 46px; height: 34px; padding: 2px; flex: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.th-color input[type="text"] {
  flex: 1 1 auto; min-width: 0; padding: 8px 11px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; color: var(--text); background: var(--surface);
  outline: none; font-family: ui-monospace, Consolas, "Courier New", monospace;
}
.th-color input[type="text"]:focus { border-color: var(--primary); }
.th-mem-bg-fields .th-mini { align-self: flex-start; margin-top: 2px; }
.th-mem-preview {
  position: relative; overflow: hidden; min-height: 104px; padding: 18px 20px;
  border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(135deg, var(--mem-from, #ff5a1f) 0%, var(--mem-to, #d92b1f) 100%);
}
.th-mem-preview-tag {
  position: absolute; top: 8px; right: 12px; font-size: 11px;
  color: rgba(255, 255, 255, .82); letter-spacing: .5px;
}
.th-mem-preview-card { display: flex; flex-direction: column; gap: 5px; }
.th-mem-preview-card b { color: #fff; font-size: 15px; font-weight: 900; letter-spacing: .5px; }
.th-mem-preview-card i { font-style: normal; color: rgba(255, 255, 255, .9); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 900px) { .th-mem-bg { grid-template-columns: 1fr; } }

/* ==================== 发票申请 ==================== */
.inv-kind-seg {
  display: flex; gap: 8px; margin: 14px 0 4px;
}
.inv-kind-seg button {
  flex: 1; padding: 10px 0; border-radius: 10px; border: 1px solid var(--line, #dfe4ec);
  background: #f5f7fb; color: #5a6478; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: all .15s ease;
}
.inv-kind-seg button.active {
  border-color: #ff8a1f; background: #fff4e8; color: #d95c00;
}
.inv-img-wrap {
  margin: 14px 0; border: 1px solid #e3e7ef; border-radius: 12px; overflow: hidden;
  max-height: 46vh; display: flex; justify-content: center; background: #f8f9fc;
}
.inv-img-wrap img { max-width: 100%; max-height: 46vh; object-fit: contain; display: block; }
.inv-dl { display: block; text-align: center; text-decoration: none; }

/* ===== v14 · 后台主题 · 首页背景动效控件 ===== */
.th-bgfx-row{display:flex;gap:26px;margin:12px 0 6px}
.th-bgfx-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  font-size:13.5px;color:#1f2430}
.th-bgfx-toggle input{width:17px;height:17px;accent-color:#4293e5;cursor:pointer}
.th-bgfx-range{display:flex;align-items:center;gap:12px;font-size:13px;color:#5b6474;margin:8px 0 2px}
.th-bgfx-range input{flex:1;max-width:320px;accent-color:#4293e5}
.th-bgfx-range b{font-size:12.5px;color:#2e7cc9;min-width:42px;text-align:right}

/* ===== v15 · 全局顶部广告位（导航栏之上，50px 通栏，后台·全局主题控制） ===== */
#zzkTopAd{width:100%;height:50px;display:flex;align-items:center;gap:12px;
  padding:0 24px;box-sizing:border-box;overflow:hidden;
  font-family:"SimHei","黑体","STHeiti","Noto Sans SC","WenQuanYi Micro Hei",sans-serif;
  color:#fff;font-size:16px;line-height:1;white-space:nowrap}
#zzkTopAd[hidden]{display:none}
#zzkTopAd .zzk-ad-text{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
#zzkTopAd .zzk-ad-ico{height:40px;max-height:40px;width:auto;max-width:400px;object-fit:contain;flex:none}

/* ===== v15b · 后台全局主题 · 顶部广告位控件 ===== */
.th-gt-preview{height:50px;display:flex;align-items:center;gap:12px;padding:0 24px;
  margin:10px 0;border-radius:8px;color:#fff;font-size:16px;overflow:hidden;
  font-family:"SimHei","黑体","STHeiti","Noto Sans SC","WenQuanYi Micro Hei",sans-serif;white-space:nowrap}
.th-gt-preview img{height:40px;max-height:40px;width:auto;max-width:300px;object-fit:contain}
.th-gt-row{display:flex;align-items:center;gap:12px;margin:12px 0;flex-wrap:wrap;
  font-size:13.5px;color:#1f2430}
.th-gt-row>b{min-width:150px;font-size:13px;color:#5b6474;font-weight:600}
.th-gt-row input[type="color"]{width:44px;height:30px;padding:0;border:1px solid #d9dee7;border-radius:6px;background:#fff;cursor:pointer}
.th-gt-row select{padding:5px 10px;border:1px solid #d9dee7;border-radius:6px;background:#fff}
.th-gt-row input[type="text"]{padding:7px 10px;border:1px solid #d9dee7;border-radius:6px}
.th-swatches{display:flex;gap:6px;flex-wrap:wrap}
.th-swatch{width:22px;height:22px;border-radius:5px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}
.th-swatch:hover{transform:scale(1.12);transition:transform .1s}
.th-gt-ico{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.th-gt-ico-box{width:96px;height:48px;border:1px dashed #c9d2e0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;background:#f8fafc;overflow:hidden}
.th-gt-ico-box span{font-size:11px;color:#9aa5b5}
.th-gt-ico-box img{max-height:40px;width:auto;max-width:88px;object-fit:contain}

/* ===== v16 · 登录/注册悬停引导卡片 ===== */
.ua-login-wrap { position: relative; display: inline-flex; }
.ua-guide {
  position: absolute; top: calc(100% + 12px); right: 0; width: 300px;
  padding: 16px 18px 15px; background: #fff; border: 1px solid #e6ebf2; border-radius: 14px;
  box-shadow: 0 20px 44px -14px rgba(24,45,74,.24), 0 6px 14px rgba(24,45,74,.06);
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 130; text-align: left;
}
.ua-guide::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.ua-guide::after {
  content: ''; position: absolute; top: -6px; right: 28px; width: 11px; height: 11px; background: #fff;
  border-left: 1px solid #e6ebf2; border-top: 1px solid #e6ebf2; transform: rotate(45deg);
}
.ua-login-wrap:hover .ua-guide,
.ua-login-wrap:focus-within .ua-guide { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.ua-guide-hd { font-size: 13px; font-weight: 700; color: #2b3648; letter-spacing: .3px; margin-bottom: 11px; }
.ua-guide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ua-guide-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; color: #3d4a5c; }
.ua-guide-star { flex: none; font-style: normal; font-size: 12px; line-height: 1.55; color: #f5a623; }

/* ===== v16 · 造字首页下拉子导航 ===== */
.nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-caret {
  display: inline-block; width: 7px; height: 7px; margin-left: 7px; opacity: .6;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform .18s ease, opacity .18s;
}
.nav-drop:hover .nav-caret { transform: translateY(0) rotate(225deg); opacity: 1; }
.nav-drop--empty .nav-caret { display: none; }
.nav-drop-menu {
  position: absolute; top: calc(100% + 6px); left: 50%; min-width: 240px; padding: 8px;
  background: #fff; border: 1px solid #e6ebf2; border-radius: 14px;
  box-shadow: 0 20px 44px -14px rgba(24,45,74,.24), 0 6px 14px rgba(24,45,74,.06);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 135;
}
.nav-drop-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav-drop:hover .nav-drop-menu,
.nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.nav-drop--empty .nav-drop-menu { display: none; }
.nav-drop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px;
  border: none; border-radius: 10px; background: transparent; color: #33405a;
  font-family: inherit; font-size: 14.5px; font-weight: 600; text-align: left; white-space: nowrap;
  cursor: pointer; transition: background .15s, color .15s;
}
.nav-drop-item:hover { background: rgba(66,147,229,.09); color: #2e7cc9; }
.ndi-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #63a7ee, #2e7cc9); }
.ndi-label { flex: 1; }
.ndi-arrow { flex: none; width: 15px; height: 15px; opacity: .35; transition: transform .15s, opacity .15s; }
.nav-drop-item:hover .ndi-arrow { opacity: 1; transform: translateX(2px); }

/* ===== v16 · 后台：下拉子导航编辑 ===== */
.th-nav-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.th-nav-row {
  display: flex; gap: 12px; align-items: flex-end; padding: 12px 14px;
  border: 1px solid #e8edf4; border-radius: 12px; background: #fbfcfe;
}
.th-nav-row label { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 600; color: #5b6474; }
.th-nav-row label:nth-of-type(2) { flex: 1.5; }
.th-nav-row input { padding: 8px 10px; border: 1px solid #d9dee7; border-radius: 8px; background: #fff;
  font-family: inherit; font-size: 13px; color: #1f2430; }
.th-nav-row .th-del { align-self: center; }
.th-nav-empty { padding: 10px 0 2px; font-size: 13px; color: #9aa5b5; }

/* ===== 导航悬停引导卡片 · 书法壁纸嵌入视图（v18） ===== */
.sitenav-btn .nav-tip {
  position: absolute; top: calc(100% + 12px); left: 50%;
  display: inline-flex; align-items: center; padding: 9px 16px;
  border-radius: 999px; background: #fff; border: 1px solid #dfe9f5; color: #2c7ec9;
  font-size: 13px; font-weight: 600; letter-spacing: .4px; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 16px 34px -14px rgba(24,45,74,.26), 0 4px 10px rgba(24,45,74,.05);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 140;
}
.sitenav-btn .nav-tip::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.sitenav-btn .nav-tip::after {
  content: ''; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -5px;
  background: #fff; border-left: 1px solid #dfe9f5; border-top: 1px solid #dfe9f5;
  transform: rotate(45deg); border-top-left-radius: 2px;
}
.sitenav-btn:hover .nav-tip,
.sitenav-btn:focus-visible .nav-tip {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.wallpaper-frame { display: block; width: 100%; height: calc(100vh - 150px); min-height: 720px; border: 0; background: #f4f7fb; }
@media (hover: none) { .sitenav-btn .nav-tip { display: none; } }
@media (max-width: 720px) { .wallpaper-frame { height: calc(100vh - 120px); min-height: 620px; } }

/* ===== 后台 · 书法壁纸素材库 ===== */
.wp-up { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0; padding: 14px 16px; background: #f7fafd; border: 1px dashed #cfdcea; border-radius: 12px; }
.wp-up-title { font-weight: 700; color: #1f3350; }
.wp-up select, .wp-card select, .wp-name, .wp-sort { border: 1px solid #d9dee7; border-radius: 8px; background: #fff; font-family: inherit; font-size: 13px; color: #1f2430; padding: 8px 10px; }
.wp-up-btn { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; background: linear-gradient(135deg, #4293e5, #2e7cc9); color: #fff; font-size: 13px; cursor: pointer; }
.wp-up-tip { font-size: 12px; color: #8ba0b5; }
.wp-scope { display: flex; gap: 8px; margin: 6px 0 14px; }
.wp-scope button { padding: 7px 16px; border-radius: 999px; border: 1px solid #dbe4ee; background: #fff; color: #54657a; font-size: 13px; cursor: pointer; }
.wp-scope button.active { background: #eaf3fd; border-color: #9cc6ee; color: #2e7cc9; font-weight: 700; }
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.wp-card { background: #fff; border: 1px solid #e6ecf3; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.wp-thumb { height: 130px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f4f7fb; }
.wp-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wp-thumb.checker { background-color: #fff; background-image: linear-gradient(45deg, #eef2f7 25%, transparent 25%, transparent 75%, #eef2f7 75%), linear-gradient(45deg, #eef2f7 25%, transparent 25%, transparent 75%, #eef2f7 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.wp-card-row { display: flex; gap: 8px; align-items: center; }
.wp-card-row select, .wp-name { flex: 1; min-width: 0; }
.wp-name { width: 100%; }
.wp-sort { width: 64px; flex: none; }
.wp-dim { font-size: 11px; color: #93a3b6; }
.wp-del { margin-left: auto; border: none; background: #fdecec; color: #c0392b; border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.wp-del:hover { background: #f9d7d7; }
.wp-mini { width: 46px; height: 46px; object-fit: contain; background: #f4f7fb; border-radius: 6px; }
@media (max-width: 720px) {
  .topbar .sitenav { flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; row-gap: 2px; }
  .topbar .sitenav .sitenav-btn { flex: 0 1 auto; }
}

/* ==================== 顶栏解除左右限位 + 导航扩容（v19） ==================== */
/* 导航增至 6 项后，顶栏不再锁 1440px，改为整宽排布，只保留左右安全边距 */
.topbar-inner { max-width: none; width: 100%; padding-left: 24px; padding-right: 24px; }
@media (max-width: 720px) { .topbar-inner { padding-left: 14px; padding-right: 14px; } }

/* ==================== 敬请期待页（书法壁纸下载 / 服务和活动 · v19） ==================== */
#viewWpDownload, #viewServices { flex: 1 0 auto; }
.soon-wrap { position: relative; min-height: calc(100vh - 230px); display: flex; align-items: center; justify-content: center; padding: 56px 20px 76px; }
.soon-wrap::before { content: ''; position: absolute; inset: 0; background: radial-gradient(720px 340px at 50% 4%, rgba(66,147,229,.11), transparent 72%); pointer-events: none; }
.soon-card { position: relative; width: 100%; max-width: 620px; padding: 44px 46px 38px; text-align: center; background: #fff; border: 1px solid #e2ecf6; border-radius: 24px; box-shadow: 0 22px 60px rgba(31,72,120,.09); overflow: hidden; animation: soonIn .42s cubic-bezier(.22,.7,.3,1) both; }
.soon-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #4293e5, #22b3e6, #6fc7f2); }
@keyframes soonIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.soon-badge { display: inline-block; padding: 5px 14px; border-radius: 999px; background: #eaf3fd; color: #2e7cc9; font-size: 11.5px; font-weight: 800; letter-spacing: 2.2px; }
.soon-ico { width: 96px; height: 96px; margin: 22px auto 14px; border-radius: 26px; display: flex; align-items: center; justify-content: center; color: #2e7cc9; background: linear-gradient(160deg, #f2f8ff, #e2f0fd); border: 1px solid #d7e7f8; box-shadow: inset 0 1px 0 #fff; }
.soon-ico svg { width: 48px; height: 48px; }
.soon-card h2 { margin: 0 0 10px; font-size: 30px; line-height: 1.3; letter-spacing: .5px; color: #16263c; }
.soon-sub { margin: 0 auto 22px; max-width: 470px; color: #5b7189; font-size: 15px; line-height: 1.75; }
.soon-points { list-style: none; margin: 0 auto 26px; padding: 0; display: grid; gap: 10px; max-width: 470px; text-align: left; }
.soon-points li { position: relative; padding: 11px 14px 11px 42px; border-radius: 12px; background: #f7fafd; border: 1px solid #e8f0f8; color: #3d5570; font-size: 14px; line-height: 1.5; }
.soon-points li::before { content: '✔'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: #4293e5; color: #fff; font-size: 11px; }
.soon-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.soon-actions .btn { min-width: 148px; border-radius: 999px; padding: 11px 24px; font-size: 14.5px; }
.soon-note { margin: 20px 0 0; font-size: 12.5px; color: #93a6ba; }
/* 服务和活动：暖金点缀，和壁纸下载区分 */
.soon-card-alt .soon-ico { color: #c8811c; background: linear-gradient(160deg, #fffaf0, #fdf0d7); border-color: #f5e2bf; }
.soon-card-alt::after { background: linear-gradient(90deg, #ffc23e, #f09a1a, #ffd977); }
.soon-card-alt .soon-badge { background: #fff6e6; color: #b3760f; }
.soon-card-alt .soon-points li::before { background: #e8a419; }
@media (max-width: 640px) {
  .soon-card { padding: 34px 22px 30px; border-radius: 20px; }
  .soon-card h2 { font-size: 24px; }
  .soon-ico { width: 80px; height: 80px; border-radius: 22px; }
  .soon-ico svg { width: 40px; height: 40px; }
  .soon-actions .btn { flex: 1 1 100%; }
}

/* 导航增至 6 项后的中窄屏降级：优先保住导航完整可见 */
@media (max-width: 1120px) {
  .topbar .brand-slogan { display: none; }
  .topbar .sitenav { gap: 2px; margin-left: 8px; }
  .sitenav-btn { font-size: 13.5px; padding: 9px 7px; }
  .sitenav-btn.buy-btn { padding: 9px 7px; margin-left: 4px; }
  .sitenav-btn .nav-ico { width: 26px; height: 26px; }
}
@media (max-width: 980px) {
  .topbar .brand-text { display: none; }
  .sitenav-btn { font-size: 13px; padding: 8px 6px; }
}
/* 极窄时允许顶栏换行，登录/注册换行后靠右 */
@media (max-width: 980px) {
  .topbar-inner { flex-wrap: wrap; row-gap: 6px; }
  .topbar .user-area { margin-left: auto; }
}
/* 窄屏兜底：悬停小卡不参与布局（避免撑横向滚动），工具栏按钮允许折行，
   装饰画布不撑横向滚动（6 项导航前既存在） */
@media (max-width: 860px) {
  .sitenav-btn .nav-tip { display: none; }
  html, body { overflow-x: hidden; }
  .tabs .tab-btn { min-width: 0; white-space: normal; font-size: 12px; padding: 8px 6px; }
}

/* ===== 书法壁纸下载站（iframe 嵌入 · v20） ===== */
.wpdownload-frame { display: block; width: 100%; height: calc(100vh - 150px); min-height: 720px; border: 0; background: #f4f0e6; }
@media (max-width: 720px) { .wpdownload-frame { height: calc(100vh - 120px); min-height: 620px; } }

/* 后台 · 书法壁纸下载板块：后台已释放为独立全屏页，无需内嵌样式 */

/* ===== 服务和活动 · 来图定制（v22，自书法壁纸站迁入） ===== */
.zzk-custom-wrap { max-width: 900px; margin: 0 auto; padding: 34px 20px 60px; }
.zzk-custom-head { text-align: center; margin-bottom: 22px; }
.zzk-custom-head h2 { font-size: 30px; letter-spacing: .35em; margin: 0 0 6px; color: #2b2b2b; }
.zzk-custom-head p { margin: 0; color: #8a857c; font-size: 13.5px; letter-spacing: .12em; }
.zzk-custom-card { background: #fffdf8; border: 1px solid #efe6d2; border-top: 3px solid #e8a33d; border-radius: 14px; padding: 26px 28px 22px; box-shadow: 0 6px 24px rgba(160,120,40,.07); }
.zzk-custom-tip { color: #6b665c; font-size: 13.5px; line-height: 1.9; margin-bottom: 18px; }
.zzk-custom-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: end; }
.zzk-cf label { display: block; font-size: 12.5px; color: #8a857c; margin-bottom: 6px; }
.zzk-cf input, .zzk-cf select { width: 100%; height: 40px; border: 1px solid #ddd3bd; border-radius: 9px; background: #fff; padding: 0 12px; font-size: 14px; color: #333; box-sizing: border-box; }
.zzk-cf input:focus, .zzk-cf select:focus { outline: none; border-color: #4293e5; }
.zzk-cbtn { width: 100%; height: 40px; border: 1.5px solid #2b2b2b; background: #fff; color: #2b2b2b; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; transition: .15s; }
.zzk-cbtn:hover { background: #f5f1e8; }
.zzk-cbtn.red { background: #e8a33d; border-color: #e8a33d; color: #fff; }
.zzk-cbtn.red:hover { background: #d8932e; }
.zzk-cbtn:disabled { opacity: .45; cursor: not-allowed; }
.zzk-quote-out { margin-top: 16px; font-size: 16px; font-weight: 700; color: #b4690e; min-height: 24px; }
.zzk-quote-note { color: #8a857c; font-size: 13px; min-height: 18px; }
.zzk-custom-remind { margin-top: 14px; background: #fbf4e4; border-left: 3px solid #e8a33d; padding: 10px 14px; color: #7a6a45; font-size: 13px; line-height: 1.9; border-radius: 0 8px 8px 0; }
.zzk-custom-acts { margin-top: 16px; display: flex; gap: 10px; }
@media (max-width: 860px) { .zzk-custom-grid { grid-template-columns: repeat(2, 1fr); } .zzk-custom-card { padding: 20px 16px; } }

/* 支付弹窗（来图定制） */
.zzc-modal { position: fixed; inset: 0; background: rgba(20,20,20,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.zzc-box { background: #fff; border-radius: 14px; width: min(480px, 94vw); max-height: 88vh; overflow: auto; padding: 22px 24px; box-sizing: border-box; }
.zzc-box h3 { margin: 0 0 4px; font-size: 18px; }
.zzc-total { color: #b4690e; font-weight: 800; font-size: 22px; margin-bottom: 12px; }
.zzc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.zzc-grid .full { grid-column: 1 / -1; }
.zzc-grid label { display: block; font-size: 12.5px; color: #8a857c; margin-bottom: 4px; }
.zzc-grid input { width: 100%; height: 38px; border: 1px solid #ddd3bd; border-radius: 8px; padding: 0 10px; font-size: 14px; box-sizing: border-box; }
.zzc-qr { text-align: center; margin: 12px 0; }
.zzc-qr img { width: 180px; height: 180px; object-fit: contain; border: 1px solid #eee; border-radius: 8px; background: #fff; }
.zzc-shot-prev { display: block; max-width: 100%; max-height: 160px; margin-top: 8px; border-radius: 8px; }
.zzc-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.zzc-btns button { height: 40px; padding: 0 22px; border-radius: 9px; font-size: 14px; cursor: pointer; }
.zzc-btns .cancel { border: 1px solid #ccc; background: #fff; }
.zzc-btns .ok { border: none; background: #e8a33d; color: #fff; font-weight: 600; }
.zzc-btns .ok:disabled { opacity: .5; }

/* ===== 会员中心 · 壁纸供图上传（我的供图收益 + 成为供图作者，v23） ===== */
.wpc-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 12px; }
.wpc-panel { background: #fbf9f3; border: 1px solid #eee4d0; border-radius: 12px; padding: 16px 18px; min-width: 0; }
.wpc-t { margin: 0 0 12px; font-size: 15px; letter-spacing: .2em; color: #4a453c; }
.wpc-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.wpc-f.full { grid-column: 1 / -1; }
.wpc-f label { display: block; font-size: 12.5px; color: #8a857c; margin-bottom: 4px; }
.wpc-f input, .wpc-f select, .wpc-f textarea { width: 100%; border: 1px solid #ddd3bd; border-radius: 8px; padding: 8px 10px; font-size: 13.5px; box-sizing: border-box; font-family: inherit; }
.wpc-f textarea { min-height: 74px; resize: vertical; }
.wpc-f input:focus, .wpc-f select:focus, .wpc-f textarea:focus { outline: none; border-color: #4293e5; }
.wpc-month { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #8a857c; font-size: 13px; }
.wpc-month input { border: 1px solid #ddd3bd; border-radius: 8px; padding: 5px 8px; font-size: 13px; }
.wpc-rows { display: flex; gap: 10px; margin-bottom: 10px; }
.wpc-cell { flex: 1; background: #fff; border: 1px solid #eee4d0; border-radius: 10px; padding: 10px 12px; }
.wpc-cell span { display: block; font-size: 12px; color: #8a857c; margin-bottom: 4px; }
.wpc-cell b { font-size: 18px; color: #b4690e; }
.wpc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.wpc-tbl th, .wpc-tbl td { border-bottom: 1px solid #f0e8d8; padding: 7px 4px; text-align: left; color: #555046; }
.wpc-tbl th { color: #8a857c; font-weight: 500; font-size: 12px; }
.wpc-tbl td:not(:first-child), .wpc-tbl th:not(:first-child) { text-align: right; }
.wpc-sec-t { font-size: 14px; margin: 16px 0 8px; color: #4a453c; font-weight: 600; }
.wpc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wpc-card { display: block; text-decoration: none; }
.wpc-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; display: block; border: 1px solid #eee4d0; }
.wpc-cap { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; margin-top: 4px; color: #555046; }
.wpc-cap b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpc-cap i { font-style: normal; color: #8a857c; flex-shrink: 0; }
@media (max-width: 860px) { .wpc-wrap { grid-template-columns: 1fr; } .wpc-cards { grid-template-columns: repeat(2, 1fr); } }

/* ===== 书法壁纸下载后台（造字咖后台内原生板块） ===== */
.admin-form .zzk-field select { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 14px; background: var(--surface); color: var(--text); width: 100%; font-family: inherit; }
.admin-form .zzk-field input[type="file"] { padding: 8px 10px; font-size: 13px; }
.wpdl-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; margin-bottom: 16px; }
.wpdl-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px; }
.wpdl-stat span { display: block; color: var(--text-3); font-size: 12.5px; margin-bottom: 8px; }
.wpdl-stat b { font-size: 21px; color: var(--text); letter-spacing: .02em; }
.wpdl-stat b.hl { color: var(--primary); }
.wpdl-note { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; color: var(--text-2); font-size: 13px; line-height: 1.9; margin-bottom: 14px; }
.wpdl-thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: zoom-in; display: block; }
.wpdl-shot { width: 96px; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; display: block; }
.wpdl-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 10px; max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface-2); }
.wpdl-pick label { position: relative; display: block; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--surface); }
.wpdl-pick label.on { border-color: var(--primary); }
.wpdl-pick input { position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; accent-color: var(--primary); z-index: 2; }
.wpdl-pick img { width: 100%; height: 86px; object-fit: cover; display: block; }
.wpdl-pick span { display: block; padding: 6px 8px; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpdl-det { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.wpdl-det span { position: relative; display: inline-block; }
.wpdl-det img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.wpdl-det i { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; font-style: normal; font-size: 13px; line-height: 20px; text-align: center; cursor: pointer; }
.wpdl-order { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; }
.wpdl-order-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; font-size: 13.5px; }
.wpdl-order-item { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--text-2); margin-top: 8px; }
.wpdl-order-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.wpdl-order-item .wpdl-shot { width: 88px; height: auto; }
.wpdl-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); color: var(--text-2); }
.wpdl-pill.ok { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.wpdl-pill.wait { color: #d48806; border-color: #f3d19e; background: #fdf6e7; }
.wpdl-pill.off { color: var(--text-3); }
@media (max-width: 760px) { .wpdl-stats { grid-template-columns: repeat(2, 1fr); } }

/* ===== 积分充值固定档位 / 造字功能永久会员 ===== */
.pay-presets button.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.pay-perm { border: 1px solid #cfe0f7; background: linear-gradient(135deg,#f4f9ff,#e9f2ff); border-radius: 14px; padding: 14px 16px; margin: 2px 0 14px; }
.pay-perm.owned { background: var(--surface-2); border-color: var(--border); }
.pay-perm.picked { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.pay-perm-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 7px; }
.pay-perm-head b { font-size: 15px; color: var(--text); }
.pay-perm-price { color: var(--primary); font-weight: 700; font-size: 15px; }
.pay-perm-desc { font-size: 13px; color: var(--text-2); line-height: 1.8; margin-bottom: 10px; }
.pay-perm-on { color: var(--primary); font-weight: 600; }
.acc-vip.acc-vip-perm { background: linear-gradient(100deg,#dcecff,#bfdcff); color: #14538f; }
.admin-ops button.ad-priv.on { border-color: #b7d8f6; color: var(--primary); background: var(--primary-soft); }

/* ==================== 服务和活动 · 服务详情（轮播 + 四栏） ==================== */
/* 整页：居中阅读、蓝主(#4293e5)橙辅(#f59e0b)、不用渐变（订阅卡除外）、无卡片、紧凑 */
.svc-page { width: min(1200px, 100%); margin: 0 auto; padding: 14px 24px 36px; }
.svc-page .hero-carousel { width: 100%; padding: 0; margin: 0 0 6px; }
.svc-sec { margin-top: 34px; }
.svc-sec-t {
  text-align: center; font-size: 19px; font-weight: 800; letter-spacing: 2px;
  color: var(--text); margin: 0 0 12px;
}
.svc-sec-t::after {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 2px;
  background: #f59e0b; margin: 8px auto 0;
}

/* ---- 第一栏 · 会员和积分使用说明（无卡片，居中紧凑） ---- */
.svc-rules { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.svc-rule { display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.svc-rule-no {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12.5px; color: #fff; background: var(--primary);
  transform: translateY(3px);
}
.svc-rule p { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.8; text-align: center; }
.svc-rule b { color: var(--text); }
.svc-rule:nth-child(3) p b { color: #f59e0b; }

/* ---- 第二栏 · 会员订阅服务卡片（唯一保留卡片，蓝主橙辅） ---- */
.svc-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 860px; margin: 0 auto; }
.svc-plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 20px 22px 16px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.svc-plan:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.svc-plan--perm { border-color: var(--primary); box-shadow: 0 4px 16px rgba(66,147,229,.12); }
.svc-plan--font { border-color: #f59e0b; }
.svc-plan-head { display: flex; align-items: center; gap: 10px; justify-content: center; }
.svc-plan-head b { font-size: 16.5px; color: var(--text); }
.svc-plan-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.svc-plan-tag.tag-blue { color: var(--primary); background: var(--primary-soft); }
.svc-plan-tag.tag-yellow { color: #b45309; background: #fef3c7; }
.svc-price { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: 12px; }
.svc-price i { font-style: normal; font-size: 19px; font-weight: 800; color: var(--primary); }
.svc-plan--font .svc-price i, .svc-plan--font .svc-price em { color: #f59e0b; }
.svc-price em { font-style: normal; font-size: 40px; font-weight: 900; line-height: 1; color: var(--text); letter-spacing: -1px; }
.svc-price u { text-decoration: none; font-size: 13.5px; color: var(--text-3); }
.svc-price-note { margin: 7px 0 0; font-size: 12.5px; color: var(--text-3); text-align: center; }
.svc-plan-big { margin-top: 14px; font-size: 21px; font-weight: 900; color: var(--text); letter-spacing: .5px; text-align: center; }
.svc-plan-big-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); text-align: center; }
.svc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; }
.svc-chips span {
  font-size: 12.5px; padding: 4px 12px; border-radius: 99px;
  border: 1px solid var(--border); color: var(--text-2); background: var(--surface-2);
}
.svc-chips span.on { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.svc-cta {
  margin-top: 16px; width: 100%; border: none; cursor: pointer;
  padding: 12px 0; border-radius: 99px;
  font-size: 15px; font-weight: 800; letter-spacing: 4px; color: #fff;
  transition: filter .18s ease, transform .12s ease;
}
.svc-cta:hover { filter: brightness(1.06); }
.svc-cta:active { transform: scale(.985); }
.svc-cta--blue { background: var(--primary); }
.svc-cta--orange { background: #f59e0b; }
.svc-feats { list-style: none; margin: 14px 0 0; padding: 12px 2px 0; border-top: 1px dashed var(--border); }
.svc-feats li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13.5px; }
.svc-feats li span { color: var(--text-2); }
.svc-feats li b { margin-left: auto; color: var(--text); font-size: 13px; text-align: right; }
.svc-feats li::before { content: "\2713"; flex: none; font-weight: 800; color: var(--primary); }

/* ---- 第三栏 · 造字开发（简约卡片，蓝主橙辅，无渐变） ---- */
.svc-dev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 860px; margin: 0 auto; }
.svc-dev-card {
  text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px 14px;
  border-top: 3px solid var(--primary);
  transition: box-shadow .2s ease, transform .2s ease;
}
.svc-dev-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.svc-dev-card + .svc-dev-card { border-top-color: #f59e0b; }
.svc-dev-head b { font-size: 16.5px; color: var(--text); margin-right: 8px; }
.svc-dev-head span { font-size: 13px; color: #f59e0b; font-weight: 600; }
.svc-dev-list { list-style: none; margin: 12px 0 0; padding: 0; text-align: left; }
.svc-dev-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 14px;
}
.svc-dev-list li:last-child { border-bottom: none; }
.svc-dev-list li span { color: var(--text-2); flex: none; }
.svc-dev-list li b { color: var(--primary); font-weight: 800; text-align: right; font-size: 13.5px; }
.svc-contact {
  margin-top: 14px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.svc-contact-t { font-size: 14px; font-weight: 800; color: var(--text); }
.svc-contact-t::after { content: "\FF5C"; color: var(--border); margin-left: 12px; font-weight: 400; }
.svc-contact-v { font-size: 14px; color: var(--text-2); }
.svc-contact-v b { color: var(--primary); font-size: 16px; letter-spacing: .5px; }
.svc-contact-copy {
  border: 1px solid var(--primary); background: transparent;
  color: var(--primary); font-size: 12.5px; font-weight: 700;
  padding: 5px 14px; border-radius: 99px; cursor: pointer; transition: background .18s;
}
.svc-contact-copy:hover { background: var(--primary-soft); }

/* ---- 纪念字体栏 · 公益性纪念字体和礼物字体开发（简约卡片，同造字开发） ---- */
.svc-mem-txt { margin: 12px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.8; text-align: center; }
.svc-mem-price {
  margin-top: 16px; display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.svc-mem-price-t { font-size: 14px; font-weight: 800; color: var(--text); }
.svc-mem-price-t::after { content: "\FF5C"; color: var(--border); margin-left: 12px; font-weight: 400; }
.svc-mem-price b { font-size: 20px; font-weight: 900; color: #f59e0b; letter-spacing: .5px; }
.svc-mem-price-req { font-size: 13px; color: var(--text-3); }
.svc-mem-price-req::before { content: "\2713"; color: var(--primary); font-weight: 800; margin-right: 6px; }

/* ---- 第四栏 · 造字咖交流群（无卡片，居中） ---- */
.svc-group { display: flex; align-items: center; justify-content: center; gap: 26px; }
.svc-group-qr {
  flex: none; width: 140px; height: 140px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--border);
}
.svc-group-info { text-align: left; }
.svc-group-info b { font-size: 16.5px; color: var(--text); }
.svc-group-info p { margin: 9px 0 0; font-size: 14.5px; color: var(--text-2); }
.svc-group-info em { font-style: normal; font-weight: 900; font-size: 20px; color: var(--primary); letter-spacing: 1px; }
.svc-group-note { font-size: 12.5px; color: var(--text-3); }

/* ---- 来图定制：与整页统一（去米色卡片，蓝主橙辅，无渐变） ---- */
.svc-sec#svcCustom { max-width: 860px; margin-left: auto; margin-right: auto; }
.svc-sec .zzk-custom-wrap { padding: 0; margin-top: 0; }
.svc-sec .zzk-custom-head { margin-bottom: 12px; }
.svc-sec .zzk-custom-head p { margin: 0; font-size: 13px; color: var(--text-3); letter-spacing: .12em; text-align: center; }
.svc-sec .zzk-custom-card {
  background: transparent; border: none; border-top: 1px dashed var(--border);
  border-radius: 0; padding: 16px 0 0; box-shadow: none;
}
.svc-sec .zzk-custom-tip { color: var(--text-2); margin-bottom: 14px; }
.svc-sec .zzk-cf label { color: var(--text-3); }
.svc-sec .zzk-cf input, .svc-sec .zzk-cf select { border-color: var(--border); }
.svc-sec .zzk-cbtn { border-color: var(--primary); color: var(--primary); background: transparent; }
.svc-sec .zzk-cbtn:hover { background: var(--primary-soft); }
.svc-sec .zzk-cbtn.red { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.svc-sec .zzk-cbtn.red:hover { background: #e08909; }
.svc-sec .zzk-quote-out { color: #f59e0b; text-align: center; }
.svc-sec .zzk-quote-note { color: var(--text-3); text-align: center; }
.svc-sec .zzk-custom-remind {
  background: transparent; border-left: 3px solid #f59e0b;
  color: var(--text-2); border-radius: 0; padding: 8px 12px;
}
.svc-sec .zzk-custom-acts { justify-content: center; }

@media (max-width: 860px) {
  .svc-plans, .svc-dev-grid { grid-template-columns: 1fr; }
  .svc-group { flex-direction: column; text-align: center; }
  .svc-group-info { text-align: center; }
}

/* ==================== 页面级品牌蓝 #0271F7（仅 造字首页 / 字体商城 / 服务和活动） ==================== */
#viewHome, #viewBuy, #viewServices {
  --primary: #0271F7;
  --primary-dark: #0260d6;
  --primary-soft: #e6efff;
}
/* 蓝 + 橙 + 黄 + 白 科技流体渐变背景（仅 字体商城 / 服务和活动 · 白色占比大，画面干净） */
#viewBuy, #viewServices {
  background:
    radial-gradient(42rem 30rem at 6% 0%, rgba(2,113,247,.16), transparent 68%),
    radial-gradient(34rem 24rem at 98% 8%, rgba(245,158,11,.14), transparent 68%),
    radial-gradient(30rem 22rem at 80% 44%, rgba(250,204,21,.12), transparent 70%),
    radial-gradient(38rem 28rem at 14% 82%, rgba(2,113,247,.10), transparent 70%),
    radial-gradient(28rem 20rem at 92% 90%, rgba(245,158,11,.09), transparent 68%),
    radial-gradient(26rem 20rem at 46% 118%, rgba(250,204,21,.08), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fdfeff 100%);
}
#viewHome .carousel-slide.s1 { background: linear-gradient(90deg, #0271F7, #0257c4); }
#viewHome .zzk-primary, #viewBuy .zzk-primary, #viewServices .zzk-primary,
#shopModal .zzk-primary {
  background: linear-gradient(135deg, #0271F7, #0260d6);
  box-shadow: 0 6px 18px rgba(2, 113, 247, .32);
}
#viewBuy .shop-ad-poster.p0 { background: linear-gradient(120deg, #0253b8 0%, #0271F7 55%, #3f95ff 100%); }
#viewServices .zzk-cf input:focus, #viewServices .zzk-cf select:focus { border-color: #0271F7; }
#viewHome .zzk-field input:focus, #viewBuy .zzk-field input:focus, #viewServices .zzk-field input:focus,
#shopModal .zzk-field input:focus, #shopModal .zzk-field textarea:focus {
  border-color: #0271F7; box-shadow: 0 0 0 3px rgba(2, 113, 247, .12);
}
#viewServices .svc-plan--perm { box-shadow: 0 4px 16px rgba(2, 113, 247, .14); }

/* ==================== 页面轮播广告位（字帖生成页 / 壁纸制作页 · 150px 通栏） ==================== */
.page-ad { width: 100%; margin: 0 0 12px; }
.page-ad[hidden] { display: none; }
.page-ad .ad-banner { height: auto; aspect-ratio: 1920 / 150; min-height: 100px; max-height: 150px; border-radius: 0; border: 0; box-shadow: none; }
#viewZitie.has-pagead .zitie-frame { height: calc(100vh - 320px); }
#viewWallpaper.has-pagead .wallpaper-frame { height: calc(100vh - 320px); min-height: 620px; }
@media (max-width: 720px) {
  #viewZitie.has-pagead .zitie-frame { height: calc(100vh - 290px); }
  #viewWallpaper.has-pagead .wallpaper-frame { height: calc(100vh - 290px); min-height: 560px; }
}

/* 页面广告位图片：按原比例完整显示，不裁切（白底 contain） */
.page-ad { background: #fff; }
.page-ad .ad-banner { background: #fff; margin: 0 auto; }
.page-ad .carousel-slide-img { object-fit: contain; background: #fff; }