/* ═══════════════════════════════════════════════════════════════════════════
 *  v397 · نمای عمومی: تب‌های آیکن‌دار، کاشی‌های «شناسنامه» جمع‌وجور، و برگه/صفحهٔ ویرایش «لحظه»
 *
 *  مشکل (بازخورد مالک): ۱) نوار تب‌ها (Profile، Medals، Relation، Moment) فقط متن ساده بود و حرفه‌ای به نظر نمی‌رسید.
 *  ۲) کاشی‌های «شناسنامه» (.idt235، v392) هر کدام ۱۰۴px بلندی داشتند (آیکن ۴۶px بالای نام)؛ پنج نشان نیم صفحه را می‌گرفت.
 *  ۳) «لحظه»‌ها ویرایش و حذف نداشتند (334-v397).
 *  راه‌حل (همان DOM 188؛ آیکن تب‌ها svg.tg397 و دکمهٔ ⋯ کارت، .mox397):
 *   ۱) هر تب: آیکن + نام. تب فعال: آیکن در کاشی کوچک آبی گرادیانی با سایه، نام پررنگ جوهری، و نشانگر 188 (moveInd،
 *      همان جابه‌جایی JS) خط کوتاه آبی درخشان وسط تب. ≤۳۶۰px: آیکن بالای نام.
 *   ۲) کاشی شناسنامه افقی و کوتاه (حدود ۵۰px): آیکن ۳۰px کنار نام و زیرنویس. رنگ، برق (::after) و افکت 255 همان‌اند؛
 *      چیدمان سه‌تایی و قاعدهٔ ردیف آخر 329 هم.
 *   ۳) برگهٔ گزینه‌های لحظه (#mm397) و صفحهٔ ویرایش (#me397) با پالت «مرکز من» (جوهر #1F2937، خاکستری #6B7280،
 *      خط موی کرم #ECE6DA، آبی #2F63D8، قرمز #E11D48).
 *  روانی: بی :has، بی انیمیشن همیشگی تازه (فقط لغزش ورود/خروج)، بی JS اندازه‌خوان.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ۱) تب‌ها */
#pv146o .pz234 .tbi146{ padding:0 6px }
#pv146o .pz234 .tbi146 button{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:0; height:50px; padding:0 2px;
  font-size:13px; font-weight:800; color:#8A93A3; -webkit-tap-highlight-color:transparent }
#pv146o .pz234 .tbi146 button > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#pv146o .pz234 .tbi146 .tg397{ flex:none; width:24px; height:24px; padding:4px; box-sizing:border-box; border-radius:9px;
  transition:color .2s, background-color .2s, box-shadow .2s }
#pv146o .pz234 .tbi146 button.on{ color:#1F2937; font-weight:900 }
#pv146o .pz234 .tbi146 button.on .tg397{ color:#fff; background:linear-gradient(135deg,#5B95FF 0%,#2F63D8 60%,#2A57C6 100%);
  box-shadow:0 6px 12px -6px rgba(47,99,216,.9), inset 0 1px 0 rgba(255,255,255,.35) }
#pv146o .pz234 .tbi146 button:active .tg397{ transform:scale(.92) }
/* نشانگر: خود <i> پهنای تب را JS می‌دهد؛ خط کوتاه درخشان وسطش */
#pv146o .pz234 .tbi146 i{ height:3px; background:none; box-shadow:none }
#pv146o .pz234 .tbi146 i::before{ content:""; position:absolute; inset:0 26%; border-radius:3px; background:linear-gradient(90deg,#5B95FF,#2F63D8);
  box-shadow:0 2px 8px rgba(47,99,216,.55) }
@media (max-width:360px){
  #pv146o .pz234 .tbi146 button{ flex-direction:column; gap:2px; height:56px; font-size:11.5px }
  #pv146o .pz234 .tbi146 .tg397{ width:22px; height:22px; padding:3.5px; border-radius:8px }
}

/* ۲) شناسنامه: کاشی‌های کوتاه افقی */
#pv146o .pz234 .ids235{ gap:8px }
#pv146o .pz234 .ids235 > .idt235{ min-height:0; padding:8px 9px; border-radius:16px; display:grid; grid-template-columns:auto minmax(0,max-content);
  grid-template-rows:auto auto; column-gap:7px; row-gap:1px; align-items:center; align-content:center; justify-content:center }
