.status-badge {
            background-color: #17a2b8;
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.9rem;
            display: inline-block;
            margin-bottom: 0.5rem;
        }@media (max-width: 768px) {.example{display:none}}
        .encoding-attempt {
            font-family: 'Consolas', monospace;
            background: #f8f9fc;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            border-left: 4px solid #007bff;
            margin: 0.5rem 0;
            transition: background 0.2s;
        }
        .attempt-current {
            background: #e6f2ff;
            font-weight: 500;
        }
        .result-textarea {
            width: 100%;
            min-height: 150px;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background: #fafafa;
            resize: vertical;
        }
        .input-textarea {
            width: 100%;
            min-height: 120px;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
            resize: vertical;
        }
        .example-chip {
            background-color: rgba(23, 162, 184, 0.1);
            border: 1px solid rgba(23, 162, 184, 0.3);
            border-radius: 30px;
            padding: 0.4rem 1rem;
            font-size: 0.9rem;
            color: #117a8b;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-block;
            margin: 0.25rem;
        }
        .example-chip:hover {
            background-color: rgba(23, 162, 184, 0.2);
            transform: translateY(-1px);
        }
        .progress-indicator {
            background-color: #e9ecef;
            border-radius: 4px;
            padding: 0.75rem;
            margin: 1rem 0;
            max-height: 200px;
            overflow-y: auto;
            font-size: 0.9rem;
        }
        .candidate-item {
            padding: 0.5rem 1rem;
            margin: 0.25rem 0;
            background: #f8f9fa;
            border-radius: 6px;
            border-left: 3px solid #6c757d;
            cursor: pointer;
            transition: all 0.1s;
            font-family: 'Consolas', monospace;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .candidate-item:hover {
            background: #e2e6ea;
            border-left-color: #007bff;
        }
        .candidate-score {
            background: #007bff;
            color: white;
            padding: 0.2rem 0.6rem;
            border-radius: 20px;
            font-size: 0.8rem;
            margin-left: 1rem;
            white-space: nowrap;
        }
        .candidate-method {
            font-size: 0.8rem;
            color: #495057;
            margin-left: 1rem;
            white-space: nowrap;
        }