/* ==============================
   Receive Page
   ============================== */

.otp-box {
    max-width: 500px;
    margin: 40px auto;

    padding: 45px 30px;

    text-align: center;

    background: rgba(15, 15, 15, 0.85);

    border: 1px solid #252525;
    border-radius: 22px;
}

.receive-icon {
    width: 75px;
    height: 75px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;

    font-size: 38px;

    color: #8cff00;

    background: rgba(140, 255, 0, 0.08);
}

.otp-box h2 {
    font-size: 23px;
    margin-bottom: 8px;
}

.otp-box p {
    color: #777;
    margin-bottom: 25px;
}


/* OTP Input */

#otpInput {
    width: 100%;

    padding: 17px;

    border-radius: 13px;

    border: 1px solid #303030;
    background: #080808;

    color: white;

    text-align: center;

    font-size: 28px;
    font-weight: 700;

    letter-spacing: 10px;

    outline: none;

    margin-bottom: 15px;

    transition: 0.2s;
}

#otpInput:focus {
    border-color: #8cff00;
    box-shadow: 0 0 0 3px rgba(140, 255, 0, 0.08);
}

#connectButton {
    background: linear-gradient(
        90deg,
        #65c900,
        #a5ff00
    );

    color: #071000;
}


/* Shared Content */

.shared-content {
    margin-top: 35px;
}

.shared-content > .section-header {
    padding: 20px;

    background: #101010;

    border: 1px solid #252525;
    border-radius: 15px;
}

.shared-content h2 {
    font-size: 20px;
}

.shared-content p {
    color: #777;
    font-size: 13px;
    margin-top: 5px;
}


/* Received files */

.received-item {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 15px;

    background: #101010;

    border: 1px solid #252525;
    border-radius: 13px;
}

.received-item input {
    width: 18px;
    height: 18px;
    accent-color: #8cff00;
}

.received-info {
    flex: 1;
}

.received-name {
    font-weight: 600;
}

.received-size {
    color: #777;
    font-size: 13px;
    margin-top: 4px;
}

#downloadSelected {
    margin-top: 20px;

    background: linear-gradient(
        90deg,
        #65c900,
        #a5ff00
    );

    color: #071000;
}

/* Final light-mode overrides */
.otp-box, .shared-content > .section-header, .received-item { background: #fff; border-color: var(--border); }
.receive-icon { color: #4cae4f; background: #edf9ed; }
.otp-box p, .shared-content p, .received-size { color: var(--muted); }
#otpInput { border-color: #b9c8db; background: #fff; color: var(--text); }
#otpInput:focus { border-color: #4cae4f; box-shadow: 0 0 0 3px rgba(76,174,79,.12); }
#connectButton, #downloadSelected { background: linear-gradient(90deg,#48a34b,#6bc56e); color: #fff; }
.received-item input { accent-color: #4cae4f; }

.transfer-progress {
    margin-bottom: 16px;
    padding: 15px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
}
.progress-summary {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}
#progressFileName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#progressPercent { color: #4cae4f; flex: 0 0 auto; }
.progress-track { height: 9px; overflow: hidden; background: #e8eff8; border-radius: 99px; }
.progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #48a34b, #75cb78); transition: width .15s linear; }

@media (max-width: 650px) {
    .otp-box { margin: 24px auto; padding: 32px 18px; border-radius: 18px; }
    .receive-icon { width: 62px; height: 62px; font-size: 32px; margin-bottom: 15px; }
    #otpInput { font-size: 23px; letter-spacing: 7px; padding: 15px 10px; }
    .shared-content { margin-top: 25px; }
    .shared-content > .section-header { padding: 15px; }
    .received-item { padding: 12px; gap: 10px; }
    .received-name { overflow-wrap: anywhere; }
    .progress-summary { font-size: 13px; }
}

/* Light-mode surfaces */
.otp-box, .shared-content > .section-header, .received-item { background: #fff; border-color: var(--border); }
.receive-icon { color: #4cae4f; background: #edf9ed; }
.otp-box p, .shared-content p, .received-size { color: var(--muted); }
#otpInput { border-color: #b9c8db; background: #fff; color: var(--text); }
#otpInput:focus { border-color: #4cae4f; box-shadow: 0 0 0 3px rgba(76,174,79,.12); }
#connectButton, #downloadSelected { background: linear-gradient(90deg,#48a34b,#6bc56e); color: #fff; }
.received-item input { accent-color: #4cae4f; }