/* =========================================================
   卡片式活码管理界面（参照手机端管理风格）
   ========================================================= */
/* =========================================================
   内联编辑 + 固定保存按钮（新增）
   ========================================================= */
/* 网址输入框：自动换行，完整显示不切割，加大高度 */
.url-textarea {
  min-height: 92px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  resize: vertical;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
}
/* 自适应高度文本框（随内容增减） */
textarea.auto-grow {
  overflow-y: auto;
  resize: vertical;
  transition: height .12s ease-out;
  min-height: 76px;
}
/* 内联字段 */
.inline-field {
  margin-bottom: 12px;
}
.inline-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-2);
}
.inline-input {
  font-size: 13px;
}
/* 网址与文本内容框加大 */
textarea.inline-input {
  min-height: 92px;
  line-height: 1.7;
}
.inline-hint {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-500);
}
.inline-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
/* 子项名称内联输入 */
.item-name-input {
  flex: 1;
  min-width: 80px;
  padding: 5px 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-900);
  background: #fff;
  border: 1.5px solid var(--ink-200);
  border-radius: var(--radius-xs);
  outline: none;
  transition: border-color .18s var(--ease);
}
.item-name-input:focus {
  border-color: var(--brand-1);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .1);
}
.item-name-input::placeholder { font-weight: 400; color: var(--ink-400); }
/* 限速勾选框与输入 */
.rate-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
  user-select: none;
  padding: 6px 10px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-xs);
  transition: all .18s var(--ease);
}
.rate-check:hover { border-color: var(--brand-soft-2); background: var(--brand-soft); }
.rate-check input { width: 15px; height: 15px; cursor: pointer; }
.rate-inputs {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.rate-input {
  width: 62px;
  padding: 6px 8px;
  font-size: 12.5px;
  text-align: center;
}
.rate-sep { font-size: 12px; color: var(--ink-500); }
/* 固定保存按钮 */
.fixed-save-btn {
  position: fixed;
  right: 22px;
  bottom: 32px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--brand-grad);
  border: none;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(79, 70, 229, .38);
  cursor: pointer;
  transition: all .24s var(--ease);
}
.fixed-save-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 36px rgba(79, 70, 229, .48);
}
.fixed-save-btn:active { transform: translateY(0) scale(.98); }
.fixed-save-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.fixed-save-btn.has-dirty {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 10px 28px rgba(16, 185, 129, .42);
  animation: savePulse 1.8s var(--ease) infinite;
}
@keyframes savePulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(16, 185, 129, .42); }
  50% { box-shadow: 0 14px 38px rgba(16, 185, 129, .62); }
}
.save-icon { font-size: 16px; }
@media (max-width: 768px) {
  .inline-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .fixed-save-btn {
    right: 14px;
    bottom: 20px;
    padding: 12px 20px;
    font-size: 14px;
  }
  .item-card-ops { gap: 6px; }
  .rate-check { flex: 1 1 auto; justify-content: center; }
}
/* =========================================================
   移动端体验修复：防止输入时页面自动放大 + 底部固定栏
   ========================================================= */
/* iOS Safari 在输入框字号 < 16px 时会自动放大页面，
   移动端统一把输入控件字号提到 16px，彻底杜绝缩放 */
@media (max-width: 768px) {
  input.form-control,
  textarea.form-control,
  select.form-control,
  .inline-input,
  .item-name-input,
  .rate-input,
  .pager-input,
  .pager-select,
  .item-search {
    font-size: 16px !important;
  }
  /* 文本域保持等宽字体但字号同样 16px */
  textarea.textarea-content,
  textarea.url-textarea {
    font-size: 16px !important;
  }
}
/* 底部固定版权栏：撑住页面底部，避免滑动到底部回弹 */
.site-footer {
  position: relative;
  margin-top: 40px;
  padding: 22px 16px 26px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-500);
  background: linear-gradient(180deg, transparent, rgba(241, 245, 249, .8));
  border-top: 1px solid var(--ink-200);
}
.site-footer a {
  color: var(--brand-2);
  text-decoration: none;
  font-weight: 600;
}
.site-footer a:hover { color: var(--brand-1); }
.site-footer .footer-note {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--ink-400);
}
/* 页面主体撑满高度，配合 footer 消除底部回弹 */
html, body {
  min-height: 100%;
}
/* 注意：body 不能用 flex 布局，否则 .container 作为 flex 子项宽度会被压缩，
   导致内部网格算不出多列空间，电脑端会退化成单列。
   改用 min-height + footer 的 margin-top:auto 方案实现底部固定。 */
