/* ==========================================
           🌟 GLOBAL PUSH NOTIFICATION (iPhone Style)
        ========================================== */
        /* 🌟 แคปซูลแจ้งเตือนเด้ง — แจ้งเตือนทุกอย่างในแอปใช้ตัวนี้ตัวเดียว (showToast / sysShowIsland / sysShowAlert
           ส่งมาที่นี่หมด) · หน้าตาเดียวกับเมนูบาร์: ทรงแคปซูล พื้นกระจกเข้มไล่เฉดบางๆ เบลอ 20px ไม่มีขอบ
           กว้างตามเนื้อหา (ไม่เกิน 420px / ขอบจอข้างละ 12px) 🌟 */
        #sys-push-notif {
            /* ซ่อน = เลื่อนขึ้นพ้นขอบบน + ย่อเล็กน้อย + จางหาย (นุ่มๆ) แล้วค่อย visibility:hidden ตอนจบ */
            position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%;
            transform: translate(-50%, calc(-100% - max(12px, env(safe-area-inset-top)) - 12px)) scale(0.92);
            width: max-content; max-width: min(420px, calc(100% - 24px)); min-height: 40px;
            background: linear-gradient(120deg, rgba(54, 54, 58, 0.7) 0%, rgba(34, 34, 37, 0.63) 45%, rgba(24, 24, 26, 0.6) 100%);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border-radius: 100px; padding: 8px 18px 8px 14px; z-index: 10000000;
            display: flex; align-items: center; gap: 9px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
            transition: transform 0.5s cubic-bezier(0.55, 0, 0.3, 1), opacity 0.38s ease 0.08s, visibility 0s linear 0.5s;
            cursor: pointer; pointer-events: none; opacity: 0; visibility: hidden;
        }
        /* โผล่ = ไหลลงมาแบบสปริงนิดๆ */
        #sys-push-notif.active {
            /* จางลง 20% ทั้งแคปซูล (พื้น+ตัวอักษร+ไอคอน) — ใช้กับทุกแจ้งเตือน */
            transform: translate(-50%, 0) scale(1); pointer-events: auto; opacity: 0.8; visibility: visible;
            transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.25s ease, visibility 0s;
        }
        #sys-push-notif.active:active { transform: translate(-50%, 0) scale(0.96); transition: transform 0.15s ease; }
        
        /* แคปซูลบรรทัดเดียว: ไอคอน/รูปเล็ก 22px · หัวข้อตัวหนา + ข้อความสั้นต่อกันในบรรทัดเดียว ยาวเกินตัดด้วย … */
        .push-av-box { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: #111; }
        .push-av-box img { width: 100%; height: 100%; object-fit: cover; }
        .push-icon-box { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.92); color: #000; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
        .push-icon-box i { font-size: 13px !important; }
        .push-icon-box.level { background: linear-gradient(135deg, #F9D423, #FF4E50); color: #fff; }

        .push-content { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; }
        .push-title { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.88); flex-shrink: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
        .push-line-icon { font-size: 18px; color: rgba(255,255,255,0.88); flex-shrink: 0; display: block; line-height: 1; }
        #push-icon-target { display: flex; align-items: center; flex-shrink: 0; }
        .push-msg { font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        .push-title:has(+ .push-msg[hidden]) { max-width: 100%; flex-shrink: 1; min-width: 0; }   /* ข้อความเดียว → ใช้เต็มแคปซูล */
        /* รายละเอียดแบบ Facebook: แคปชัน/คอมเมนต์ + จำนวนรูป และภาพตัวอย่างโพสต์/สตอรี่ทางขวา */
        .push-detail { display: none !important; }   /* บรรทัดเดียว — ไม่มีบรรทัดรายละเอียด */
        .push-thumb { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #222; }
        #sys-push-notif [hidden] { display: none !important; }
        
        /* สัดส่วนและ CSS อื่นๆ คงเดิม... */
        :root {
            --bg-color: #000000; --surface-color: #121212;
            --text-primary: #ffffff; --text-secondary: #aaaaaa;
            --border-color: #262626; --accent-color: #ffffff;
        }

        /* 🌟 ป้องกันการซูมและเมนูกดค้าง (Save Image) บนมือถือ 🌟 */
        * { 
            margin: 0; padding: 0; box-sizing: border-box; 
            -webkit-tap-highlight-color: transparent; 
            -webkit-touch-callout: none; 
        }
        
        body, html {
            margin: 0; padding: 0;
            width: 100%;
            /* 🌟 min-height (พื้น ไม่ใช่ height ตายตัว) — body เป็นตัวเลื่อนจริงของทั้งเว็บแล้ว (ดู
               #app-container/.app-view ด้านล่าง: [[project_hqux_full_page_scroll]]) หน้าที่เนื้อหาสั้น
               กว่าจอ (เช่นหน้า login) ยังสูงเท่าจอพอดีด้วย min-height นี้ หน้าที่เนื้อหายาวกว่าก็ขยายสูง
               ตามจริงเลื่อนได้เอง ไม่ต้องปลอมด้วย +1px/scrollTo(0,1) อีกต่อไป 🌟 */
            min-height: 100%; min-height: -webkit-fill-available; min-height: 100svh; min-height: 100dvh; min-height: var(--app-real-vh, 100dvh);
            background-color: var(--bg-color); color: var(--text-primary);
            font-family: 'Noto Sans Thai', 'Noto Sans Cuneiform', 'Noto Sans Egyptian Hieroglyphs',
                'Noto Sans Linear B', 'Noto Sans Gothic', 'Noto Sans Old Persian', 'Noto Sans Phoenician',
                'Noto Sans Runic', 'Noto Sans Ogham', 'Noto Sans Coptic', 'Noto Sans Avestan',
                'Noto Sans Ugaritic', 'Noto Sans Cypriot', 'Noto Sans Meroitic', 'Noto Sans Old Turkic',
                'Noto Sans Glagolitic', 'Noto Sans Anatolian Hieroglyphs', 'Noto Sans Carian',
                'Noto Sans Lycian', 'Noto Sans Lydian', 'Noto Sans Old South Arabian', 'Noto Sans Sogdian',
                -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 14px;
            user-select: none; -webkit-user-select: none;
            overscroll-behavior-y: none;
            /* 🐞 Chrome: overflow-x:hidden ทำให้แกน y กลายเป็น auto → html และ body เป็นกล่องเลื่อนซ้อนกัน 2 ชั้น
               ลูกกลิ้งเมาส์บางจังหวะไปผูกกับ body (ที่เลื่อนเองไม่ได้) หน้าเลยไม่เลื่อน — Safari ไม่เป็น
               ใช้ clip แทน: ตัดส่วนล้นแนวนอนเหมือนเดิมแต่ไม่สร้างกล่องเลื่อน หน้าต่างหลักเป็นตัวเลื่อนตัวเดียว 🐞 */
            overflow-x: hidden;
            overflow-x: clip;
            /* 🐞 มือถือ: ล็อก document ไว้เต็มจอแบบ VOX — #app-container เป็นตัวเลื่อนแทน (ดูตัวแปลงใน <head>)
               Safari จะไม่ยุบ/กางแถบเครื่องมือตามการเลื่อน เมนูบาร์ล่างจึงนิ่ง และหน้าเว็บเต็มจอใต้รอยบาก/Dynamic Island */
            height: 100%;
            overflow-y: hidden;
            overscroll-behavior: none;
        }

        /* 🌟 ป้องกันการซูมบน iOS โดยบังคับ font-size 16px สำหรับ input 🌟 */
        @media screen and (max-width: 768px) {
            input, textarea, select { font-size: 16px !important; }
        }

        /* ไม่มีแถบเลื่อนทุกที่ (รวมแถบขาวบางๆ ด้านขวาของหน้าบน iPhone) — Safari/Chrome ใช้ ::-webkit-scrollbar, Safari 18.2+/Firefox ใช้ scrollbar-width */
        html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
        ::-webkit-scrollbar, html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; background: transparent; -webkit-appearance: none; }
        
        input, textarea { 
            user-select: auto; -webkit-user-select: auto; font-family: inherit; 
            -webkit-touch-callout: default; 
        }

        img, video {
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
        }

        /* 🐞 บั๊กที่แจ้ง (แก้ทั้งสถาปัตยกรรม): ของเดิม #app-container เป็น position:fixed + .app-view
           เป็น position:absolute เลื่อนเนื้อหาข้างในตัวเอง (overflow-y:auto) — body/html จริงๆ แทบไม่
           เลื่อนเลย (ปลอมแค่ 1px ผ่าน scrollTo(0,1)) ผลคือ Safari ตรวจไม่พบว่าหน้าเว็บ "เลื่อนได้จริง"
           เต็มรูปแบบ เลยยุบแถบที่อยู่/แถบเครื่องมือได้แค่ครึ่งเดียว (เหลือแคปซูลทึบ) ไม่ยุบจนโปร่งใสลอย
           ทับเนื้อหาแบบเว็บอื่นในเครือ (ATLX ฯลฯ ที่ปล่อยให้ body เลื่อนจริงตามปกติ) — เปลี่ยนให้ body
           เป็นตัวเลื่อนจริงแทน: #app-container กลับเป็น flow ปกติ (ไม่ fixed/ไม่ hidden), .app-view
           ไม่ absolute/ไม่มี overflow-y:auto ของตัวเองอีกต่อไป ปล่อยให้ไหลตาม document แล้วให้ window
           เลื่อนจริง — ตำแหน่งเลื่อนของแต่ละหน้าที่เคยติดอยู่กับ div เดิมเองอัตโนมัติ ตอนนี้ switchView()
           เก็บ/คืนค่าให้แทน (ดู window._appViewScrollY) จุดที่เคยอ้าง .app-view.scrollTop/scrollTo ตรงๆ
           (ระบบดึงลงรีเฟรช, infinite scroll ฟีด, ปุ่มโฮมเลื่อนขึ้นบนสุด, รีเซ็ตสกรอลแผงแอดมิน) แก้ให้ใช้
           window แทนหมดแล้ว — ดู [[project_hqux_full_page_scroll]] 🌟 */
        /* 🐞 เปลี่ยนอีกรอบ (แบบ VOX): #app-container คลุมเต็มจอจริง (รวมใต้รอยบาก/แถบ home) และเป็นตัวเลื่อน
           ตัวเดียวของเว็บ — document ไม่เลื่อน Safari เลยไม่ยุบ/กางแถบตามการเลื่อน เมนูบาร์ fixed ด้านล่างนิ่งสนิท */
        #app-container {
            position: fixed; inset: 0;
            overflow-x: hidden; overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
        }
        /* ป๊อปอัปเปิดอยู่ (body.style.overflow='hidden' / lockBodyScroll) → หน้าหลังเลื่อนไม่ได้ */
        #app-container.hq-scroll-locked { overflow-y: hidden; }
        /* แท็บเบราว์เซอร์มือถือ (html.hq-root-scroll ตั้งใน <head>): document เป็นตัวเลื่อน — เนื้อหาลอดใต้
           Dynamic Island/แถบเครื่องมือของ Safari ได้ #app-container กลับเป็น flow ปกติ */
        html.hq-root-scroll, html.hq-root-scroll body { height: auto !important; overflow-y: visible !important; }
        html.hq-root-scroll #app-container { position: relative; inset: auto; overflow: visible; }
        /* 🐞 Safari 26 ตัด element position:fixed ไว้แค่ช่วงระหว่างแถบสถานะกับแถบที่อยู่ (ติดลบก็ไม่ลอด) ใต้แถบที่อยู่เลยเป็น
           สีดำของ html แทนที่จะเป็นหน้าเว็บ — ชั้นเต็มจอที่เป็น "พื้นของหน้า" (หน้าเข้าสู่ระบบ, พื้นไล่เฉดฟีด, พื้นหลังโปรไฟล์)
           จึงต้องไหลตาม document ในโหมดแท็บ และหน้าต้องสูงอย่างน้อย 100lvh (เต็มจอตอนแถบยุบ) ให้มีเนื้อหาอยู่ใต้แถบเสมอ 🐞 */
        html.hq-root-scroll .app-view.active { min-height: 100lvh !important; }   /* !important: ชนะ #view-feed{min-height:100dvh} ฯลฯ */
        /* หน้าเข้าสู่ระบบ: พื้นดำยาวถึงใต้แถบที่อยู่ แต่ปุ่ม/ช่องกรอกอยู่เหนือแถบเสมอ (เว้นล่างเพิ่มเท่าความสูงแถบ = 100lvh - 100svh) */
        html.hq-root-scroll .hqa-screen { position: relative; inset: auto; min-height: 100lvh; overflow: visible;
            padding-bottom: calc(env(safe-area-inset-bottom) + 84px + 100lvh - 100svh); }
        /* รูปพื้นหลังโปรไฟล์: sticky แทน fixed — ยังนิ่งอยู่กับจอตอนเลื่อนเหมือนเดิม แต่เป็นส่วนหนึ่ง
           ของหน้าเว็บ จึงสูงเต็ม 100lvh ลอดใต้แถบที่อยู่ได้ (margin ติดลบเท่าความสูง = ไม่ดันเนื้อหาลง) */
        html.hq-root-scroll #profile-bg-layer { position: sticky; inset: auto; top: 0;
            height: 100lvh; margin-bottom: -100lvh; z-index: -1; pointer-events: none; }   /* -1: ใต้เนื้อหาทั้งหมดใน .app-view (ซึ่งเป็น stacking context z10) แต่เหนือพื้นของ view */
        html.hq-root-scroll #profile-bg-layer > div { position: absolute !important; inset: 0 !important; }
        /* 🐞 หน้าฟีดบนมือถือ (แท็บเบราว์เซอร์) ต้องเป็นสีเดียว 100% — ไล่เฉด/แสงนุ่มเดิมทำให้เห็นรอยตัดตอนเลื่อน และขอบบน
           ดูเหมือนมีฟิลเตอร์ทับ จึงปิดชั้นตกแต่งทิ้ง พื้นทั้งหน้า + html (สีที่ Safari ถมใต้แถบ/เลยท้ายหน้า) = #141414 เท่ากันหมด */
        html.hq-root-scroll #feed-bg-fx { display: none; }
        html.hq-root-scroll #view-feed { background: #141414; }
        /* Safari 26 สุ่มสีจาก element fixed ที่อยู่กลางขอบล่างในระยะ ~4px — เมนูบาร์ต้องห่างขอบพอ ไม่งั้นแถบล่างถูกถมสีเมนู */
        /* 🐞 เมนูบาร์ไม่อยู่กับที่ (ลอยกลางจอ/ขยับขึ้นลงตามหน้า) — เดิมยึดขอบล่าง (ขยับตามแถบ Safari และตาม "ท้ายหน้าเว็บ"
           ในบัค iOS 26 แอปหน้าจอหลัก) หรือใช้ JS วัดตำแหน่งตอนโหลดแล้วยึดเป็น px (วัดพลาดได้ถ้าจอยังไม่นิ่ง)
           → ยึดจากขอบบนด้วยหน่วยจอเล็กสุด 100svh (ค่าคงที่ ไม่เปลี่ยนตามแถบเครื่องมือ/ความยาวหน้า) ลบความสูงเมนูบาร์
           ที่วัดจากตัวมันเอง (--hq-nav-h) — ไม่ต้องวัดตำแหน่งบนจอเลย ตำแหน่งจึงนิ่งทุกโหมด */
        html.hq-root-scroll .bottom-nav-container {
            bottom: auto !important;
            top: calc(100svh - var(--hq-nav-h, 54px) - max(var(--nav-safe-bottom, 8px), 8px));
        }
        /* 📱 iOS Safari: แถบชื่อเว็บด้านล่างหุบเป็นแคปซูลเล็กตอนเลื่อนลง → เมนูบาร์เลื่อนลงตามไปอยู่เหนือแคปซูลนั้น (ขนาดเท่าเดิม)
           (hq-bar-min ตั้งโดย JS) แถบกางกลับ = กลับตำแหน่งเดิม · เคลื่อนนุ่มๆ
           🐞 รอบก่อนคิดตำแหน่งจากความสูงจอ → เลยขอบล่างของพื้นที่หน้าเว็บ เมนูหายไปเลย
              → เลื่อนลง "จากตำแหน่งเดิม" เป็นระยะคงที่ (--hq-min-drop = ระยะที่แถบชื่อเว็บหุบลงไป) ไม่พึ่งความสูงจอ */
        html.hq-root-scroll:not(.hq-standalone) .bottom-nav-container {
            transition: top 0.36s cubic-bezier(0.32, 0.72, 0, 1);   /* จังหวะใกล้เคียงแถบของ Safari (สปริงนุ่ม เร็วช่วงต้น) */
        }
        html.hq-root-scroll.hq-bar-min:not(.hq-standalone) .bottom-nav-container {
            top: calc(100svh - var(--hq-nav-h, 54px) - max(var(--nav-safe-bottom, 8px), 8px) + var(--hq-min-drop, 40px));
        }
        /* เบราว์เซอร์รายงานขนาดจริง (hq-bar-live): ยึดกับขอบล่างของพื้นที่หน้าเว็บ → ขยับไปพร้อมแถบชื่อเว็บเองทุกเฟรม ไม่ถูกตัดขอบ */
        html.hq-root-scroll.hq-bar-live:not(.hq-standalone) .bottom-nav-container {
            top: auto !important; bottom: var(--hq-nav-bottom, 8px) !important;
            transition: bottom 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        }
        /* แอปหน้าจอหลัก: ไม่มีแถบเครื่องมือยุบ/กาง แต่ iOS 26 รายงาน 100svh สั้นไปเท่าแถบสถานะ (เมนูลอยสูงเกิน)
           → กลับไปยึดขอบล่างแบบเดิม (ชิดขอบล่างจริง) */
        html.hq-standalone.hq-root-scroll .bottom-nav-container {
            top: auto !important;
            bottom: max(var(--nav-safe-bottom, 0.6%), 8px) !important;
        }
        /* 📎 เบราว์เซอร์ในแอปอื่นบน iPhone (hq-inapp — Instagram ฯลฯ): ยึดขอบล่าง เมนูบาร์ไม่ขยับตอนแถบบนของแอปนั้นหุบ/กาง
           (ไม่กระทบ Safari / Chrome / แอปหน้าจอหลัก / คอม — คลาสนี้ติดเฉพาะเบราว์เซอร์ในแอป) */
        html.hq-inapp.hq-root-scroll .bottom-nav-container {
            top: auto !important;
            bottom: max(var(--nav-safe-bottom, 0.6%), 8px) !important;
            transition: none;
        }
        /* ป๊อปอัปล็อกการเลื่อนด้วย body.style.overflow='hidden' → ล็อกที่ html (ตัวเลื่อนจริง) ด้วย */
        html.hq-root-scroll:has(body[style*="overflow: hidden"]), html.hq-root-scroll.hq-locked { overflow-y: hidden !important; }
        /* แอปหน้าจอหลัก: หน้าสูงพอถึงขอบล่างจริงของจอ (ช่วงที่ขาดวัดไว้ใน --hq-sa-gap ใน <head>) */
        html.hq-standalone.hq-root-scroll .app-view.active { min-height: calc(100lvh + var(--hq-sa-gap, 0px)) !important; }
        /* 🐞 iOS 26 แอปหน้าจอหลัก: เปิดครั้งแรกถ้าหน้าเว็บสั้นกว่าจอ (ช่วงหน้าโลโก้) iOS ยึดชั้น fixed ไว้ที่ท้ายหน้าเว็บ
           ซึ่งสั้นกว่าจอเท่าแถบสถานะ → เมนูบาร์ลอยสูง · ให้ html/body สูงเต็มจอตั้งแต่แรก (100lvh = เต็มจอจริงในโหมดนี้) */
        html.hq-standalone, html.hq-standalone body { min-height: 100lvh; }
        /* แผ่นพื้นมืด/เบลอของ pop up ในตัวหน้าเว็บ (ดู hqOverlayVeil) — ลอดใต้แถบ Safari ได้ */
        .hq-overlay-veil { position: absolute; pointer-events: none; }
        html.hq-root-scroll.hq-veil-lock { overflow-y: hidden !important; }

        .app-view {
            background-color: var(--bg-color);
            display: none; z-index: 1;
        }
        /* 🌟 min-height: 100dvh (ไม่ใช่ 100%) — เผื่อเป็นพื้นตั้งต้นให้หน้าที่ไม่ได้กำหนด min-height ของ
           ตัวเองไว้ (ส่วนใหญ่กำหนดเองอยู่แล้วเช่น #view-feed{min-height:100vh}) ใช้ % ไม่ได้ผลจริงเพราะ
           #app-container/body ไม่มี height ตายตัวให้ % อ้างอิง (มีแต่ min-height) 🌟 */
        .app-view.active { display: block; position: relative; z-index: 10; min-height: 100dvh; }

        /* ── LOADING SCREEN ── */
        #view-loading { background-color: #000; align-items: center; justify-content: center; z-index: 10000; }
        #view-loading.active { display: flex; }
        /* ตัวอักษร HQUX ด้านล่างหน้าโหลด — แบบเดียวกับหน้าเข้าสู่ระบบ (absolute ในหน้า ไม่ใช่ fixed: Safari 26 เอาสีชั้น fixed ขอบจอไปทาแถบ) */
        #view-loading { position: relative; min-height: 100vh; min-height: 100dvh; }
        /* 🐞 HQUX ไม่ขึ้นพร้อมโลโก้ (IMG_3872): ช่วงแรกจอเป็นชั้นภาพเปิด #hq-boot ที่มีแต่โลโก้ → ใส่ HQUX ในชั้นนั้นด้วย
           ตำแหน่งวัดจากด้านบนด้วยความสูงจอที่จำไว้ตอนเริ่ม (--hq-boot-vh) เหมือนกันทั้งสองชั้น — สลับชั้นแล้วไม่ขยับ */
        .loading-brand { position: absolute; left: 0; right: 0; top: calc(var(--hq-boot-vh, 100dvh) * 0.9 - env(safe-area-inset-bottom) - 14px); text-align: center;
            font-size: 11px; line-height: 14px; letter-spacing: .25em; color: #555; font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }   /* ขึ้นพร้อมโลโก้ทันที (ไม่จางเข้า/ไม่หน่วง) */
        .loading-logo-wrap { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
            position: absolute; left: 50%; top: calc(var(--hq-boot-lvh, 100lvh) * 0.5 - var(--hq-boot-vh, 100dvh) * 0.05 - 40px); transform: translateX(-50%); }
            /* โลโก้หน้าโหลด สูงกว่ากึ่งกลางจอ 5% ของความสูงจอ — ใช้ความสูงที่จำไว้ตอนเริ่ม (--hq-boot-lvh/vh) ไม่ขยับตามจอที่เปลี่ยนระหว่างโหลด */
        .loading-logo-wrap img { width: 100%; height: auto; display: block; transition: opacity 0.5s ease; }
        /* 🌟 กระพริบแบบ "หายใจ" (จาง-เข้ม) เหมือนโลโก้ Apple ตอนบูตเครื่อง — ไม่ใช่โผล่-หายแบบกระพริบ
           ปกติ (เดิมจาง opacity ลงไปถึง 0.3 ซึ่งจางจนดูเหมือนหายไปเลย บนพื้นดำยิ่งเห็นชัด) ปรับให้จาง
           ลงแค่พอสังเกตได้ (0.55) ไม่ถึงกับหาย และใช้เส้นโค้ง cubic-bezier แบบนุ่มนวลสมมาตรแทน
           ease-in-out ธรรมดา ให้จังหวะจาง-เข้มลื่นไหลเหมือนการหายใจจริงๆ — เริ่มกระพริบก็ต่อเมื่อโหลด
           นานเกิน 2 วิเท่านั้น (ดู slowLoadTimer ด้านล่าง) ตามที่แจ้ง
           🐞 ตั้งชื่อ @keyframes ว่า "blink" เฉยๆ ไปชนกับ @keyframes blink อีกตัวที่มาจาก start.html
           (จุดกระพริบข้าง "HQUX" — กระพริบแบบโผล่-หายสนิท opacity 1→0 เต็มๆ) เพราะ @keyframes ไม่ได้
           ผูกกับ selector ชื่อซ้ำกันตัวที่มาทีหลังใน DOM จะไปทับตัวก่อนหน้าทั้งหมดในหน้าเดียวกัน ทำให้
           โลโก้หน้าโหลดนี้ดันไปใช้คีย์เฟรมของจุดกระพริบ (หายไปเลย) แทนที่จะเป็นแบบหายใจของตัวเอง ตั้งชื่อ
           เฉพาะเจาะจงกันชนแทน 🌟 */
        .slow-load img { animation: hquxLoadingBreathe 2.4s infinite cubic-bezier(0.45, 0, 0.55, 1); }
        /* 🐞 เดิมโลโก้จางกระพริบได้เฉพาะเมื่อเช็คล็อกอินช้าเกิน 2 วิ (ตัวจับเวลาถูกยกเลิกทันทีที่เช็คเสร็จ) — เปิดลิงก์
           โปรไฟล์/โพสต์ตรงแล้วค้างหน้าโลโก้รอข้อมูลต่อ เลยไม่กระพริบเลย · ผูกกับหน้าโลโก้เองแทน: เปิดค้างเกิน 2 วิ
           เมื่อไหร่ก็เริ่มกระพริบ ไม่ว่าจะรออะไรอยู่ (สลับกลับมาหน้าโลโก้ใหม่ก็นับ 2 วิใหม่) */
        #view-loading.active .loading-logo-wrap img { animation: hquxLoadingBreathe 2.4s cubic-bezier(0.45, 0, 0.55, 1) 2s infinite; }
        @keyframes hquxLoadingBreathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

        #toast {
            position: fixed; top: -100px; left: 50%; transform: translateX(-50%); background: var(--surface-color); color: var(--text-primary);
            padding: 10px 20px; border-radius: 30px; font-size: 13px; font-weight: 500; border: 1px solid var(--border-color);
            z-index: 2147483647; transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); white-space: nowrap;
        }
        #toast.show { top: max(20px, env(safe-area-inset-top)); }

        /* ── MINIMALIST LOGIN PROMPT CAPSULE ── */
        #login-prompt-capsule {
            position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%);
            background: rgba(15, 15, 15, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.1); border-radius: 50px;
            padding: 8px 12px 8px 20px; display: flex; align-items: center; gap: 15px;
            z-index: 2147483647; transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            pointer-events: none; opacity: 0;
        }
        #login-prompt-capsule.show { bottom: max(80px, calc(env(safe-area-inset-bottom) + 80px)); pointer-events: auto; opacity: 1; }
        .lpc-text { color: rgba(255,255,255,0.9); font-size: 13px; font-weight: 500; white-space: nowrap; }
        .lpc-btn {
            background: #fff; color: #000; border: none; border-radius: 30px;
            padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; transition: 0.2s;
        }
        .lpc-btn:active { transform: scale(0.95); }

        /* ==========================================
           2. BOTTOM NAVIGATION — Glass Morphism Dark
           ตามดีไซน์ IMG_5608: พื้นกระจกเข้ม ขอบเรืองแสงบาง active ขยายเป็นวงรีใหญ่
        ========================================== */
        .bottom-nav-container {
            /* 🐞 บั๊ก — เดิมใช้ env(safe-area-inset-bottom, 1.2%) * 0.5 - 0.1% ตรงๆ ใน CSS ทั้งก้อน คิดว่า
               "1.2%" จะเป็น fallback ตอนไม่มีแถบนำทาง แต่จริงๆ เบราว์เซอร์ทุกตัวที่รองรับ env() (รวมคอม/
               เดสก์ท็อปด้วย) จะได้ค่าจริงคือ 0px เสมอ ไม่ใช้ fallback เลย (fallback ใช้เฉพาะเบราว์เซอร์ที่
               ไม่รู้จัก env() เท่านั้น) สูตรเลยกลายเป็น 0*0.5-0.1% = ค่าติดลบบนคอม ทำให้แถบมุดต่ำกว่าขอบจอ
               จริง (ดูเหมือนชิดขอบเกิน) ตามที่แจ้ง — แก้ด้วย JS วัดค่า safe-area-inset-bottom จริงแยกต่างหาก
               (ดู IIFE ท้ายไฟล์) ถ้าเป็น 0 (คอม/ไม่มีแถบนำทาง) จะไม่ตั้งตัวแปรเลย ปล่อยให้ CSS ใช้ 0.6%
               เดิมเป๊ะๆ ถ้ามีค่าจริง (iOS ที่มีแถบนำทาง) ค่อยคำนวณสูตรที่ปรับจูนไว้ (ครึ่งหนึ่งลบ 0.1% ของ
               ความสูงจอ) แล้วตั้งเป็นตัวแปรให้ CSS ใช้แทน 🌟 */
            position: fixed; bottom: var(--nav-safe-bottom, 0.6%);
            left: 50%; transform: translateX(-50%);
            display: flex; align-items: center; gap: 8px;
            z-index: 9000; width: max-content;
            opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
        }
        .bottom-nav-container.visible { opacity: 1; pointer-events: auto; }
        /* 🐞 จอสัมผัส: แตะปุ่มเมนูบาร์พลาดนิดเดียวก็ไปโดนเนื้อหาข้างหลังแทน → ขอบสัมผัสล่องหนรอบเมนูบาร์ (ขนาดที่เห็นเท่าเดิม)
           แตะในขอบนี้/ช่องว่างระหว่างปุ่ม = ไม่ทะลุไปข้างหลัง และส่งต่อให้ปุ่มที่ใกล้จุดแตะที่สุด (hqNavHitAssist)
           เฉพาะมือถือ/จอสัมผัส (html.hq-root-scroll) — คอมใช้เมาส์แม่นอยู่แล้ว ไม่เปลี่ยน */
        html.hq-root-scroll .bottom-nav-container::before { content: ''; position: absolute; inset: -16px -18px; z-index: -1; }
        /* 🐞 เปิดลิงก์โปรไฟล์/โพสต์ตรงๆ (เช่น /ppxj) — ระหว่างค้างหน้าโลโก้รอข้อมูล เมนูบาร์ถูกสั่งให้โชว์ไปก่อนแล้ว
           ขึ้นมาทับหน้าโลโก้ · หน้าโลโก้เปิดอยู่ = ซ่อนเมนูบาร์เสมอ ไม่ว่าจุดไหนจะสั่งโชว์ (โผล่เองเมื่อสลับไปหน้าจริง) */
        body:has(#view-loading.active) .bottom-nav-container { opacity: 0 !important; pointer-events: none !important; transition: none; }
        /* หน้าสร้างบัญชีใหม่ / ลืมรหัสผ่าน (แผงใน start.html) — ไม่ต้องมีเมนูบาร์ (หน้าเข้าสู่ระบบยังมีตามเดิม) */
        body:has(#view-start.active #hqa-signup.active) .bottom-nav-container,
        body:has(#view-start.active #hqa-forgot.active) .bottom-nav-container { opacity: 0 !important; pointer-events: none !important; }
        /* 🌟 จางลง 60% (เหลือ opacity 0.4) เมื่อไม่แตะหน้าจอเกิน 5 วินาที — ยังกดใช้งานได้ปกติ
           (ไม่ตัด pointer-events) แค่จางลงให้ไม่บังเนื้อหา พอแตะจอกลับมาเข้มเต็มทันที 🌟 */
        .bottom-nav-container.visible.dimmed { opacity: 0.4; }

        .mnb-wrap {
            display: flex; align-items: center; gap: 12px;
            padding: 7px 14px; border-radius: 100px; position: relative;
            /* 🌟 แสงสะท้อนบางๆ ตามต้นแบบ — ไล่เฉดนิดเดียว (สว่างกว่าด้านล่างแค่ ~8%) ไม่มีเงานูน/ขอบเรือง
               แบบที่เคยทำไปก่อนหน้านี้ (ถูกทักว่า 3D เกินไป) แค่ให้พอมีมิติจางๆ ไม่แบนสนิท 🌟 */
            background: linear-gradient(120deg, rgba(54, 54, 58, 0.7) 0%, rgba(34, 34, 37, 0.63) 45%, rgba(24, 24, 26, 0.6) 100%);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        }

        /* 🌟 จุดโฟกัส — ก้อนเดียวที่สไลด์เลื่อนไปหาไอคอนที่กำลัง active แทนการเปลี่ยนพื้นหลังทีละปุ่ม
           ทรงสี่เหลี่ยมมุมมนแบบ squircle ไม่ใช่วงกลมกลมๆ ตามที่แจ้ง ขยับด้วย transform (ลื่นกว่าขยับ left)
           ตำแหน่ง/ขนาดคำนวณจาก JS (ดูฟังก์ชัน positionNavIndicator ใน initApp) 🌟 */
        .mnb-indicator {
            position: absolute; top: 0; left: 0; width: 38px; height: 38px;
            /* 🌟 แคปซูล (stadium shape) — ปลายมนเต็มสองข้าง กว้างกว่าตัวไอคอนเอง ไม่ใช่สี่เหลี่ยมจัตุรัส
               มุมมนแบบเดิม border-radius สูงเกินครึ่งความสูงการันตีปลายกลมเต็มเสมอไม่ว่าจะกว้างแค่ไหน 🌟 */
            border-radius: 999px; background: rgba(255, 255, 255, 0.16);
            transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                        width 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
            opacity: 0; pointer-events: none; z-index: 0;
        }

        .mnb-item {
            display: flex; align-items: center; justify-content: center;
            width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
            transition: transform 0.3s ease; position: relative; z-index: 1;
        }
        .mnb-item:active { transform: scale(0.85); }
        .mnb-item.active-menu:active { transform: scale(0.9); }
        .mnb-item svg { color: rgba(255,255,255,0.38); transition: 0.3s; display: block; }
        .mnb-item.active-menu svg { color: rgba(255,255,255,0.92); }

        /* ไอคอนแบบ Grid (App Icon) */
        .app-grid-icon { color: rgba(255,255,255,0.38); transition: 0.3s; display: flex; align-items: center; justify-content: center; }
        .active-menu .app-grid-icon { color: rgba(255,255,255,0.92); }

        /* 🌟 กล่องไอคอนเมนูบาร์ — คุมขนาด/สี/จัดกลางที่กล่องนี้จุดเดียว ใช้ได้ทั้งกับ SVG และไอคอนฟอนต์ (bx/ph)
           สีไม่ขาวจัดตามที่แจ้ง — ปุ่มปกติหรี่ลงเหลือ ~38% ส่วน active สว่างขึ้นแต่ไม่ขาวจัด (92%) 🌟 */
        .mnb-icon { display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; color: rgba(255,255,255,0.38); transition: 0.3s; }
        .mnb-icon svg { display: block; }
        .active-menu .mnb-icon { color: rgba(255,255,255,0.92); }
        /* 🌟 สีปุ่มค้นหาตอนยังไม่ focus ให้เสียงเดียวกับไอคอนอื่นในเมนูบาร์ (0.38) แทนสีขาวจัด 0.9 เดิม 🌟 */
        .mnb-search-trigger .mnb-icon { position: absolute; color: rgba(255,255,255,0.38); }

        /* 🌟 ปุ่มค้นหา (ขวา) + ปุ่มเล่นเสียงโปรไฟล์ (ซ้าย) — วางแบบ absolute ข้างเมนูบาร์หลัก ไม่นับเป็น
           สมาชิก flex ของ .bottom-nav-container เมนูบาร์หลัก (#mnb) จึงอยู่กึ่งกลางจอเป๊ะเสมอ ไม่ว่าปุ่ม
           พวกนี้จะโผล่มาหรือหายไป — เอฟเฟกต์เด้ง (pop) ตอนโผล่มาและตอนหายไป 🌟 */
        #mnb-search-btn.mnb-search-trigger,
        #mnb-audio-btn.mnb-app-standalone {
            position: absolute; top: 50%;
            opacity: 0; visibility: hidden; pointer-events: none;
            transform: translateY(-50%) scale(0);
            transition: opacity 0.16s ease,
                        transform 0.24s cubic-bezier(0.5, -0.4, 0.7, 0.3),
                        visibility 0s linear 0.24s;
        }
        #mnb-search-btn.mnb-search-trigger { left: 100%; margin-left: 8px; }
        #mnb-audio-btn.mnb-app-standalone { right: 100%; margin-right: 8px; }

        body.search-revealed #mnb-search-btn.mnb-search-trigger,
        #mnb-audio-btn.mnb-app-standalone.mnb-visible {
            opacity: 1; visibility: visible; pointer-events: auto;
            transform: translateY(-50%) scale(1);
            transition: opacity 0.14s ease,
                        transform 0.4s cubic-bezier(0.34, 1.7, 0.5, 1),
                        visibility 0s;
        }
        #mnb-search-btn.mnb-search-trigger:active,
        #mnb-audio-btn.mnb-app-standalone:active { transform: translateY(-50%) scale(0.88); }

        /* 🌟 อนิเมชันหมุนสำหรับไอคอนโหลด Phosphor (ph-circle-notch) แทน bx-spin ของ Boxicons เดิม —
           ใช้ร่วมกับหน้าตั้งค่าบัญชี/แผงแอดมินที่เปลี่ยนไอคอนทั้งหมดเป็นธีมเดียวกับเมนูบาร์แล้ว 🌟 */
        @keyframes ph-spin-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .ph-spin { display: inline-block; animation: ph-spin-rotate 1s linear infinite; }

        .notif-badge {
            position: absolute; top: 0px; right: 0px; 
            background-color: #ED4956; color: #fff; font-size: 10px; font-weight: 700;
            min-width: 16px; height: 16px; border-radius: 50%; 
            display: flex; align-items: center; justify-content: center;
            padding: 0 3px; line-height: 1; border: 2px solid rgba(20, 20, 20, 0.95); 
            animation: popIn 0.3s;
        }

        /* 🌟 ปุ่มแอป (Standalone) เมื่อล็อกอินแล้ว 🌟 */
        .mnb-app-standalone, .mnb-search-trigger, .mnb-other-profile-trigger, .mnb-admin-trigger, .mnb-subapp-btn {
            width: 48px; height: 48px; border-radius: 50%;
            /* 🌟 แสงสะท้อนบางๆ เหมือนกับเมนูบาร์หลัก (.mnb-wrap) เพื่อความสม่ำเสมอ 🌟 */
            background: linear-gradient(120deg, rgba(54, 54, 58, 0.7) 0%, rgba(34, 34, 37, 0.63) 45%, rgba(24, 24, 26, 0.6) 100%);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; flex-shrink: 0; transition: background 0.3s ease, transform 0.3s ease; position: relative;
            color: var(--text-primary);
        }
        .mnb-app-standalone:active, .mnb-search-trigger:active, .mnb-other-profile-trigger:active, .mnb-admin-trigger:active, .mnb-subapp-btn:active { transform: scale(0.88); }
        .mnb-subapp-btn i { font-size: 22px; font-weight: 300; color: rgba(255,255,255,0.9); }
        #mnb-subapp-archive-btn i {
            position: absolute; font-size: 22px; font-weight: 300;
            color: rgba(255,255,255,0.9); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .icon-archive { opacity: 1; transform: scale(1) rotate(0deg); }
        .icon-archive-close { opacity: 0; transform: scale(0.5) rotate(-90deg); }
        #mnb-subapp-archive-btn.active-menu .icon-archive { opacity: 0; transform: scale(0.5) rotate(90deg); }
        #mnb-subapp-archive-btn.active-menu .icon-archive-close { opacity: 1; transform: scale(1) rotate(0deg); font-size: 26px; }
        #mnb-subapp-archive-btn.active-menu { background: rgba(255,255,255,0.10); }

        .mnb-app-standalone.active-menu, .mnb-search-trigger.active-menu, .mnb-other-profile-trigger.active-menu, .mnb-admin-trigger.active-menu {
            background: rgba(255, 255, 255, 0.16);
        }

        /* 🌟 ปุ่มค้นหา — ไม่เปลี่ยนไอคอนเป็นกากบาทแล้วตามที่แจ้ง คงเป็นไอคอนค้นหาปกติเสมอ แค่สว่างขึ้น
           (โฟกัส) ตอนเปิดอยู่ เหมือนปุ่มอื่นในเมนูบาร์ตอน active แล้วหรี่กลับตอนปิด 🌟 */
        .mnb-search-trigger.active-search .mnb-icon { color: rgba(255,255,255,0.92); }

        .mnb-other-profile-trigger { display: none; opacity: 0; transform: scale(0.8); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 0; background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
        .mnb-other-profile-trigger.visible { display: flex; opacity: 1; transform: scale(1); }
        .mnb-other-profile-trigger i { font-size: 24px; font-weight: 300; color: rgba(255,255,255,0.9); transition: 0.3s; }

        /* วงแหวนรอบรูปโปรไฟล์ในเมนูบาร์ — วงแหวนสีเดียวกับพื้นเมนูบาร์ ช่องว่างโปร่งใสจริง (ทะลุพื้นหลัง) รูปเต็มวงแหวน */
        .mnb-op-ring { position: relative; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .mnb-op-ring::before {
            content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 8px; pointer-events: none;
            background: rgba(15, 15, 15, 0.9); /* สีเดียวกับพื้นเมนูบาร์ */
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude;
        }
        .mnb-op-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; border: 1.5px solid rgba(255,255,255,0.6); box-sizing: content-box; }

        /* กลุ่มโปรไฟล์อื่นล่าสุด (สูงสุด 3) — แสดงในโหมดโปรไฟล์อื่น */
        .mnb-op-group { display: none; align-items: center; gap: 8px; }
        .mnb-op-group.visible { display: flex; }
        .mnb-op-item { cursor: pointer; transition: transform 0.2s, opacity 0.2s; flex-shrink: 0; }
        .mnb-op-item:active { transform: scale(0.88); }
        .mnb-op-item:not(.active-op) { opacity: 0.5; }

        .mnb-admin-trigger i { font-size: 22px; font-weight: 300; color: #f5a623; transition: 0.3s; }
        .mnb-admin-trigger.active-menu i { font-weight: 400; color: #fff; }
        .mnb-other-profile-trigger.active-menu i { color: #fff; font-weight: 400; }

        /* ==========================================
           3. SEARCH ISLAND & OVERLAY
        ========================================== */
        .dynamic-island-search {
            position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translate(-50%, -200%) scale(0.8); 
            width: 90%; max-width: 400px; background: rgba(15, 15, 15, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border-radius: 30px; padding: 10px 16px; z-index: 9500; display: flex; align-items: center; gap: 10px;
            border: 1px solid rgba(255,255,255,0.1); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
            opacity: 0; pointer-events: none;
        }
        .dynamic-island-search.active { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
        .di-input-wrap { flex: 1; display: flex; align-items: center; gap: 10px; }
        .di-input-wrap i { font-size: 20px; color: rgba(255,255,255,0.5); font-weight: 300;}
        .di-input-wrap input { flex: 1; background: none; border: none; color: #fff; font-size: 15px; outline: none; }
        .di-input-wrap input::placeholder { color: rgba(255,255,255,0.4); }

        /* 🐞 ต้นเหตุหลักที่ iPhone (Safari 26) ไม่เต็มจอ: Safari ระบายสีแถบสถานะ/แถบเครื่องมือจาก element
           position:fixed ที่แตะขอบจอ — นับแม้ opacity:0 ด้วย ชั้นค้นหานี้ (fixed เต็มจอ ดำ 85% + เบลอ) ค้างอยู่
           ตลอดทุกหน้า แถบบน/ล่างของ Safari เลยถูกถมดำทึบตลอดเวลา → ซ่อนด้วย display:none ตอนไม่ได้เปิด
           (.open = อยู่ในหน้า, .active = จางเข้า) 🐞 */
        .ios-search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 8999; opacity: 0; pointer-events: none; transition: 0.3s; display: none;
            overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
        .ios-search-overlay::-webkit-scrollbar { display: none; }
        .ios-search-overlay.open { display: block; }
        .ios-search-overlay.active { opacity: 1; pointer-events: auto; }
        .search-results-area { max-width: 600px; margin: 0 auto; padding: calc(max(10px, env(safe-area-inset-top)) + 66px) 15px 120px; width: 100%; }   /* 🐞 เดิม 80px ตายตัว — ช่องค้นหา (ใต้แถบสถานะ) ทับหัวข้อประวัติ */
        /* ผลค้นหาแบบรวม: บัญชี · ไฮไลต์ · โพสต์ (กริดเดียวกับหน้าฟีด) */
        .sr-section-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); letter-spacing: .5px; margin: 18px 4px 10px; }
        .sr-hl-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 0 2px 4px; margin: 0 -15px; padding-left: 15px; padding-right: 15px; }
        .sr-hl-row::-webkit-scrollbar { display: none; }
        .sr-hl-card { flex: 0 0 auto; width: 104px; cursor: pointer; }
        .sr-hl-cover { width: 104px; aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; background: #1c1c1e; position: relative; }
        .sr-hl-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        .sr-hl-title { font-size: 12px; font-weight: 600; color: #fff; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .sr-hl-sub { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #search-results-list .v2-masonry { padding: 0; max-width: none; }
        .sr-skel { border-radius: 20px; background: #1c1c1e; aspect-ratio: 4/5; animation: srPulse 1.2s ease-in-out infinite; }
        @keyframes srPulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
        
        .search-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: 0.2s; margin-bottom: 4px;}
        .search-item:hover { background: rgba(255,255,255,0.05); }
        .search-item-icon { width: 40px; height: 40px; border-radius: 50%; background: #333; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;}
        .search-item-icon img { width: 100%; height: 100%; object-fit: cover; }
        .search-item-info { flex: 1; }
        .search-item-title { font-size: 15px; font-weight: 600; color: #fff; }
        .search-item-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px;}

        /* Auth Modal */
        .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 10000; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
        .modal-content { background: #121212; padding: 25px; border-radius: 16px; width: 90%; max-width: 320px; text-align: center; border: 1px solid var(--border-color); animation: popIn 0.3s; }
        .modal-content h3 { font-size: 16px; margin-bottom: 8px; font-weight: 600; }
        .modal-btn-primary { background: #fff; color: #000; border: none; padding: 12px; width: 100%; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; margin-bottom: 10px;}
        .modal-btn-secondary { background: transparent; color: #fff; border: 1px solid var(--border-color); padding: 12px; width: 100%; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 14px;}
        /* ── MODERN CONTEXT MENU ── */
        .sys-context-menu {
            position: fixed; background: rgba(25, 25, 25, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 8px; z-index: 2000000;
            box-shadow: 0 15px 40px rgba(0,0,0,0.5); display: none; min-width: 200px;
            animation: menuFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        @keyframes menuFadeIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
        .scm-item {
            display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
            color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: 0.2s;
        }
        .scm-item:hover { background: rgba(255,255,255,0.08); }
        .scm-item i { font-size: 20px; color: #fff; opacity: 0.5; }
        .scm-item.danger { color: #ff453a; }
        .scm-item.danger i { color: #ff453a; opacity: 1; }
        .scm-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 6px 8px; }