:root{--primary:#2c3e50;--secondary:#dc3545;--secondary-hover:#cc3545;--gray-light:#f3f4f6;--gray:#e5e7eb;--gray-dark:#6b7280;--blue-light:#eff6ff;--blue-border:#dbeafe;--red:#ef4444;--white:#ffffff}
*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",Arial,sans-serif}
body{background-color:var(--gray-light);padding:1rem}
.container{max-width:800px;margin:0 auto;background:var(--white);border:1px solid var(--gray);border-radius:4px}
.layout-table{width:100%;border-collapse:collapse}
.header-cell{padding:1.2rem;border-bottom:1px solid var(--gray);text-align:center}
.header-title{font-size:2rem;font-weight:700;color:var(--primary)}
.main-cell{padding:1.5rem;vertical-align:top}
.instructions{color:var(--gray-dark);margin-bottom:1.5rem}
.instructions ol{list-style-position:inside;line-height:1.6}
.instructions li{margin-bottom:.5rem}
.instructions small{color:#9ca3af}
.tip-box{background:var(--blue-light);border:1px solid var(--blue-border);border-radius:4px;padding:.8rem;margin-bottom:1.5rem;font-size:.9rem}
.tip-box a{color:var(--secondary);text-decoration:underline}
.file-selector{border:1px solid var(--gray);border-radius:4px;padding:.7rem .9rem;background:var(--white);cursor:pointer;overflow:hidden}
.file-selector:hover{background:var(--gray-light)}
.file-label{color:var(--gray-dark);margin-right:.5rem}
.file-status{color:#9ca3af;font-size:.9rem}
.file-status.selected{color:var(--gray-dark)}
.file-input{display:none}
.size-options{padding:0 1.5rem 1rem}
.size-options p{color:var(--gray-dark);margin-bottom:.5rem}
.size-grid{overflow:hidden}
.size-item{color:var(--gray-dark);font-size:.9rem;cursor:pointer;margin-bottom:.5rem}
.size-item:nth-child(3n){margin-right:0}
.size-item:last-child{width:100%;float:none}
.button-cell{padding:0 1.5rem 1rem;text-align:right}
.generate-btn{background:var(--secondary);color:#fff;border:1px solid var(--secondary);border-radius:4px;padding:.7rem 1.2rem;font-size:1rem;cursor:pointer}
.generate-btn:hover{background:var(--secondary-hover)}
.footer-cell{padding:0 1.5rem 1.5rem;text-align:center}
.footer-note{font-size:.75rem;color:#9ca3af}
.preview-container{width:256px;border:1px solid var(--gray);background:var(--gray-light);border-radius:4px}
.preview-image-container{margin:0 auto;background:var(--white);border:1px solid var(--gray);text-align:center}
.preview-image{width:256px;height:256px;max-width:100%;max-height:100%;vertical-align:middle;object-fit:fill}
.error-message{color:var(--red);font-size:.85rem;margin:1rem 0}
@media (max-width:767px){.mobile-fullwidth{display:block;width:100%}
}
table{width:100%;border-collapse:collapse}
@media (max-width:650px){tr{display:block;width:100%}
.main-cell{display:block;width:100%!important;box-sizing:border-box;margin-bottom:15px}
}