/* v145 · کارت پروفایل داخل لایو + صفحهٔ مشارکت */

/* ═══════════════ کارت ═══════════════ */
.uc145{ position:fixed; inset:0; z-index:9994; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(6,2,16,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:ucF145 .22s ease both }
.uc145.out{ animation:ucF145 .22s ease reverse both }
.uc145.out .uc145-s{ animation:ucD145 .22s ease both }
.uc145-s{ position:relative; width:100%; max-width:440px; max-height:calc(100dvh - 40px); overflow-y:auto; overscroll-behavior:contain;
  box-sizing:border-box; border-radius:28px 28px 0 0; color:#F5F3FF; scrollbar-width:none;
  background:linear-gradient(180deg,#1D0F3C 0%,#140A2B 45%,#0F0822 100%);
  box-shadow:0 -20px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  padding-bottom:calc(14px + env(safe-area-inset-bottom)); animation:ucU145 .38s cubic-bezier(.2,.9,.25,1.08) both; transition:transform .25s ease }
.uc145-s::-webkit-scrollbar{ display:none }
@media (min-width:700px){ .uc145-s{ max-width:420px } }

/* سربرگ: شفق رنگ رتبه */
.uc145-hero{ position:relative; height:104px; overflow:hidden; border-radius:28px 28px 0 0; touch-action:none;
  background:linear-gradient(135deg, color-mix(in srgb,var(--c1) 55%,#1D0F3C), color-mix(in srgb,var(--c2) 60%,#1D0F3C)) }
.hd145{ position:absolute; top:8px; left:50%; width:40px; height:5px; margin-left:-20px; border-radius:99px; background:rgba(255,255,255,.4); z-index:3 }
.bl145{ position:absolute; border-radius:50%; filter:blur(22px); opacity:.75; mix-blend-mode:screen; animation:blob145 9s ease-in-out infinite alternate }
.bl145.a{ width:170px; height:170px; left:-40px; top:-70px; background:var(--c1) }
.bl145.b{ width:150px; height:150px; right:-30px; top:-40px; background:var(--c2); animation-delay:-3s }
.bl145.c{ width:120px; height:120px; left:40%; top:30px; background:#F472B6; opacity:.45; animation-delay:-6s }
.gr145{ position:absolute; inset:0; background:
  repeating-linear-gradient(120deg,rgba(255,255,255,.07) 0 1px,transparent 1px 16px),
  linear-gradient(180deg,transparent 40%,#1D0F3C 100%) }
@keyframes blob145{ to{ transform:translate(26px,14px) scale(1.15) } }
.lv145{ position:absolute; top:14px; inset-inline-start:14px; z-index:3; display:flex; align-items:center; gap:6px; padding:5px 11px 5px 9px; border:0; border-radius:99px;
  font:inherit; font-size:11px; font-weight:900; letter-spacing:.8px; color:#fff; cursor:pointer;
  background:linear-gradient(90deg,#FF3D7F,#FF7A3D); box-shadow:0 4px 14px rgba(255,61,127,.5) }
.lv145 i{ width:7px; height:7px; border-radius:50%; background:#fff; animation:lvP145 1.2s ease-in-out infinite }
@keyframes lvP145{ 50%{ opacity:.3; transform:scale(.7) } }
.fm145{ position:absolute; top:14px; inset-inline-end:14px; z-index:3; padding:4px 10px; border-radius:99px; font-size:10.5px; font-weight:800;
  background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.2) }

/* آواتار با حلقهٔ چرخان */
.uc145-av{ position:relative; width:96px; height:96px; margin:-58px auto 0; z-index:2 }
.rg145{ position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(from 0deg,var(--c1),var(--c2),#F472B6,var(--c1)); animation:spin145 4s linear infinite;
  box-shadow:0 0 24px color-mix(in srgb,var(--c1) 60%,transparent) }
.uc145-av img, .uc145-av > em{ position:relative; display:grid; place-items:center; width:100%; height:100%; box-sizing:border-box; border-radius:50%;
  object-fit:cover; border:4px solid #1D0F3C; background:linear-gradient(135deg,#7C3AED,#EC4899); font-style:normal; font-size:36px; font-weight:900; color:#fff }
.dt145{ position:absolute; bottom:6px; inset-inline-end:6px; width:16px; height:16px; border-radius:50%; background:#22C55E; border:3px solid #1D0F3C; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:dt145 2s ease-out infinite }
@keyframes spin145{ to{ transform:rotate(360deg) } }
@keyframes dt145{ 70%{ box-shadow:0 0 0 8px rgba(34,197,94,0) } }

.uc145-b{ padding:8px 16px 0; text-align:center }
.nm145{ display:flex; align-items:center; justify-content:center; gap:6px; min-width:0 }
.nm145 b{ font-size:20px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:78%;
  background:linear-gradient(90deg,#fff,#FDE68A,#fff); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine145 5s linear infinite }
@keyframes shine145{ to{ background-position:-200% 0 } }
.vf145 svg{ width:20px; height:20px; display:block }
.id145{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:6px }
.fl145{ font-size:17px; line-height:1 }
.cp145{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border:0; border-radius:99px; cursor:pointer; font:inherit; direction:ltr;
  font-size:11.5px; font-weight:800; color:#DDD6FE; background:rgba(255,255,255,.08) }
.cp145 svg{ width:13px; height:13px; opacity:.8 }
.on145, .off145{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:800 }
.on145{ color:#4ADE80; background:rgba(34,197,94,.12) }
.on145 i{ width:6px; height:6px; border-radius:50%; background:#4ADE80 }
.off145{ color:#A5A0C0; background:rgba(255,255,255,.06) }

.ch145{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:10px }
.gc145{ display:inline-flex; align-items:center; gap:3px; height:22px; padding:0 8px 0 6px; border-radius:99px; font-size:11.5px; font-weight:900; color:#fff }
.gc145 svg{ width:13px; height:13px }
.gc145.m{ background:linear-gradient(135deg,#60A5FA,#2563EB) }
.gc145.f{ background:linear-gradient(135deg,#F9A8D4,#DB2777) }
.lc145{ display:inline-flex; align-items:center; height:22px; padding:0 9px 0 2px; border-radius:99px; gap:4px; direction:ltr;
  background:linear-gradient(90deg,var(--c3),var(--c2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3) }
.lc145 i{ display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:linear-gradient(135deg,var(--c1),var(--c2)); color:#fff; box-shadow:0 0 0 1.5px rgba(255,255,255,.5) }
.lc145 i svg{ width:12px; height:12px }
.lc145 b{ font-size:11.5px; font-weight:900; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.3) }
.vip145{ display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 9px; border-radius:99px; font-size:11px; font-weight:900; color:#3B1D00;
  background:linear-gradient(90deg,#FDE68A,#F59E0B) }
.vip145 svg{ width:13px; height:13px; color:#92400E }
.rk145{ display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 9px 0 4px; border-radius:99px; font-size:11px; font-weight:900; color:#fff;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c1) 45%,transparent),color-mix(in srgb,var(--c2) 45%,transparent)); border:1px solid color-mix(in srgb,var(--c1) 60%,transparent) }
.rk145 svg{ width:16px; height:16px }
.bio145{ margin:10px 6px 0; font-size:12.5px; font-weight:600; line-height:1.6; color:#C4B5FD; unicode-bidi:plaintext; word-break:break-word }

.sts145{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:14px; padding:12px 4px; border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.07) }
.st145{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; position:relative }
.st145 + .st145::before{ content:""; position:absolute; inset-inline-start:0; top:18%; bottom:18%; width:1px; background:rgba(255,255,255,.1) }
.st145 b{ display:flex; align-items:center; gap:3px; font-size:15.5px; font-weight:900; direction:ltr }
.st145 b i{ display:block; width:15px; height:15px }
.st145 b i svg{ width:100%; height:100%; display:block }
.st145 small{ font-size:10.5px; font-weight:700; color:#A5A0C0 }

.h145{ margin:16px 2px 8px; text-align:start; font-size:12.5px; font-weight:900; color:#E9D5FF; display:flex; align-items:center; gap:8px }
.h145::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(233,213,255,.35),transparent) }
[dir=rtl] .h145::after{ background:linear-gradient(270deg,rgba(233,213,255,.35),transparent) }
.lis145{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px }
.li145{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:9px 8px 8px; border-radius:16px; text-align:start;
  background:linear-gradient(145deg,color-mix(in srgb,var(--c2) 38%,#1D0F3C),color-mix(in srgb,var(--c3) 30%,#140A2B));
  border:1px solid color-mix(in srgb,var(--c1) 30%,transparent) }
.li145 i{ position:absolute; inset-inline-end:-6px; bottom:-8px; width:40px; height:40px; color:var(--c1); opacity:.55; transform:rotate(-12deg) }
.li145 i svg{ width:100%; height:100% }
.li145 small{ font-size:9px; font-weight:800; color:rgba(255,255,255,.75); white-space:nowrap }
.li145 b{ position:relative; font-size:14px; font-weight:900; color:#fff; direction:ltr; text-shadow:0 1px 2px rgba(0,0,0,.35) }

.cds145{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px }
.cd145{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:74px; padding:9px 10px; box-sizing:border-box;
  border:0; border-radius:18px; font:inherit; color:#fff; cursor:pointer; text-align:start }
.cd145.top{ background:linear-gradient(135deg,#F472B6,#A855F7) }
.cd145.cb{ background:linear-gradient(135deg,#F59E0B,#B45309) }
.cd145.ag{ background:linear-gradient(135deg,#CA8A04,#713F12); cursor:default }
.cd145::after{ content:""; position:absolute; top:-40%; bottom:-40%; width:40%; left:-60%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); animation:sh145 3.6s ease-in-out infinite }
@keyframes sh145{ 60%,100%{ left:130% } }
.cd145-t{ font-size:11px; font-weight:900; opacity:.95 }
.cd145-avs{ display:flex; direction:ltr }
.ta145{ position:relative; width:32px; height:32px; border-radius:50%; margin-right:-6px; border:2px solid #fff; background:rgba(255,255,255,.25); box-sizing:border-box }
.ta145 img, .ta145 em{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:900 }
.ta145 u{ position:absolute; top:-9px; left:50%; width:14px; height:14px; margin-left:-7px }
.ta145 u svg{ width:100%; height:100%; display:block }
.ta145.r1{ border-color:#FACC15 } .ta145.r1 u{ color:#FACC15 }
.ta145.r2{ border-color:#E2E8F0 } .ta145.r2 u{ color:#E2E8F0 }
.ta145.r3{ border-color:#FB923C } .ta145.r3 u{ color:#FB923C }
.cd145-go{ position:absolute; inset-inline-end:8px; bottom:10px; width:18px; height:18px; opacity:.8 }
[dir=rtl] .cd145-go{ transform:scaleX(-1) }
.cd145-go svg{ width:100%; height:100% }
.cd145-ag{ display:flex; align-items:center; gap:6px; min-width:0 }
.cd145-ag svg{ flex:none; width:24px; height:24px }
.cd145-ag b{ font-size:12.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.abs145{ display:flex; gap:8px; margin-top:14px }
.ab145{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:46px; padding:0 14px; border:0; border-radius:16px;
  font:inherit; font-size:14px; font-weight:900; color:#fff; cursor:pointer; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.1); transition:transform .12s }
.ab145:active{ transform:scale(.95) }
.ab145 svg{ width:20px; height:20px }
.ab145.pri{ flex:1; border:0; background:linear-gradient(90deg,#FF3D7F,#A855F7); box-shadow:0 8px 20px rgba(236,72,153,.35) }
.ab145.fol{ flex:1; color:#C4B5FD }
.ab145.ic{ width:46px; padding:0 }
.ab145.gf{ color:#FDE68A }
.abs145 .ab145:not(.ic):not(.pri):not(.fol){ flex:1 }
.uc145-b.ld .st145 b, .uc145-b.ld .li145 b{ color:transparent; background:rgba(255,255,255,.12); border-radius:6px; animation:ldP145 1s ease-in-out infinite alternate }
@keyframes ldP145{ to{ opacity:.4 } }
@keyframes ucF145{ from{ opacity:0 } }
@keyframes ucU145{ from{ transform:translateY(60px); opacity:0 } }
@keyframes ucD145{ to{ transform:translateY(60px); opacity:0 } }
@media (max-width:330px){
  .lis145{ grid-template-columns:repeat(2,1fr) }
  .st145 b{ font-size:14.5px }
}

/* ═══════════════ صفحهٔ مشارکت ═══════════════ */
.cb145{ position:fixed; inset:0; z-index:9996; display:flex; flex-direction:column; color:#fff; overflow:hidden;
  --t1:#FFE27A; --t2:#F59E0B; --bg1:#2A1A05; --bg2:#0D0803; animation:cbIn145 .28s cubic-bezier(.2,.9,.25,1) both;
  background:radial-gradient(120% 60% at 50% 18%, color-mix(in srgb,var(--t2) 45%,transparent), transparent 60%), linear-gradient(180deg,var(--bg1),var(--bg2) 55%) }
.cb145.receiver{ --t1:#F0ABFC; --t2:#A855F7; --bg1:#2B0B4F; --bg2:#0E0420 }
.cb145.out{ animation:cbIn145 .22s ease reverse both }
@keyframes cbIn145{ from{ opacity:0; transform:translateY(24px) } }
.cb145-bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
.ry145{ position:absolute; left:50%; top:22%; width:900px; height:900px; margin:-450px 0 0 -450px; opacity:.3;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb,var(--t1) 70%,transparent) 0 6deg, transparent 6deg 18deg); animation:spin145 40s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 0,transparent 55%); mask:radial-gradient(circle,#000 0,transparent 55%) }
.sp145{ position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 1.5px); background-size:46px 46px; opacity:.18; animation:tw145 4s ease-in-out infinite alternate }
@keyframes tw145{ to{ opacity:.05 } }
.cb145-h{ position:relative; display:flex; flex-direction:column; align-items:center; padding:calc(10px + env(safe-area-inset-top)) 56px 6px }
.cb145-h b{ font-size:18px; font-weight:900 }
.cb145-h small{ font-size:11px; font-weight:700; opacity:.6; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bk145{ position:absolute; inset-inline-start:10px; top:calc(8px + env(safe-area-inset-top)); width:40px; height:40px; border:0; border-radius:50%; color:#fff; cursor:pointer;
  background:rgba(255,255,255,.1); display:grid; place-items:center }
.bk145 svg{ width:22px; height:22px }
[dir=rtl] .bk145 svg{ transform:scaleX(-1) }
.sg145{ position:relative; display:flex; width:230px; margin:6px auto 0; padding:3px; border-radius:99px; background:rgba(0,0,0,.35); border:1px solid color-mix(in srgb,var(--t1) 40%,transparent) }
.sg145 button{ position:relative; z-index:1; flex:1; height:32px; border:0; background:none; font:inherit; font-size:13px; font-weight:900; color:rgba(255,255,255,.65); cursor:pointer; transition:color .2s }
.sg145 button.on{ color:#2A1400 }
.receiver .sg145 button.on{ color:#fff }
.sg145 i{ position:absolute; top:3px; bottom:3px; width:calc(50% - 3px); inset-inline-start:3px; border-radius:99px;
  background:linear-gradient(180deg,var(--t1),var(--t2)); box-shadow:0 4px 14px color-mix(in srgb,var(--t2) 50%,transparent); transition:transform .3s cubic-bezier(.3,1.3,.5,1) }
.receiver .sg145 i{ transform:translateX(100%) }
.cb145[dir=rtl].receiver .sg145 i{ transform:translateX(-100%) }
.pr145{ position:relative; display:flex; justify-content:center; gap:4px; margin:12px 16px 0 }
.pr145 button{ flex:1; max-width:90px; height:30px; border:0; border-radius:99px; background:none; font:inherit; font-size:12.5px; font-weight:800; color:rgba(255,255,255,.5); cursor:pointer }
.pr145 button.on{ color:#fff; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t1) 45%,transparent) }
.cb145-sc{ position:relative; flex:1; overflow-y:auto; overscroll-behavior:contain; padding-bottom:calc(20px + env(safe-area-inset-bottom)) }

.pd145{ display:grid; grid-template-columns:1fr 1.25fr 1fr; align-items:end; gap:2px; padding:18px 8px 14px; max-width:460px; margin:0 auto }
.ps145{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; cursor:pointer; animation:pdIn145 .5s cubic-bezier(.3,1.4,.5,1) both }
.ps145.r1{ animation-delay:.05s } .ps145.r2{ animation-delay:.15s } .ps145.r3{ animation-delay:.22s }
@keyframes pdIn145{ from{ opacity:0; transform:translateY(24px) scale(.85) } }
.pa145{ position:relative; width:100%; max-width:120px; aspect-ratio:1 }
.ps145.r1 .pa145{ max-width:150px; margin-bottom:-4px }
.pa145 > img, .pa145 > em{ position:absolute; left:23%; top:31%; width:54%; height:54%; border-radius:50%; object-fit:cover; display:grid; place-items:center;
  background:linear-gradient(135deg,#4C1D95,#831843); font-style:normal; font-size:22px; font-weight:900 }
.pa145 > em.q{ background:radial-gradient(circle,#fff 0,#FDE68A 60%,#F59E0B); color:#B45309; font-size:28px }
.receiver .pa145 > em.q{ background:radial-gradient(circle,#fff 0,#F5D0FE 60%,#C026D3); color:#86198F }
.fr145, .fw145{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)) }
.pa145 > img, .pa145 > em{ z-index:1 }
.fr145{ z-index:2 }
.ps145.r1 .pa145{ animation:fl145 3s ease-in-out infinite }
.ps145.r1 .fr145{ filter:drop-shadow(0 0 14px rgba(250,204,21,.55)) }
.fw145{ animation:wg145 2.4s ease-in-out infinite; transform-origin:50% 66% }
@keyframes wg145{ 50%{ transform:scaleX(1.05) } }
@keyframes fl145{ 50%{ transform:translateY(-4px) } }
.pn145{ max-width:100%; font-size:12.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pl145{ display:flex; gap:3px; transform:scale(.88) }
.pv145{ display:inline-flex; align-items:center; gap:4px; padding:2px 10px 2px 3px; border-radius:99px; background:rgba(0,0,0,.4); border:1px solid color-mix(in srgb,var(--t1) 45%,transparent); direction:ltr }
.pv145 svg{ width:16px; height:16px }
.pv145 b{ font-size:12px; font-weight:900; color:var(--t1) }
.ps145.ld .pa145{ animation:ldP145 1s ease-in-out infinite alternate }

.ls145{ display:flex; flex-direction:column; gap:8px; padding:0 12px; max-width:520px; margin:0 auto }
.rw145{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:16px; cursor:pointer; animation:rwIn145 .35s ease both; animation-delay:var(--d);
  background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.05)); border:1px solid color-mix(in srgb,var(--t1) 28%,transparent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03) }
@keyframes rwIn145{ from{ opacity:0; transform:translateY(10px) } }
.rn145{ width:24px; flex:none; text-align:center; font-size:15px; font-weight:900; color:var(--t1); font-style:italic }
.ra145{ flex:none; width:42px; height:42px; border-radius:50%; padding:2px; background:linear-gradient(135deg,var(--t1),var(--t2)) }
.ra145 img, .ra145 em{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:#2E1065; font-style:normal; font-weight:900 }
.rt145{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; text-align:start }
.rt145 b{ font-size:13.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rt145 > span{ display:flex; gap:4px; transform-origin:0 50%; transform:scale(.86) }
[dir=rtl] .rt145 > span{ transform-origin:100% 50% }
.rv145{ display:flex; align-items:center; gap:4px; direction:ltr }
.rv145 svg{ width:16px; height:16px }
.rv145 b{ font-size:13px; font-weight:900; color:var(--t1) }
.ld145{ display:flex; flex-direction:column; gap:8px }
.ld145 i{ height:62px; border-radius:16px; background:rgba(255,255,255,.06); animation:ldP145 .9s ease-in-out infinite alternate }
.em145{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 0 30px; text-align:center }
.em145 svg{ width:84px; height:84px; animation:fl145 2.6s ease-in-out infinite }
.em145 b{ font-size:14px; font-weight:900 }
.em145 small{ font-size:12px; font-weight:700; opacity:.6 }
/* v299 · برچسب VIP کارت با پلاک «عنوان VIP» */
.vip145.tt299c{padding:0;height:24px;background:none;box-shadow:none}
.vip145.tt299c img{height:24px;width:auto;display:block;filter:drop-shadow(0 2px 4px rgba(60,20,110,.35))}