body {
  min-height: 100vh;
  display: block;
}
/* 用包裹层实现「内容不足时 footer 贴底」 */
.container, .login-wrap, .mp-wrap, .text-wrap, .rate-wrap {
  min-height: calc(100vh - 140px);
}
.site-footer {
  flex-shrink: 0;
}
/* ---------- 葵花码替换更新栏 ---------- */
.wx-replace-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #f0fdfa, #f8fafc);
  border: 1px solid #99f6e4;
  border-radius: var(--radius-sm);
}
.wx-replace-bar .btn {
  color: #0f766e;
  background: #fff;
  border-color: #5eead4;
  font-weight: 600;
}
.wx-replace-bar .btn:hover {
  color: #fff;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  border-color: transparent;
}
.wx-replace-hint {
  font-size: 11.5px;
  color: var(--ink-500);
}
/* ---------- 通用提示弹窗 ---------- */
.alert-modal { max-width: 380px; }
.alert-modal-body { text-align: center; padding: 26px 22px 20px; }
.alert-icon {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 14px;
  animation: alertShake .5s var(--ease-out) both;
}
@keyframes alertShake {
  0% { transform: scale(.6) rotate(-12deg); opacity: 0; }
  60% { transform: scale(1.08) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.alert-msg {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--ink-800);
  margin-bottom: 12px;
}
.alert-hint {
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.65;
  text-align: left;
  color: #92400e;
  background: var(--warn-soft);
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
}
/* ---------- 二维码预览弹窗 ---------- */
.qr-modal { max-width: 360px; }
.qr-modal-body { text-align: center; }
.qr-modal-img-box {
  padding: 16px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
}
.qr-modal-img-box img {
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  display: block;
}
.qr-modal-link-box { text-align: left; }
.qr-modal-link {
  padding: 10px 12px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-700);
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  word-break: break-all;
}
/* 状态旁的小下载按钮 */
.qr-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  font-size: 12px;
  line-height: 1;
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-2);
  border-radius: 50%;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.qr-mini-btn:hover {
  background: var(--brand-grad);
  border-color: transparent;
  transform: scale(1.12);
}
/* ---------- 置顶样式 ---------- */
.pin-badge {
  flex: none;
  font-size: 14px;
  line-height: 1;
  animation: pinPop .4s var(--ease-out) both;
}
@keyframes pinPop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
.op-pin {
  color: #0f766e;
  background: #f0fdfa;
  border-color: #99f6e4;
}
.op-pin:hover {
  color: #fff;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  border-color: transparent;
}
.code-card-pinned {
  border-color: #5eead4;
  box-shadow: 0 2px 14px rgba(20, 184, 166, .16);
}
/* =========================================================
   子项搜索与筛选（二级页新增）
   ========================================================= */
