@media (max-width:768px) {
    body {
        padding-top: 64px;
    }
}

.m-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
}

.m-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 6px;
}

.m-sub {
    font-size: 13px;
    color: #6b7280;
}

/* ===== STEP (LOCKED) ===== */
.step-panel {
    display: none;
}

.step-panel.active {
    display: block;
}

/* ===== QUESTION ===== */
.score-row {
    border-bottom: 1px dashed #e5e7eb;
    padding: 10px 0;
}

.topic-text {
    font-size: 14px;
    margin-bottom: 8px;
}

.seg {
    display: flex;
    gap: 8px;
}

.seg input {
    display: none;
}

.seg label {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    padding: 10px 6px;
    text-align: center;
    font-size: 13px;
}

.btnseg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tick {
    width: 28px;
    height: 28px;
    border: 2px solid #9ca3af;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: transparent;
}

.seg input:checked+.btnseg {
    background: #eef5ff;
    border-radius: 12px;
}

.seg input:checked+.btnseg .tick {
    border-color: #198754;
    background: #eaf6ee;
    color: #198754;
}

/* ===== STICKY ===== */
.m-sticky {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 10px;
}

/* ===== UPLOAD ===== */
.upload-icon {
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    padding: 16px;
    font-size: 28px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
}

.upload-icon:hover {
    background: #eef5ff;
    border-color: #0d6efd;
}

.preview-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
    margin: 4px;
}

.mic-btn {
    font-size: 18px;
}

/* ===== MOBILE PROGRESS BAR ===== */
#mobile-progress {
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 0 14px;
}

#mobile-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2563eb, #0d6efd);
    transition: width .3s ease;
}

/* 
.upload-grid {
    display: flex;
    gap: 14px;
    margin-top: 12px;
}

.upload-box {
    flex: 1;
    border: 1.8px dashed #cbd5e1;
    border-radius: 18px;
    padding: 22px 10px;
    text-align: center;
    background: #ffffff;
    cursor: pointer;
    transition: all .2s ease;
}

.upload-box:hover {
    border-color: #2563eb;
    background: #f0f6ff;
}

.upload-icon-pro {
    width: 42px;
    height: 42px;
    stroke: #2563eb;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 8px;
}

.upload-text {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}===== Professional Upload Icons ===== */
/* ===== Upload Icon (Grayscale + Subtle Hover) ===== */

.upload-grid {
    display: flex;
    gap: 14px;
    margin-top: 12px;
}

.upload-box {
    flex: 1;
    border: 1.8px dashed #d1d5db;
    border-radius: 18px;
    padding: 22px 10px;
    text-align: center;
    background: #ffffff;
    cursor: pointer;
    transition: all .25s ease;
}

/* ===== Default (Grayscale / Professional) ===== */
.upload-icon-pro {
    width: 42px;
    height: 42px;
    stroke: #6b7280;
    /* เทา */
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 8px;
    transition: all .25s ease;
}

.upload-text {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    transition: color .25s ease;
}

/* ===== Hover / Active (Soft Highlight) ===== */
.upload-box:hover {
    border-color: #2563eb;
    background: #f0f6ff;
    transform: translateY(-2px);
    /* ขยับนิดเดียว */
}

.upload-box:hover .upload-icon-pro {
    stroke: #2563eb;
    /* เปลี่ยนเป็นน้ำเงิน */
}

.upload-box:hover .upload-text {
    color: #1d4ed8;
}

/* ===== Mobile Touch Feedback ===== */
.upload-box:active {
    transform: scale(0.97);
}