/* CuanReferral UI System — light fintech / Material-inspired */
:root{color-scheme:light;--cr-bg:#f6f7fc;--cr-surface:#fff;--cr-text:#20243a;--cr-muted:#778099;--cr-line:#e8eaf3;--cr-primary:#7357e8;--cr-primary-soft:#f0edff;--cr-radius:20px}
html{background:var(--cr-bg)!important;scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;background:var(--cr-bg)!important;color:var(--cr-text)!important;-webkit-font-smoothing:antialiased!important}
.web3-bg{background:radial-gradient(ellipse at top,#f0edff 0%,#f7f8fc 54%,#f6f7fc 100%)!important}
.web3-dots{opacity:.035!important;background-image:radial-gradient(circle,#6d5bd0 1px,transparent 1px)!important}
.glass-card{background:rgba(255,255,255,.94)!important;border:1px solid rgba(116,99,205,.13)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;box-shadow:0 8px 28px rgba(34,36,75,.055)!important}
/* Convert the previous dark utility surfaces to clean light surfaces. */
[class*="bg-[#070d1a]"],[class*="bg-[#0a1020]"],[class*="bg-slate-950"],[class*="bg-slate-900"],[class*="bg-slate-800"],[class*="bg-slate-700"]{background-color:#fff!important}
[class*="border-slate-800"],[class*="border-slate-700"],[class*="border-slate-600"]{border-color:#e7e9f2!important}
.text-white{color:#24263b!important}
button.text-white,[role="button"].text-white,[class*="bg-gradient-to-r"].text-white,[class*="bg-gradient-to-br"].text-white,[class*="bg-blue-600"].text-white,[class*="bg-indigo-600"].text-white,[class*="bg-purple-600"].text-white,[class*="bg-rose-600"].text-white,[class*="bg-emerald-600"].text-white,[class*="bg-amber-600"].text-white{color:#fff!important}
[class*="bg-gradient-to-br"] .text-white,[class*="bg-gradient-to-r"] .text-white,[class*="bg-gradient-to-tr"] .text-white{color:#fff!important}
[class*="text-slate-100"],[class*="text-slate-200"],[class*="text-slate-300"]{color:#30354c!important}
[class*="text-slate-400"],[class*="text-slate-500"],[class*="text-slate-600"]{color:#778099!important}
[class*="placeholder-slate-"]::placeholder{color:#a0a6b8!important}
input:not([type=checkbox]):not([type=radio]),select,textarea{background:#fff!important;color:#24263b!important;border-color:#dfe2ef!important;border-radius:13px!important;box-shadow:inset 0 1px 2px rgba(30,35,70,.02)!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:#9582f2!important;box-shadow:0 0 0 4px rgba(115,87,232,.12)!important}
button,a,[role=button]{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
button:active,[role=button]:active{transform:scale(.985)}
button[class*="bg-gradient"],button[class*="bg-blue-600"],button[class*="bg-indigo-600"],button[class*="bg-purple-600"]{box-shadow:0 8px 18px rgba(115,87,232,.18)!important;border:0!important}
.glass-card.rounded-2xl,.glass-card.rounded-\[1\.5rem\],.glass-card.rounded-\[2rem\]{border-radius:22px!important}
header.sticky{background:rgba(255,255,255,.9)!important;border-color:#e8eaf3!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
nav a:hover{background:#f1efff!important;color:#6c50df!important}
hr{border-color:#e8eaf3!important}
table{border-color:#e8eaf3!important}th{color:#68718a!important;background:#f7f8fc!important}td,th{border-color:#e8eaf3!important}
[class*="shadow-2xl"],[class*="shadow-xl"]{box-shadow:0 12px 34px rgba(31,36,74,.12)!important}
/* Keep scrims and bottom-sheet overlays dark enough for contrast. */
.fixed.inset-0[class*="bg-slate-950"]{background:rgba(18,22,42,.58)!important}
/* Main user pages stay comfortably app-width on mobile and breathe on desktop. */
body.w-full.max-w-\[480px\]{background:var(--cr-bg)!important}
@media(min-width:640px){body.w-full.max-w-\[480px\]{margin-top:18px!important;margin-bottom:18px!important;border:1px solid #e8eaf3!important;border-radius:28px!important;overflow:hidden!important;box-shadow:0 22px 70px rgba(40,42,80,.08)!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Profile page bespoke components use the same light system too. */
.topbar{background:rgba(255,255,255,.9)!important;border-bottom-color:#e8eaf3!important}
.top-title,.username,.detail-value,.section-title{color:#252840!important}
.top-sub,.level-label,.stat-label,.detail-label,.section-note{color:#7a8299!important}
.hero{background:linear-gradient(140deg,#f0edff,#fff 68%,#f7f8ff)!important;border-color:#e4defe!important;box-shadow:0 12px 30px rgba(67,55,130,.07)!important}
.hero:before{background:rgba(145,130,255,.10)!important}.hero:after{background:rgba(74,144,255,.08)!important}
.avatar{background:linear-gradient(145deg,#6e5be7,#8e7af5)!important;color:#fff!important}
.eyebrow{color:#715be1!important}.uid{color:#7b8299!important}
.level-row{border-top-color:#e8e5f5!important}.level-pill{background:#efecff!important;border-color:#ddd5ff!important;color:#6e56d9!important}
.stat,.panel{background:#fff!important;border-color:#e8eaf3!important;box-shadow:0 8px 25px rgba(34,36,75,.045)!important}
.stat-value{color:#252840!important}.stat-caption{color:#9299ac!important}
.detail-row{border-bottom-color:#edf0f6!important}.detail-icon{background:#f0edff!important;color:#755de2!important}
.logout{background:#fff5f6!important;border-color:#ffe0e5!important;color:#d94e69!important}
.footer{color:#9299ac!important}