.referral-body{--ref-ink:#102653;--ref-muted:#62728a;background:#f6f8fc}
.referral-main{width:100%;max-width:1440px;margin:0 auto;padding:32px;min-height:calc(100vh - 74px)}
.referral-page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.referral-page-heading h1{font-size:28px;font-weight:650;letter-spacing:-.7px;margin:5px 0 7px;line-height:1.25}.referral-page-heading>div>p:last-child,.referral-back{font-size:13px;color:var(--ref-muted)}.referral-back{display:inline-flex;align-items:center;gap:7px;padding:9px 0;white-space:nowrap}.referral-back svg{width:16px;height:16px}.referral-back:hover{color:#1467f3}
.referral-state{background:#fff;border:1px solid #e0e7f1;border-radius:14px;padding:48px 24px;text-align:center;margin-bottom:24px}.state-symbol{width:54px;height:54px;border-radius:15px;background:#edf4ff;color:#175cd8;display:grid;place-items:center;margin:0 auto 18px}.state-symbol svg{width:25px;height:25px}.referral-state h2{font-size:19px;font-weight:650;margin-bottom:8px}.referral-state>p{color:var(--ref-muted);font-size:13px;max-width:540px;margin:auto;line-height:1.7}.state-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}.referral-state.is-loading .state-symbol{animation:referral-pulse 1.4s ease-in-out infinite}
.referral-notice,.paused-banner{border:1px solid #c4d8f8;background:#edf4ff;border-radius:10px;padding:14px 17px;color:#17498e;line-height:1.6;font-size:13px;margin-bottom:20px}.referral-notice[data-tone="error"]{background:#fff4f3;border-color:#f3cbc6;color:#923a30}.paused-banner{display:flex;align-items:flex-start;gap:11px;border-color:#f0dda8;background:#fffaf0;color:#775011}.paused-banner strong{display:block;margin-bottom:2px}.paused-banner svg{margin-top:2px;flex-shrink:0}
.referral-hero-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,1fr);gap:34px;align-items:center;background:linear-gradient(120deg,#163762,#10294d 75%);border:1px solid #173b68;border-radius:16px;padding:32px;margin-bottom:22px}.hero-tag{display:inline-flex;align-items:center;gap:8px;color:#b8d7ff;font-size:12px;font-weight:550;margin-bottom:14px}.hero-tag svg{width:17px;height:17px}.hero-intro h2{color:#fff;font-size:30px;font-weight:650;line-height:1.28;letter-spacing:-.7px;margin:0 0 14px;max-width:430px}.hero-intro>p{font-size:13px;color:#d0dff0;line-height:1.8;max-width:490px}.program-pill{display:inline-flex;align-items:center;gap:7px;background:#d7edff14;border:1px solid #d3e6ff2b;color:#d9ebff;border-radius:20px;padding:5px 10px;margin-top:20px;font-size:11px}.program-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:#72d6ae}.program-pill.is-paused::before{background:#f5cd79}
.share-panel{min-width:0;background:#fff;border-radius:12px;padding:22px;color:var(--ref-ink);box-shadow:0 12px 30px #05182c1a}.share-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:19px}.share-heading h3{font-size:14px;font-weight:650}.share-heading>span{font-size:10px;color:var(--ref-muted)}.share-label{display:block;font-size:10px;font-weight:650;letter-spacing:.7px;color:#62728a;margin-bottom:7px}.code-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #e5ebf3;min-width:0}#myReferralCode{display:block;font-family:ui-monospace,Consolas,monospace;font-size:25px;letter-spacing:2px;color:#133f7d;overflow-wrap:anywhere;line-height:1.35}.copy-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;flex-shrink:0;padding:9px 12px;border:1px solid #d8e3f4;border-radius:7px;background:#f6f9ff;color:#2058a1;font-size:11px;font-weight:600;white-space:nowrap}.copy-btn:hover:enabled{background:#eaf2ff;border-color:#a8c4ed}.copy-btn svg{width:15px;height:15px}.link-row{display:flex;border:1px solid #dce5f1;border-radius:7px;overflow:hidden;background:#fafbfd;min-width:0}.link-row input{min-width:0;width:100%;flex:1;border:0;background:transparent;padding:10px 11px;color:#48617f;font-size:11px;outline-offset:-3px}.link-row .copy-btn{border:0;border-left:1px solid #dce5f1;border-radius:0;background:#fff;padding:10px}.social-share-row{display:flex;gap:9px;margin-top:13px}.social-btn{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;padding:9px 11px;border:1px solid #dce5f1;border-radius:7px;color:#315578;font-size:11px;font-weight:550}.social-btn:hover{background:#f3f7fd;border-color:#b4cae8}.social-btn i{font-size:16px}.social-btn[aria-disabled="true"]{opacity:1;color:#6c7e95;background:#f8fafd;border-color:#e2e9f2;pointer-events:none}.copy-help{font-size:11px;color:#62728a;line-height:1.6;margin-top:12px;min-height:16px}
.referral-stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}.ref-stat-card{display:flex;align-items:center;gap:14px;padding:20px 22px;border:1px solid #e1e8f1;border-radius:11px;background:#fff;min-width:0}.stat-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:11px;flex-shrink:0}.stat-icon svg{width:20px;height:20px}.stat-icon.green{background:#e6f5ee;color:#19825e}.stat-icon.blue{background:#eaf2ff;color:#2663bc}.stat-icon.purple{background:#f0edfc;color:#7954b7}.ref-stat-card p{font-size:11px;color:var(--ref-muted);margin-bottom:3px}.ref-stat-card strong{font-size:27px;line-height:1.3;font-weight:650;color:var(--ref-ink);font-variant-numeric:tabular-nums}
.referral-steps,.rewards-section,.history-section{background:#fff;border:1px solid #e1e8f1;border-radius:12px;padding:24px;margin-bottom:22px}.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}.section-heading h2{font-size:16px;font-weight:650;color:var(--ref-ink);margin-bottom:5px}.section-heading p{font-size:12px;color:var(--ref-muted);line-height:1.6}.referral-steps ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}.referral-steps li{display:flex;align-items:flex-start;gap:12px}.referral-steps li>span{background:#f0f5fd;color:#3168b1;border:1px solid #e0eafb;border-radius:9px;padding:6px 8px;font-size:11px;font-weight:650;flex-shrink:0}.referral-steps h3{font-size:12px;font-weight:650;margin:1px 0 6px}.referral-steps li p{font-size:12px;color:var(--ref-muted);line-height:1.7}.section-count{font-size:11px;color:#3663a5;background:#edf4ff;border-radius:6px;padding:5px 9px;white-space:nowrap}
.available-rewards-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:14px}.reward-card{border:1px solid #d3e2f8;border-radius:10px;background:#f8fbff;padding:19px;display:flex;flex-direction:column;gap:14px;min-width:0}.reward-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.reward-duration{font-size:19px;font-weight:650;color:#174580}.reward-status{font-size:10px;color:#247658;background:#e9f6ef;padding:4px 7px;border-radius:5px}.reward-card p{font-size:12px;color:var(--ref-muted);line-height:1.7}.reward-card .button{margin-top:auto;white-space:normal;min-height:40px;height:auto;padding:11px}.empty-state{grid-column:1/-1;background:#f8fafd;border:1px dashed #dce5f1;border-radius:9px;padding:30px 20px;text-align:center;color:var(--ref-muted);font-size:12px;line-height:1.8}.empty-state strong{display:block;color:#355075;font-size:13px;font-weight:600;margin-bottom:5px}.reward-footnote{font-size:11px;color:#62728a;line-height:1.8;margin-top:16px}.referral-refresh{display:flex;align-items:center;gap:6px;padding:5px 0;color:#547098;font-size:11px}.referral-refresh svg{width:14px;height:14px}.referral-refresh:hover{color:#1467f3}
.history-tabs{display:flex;gap:20px;border-bottom:1px solid #e2e9f3;margin-bottom:6px;overflow:auto}.history-tab-btn{white-space:nowrap;color:#6c7c93;font-size:12px;padding:9px 1px 12px;border-bottom:2px solid transparent}.history-tab-btn.active{color:#175cd0;border-bottom-color:#175cd0;font-weight:600}.history-panel{overflow-x:auto;max-width:100%}.simple-table{width:100%;border-collapse:collapse;min-width:560px;font-size:12px}.simple-table th{text-align:left;color:#62728a;font-weight:550;font-size:10px;padding:14px 12px;border-bottom:1px solid #e7edf5;white-space:nowrap}.simple-table td{padding:15px 12px;border-bottom:1px solid #edf1f7;color:#49617f;vertical-align:middle}.simple-table tr:last-child td{border-bottom:0}.simple-table td:first-child strong{color:#263e60;font-weight:550}.table-empty{text-align:center!important;padding:28px 12px!important;color:#62728a!important}.status-tag{font-size:10px;display:inline-block;padding:4px 7px;border-radius:5px;background:#fff5df;color:#936b24;white-space:nowrap}.status-tag.success{background:#eaf6ef;color:#26734f}.status-tag.rejected{background:#f6eeee;color:#944e4e}
.referral-page-footer{font-size:12px;line-height:1.8;color:#62728a;text-align:center;padding:0 0 12px}.referral-page-footer a{display:inline-flex;align-items:center;gap:3px;color:#32629e;margin-left:4px}.referral-page-footer svg{width:12px;height:12px}.referral-body .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.redeem-modal{border:1px solid #dce5f1;border-radius:15px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 48px);color:var(--ref-ink);box-shadow:0 24px 80px #11274930;overflow:hidden}.redeem-modal[open]{display:flex;flex-direction:column}.redeem-modal::backdrop{background:#10213f7a;backdrop-filter:blur(3px)}.modal-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:24px;border-bottom:1px solid #e4ebf4}.modal-head h2{font-size:20px;font-weight:650;letter-spacing:-.4px;margin:5px 0 6px}.modal-head p:last-child{font-size:12px;color:var(--ref-muted);line-height:1.6}.modal-head .icon-button{margin:-5px -7px 0 0}.modal-body{padding:20px 24px;overflow-y:auto;min-height:130px}.search-pkg-input{width:100%;border:1px solid #dbe4f1;border-radius:7px;padding:11px 12px;font-size:12px;color:var(--ref-ink);background:#fafbfd}.modal-status{font-size:12px;color:var(--ref-muted);line-height:1.7;margin:14px 0}.package-cards-list{display:flex;flex-direction:column;gap:10px}.pkg-select-card{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid #dce5f1;border-radius:9px;cursor:pointer}.pkg-select-card:has(input:checked){background:#f2f7ff;border-color:#71a3eb}.pkg-select-card input{margin-top:4px;accent-color:#1467f3;width:16px;height:16px;flex-shrink:0}.pkg-select-card strong{display:block;font-size:13px;font-weight:600;color:#263f66;margin-bottom:4px}.pkg-select-card small{font-size:11px;color:var(--ref-muted);line-height:1.6;display:block}.pkg-select-card>span{min-width:0;overflow-wrap:anywhere}.modal-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid #e4ebf4;padding:18px 24px;background:#fafbfd}.modal-footer p{font-size:12px;color:#536b8a;line-height:1.6;max-width:340px}.modal-footer .button{flex-shrink:0;padding:0 18px}
@keyframes referral-pulse{50%{opacity:.5}}
@media(max-width:1200px){.referral-hero-card{gap:24px;padding:27px}.hero-intro h2{font-size:27px}.ref-stat-card{padding:18px 16px;gap:11px}}
@media(max-width:760px){.referral-main{padding:24px 20px}.referral-page-heading h1{font-size:25px}.referral-hero-card{grid-template-columns:1fr;gap:25px;padding:26px}.hero-intro h2,.hero-intro>p{max-width:none}.program-pill{margin-top:15px}.referral-steps ol{grid-template-columns:1fr;gap:19px}.referral-stats-row{gap:10px}.ref-stat-card{padding:16px 13px;align-items:flex-start;gap:10px}.stat-icon{width:34px;height:34px;border-radius:9px}.stat-icon svg{width:17px;height:17px}.ref-stat-card p{font-size:10px}.ref-stat-card strong{font-size:23px}.referral-steps,.rewards-section,.history-section{padding:21px}.referral-back{font-size:12px}}
@media(max-width:480px){.referral-main{padding:22px 14px}.referral-page-heading{align-items:flex-start;gap:12px}.referral-page-heading h1{font-size:24px}.referral-page-heading>div>p:last-child{font-size:12px;max-width:210px}.referral-back{font-size:0;margin-top:17px}.referral-back svg{width:19px;height:19px}.referral-hero-card{padding:23px 19px;gap:22px}.hero-intro h2{font-size:26px}.hero-intro>p{font-size:12px}.share-panel{padding:18px}.share-heading>span{font-size:9px}.code-row{gap:8px}#myReferralCode{font-size:23px}.copy-btn{padding:8px 10px}.referral-stats-row{grid-template-columns:1fr;gap:9px}.ref-stat-card{align-items:center;padding:15px 17px;gap:13px}.ref-stat-card>div{display:flex;flex:1;align-items:center;justify-content:space-between;gap:10px}.ref-stat-card p{font-size:12px;margin:0}.ref-stat-card strong{font-size:24px}.referral-steps,.rewards-section,.history-section{padding:19px}.section-heading{gap:11px}.section-heading h2{font-size:15px}.section-heading p{font-size:11px}.section-count{font-size:10px}.history-tabs{gap:17px}.history-tab-btn{font-size:11px}.referral-state{padding:36px 19px}.referral-state h2{font-size:18px}.modal-head{padding:20px}.modal-head h2{font-size:18px}.modal-body{padding:17px 20px}.modal-footer{flex-direction:column;align-items:stretch;padding:16px 20px;gap:12px}.modal-footer .button{width:100%}}
@media(prefers-reduced-motion:reduce){.referral-state.is-loading .state-symbol{animation:none}.referral-body *{scroll-behavior:auto!important;transition:none!important}}

/* Embedded brand logos stay legible when sharing is paused. */
.social-btn .social-brand-icon{width:18px;height:18px;min-width:18px;flex:0 0 18px;fill:currentColor;stroke:none}
.social-brand-icon--whatsapp{color:#128c4a}.social-brand-icon--telegram{color:#0b7fb5}
.social-btn:not([aria-disabled="true"]):has(.social-brand-icon--whatsapp):hover{background:#f0faf4;border-color:#b3dcc4}
.social-btn:not([aria-disabled="true"]):has(.social-brand-icon--telegram):hover{background:#eff8fd;border-color:#b8d8ea}