/* أنماط وحدة: referrals */
.ref-page { padding: 36px 0; }
.ref-page h2 { font-size: 1.15rem; margin: 26px 0 12px; }
.ref-lead { font-size: 1rem; margin: 0 0 16px; }

.ref-link { display: flex; gap: 8px; margin-bottom: 18px; }
.ref-link input { flex: 1; min-width: 0; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border);
                  background: var(--surface); color: var(--text); font-family: inherit; font-size: .95rem; }

.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ref-stats > div { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius);
                   border: 1px solid var(--border); background: var(--surface); }
.ref-stats strong { font-size: 1.35rem; }
.ref-note { margin-top: 10px; font-size: .85rem; }

.ref-st { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .76rem; font-weight: 700;
          border: 1px solid var(--border); white-space: nowrap; }
.ref-st-pending { color: #d97706; border-color: #d97706; }
.ref-st-paid    { color: #16a34a; border-color: #16a34a; }
.ref-st-void    { color: var(--text-dim); }
.ref-flag { display: inline-block; margin-inline-start: 6px; padding: 1px 6px; border-radius: 6px; font-size: .72rem;
            font-weight: 700; color: #dc2626; border: 1px solid #dc2626; }

.ref-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ref-check { display: flex !important; gap: 8px; align-items: center; color: var(--text) !important; }
.ref-mode { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.ref-mode legend { font-size: .9rem; font-weight: 600; color: var(--text-dim); padding: 0 6px; }
.ref-mode label { display: flex; gap: 8px; align-items: center; margin: 6px 0; color: var(--text); font-weight: 500; }
.ref-custom { list-style: none; padding: 0; margin: 14px 0 0; font-size: .9rem; }
.ref-custom li { padding: 5px 0; border-top: 1px solid var(--border); }
.ref-void { display: flex; gap: 6px; }
.ref-void input { width: 130px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border);
                  background: var(--bg); color: var(--text); font-family: inherit; }

.ref-keybox { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px;
              background: var(--bg); }
.ref-keybox-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.ref-keybox input[type=password] { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
              border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; }
.ref-keybox .ref-check { margin: 8px 0 0; font-weight: 500; }
.ref-guide { margin-top: 10px; font-size: .88rem; }
.ref-guide summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.ref-guide ol { margin: 8px 0 4px; padding-inline-start: 20px; line-height: 1.8; }

@media (max-width: 720px) {
    .ref-stats, .ref-admin-grid { grid-template-columns: 1fr; }
    .ref-link { flex-direction: column; }
}