#pv146o .pz234 .idt235 > i{ grid-column:1; grid-row:1 / span 2; width:28px; height:28px; margin:0; border-radius:10px }
#pv146o .pz234 .idt235 > i svg{ width:16px; height:16px }
/* نشان رتبه پهن است (بال + Lv؛ 295 ← span.lvr306 با width:80px درون‌خطی و svg 104×44): قاب پهن‌تر و نشان هم‌پهنای قاب */
#pv146o .pz234 .idt235.rk > i{ width:40px; grid-template-columns:minmax(0,1fr) }
#pv146o .pz234 .idt235.rk > i > .lvr306{ width:100% !important; height:auto }
#pv146o .pz234 .idt235.rk > i svg{ width:100%; height:auto }
/* نام هم مثل زیرنویس دو خط می‌شود (مثلاً «مدیر برنامه»، Moderator) به‌جای بریده شدن */
#pv146o .pz234 .idt235 b{ grid-column:2; grid-row:1; min-width:0; font-size:12.5px; line-height:1.3; text-align:start; white-space:normal; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
/* زیرنویس بلند (مثل نام VIP) دو خط می‌شود به‌جای بریده شدن */
#pv146o .pz234 .idt235 small{ grid-column:2; grid-row:2; min-width:0; font-size:10px; line-height:1.3; text-align:start; white-space:normal; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
@media (max-width:374px){
  #pv146o .pz234 .ids235 > .idt235{ padding:7px; column-gap:5px }
  #pv146o .pz234 .idt235 > i{ width:24px; height:24px; border-radius:8px }
  #pv146o .pz234 .idt235.rk > i{ width:34px }
  #pv146o .pz234 .idt235 > i svg{ width:14px; height:14px }
}

