*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#111827;color:#e5e7eb;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar{display:flex;align-items:center;justify-content:flex-end;padding:12px 16px;background:transparent;position:sticky;top:0;z-index:10}
.spacer{flex:1}
.icon-btn{background:#1f2937;color:#9ca3af;border:none;border-radius:999px;padding:8px 10px;cursor:pointer}
.icon-btn:hover{background:#374151;color:#fff}
.topbar .icon-btn{background:#1F2937;color:#db2777;padding:16px 20px;font-size:20px}
.topbar .icon-btn:hover{background:#d1d5db;color:#db2777}
@media(max-width:768px){
  .topbar .icon-btn{padding:8px 10px;font-size:12px}
}
.page{padding:16px}
.initial{display:flex;flex-direction:column;align-items:center;gap:24px;min-height:70vh;padding-top:24px}
.hero{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:32px}
.hero-title{font-size:36px;font-weight:800;color:#ffffff}
.hero-desc{color:#9ca3af}
.upload-card{display:flex;flex-direction:column;align-items:center;gap:12px;background:#1f2937;border:2px dashed #4b5563;border-radius:20px;padding:40px;box-shadow:0 10px 24px rgba(0,0,0,.35);text-align:center;max-width:720px;width:90%}
.upload-icon{font-size:40px;color:#9333ea}
.upload-heading{font-size:22px;font-weight:700;color:#fff}
.upload-desc{color:#9ca3af}
.footer-note{margin-top:16px;color:#9ca3af;font-size:12px}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:1024px){.grid{grid-template-columns:1fr 1fr}}
.canvas{background:#1f2937;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.canvas-inner{position:relative;width:100%;min-height:420px;padding:16px}
.canvas-img{width:100%;height:100%;max-height:70vh;object-fit:contain;border-radius:8px;display:block}
.empty-state{position:absolute;inset:16px;display:flex;align-items:center;justify-content:center;border-radius:8px}
.canvas-actions{display:flex;gap:12px;padding:12px 16px;justify-content:center}
.mask{position:absolute;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:8px}
.hidden{display:none !important}
.progress{width:60%;height:10px;background:#374151;border-radius:999px;overflow:hidden}
.progress-value{width:0;height:100%;background:#db2777;animation:prog 2s linear infinite}
@keyframes prog{0%{width:0}100%{width:100%}}
.loading-text{margin-top:12px;color:#fff}
.panel{background:#1f2937;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.35);padding:16px;display:flex;flex-direction:column;gap:16px}
.tabs{display:flex;gap:8px;margin-bottom:8px;border-bottom:1px solid #374151;padding-bottom:4px}
.tab-btn{position:relative;display:inline-flex;align-items:center;gap:6px;background:#374151;color:#e5e7eb;border:none;border-radius:10px;padding:8px 14px;cursor:pointer;font-weight:700}
.tab-btn:hover{background:#4b5563}
.tab-btn.active{background:#db2777;color:#fff}
.tab-btn.active:hover{background:#be185d}
.tab-btn.active::after{content:"";position:absolute;left:12px;right:12px;bottom:-6px;height:2px;background:#db2777;border-radius:0 0 8px 8px}
.tab-icon{display:inline-block;opacity:.9}
.panel-group{display:flex;flex-direction:column;gap:10px}
.panel-title{font-size:16px;font-weight:600;color:#fff}
.uploader{display:flex;align-items:center;gap:10px}
.uploader input{display:none}
.uploader-hint{color:#9ca3af;font-size:12px}
.tray{display:flex;gap:8px;overflow-x:auto;padding-top:8px}
.tray-item{flex:0 0 auto;width:60px;height:60px;border-radius:10px;background:#111827;overflow:hidden;border:1px solid #374151;cursor:pointer;position:relative}
.tray-item.active{outline:2px solid #9333ea}
.tray-item img{width:100%;height:100%;object-fit:cover}
.tray-close{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:8px;padding:2px 6px;cursor:pointer;font-size:12px;line-height:1}
.tray-close:hover{background:rgba(0,0,0,.8)}
.input{width:100%;min-height:90px;background:#374151;color:#fff;border:1px solid #4b5563;border-radius:10px;padding:10px}
.form-row{display:flex;align-items:center;gap:10px}
.form-row span{flex:0 0 80px;color:#9ca3af}
.select{width:100%;height:40px;background:#374151;color:#fff;border:1px solid #4b5563;border-radius:10px;padding:0 10px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:#4c1d95;color:#fff;border:none;border-radius:10px;padding:10px 14px;cursor:pointer}
.btn:hover{background:#5b21b6}
.btn-toggle{background:#374151;color:#e5e7eb}
.btn-toggle.active{background:#9333ea;color:#fff}
.btn-primary{background:#db2777;font-weight:700}
.btn-primary:hover{background:#be185d}
.btn-secondary{background:#6b7280}
.btn-secondary:hover{background:#4b5563}
.btn-danger{background:#b91c1c}
.btn-danger:hover{background:#dc2626}
.btn:disabled{background:#2f3540;color:#9ca3af;cursor:not-allowed;opacity:.7}
.panel-actions{display:block}
.panel-actions .btn-primary{width:100%;padding:12px 16px;font-weight:700}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75)}
.modal-dialog{position:relative;background:#1f2937;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.5);padding:16px;width:100%;max-width:1000px;max-height:90vh;overflow:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #374151;padding-bottom:10px}
.modal-title{font-size:18px;font-weight:700;color:#fff}
.modal-body{display:flex;flex-direction:column;gap:16px;padding-top:10px}
.stats{display:flex;flex-direction:column;gap:6px}
.stat-row{display:flex;align-items:center;justify-content:flex-start;gap:8px}
.label{color:#9ca3af}
.value{color:#fff;font-weight:600}
.section-title{font-size:16px;font-weight:600;color:#fff}
.grid-history{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:640px){.grid-history{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.grid-history{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.grid-history{grid-template-columns:repeat(6,1fr)}}
.thumb{position:relative;background:#111827;border-radius:10px;overflow:hidden}
.thumb{cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-actions{position:absolute;bottom:6px;left:6px;display:flex;gap:6px}
.thumb-btn{background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:8px;padding:6px 8px;cursor:pointer}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #374151;margin-top:10px;padding-top:10px}
.meme-text{font-family:Impact,Anton,system-ui,sans-serif;text-transform:uppercase;color:#fff;letter-spacing:1px;text-shadow:0 0 2px #000,0 0 2px #000,2px 2px 0 #000,-2px 2px 0 #000,2px -2px 0 #000,-2px -2px 0 #000}
@keyframes sh{10%{transform:translateX(-4px)}20%{transform:translateX(4px)}30%{transform:translateX(-4px)}40%{transform:translateX(4px)}50%{transform:translateX(0)}}
.shake{animation:sh .5s ease}
.section-label{margin-top:8px;color:#9ca3af}
.small-hint{color:#9ca3af;margin:-4px 0 8px 0}
.options-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.options-row .btn-row{flex:0 0 auto}
.count-group{display:flex;align-items:center;gap:8px}
.count-label{color:#9ca3af;flex:0 0 auto;margin-right:4px}
.res-group{display:flex;align-items:center;gap:10px;flex:1}
.res-label{color:#9ca3af;flex:0 0 auto;margin-right:4px}
.res-group .select{min-width:160px}
#resTier{flex:0 0 32%;max-width:200px}
#aspectSelect{flex:1 1 auto;max-width:calc(100% - 32% - 40px)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:#111827;color:#e5e7eb;border:1px solid #374151;border-radius:999px;padding:8px 12px;cursor:pointer}
.chip:hover{background:#1f2937}
.slot-empty{flex:0 0 auto;width:60px;height:60px;border-radius:10px;border:2px dashed #4b5563;display:flex;align-items:center;justify-content:center;color:#9ca3af;cursor:pointer}
.lb-image{width:100%;height:auto;max-height:80vh;border-radius:10px;object-fit:contain;cursor:zoom-in}
.lb-image.zoomed{width:auto;height:auto;max-height:none;cursor:zoom-out}
@media(max-width:768px){
  .page{padding:12px}
  .hero{margin-bottom:24px}
  .hero-title{font-size:28px}
  .hero-desc{font-size:14px}
  .canvas-inner{min-height:320px;padding:12px}
  .canvas-img{max-height:55vh}
  .panel{padding:12px;gap:12px}
  .tabs{flex-wrap:wrap}
  .options-row{flex-direction:column;align-items:stretch;gap:10px}
  .count-group{justify-content:flex-start}
  .res-group{flex-wrap:wrap}
  .res-label{display:block;margin:0 0 6px 0}
  #resTier{flex:1 1 100%;max-width:none}
  #aspectSelect{flex:1 1 100%;max-width:none}
  .canvas-actions{flex-wrap:nowrap;justify-content:center}
  .canvas-actions .btn{flex:0 0 auto}
  .upload-card{width:100%;padding:28px}
}
@media(max-width:480px){
  .hero-title{font-size:24px}
  .canvas-img{max-height:50vh}
  .tray{gap:6px}
  .tray-item,.slot-empty{width:64px;height:64px}
}