.dd-referral-box {
    margin-top: 20px;
    padding: 20px;
    background: #f0f8ff;
    border: 1px solid #77B1D4;
    border-radius: 10px;
}

.dd-referral-box input {
    width: 100%;
    max-width: 400px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.btn-green {
    background: #28a745;
    color: #fff;
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    margin-right: 8px;
    cursor: pointer;
}

.btn-blue {
    background: #17a2b8;
    color: #fff;
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#copyMsg {
    margin-left: 10px;
    color: green;
    display: none;
}

.dd-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.dd-share-buttons .btn {
    padding: 8px 14px;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.whatsapp { background: #25D366; }
.telegram { background: #0088cc; }
.facebook { background: #1877F2; }
.twitter { background: #000; }
.instagram { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.email { background: #6c757d; }
.more { background: #343a40; }

.dd-ref-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Top Card */
.ref-card {
    background: #eaf7ea;
    border: 1px solid #28a745;
    padding: 20px;
    border-radius: 10px;
}

.ref-card input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.btn-group button {
    padding: 8px 15px;
    margin-right: 8px;
    border: none;
    border-radius: 6px;
    background: #28a745;
    color: #fff;
    cursor: pointer;
}

/* Stats */
.ref-stats {
    display: flex;
    gap: 15px;
}

.ref-stats .stat {
    flex: 1;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}

/* Table */
.ref-table {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}

.ref-table table {
    width: 100%;
    border-collapse: collapse;
}

.ref-table th,
.ref-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.ref-table .converted {
    color: green;
    font-weight: bold;
}

.ref-table .pending {
    color: orange;
    font-weight: bold;
}