/* UC-T092 — UI-10 approved 1536×1024 dark space / blue-green visual master. */
.referrals-page{width:100%;padding:0 0 44px;display:grid;gap:13px;color:#eaf6ff;min-width:0}
.referrals-page[hidden]{display:none!important}
.referrals-page button{cursor:pointer}
.referrals-page button:focus-visible,.referrals-page input:focus-visible{outline:2px solid #45e5fb;outline-offset:3px}
.ref-hero{position:relative;min-height:265px;display:grid;grid-template-columns:minmax(0,1fr) minmax(275px,350px) minmax(290px,365px);align-items:stretch;gap:10px;background:radial-gradient(ellipse at 63% 65%,rgba(0,114,246,.31),transparent 37%),radial-gradient(ellipse at 43% 0%,rgba(7,50,124,.2),transparent 65%);overflow:hidden}
.ref-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 32% 17%,#28bdff 0 1px,transparent 1px),radial-gradient(circle at 53% 24%,#2b9fea 0 1px,transparent 1px),radial-gradient(circle at 70% 67%,#16bbef 0 1px,transparent 1px);background-size:207px 134px,175px 182px,233px 187px;opacity:.24}
.ref-hero-copy{position:relative;z-index:2;padding:16px 4px 14px 12px}
.ref-eyebrow{color:#37d7f4;font-size:10px;letter-spacing:.2px}
.ref-hero-copy h1{font-size:44px;line-height:1.2;margin:8px 0 14px;color:#f9fbff;letter-spacing:-.6px}
.ref-hero-copy p{color:#e5eef7;font-size:18px;line-height:1.8;margin:0;white-space:nowrap}
.ref-benefits{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:20px;color:#b6e9dd;font-size:10px;white-space:nowrap}
.ref-benefits span::first-letter{color:#37f6aa}
.ref-hero-art{position:relative;z-index:1;min-width:0;overflow:hidden}
.ref-light-orbit{position:absolute;inset:-35px -32px -70px -25px;border-radius:55%;border:2px solid rgba(17,148,252,.45);background:radial-gradient(circle at 52% 54%,rgba(11,116,255,.46) 0 19%,rgba(11,60,158,.13) 46%,transparent 68%);box-shadow:inset 0 0 60px #0059bc,0 0 48px rgba(0,113,255,.2);transform:rotate(18deg)}
.ref-gift{position:absolute;width:125px;height:120px;top:72px;left:47%;transform:translateX(-50%) rotate(-7deg);border:2px solid #4ea7ff;border-radius:12px;background:linear-gradient(145deg,#00b2ff 0%,#1766e9 55%,#0c2e87 100%);box-shadow:10px 14px 34px rgba(0,0,22,.48),inset -15px -7px 26px #003083,0 0 36px rgba(65,188,255,.48)}
.ref-gift:before{content:"";position:absolute;top:-19px;left:-10px;right:-10px;height:30px;background:linear-gradient(145deg,#36dcff,#0b60df);border:2px solid #69c4ff;border-radius:9px;box-shadow:0 5px 10px rgba(0,0,0,.15)}
.ref-gift-ribbon{position:absolute;z-index:2;top:-18px;bottom:0;left:50%;width:29px;background:linear-gradient(90deg,#d6fffc,#7ce8ff,#f8ffff);transform:translateX(-50%)}
.ref-gift-bow{position:absolute;z-index:3;top:-47px;left:39%;color:#d5fcff;font-size:43px;filter:drop-shadow(0 0 7px #6acdf9)}
.ref-gift-face{position:absolute;z-index:4;top:38px;left:58px;display:grid;place-items:center;width:50px;height:47px;border-radius:9px;background:linear-gradient(135deg,#ffc962,#ed852d);box-shadow:0 7px 18px #0648a8;color:#fff;font-size:31px;font-weight:900;transform:rotate(12deg)}
.ref-float{position:absolute;z-index:6;padding:7px 13px;border:1px solid #248fff;border-radius:28px;background:linear-gradient(130deg,#00459b,#126be9,#031e69);box-shadow:0 0 16px #006afe99;color:#f3f8ff;font-size:12px;font-weight:700;white-space:nowrap}
.ref-float strong{color:#ffd15b;font-size:15px}.ref-float-one{top:30px;left:0;transform:rotate(-13deg)}.ref-float-two{top:145px;left:2%;transform:rotate(7deg)}.ref-float-three{bottom:23px;right:3%;transform:rotate(5deg)}
.ref-panel{min-width:0;border:1px solid rgba(45,127,191,.54);border-radius:10px;background:linear-gradient(142deg,rgba(3,43,84,.9),rgba(2,22,48,.97));box-shadow:inset 0 1px 0 rgba(56,151,223,.13),0 8px 24px #00071944;padding:12px}
.ref-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:9px;border-bottom:1px solid rgba(65,138,184,.23)}
.ref-head h2{font-size:14px;line-height:1.2;margin:0;font-weight:750;color:#f7fdff}
.ref-head button{border:0;background:none;color:#22ccff;font-size:10px;padding:3px 0;white-space:nowrap}
.ref-head button:hover{color:#76ffc6}
.ref-rules{padding:11px 12px}
.ref-rule-item{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid rgba(78,131,176,.23)}
.ref-rule-item:last-child{border-bottom:0}
.ref-rule-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:9px;font-weight:900;font-size:18px}
.ref-rule-icon.amber{background:linear-gradient(145deg,#76602c,#ac6d1d);color:#ffd075}.ref-rule-icon.gold{background:#805d29;color:#ffcc55}.ref-rule-icon.mint{background:#09695a;color:#73ffd1}.ref-rule-icon.violet{background:#6040a3;color:#ccb9ff}
.ref-rule-item strong{font-size:12px;color:#d8e8fb}.ref-rule-item strong b{color:#ff5f88;font-size:16px}
.ref-rule-item small{display:block;margin-top:5px;color:#9cb7cd;font-size:9px;line-height:1.4}
.ref-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ref-kpi{min-height:100px;position:relative;padding:17px 10px 12px 67px;border:1px solid rgba(49,139,204,.64);border-radius:11px;background:linear-gradient(140deg,#08335f,#031b40);overflow:hidden}
.ref-kpi.green{background:linear-gradient(135deg,#063c4e,#02313d);border-color:#0a9578}
.ref-kpi.blue{background:linear-gradient(135deg,#084692,#042654);border-color:#126bd3}
.ref-kpi.amber{background:linear-gradient(135deg,#58442c,#2c2636);border-color:#ae743b}
.ref-kpi.violet{background:linear-gradient(135deg,#30348b,#071f4d);border-color:#6262ed}
.ref-kpi.sapphire{background:linear-gradient(135deg,#06397b,#042250);border-color:#177bdc}
.ref-kpi-icon{position:absolute;left:12px;top:18px;width:43px;height:43px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#12a57d,#076f78);color:#adffe9;font-size:23px}
.ref-kpi.blue .ref-kpi-icon,.ref-kpi.sapphire .ref-kpi-icon{background:linear-gradient(135deg,#167dea,#074cba);color:#d2f6ff}
.ref-kpi.amber .ref-kpi-icon{background:linear-gradient(135deg,#e88c22,#ba4d0b);color:#fff}
.ref-kpi.violet .ref-kpi-icon{background:linear-gradient(135deg,#8e56fc,#5040c4);color:#fff}
.ref-kpi span{display:block;font-size:11px;color:#c8e4f5}.ref-kpi strong{display:block;font-size:23px;margin-top:7px;line-height:1.2;color:#fff;overflow-wrap:anywhere}
.ref-kpi small{display:block;color:#92b7cb;font-size:9px;margin-top:6px;line-height:1.4}
.ref-upper-grid{display:grid;grid-template-columns:minmax(0,2.02fr) minmax(295px,.98fr);gap:12px}
.ref-link-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(125px,.7fr) 123px;gap:9px;padding-top:7px}
.ref-link-main{min-width:0}
.ref-tabs,.ref-periods,.ref-filter-tabs{display:flex;gap:0;padding:2px;width:max-content;max-width:100%;border:1px solid rgba(68,131,190,.45);border-radius:24px;background:#05284d}
.ref-tabs button,.ref-periods button,.ref-filter-tabs button{min-height:25px;padding:4px 14px;border:0;border-radius:18px;background:transparent;color:#9abbd4;font-size:10px;white-space:nowrap}
.ref-tabs button.active,.ref-periods button.active,.ref-filter-tabs button.active{background:linear-gradient(135deg,#d9f3ff,#fbfdff);color:#092b59;font-weight:700;box-shadow:0 2px 9px #4d91e966}
.ref-field-label{display:block;font-size:10px;margin-top:10px;color:#e5f9ff;font-weight:700}
.ref-muted{margin:5px 0 9px;color:#86a9c2;font-size:10px;line-height:1.5}
.ref-input-action{display:flex;gap:8px;margin-top:8px;min-width:0}
.ref-input-action input{min-width:0;flex:1;width:100%;height:37px;padding:0 10px;border:1px solid #5ca8df;border-radius:6px;background:#f5f9ff;color:#002e63;font-size:12px}
.ref-input-action button,.ref-short-code button{padding:0 13px;min-height:35px;border:1px solid #249fff;border-radius:6px;background:linear-gradient(145deg,#28abff,#0079e3);color:#fff;font-size:11px;white-space:nowrap}
.ref-share-label{margin-top:9px;color:#b6d4e5;font-size:10px}
.ref-share-options{display:flex;align-items:flex-start;justify-content:space-between;gap:5px;margin-top:5px}
.ref-share-options button{border:0;background:none;display:grid;justify-items:center;gap:4px;color:#afcddd;font-size:9px;white-space:nowrap;padding:3px}
.ref-share-options button span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-size:16px;background:linear-gradient(140deg,#0b71e3,#1544aa);color:#fff;box-shadow:0 2px 9px #00071766}
.ref-share-options button:nth-child(3) span,.ref-share-options button:nth-child(4) span{background:#0c996b}.ref-share-options button:nth-child(5) span{background:#e33135}
.ref-invite-box{min-width:0;border-left:1px solid #18577f;padding:5px 10px}
.ref-invite-box strong{font-size:11px;color:#e8f5fc}.ref-invite-box label{display:block;font-size:9px;color:#bfd5e2;margin-top:14px}.ref-invite-box small{display:block;font-size:9px;color:#7294a9;margin:8px 0}
.ref-short-code{display:flex;gap:5px}.ref-short-code input{width:100%;min-width:0;background:#071d3e;border:1px solid #22658e;color:#f7fbff;border-radius:6px;padding:6px;font-weight:700;font-size:12px;letter-spacing:1px}
.ref-short-code button{padding:0 8px;min-height:32px}
.ref-qr-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-left:1px solid #18577f;padding-left:6px}
.ref-qr-box img{width:min(116px,100%);height:auto;aspect-ratio:1;background:#fff;padding:4px;border-radius:5px}
.ref-qr-box small{font-size:10px;color:#b2cfe2}
#ref-qr-empty[hidden]{display:none!important}
#ref-qr-empty{min-height:116px;width:100%;border:1px dashed #346484;display:grid;place-items:center;text-align:center;color:#668da5;font-size:9px;line-height:1.6}
.ref-feedback{min-height:18px;margin-top:4px;font-size:11px;color:#65dfcf}
.ref-tier-current{display:flex;gap:12px;align-items:center;margin:8px 0}
.ref-tier-medal{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;color:#cce5fc;font-size:38px;text-shadow:0 0 12px #8bafff;border:5px ridge #a0b9dc;background:radial-gradient(circle,#667da7,#354663)}
.ref-tier-current>div{min-width:0;flex:1}
.ref-tier-current strong{font-size:15px;color:#f1faff}.ref-tier-current small{display:block;font-size:10px;color:#a6c0d4;margin:4px 0}
.ref-progress{height:8px;border-radius:999px;background:#153c68;overflow:hidden}.ref-progress i{display:block;background:linear-gradient(90deg,#2adbb3,#4effa4);height:100%;width:0%;border-radius:inherit}
.ref-tier-current p{color:#5df0be;font-size:10px;margin:6px 0 0}
.ref-tier-benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ref-tier-benefits>div{border:1px solid #20567d;border-radius:8px;padding:8px;background:linear-gradient(140deg,#06427144,#082147)}
.ref-tier-benefits>div+div{border-color:#615234}
.ref-tier-benefits span{color:#d6f4ff;font-size:11px;font-weight:650}.ref-tier-benefits p{font-size:10px;color:#9ac4db;margin:4px 0 0}.ref-tier-benefits b{color:#54f4c0}
.ref-lower-grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:12px}
.ref-periods button{font-size:9px;padding:4px 12px;min-height:22px}
.ref-stat-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:12px}
.ref-stat-summary>div{padding:7px;border-right:1px solid #185279}.ref-stat-summary>div:last-child{border:0}
.ref-stat-summary span{font-size:9px;color:#a8c9db;white-space:nowrap}.ref-stat-summary strong{display:block;font-size:15px;margin-top:7px;color:#f4fbff;overflow-wrap:anywhere}
.ref-chart-legend{display:flex;justify-content:flex-end;gap:16px;color:#9cbbd1;font-size:9px;margin-top:9px}
.ref-chart-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#2699ff}
.ref-chart-legend i.green{background:#11dab6}.ref-chart-legend i.orange{background:#f99b20}
.ref-chart{height:179px;margin-top:4px;display:grid;place-items:center;color:#6c9bb6;font-size:11px}
.ref-chart svg{width:100%;height:100%;overflow:visible}
.ref-filter-tabs{margin:9px 0 9px;width:100%;justify-content:space-between;overflow:auto}
.ref-filter-tabs button{padding:5px 10px;font-size:9px}
.ref-table-wrap{max-width:100%;overflow:auto}
.ref-table{width:100%;border-collapse:collapse;min-width:625px}
.ref-table th{color:#779cb5;font-weight:500;font-size:9px;white-space:nowrap}
.ref-table td{color:#d6e9f6;font-size:10px}
.ref-table th,.ref-table td{padding:10px 5px;border-bottom:1px solid rgba(58,125,175,.25);text-align:left}
.ref-table td strong{display:block}.ref-table td small{display:block;color:#7ea5bb;font-size:9px;margin-top:3px}
.ref-table .ref-empty{text-align:center;padding:28px 10px;color:#82a9be}
.ref-pill{display:inline-flex;border-radius:20px;padding:3px 7px;background:#0d655c;color:#7ff7c5;font-size:9px}
.ref-pill.pending{background:#64451f;color:#ffcf88}.ref-pill.revoked{background:#652935;color:#ffc7ca}
.ref-pagination{display:flex;gap:10px;align-items:center;justify-content:flex-end;color:#9cb8ca;font-size:10px;margin-top:8px}
.ref-pagination button{border:1px solid #215781;border-radius:7px;background:#092a4d;color:#b7ddf3;padding:5px 10px;font-size:10px}.ref-pagination button:disabled{opacity:.3;cursor:default}
.ref-bottom-grid{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.ref-payout-placeholder strong{display:block;font-size:18px;color:#9fb6cf;padding-top:16px}
.ref-payout-placeholder p{font-size:11px;color:#7fa1b8;line-height:1.7}
.ref-rule-details{font-size:11px;color:#a9c6d7;line-height:1.7}
.ref-rule-details summary{cursor:pointer;color:#46d8ff;font-weight:700}
.ref-rule-details p{margin:10px 0}
@media(max-width:1400px){.ref-hero{grid-template-columns:minmax(0,1fr) minmax(190px,265px) minmax(275px,320px)}.ref-hero-copy h1{font-size:39px}.ref-hero-copy p{font-size:15px}.ref-link-grid{grid-template-columns:minmax(0,1.5fr) minmax(100px,.7fr) 108px}.ref-share-options{flex-wrap:wrap;justify-content:flex-start}.ref-kpi{padding-left:55px}.ref-kpi-icon{width:33px;height:33px}.ref-kpi strong{font-size:19px}}
@media(max-width:1130px){.ref-hero{grid-template-columns:1fr 1fr}.ref-rules{grid-column:1/-1}.ref-hero-art{min-height:255px}.ref-kpis{grid-template-columns:repeat(3,1fr)}.ref-upper-grid,.ref-lower-grid,.ref-bottom-grid{grid-template-columns:1fr}}
@media(max-width:650px){.referrals-page{gap:12px}.ref-hero{display:block}.ref-hero-copy{padding:15px}.ref-hero-copy p{white-space:normal;font-size:14px}.ref-hero-copy h1{font-size:33px}.ref-hero-art{height:195px}.ref-gift{top:48px;transform:translateX(-50%) scale(.8)}.ref-hero .ref-rules{margin-top:8px}.ref-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ref-kpi{min-height:90px;padding:11px 8px 11px 49px}.ref-kpi-icon{left:8px;top:13px}.ref-kpi span{font-size:10px}.ref-kpi strong{font-size:17px}.ref-kpi small{font-size:8px}.ref-link-grid{grid-template-columns:1fr 105px}.ref-link-main{grid-column:1/-1}.ref-invite-box{border-left:0}.ref-qr-box{border-left:1px solid #18577f}.ref-stat-summary{grid-template-columns:repeat(3,1fr)}.ref-filter-tabs{overflow:auto;justify-content:flex-start}.ref-periods{flex-wrap:wrap}.ref-head h2{font-size:12px}.ref-panel{padding:10px}}
@media(prefers-reduced-motion:reduce){.ref-gift,.ref-float{animation:none!important}}


/* Frozen UI-10 screenshot has the hero flush to the shared top navigation,
   not an extra page breadcrumb. This override applies only to /referrals. */
.referrals-active .page-breadcrumb{display:none}
.referrals-active .main-content{padding-top:calc(var(--uc-topbar-height) + 4px)}
@media(max-width:860px){.referrals-active .main-content{padding-top:calc(var(--uc-topbar-height) + env(safe-area-inset-top,0px) + 12px)}}

/* UC-T093 frozen UI-10 lower panel: real original-currency credit wallet. */
.ref-wallet-panel{display:grid;gap:11px;align-content:start}
.ref-wallet-currencies{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ref-wallet-currencies article{border:1px solid #175985;border-radius:9px;padding:11px;background:linear-gradient(145deg,#06365a,#062447);min-width:0}
.ref-wallet-currencies article strong{display:block;color:#b4e9ff;font-size:11px}
.ref-wallet-currencies article span{display:block;color:#5ff5c0;font-size:19px;font-weight:800;margin:8px 0 4px;overflow-wrap:anywhere}
.ref-wallet-currencies article small{display:block;color:#85a9c0;font-size:9px;line-height:1.45;overflow-wrap:anywhere}
.ref-wallet-form{display:grid;gap:7px;padding-top:12px;border-top:1px solid rgba(57,139,194,.28)}
.ref-wallet-form h3,.ref-wallet-ledger-list h3{margin:0 0 4px;font-size:13px;color:#d8f6fc}
.ref-wallet-form label{font-size:10px;color:#9ebcce}
.ref-wallet-form input,.ref-wallet-form select{min-width:0;width:100%;height:34px;padding:0 9px;background:#052341;color:#dff6ff;border:1px solid #236188;border-radius:7px;font-size:11px}
.ref-wallet-form input:focus,.ref-wallet-form select:focus{outline:2px solid #46dbe8}
.ref-wallet-amount{display:flex;gap:6px;align-items:center;min-width:0}
.ref-wallet-amount input{flex:1;min-width:0}
.ref-wallet-amount button{min-height:34px;padding:0 11px;white-space:nowrap;background:linear-gradient(115deg,#0d8ee2,#0eaf9d);color:#fff;border:1px solid rgba(46,229,217,.3);border-radius:7px;font-size:11px;font-weight:700}
.ref-wallet-amount button:disabled{opacity:.56;cursor:not-allowed;background:#174462}
.ref-wallet-form .ref-muted{line-height:1.55;margin:2px 0;font-size:9px}
.ref-wallet-feedback{color:#6ee5bd;font-size:10px;line-height:1.5;min-height:20px}
.ref-wallet-feedback.error{color:#ff91ac}
.ref-wallet-ledger-list{border-top:1px solid rgba(57,139,194,.28);padding-top:10px}
.ref-wallet-record{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:9px 0;border-bottom:1px solid rgba(56,117,166,.2)}
.ref-wallet-record strong{font-size:10px;color:#eaf6fa}
.ref-wallet-record small{display:block;color:#81a7bc;font-size:9px;margin-top:3px;word-break:break-all}
.ref-wallet-record button{flex:none;background:#0b4266;border:1px solid #227fac;border-radius:6px;color:#b2f7e6;padding:5px 8px;font-size:9px}
#ref-ledger-panel .ref-table{min-width:720px}
#ref-ledger-panel .ref-table td{white-space:nowrap}
#ref-withdrawable{font-size:18px;line-height:1.3}
@media(max-width:760px){.ref-wallet-currencies{grid-template-columns:1fr 1fr}.ref-wallet-currencies article span{font-size:17px}}