/* ۳) دکمهٔ ⋯ روی کارت لحظهٔ خودم */
.mo234 header .mox397{ flex:none; margin-inline-start:auto; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:11px;
  background:none; color:#6B7280; cursor:pointer; -webkit-tap-highlight-color:transparent }
.mo234 header .mox397 svg{ width:20px; height:20px }
.mo234 header .mox397:active{ background:#F3F4F6 }

/* ۳-الف) برگهٔ گزینه‌ها */
#mm397{ position:fixed; inset:0; z-index:9996; display:flex; align-items:flex-end; justify-content:center; background:rgba(17,24,39,.38); animation:mmF397 .18s ease both }
/* بستن: کلیدفریم جدا (reverse روی انیمیشن تمام‌شده دوباره اجرا نمی‌شود و یک‌باره ناپدید می‌کرد) */
#mm397.out, #me397.out{ animation:mmFo397 .18s ease both; pointer-events:none }
#mm397 .mm397-c{ width:100%; max-width:520px; box-sizing:border-box; padding:8px 14px calc(14px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0;
  background:#FFFFFF; color:#1F2937; box-shadow:0 -16px 36px -12px rgba(17,24,39,.35); animation:mmU397 .24s cubic-bezier(.2,.8,.2,1) both }
#mm397.out .mm397-c, #me397.out .me397-c{ animation:mmD397 .18s ease-in both }
#mm397 .hd{ display:block; width:40px; height:5px; margin:2px auto 12px; border-radius:99px; background:#E5E7EB }
#mm397 .mm397-b{ display:flex; flex-direction:column; gap:8px }
#mm397 .mm397-b > button{ display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:10px 12px; border:0; border-radius:16px;
  background:#FBFAF7; box-shadow:inset 0 0 0 1px #ECE6DA; color:inherit; cursor:pointer; font:inherit; text-align:start }
#mm397 .mm397-b > button:active{ transform:scale(.985) }
#mm397 .mm397-b > button > i{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:13px; color:#2F63D8; background:#EAF2FF }
#mm397 .mm397-b > button > i svg{ width:21px; height:21px }
#mm397 .mm397-b > button > span{ display:flex; flex-direction:column; gap:2px; min-width:0 }
#mm397 .mm397-b > button b{ font-size:14.5px; font-weight:900 }
#mm397 .mm397-b > button small{ font-size:11.5px; font-weight:600; color:#6B7280 }
#mm397 .mm397-b > button.dn{ color:#E11D48 }
#mm397 .mm397-b > button.dn > i{ color:#E11D48; background:#FFEEF2 }
#mm397 .mm397-b > button.go{ justify-content:center; min-height:50px; color:#fff; background:linear-gradient(135deg,#F43F5E,#E11D48); box-shadow:0 10px 20px -12px rgba(225,29,72,.9) }
#mm397 .mm397-b > button.go b{ font-size:15px }
#mm397 .mm397-q{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 12px 10px; text-align:center }
#mm397 .mm397-q > i{ width:52px; height:52px; display:grid; place-items:center; border-radius:18px; color:#E11D48; background:#FFEEF2; margin-bottom:4px }
#mm397 .mm397-q > i svg{ width:26px; height:26px }
#mm397 .mm397-q b{ font-size:16px; font-weight:900 }
#mm397 .mm397-q small{ font-size:12.5px; font-weight:600; color:#6B7280; line-height:1.6 }
#mm397 .mm397-x{ display:block; width:100%; height:48px; margin-top:10px; border:0; border-radius:14px; background:#F3F4F6; color:#1F2937; cursor:pointer; font:inherit; font-size:14.5px; font-weight:800 }
#mm397.busy .mm397-c{ pointer-events:none } #mm397.busy .go{ opacity:.7 }
@keyframes mmF397{ from{ opacity:0 } to{ opacity:1 } }
@keyframes mmU397{ from{ transform:translateY(100%) } to{ transform:none } }
@keyframes mmFo397{ from{ opacity:1 } to{ opacity:0 } }
@keyframes mmD397{ from{ transform:none } to{ transform:translateY(100%) } }

/* ۳-ب) صفحهٔ ویرایش */
#me397{ position:fixed; inset:0; z-index:9996; display:flex; justify-content:center; background:rgba(17,24,39,.38); animation:mmF397 .18s ease both }
#me397 .me397-c{ width:100%; max-width:520px; height:100%; overflow-y:auto; overscroll-behavior:contain; box-sizing:border-box; padding-bottom:calc(20px + env(safe-area-inset-bottom));
  background:#FBFAF7; color:#1F2937; animation:mmU397 .24s cubic-bezier(.2,.8,.2,1) both }
#me397 .me397-h{ position:sticky; top:0; z-index:2; box-sizing:content-box; display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:8px; height:56px;
  padding:env(safe-area-inset-top) 12px 0; background:rgba(255,255,255,.96); box-shadow:0 1px 0 rgba(31,41,55,.07) }
#me397 .me397-h b{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; font-size:16px; font-weight:900 }
#me397 .me397-h .ic{ width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:12px; background:none; color:#1F2937; cursor:pointer }
#me397 .me397-h .ic svg{ width:22px; height:22px } #me397 .me397-h .ic:active{ background:#F3F4F6 }
#me397 .me397-h .go{ height:36px; padding:0 18px; border:0; border-radius:12px; cursor:pointer; font:inherit; font-size:14px; font-weight:900; color:#fff;
  background:linear-gradient(135deg,#4A86FA 0%,#2F63D8 50%,#2A57C6 100%); box-shadow:0 8px 16px -10px rgba(47,99,216,.9) }
#me397 .me397-h .go:disabled{ opacity:.6 }
#me397 .me397-m{ position:relative; margin:0; background:#0B0F19 }
#me397 .me397-v{ display:grid; place-items:center; min-height:220px; max-height:52vh; overflow:hidden }
#me397 .me397-v img, #me397 .me397-v video{ display:block; width:100%; max-height:52vh; object-fit:contain }
#me397 .me397-n{ display:grid; place-items:center; width:64px; height:64px; color:#6B7280 } #me397 .me397-n svg{ width:40px; height:40px }
#me397 .me397-r{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px;
  border:0; border-radius:99px; cursor:pointer; font:inherit; font-size:13px; font-weight:800; color:#fff; white-space:nowrap;
  background:rgba(17,24,39,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 6px 14px -6px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
#me397 .me397-r svg{ width:18px; height:18px }
#me397 .me397-r:active{ transform:translateX(-50%) scale(.96) }
/* ویدیو کنترل‌های خودش را پایین دارد: دکمه بالا (کلاس .vd از 334، بی :has) */
#me397.vd .me397-r{ bottom:auto; top:14px }
#me397.nw .me397-r{ background:rgba(47,99,216,.85) }
#me397 .me397-g{ position:absolute; left:0; right:0; bottom:0; height:3px; background:transparent }
#me397 .me397-g i{ display:block; width:0; height:100%; background:linear-gradient(90deg,#5B95FF,#2F63D8); transition:width .4s ease }
#me397.slow .me397-g i{ transition:width 14s cubic-bezier(.1,.6,.3,1) }
#me397 .me397-t{ position:relative; display:block; margin:12px 16px 0 }
#me397 .me397-t textarea{ display:block; width:100%; min-height:132px; box-sizing:border-box; padding:12px 14px 26px; resize:vertical; border:1px solid #ECE6DA; border-radius:16px;
  outline:0; background:#FFFFFF; color:#1F2937; font:inherit; font-size:14.5px; font-weight:600; line-height:1.75; unicode-bidi:plaintext }
#me397 .me397-t textarea:focus{ border-color:#3D7BF5; box-shadow:0 0 0 4px rgba(61,123,245,.15) }
#me397 .me397-t small{ position:absolute; bottom:8px; inset-inline-end:12px; font-size:11px; font-weight:700; color:#9CA3AF; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate }
#me397 .me397-p{ margin:10px 18px 0; font-size:12px; font-weight:600; line-height:1.7; color:#6B7280 }
#me397.busy .me397-m, #me397.busy .me397-t{ pointer-events:none; opacity:.75 }