/* ===== 样式块 1 ===== */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; background: #0a0a0f; color: #e5e7eb; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px 24px 28px; background-image: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(120,60,255,.16), transparent), radial-gradient(ellipse 60% 40% at 90% 10%, rgba(0,180,216,.10), transparent); background-attachment: fixed; }
.header { text-align: center; margin-bottom: 22px; }
.header h1 { font-size: 26px; margin-bottom: 8px; background: linear-gradient(135deg, #fff 30%, #a78bfa 70%, #67e8f9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.header p { font-size: 13px; color: #9ca3af; }
.layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; max-width: 1600px; width: 100%; align-items: stretch; flex: 1; }
.ops-panel { order: -1; display: flex; flex-direction: column; gap: 26px; }
.ops-panel .step, .ops-panel .adv { margin-bottom: 0; }
@media (max-width: 1024px) and (min-width: 861px) {
.layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; max-width: 960px; }
.layout .preview-panel { position: static; }
.canvasbox.main #outCanvas { max-height: 300px; }
.canvasbox.sub { display: none; }
}
.panel { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 22px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 8px 32px -12px rgba(0,0,0,.5); }
.preview-panel { position: sticky; top: 16px; align-self: start; }
.step { margin-bottom: 18px; }
.step:last-of-type { margin-bottom: 0; }
.step h2 { font-size: 15px; margin-bottom: 10px; color: #f3f4f6; }
.drop { border: 2px dashed rgba(255,255,255,.18); border-radius: 14px; padding: 42px; text-align: center; cursor: pointer; transition: all .2s; }
.drop:hover, .drop.over { border-color: #a78bfa; background: rgba(120,60,255,.08); box-shadow: 0 0 0 4px rgba(120,60,255,.1), 0 0 32px -4px rgba(120,60,255,.35); }
.drop p { color: #9ca3af; font-size: 14px; }
.drop .drop-full span { font-size: 12px; color: #6b7280; }
.drop-mini { display: none; font-size: 13.5px; color: #c4b5fd; }
body.has-img .drop { padding: 13px; }
body.has-img .drop-full { display: none; }
body.has-img .drop-mini { display: block; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn { border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 9px 18px; font-size: 14px; cursor: pointer; background: rgba(255,255,255,.06); color: #e5e7eb; transition: all .18s; }
.btn:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }
.btn.primary { background: linear-gradient(135deg, #7c5cff, #5a8bff); border: none; color: #fff; font-weight: 600; box-shadow: 0 8px 24px -8px rgba(124,92,255,.6); }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(124,92,255,.7); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
#download { padding: 15px 28px; font-size: 16px; font-weight: 700; letter-spacing: .5px; width: 100%; position: relative; overflow: hidden; background: linear-gradient(120deg, #7c5cff, #5a8bff, #67e8f9, #5a8bff, #7c5cff); background-size: 300% 100%; animation: dlFlow 5s linear infinite; box-shadow: 0 10px 30px -10px rgba(124,92,255,.75), 0 0 24px -6px rgba(103,232,249,.25); }
@keyframes dlFlow { to { background-position: -300% 0; } }
#download::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .65s ease; pointer-events: none; }
#download:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(124,92,255,.9), 0 0 36px -6px rgba(103,232,249,.4); }
#download:hover:not(:disabled)::after { left: 130%; }
#download:disabled { animation: none; background: rgba(255,255,255,.08); box-shadow: none; }
.pv-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pv-sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.preview-panel { padding: 14px; }
#download { align-self: center; padding: 7px 16px; font-size: 13px; }
.pv-more summary { cursor: pointer; font-size: 12.5px; color: #9ca3af; padding: 6px 10px; border: 1px dashed rgba(255,255,255,.14); border-radius: 10px; text-align: center; list-style: none; user-select: none; }
.pv-more summary::-webkit-details-marker { display: none; }
.pv-more summary:hover { color: #e5e7eb; border-color: rgba(255,255,255,.3); }
.pv-more[open] summary { margin-bottom: 8px; }
.pv-more .pv-sub { margin-top: 8px; }
.pv-sub-l { display: flex; gap: 10px; align-items: center; }
.btn.ghost { background: transparent; border-color: rgba(255,255,255,.14); color: #9ca3af; font-size: 13px; padding: 8px 14px; }
.btn.ghost:hover { color: #e5e7eb; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.04); }
.canvasbox.main canvas { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 24px 70px -24px rgba(124,92,255,.55); }
.canvasbox.main > p { display: inline-block; font-size: 11.5px; color: #a5b4fc; background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25); border-radius: 999px; padding: 3px 12px; margin-top: 10px; }
.swatch { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); cursor: pointer; font-size: 13.5px; color: #d1d5db; transition: all .18s; }
.swatch .dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.swatch:hover { transform: translateY(-1px); border-color: rgba(167,139,250,.5); }
.swatch.sel { border-color: #a78bfa; background: rgba(120,60,255,.14); color: #fff; box-shadow: 0 6px 18px -6px rgba(120,60,255,.5); }
.sizecard { border: 1.5px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px 16px; cursor: pointer; text-align: center; transition: all .18s; background: rgba(255,255,255,.03); }
.sizecard:hover { border-color: rgba(167,139,250,.45); transform: translateY(-1px); }
.sizecard.sel { border-color: #a78bfa; background: rgba(120,60,255,.14); }
.sizecard b { display: block; font-size: 14px; color: #f3f4f6; }
.sizecard span { font-size: 11.5px; color: #9ca3af; }
.canvases { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; justify-content: center; }
.canvasbox { text-align: center; position: relative; }
.canvasbox p { font-size: 12px; color: #9ca3af; margin-top: 6px; }
canvas { border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.4); max-width: 100%; background: repeating-conic-gradient(#1a1a24 0% 25%, #23232f 0% 50%) 0 0/16px 16px; }
#srcCanvas { max-height: 180px; }
#outCanvas { max-height: 380px; }
.pv-empty { display: none; border: 2px dashed rgba(255,255,255,.12); border-radius: 14px; padding: 30px 18px; text-align: center; color: #6b7280; font-size: 13px; line-height: 1.9; }
body:not(.has-img) .pv-empty { display: block; }
body:not(.has-img) .canvases { display: none; }
body:not(.has-img) .pv-actions { display: none; }
.seg-loader { display: none; position: absolute; inset: 0; border-radius: 10px; background: rgba(10,10,15,.55); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); z-index: 5; align-items: center; justify-content: center; flex-direction: column; gap: 18px; }
body.seging .seg-loader { display: flex; }
.seg-ring { position: relative; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0%, #7c5cff 35%, #67e8f9 70%, transparent 100%); animation: segSpin 1.1s linear infinite; filter: drop-shadow(0 0 10px rgba(124,92,255,.55)); }
.seg-ring::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: rgba(15,15,22,.82); }
.seg-dot { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #67e8f9 45%, #7c5cff 100%); box-shadow: 0 0 12px rgba(103,232,249,.9); animation: segPulse 1.1s ease-in-out infinite; z-index: 1; }
@keyframes segSpin { to { transform: rotate(360deg); } }
@keyframes segPulse { 0%,100% { transform: scale(.82); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
.seg-text { font-size: 13.5px; font-weight: 600; letter-spacing: .5px; background: linear-gradient(90deg, #a78bfa, #67e8f9, #a78bfa); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: segFlow 2.4s linear infinite; }
@keyframes segFlow { to { background-position: -200% 0; } }
.adv { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 16px; background: rgba(255,255,255,.02); }
.tips { border: 1px solid rgba(139,92,246,.22); border-radius: 14px; padding: 16px 18px; background: linear-gradient(135deg, rgba(124,92,255,.08), rgba(103,232,249,.05)); }
.tips h2 { font-size: 14px; margin-bottom: 10px; color: #f3f4f6; }
.tips ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tips li { font-size: 12.5px; color: #9ca3af; padding-left: 18px; position: relative; line-height: 1.6; }
.tips li::before { content: '✦'; position: absolute; left: 0; color: #a78bfa; }
.adv summary { font-size: 12.5px; color: #9ca3af; cursor: pointer; user-select: none; outline: none; }
.adv .row { margin-top: 10px; }
.tol { width: 100%; max-width: 220px; accent-color: #a78bfa; }
.hint { font-size: 12px; color: #9ca3af; margin-top: 6px; }
.fmt { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #9ca3af; flex-wrap: wrap; }
select { border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 8px 12px; font-size: 13px; background: #15151d; color: #e5e7eb; }
.privacy { font-size: 12px; color: #6ee7b7; background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.18); border-radius: 10px; padding: 8px 12px; margin-top: 4px; }
.badge { display: inline-block; font-size: 11px; color: #c4b5fd; background: rgba(139,92,246,.15); border: 1px solid rgba(139,92,246,.3); border-radius: 999px; padding: 2px 10px; margin-left: 8px; vertical-align: middle; }
@media (max-width: 1024px) {
.layout .preview-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 860px) {
.layout { grid-template-columns: 1fr; }
.ops-panel { order: 0; gap: 16px; }
.drop { padding: 26px; }
.swatch { padding: 8px 14px; font-size: 13px; }
.sizecard { padding: 10px 14px; }
.tips { padding: 12px 14px; }
.tips li { font-size: 12px; }
 .preview-panel { order: -1; position: static; border-radius: 14px; padding: 10px 14px 12px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.canvasbox.sub { display: none; }
#outCanvas { max-height: 260px; }
.canvasbox p { font-size: 11px; margin-top: 3px; }
.pv-empty { padding: 12px; font-size: 12px; }
.pv-actions .hint { display: none; }
.pv-sub { justify-content: center; }
#download { width: auto; }

}

/* ===== 样式块 2 ===== */

#fbOverlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(8, 8, 14, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s ease; }
#fbOverlay.show { display: flex; opacity: 1; }
#fbCard { position: relative; width: min(400px, calc(100vw - 40px)); padding: 32px 28px 26px; border-radius: 20px; text-align: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 24px 60px -20px rgba(120,60,255,0.45), inset 0 1px 0 rgba(255,255,255,0.1); transform: translateY(14px) scale(0.96); transition: transform .35s cubic-bezier(.21,1.02,.73,1); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
#fbOverlay.show #fbCard { transform: translateY(0) scale(1); }
#fbCard::before { content: ''; position: absolute; inset: -1px; border-radius: 21px; padding: 1px; background: linear-gradient(135deg, rgba(167,139,250,0.6), rgba(103,232,249,0.35), transparent 60%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
#fbTitle { font-size: 20px; font-weight: 700; color: #f3f4f6; margin-bottom: 6px; }
#fbSub { font-size: 13.5px; color: #9ca3af; margin-bottom: 24px; line-height: 1.6; }
.fbBtns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fbBtn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: #e5e7eb; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease; font-family: inherit; }
.fbBtn .fbEmoji { font-size: 24px; }
.fbBtn:hover { transform: translateY(-2px); }
#fbGood:hover { border-color: rgba(52,211,153,0.55); box-shadow: 0 10px 28px -10px rgba(52,211,153,0.5); }
#fbBad:hover { border-color: rgba(248,113,113,0.55); box-shadow: 0 10px 28px -10px rgba(248,113,113,0.5); }
#fbSkip { margin-top: 16px; background: none; border: none; color: #6b7280; font-size: 12.5px; cursor: pointer; font-family: inherit; }
#fbSkip:hover { color: #9ca3af; }
#fbDone { display: none; font-size: 15px; color: #34d399; font-weight: 600; padding: 8px 0 4px; }

/* ===== 样式块 3 ===== */

#fbFab { position: fixed; right: 20px; bottom: 20px; z-index: 9990; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.07); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #e5e7eb; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px -8px rgba(120,60,255,0.4); transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
#fbFab:hover { transform: translateY(-2px); border-color: rgba(167,139,250,0.5); box-shadow: 0 12px 32px -8px rgba(120,60,255,0.55); }
#fbFab .fbFabEmoji { font-size: 16px; }
#fbFabDone { position: fixed; right: 20px; bottom: 20px; z-index: 9990; display: none; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(52,211,153,0.4); background: rgba(52,211,153,0.12); color: #34d399; font-size: 13.5px; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
#fbFab.hint::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #f87171; box-shadow: 0 0 0 0 rgba(248,113,113,.6); animation: fbPulse 1.6s infinite; }
@keyframes fbPulse { 70% { box-shadow: 0 0 0 8px rgba(248,113,113,0); } 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); } }
#fbToast { position: fixed; right: 20px; bottom: 72px; z-index: 9990; padding: 10px 16px; border-radius: 12px; background: rgba(20,20,30,.92); border: 1px solid rgba(255,255,255,.14); color: #e5e7eb; font-size: 13px; opacity: 0; transform: translateY(6px); transition: all .25s ease; pointer-events: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
#fbToast.show { opacity: 1; transform: translateY(0); }