.app{max-width:960px;margin:24px auto;padding:0 16px;font-family:system-ui,Segoe UI,Arial;color:#222}
.drop{border:2px dashed #888;border-radius:12px;padding:28px;text-align:center;cursor:pointer;user-select:none}
.drop.drag{border-color:#3a7afe;background:#f0f6ff}
.controls{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.controls textarea{width:100%;height:96px;resize:vertical;padding:8px;border:1px solid #ccc;border-radius:8px}
.controls .row{display:flex;align-items:center;gap:8px}
.controls input[type=number]{width:120px;padding:6px;border:1px solid #ccc;border-radius:8px}
.controls input[type=color]{width:44px;height:32px;padding:0;border:1px solid #ccc;border-radius:8px}
.controls input[type=text]{width:120px;padding:6px;border:1px solid #ccc;border-radius:8px}
.preview-wrap{margin-top:20px;border:1px solid #eee;border-radius:12px;padding:20px;background:#000}
.preview{position:relative;display:inline-block}
.preview img{display:block}
.content{position:absolute;left:0;top:0;white-space:pre-wrap;word-break:break-word}
.meta{margin-top:12px;color:#555;font-size:14px}
.debug-panel {
    margin-top: 20px;
    padding: 16px;
    background: #fff0f0;
    border: 1px solid #ffcdd2;
    border-radius: 8px;
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap;
    color: #d32f2f;
}
.debug-panel h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #b71c1c;
}
.hide{display:none}