.sgpp-referral-box {
    background:#f8fbff;
    border:1px solid #dbeafe;
    border-left:5px solid #73af2b;
    border-radius:12px;
    padding:20px;
    margin:0 0 30px;
}
.sgpp-referral-head {
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
}
.sgpp-referral-head h3,
.sgpp-referral-box h4 {
    color:#004b8d !important;
    margin:0 0 10px !important;
}
.sgpp-referral-head p,
.sgpp-referral-note {
    color:#374151;
    font-size:14px;
    line-height:1.55;
    margin:0 0 14px;
}
.sgpp-referral-reward {
    background:#fff;
    border:1px solid #dbeafe;
    border-radius:10px;
    padding:12px 14px;
    min-width:150px;
}
.sgpp-referral-reward span,
.sgpp-referral-grid span {
    display:block;
    color:#6b7280;
    font-size:12px;
}
.sgpp-referral-reward strong,
.sgpp-referral-grid strong {
    color:#0b1437;
    font-size:18px;
}
.sgpp-referral-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:16px 0;
}
.sgpp-referral-grid > div {
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:12px 14px;
}
.sgpp-referral-linkrow {
    display:grid;
    grid-template-columns:1fr auto auto auto;
    gap:10px;
    align-items:end;
    margin:18px 0 10px;
}
.sgpp-referral-linkrow label {
    grid-column:1/-1;
    font-size:13px;
    font-weight:700;
    color:#0b1437;
}
.sgpp-referral-linkrow input {
    width:100%;
    min-height:42px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    padding:9px 12px;
}
.sgpp-referral-copy,
.sgpp-referral-action {
    border:0;
    border-radius:8px;
    background:#004b8d;
    color:#fff !important;
    font-weight:700;
    min-height:42px;
    padding:10px 14px;
    text-decoration:none;
    cursor:pointer;
    white-space:nowrap;
}
.sgpp-referral-action {
    display:inline-flex;
    align-items:center;
}
.sgpp-referral-code {
    color:#374151;
    font-size:14px;
    margin:0 0 20px;
}
.sgpp-referral-table-wrap {
    overflow-x:auto;
}
.sgpp-referral-table {
    width:100%;
    border-collapse:collapse;
    background:#fff;
}
.sgpp-referral-table th,
.sgpp-referral-table td {
    border-top:1px solid #e5e7eb;
    padding:11px 10px;
    text-align:left;
    font-size:13px;
}
.sgpp-referral-table th {
    color:#0b1437;
    background:#f8fafc;
}
@media (max-width:768px) {
    .sgpp-referral-head,
    .sgpp-referral-linkrow {
        display:block;
    }
    .sgpp-referral-reward,
    .sgpp-referral-linkrow input,
    .sgpp-referral-copy,
    .sgpp-referral-action {
        width:100%;
        margin-top:10px;
        box-sizing:border-box;
    }
    .sgpp-referral-grid {
        grid-template-columns:1fr;
    }
}