.item-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #f8faff, #fff);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
}
.item-search {
  flex: 1;
  min-width: 160px;
  max-width: 320px;
}
.filter-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--ink-100);
  border-radius: 999px;
}
.filter-tab {
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-600);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s var(--ease);
  white-space: nowrap;
}
.filter-tab:hover { color: var(--brand-1); }
.filter-tab.active {
  color: #fff;
  background: var(--brand-grad);
  box-shadow: 0 2px 8px rgba(79, 70, 229, .28);
}
/* ---------- 批量上传缩略图网格 ---------- */
.bulk-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.bulk-thumb {
  padding: 8px;
  text-align: center;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  animation: fadeUp .26s var(--ease-out) both;
}
.bulk-thumb img {
  width: 100%;
  height: 64px;
  object-fit: contain;
  margin-bottom: 5px;
  border-radius: var(--radius-xs);
  background: #fff;
}
.bulk-thumb-name {
  font-size: 10.5px;
  color: var(--ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .item-filter-bar { padding: 10px 12px; gap: 8px; }
  .item-search { max-width: none; }
  .filter-tabs { width: 100%; justify-content: space-between; }
  .filter-tab { flex: 1; padding: 7px 8px; font-size: 12px; }
}
/* ---------- 操作按钮区 ---------- */
.op-panel { margin-bottom: 16px; }
.op-main-btn {
  width: 100%;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.op-sub-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
/* 电脑端：创建按钮与三个小按钮并排，避免过度拉伸 */
@media (min-width: 821px) {
  .op-panel {
    display: grid;
    grid-template-columns: 1.1fr 2fr;
    gap: 12px;
    align-items: stretch;
  }
  .op-main-btn { margin-bottom: 0; }
  .op-sub-row { align-items: stretch; }
  .op-sub-btn { height: 100%; }
}
.op-sub-btn {
  padding: 11px 8px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  justify-content: center;
}
/* 搜索面板：电脑端横向排列 */
.search-panel {
  padding: 16px 18px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  animation: fadeUp .26s var(--ease-out) both;
}
@media (min-width: 821px) {
  .search-panel {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
  }
  .search-panel .form-group { margin-bottom: 0; }
  .search-panel > button { width: auto !important; min-width: 110px; }
}
/* ---------- 统计信息条 ---------- */
.stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-600);
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}
.stats-right { color: var(--brand-1); }
/* ---------- 卡片列表：响应式网格（电脑多列 / 手机单列） ---------- */
.code-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
  align-items: start;
}
/* 中等屏幕：两列 */
@media (max-width: 1100px) {
  .code-list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
}
/* 平板：单列但保留卡片宽度 */
@media (max-width: 820px) {
  .code-list { grid-template-columns: 1fr; }
}
.code-card {
  padding: 16px 18px 14px;
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(37, 99, 235, .07);
  transition: all .22s var(--ease);
  animation: fadeUp .32s var(--ease-out) both;
}
.code-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 6px 20px rgba(37, 99, 235, .13);
  transform: translateY(-2px);
}
.code-card-off {
  background: #fafafa;
  border-style: dashed;
  border-color: var(--ink-200);
  opacity: .9;
}
/* 子项卡片头部（字号整体调小） */
.code-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--ink-200);
}
.code-card-id {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-500);
  background: var(--ink-100);
  padding: 2px 7px;
  border-radius: 5px;
}
.code-card-name {
  flex: 1;
  min-width: 80px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ---------- 字段行 ---------- */
.code-card-body { margin-bottom: 10px; }
.field-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0;
  font-size: 12px;
  line-height: 1.6;
}
.field-label {
  flex: none;
  min-width: 84px;
  font-weight: 600;
  color: var(--brand-2);
}
.field-value {
  flex: 1;
  min-width: 0;
  color: var(--ink-800);
  word-break: break-all;
}
.field-value.mono { font-family: var(--font-mono); font-weight: 600; }
.link-value {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.icon-btn {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-2);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all .18s var(--ease);
}
.icon-btn:hover {
  background: var(--brand-soft-2);
  transform: translateY(-1px);
}
/* ---------- 彩色操作按钮 ---------- */
.code-card-ops {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px dashed var(--ink-200);
}
.op-btn {
  flex: 1;
  min-width: 68px;
  padding: 7px 8px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-xs);
  justify-content: center;
}
.op-close {
  color: #6d28d9;
  background: #f5f3ff;
  border-color: #ddd6fe;
}
.op-close:hover {
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: transparent;
}
.op-edit {
  color: #b45309;
  background: #fffbeb;
  border-color: #fde68a;
}
.op-edit:hover {
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: transparent;
}
.op-copy {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}
.op-copy:hover {
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: transparent;
}
.op-del {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}
.op-del:hover {
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: transparent;
}
.op-more {
  flex: none;
  min-width: 40px;
  color: var(--ink-600);
  background: var(--ink-50);
  border-color: var(--ink-200);
}
/* ---------- 展开详情 ---------- */
.code-card-extra {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  animation: fadeUp .24s var(--ease-out) both;
}
.card-extra-ops {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--ink-200);
}
/* ---------- 分页 ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-top: 18px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
}
.pager-info { font-size: 13px; font-weight: 600; color: var(--ink-600); }
.pager-jump {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.pager-input {
  width: 56px;
  padding: 6px 8px;
  text-align: center;
  font-size: 13px;
  border: 1.5px solid var(--ink-200);
  border-radius: var(--radius-xs);
  outline: none;
}
.pager-input:focus { border-color: var(--brand-1); }
.pager-select {
  padding: 6px 8px;
  font-size: 13px;
  border: 1.5px solid var(--ink-200);
  border-radius: var(--radius-xs);
  outline: none;
  cursor: pointer;
}
.pager-label { font-size: 12.5px; color: var(--ink-500); }
/* ---------- 悬浮滚动按钮 ---------- */
.float-scroll {
  position: fixed;
  right: 16px;
  bottom: 80px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.float-btn {
  width: 42px;
  height: 42px;
  font-size: 15px;
  color: var(--ink-600);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--ink-200);
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all .2s var(--ease);
  backdrop-filter: blur(8px);
}
.float-btn:hover {
  color: #fff;
  background: var(--brand-grad);
  border-color: transparent;
  transform: scale(1.08);
}
/* ---------- 开关行 ---------- */
.switch-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  cursor: pointer;
  margin-bottom: 8px;
}
/* ---------- 响应式：手机端优化 ---------- */
@media (max-width: 768px) {
  .container { padding: 14px 12px 60px; }
  .op-main-btn { padding: 14px 16px; font-size: 15px; }
  .op-sub-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .op-sub-btn { padding: 10px 4px; font-size: 12px; }
  .code-card { padding: 14px 14px 12px; }
  .code-card-name { font-size: 14px; }
  .field-row { font-size: 11.5px; }
  .field-label { min-width: 70px; }
  .op-btn { min-width: 60px; padding: 7px 6px; font-size: 12px; }
  .pager { gap: 8px; padding: 12px; }
  .pager-jump { margin-left: 0; width: 100%; justify-content: center; }
  .float-scroll { right: 10px; bottom: 70px; }
  .float-btn { width: 38px; height: 38px; font-size: 13px; }
}
@media (max-width: 480px) {
  .code-card-ops { gap: 6px; }
  .op-btn { min-width: 0; flex: 1 1 calc(50% - 3px); }
  .op-more { flex: 0 0 100%; }
}