/* hrai — قائمة الحساب (hrai-usermenu.js) */
.um-root { position: relative; display: inline-flex; }
.um-trigger { display: inline-flex; align-items: center; gap: 8px; background: var(--acc-surface, #fff); border: 1px solid var(--acc-border, #ececec); border-radius: 50px; padding: 3px 5px; padding-inline-end: 10px; cursor: pointer; font-family: 'Tajawal', sans-serif; color: var(--acc-text, #111); transition: border-color .2s, background .2s; position: relative; }
.um-trigger:hover, .um-trigger[data-state="open"] { border-color: var(--acc-muted-2, #aaa); }
.um-trigger:focus-visible { outline: 2px solid var(--acc-text, #111); outline-offset: 2px; }
.um-tname { font-size: 13px; font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-chev { display: grid; place-items: center; color: var(--acc-muted, #888); transition: transform .38s var(--um-snappy, cubic-bezier(.3, 1.3, .5, 1)); }
.um-chev svg { width: 15px; height: 15px; }
.um-trigger[data-state="open"] .um-chev { transform: rotate(180deg); }
.um-tbadge { position: absolute; top: 1px; inset-inline-start: 24px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px var(--acc-surface, #fff); }
@media (max-width: 639px) { .um-tname, .um-chev { display: none; } .um-trigger { padding: 3px; } }

.um-face { position: relative; flex: none; display: inline-grid; }
.um-portrait { display: grid; place-items: center; border-radius: 50%; background: var(--acc-primary, #111); color: var(--acc-primary-ink, #fff); font-weight: 800; font-family: 'Tajawal', sans-serif; user-select: none; }
.um-face[data-size="sm"] .um-portrait { width: 28px; height: 28px; font-size: 12px; }
.um-face[data-size="md"] .um-portrait { width: 40px; height: 40px; font-size: 15px; }

/* اللوحة */
.um-panel { position: fixed; z-index: 1500; width: 288px; max-width: calc(100vw - 24px); background: var(--acc-surface, #fff); color: var(--acc-text, #111); border: 1px solid var(--acc-border, #ececec); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .04); padding: 6px; font-family: 'Tajawal', sans-serif; transform-origin: var(--ox, 50%) var(--oy, 0); outline: none; }
.um-header { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.um-identity { min-width: 0; flex: 1; }
.um-namerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.um-name { font-size: 14.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-plan { flex: none; font-size: 11px; font-weight: 700; color: var(--acc-muted, #888); border: 1px solid var(--acc-border-2, #e6e6e6); border-radius: 6px; padding: 1px 7px; }
.um-email { display: block; font-size: 12px; color: var(--acc-muted, #888); direction: ltr; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
html[dir="rtl"] .um-email { text-align: right; }
.um-list { position: relative; }
.um-sep { height: 1px; background: var(--acc-border, #ececec); margin: 5px -6px; }
.um-hl { position: absolute; top: 0; inset-inline: 0; height: 0; border-radius: 10px; background: var(--acc-surface-2, #f4f4f4); opacity: 0; pointer-events: none; will-change: transform; }
.um-hl[data-tone="danger"] { background: rgba(239, 68, 68, .1); }
.um-item, .um-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; background: none; border-radius: 10px; font: 600 13.5px 'Tajawal', sans-serif; color: inherit; text-decoration: none; text-align: start; cursor: pointer; outline: none; }
.um-row { cursor: default; padding-block: 5px; }
.um-icon { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--acc-muted, #888); }
.um-icon svg { width: 17px; height: 17px; }
.um-label { flex: 1; min-width: 0; position: relative; display: grid; }
.um-label > * { grid-area: 1 / 1; }
.um-leaving { pointer-events: none; }
.um-badge { flex: none; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 800; min-width: 19px; height: 19px; border-radius: 50px; display: grid; place-items: center; padding: 0 5px; }
.um-item[data-tone="danger"] { color: #dc2626; }
.um-item[data-tone="danger"] .um-icon { color: #dc2626; }
.um-item[aria-busy="true"] { cursor: progress; }
.um-spin { animation: umSpin .8s linear infinite; }
@keyframes umSpin { to { transform: rotate(360deg); } }

/* مبدّل المظهر */
.um-segments { position: relative; display: grid; grid-template-columns: repeat(var(--count, 3), 34px); margin-inline-start: auto; padding: 3px; border-radius: 10px; background: var(--acc-surface-2, #f4f4f4); border: 1px solid var(--acc-border, #ececec); }
.um-thumb { position: absolute; top: 3px; bottom: 3px; inset-inline-start: 3px; width: 34px; border-radius: 7px; background: var(--acc-surface, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 1px var(--acc-border, #ececec); transform: translateX(calc(var(--index, 0) * 100%)); transition: transform .38s var(--um-snappy, cubic-bezier(.3, 1.3, .5, 1)); }
html[dir="rtl"] .um-thumb { transform: translateX(calc(var(--index, 0) * -100%)); }
.um-seg { position: relative; z-index: 1; display: grid; place-items: center; height: 28px; border: 0; background: none; border-radius: 7px; color: var(--acc-muted, #888); cursor: pointer; transition: color .2s; }
.um-seg[aria-checked="true"] { color: var(--acc-text, #111); }
.um-seg:hover { color: var(--acc-text, #111); }
.um-seg:focus-visible { outline: 2px solid var(--acc-text, #111); outline-offset: 1px; }

/* الجوال: ورقة من تحت */
.um-scrim { position: fixed; inset: 0; z-index: 1499; background: rgba(0, 0, 0, .4); }
.um-panel.um-sheet { inset: auto 0 0 0; width: auto; max-width: none; border-radius: 20px 20px 0 0; border-bottom: 0; padding: 8px 8px calc(12px + env(safe-area-inset-bottom)); touch-action: none; }
.um-sheet .um-item, .um-sheet .um-row { min-height: 48px; font-size: 15px; }
.um-handle { display: block; width: 38px; height: 4px; border-radius: 4px; background: var(--acc-border-2, #ddd); margin: 2px auto 6px; }
@media (prefers-reduced-motion: reduce) { .um-thumb, .um-chev { transition: none; } .um-spin { animation-duration: 2s; } }
.um-icon svg { fill: none; stroke: currentColor; stroke-width: 1.75; }
.um-panel.um-sheet { user-select: none; -webkit-user-select: none; }
/* بدون صورة: الاسم والسهم بس، ونقطة الإشعارات جنب الاسم */
.um-trigger:not(:has(.um-face)) { padding: 6px 12px; padding-inline-end: 10px; }
.um-trigger:not(:has(.um-face)) .um-tbadge { position: static; order: -1; width: 7px; height: 7px; box-shadow: none; }
.um-header:not(:has(.um-face)) { padding: 12px 10px; }
@media (max-width: 639px) { .um-trigger:not(:has(.um-face)) .um-tname { display: inline; max-width: 96px; } .um-trigger:not(:has(.um-face)) .um-chev { display: grid; } .um-trigger:not(:has(.um-face)) { padding: 6px 10px; } }
/* قبل ما يخلص فحص الجلسة: نفس شكل زر الحساب (account.js) */
.nav-auth-ghost { pointer-events: none; padding: 6px 12px; padding-inline-end: 10px; }
.nav-auth-skel { display: block; width: 104px; height: 12px; border-radius: 6px; background: var(--acc-surface-2, #f0f0f0); animation: navSkel 1.2s ease-in-out infinite alternate; }
@keyframes navSkel { to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .nav-auth-skel { animation: none; } }
/* صف اللغة: مقاطع نصية (ع / EN) */
.um-seg-lang { grid-template-columns: repeat(var(--count, 2), 40px); }
.um-segtx { font-size: 12.5px; font-weight: 800; line-height: 1; }
.um-segtx[lang="ar"] { font-size: 14px; }
.um-seg-lang .um-thumb { width: 40px; }
/* اسم الزر: كان ينقص من تحت بالعربي (الحروف النازلة) — نعطيه ارتفاع سطر كافي */
.um-tname { line-height: 1.7; padding-block: 1px; }