* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif; margin: 0; background: #f7f7f9; color: #222; }
.container { max-width: 980px; margin: 24px auto; padding: 0 16px; }
h1 { font-size: 24px; margin: 0 0 16px; }
h2 { font-size: 18px; margin: 0 0 12px; }
.card { background: #fff; border: 1px solid #e6e6ef; border-radius: 10px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
textarea { width: 100%; padding: 8px; border: 1px solid #dcdce6; border-radius: 6px; margin: 8px 0 12px; resize: vertical; }
input[type="text"], input[type="number"], input[type="search"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"] { width: 100%; padding: 8px; border: 1px solid #dcdce6; border-radius: 6px; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.actions { display: flex; gap: 8px; margin: 8px 0; }
button { background: #3b82f6; border: none; color: #fff; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; }
button:hover { background: #2563eb; }
button:disabled { background: #9ca3af; cursor: not-allowed; }
.preview { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 80px; }
.preview img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #eee; }
#log { background: #0b1020; color: #e8f0ff; min-height: 120px; padding: 12px; border-radius: 8px; overflow: auto; }
.prebox { background: #111827; color: #e5e7eb; padding: 8px; border-radius: 6px; min-height: 60px; white-space: pre-wrap; word-break: break-word; border: 1px solid #1f2937; }
.status { color: #6b7280; font-size: 12px; margin-top: 6px; min-height: 16px; }