
.dx-wrap{max-width:880px;margin:0 auto}
.dx-card{background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:14px;padding:20px;margin:16px 0}
.dx-grid{display:grid;gap:12px}
@media(min-width:720px){.dx-grid-2{grid-template-columns:1fr 1fr}}
.dx-label{font-size:.85rem;font-weight:600;color:#4b5563;display:block;margin-bottom:6px}
.dx-input,.dx-select,textarea.dx-input{width:100%;min-height:48px;padding:10px 12px;border:1px solid #d1d5db;border-radius:10px;font:inherit}
textarea.dx-input{min-height:110px;resize:vertical}
.dx-out{background:#0b1220;color:#e5e7eb;border-radius:12px;padding:14px;font-family:ui-monospace,monospace;font-size:.9rem;white-space:pre-wrap;min-height:72px;position:relative}
.dx-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dx-actions button,.dx-btn{min-height:44px;padding:10px 14px;border-radius:10px;border:1px solid #d1d5db;background:#fff;font-weight:600;cursor:pointer}
.dx-btn-primary{background:#111;color:#fff;border-color:#111}
.dx-btn-accent{background:#f5b800;color:#111;border-color:#f5b800;text-decoration:none;display:inline-flex;align-items:center}
.dx-pill{display:inline-block;padding:2px 8px;border-radius:999px;background:#f3f4f6;font-size:.75rem;font-weight:700}
.dx-warn{background:#fff7ed;border:1px solid #fdba74;color:#9a3412;padding:12px;border-radius:10px;font-size:.92rem}
.dx-ok{background:#ecfdf5;border:1px solid #6ee7b7;color:#065f46;padding:12px;border-radius:10px;font-size:.92rem}
.dx-canvas-wrap{margin-top:12px;border:1px dashed #9ca3af;border-radius:12px;padding:12px;background:#f9fafb;text-align:center}
#dx-label-canvas{max-width:100%;height:auto;border-radius:8px;background:#111}
.dx-muted{color:#6b7280;font-size:.9rem}
