/* ============ FORM ============ */
.vrt-form-wrap { max-width: 520px; margin: 20px auto; }
.vrt-form {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 28px 30px; box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.vrt-form h3 { margin: 0 0 20px; font-size: 22px; text-align: center; color: #1a5276; }
.vrt-field { margin-bottom: 16px; }
.vrt-field label { display: block; font-weight: 600; margin-bottom: 6px; color: #333; font-size: 14px; }
.vrt-field label span { color: #e74c3c; }
.vrt-field input {
    width: 100%; padding: 11px 14px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 15px; box-sizing: border-box; transition: border-color .2s, box-shadow .2s;
}
.vrt-field input:focus { border-color: #5b86e5; box-shadow: 0 0 0 3px rgba(91,134,229,.15); outline: none; }
.vrt-field small { display: block; color: #888; font-size: 12px; margin-top: 4px; }

.vrt-submit-btn {
    width: 100%; background: linear-gradient(90deg, #36d1dc, #5b86e5); color: #fff;
    border: none; padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: opacity .2s, transform .1s;
}
.vrt-submit-btn:hover { opacity: .92; }
.vrt-submit-btn:active { transform: translateY(1px); }
.vrt-submit-btn:disabled { opacity: .6; cursor: not-allowed; }
.vrt-form-msg { margin-top: 12px; }

/* ============ LEADERBOARD ============ */
.vrt-lb-wrap { max-width: 760px; margin: 24px auto; }
.vrt-lb-wrap h3 { text-align: center; color: #1a5276; margin-bottom: 14px; }
.vrt-lb-tools { display: flex; gap: 8px; margin-bottom: 12px; }
.vrt-lb-tools input {
    flex: 1; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;
}
.vrt-lb-table-holder { overflow-x: auto; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.vrt-lb-table { width: 100%; border-collapse: collapse; background: #fff; }
.vrt-lb-table thead th {
    background: linear-gradient(90deg, #36d1dc, #5b86e5); color: #fff;
    padding: 12px 14px; text-align: left; font-size: 14px;
}
.vrt-lb-table td { padding: 11px 14px; border-bottom: 1px solid #eef0f2; font-size: 14px; }
.vrt-lb-table tbody tr:hover { background: #f7fbff; }
.vrt-lb-rank { text-align: center; font-weight: 700; font-size: 16px; width: 60px; }
.vrt-lb-top { background: #fffdf3; }
.vrt-lb-top td { font-weight: 600; }

/* ============ PROGRESS ============ */
.vrt-progress-wrap { max-width: 640px; margin: 24px auto; }
.vrt-progress-wrap h3 { text-align: center; color: #1a5276; }
.vrt-inline-form { display: flex; gap: 8px; margin-bottom: 16px; }
.vrt-inline-form input {
    flex: 1; padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px;
}
.vrt-progress-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 22px 24px; box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.vrt-progress-card h4 { margin: 0 0 8px; font-size: 20px; color: #1a5276; }
.vrt-progress-card h5 { margin: 20px 0 8px; }
.vrt-badge {
    display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px;
    border-radius: 20px; background: #e9ecef; color: #555; vertical-align: middle; margin-left: 6px;
}
.vrt-badge-ok { background: #d4edda; color: #1a7f37; }
.vrt-bar { background: #e9ecef; border-radius: 20px; overflow: hidden; height: 26px; margin: 12px 0; }
.vrt-bar-fill {
    height: 100%; line-height: 26px; color: #fff; font-size: 13px; font-weight: 700;
    text-align: center; background: linear-gradient(90deg, #36d1dc, #5b86e5); transition: width .6s;
    min-width: 28px;
}
.vrt-sisa { color: #555; }
.vrt-history-holder { overflow-x: auto; max-height: 340px; overflow-y: auto; border: 1px solid #eef0f2; border-radius: 8px; }
.vrt-history-table { width: 100%; border-collapse: collapse; }
.vrt-history-table thead th {
    position: sticky; top: 0; background: #f4f6f8; padding: 10px 12px; text-align: left;
    font-size: 13px; border-bottom: 1px solid #e0e3e7;
}
.vrt-history-table td { padding: 9px 12px; border-bottom: 1px solid #f0f2f4; font-size: 13px; }

/* ============ DOWNLOAD ============ */
.vrt-download-wrap { max-width: 520px; margin: 20px auto; }
.vrt-download-wrap h3 { text-align: center; color: #1a5276; }
.vrt-download-wrap > p { text-align: center; color: #666; margin-bottom: 4px; }