:root {
  --referral-green: #116649;
  --referral-ink: #10271f;
  --referral-line: #cbdcd2;
  --referral-soft: #f2f8f4;
  --referral-lime: #c5f350;
}

.profile-menu .referral-profile-entry { color: var(--referral-green); font-weight: 800; }
.profile-menu .referral-profile-entry em { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: #eef7f1; color: var(--referral-green); font-size: 11px; font-style: normal; }

.referral-modal-backdrop { position: fixed; inset: 0; z-index: 10060; display: grid; place-items: center; padding: 22px; background: rgba(9,30,23,.58); backdrop-filter: blur(7px); }
.referral-modal { width: min(680px,100%); max-height: calc(100vh - 44px); overflow: auto; border: 1px solid rgba(255,255,255,.65); border-radius: 28px; background: #fff; color: var(--referral-ink); box-shadow: 0 28px 90px rgba(6,36,25,.26); }
.referral-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 28px 30px 18px; }
.referral-modal header span,.referral-admin-header > div > span { color: var(--referral-green); font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.referral-modal h2 { margin: 7px 0 0; font-size: 30px; }
.referral-modal header p,.referral-admin-header p { margin: 8px 0 0; color: #63766e; line-height: 1.65; }
.referral-close { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: var(--referral-soft); color: #587068; font-size: 26px; }
.referral-modal-body { padding: 0 30px 30px; }
.referral-loading { padding: 32px; border-radius: 18px; background: var(--referral-soft); color: #63766e; text-align: center; }
.referral-code-card { padding: 22px; border-radius: 20px; background: linear-gradient(135deg,#10271f,#164b38); color: #fff; }
.referral-code-card > span { color: #c7d8d0; font-size: 13px; }
.referral-code-card > p { max-width: 520px; margin: 8px 0 16px; color: #fff; font-size: 18px; font-weight: 800; line-height: 1.5; }
.referral-code-card > .referral-code-value { color: #b7f33d; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: clamp(24px, 4vw, 34px); letter-spacing: .035em; line-height: 1.25; overflow-wrap: anywhere; }
.referral-code-card > div { display: flex; flex-wrap: wrap; gap: 9px; }
.referral-code-card button { padding: 10px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 11px; background: #fff; color: var(--referral-ink); font-weight: 800; }
.referral-code-card .referral-poster-trigger { border-color: var(--referral-lime); background: var(--referral-lime); color: #143127; }
.referral-code-card .referral-poster-trigger:hover { background: #d4fb72; }
.referral-code-card small { display: block; margin-top: 13px; color: #bdd0c7; line-height: 1.55; }
.referral-personal-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 14px 0; }
.referral-personal-metrics > div { padding: 18px; border: 1px solid var(--referral-line); border-radius: 16px; background: #f7fbf8; }
.referral-personal-metrics span,.referral-personal-metrics small { color: #65776f; }
.referral-personal-metrics strong { display: block; margin: 5px 0; color: var(--referral-green); font-size: 30px; }
.referral-admin-refresh { padding: 12px 17px; border: 0; border-radius: 12px; background: var(--referral-green); color: #fff; font-weight: 800; }
.referral-message { margin: 10px 0 0 !important; font-size: 13px; }
.referral-message.error { color: #b43e33 !important; }

.referral-poster-backdrop { position: fixed; inset: 0; z-index: 10080; display: grid; place-items: center; padding: 20px; background: rgba(7,27,20,.72); backdrop-filter: blur(10px); }
.referral-poster-dialog { position: relative; display: grid; grid-template-columns: minmax(300px,420px) minmax(270px,1fr); width: min(900px,100%); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid rgba(255,255,255,.58); border-radius: 28px; background: #fff; color: var(--referral-ink); box-shadow: 0 30px 110px rgba(3,24,16,.38); }
.referral-poster-preview { display: grid; place-items: center; min-width: 0; padding: 24px; background: #e9f1eb; }
.referral-poster-preview canvas { display: block; width: min(100%,390px); height: auto; border-radius: 14px; background: #fff; box-shadow: 0 16px 45px rgba(7,43,30,.18); }
.referral-poster-controls { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 42px 36px 36px; }
.referral-poster-controls > span { color: var(--referral-green); font-size: 12px; font-weight: 850; letter-spacing: .14em; }
.referral-poster-controls h3 { margin: 8px 0 10px; font-size: 30px; }
.referral-poster-controls > p { margin: 0; color: #61746b; line-height: 1.7; }
.referral-poster-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--referral-soft); color: #587068; font-size: 25px; }
.referral-poster-code { margin: 24px 0; padding: 15px 17px; border: 1px solid #cae0d2; border-radius: 14px; background: #f3f8f5; }
.referral-poster-code small { display: block; color: #687a72; }
.referral-poster-code strong { display: block; margin-top: 5px; overflow-wrap: anywhere; color: var(--referral-green); font: 850 20px/1.35 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
.referral-poster-actions { display: grid; gap: 10px; }
.referral-poster-actions button { width: 100%; padding: 13px 16px; border: 1px solid var(--referral-green); border-radius: 12px; background: var(--referral-green); color: #fff; font-weight: 850; }
.referral-poster-actions button.is-secondary { background: #fff; color: var(--referral-green); }
.referral-poster-actions button:disabled { cursor: wait; opacity: .65; }
.referral-poster-status { min-height: 20px; margin-top: 12px !important; font-size: 12px; }
.referral-poster-status.is-error { color: #aa3c32 !important; }

.admin-main.referral-admin-active > :not(.referral-admin-root) { display: none !important; }
.admin-sidebar .referral-admin-nav { width: 100%; }
.referral-admin-root { width: 100%; color: var(--referral-ink); }
.referral-admin-header { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.referral-admin-header h1 { margin: 7px 0; font-size: clamp(34px,4vw,52px); }
.referral-admin-refresh { align-self: center; }
.referral-admin-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.referral-admin-metrics > div,.referral-admin-card { border: 1px solid var(--referral-line); border-radius: 20px; background: #fff; }
.referral-admin-metrics > div { padding: 20px; }
.referral-admin-metrics span,.referral-admin-metrics small { color: #63756e; }
.referral-admin-metrics strong { display: block; margin: 7px 0 2px; color: var(--referral-green); font-size: 32px; }
.referral-admin-card { padding: 24px; }
.referral-admin-feedback { margin: -8px 0 18px; padding: 11px 14px; border: 1px solid #b8d8c5; border-radius: 12px; background: #edf8f1; color: var(--referral-green); font-weight: 750; }
.referral-admin-feedback.is-error { border-color: #ecc5bf; background: #fff3f1; color: #a43b31; }
.referral-admin-toolbar { display: grid; grid-template-columns: 1fr 220px; gap: 12px; margin-bottom: 16px; }
.referral-admin-toolbar input,.referral-admin-toolbar select { width: 100%; min-width: 0; padding: 12px 13px; border: 1px solid var(--referral-line); border-radius: 12px; background: #fff; }
.referral-admin-table-wrap { overflow: auto; }
.referral-admin-table { width: 100%; min-width: 1450px; border-collapse: collapse; }
.referral-admin-table th,.referral-admin-table td { padding: 13px 10px; border-bottom: 1px solid #dfebe4; text-align: left; vertical-align: top; }
.referral-admin-table th { color: #60736a; font-size: 13px; }
.referral-admin-table td small { display: block; margin-top: 4px; color: #708279; }
.referral-admin-table td > strong { color: var(--referral-green); font-size: 20px; }
.referral-admin-table [data-referral-copy] { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid #b8d2c3; border-radius: 9px; background: #f5faf7; font: 700 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: nowrap; }
.referral-admin-table [data-referral-copy] em { color: #5e7469; font-size: 10px; font-style: normal; }
.referral-admin-invite-cell { width: 290px; }
.referral-admin-user-cell { min-width: 180px; }
.referral-admin-user-level { display: inline-flex; margin-top: 7px; padding: 3px 7px; border-radius: 999px; background: #eef6f1; color: var(--referral-green); font-size: 11px; font-weight: 800; }
.referral-admin-relation-cell { min-width: 170px; }
.referral-admin-relation-empty { color: #7a8982; font-weight: 750; }
.referral-admin-children-toggle { padding: 8px 11px; border: 1px solid #8fbea2; border-radius: 9px; background: #edf8f1; color: var(--referral-green); font-weight: 850; white-space: nowrap; }
.referral-admin-children-toggle:hover,.referral-admin-children-toggle[aria-expanded="true"] { background: var(--referral-green); color: #fff; }
.referral-admin-children-row[hidden] { display: none; }
.referral-admin-children-row > td { padding: 0 10px 18px; border-bottom: 1px solid #c8ddd0; background: #f8fbf9; }
.referral-admin-children-panel { padding: 18px; border: 1px solid #bdd7c7; border-radius: 16px; background: #fff; box-shadow: inset 4px 0 var(--referral-lime); }
.referral-admin-children-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.referral-admin-children-panel > header strong { display: block; color: var(--referral-ink); font-size: 17px; }
.referral-admin-children-panel > header small { display: block; margin-top: 4px; color: #65776f; }
.referral-admin-children-panel > header > span { padding: 5px 9px; border-radius: 999px; background: #eaf5ee; color: var(--referral-green); font-size: 12px; font-weight: 850; white-space: nowrap; }
.referral-admin-children-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 9px; }
.referral-admin-children-list article { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 3px 12px; padding: 12px 13px; border: 1px solid #deebe3; border-radius: 12px; background: #f7fbf8; }
.referral-admin-children-list article div { min-width: 0; }
.referral-admin-children-list article b,.referral-admin-children-list article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.referral-admin-children-list article > small { grid-column: 1 / -1; color: #71827a; }
.referral-admin-child-membership { padding: 4px 7px; border-radius: 999px; background: #eef2f0; color: #67776f; font-size: 11px; font-weight: 800; white-space: nowrap; }
.referral-admin-child-membership.is-active { background: #dff3e7; color: var(--referral-green); }
.referral-admin-children-note { margin: 12px 0 0; color: #6b7c74; font-size: 12px; }
.referral-admin-link-copy { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; margin-top: 8px; }
.referral-admin-link-copy code { min-width: 0; overflow: hidden; color: #63766e; font: 500 11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; white-space: nowrap; }
.referral-admin-link-copy [data-referral-copy] { padding: 6px 8px; }
.referral-admin-reset-count { padding: 8px 11px; border: 1px solid #9dc8af; border-radius: 9px; background: #eff8f2; color: var(--referral-green); font-weight: 800; white-space: nowrap; }
.referral-admin-reset-count:hover { background: #def0e4; }
.referral-admin-reset-count:disabled { cursor: wait; opacity: .62; }
.referral-admin-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; color: #62756c; }
.referral-admin-pagination button { padding: 8px 12px; border: 1px solid var(--referral-line); border-radius: 9px; background: #fff; }

@media (max-width: 900px) { .referral-admin-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) {
  .referral-modal { border-radius: 22px; }
  .referral-modal > header,.referral-modal-body { padding-left: 20px; padding-right: 20px; }
  .referral-code-card > div,.referral-admin-header { align-items: stretch; flex-direction: column; }
  .referral-personal-metrics,.referral-admin-metrics,.referral-admin-toolbar { grid-template-columns: 1fr; }
  .referral-admin-pagination { flex-wrap: wrap; justify-content: center; }
  .referral-poster-backdrop { padding: 12px; }
  .referral-poster-dialog { grid-template-columns: 1fr; max-height: calc(100vh - 24px); border-radius: 22px; }
  .referral-poster-preview { padding: 18px; }
  .referral-poster-preview canvas { width: min(100%,310px); }
  .referral-poster-controls { padding: 32px 22px 24px; }
  .referral-poster-close { top: 12px; right: 12px; }
}