/* =========================================================================
   assets/ui/modern.css — لایه‌ی مدرن‌سازیِ رابطِ کاربری (آخر از همه لود می‌شه)
   ۱) آیکون‌های Phosphor (رنگ، اندازه، انیمیشن)   ۲) نوارِ پایینِ موبایل
   ۳) نوارِ بالا و کاشی‌ها (جمع‌وجورتر)            ۴) لودینگ‌ها (اسپلش، نوارِ پیشرفتِ بالا، اسکلتون)
   همه‌ی انیمیشن‌ها با «کاهشِ حرکت»ِ گوشی خاموش می‌شن.
   ========================================================================= */

/* ------------------------------------------------------------------ ۱) آیکون‌ها */
.bi { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex-shrink: 0; overflow: visible; }
.has-ic { line-height: 1; }
.has-ic > .bi { width: 1.08em; height: 1.08em; }
.bi-x { display: inline-flex; align-items: center; vertical-align: -0.17em; }
.bi-x .bi { width: 1.12em; height: 1.12em; }

.bi-teal { color: #2BFFC6; } .bi-pink { color: #FF5FD9; } .bi-gold { color: #FFC94A; } .bi-violet { color: #A98BFF; }
.bi-blue { color: #5AB8FF; } .bi-orange { color: #FF8A3D; } .bi-cyan { color: #4FE3FF; } .bi-red { color: #FF5C7A; }
.bi-green { color: #6EE38A; } .bi-gray { color: #9AA0B4; }
html[data-theme="light"] .bi-teal { color: #0BA67F; } html[data-theme="light"] .bi-pink { color: #D6249F; }
html[data-theme="light"] .bi-gold { color: #D99A06; } html[data-theme="light"] .bi-violet { color: #6E4FE0; }
html[data-theme="light"] .bi-blue { color: #1E7FD6; } html[data-theme="light"] .bi-orange { color: #E8641A; }
html[data-theme="light"] .bi-cyan { color: #0A9EC2; } html[data-theme="light"] .bi-red { color: #E23B5A; }
html[data-theme="light"] .bi-green { color: #23A64A; } html[data-theme="light"] .bi-gray { color: #6E7488; }

/* کاشی‌های رنگیِ تلگرامی (پروفایل و …): آیکونِ توپُرِ سفید */
.ti .bi, .tile-ic .bi { color: #fff !important; width: 17px !important; height: 17px !important; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.ti.has-ic { font-size: 0; }

/* --- آیکون‌های متحرک (ریز و لطیف؛ فقط روی چیزهای مهم) --- */
.bi-a-flame { transform-origin: 50% 88%; animation: biFlame 1.7s ease-in-out infinite; filter: drop-shadow(0 0 5px rgba(255, 122, 40, .55)); }
@keyframes biFlame { 0%,100% { transform: scale(1) rotate(0); } 22% { transform: scale(1.07, .95) rotate(-4deg); } 48% { transform: scale(.96, 1.06) rotate(3deg); } 74% { transform: scale(1.04, .98) rotate(-1.5deg); } }
.bi-a-gem { animation: biGem 3.2s ease-in-out infinite; }
@keyframes biGem { 0%, 70%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(79,227,255,0)); transform: rotate(0); } 80% { filter: brightness(1.55) drop-shadow(0 0 6px rgba(79,227,255,.8)); transform: rotate(-8deg) scale(1.1); } 90% { transform: rotate(4deg); } }
.bi-a-beat { animation: biBeat 1.5s ease-in-out infinite; }
@keyframes biBeat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(.96); } 45% { transform: scale(1.1); } }
.bi-a-wiggle { transform-origin: 50% 80%; animation: biWiggle 3s ease-in-out infinite; }
@keyframes biWiggle { 0%, 72%, 100% { transform: rotate(0) scale(1); } 76% { transform: rotate(-13deg) scale(1.12); } 82% { transform: rotate(11deg) scale(1.12); } 88% { transform: rotate(-6deg); } 94% { transform: rotate(3deg); } }
.bi-a-crown { animation: biCrown 2.6s ease-in-out infinite; }
@keyframes biCrown { 50% { transform: translateY(-1.5px) rotate(-4deg); filter: drop-shadow(0 2px 6px rgba(255,201,74,.6)); } }
.bi-a-sparkle { animation: biSparkle 2.4s ease-in-out infinite; }
@keyframes biSparkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.82) rotate(45deg); opacity: .75; } }
.bi-a-shine { animation: biShine 3.6s ease-in-out infinite; }
@keyframes biShine { 0%, 78%, 100% { filter: brightness(1); transform: scale(1); } 86% { filter: brightness(1.6) drop-shadow(0 0 6px currentColor); transform: scale(1.12); } }
.bi-a-bounce { animation: biBounce 1.6s cubic-bezier(.3,.7,.4,1) infinite; }
@keyframes biBounce { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-3px); } }
.bi-a-ring { transform-origin: 50% 10%; animation: biRing 4s ease-in-out infinite; }
@keyframes biRing { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(16deg); } 88% { transform: rotate(-14deg); } 92% { transform: rotate(8deg); } 96% { transform: rotate(-4deg); } }
.bi-a-wave { transform-origin: 70% 80%; animation: biWave 3.4s ease-in-out infinite; }
@keyframes biWave { 0%, 70%, 100% { transform: rotate(0); } 76%, 88% { transform: rotate(16deg); } 82%, 94% { transform: rotate(-8deg); } }
.bi-a-rocket { animation: biRocket 2.2s ease-in-out infinite; }
@keyframes biRocket { 50% { transform: translate(1.5px, -2px); } }
.bi-a-flip { animation: biFlip 3s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes biFlip { 0%, 70% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
.bi-a-pop, .bi-a-unlock { animation: biPop .7s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes biPop { from { transform: scale(.2) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ ۲) نوارِ پایینِ موبایل (کپسولِ شیشه‌ایِ جمع‌وجور) */
@media (max-width: 860px) {
  .bottom-nav {
    left: 12px; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom));
    height: 62px; padding: 0 6px; gap: 0; align-items: center; border-radius: 24px;
    background: rgba(18, 14, 34, .78);
    -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 14px 34px -10px rgba(0, 0, 0, .6), 0 2px 8px rgba(0,0,0,.25);
  }
  html[data-theme="light"] .bottom-nav {
    background: rgba(255, 255, 255, .82); border-color: rgba(20, 16, 40, .07);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 12px 30px -10px rgba(40, 30, 80, .25), 0 2px 8px rgba(40,30,80,.08);
  }
  .bnav-ind {
    position: absolute; top: 7px; left: 0; width: 58px; height: 48px; border-radius: 17px; pointer-events: none; z-index: 0;
    background: linear-gradient(180deg, rgba(43, 255, 198, .16), rgba(43, 255, 198, .07));
    box-shadow: inset 0 0 0 1px rgba(43, 255, 198, .16);
    transform: translateX(var(--x, -200px)); opacity: 0;
    transition: transform .55s cubic-bezier(.34, 1.4, .5, 1), opacity .2s, width .3s;
  }
  .bnav-ind.on { opacity: 1; }
  html[data-theme="light"] .bnav-ind { background: linear-gradient(180deg, rgba(11, 166, 127, .14), rgba(11, 166, 127, .06)); box-shadow: inset 0 0 0 1px rgba(11, 166, 127, .14); }
  .bnav-item { position: relative; z-index: 1; min-height: 48px; padding: 5px 0 3px; gap: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: -.1px; color: var(--text-low); }
  .bnav-item::before { display: none !important; }
  .bnav-item.active { color: var(--neon-teal); }
  html[data-theme="light"] .bnav-item.active { color: #0BA67F; }
  .bnav-item .bn-ic { position: relative; width: 25px; height: 25px; font-size: 25px; filter: none !important; transform: none !important; display: block; }
  .bnav-item .bn-ic .bi { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .2s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
  .bnav-item .bn-ic .bi-on { opacity: 0; transform: scale(.5); }
  .bnav-item.active .bn-ic .bi-on { opacity: 1; transform: scale(1); }
  .bnav-item.active .bn-ic .bi-off { opacity: 0; transform: scale(1.35); }
  .bnav-item.active .bn-ic { animation: navPop .55s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes navPop { 0% { transform: scale(1); } 35% { transform: scale(.82) translateY(1px); } 100% { transform: scale(1); } }
  .bnav-item:active .bn-ic { transform: scale(.86) !important; transition: transform .1s; }
  .bnav-badge { top: 2px !important; }

  /* دکمه‌ی وسط (پلاس/تاج) */
  .bnav-plus { position: relative; z-index: 1; margin: -22px 2px 0 !important; transform: none !important; }
  .bnav-plus .bn-badge {
    position: relative; width: 50px; height: 50px; font-size: 23px; border-radius: 18px;
    background: linear-gradient(145deg, #FFD86B, #F5A623 60%, #E8891F);
    color: #4A2E00; box-shadow: 0 8px 22px -6px rgba(245, 166, 35, .75), 0 0 0 4px var(--bg-void, #0B0815);
    transform: rotate(0); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
  }
  html[data-theme="light"] .bnav-plus .bn-badge { box-shadow: 0 8px 20px -6px rgba(245, 166, 35, .6), 0 0 0 4px #FBFAF4; }
  .bnav-plus .bn-badge::after { /* درخششِ چرخان */
    content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) 0 0 / 250% 100% no-repeat;
    animation: plusSheen 3.4s ease-in-out infinite;
  }
  @keyframes plusSheen { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
  .bnav-plus.is-premium .bn-badge { background: linear-gradient(145deg, #5CFFD5, #18C99F); color: #04382B; box-shadow: 0 8px 22px -6px rgba(43, 255, 198, .6), 0 0 0 4px var(--bg-void, #0B0815); }
  .bnav-plus .bn-badge .bi { width: 25px; height: 25px; }
  .bnav-plus .bn-badge .bi-off { display: none; }
  .bnav-plus .bn-badge .bi-on { opacity: 1 !important; transform: none !important; position: static; }
  .bnav-plus:active .bn-badge { transform: scale(.9) rotate(-6deg); }
  .bnav-plus .bn-lbl { font-size: 10.5px; margin-top: 4px; font-weight: 900; }
  body.has-bottom-nav .app { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}

/* ------------------------------------------------------------------ ۳) نوارِ بالا و کاشی‌ها */
.stat-chip .ic.has-ic .bi { width: 17px; height: 17px; }
.stat-chip.streak .bi { color: #FF8A3D; }
.stat-chip.gem .bi { color: #4FE3FF; }
.stat-chip.heart .bi { color: #FF5C7A; }
.topbar-support-btn.has-ic .bi { width: 19px; height: 19px; color: var(--neon-teal, #2BFFC6); }
html[data-theme="light"] .topbar-support-btn.has-ic .bi { color: #0BA67F; }
#support-fab .bi { width: 22px; height: 22px; }

.bn-continue-ic.has-ic .bi { width: 22px; height: 22px; color: #04382B !important; }
.lock-ic.has-ic .bi { width: 14px; height: 14px; }
.tgp-badge .has-ic .bi, .tgp-badge > span .bi { width: 26px; height: 26px; }
.modal-burst.has-ic .bi { width: 64px; height: 64px; }

/* ------------------------------------------------------------------ ۴) لودینگ‌ها */
/* اسپلشِ شروع: لوگو با براکت‌هایی که کشیده می‌شن، حلقه‌ی نئونیِ چرخان و نوشته‌ی براق */
.boot-splash { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 18px; }
.bn-boot { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.bn-boot::before { /* حلقه‌ی چرخان */
  content: ""; position: absolute; inset: -10px; border-radius: 34px; padding: 2px;
  background: conic-gradient(from 0deg, transparent 0 55%, #2BFFC6 70%, #7C5CFF 85%, #FF4FD8 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: bootSpin 1.4s linear infinite;
}
.bn-boot::after { /* هاله */
  content: ""; position: absolute; inset: -18px; border-radius: 40px; z-index: -1;
  background: radial-gradient(closest-side, rgba(43, 255, 198, .28), transparent 70%);
  animation: bootGlow 2s ease-in-out infinite;
}
.bn-boot-tile { width: 80px; height: 80px; border-radius: 26px; display: grid; place-items: center;
  background: linear-gradient(140deg, #2BFFC6, #4FC3F7 55%, #7C8CFF); box-shadow: 0 14px 34px -10px rgba(43, 255, 198, .6), inset 0 1px 0 rgba(255,255,255,.45);
  animation: bootTile 2s ease-in-out infinite; }
.bn-boot-tile svg { width: 50px; height: 50px; }
.bn-boot-tile path { fill: none; stroke: #062A22; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.bn-boot-tile .base path { opacity: .22; }
.bn-boot-tile .draw path { stroke-dasharray: 120; stroke-dashoffset: 120; animation: bootDraw 1.8s cubic-bezier(.65, 0, .35, 1) infinite; }
.bn-boot-tile .draw path:nth-child(2) { animation-delay: .15s; } .bn-boot-tile .draw path:nth-child(3) { animation-delay: .3s; }
.bn-boot-name { font-weight: 900; font-size: 19px; letter-spacing: -.2px;
  background: linear-gradient(90deg, var(--text-low, #8c86a6) 0 35%, #fff 50%, var(--text-low, #8c86a6) 65% 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: bootShine 1.8s linear infinite; }
html[data-theme="light"] .bn-boot-name { background-image: linear-gradient(90deg, #8b86a3 0 35%, #1a1530 50%, #8b86a3 65% 100%); }
.bn-boot-tip { font-size: 12.5px; font-weight: 700; color: var(--text-low, #8c86a6); min-height: 1.6em; transition: opacity .3s; }
@keyframes bootSpin { to { transform: rotate(360deg); } }
@keyframes bootGlow { 50% { opacity: .55; transform: scale(.94); } }
@keyframes bootTile { 50% { transform: translateY(-3px) scale(1.02); } }
@keyframes bootDraw { 0% { stroke-dashoffset: 120; } 45%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -120; } }
@keyframes bootShine { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* نوارِ پیشرفتِ بالای صفحه (هر وقت چیزی از سرور میاد) */
.bn-load { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10050; pointer-events: none; opacity: 0; transition: opacity .3s .1s; }
.bn-load.on { opacity: 1; transition-delay: 0s; }
.bn-load i { position: absolute; inset: 0; transform-origin: 100% 50%; transform: scaleX(0);
  background: linear-gradient(270deg, #2BFFC6, #4FC3F7 40%, #A98BFF 70%, #FF4FD8);
  box-shadow: 0 0 10px rgba(43, 255, 198, .7), 0 0 4px rgba(255, 79, 216, .5); border-radius: 0 0 3px 3px; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.bn-load i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 80px; background: linear-gradient(90deg, rgba(255,255,255,.9), transparent); filter: blur(2px); animation: loadGlint 1s linear infinite; }
@keyframes loadGlint { from { transform: translateX(-80px); opacity: .9; } to { transform: translateX(40px); opacity: 0; } }

/* اسکلتونِ براق برای جاهایی که داده هنوز نرسیده */
.bn-skel { position: relative; overflow: hidden; border-radius: 12px; background: var(--bn-surface-2, rgba(255,255,255,.06)); color: transparent !important; }
.bn-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); animation: skel 1.3s ease-in-out infinite; }
html[data-theme="light"] .bn-skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); }
@keyframes skel { to { transform: translateX(-100%); } }

/* دکمه‌ی در حالِ ارسال (هر دکمه‌ای که disabled + aria-busy بشه) */
button[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
button[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-color: rgba(255,255,255,.35); border-top-color: #fff; animation: bootSpin .7s linear infinite; }

/* ورودِ صفحه‌ها: محوشدن + بالا آمدنِ نرم */
.bn-enter > * { animation: scrIn .42s cubic-bezier(.2, .8, .2, 1) both; }
.bn-enter > *:nth-child(2) { animation-delay: .03s; } .bn-enter > *:nth-child(3) { animation-delay: .06s; } .bn-enter > *:nth-child(n+4) { animation-delay: .09s; }
@keyframes scrIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .bi, .bn-boot::before, .bn-boot::after, .bn-boot-tile, .bn-boot-tile path, .bn-boot-name, .bn-load i::after, .bn-skel::after,
  .bnav-plus .bn-badge::after, .bnav-item.active .bn-ic, .bn-enter > * { animation: none !important; }
  .bn-boot-tile .draw path { stroke-dashoffset: 0; }
  .bnav-ind { transition: none; }
}

/* ------------------------------------------------------------------ ۵) جمع‌وجورتر و مدرن‌تر روی گوشی */
@media (max-width: 860px) {
  #app.app, #app { padding-left: 14px; padding-right: 14px; }
  .topbar { padding: 10px 0; }
  .brand-name { font-size: 17px; }
  .bn-continue { padding: 10px; margin-bottom: 10px; border-radius: 20px; }
  .bn-continue-go { padding: 9px 14px !important; font-size: 13px !important; }
  .section-head { margin: 10px 0 22px !important; }
  .section-head h2 { font-size: 20px !important; margin-bottom: 8px !important; letter-spacing: -.3px; }
  .section-head p { font-size: 13.5px; line-height: 1.8; }
  .section-head .eyebrow { font-size: 11.5px; margin-bottom: 6px; }
  [class*="plan-card"], .pricing-card { padding: 16px !important; margin-bottom: 14px !important; border-radius: 22px !important; }
  .btn-lg { padding: 13px 24px !important; font-size: 15px !important; }
  .btn { letter-spacing: -.1px; }
  .stat-chip { padding: 5px 8px !important; gap: 4px !important; }
  .tgp-sec { margin-top: 18px !important; }
  .tg-group { border-radius: 16px !important; }
  .tg-row { min-height: 48px; }
  h1, h2, h3 { letter-spacing: -.25px; }
  .support-fab { width: 46px !important; height: 46px !important; font-size: 20px !important; }
}

/* لمسِ نرم: هر دکمه موقعِ فشار کمی کوچیک می‌شه (حسِ اپِ نیتیو) */
@media (hover: none) {
  .btn:active, .tg-row:active, .bn-quick button:active, .bn-world-pick:active, .stat-chip:active { transition: transform .12s ease !important; }
  .btn:active { transform: scale(.96); }
}

/* فروشگاه: کارت‌های جمع‌وجورتر با کاشیِ آیکون */
#shop-items-grid { gap: 12px !important; }
@media (max-width: 860px) { #shop-items-grid { margin-top: 6px !important; } }
#shop-items-grid > div { padding: 15px !important; border-radius: 22px !important; gap: 12px !important; }
#shop-items-grid > div > div:first-child > .has-ic:first-child { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 26px !important; background: var(--bn-surface-2, rgba(255,255,255,.06)); }
#shop-items-grid .btn-block { padding: 11px 16px !important; }
.lesson-close.has-ic .bi, [data-emo="✕"] .bi { width: 18px; height: 18px; }
html[data-theme="light"] .ms-main .bi, html[data-theme="light"] .bi-gold.bi-a-shine { color: #A86E00; }

/* ------------------------------------------------------------------ ۶) لوگوی BL (همه‌جای سایت) */
.brand-mark, .auth-icon-badge {
  background: url(/assets/brand/bl-logo.svg?v=1) center / 100% 100% no-repeat !important;
  color: transparent !important; font-size: 0 !important; border-radius: 23% !important;
  box-shadow: 0 6px 18px -6px rgba(67, 255, 186, .55) !important;
}
.auth-icon-badge { box-shadow: 0 10px 30px -8px rgba(67, 255, 186, .6) !important; }

/* اسپلشِ شروع با لوگوی BL: پایه‌ی L مثلِ نوارِ پیشرفت پر می‌شه و مکان‌نمای صورتی چشمک می‌زنه */
.bn-boot { width: 104px; height: 104px; }
.bn-boot::before { inset: -9px; border-radius: 32px; }
.bn-boot svg.bl { width: 104px; height: 104px; display: block; filter: drop-shadow(0 14px 30px rgba(67, 255, 186, .35)); animation: bootTile 2s ease-in-out infinite; }
.bn-boot .bl-foot { transform-origin: 550px 684px; animation: blFill 1.6s cubic-bezier(.65, 0, .35, 1) infinite; }
.bn-boot .bl-cur { animation: blBlink 1.6s steps(1) infinite; }
@keyframes blFill { 0% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
@keyframes blBlink { 0%, 55% { opacity: .25; } 56%, 78% { opacity: 1; } 79%, 89% { opacity: .25; } 90%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bn-boot .bl-foot, .bn-boot .bl-cur, .bn-boot svg.bl { animation: none !important; } }