/* Full-width invitation dashboard, shared by desktop and mobile. */
.referral-page{font-family:var(--font-sans);font-size:14px;width:100%;min-width:0;color:var(--text-main)}
.referral-page *{box-sizing:border-box}

.referral-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.referral-heading h2{font-size:22px;font-weight:600;letter-spacing:normal;margin:0 0 7px}
.referral-heading p{margin:0;color:var(--text-muted);font-size:13px;line-height:1.7}
.referral-heading .el-button{flex-shrink:0}

.referral-hero{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding:32px 36px;border:1px solid #ddd9f2;border-radius:16px;background:radial-gradient(ellipse at 2% 0%,#eae4ff 0%,transparent 58%),linear-gradient(115deg,#f6f3ff,#f8faff);overflow:hidden}
.referral-eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:#7363a9}
.referral-eyebrow>span{width:6px;height:6px;border-radius:50%;background:#7964d9;box-shadow:0 0 0 4px #7964d912}
.referral-intro h3{font-size:32px;font-weight:600;line-height:1.45;letter-spacing:normal;margin:18px 0 12px;color:#292044}
.referral-intro>p{font-size:13px;line-height:1.9;color:#756c88;margin:0}
.referral-intro>p b{color:#6350c8}
.referral-journey{display:flex;align-items:center;gap:13px;margin-top:25px;color:#736b86;font-size:12px}
.referral-journey>span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.referral-journey i{display:grid;place-items:center;width:20px;height:20px;border:1px solid #d8d0ec;border-radius:50%;font-size:12px;font-style:normal;color:#7b699c}
.referral-journey>b{font-weight:400;color:#b9aecf}

.referral-share{min-width:0;padding:24px;border-radius:12px;background:#ffffffdc;border:1px solid #fff;box-shadow:0 8px 30px #54428708}
.referral-share-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:25px;color:#39304b;font-size:14px;font-weight:600}
.referral-rate{font-size:12px;letter-spacing:.2px;font-weight:500;padding:5px 9px;border:1px solid #e6defa;background:#f7f3ff;border-radius:6px;color:#7a59b5;white-space:nowrap}
.referral-label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:9px}
.referral-code-row{display:flex;align-items:center;gap:8px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px dashed #e7e2ef}
.referral-code-row input{min-width:0;width:100%;border:0;padding:0;outline:none;background:transparent;font-family:var(--font-sans);font-size:22px;font-weight:600;letter-spacing:1px;color:#39304b}
.referral-code-row input:focus-visible{outline:2px solid var(--el-color-primary);outline-offset:4px;border-radius:3px}
.referral-code-row .el-button{flex-shrink:0;font-size:12px;padding:7px;color:#74648f}
.referral-copy{display:flex;align-items:stretch;gap:8px}
.referral-copy input{min-width:0;width:100%;padding:10px 11px;border:1px solid #e8e4ee;border-radius:7px;background:#faf9fc;color:var(--text-muted);font-family:var(--font-sans);font-size:12px;outline:none}
.referral-copy input:focus-visible{border-color:var(--el-color-primary);box-shadow:0 0 0 2px #7860dc20}
.referral-copy .el-button{height:auto;min-height:36px;flex-shrink:0;border-radius:7px;font-size:12px}
.referral-share-note{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);line-height:1.6;margin:12px 0 0}
.referral-page svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.referral-share-note svg{width:13px;height:13px}

.referral-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}
.referral-stat{display:flex;align-items:center;gap:14px;padding:23px 22px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;position:relative;min-width:0}
.referral-stat-icon{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--card-border);border-radius:10px;background:var(--bg-color);color:#8b80ab;flex-shrink:0}
.referral-stat>div{min-width:0}
.referral-stat>div>span{display:block;color:var(--text-muted);font-size:12px;margin-bottom:9px}
.referral-stat strong{display:block;font-size:25px;font-weight:600;letter-spacing:normal;line-height:1.15;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.referral-stat small{font-size:12px;font-weight:400;color:var(--text-muted)}
.referral-stat-note{display:none;position:absolute;top:23px;right:18px;color:var(--text-muted);font-size:12px}
.referral-stat-reward .referral-stat-icon{color:#429a80;background:#429a800c;border-color:#429a8020}
.referral-stat-reward strong{color:#31977c}

.referral-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:stretch}
.referral-panel{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;min-width:0}
.referral-records{padding:24px;min-height:0;overflow:hidden;contain:size;display:flex;flex-direction:column}
.referral-records-heading,.referral-records>.el-tabs,.referral-records>.el-pagination{flex-shrink:0}
.referral-ledger{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--card-border) transparent}
.referral-records-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.referral-records-heading h3{margin:0;font-size:15px;font-weight:600}
.referral-records-heading>span{font-size:12px;color:var(--text-muted);white-space:nowrap}
.referral-records .el-tabs__item{font-size:12px}
.referral-records .el-tabs__nav-wrap:after{height:1px;background:var(--card-border)}
.referral-records .el-table{--el-table-header-bg-color:var(--bg-color);font-size:13px;overflow:visible}
.referral-records .el-table__header-wrapper{position:sticky;top:0;z-index:2}
.referral-records .el-table th.el-table__cell{font-size:13px;font-weight:500;color:var(--text-muted)}
.referral-records .el-table td.el-table__cell{padding:14px 0}
.referral-records .el-table__empty-block{min-height:190px}
.referral-user{display:inline-flex;align-items:center;gap:9px;max-width:100%;color:var(--text-main);font-weight:500}
.referral-user i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;flex-shrink:0;background:var(--el-color-primary-light-9);color:var(--el-color-primary);font-size:12px;font-style:normal}
.referral-user>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.referral-date{font-size:12px;color:var(--text-muted)}
.referral-number,.referral-reward-number{font-family:var(--font-sans);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.referral-reward-number{color:#31977c}
.referral-source{display:block;font-size:12px;color:var(--text-muted);line-height:1.6}
.referral-settled{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#31977c}
.referral-settled:before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor}
.referral-records .el-pagination{margin-top:20px;justify-content:flex-end;max-width:100%}

.referral-rules{padding:25px 22px}
.referral-rules-label{font-size:12px;color:var(--text-muted)}
.referral-rules>h3{font-size:25px;line-height:1.55;font-weight:600;letter-spacing:normal;margin:12px 0 7px}
.referral-rules em{font-style:normal;color:#7a62c5}
.referral-rules-example{font-size:12px;color:var(--text-muted);padding-bottom:21px;border-bottom:1px solid var(--card-border);margin:0 0 22px}
.referral-rule{display:flex;gap:12px;margin-top:20px}
.referral-rule>b{font-family:var(--font-sans);font-size:12px;color:#a197b0;line-height:1.8;font-weight:400}
.referral-rule h4{font-size:13px;font-weight:600;margin:0 0 6px}
.referral-rule p{font-size:13px;line-height:1.9;color:var(--text-muted);margin:0}
.referral-own-inviter{border-top:1px solid var(--card-border);padding-top:18px;margin:22px 0 0;font-size:12px;line-height:1.8;color:var(--text-muted);overflow-wrap:anywhere}
.referral-own-inviter strong{font-weight:500;color:var(--text-main);margin-left:8px}
.referral-mobile-list{display:none}
.referral-empty{padding:28px}

html.dark .referral-hero{border-color:#39304f;background:radial-gradient(ellipse at 0% 0%,#37254f 0%,transparent 65%),linear-gradient(115deg,#211c32,#182235)}
html.dark .referral-intro h3{color:#eee7fb}
html.dark .referral-intro>p,html.dark .referral-eyebrow,html.dark .referral-journey{color:#aea0c3}
html.dark .referral-intro>p b{color:#c1a8ff}
html.dark .referral-journey i{border-color:#564365;color:#b3a1c6}
html.dark .referral-share{background:#1f1b30c9;border-color:#473950;box-shadow:none}
html.dark .referral-share-heading,html.dark .referral-code-row input{color:#e5dcf1}
html.dark .referral-rate{color:#c2a7ed;background:#352640;border-color:#50395f}
html.dark .referral-code-row{border-color:#45374f}
html.dark .referral-code-row .el-button{color:#b6a1cd}
html.dark .referral-copy input{background:#1b1828;border-color:#44374e;color:#b6a9c7}
html.dark .referral-label,html.dark .referral-share-note{color:#a398b5}
html.dark .referral-reward-number,html.dark .referral-stat-reward strong,html.dark .referral-settled{color:#62c4a8}
html.dark .referral-rules em{color:#b9a0ef}

@media(min-width:1600px){.referral-hero{padding:36px 44px;gap:64px}
.referral-share{padding:28px}
.referral-detail-grid{grid-template-columns:minmax(0,1fr) 320px}
}

@media(max-width:1200px){.referral-records{contain:none;height:480px}
.referral-detail-grid{grid-template-columns:minmax(0,1fr)}
.referral-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.referral-rules-label,.referral-rules>h3,.referral-rules-example,.referral-own-inviter{grid-column:1/-1}
.referral-rules-example{margin-bottom:0}
.referral-rule{margin-top:18px}
.referral-stat-note{display:none}
.referral-hero{gap:22px;padding:26px}
.referral-intro h3{font-size:28px}
.referral-code-row input{font-size:19px;letter-spacing:1px}
}

@media(max-width:800px){.referral-hero{grid-template-columns:1fr;gap:24px}
.referral-intro h3 br{display:none}
.referral-intro h3{font-size:26px;margin:13px 0 8px}
.referral-desktop-break{display:none}
.referral-journey{margin-top:18px}
.referral-share{padding:20px}
.referral-share-heading{margin-bottom:20px}
.referral-stats{gap:10px}
.referral-stat{padding:18px 14px;gap:10px}
.referral-stat-icon{width:30px;height:30px;border-radius:8px}
.referral-stat strong{font-size:20px}
.referral-stat>div>span{font-size:12px}
.referral-rules{display:block}
.referral-records-heading>span{display:none}
}

@media(max-width:680px){.referral-heading{margin-bottom:16px;gap:10px}
.referral-heading h2{font-size:20px}
.referral-heading p{font-size:12px}
.referral-heading .el-button{font-size:12px;padding:8px 10px}
.referral-hero{padding:22px 18px;border-radius:12px;gap:22px}
.referral-intro h3{font-size:25px}
.referral-intro h3 br{display:block}
.referral-eyebrow{font-size:12px}
.referral-intro>p{font-size:12px}
.referral-share{padding:18px 15px}
.referral-share-heading{font-size:12px}
.referral-code-row input{font-size:20px;letter-spacing:1px}
.referral-code-row .el-button{font-size:12px;padding:6px 0}
.referral-copy{gap:6px}
.referral-copy .el-button{padding:8px 12px;font-size:12px}
.referral-share-note{font-size:12px}
.referral-stats{grid-template-columns:1fr;margin:14px 0;gap:8px}
.referral-stat{padding:17px 18px}
.referral-stat>div{display:flex;flex:1;align-items:center;justify-content:space-between;gap:10px}
.referral-stat>div>span{font-size:12px;margin:0}
.referral-stat strong{font-size:22px;text-align:right}
.referral-stat-icon{width:32px;height:32px}
.referral-detail-grid{gap:14px}
.referral-records{padding:18px 16px;min-height:0}
.referral-records-heading{margin-bottom:12px}
.referral-records-heading h3{font-size:14px}
.referral-records .referral-desktop-table{display:none}
.referral-mobile-list{display:block}
.referral-mobile-record{padding:16px 0;border-bottom:1px solid var(--card-border)}
.referral-mobile-record:last-child{border-bottom:0;padding-bottom:5px}
.referral-mobile-record-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.referral-mobile-record-top .referral-user{min-width:0;font-size:12px}
.referral-mobile-record-top .referral-reward-number{font-size:14px}
.referral-mobile-record-meta{display:flex;justify-content:space-between;gap:10px;color:var(--text-muted);font-size:12px;line-height:1.8}
.referral-mobile-record-meta+.referral-mobile-record-meta{margin-top:4px;5}
.referral-rules{padding:22px 20px}
.referral-rules>h3{font-size:23px}
.referral-no-records{padding:25px 0 30px;text-align:center;color:var(--text-muted)}
.referral-no-records>span{display:grid;place-items:center;width:40px;height:40px;margin:0 auto 12px;background:var(--el-color-primary-light-9);border-radius:12px;color:var(--el-color-primary);font-size:20px}
.referral-no-records b{font-size:12px;font-weight:500;color:var(--text-main)}
.referral-no-records p{font-size:12px;line-height:1.8;margin:8px 0 0}
}