* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; margin: 0; color: #222; }
.container { max-width: 900px; margin: 0 auto; padding: 24px; }
h1 { margin: 0 0 8px; }
.desc { color: #666; margin: 0 0 24px; }

.config { display: grid; grid-template-columns: 160px 1fr auto; gap: 8px; align-items: center; margin-bottom: 24px; }
.config input { padding: 8px; border: 1px solid #ddd; border-radius: 6px; }
.config button { padding: 8px 12px; background: #0ea5e9; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.config small { grid-column: 2 / span 2; color: #666; }

.uploader { margin-bottom: 12px; }
.preview { margin: 12px 0; min-height: 40px; }
.preview-img { max-width: 100%; height: auto; border: 1px dashed #ccc; border-radius: 8px; padding: 6px; }

.primary { padding: 10px 16px; background: #16a34a; color: #fff; border: none; border-radius: 8px; cursor: pointer; }
.primary:hover { background: #15803d; }

.result { margin-top: 24px; }
.output { background: #0b1021; color: #e5e7eb; padding: 16px; border-radius: 8px; overflow: auto; min-height: 120px; }

footer { margin-top: 36px; color: #666; }
footer a { color: #0ea5e9; text-decoration: none; }
footer a:hover { text-decoration: underline; }