/* ระบบสมาชิก: แถบสถานะบนสุด, หน้าบัญชี, หน้าล็อกอิน, กล่องแจ้งเตือน */

.mb-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
    padding: .55rem .9rem; margin-bottom: 1.1rem; border-radius: .75rem;
    border: 1px solid #2a2a31; background: #17171c;
}
.mb-banner .mb-text { color: inherit; text-decoration: none; }
.mb-banner .mb-text:hover { text-decoration: underline; }
.mb-banner .mb-sub { color: var(--bs-secondary-color); font-size: .875em; }
.mb-premium { border-color: rgba(255, 193, 7, .45); background: linear-gradient(90deg, rgba(255, 193, 7, .14), rgba(255, 193, 7, .03)); }
.mb-premium b { color: #ffd166; }
.mb-warn { border-color: #fd7e14; background: rgba(253, 126, 20, .18); color: #ffd8b5; }
.mb-warn b { color: #ffb066; }
.mb-free { border-color: #34343d; }
.mb-empty { border-color: rgba(254, 44, 85, .55); background: rgba(254, 44, 85, .1); }
.mb-admin { border-color: rgba(37, 244, 238, .35); background: rgba(37, 244, 238, .06); }
.mb-admin b { color: var(--tt-cyan, #25f4ee); }

/* หน้าบัญชี: ตัวเลขวันคงเหลือใหญ่ ๆ */
.mb-big { font-size: 3.6rem; font-weight: 700; line-height: 1; }
.mb-big-unit { font-size: 1.2rem; font-weight: 500; margin-left: .35rem; }
.mb-plan-card.premium { border-color: rgba(255, 193, 7, .5); }
.mb-plan-card.premium .mb-big { color: #ffd166; }
.mb-plan-card.warn { border-color: #fd7e14; }
.mb-plan-card.warn .mb-big { color: #ffb066; }
.mb-quota-dots span { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; margin-right: .3rem; background: #2a2a31; border: 1px solid #44444d; }
.mb-quota-dots span.used { background: var(--tt-pink, #fe2c55); border-color: var(--tt-pink, #fe2c55); }

.mb-auth-body { min-height: 100vh; }
.mb-auth-card { max-width: 440px; margin: 0 auto; }

.mb-slip-thumb { width: 72px; height: 96px; object-fit: cover; border-radius: .4rem; border: 1px solid #2a2a31; background: #111; }
.mb-qr { background: #fff; padding: 12px; border-radius: .6rem; display: inline-block; }
.mb-qr img, .mb-qr canvas { display: block; }
.table-mb td, .table-mb th { vertical-align: middle; }
.mb-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

/* กล่องแจ้งเตือนมุมล่างขวา (member.js) */
.mb-notice-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; max-width: min(440px, calc(100vw - 2rem)); }
.mb-notice { background: #1d1d23; border: 1px solid #fe2c55; border-radius: .75rem; padding: .85rem 1rem; margin-top: .6rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: mbIn .25s ease-out; }
.mb-notice.info { border-color: #25f4ee; }
@keyframes mbIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ปุ่ม "เริ่ม Live" หน้าบัญชีของฉัน */
.mb-live-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .75rem 2rem; font-size: 1.25rem; font-weight: 700;
    border-radius: 999px; background: #fe2c55; border-color: #fe2c55; box-shadow: 0 0 0 0 rgba(254, 44, 85, .6); animation: mbLivePulse 2s infinite; }
.mb-live-btn:hover, .mb-live-btn:focus { background: #e0173f; border-color: #e0173f; }
.mb-live-dot { width: .7rem; height: .7rem; border-radius: 50%; background: #fff; animation: mbLiveBlink 1s infinite; }
@keyframes mbLivePulse { 0% { box-shadow: 0 0 0 0 rgba(254, 44, 85, .55); } 70% { box-shadow: 0 0 0 16px rgba(254, 44, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(254, 44, 85, 0); } }
@keyframes mbLiveBlink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .mb-live-btn, .mb-live-dot { animation: none; } }
@media (max-width: 575.98px) { .mb-live-btn { width: 100%; justify-content: center; } }

/* กระดิ่งแจ้งเตือน 🔔 */
#notifBell > .nav-link { font-size: 1.15rem; }
.mb-bell-count { position: absolute; top: .15rem; right: -.2rem; font-size: .65rem; }
.mb-bell-menu { width: min(360px, calc(100vw - 2rem)); background: #17171c; border-color: #2a2a31; }
.mb-bell-list { max-height: 60vh; overflow-y: auto; }
.mb-bell-item { display: block; padding: .6rem 1rem; color: inherit; text-decoration: none; border-bottom: 1px solid #23232a; }
.mb-bell-item:hover { background: #1f1f26; }
.mb-bell-item.unread { background: rgba(254, 44, 85, .08); border-left: 3px solid #fe2c55; }
/* ประวัติของฉัน: รูปสลิปย่อ */
.hist-slip { width: 44px; height: 58px; object-fit: cover; border-radius: .35rem; border: 1px solid #2a2a31; background: #111; }
.hist-slip:hover { outline: 2px solid var(--tt-pink, #fe2c55); }

/* ชื่อในแถบบน + บรรทัดเล็กใต้ชื่อ (ไม่จำกัด / เหลือกี่วัน / Free) — lib/member_ui.php member_nav_items() */
.mb-who { display: flex !important; align-items: center; gap: .4rem; line-height: 1.15; }
.mb-who-ico { font-size: 1.05rem; }
.mb-who-txt { display: inline-flex; flex-direction: column; min-width: 0; }
.mb-who-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-who-sub { font-size: .72rem; color: var(--bs-secondary-color); white-space: nowrap; }
.mb-who-warn .mb-who-sub { color: #ffc107; }