/*
body { font-family: Arial, sans-serif; background-color: #f4f4f9; padding: 15px; margin: 0; }
*/

.container { max-width: 600px; margin: 0 auto; }

.topic_color_100{background: #ffcc99;}
.topic_color_400{background: #ffffcc;}
.topic_color_500{background: #ccffcc}

.block { border: 2px solid #ccc; padding: 15px; margin-bottom: 20px; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: relative; }
.block.dragging { opacity: 0.4; border-style: dashed; background: #e9e9e9; }
.block-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 5px; border-bottom: 1px solid #eee; }
.block-title { font-size: 1.2em; font-weight: bold; }
.question-item { background: #f9f9f9; border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 4px; position: relative; }
.question-item.dragging { opacity: 0.4; border-style: dashed; background: #e9e9e9; }
.question-header { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.drag-handle { display: none; background: #007BFF; color: white; padding: 6px 12px; border-radius: 4px; font-size: 16px; cursor: move; user-select: none; touch-action: none; }
@media (pointer: coarse) {.drag-group-desktop { display: none; }.drag-handle { display: inline-block; }}

@media (min-width: 768px) {.block, .question-item { cursor: move; }}

.options { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 12px; }
.option { display: flex; align-items: center; gap: 4px; font-size: 1em; padding: 5px 0; cursor: pointer; }
.option input { width: 18px; height: 18px; }
button[type='submit'] { margin-top: 20px; padding: 12px 24px; background-color: #007BFF; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; width: 100%; }