.question-table {
    width: 100%;
    min-width: 1512px;
    border-collapse: collapse;
    table-layout: auto;
}

.paper-question-table {
    min-width: 1632px;
}

.question-table th,
.question-table td {
    border-bottom: 1px solid var(--line);
    padding: 11px 12px;
    text-align: left;
    vertical-align: top;
}

.question-table th {
    background: #f8f9fa;
    color: #444c56;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.question-table tbody .question-row:hover,
.question-table tbody tr.question-row:hover {
    background: #fafcfb;
}

.question-table tbody .question-row > td {
    align-content: center;
    vertical-align: middle;
}

.question-table tbody tr:last-child td {
    border-bottom: 0;
}

.column-expand {
    width: 48px;
}

.column-id {
    width: 76px;
}

.column-version {
    width: 68px;
}

.column-privacy {
    width: 92px;
}

.column-question {
    width: 28%;
}

.column-images {
    width: 180px;
}

.column-type,
.column-difficulty {
    width: 86px;
}

.column-category {
    min-width: 210px;
}

.column-tags {
    width: 160px;
}

.column-creator {
    width: 120px;
}

.column-time {
    width: 164px;
    min-width: 164px;
    white-space: nowrap;
}

.cell-time {
    min-width: 164px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.expand-button {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #59636e;
    padding: 0;
    cursor: pointer;
}

.expand-button:hover {
    border-color: var(--line);
    background: #f0f3f4;
    color: var(--text);
}

.expand-button > span[aria-hidden="true"] {
    font-size: 24px;
    line-height: 1;
    transition: transform 0.15s ease;
}

.expand-button[aria-expanded="true"] > span[aria-hidden="true"] {
    transform: rotate(90deg);
}

.expand-button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.question-version {
    color: #59636e;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.question-link {
    display: -webkit-box;
    overflow: hidden;
    color: #185c47;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.question-link:hover {
    text-decoration: underline;
}

.cell-muted {
    color: var(--muted);
}

.category-value {
    display: block;
    white-space: nowrap;
}

.badge {
    display: inline-block;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 12px;
    white-space: nowrap;
}

.badge-type {
    border: 1px solid transparent;
    font-weight: 650;
}

.badge-type-single {
    border-color: #bed7ee;
    background: #edf5fc;
    color: #245b91;
}

.badge-type-multi {
    border-color: #b9ddcc;
    background: #eaf6f0;
    color: #1f6848;
}

.badge-easy {
    background: #e7f5ed;
    color: #216a43;
}

.badge-normal {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.badge-hard {
    background: var(--danger-bg, var(--danger-soft));
    color: var(--danger-text, var(--danger));
}

.badge-public {
    border: 1px solid #b9ddcc;
    background: #eaf6f0;
    color: #1f6848;
}

.badge-private {
    border: 1px solid #d1d6dc;
    background: #f0f2f4;
    color: #4d5660;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tag {
    max-width: 100%;
    overflow: hidden;
    border-radius: 4px;
    background: var(--tag-bg);
    color: #44534e;
    padding: 2px 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.question-creator {
    --avatar-size: 24px;
    --avatar-font-size: 11px;
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 7px;
}

.question-creator-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.question-images-cell {
    min-width: 180px;
}

.question-image-strip {
    display: flex;
    max-width: 180px;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.question-image-thumb {
    display: inline-flex;
    width: 38px;
    height: 30px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #f5f7f8;
    padding: 0;
    cursor: zoom-in;
}

.question-image-thumb:hover {
    border-color: var(--primary);
}

.question-image-thumb:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.question-image-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.question-image-thumb[hidden] {
    display: none;
}

.question-image-more {
    display: inline-flex;
    min-width: 28px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--tag-bg);
    color: #44534e;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
    padding: 0 6px;
}

.question-image-more:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.question-image-more:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.option-detail-row td {
    background: #f8faf9;
    padding: 0;
}

.option-detail {
    padding: 16px 20px 18px 60px;
}

.option-detail-title {
    margin-bottom: 8px;
    color: #505963;
    font-size: 12px;
    font-weight: 650;
}

.option-list {
    display: grid;
    max-width: 920px;
    margin: 0;
    padding: 0;
    gap: 7px;
    list-style: none;
}

.option-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    min-height: 36px;
    align-items: start;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #ffffff;
    padding: 7px 10px;
}

.option-letter {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #edf0f2;
    color: #46515c;
    font-size: 12px;
    font-weight: 700;
}

.option-content {
    min-width: 0;
    padding-top: 1px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.correct-option-mark {
    display: none;
    border-radius: 4px;
    background: #dff2e7;
    color: #17613e;
    padding: 2px 7px;
    font-size: 12px;
    white-space: nowrap;
}

.show-correct-options .option-item.is-correct {
    border-color: #7fbea0;
    background: #f2faf5;
}

.show-correct-options .option-item.is-correct .option-letter {
    background: #dff2e7;
    color: #17613e;
}

.show-correct-options .correct-option-mark {
    display: inline-block;
}

@media (max-width: 720px) {
    .option-detail {
        padding-left: 16px;
    }

    .option-item {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .correct-option-mark {
        grid-column: 2;
        justify-self: start;
    }
}