/* ========== AI 图片工坊 (PHP 版) · 全局样式 ========== */
/* 行内 SVG 图标垂直对齐（如积分图标） */
.ic-v { vertical-align: -2px; }
/* 全站禁止文字选中复制（表单输入区除外，保证可正常编辑） */
* { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
/* 后台管理页面允许选中复制 */
.admin-main, .admin-main * { -webkit-user-select: text; user-select: text; }
:root {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #eff6ff;
  --accent: #06b6d4;
  --danger: #ef4444;
  --success: #10b981;
  --warning: #f59e0b;
  --text: #1e293b;
  --text-2: #64748b;
  --text-3: #94a3b8;
  --bg: #f6f7fb;
  --card: #ffffff;
  --border: #e5e7eb;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.05);
  --shadow-lg: 0 8px 30px rgba(15,23,42,.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; display: block; }
h1,h2,h3 { margin: 0; font-weight: 700; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.main { min-height: calc(100vh - 330px); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 9px 18px;
  transition: all .18s ease; white-space: nowrap; font-family: inherit;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 60%, #10b981 100%); color: #fff; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(59,130,246,.35); }
.btn-outline { background: #fff; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: var(--danger); color: #fff; }
.buy-card-btn { margin-top: 14px; background: linear-gradient(135deg, #22c55e 0%, #06b6d4 100%); color: #fff; font-weight: 700; text-decoration: none; border: none; box-shadow: 0 6px 16px rgba(6,182,212,.35); }
.buy-card-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(6,182,212,.45); }
.btn-danger:hover { filter: brightness(1.08); }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 13px 28px; font-size: 16px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn-white-lg { background: #fff; color: var(--primary-dark); padding: 13px 26px; border-radius: 12px; font-weight: 700; }
.btn-ghost-lg { border: 1px solid rgba(255,255,255,.5); color: #fff; padding: 13px 26px; border-radius: 12px; font-weight: 600; }

/* ---------- 表单 ---------- */
.input, .select, .textarea {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 14px; font-size: 14px; color: var(--text);
  background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; font-family: inherit;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.textarea { min-height: 110px; resize: vertical; }
.form-item { margin-bottom: 16px; }
.form-item--tight { margin-top: -10px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.card-input { text-transform: uppercase; font-size: 16px; letter-spacing: 1px; }

/* ---------- 卡片 ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }

/* ---------- 徽章 / 提示 ---------- */
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.7; }
.badge-blue { background: var(--primary-light); color: var(--primary-dark); }
.badge-green { background: #d1fae5; color: #047857; }
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-gray { background: #f1f5f9; color: var(--text-2); }
.badge-yellow { background: #fef3c7; color: #b45309; }
.chip-sm { padding: 2px 10px; border-radius: 999px; font-size: 12px; background: var(--bg); color: var(--text-2); }
.flash { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: rgba(0,0,0,.8); color: #fff; font-size: 14px; font-weight: 500;
  padding: 11px 22px; border-radius: 999px; white-space: nowrap; max-width: 86vw;
  overflow: hidden; text-overflow: ellipsis; z-index: 9999;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .45s ease, visibility .45s ease; }
.flash.show, .flash.hide { opacity: 1; visibility: visible; }
.flash.hide { opacity: 0; }

/* ---------- 导航 ---------- */
.navbar { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.navbar-inner { display: flex; align-items: center; gap: 24px; height: 62px; }
.navbar.has-back .navbar-inner { justify-content: flex-start; }
.navbar.has-back .navbar-inner .nav-links { flex: 0 0 auto; }
.navbar .logo { font-size: 20px; font-weight: 800; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo-img { height: 38px; width: auto; display: block; }
/* 展开搜索框时输入框左边界对齐域名文字左边（由 JS 设 left），浮于顶层 */
.navbar .logo { position: relative; z-index: 5; }
.nav-back { order: -1; margin-right: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; text-decoration: none; backdrop-filter: blur(4px); box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.nav-back svg { width: 20px; height: 20px; }
.nav-back:hover { background: rgba(0,0,0,.7); }
.logo-domain {
  font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #2563eb;
  border: 1.5px solid rgba(37, 99, 235, .25); background: rgba(37, 99, 235, .06);
  padding: 2px 10px; border-radius: 999px; line-height: 1.7;
}
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-links a { padding: 8px 14px; border-radius: 8px; color: var(--text-2); font-weight: 600; font-size: 14px; }
.nav-links a:hover { color: var(--primary); background: var(--primary-light); }
.nav-links a.active { color: var(--primary); background: var(--primary-light); }
.nav-search { display: flex; gap: 6px; align-items: center; }
.nav-search-input { width: 170px; padding: 7px 12px; font-size: 13px; border-radius: 999px; }
/* 手机端图库页右上角搜索（替代头像）：桌面默认隐藏，仅 body.page-gallery 且 ≤900px 显示 */
.nav-search-m { display: none; }
.btn-search-m {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px; border: none; cursor: pointer; flex-shrink: 0;
  background: linear-gradient(135deg, #22c55e, #06b6d4); color: #fff;
  box-shadow: 0 4px 12px rgba(6,182,212,.4);
}

/* ---------- Hero 搜索 ---------- */
.hero-search {
  display: flex; gap: 10px; max-width: 620px; margin-top: 26px;
  position: relative; z-index: 1; background: #fff; border-radius: 999px;
  padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.hero-search-input { border: none; background: transparent; font-size: 15px; flex: 1; }
.hero-search-input:focus { box-shadow: none; border-color: transparent; }
.hero-search-btn {
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff;
  border-radius: 999px; padding: 10px 26px; font-weight: 700; border: none; cursor: pointer;
}
.hero-search-btn:hover { filter: brightness(1.1); }
.navbar-right { display: flex; align-items: center; gap: 6px; }
.points-chip { background: var(--primary-light); color: var(--primary-dark); padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.avatar-circle {
  width: 34px; height: 34px; border-radius: 12px 12px 12px 12px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-weight: 700; font-size: 14px;
}
.avatar-circle svg { flex-shrink: 0; }
.avatar-circle.lg { width: 64px; height: 64px; font-size: 26px; }
.avatar-logo { width: 70%; height: 70%; object-fit: contain; padding: 3px; display: block; }
.user-box { position: relative; }
/* 悬停桥：覆盖图标与菜单之间的空隙，鼠标移动过程中不会丢失 hover */
.user-box::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
/* 手机端分享按钮：桌面默认隐藏，圆圈底色由内联 style 跟随底部导航点亮色 */
.nav-share-m {
  display: none; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
  background: #0b9ab6; color: #fff; padding: 0;
  box-shadow: 0 4px 12px rgba(6,182,212,.4);
}
.nav-share-m:active { opacity: .6; }
.user-drop {
  display: none; position: absolute; right: 0; top: 100%; min-width: 170px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 200;
}
.user-drop .user-head { padding: 8px 12px; font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.user-drop a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--text); }
.user-drop a:hover { background: var(--primary-light); color: var(--primary-dark); }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 60%, #10b981 100%); color: #fff; padding: 72px 0; position: relative; overflow: hidden; }
.hero h1 { font-size: 40px; line-height: 1.25; margin-bottom: 14px; }
.hero p { font-size: 17px; opacity: .92; max-width: 640px; }
.hero-actions { display: flex; gap: 12px; margin-top: 28px; position: relative; z-index: 1; }
.hero-tip { margin-top: 14px; font-size: 13px; opacity: .85; position: relative; z-index: 1; }
.hero::after { content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255,255,255,.08); }

/* ---------- 图片瀑布流 ---------- */
.masonry { columns: 4 240px; column-gap: 18px; }
.masonry > * { break-inside: avoid; margin-bottom: 18px; }
.img-card {
  position: relative; border-radius: var(--radius); overflow: hidden; background: #fff;
  border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; cursor: pointer;
}
.img-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.img-card .img-wrap { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #f3f4f6; }
/* 图片 absolute 填满固定比例容器：加载前(无固有尺寸)与加载后(带固有尺寸)盒子恒定 4:3，
   不再因 img 固有比例撑开/跳动，全程直接 cover 铺满 */
.img-card .img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.img-card .img-info { padding: 12px 14px; }
.img-card .img-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-card .img-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; color: var(--text-3); }
.price-tag { color: var(--danger); font-weight: 700; font-size: 13px; }
.price-tag .discount { color: var(--success); font-size: 12px; margin-left: 6px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin: 30px 0 4px; }
.section-head h2 { font-size: 20px; }

/* ---------- 分类 ---------- */
.cat-scroll { display: flex; align-items: center; gap: 2px; margin: 12px 0; }
.cat-arrow { display: none; align-items: center; justify-content: center; width: 22px; height: 30px; border: none; background: transparent; cursor: pointer; flex-shrink: 0; padding: 0; }
.cat-arrow:active { opacity: .5; }
.cat-chip.cat-all { flex-shrink: 0; }
.cat-nav { display: flex; gap: 3px; flex-wrap: wrap; margin: 12px 0; }
.cat-chip {
  padding: 8px 16px; background: #fff; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .15s; display: inline-block;
}
.cat-chip:hover { border-color: var(--primary); color: var(--primary); }
.cat-chip.active { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; border-color: transparent; }

/* ---------- 工具栏 / 分页 ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0; }
.search-form { display: flex; gap: 8px; align-items: center; }
.search-form .input { max-width: 320px; }
.pagination { display: flex; gap: 8px; justify-content: center; margin: 32px 0; }
.pagination a, .pagination .dots {
  min-width: 38px; height: 38px; line-height: 36px; text-align: center; border-radius: 10px;
  border: 1px solid var(--border); background: #fff; font-size: 14px; color: var(--text); font-weight: 600; display: inline-block;
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination a.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination a.disabled { opacity: .45; pointer-events: none; }
.pagination .dots { border: none; background: none; }

/* ---------- 登录注册 ---------- */
.auth-wrap { display: flex; align-items: flex-start; justify-content: center; padding: 12px 16px 32px; }
.auth-card { width: 100%; max-width: 400px; padding: 18px 26px; }
.auth-card h2 { font-size: 22px; margin-bottom: 4px; }
.auth-tip { color: var(--text-2); font-size: 13px; margin-bottom: 14px; }
.auth-foot { text-align: center; font-size: 14px; color: var(--text-2); margin-top: 14px; }

/* ---------- 会员 ---------- */
.member-summary { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; max-width: 720px; margin: 22px auto 0; justify-content: center; }
.member-summary .ms-item { text-align: center; }
.member-summary .k { font-size: 12px; color: var(--text-3); }
.member-summary .v { font-weight: 700; margin-top: 2px; }
.member-summary .v.big { font-size: 26px; color: var(--primary); }
.membership-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 26px; }
.membership-card { text-align: center; padding: 28px 22px; position: relative; }
.membership-card.hot { border: 2px solid var(--primary); box-shadow: var(--shadow-lg); }
.membership-card .m-name { font-size: 18px; font-weight: 700; }
.membership-card .m-price { font-size: 30px; font-weight: 800; color: var(--primary); margin: 10px 0; }
.membership-card .m-price small { font-size: 13px; color: var(--text-3); font-weight: 400; }
.membership-card ul { list-style: none; padding: 0; margin: 16px 0; text-align: left; }
.membership-card li { padding: 7px 0; font-size: 14px; color: var(--text-2); display: flex; gap: 8px; }
.membership-card li::before { content: '✓'; color: var(--success); font-weight: 800; }
.hot-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 14px; border-radius: 999px; }
.plain-list { color: var(--text-2); font-size: 14px; line-height: 2.2; padding-left: 20px; }

/* ---------- 详情 ---------- */
.detail-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; padding: 30px 0; }
.detail-img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--shadow-lg); }
.detail-panel h1 { font-size: 22px; margin: 12px 0; }
.badges { display: flex; gap: 8px; }
.desc { color: var(--text-2); font-size: 14px; }
.prompt-box { background: var(--primary-light); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--primary-dark); margin: 14px 0; }
.detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.detail-meta .item { background: var(--bg); border-radius: 10px; padding: 10px 14px; }
.detail-meta .k { font-size: 12px; color: var(--text-3); }
.detail-meta .v { font-weight: 700; font-size: 15px; margin-top: 2px; }
.price-row { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 16px; }
.big-price { font-size: 30px; font-weight: 800; color: var(--danger); }
.old-price { text-decoration: line-through; color: var(--text-3); }
.tip-text { font-size: 12px; color: var(--text-3); margin: 10px 0 0; }

/* ---------- 充值 ---------- */
.recharge-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-top: 20px; }
.points-big { font-size: 40px; font-weight: 800; color: var(--primary); }
.demo-tip { background: var(--bg); border-radius: 10px; padding: 12px; margin-top: 18px; font-size: 13px; color: var(--text-2); }
.demo-tip code { display: block; margin-top: 6px; font-weight: 700; color: var(--primary-dark); }

/* ---------- AI 生图 ---------- */
.ai-layout { display: grid; grid-template-columns: 420px 1fr; gap: 26px; padding: 10px 0 0; }
.prompt-examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.prompt-examples button { font-size: 12px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text-2); cursor: pointer; }
.prompt-examples button:hover { border-color: var(--primary); color: var(--primary); }
.ai-result-box { min-height: 420px; border: 2px dashed var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--text-3); background: #fff; overflow: hidden; }
.ai-result-box img { width: 100%; max-height: 560px; object-fit: contain; }
.ai-placeholder { text-align: center; padding: 20px; }
.ph-icon { font-size: 44px; }
.ai-cost-tip { font-size: 12px; color: var(--text-3); margin-top: 8px; text-align: center; }
.result-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- 个人中心 ---------- */
.profile-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.ph-info { flex: 1; min-width: 180px; }
.ph-name { font-size: 18px; font-weight: 700; }
.ph-points { text-align: center; padding: 0 16px; }
.profile-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin-top: 20px; }
.tabs { margin: 0 0 14px; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; padding: 10px 12px; color: var(--text-2); font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; }
.table tr:hover td { background: #fafbff; }
.table .thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; }
.strong { font-weight: 600; }
.muted { color: var(--text-2); }
.pos { color: var(--success); font-weight: 700; }
.neg { color: var(--danger); font-weight: 700; }
.mono { font-family: Consolas, monospace; }
.nowrap { white-space: nowrap; }
.maxw { max-width: 280px; }

/* ---------- 统计 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-grid.mini { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat-card .num { font-size: 28px; font-weight: 800; margin-top: 4px; }
.stat-card .lbl { color: var(--text-2); font-size: 13px; }
.num.blue { color: var(--primary); }
.num.green { color: var(--success); }
.num.orange { color: var(--warning); }
.num.red { color: var(--danger); }
.trend-chart { display: flex; align-items: flex-end; gap: 4px; height: 200px; padding: 8px 4px 0; }
.trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.trend-col .bars { width: 100%; height: 150px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.trend-col .bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; }
.bar.green { background: var(--success); }
.bar.blue { background: var(--primary); }
.bar.purple { background: var(--accent); }
.trend-col .day { font-size: 10px; color: var(--text-3); }
.legend { display: flex; gap: 18px; margin-top: 12px; font-size: 12px; color: var(--text-2); }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.dot.green { background: var(--success); }
.dot.blue { background: var(--primary); }
.dot.purple { background: var(--accent); }

/* ---------- 管理后台 ---------- */
.admin-title { margin-bottom: 18px; font-size: 22px; }
.admin-main { padding-top: 26px; padding-bottom: 30px; }

/* ---------- 弹窗 ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 480px; padding: 26px; box-shadow: var(--shadow-lg); max-height: 88vh; overflow-y: auto; }
.modal h3 { font-size: 18px; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ---------- 状态 ---------- */
.empty { text-align: center; color: var(--text-3); padding: 40px 0; font-size: 15px; }
.page-head { padding: 36px 0 8px; }
.page-title { font-size: 26px; }
.page-sub { color: var(--text-2); margin-top: 6px; }

/* ---------- 页脚 ---------- */
.footer { border-top: 1px solid var(--border); background: #fff; padding: 26px 0; color: var(--text-3); font-size: 13px; text-align: center; margin-top: 50px; }
.footer-links { margin-bottom: 6px; color: var(--text-2); }
.footer-links a { color: var(--text-2); margin: 0 4px; }

/* ---------- 响应式 ---------- */
/* 手机端底部导航：默认在桌面隐藏，移动端在下方媒体查询中显示 */
.m-tabbar { display: none; }

@media (max-width: 900px) {
  .detail-layout, .ai-layout, .recharge-grid, .profile-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 30px; }
  .nav-links { display: none; }
  .nav-search { display: none; }
  /* 手机端顶栏仿 SSS库：透明背景 + 左侧 logo（直接用完整 logo.png）+ 右侧用户，底部渐变分割线 */
  /* 注意：必须用 .navbar .navbar-inner（specificity 0,2,0），否则会被下面 .navbar .container { padding:0 }（specificity 也是 0,2,0 但定义更靠后）覆盖为 0 */
  /* 注意：必须用 !important，否则 padding 会被下方 .navbar .container { padding:0 }（同 specificity 0,2,0，后定义胜出）覆盖 */
  .navbar .navbar-inner { justify-content: space-between; height: auto; padding: 8px 6px !important; }  /* 上下 8px，与 SSS库 navbar__inner 一致 */
  .navbar.has-back .navbar-inner { justify-content: flex-start; }
  .navbar.has-back .navbar-inner .navbar-right { margin-left: auto; }
  .navbar.has-back .nav-back { width: 30px; height: 30px; }
  .navbar.has-back .nav-back svg { width: 18px; height: 18px; }
  /* 手机端右上角头像/积分改成分享按钮 */
  .nav-share-m { display: inline-flex; }
  .navbar-right .user-box, .navbar-right .points-chip:not(.points-chip-m) { display: none; }
  /* 指定页面（AI生图/工具/图片详情）登录状态下，分享按钮左侧显示积分 */
  .navbar-right .points-chip.points-chip-m { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 3px 9px; background: #23303f; color: #fff; }
  /* 未登录时同位置显示「登录」入口（仅指定页面手机端显示） */
  .nav-login-m { display: none; }
  .navbar-right .nav-login-m.nav-login-m--show { display: inline-flex; align-items: center; font-size: 11px; padding: 3px 11px; background: #23303f; color: #fff; border-radius: 999px; text-decoration: none; font-weight: 700; }
  .nav-logo-img { height: 30px; }        /* 移动端图标直接用 logo.png */
  /* 移动端显示域名徽标（由 PHP 控制在图库/我的页隐藏），只留 logo 图 */
  /* 透明背景：滚动时下方内容从顶栏透出（对齐 SSS库），保留 ::after 渐变分割线 */
  .navbar { padding: 0 12px; margin: 0; background: #eaf7f0; border-bottom: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .main { padding-top: 8px; }
  .navbar .container { padding: 0; }
  .navbar::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px; background: linear-gradient(90deg,rgba(0,0,0,.08),transparent); pointer-events: none; }

  /* 手机端图库页：默认只显示搜索图标，点击后输入框从右向左展开，覆盖住域名 */
  body.page-gallery .nav-search-m { display: flex; align-items: center; flex: 0 0 auto; }
  /* 输入框以 navbar-inner 为定位父级，从 logo 左边一直盖到搜索图标左边 */
  body.page-gallery .navbar-inner { position: relative; }
  body.page-gallery .nav-search-m .nav-search-input {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 9;
    left: 0; width: 0; padding-left: 0; padding-right: 0; opacity: 0; overflow: hidden;
    height: 34px; border-radius: 999px; border: 1px solid var(--border); background: #fff;
    transition: width .28s ease, opacity .2s ease, padding .28s ease; pointer-events: none;
  }
  body.page-gallery .navbar-inner .nav-search-m.open .nav-search-input {
    padding-left: 16px; padding-right: 16px; opacity: 1; pointer-events: auto;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
  }

  /* 手机端我的页：隐藏整个顶部导航（logo + 用户区都不要），直接显示用户卡 */
  body.page-profile .navbar { display: none; }
  /* 手机端工具页：隐藏顶部"工具中心"标题模块 */
  body.page-tools .page-head { display: none; }
  /* 各页面背景：顶部统一浅色 #eaf7f0，底部为点亮图标色的淡色版本（再淡一档） */
  body.page-profile { background: linear-gradient(170deg, #eaf7f0 0%, #d9eff6 45%, #d3ebf3 70%, #d8eef5 100%); background-attachment: fixed; }
  body.page-gallery { background: linear-gradient(170deg, #eaf7f0 0%, #f9efdb 45%, #f7e9d0 70%, #f5e4c6 100%); background-attachment: fixed; }
  body.page-ai { background: linear-gradient(170deg, #eaf7f0 0%, #e6f2e0 45%, #e2f0db 70%, #e4f2de 100%); background-attachment: fixed; }
  body.page-tools { background: linear-gradient(170deg, #eaf7f0 0%, #fdeaea 45%, #fbe4e4 70%, #fce6e6 100%); background-attachment: fixed; }

  /* 手机端底部导航（复刻「刷题小游戏」ft-bar：奶油浮动胶囊 + 滑动旋钮） */
  /* body 背景渐变用 fixed：始终以视口为基准铺满，内容不满一屏时底部也不会缺色 */
  body { padding: 0 0 84px; min-height: 100dvh; background: linear-gradient(170deg,#eaf7f0 0%,#e4eff9 35%,#f3e8f9 70%,#fef0e8 100%) fixed; }
  .footer { display: none; }
  .m-tabbar {
    display: flex; align-items: center; justify-content: space-around;
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 12px; z-index: 120;
    width: calc(100% - 32px); max-width: 480px; height: 52px; padding: 4px 4px;
    background: rgba(255,253,247,.95);
    border: 1px solid rgba(245,228,208,.5);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
  }
  .m-tabbar__knob {
    position: absolute; top: 50%; transform: translate(-50%,-50%);
    width: 62px; height: 62px; border-radius: 50%; pointer-events: none;
    background: linear-gradient(180deg,#fff, rgba(255,247,230,.9));
    border: 1px solid rgba(var(--glow,99,102,241),.5);
    box-shadow: 0 0 22px rgba(var(--glow,99,102,241),.45), 0 0 44px rgba(var(--glow,99,102,241),.22), 0 4px 10px rgba(0,0,0,.05);
    transition: left .3s cubic-bezier(.25,.8,.25,1.2), border-color .3s, box-shadow .3s;
    left: 12.5%;
  }
  .m-tabbar.no-knob .m-tabbar__knob { display: none; }
  .m-tabbar.is-hidden { display: none; }
  .m-tabbar { -webkit-tap-highlight-color: transparent; }
  .m-tab {
    position: relative; z-index: 1; flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 46px; text-decoration: none; color: var(--text-3);
    transition: color .2s;
    outline: none; -webkit-tap-highlight-color: transparent;
  }
  .m-tab:focus, .m-tab:focus-visible, .m-tab:active { outline: none; box-shadow: none; }
  .m-tab__ic { display: flex; align-items: center; justify-content: center; }
  .m-tab__ic svg { width: 22px; height: 22px; display: block; }
  .m-tab__lb { font-size: 11px; line-height: 1; letter-spacing: .5px; }
  .m-tab.is-active { color: var(--tc); }
  .m-tab.is-active .m-tab__lb { color: #111; font-weight: 700; font-size: 12px; }
  .m-tab.is-active .m-tab__ic { animation: mTabPop .3s ease; }
  @keyframes mTabPop { 0%{transform:translateY(0)} 30%{transform:translateY(-3px)} 100%{transform:translateY(0)} }

  /* 登录注册：手机端面板宽度与其他面板一致（取消桌面 400px 限制，占满容器） */
  .auth-card { max-width: none; }
}

/* ========== 手机端整体排版优化 ========== */
@media (max-width: 640px) {
  .container { padding: 0 12px; }

  /* 导航栏：紧凑化（高度对齐 SSS库：上下 8px padding，由内容撑开） */
  .navbar-inner { gap: 10px; }
  .navbar .logo { gap: 8px; }
  .nav-search-input { padding: 6px 12px; font-size: 13px; }
  .points-chip { font-size: 11px; padding: 3px 8px; }
  .avatar-circle { width: 30px; height: 30px; font-size: 13px; }
  .logo-domain { font-size: 11px; padding: 1px 8px; }

  /* 图片瀑布流：每行 2 张 */
  .masonry { columns: 2 130px; column-gap: 10px; }
  .masonry > * { margin-bottom: 10px; }
  .img-card .img-info { padding: 8px 10px; }
  .img-card .img-title { font-size: 13px; }
  .price-tag { font-size: 12px; }
  /* 手机双列卡片：隐藏分类小标签，只留价格，避免拥挤 */
  .img-card .chip-sm { display: none; }

  /* 分类导航 */
  .cat-scroll { display: flex; margin: 12px 0; }
  .cat-arrow { display: flex; }
  .cat-nav {
    gap: 3px; margin: 0; flex: 1; min-width: 0;
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-nav::-webkit-scrollbar { display: none; }
  .cat-chip { padding: 6px 12px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

  /* 页面标题区 */
  .page-head { padding: 22px 0 4px; }
  .page-title { font-size: 22px; }
  .section-head h2 { font-size: 17px; }
  .section-head { margin: 24px 0 2px; }

  /* 卡片/按钮/表单 */
  .card { padding: 16px; }
  .btn-lg { padding: 11px 20px; font-size: 15px; }
  .modal { padding: 20px 16px; }
  .demo-tip code { word-break: break-all; }
  .recharge-grid { gap: 14px; }
  .points-big { font-size: 34px; }

  /* 详情页 */
  .detail-layout { gap: 16px; padding: 16px 0; }
  .detail-meta { gap: 8px; margin: 14px 0; }
  .detail-meta .item { padding: 8px 10px; }
  .detail-panel h1 { font-size: 19px; }
  .big-price { font-size: 26px; }

  /* AI 生图 */
  .ai-result-box { min-height: 300px; }
  .prompt-examples button { font-size: 11px; padding: 4px 10px; }

  /* 表格 */
  .table td, .table th { padding: 8px 8px; font-size: 13px; }
  .table .thumb { width: 44px; height: 34px; }

  /* 分页 */
  .pagination { margin: 24px 0; gap: 6px; }
  .pagination a, .pagination .dots { min-width: 34px; height: 34px; line-height: 32px; font-size: 13px; }

  /* 会员中心 */
  .membership-grid { gap: 14px; margin-top: 18px; }
  .member-summary { gap: 14px; }

  /* 登录注册 */
  .auth-wrap { padding: 12px 0px 28px; }
  .auth-card { padding: 16px 18px; }

  /* 后台 */
  .admin-main { padding: 14px; }
  .admin-sidebar { padding: 10px 8px; }
  .admin-sidebar a { padding: 8px 10px; font-size: 13px; }
  .stat-grid { gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-card .num { font-size: 22px; }

  /* 页脚 */
  .footer { padding: 20px 0; font-size: 12px; }
}

/* AI 生图：画布尺寸方块单选 */
.size-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.size-opt { position: relative; flex: 1 1 calc(33.333% - 7px); min-width: 0; cursor: pointer; }
.size-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.size-box { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 58px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; }
.size-box b { font-size: 15px; font-weight: 700; color: var(--text); order: 2; }
.size-box i { font-style: normal; font-size: 12px; color: var(--text-2); order: 1; margin: 0 0 3px; }
.size-box i svg { display: block; margin: 0 auto; }
.size-opt:hover .size-box { border-color: var(--primary); }
.size-opt input:checked + .size-box { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 2px 10px rgba(37,99,235,.18); }
.size-opt input:checked + .size-box b { color: var(--primary-dark); }
.size-opt input:checked + .size-box i { color: var(--primary); }
.size-opt input:focus-visible + .size-box { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 极窄屏（<380px）：隐藏次要元素，保证导航可读 */
@media (max-width: 380px) {
  .nav-search-input { width: 90px; }
  .cat-chip { padding: 5px 10px; font-size: 12px; }
}

/* ===== 工具中心页 ===== */
.page-sub { color: var(--text-2); margin: 6px 0 18px; font-size: 15px; }
.tools-card { margin-bottom: 22px; }
.tools-card__title { margin: 0 0 6px; font-size: 18px; }
.tools-card__desc { color: var(--text-2); font-size: 14px; margin: 0 0 12px; }
.textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; font-family: inherit; line-height: 1.5; resize: vertical; box-sizing: border-box; }
.textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); outline: none; }
.tools-card__btns { display: flex; gap: 10px; margin-top: 12px; }
.ai-wrap .tools-grid { padding: 16px 16px 16px; }
.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tools-link { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding: 10px 8px; background: #fff; border: 1px solid rgba(15,23,42,.06); border-radius: 14px; text-decoration: none; color: var(--text); position: relative; overflow: hidden; transition: transform .15s, box-shadow .2s, border-color .2s; }
.tools-link::before { content: ''; position: absolute; top: -46px; right: -46px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, var(--glow, rgba(15,23,42,.05)), transparent 70%); pointer-events: none; }
.tools-link:active { transform: scale(.96); }
.tools-link:hover { transform: translateY(-3px); border-color: rgba(61,163,31,.35); }
.tools-link__ic { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; color: var(--c, #a78bfa); background: var(--ic1, #f1f5f9); line-height: 1; }
.tools-link__t { font-weight: 700; font-size: 14px; color: #111; text-align: left; line-height: 1.25; }
.tools-link__d { display: none; }
/* 图标底多彩渐变（6 色循环） */
.tools-link:nth-child(7n+1) .tools-link__ic { --ic1: #e6f7ee; --ic2: #cdeedd; }
.tools-link:nth-child(7n+2) .tools-link__ic { --ic1: #f3e8fd; --ic2: #e6d3fa; }
.tools-link:nth-child(7n+3) .tools-link__ic { --ic1: #e0f2fd; --ic2: #c4e6fa; }
.tools-link:nth-child(7n+4) .tools-link__ic { --ic1: #fdf0dc; --ic2: #f8e0ba; }
.tools-link:nth-child(7n+5) .tools-link__ic { --ic1: #ffe9e9; --ic2: #fcd3d3; }
.tools-link:nth-child(7n+6) .tools-link__ic { --ic1: #e8efff; --ic2: #d2dffc; }
.tools-link:nth-child(7n+1) { --glow: rgba(61,163,31,.10); --c: #16a34a; }
.tools-link:nth-child(7n+2) { --glow: rgba(168,85,247,.12); --c: #a855f7; }
.tools-link:nth-child(7n+3) { --glow: rgba(59,130,246,.10); --c: #3b82f6; }
.tools-link:nth-child(7n+4) { --glow: rgba(245,158,11,.12); --c: #f59e0b; }
.tools-link:nth-child(7n+5) { --glow: rgba(251,86,86,.10); --c: #ef4444; }
.tools-link:nth-child(7n+6) { --glow: rgba(99,102,241,.10); --c: #6366f1; }
.tools-link:nth-child(7n+7) .tools-link__ic { --ic1: #e0f5f2; --ic2: #c3e8e2; }
.tools-link:nth-child(7n+7) { --glow: rgba(20,184,166,.10); --c: #14b8a6; }
@media (min-width: 641px) { .tools-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
/* ===== 个人中心（SSS库 前台管理面板 · 美化版） ===== */
.pc-manage { max-width: 640px; margin: 0 auto; padding: 4px 0 20px; }
.m-user { animation: mFadeUp .32s ease both; }
.m-stats { animation: mFadeUp .32s ease .07s both; }
.m-list { animation: mFadeUp .32s ease .14s both; }
.m-loginbtn { animation: mFadeUp .32s ease .21s both; }
@keyframes mFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- 用户头部卡片 ---- */
.m-user { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; background: linear-gradient(135deg, #0b9ab6, #0a8aa4 55%, #097b92); border: 1px solid rgba(255,255,255,.28); border-radius: 18px; padding: 18px 16px; box-shadow: 0 8px 26px rgba(11,154,182,.28); }
.m-user::before { content: ''; position: absolute; right: -70px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); pointer-events: none; }
.m-user::after { content: ''; position: absolute; left: -50px; bottom: -90px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.1), transparent 70%); pointer-events: none; }
.m-user__avatar { width: 56px; height: 56px; border-radius: 16px 16px 16px 16px; overflow: hidden; background: linear-gradient(135deg, #ffffff, #e6fff7); color: #0a8aa4; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0,0,0,.2), inset 0 0 0 3px rgba(255,255,255,.5); position: relative; z-index: 1; }
.m-user__info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.m-user__name { font-size: 18px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-shadow: 0 1px 2px rgba(0,0,0,.08); }
.m-user__vip { background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.m-user__sub { font-size: 12px; color: rgba(255,255,255,.82); margin-top: 4px; }
.m-user__side { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; flex-shrink: 0; flex-basis: 100%; }
.m-user__coin { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.95); color: #b45309; padding: 6px 12px; border-radius: 999px; font-size: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.m-user__coin b { font-size: 19px; font-weight: 800; color: #ea8c00; }
.m-user__recharge { background: #fff; color: #0a8aa4; border: 0; padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 800; cursor: pointer; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.16); transition: transform .15s, box-shadow .15s; }
.m-user__recharge:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.2); }

/* ---- 数据概览 ---- */
.m-stats { display: flex; justify-content: flex-start; gap: 10px; margin-top: 12px; }
.m-stat { background: #fff; border: none; border-radius: 14px; padding: 9px 4px; text-align: center; box-shadow: 0 4px 16px rgba(15,23,42,.06); transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; overflow: hidden; width: 150px; flex-shrink: 0; }
.m-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.1); }
.m-stat__row { display: flex; align-items: center; justify-content: center; gap: 2px; }
.m-stat__bg { display: inline-flex; align-items: center; color: var(--c); line-height: 1; }
.m-stat__ic { width: 28px; height: 28px; border-radius: 50%; background: var(--ic, #f0fdfa); color: var(--c); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.m-stat b { font-size: 17px; color: #0f172a; line-height: 1.1; font-weight: 800; }
.m-stat span { font-size: 10.5px; color: var(--text-2); }

/* ---- 功能列表 ---- */
.m-list { background: #fff; border-radius: 18px; margin-top: 12px; box-shadow: 0 6px 24px rgba(15,23,42,.07); overflow: hidden; }
.m-group { font-size: 11px; color: var(--text-3); letter-spacing: .08em; padding: 14px 16px 4px; }
.m-item { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); cursor: pointer; transition: background .15s; }
.m-item:last-child { border-bottom: 0; }
.m-item:hover { background: #f8fafc; }
.m-item:active { background: #f1f5f9; }
.m-item__ic { width: 40px; height: 40px; border-radius: 12px; background: transparent; color: #111; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.m-item__label { flex: 1; font-size: 14.5px; font-weight: 500; }
.m-item__arrow { display: flex; align-items: center; color: var(--text-3); transition: transform .15s; }
.m-item:hover .m-item__arrow { transform: translateX(3px); color: var(--primary); }
.m-item--recharge { background: linear-gradient(135deg, #0b9ab6, #0a8aa4); color: #fff; border-bottom: 0; margin: 8px 10px; border-radius: 12px; padding: 12px 14px; }
.m-item--recharge .m-item__ic { background: rgba(255,255,255,.18); }
.m-item--recharge .m-item__arrow { color: rgba(255,255,255,.8); }
.m-item--recharge:hover { background: linear-gradient(135deg, #12b596, #0e9a7d); }

/* ---- 退出按钮 ---- */
.m-loginbtn { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; text-align: center; background: #fff; border: 1px solid var(--border); color: var(--text-2); padding: 13px; border-radius: 16px; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 16px rgba(15,23,42,.06); transition: color .15s, border-color .15s; }
.m-loginbtn:hover { color: var(--danger); border-color: #fecaca; }

/* ---- 弹层（mask + panel，复刻 SSS库 前台弹层） ---- */
.mask { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; }
.mask.hidden { display: none; }
.panel { position: relative; background: #fff; border-radius: 18px; width: 100%; max-width: 480px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(15,23,42,.3); animation: pFade .22s ease; }
.panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #0b9ab6, #38c7e8, #0b9ab6); z-index: 3; }
.panel__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 14px; }
.panel__title { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; color: #0f172a; }
.panel__close { cursor: pointer; color: var(--text-3); font-size: 17px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: background .15s, color .15s; }
.panel__close:hover { background: #f1f5f9; color: var(--text); }
.panel__body { padding: 6px 18px 14px; overflow-y: auto; flex: 1; }
.panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); background: #fafbfc; }
.panel__tip { font-size: 12px; color: var(--text-3); }
.panel__ok { background: linear-gradient(135deg, #0b9ab6, #0a8aa4); color: #fff; border: 0; padding: 9px 26px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 10px rgba(11,154,182,.3); }
.panel__ok:hover { filter: brightness(1.08); }
@keyframes pFade { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- 手机端（≤640px）个人中心精修 ---- */
@media (max-width: 640px) {
  .pc-manage { padding: 14px 0 22px; }
  .m-user { gap: 12px; padding: 16px 14px; border-radius: 20px; }
  .m-user__avatar { width: 58px; height: 58px; font-size: 25px; }
  .m-user__name { font-size: 17px; }
  .m-user__sub { font-size: 11.5px; }
  .m-user__side { gap: 8px; }
  .m-user__coin { padding: 5px 10px; }
  .m-user__coin b { font-size: 17px; }
  .m-user__recharge { padding: 7px 16px; font-size: 12.5px; }
  .m-stats { gap: 8px; margin-top: 10px; }
  .m-stat { border-radius: 18px; padding: 14px 6px; width: 110px; }
  .m-stat__ic { width: 26px; height: 26px; }
  .m-stat b { font-size: 17px; }
  .m-stat span { font-size: 10.5px; }
  .m-list { border-radius: 20px; margin-top: 10px; }
  .m-group { padding: 13px 14px 3px; }
  .m-item { padding: 12px 14px; gap: 12px; }
  .m-item__ic { width: 38px; height: 38px; border-radius: 11px; font-size: 18px; }
  .m-item__label { font-size: 14px; }
  .m-item--recharge { margin: 7px 9px; border-radius: 13px; padding: 11px 13px; }
  .m-loginbtn { margin-top: 12px; border-radius: 18px; }
  /* 弹层：近全宽、更大圆角 */
  .mask { padding: 14px; }
  .panel { max-width: 100%; max-height: 86vh; border-radius: 22px; }
  .panel__head { padding: 18px 16px 12px; }
  .panel__body { padding: 4px 16px 12px; }
  .panel__foot { padding: 11px 16px; }
}

/* ===== AI 生图页 3 分类栏（导航与面板融合成一体白卡片） ===== */
.ai-wrap { background: #fff; border: 1px solid rgba(15,23,42,.05); border-radius: 16px; box-shadow: 0 4px 16px rgba(15,23,42,.06); margin-top: 12px; overflow: hidden; }
.ai-tabs { display: flex; gap: 26px; padding: 0 16px; position: relative; }
.ai-tabs::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: var(--border); z-index: 0; }
.ai-tabs .cat-chip { background: none; border: none; padding: 13px 2px 11px; border-radius: 0; color: var(--text-2); font-size: 15px; font-weight: 500; position: relative; }
.ai-tabs .cat-chip:hover { color: rgba(61,163,31,1); background: none; }
.ai-tabs .cat-chip.active { background: none; color: rgba(61,163,31,1); font-weight: 700; border: none; }
.ai-tabs .cat-chip.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px; background: #3da31f; z-index: 1; }
.ai-panel { padding: 16px; }
.ai-panel.hidden { display: none; }
.ai-pane h3 { margin: 0 0 12px; font-size: 16px; }

/* ===== 半透明黑底 toast（保存成功等轻提示，2s 自动渐变消失） ===== */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: rgba(0, 0, 0, .8); color: #fff; font-size: 14px; font-weight: 500;
  padding: 11px 22px; border-radius: 999px; white-space: nowrap; max-width: 86vw;
  overflow: hidden; text-overflow: ellipsis; z-index: 9999;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .45s ease, visibility .45s ease;
}
.toast.show { opacity: 1; visibility: visible; }

/* ===== 禁止手机端页面滑动橡皮筋反弹（rubber band / overscroll） ===== */
@media (max-width: 768px) {
  html, body { overscroll-behavior-y: none; }
}

/* ===== AI 生图：参考图列表（虚线方块+号添加，最多5张） ===== */
.form-label-row { display: flex; align-items: center; justify-content: space-between; }
.ai-ref-list { display: flex; flex-wrap: nowrap; gap: 6px; margin: 6px 0 12px; }
.ai-ref-thumb { position: relative; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; }
.ai-ref-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
.ai-ref-thumb__del { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; line-height: 16px; text-align: center; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ai-ref-add { width: 48px; height: 48px; border-radius: 8px; border: 2px dashed var(--border); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: border-color .15s; }
.ai-ref-add:hover { border-color: var(--primary); }
.ai-ref-add__plus { font-size: 28px; line-height: 1; color: var(--text-3); font-weight: 300; }
.ai-ref-add:hover .ai-ref-add__plus { color: var(--primary); }

.ai-ref-lightbox { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; padding: 20px; }
.ai-ref-lightbox:not([hidden]) { display: flex; }
.ai-ref-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.ai-ref-lightbox__close { position: absolute; top: 16px; right: 20px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 18px; line-height: 36px; text-align: center; cursor: pointer; }

/* 我的模型 - 参考图（一行4个，虚线加号） */
.model-imgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.model-img { position: relative; border: 1px solid var(--border, #eee); border-radius: 10px; overflow: hidden; aspect-ratio: 1/1; background: #f5f5f5; }
.model-img img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.model-img__del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; line-height: 22px; text-align: center; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.model-add { border: 1.5px dashed #cfd6e4; border-radius: 10px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #9aa4b2; background: #fafbfe; transition: border-color .15s, color .15s; }
.model-add:hover { border-color: var(--primary, #ecba1f); color: var(--primary, #ecba1f); }
.model-add__plus { font-size: 34px; line-height: 1; font-weight: 300; }
@media (max-width: 480px) {
  .model-imgs { gap: 8px; }
}

/* 模型列表网格 + 新建卡片 */
.model-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-top: 12px; }
.model-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.model-panel__title { font-size: 15px; font-weight: 600; }
.model-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .model-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .model-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .model-card { border-radius: 12px; } }
@media (max-width: 480px) {
  .model-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .model-panel { padding: 12px; }
  .model-card { border-radius: 12px; }
  .model-card__actions { gap: 20px; padding: 5px 0px 0px; }
  .model-card__btn { font-size: 12px; padding: 6px 0; }
  .model-card__btn--primary { font-size: 11px; padding: 5px 0; }
}
.model-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--border, #eee); border-radius: 14px; overflow: hidden; transition: box-shadow .18s, transform .18s, border-color .18s; }
.model-card:hover { box-shadow: 0 6px 20px rgba(15,23,42,.10); transform: translateY(-3px); border-color: rgba(15,23,42,.12); }
.model-card__link { display: block; }
.model-card__thumb { position: relative; width: 100%; aspect-ratio: 3/4; background: #f6f7f9; cursor: zoom-in; overflow: hidden; }
.model-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.model-card__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 38px; color: #c4cbd6; }
.model-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; background: linear-gradient(to bottom, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 52%, rgba(0,0,0,.42) 100%); }
.model-card__name { color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.model-card__meta { font-size: 12px; color: #999; margin-top: 2px; }
.model-card__actions { display: flex; gap: 10px; }
.model-card__btn { flex: 1; justify-content: center; font-size: 13px; padding: 2px 0; border-radius: 5px; backdrop-filter: blur(2px); background: rgba(0,0,0,.42); color: #fff; border: none; }
.model-card__btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.model-card__btn--primary { background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 60%, #10b981 100%); }
.model-card__btn--primary:hover { filter: brightness(1.08); }
#btnNew3head, #btnNew2 { background: linear-gradient(135deg, #10b981 0%, #13d393 60%, #10b981 100%); }
#btnNew3head:hover:not(:disabled), #btnNew2:hover:not(:disabled) { filter: brightness(1.08); }
.model-grid__add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed #cfd6e4; border-radius: 14px; background: #fafbfe; cursor: pointer; color: #9aa4b2; aspect-ratio: 3/4; transition: border-color .15s, color .15s, background .15s; }
.model-grid__add:hover { border-color: var(--primary, #ecba1f); color: var(--primary, #ecba1f); background: #fffdf6; }
.model-grid__plus { font-size: 34px; line-height: 1; font-weight: 300; }
.model-grid__add-label { font-size: 13px; }