/* ========================================
   颗粒画拼豆网站版 — 全站样式
   品牌色: #347EFF (蓝) / #0bb9b6 (青)
   ======================================== */

/* ── 基础重置 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
[hidden] { display: none !important; }
.is-hidden { display: none !important; }
html { font-size: 16px; -webkit-text-size-adjust: 100% }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; color: #1a2233; background: #f3f5f8; line-height: 1.6; min-height: 100vh }
img { max-width: 100%; display: block }
button, input { font: inherit; border: none; outline: none; background: none }
a { color: #347EFF; text-decoration: none }
.numeric { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' }

/* ── 导航栏 ── */
.web-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid #e8ecf1; padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; max-width: 100% }
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: #1a2233 }
.nav-brand .brand-dot { width: 10px; height: 10px; border-radius: 50%; background: #0bb9b6; flex-shrink: 0 }
.nav-links { display: flex; gap: 6px }
.nav-links a { padding: 6px 14px; border-radius: 8px; font-size: 14px; color: #5a6878; transition: all .2s }
.nav-links a:hover, .nav-links a.active { background: #eef3ff; color: #347EFF }

/* ── 页面容器 ── */
.page-wrap { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px }

/* ── Hero 区域 ── */
.hero { text-align: center; padding: 48px 0 32px }
.hero-brand-name { font-size: 28px; font-weight: 800; background: linear-gradient(135deg, #f472b6, #a78bfa, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
.hero-product { font-size: 16px; color: #5a6878; margin-top: 4px }
.hero-slogan { font-size: 14px; color: #8b96a6; margin-top: 8px }

/* 创作页沿用小程序的拼豆落位、扫描与漂浮节奏。 */
.maker-hero { position: relative; display: flex; height: 368px; flex-direction: column; align-items: center; padding: 0; overflow: hidden; isolation: isolate; --bead-size: 30px; --bead-gap: 13px }
.hero.maker-hero { padding: 0 }
.maker-page { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column }
.page-wrap.maker-page-wrap { width: 100%; max-width: 1120px; padding-top: 16px; padding-bottom: 8px }
.maker-page #upload-card { width: 100%; max-width: 960px; margin-right: auto; margin-left: auto }
.maker-page:not(.maker-page--editing) .upload-zone { padding-top: 26px; padding-bottom: 26px }
.maker-page .web-footer { margin-top: auto; padding: 4px 20px 8px }
.maker-page--editing .maker-page-wrap { padding-bottom: 48px }
.maker-stage { position: relative; z-index: 2; width: 236px; height: 236px; flex: none; animation: maker-stage-float 5s ease-in-out 1.3s infinite }
.maker-page:not(.maker-page--editing) .maker-stage { width: 260px; height: 260px }
.maker-page:not(.maker-page--editing) .maker-hero { --bead-size: 34px; --bead-gap: 14px }
.maker-stage::before, .maker-stage::after { position: absolute; top: 105px; width: 70px; height: 1px; background: #cbdde5; content: "" }
.maker-stage::before { left: -64px; transform: rotate(-16deg) }
.maker-stage::after { top: 134px; right: -64px; transform: rotate(18deg) }
.maker-board-frame { position: absolute; z-index: 1; inset: 12px; border: 5px solid #2f7b91; background: #fff; box-shadow: 0 14px 23px rgba(47, 123, 145, .16) }
.maker-board-frame::before, .maker-board-frame::after { position: absolute; z-index: 3; width: 34px; height: 4px; content: ""; animation: maker-port-pulse 2.8s ease-in-out infinite }
.maker-board-frame::before { top: -5px; left: 34px; background: #0bb9b6; box-shadow: 0 0 8px rgba(11, 185, 182, .5) }
.maker-board-frame::after { right: 34px; bottom: -5px; background: #ffc136; box-shadow: 0 0 8px rgba(255, 193, 54, .5); animation-delay: -1.4s }
.maker-board { position: absolute; inset: 5px; display: grid; grid-template-columns: repeat(4, var(--bead-size)); grid-template-rows: repeat(4, var(--bead-size)); align-content: center; justify-content: center; gap: var(--bead-gap); overflow: hidden; border: 1px solid #e7f0f2; background: #fff }
.maker-board::after { position: absolute; z-index: 4; top: 15px; right: 11px; left: 11px; height: 2px; background: #0bb9b6; box-shadow: 0 0 9px rgba(11, 185, 182, .5); content: ""; opacity: 0; animation: maker-scan 4.8s ease-in-out 1.3s infinite }
.maker-bead { position: relative; z-index: 2; width: var(--bead-size); height: var(--bead-size); border-radius: 50%; background: var(--bead-color); box-shadow: inset 0 -3px 5px rgba(17, 35, 55, .1), 0 4px 7px rgba(24, 38, 55, .11); animation: maker-bead-drop .76s cubic-bezier(.2,.9,.2,1.2) var(--bead-delay) both }
.maker-bead::after { position: absolute; top: 5px; left: 7px; width: 9px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.56); content: "" }
.maker-bead:nth-child(1) { --bead-color: #ff5a66; --bead-delay: .12s }.maker-bead:nth-child(2) { --bead-color: #519af4; --bead-delay: .17s }.maker-bead:nth-child(3) { --bead-color: #ffc30f; --bead-delay: .22s }.maker-bead:nth-child(4) { --bead-color: #08c978; --bead-delay: .27s }
.maker-bead:nth-child(5) { --bead-color: #ad68ef; --bead-delay: .32s }.maker-bead:nth-child(6) { --bead-color: #f050ae; --bead-delay: .37s }.maker-bead:nth-child(7) { --bead-color: #ff870c; --bead-delay: .42s }.maker-bead:nth-child(8) { --bead-color: #0acbbb; --bead-delay: .47s }
.maker-bead:nth-child(9) { --bead-color: #707cf3; --bead-delay: .52s }.maker-bead:nth-child(10) { --bead-color: #08b4ec; --bead-delay: .57s }.maker-bead:nth-child(11) { --bead-color: #72d900; --bead-delay: .62s }.maker-bead:nth-child(12) { --bead-color: #ffb20c; --bead-delay: .67s }
.maker-bead:nth-child(13) { --bead-color: #ff5d7b; --bead-delay: .72s }.maker-bead:nth-child(14) { --bead-color: #0aa9ef; --bead-delay: .77s }.maker-bead:nth-child(15) { --bead-color: #04c98f; --bead-delay: .82s }.maker-bead:nth-child(16) { --bead-color: #9675ef; --bead-delay: .87s }
.maker-sparks { position: absolute; z-index: 1; inset: 0; pointer-events: none }
.maker-sparks span { position: absolute; width: 9px; height: 9px; border-radius: 2px; background: var(--spark-color); opacity: .7; animation: maker-spark-drift var(--spark-duration) ease-in-out var(--spark-delay) infinite alternate }
.maker-sparks span:nth-child(1) { top: 16%; left: 24%; --spark-color: #ffc136; --spark-duration: 4.6s; --spark-delay: -1s; border-radius: 50% }
.maker-sparks span:nth-child(2) { top: 33%; left: 16%; --spark-color: #0acbbb; --spark-duration: 5.2s; --spark-delay: -2.3s }
.maker-sparks span:nth-child(3) { top: 50%; right: 17%; --spark-color: #e43fc4; --spark-duration: 4.8s; --spark-delay: -3.1s; border-radius: 50% }
.maker-sparks span:nth-child(4) { top: 63%; left: 19%; --spark-color: #52a1f4; --spark-duration: 5.6s; --spark-delay: -.5s }
.maker-sparks span:nth-child(5) { top: 7%; right: 30%; --spark-color: #ff870c; --spark-duration: 4.4s; --spark-delay: -2s }
.maker-sparks span:nth-child(6) { top: 56%; right: 26%; --spark-color: #0bb9b6; --spark-duration: 5s; --spark-delay: -3.7s; border-radius: 50% }
.maker-sparks span:nth-child(7) { top: 77%; right: 15%; --spark-color: #2f7bff; --spark-duration: 5.8s; --spark-delay: -1.6s }
.maker-sparks span:nth-child(8) { top: 83%; left: 33%; --spark-color: #ffc136; --spark-duration: 4.7s; --spark-delay: -2.9s; border-radius: 50% }
.maker-hero-copy { position: relative; z-index: 2; width: 100%; animation: maker-copy-in .58s ease-out .82s both }
.maker-hero .hero-brand-name { display: flex; justify-content: center; gap: 1px; background: none; font-size: 36px; line-height: 1.22; -webkit-text-fill-color: currentColor }
.maker-hero .hero-brand-name span:nth-child(1) { color: #d845a8 }.maker-hero .hero-brand-name span:nth-child(2) { color: #9c53d8 }.maker-hero .hero-brand-name span:nth-child(3) { color: #519af4 }
.maker-hero .hero-product { margin-top: 3px; color: #0b9f9d; font-size: 20px; font-weight: 700 }
.maker-hero .hero-slogan { margin-top: 4px; font-size: 14px }
.maker-hero--compact { height: 116px; justify-content: center }
.maker-hero--compact .maker-stage, .maker-hero--compact .maker-sparks { display: none }
.maker-hero--compact .maker-hero-copy { animation: none }
.maker-hero--compact .hero-brand-name { font-size: 26px }
.maker-hero--compact .hero-product { font-size: 15px }
.maker-hero--compact .hero-slogan { font-size: 12px }
@keyframes maker-stage-float { 0%, 100% { transform: translateY(0) rotate(-.3deg) } 50% { transform: translateY(-7px) rotate(.6deg) } }
@keyframes maker-bead-drop { 0% { opacity: 0; transform: translateY(-40px) scale(.3) rotate(70deg) } 72% { opacity: 1; transform: translateY(0) scale(1.12) rotate(-4deg) } 100% { opacity: 1; transform: none } }
@keyframes maker-scan { 0%, 18% { opacity: 0; transform: translateY(0) } 24%, 55% { opacity: .7 } 60%, 100% { opacity: 0; transform: translateY(166px) } }
@keyframes maker-spark-drift { from { transform: translate3d(0,0,0) rotate(0) } to { transform: translate3d(12px,-14px,0) rotate(45deg) } }
@keyframes maker-port-pulse { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
@keyframes maker-copy-in { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@media (max-width: 600px) {
  .page-wrap.maker-page-wrap { padding: 12px 12px 8px }
  .maker-hero { height: 344px; --bead-size: 27px; --bead-gap: 11px }
  .maker-stage { width: 216px; height: 216px }
  .maker-page:not(.maker-page--editing) .maker-stage { width: 216px; height: 216px }
  .maker-page:not(.maker-page--editing) .maker-hero { --bead-size: 27px; --bead-gap: 11px }
  .maker-stage::before { left: -49px; width: 55px }.maker-stage::after { right: -49px; width: 55px }
  .maker-board-frame { inset: 10px }
  .maker-board::after { animation-name: maker-scan-mobile }
  .maker-hero .hero-brand-name { font-size: 32px }
  .maker-hero .hero-product { font-size: 18px }
  .maker-hero--compact { height: 106px }
  .maker-hero--compact .hero-brand-name { font-size: 24px }
  .maker-hero--compact .hero-product { font-size: 14px }
}
@media (max-width: 600px) and (max-height: 700px) {
  .maker-hero { height: 260px; --bead-size: 19px; --bead-gap: 8px }
  .maker-page:not(.maker-page--editing) .maker-hero { --bead-size: 19px; --bead-gap: 8px }
  .maker-stage, .maker-page:not(.maker-page--editing) .maker-stage { width: 160px; height: 160px }
  .maker-board-frame { inset: 8px }
  .maker-stage::before, .maker-stage::after { top: 72px }
  .maker-hero .hero-brand-name { font-size: 26px }
  .maker-hero .hero-product { font-size: 16px }
  .maker-hero .hero-slogan { font-size: 12px }
  .maker-page:not(.maker-page--editing) .upload-zone { padding-top: 10px; padding-bottom: 10px }
  .maker-page:not(.maker-page--editing) #upload-card { padding: 12px }
  .maker-page:not(.maker-page--editing) .upload-zone-icon { font-size: 38px; margin-bottom: 8px }
  .maker-page:not(.maker-page--editing) .upload-zone-btn { margin-top: 12px }
  .maker-board::after { animation-name: maker-scan-short }
}
@keyframes maker-scan-mobile { 0%, 18% { opacity: 0; transform: translateY(0) } 24%, 55% { opacity: .7 } 60%, 100% { opacity: 0; transform: translateY(148px) } }
@keyframes maker-scan-short { 0%, 18% { opacity: 0; transform: translateY(0) } 24%, 55% { opacity: .7 } 60%, 100% { opacity: 0; transform: translateY(106px) } }
@media (prefers-reduced-motion: reduce) {
  .maker-stage, .maker-board-frame::before, .maker-board-frame::after, .maker-board::after, .maker-bead, .maker-sparks span, .maker-hero-copy { animation: none }
  .maker-bead, .maker-hero-copy { opacity: 1; transform: none }
}

/* ── 卡片 ── */
.card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.06) }
.card + .card { margin-top: 16px }
.card-title { font-size: 14px; font-weight: 600; color: #1a2233; margin-bottom: 16px }

/* ── 上传区域 ── */
.upload-zone { border: 2px dashed #c8d1dc; border-radius: 16px; padding: 48px 24px; text-align: center; cursor: pointer; transition: all .25s; background: #fafbfc; position: relative }
.upload-zone:hover, .upload-zone.drag-over { border-color: #347EFF; background: #eef3ff }
.upload-zone-icon { font-size: 48px; margin-bottom: 12px; opacity: .4 }
.upload-zone-title { font-size: 16px; font-weight: 600; color: #1a2233 }
.upload-zone-desc { font-size: 13px; color: #8b96a6; margin-top: 6px }
.upload-zone input[type="file"] { display: none }
.upload-zone-btn { display: inline-block; margin-top: 16px; padding: 10px 28px; background: #347EFF; color: #fff; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s }
.upload-zone-btn:hover { background: #2563eb }

/* 已选图片预览 — 按照原图形状自适应展示，消除多余黑框 */
.preview-area {
  position: relative;
  text-align: center;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  padding: 12px 0 6px;
}
.preview-area img {
  max-width: 100%;
  max-height: 480px;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: block;
  transition: transform .2s ease;
}
.preview-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 4px;
}
.preview-actions button {
  padding: 8px 24px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.btn-crop {
  background: #eef3ff;
  color: #347EFF;
  border: 1px solid rgba(52, 126, 255, 0.2);
}
.btn-crop:hover {
  background: #347EFF;
  color: #fff;
  transform: translateY(-1px);
}
.btn-replace {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.btn-replace:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

/* ── 参数面板 ── */
.param-panel { margin-top: 16px }
.param-row { margin-bottom: 20px }
.param-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px }
.param-label { font-size: 14px; font-weight: 600; color: #1a2233 }
.param-hint { font-size: 12px; color: #8b96a6 }
.param-value { font-size: 14px; font-weight: 700; color: #347EFF }
.param-value .unit { font-size: 12px; font-weight: 400; color: #8b96a6; margin-left: 2px }
input[type="range"] { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; background: #e4e9f1; border-radius: 3px; outline: none }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #347EFF; cursor: pointer; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2) }
.param-scale { display: flex; justify-content: space-between; font-size: 11px; color: #aab3be; margin-top: 4px }

/* 选项按钮组 */
.option-group { display: flex; gap: 8px; flex-wrap: wrap }
.option-btn { padding: 8px 16px; border-radius: 8px; background: #f0f4f8; color: #5a6878; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s; border: 2px solid transparent }
.option-btn:hover { background: #e8ecf1 }
.option-btn.active { background: #eef3ff; color: #347EFF; border-color: #347EFF }

/* 色号系统滚动 */
.palette-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch }
.palette-scroll::-webkit-scrollbar { display: none }

/* AI 开关 */
.ai-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid #f0f2f5 }
.ai-row label { font-size: 14px; font-weight: 600; color: #1a2233 }
.ai-toggle-wrap { display: flex; align-items: center; gap: 10px }
.ai-progress { font-size: 12px; color: #347EFF; font-weight: 600 }
/* 自定义 toggle switch */
.toggle-switch { position: relative; width: 44px; height: 24px; cursor: pointer }
.toggle-switch input { opacity: 0; width: 0; height: 0 }
.toggle-track { position: absolute; inset: 0; border-radius: 12px; background: #d1d5db; transition: background .2s }
.toggle-switch input:checked + .toggle-track { background: #347EFF }
.toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: transform .2s }
.toggle-switch input:checked ~ .toggle-knob { transform: translateX(20px) }

/* ── 主按钮 ── */
.primary-btn { width: 100%; padding: 14px; border-radius: 12px; background: #347EFF; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: all .2s; text-align: center; border: none }
.primary-btn:hover:not(:disabled) { background: #2563eb; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(52,126,255,.3) }
.primary-btn:disabled { opacity: .5; cursor: not-allowed }
.primary-btn--teal { background: #0bb9b6 }
.primary-btn--teal:hover:not(:disabled) { background: #0a9e9b }

/* ── 生成蒙层 ── */
.gen-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(10,15,30,.85); display: flex; align-items: center; justify-content: center }
.gen-panel { background: #fff; border-radius: 20px; padding: 40px 32px; text-align: center; max-width: 380px; width: 90% }
.gen-engine { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #0bb9b6; text-transform: uppercase; margin-bottom: 8px }
.gen-engine-dot { width: 6px; height: 6px; border-radius: 50%; background: #0bb9b6; animation: pulse 1.4s infinite }
.gen-time { font-size: 13px; color: #8b96a6; margin-bottom: 20px }
.gen-spinner { width: 64px; height: 64px; border: 4px solid #e4e9f1; border-top-color: #347EFF; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px }
.gen-title { font-size: 18px; font-weight: 700; color: #1a2233; margin-bottom: 6px }
.gen-hint { font-size: 13px; color: #8b96a6; margin-bottom: 20px }
.gen-progress-bar { height: 4px; background: #e4e9f1; border-radius: 2px; overflow: hidden; margin-bottom: 8px }
.gen-progress-fill { height: 100%; background: #347EFF; border-radius: 2px; transition: width .3s }
.gen-progress-runner { height: 100%; width: 30%; background: #347EFF; border-radius: 2px; animation: runner 1.5s ease-in-out infinite }
.gen-status { font-size: 11px; color: #8b96a6; display: flex; justify-content: space-between }

@keyframes spin { to { transform: rotate(360deg) } }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes runner { 0% { transform: translateX(-100%) } 50% { transform: translateX(230%) } 100% { transform: translateX(-100%) } }

/* ── 结果页 ── */
.result-header { text-align: center; margin-bottom: 24px }
.result-badge { display: inline-block; padding: 4px 12px; border-radius: 6px; background: #ecfdf5; color: #059669; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px }
.result-title { font-size: 22px; font-weight: 700; color: #1a2233; margin-bottom: 4px }
.result-image-wrap {
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  background: transparent;
}
.result-image-wrap img {
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: block;
}
.color-total { font-size: 13px; color: #8b96a6 }
.color-list { list-style: none }
.color-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f2f5; font-size: 13px }
.color-swatch { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.08) }
.color-code { font-weight: 600; color: #1a2233; min-width: 60px }
.color-count { margin-left: auto; color: #5a6878 }
.color-toggle { display: block; text-align: center; padding: 10px; font-size: 13px; color: #347EFF; font-weight: 600; cursor: pointer; border: none; background: none; width: 100% }
.result-actions { display: flex; gap: 10px; margin-top: 24px }
.result-actions .primary-btn { flex: 1 }
.secondary-btn { flex: 1; padding: 14px; border-radius: 12px; background: #f0f4f8; color: #5a6878; font-size: 15px; font-weight: 600; cursor: pointer; transition: all .2s; text-align: center; border: none }
.secondary-btn:hover { background: #e2e8f0 }

/* ── 社区广场 ── */
.gallery-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px }
.gallery-toolbar h1 { font-size: 18px; font-weight: 700 }
.sort-group { display: flex; gap: 4px; background: #f0f4f8; border-radius: 8px; padding: 3px }
.sort-btn { padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; color: #5a6878; transition: all .2s; border: none; background: none }
.sort-btn.active { background: #fff; color: #347EFF; box-shadow: 0 1px 3px rgba(0,0,0,.08) }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.gallery-column { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.work-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: transform .2s, box-shadow .2s }
.work-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1) }
.work-card-image { position: relative; background: #f0f2f5; overflow: hidden }
.work-card-image img { width: 100%; display: block }
.work-color-badge { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 600 }
.work-card-body { padding: 10px 12px }
.work-card-title { font-size: 13px; font-weight: 600; color: #1a2233; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.work-card-meta { font-size: 11px; color: #8b96a6; margin-top: 2px }
.work-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px }
.work-author { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5a6878; min-width: 0 }
.work-avatar { width: 22px; height: 22px; border-radius: 50%; background: #e4e9f1; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #8b96a6; font-weight: 700 }
.work-avatar img { width: 100%; height: 100%; object-fit: cover }
.work-author-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.card-actions { display: flex; gap: 10px }
.card-action { display: flex; align-items: center; gap: 3px; font-size: 12px; color: #8b96a6; cursor: pointer; transition: color .2s; border: none; background: none; padding: 2px }
.card-action:hover { color: #347EFF }
.card-action.liked { color: #f43f5e }
.card-action svg { width: 16px; height: 16px }
.load-more { text-align: center; padding: 20px; font-size: 14px; color: #8b96a6 }
.load-more-btn { padding: 10px 28px; border-radius: 10px; background: #f0f4f8; color: #5a6878; font-size: 14px; font-weight: 500; cursor: pointer; border: none; transition: all .2s }
.load-more-btn:hover { background: #e2e8f0 }

/* ── 底稿还原 ── */
.step-badge { display: inline-block; padding: 3px 10px; border-radius: 5px; background: #eef3ff; color: #347EFF; font-size: 11px; font-weight: 700; letter-spacing: 1px; margin-bottom: 12px }
.restore-method-group { margin: 16px 0 }
.restore-method { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 10px; background: #fafbfc; margin-bottom: 8px; cursor: pointer; border: 2px solid transparent; transition: all .2s }
.restore-method.active { border-color: #347EFF; background: #eef3ff }
.restore-method input[type="radio"] { margin-top: 2px; accent-color: #347EFF }
.restore-method-copy { flex: 1 }
.restore-method-title { font-size: 14px; font-weight: 600; color: #1a2233 }
.restore-method-desc { font-size: 12px; color: #8b96a6; margin-top: 2px }
.restore-result-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px }
.restore-info-item { background: #fafbfc; padding: 10px 14px; border-radius: 8px }
.restore-info-label { font-size: 11px; color: #8b96a6 }
.restore-info-value { font-size: 14px; font-weight: 600; color: #1a2233; margin-top: 2px }

/* ── 空状态 ── */
.empty-state { text-align: center; padding: 48px 24px; color: #8b96a6 }
.empty-state p { font-size: 15px; margin-top: 8px }

/* ── 页脚 ── */
.web-footer { text-align: center; padding: 32px 20px 20px; font-size: 12px; color: #aab3be }

/* ── 裁剪弹窗 ── */
.crop-overlay { position: fixed; inset: 0; z-index: 600; background: rgba(10,15,30,.8); display: flex; align-items: center; justify-content: center; padding: 20px }
.crop-dialog { background: #fff; border-radius: 20px; padding: 24px; max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto }
.crop-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px }
.crop-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #8b96a6; text-transform: uppercase }
.crop-title { display: block; font-size: 18px; font-weight: 700; color: #1a2233; margin-top: 2px }
.crop-close { width: 32px; height: 32px; border-radius: 50%; background: #f0f4f8; font-size: 20px; line-height: 32px; text-align: center; cursor: pointer; color: #5a6878; border: none }
.crop-close:hover { background: #e2e8f0 }
.crop-stage { position: relative; width: 100%; height: 360px; background: #1a2233; border-radius: 12px; overflow: hidden; cursor: move }
.crop-canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.crop-frame { position: absolute; pointer-events: none }
.crop-handle { position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.3); pointer-events: all; cursor: pointer; z-index: 2 }
.crop-handle--tl { top: -8px; left: -8px; cursor: nw-resize }
.crop-handle--tr { top: -8px; right: -8px; cursor: ne-resize }
.crop-handle--bl { bottom: -8px; left: -8px; cursor: sw-resize }
.crop-handle--br { bottom: -8px; right: -8px; cursor: se-resize }
.crop-handle--t { top: -8px; left: 50%; transform: translateX(-50%); cursor: n-resize }
.crop-handle--b { bottom: -8px; left: 50%; transform: translateX(-50%); cursor: s-resize }
.crop-handle--l { top: 50%; left: -8px; transform: translateY(-50%); cursor: w-resize }
.crop-handle--r { top: 50%; right: -8px; transform: translateY(-50%); cursor: e-resize }
.crop-hint { font-size: 12px; color: #8b96a6; text-align: center; margin: 12px 0 }
.crop-actions { display: flex; gap: 8px; justify-content: flex-end }
.crop-btn { padding: 10px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; border: none }
.crop-btn--secondary { background: #f0f4f8; color: #5a6878 }
.crop-btn--secondary:hover { background: #e2e8f0 }
.crop-btn--primary { background: #347EFF; color: #fff }
.crop-btn--primary:hover { background: #2563eb }

/* ── Lightbox ── */
.lightbox { position: fixed; inset: 0; z-index: 700; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 20px }
.lightbox img { max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 8px }

/* 我的作品与反馈 */
.personal-page, .feedback-page-web { max-width: 900px }
.personal-header { display: flex; align-items: center; gap: 18px; padding: 18px 0 22px; border-bottom: 1px solid #dce3eb }
.personal-avatar { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 64px; display: grid; place-items: center; overflow: hidden; background: #d9f3f1; color: #137b78; font-size: 25px; font-weight: 700 }
.personal-avatar img { width: 100%; height: 100%; object-fit: cover; grid-area: 1 / 1 }
.personal-identity { flex: 1; min-width: 0 }
.personal-id { display: block; color: #7a8798; font-size: 12px }
.personal-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.personal-name-row h1 { font-size: 22px; line-height: 1.3; overflow-wrap: anywhere }
.text-command { color: #347EFF; font-size: 13px; cursor: pointer; white-space: nowrap }
.feedback-shortcut { flex-shrink: 0; color: #176c70; background: #e4f5f3; padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 600 }
.feedback-shortcut span { margin-left: 6px }
.name-form { display: flex; align-items: center; gap: 8px; margin-top: 8px }
.name-form input { min-width: 0; width: 180px; height: 34px; padding: 0 10px; border: 1px solid #bfcbd8; border-radius: 6px; background: #fff }
.small-primary, .small-secondary { padding: 8px 14px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap }
.small-primary { background: #347EFF; color: #fff }
.small-secondary { background: #e6ebf0; color: #455366 }
.small-primary:disabled { opacity: .6; cursor: default }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #dce3eb; padding: 18px 0; margin-bottom: 22px }
.profile-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 2px 18px; border-right: 1px solid #dce3eb }
.profile-stats > div:first-child { padding-left: 0 }
.profile-stats > div:last-child { border-right: 0 }
.profile-stats strong { font-size: 23px; line-height: 1.2; color: #203149 }
.profile-stats span { font-size: 12px; color: #7a8798 }
.section-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px }
.section-toolbar h2 { font-size: 17px }
.inline-error { color: #b42318; background: #fff1f0; border: 1px solid #f4c7c1; padding: 9px 12px; margin-bottom: 12px; border-radius: 6px; font-size: 13px }
.list-state { padding: 34px 14px; text-align: center; color: #7a8798; font-size: 14px }
.history-list, .feedback-list-web { display: grid; gap: 10px }
.history-item { display: flex; gap: 14px; min-width: 0; padding: 11px; background: #fff; border: 1px solid #e3e9ef; border-radius: 8px }
.history-preview { width: 106px; height: 106px; flex: 0 0 106px; background: #eef2f6; border-radius: 5px; overflow: hidden; display: grid; place-items: center }
.history-preview img { width: 100%; height: 100%; object-fit: cover }
.history-content { display: flex; flex-direction: column; min-width: 0; flex: 1 }
.history-title { color: #1a2233; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.history-meta { font-size: 12px; color: #7a8798; margin-top: 3px }
.history-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px }
.history-actions button { font-size: 12px; color: #286fd4; background: #edf4ff; padding: 5px 10px; border-radius: 5px; cursor: pointer }
.history-actions button:disabled { opacity: .55; cursor: default }
.history-actions .history-visibility { color: #156d69; background: #e7f7f4 }
.history-actions .history-delete { color: #a43b32; background: #fff1ef }
.history-more { display: block; margin: 16px auto 0 }
.identity-note { font-size: 12px; color: #7a8798; margin-top: 20px }
.feedback-heading { border-bottom: 1px solid #dce3eb; padding-bottom: 14px }
.feedback-heading h1 { font-size: 22px; margin-top: 3px }
.back-link { font-size: 12px; color: #56748e }
.feedback-compose { background: #fff; border: 1px solid #e3e9ef; border-radius: 8px; padding: 17px; margin-bottom: 24px }
.feedback-compose label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px }
.feedback-compose textarea { display: block; width: 100%; height: 130px; resize: vertical; border: 1px solid #cfd8e3; border-radius: 6px; padding: 10px; outline: none; font: inherit; font-size: 14px }
.feedback-compose textarea:focus, .name-form input:focus { border-color: #347EFF; box-shadow: 0 0 0 2px #d9e9ff }
.feedback-compose-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px }
.feedback-compose-actions span { color: #8b96a6; font-size: 12px }
.feedback-records h2 { font-size: 17px; margin-bottom: 12px }
.feedback-entry { background: #fff; border: 1px solid #e3e9ef; border-radius: 8px; padding: 16px }
.feedback-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #7a8798; font-size: 12px }
.feedback-entry-head span { font-weight: 600 }
.feedback-replied { color: #168577 }
.feedback-pending { color: #a26918 }
.feedback-entry-message, .feedback-reply p { margin-top: 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px }
.feedback-reply { margin-top: 14px; padding: 12px 14px; background: #edf8f6; border-left: 3px solid #0bb9b6; border-radius: 0 5px 5px 0 }
.feedback-reply-head { color: #176c70; font-size: 12px; font-weight: 600 }

/* ── 响应式 ── */
@media (max-width: 640px) {
  .web-nav { height: auto; padding: 8px 12px 0; flex-direction: column; align-items: stretch; gap: 4px }
  .nav-links { justify-content: space-between; overflow-x: auto; white-space: nowrap }
  .nav-links a { flex-shrink: 0; font-size: 13px; padding: 6px 10px }
  .page-wrap { padding: 16px 12px 48px }
  .hero { padding: 32px 0 20px }
  .hero-brand-name { font-size: 22px }
  .card { padding: 16px; border-radius: 12px }
  .upload-zone { padding: 32px 16px }
  .gallery-grid { gap: 8px }
  .gallery-column { gap: 8px }
  .work-card-body { padding: 8px 10px }
  .crop-stage { height: 280px }
  .result-actions { flex-direction: column }
  .gen-panel { padding: 28px 20px }
  .personal-header { flex-wrap: wrap; gap: 10px }
  .personal-avatar { width: 52px; height: 52px; flex-basis: 52px; font-size: 20px }
  .personal-name-row h1 { font-size: 18px }
  .feedback-shortcut { margin-left: 62px }
  .profile-stats > div { padding: 2px 10px }
  .profile-stats strong { font-size: 19px }
  .section-toolbar { align-items: flex-start; flex-direction: column; gap: 8px }
  .history-preview { width: 82px; height: 96px; flex-basis: 82px }
  .history-item { gap: 10px; padding: 9px }
  .history-actions { gap: 4px }
  .history-actions button { padding: 4px 7px }
}
@media (min-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr) }
}
@media (min-width: 1200px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr) }
}