:root {
        /* 🐞 บั๊กที่แจ้งซ้ำหลายรอบ: พื้นหลังหน้าฟีดไม่เต็มจอ (เห็นรอยต่อกับแถบ Safari) — เดิม #121212
           (เกือบดำแต่ไม่ดำสนิท) vs <meta name="theme-color"> เริ่มต้นของทั้งเว็บที่เป็น #000000 เป๊ะๆ
           ลองแก้ด้วยการสั่งเปลี่ยน theme-color ให้ตรงกันแบบไดนามิกไปแล้วรอบก่อน (ดู switchView():
           VIEW_THEME_COLORS) แต่ theme-color อาจปรับสีได้แค่ "แถบเครื่องมือ/ที่อยู่" ของ Safari เท่านั้น
           ไม่ใช่ "แถบสถานะ" ของ iOS เอง (นาฬิกา/แบต) ซึ่งเป็น chrome ของระบบปฏิบัติการ ไม่ใช่ของ Safari
           เว็บควบคุมไม่ได้เลยในโหมดแท็บปกติ (ควบคุมได้เฉพาะตอนเพิ่มไปหน้าจอโฮมเท่านั้น) — ทางแก้ที่
           รับประกันผลจริง ไม่ต้องพึ่งพฤติกรรม theme-color ที่ไม่แน่นอน คือเปลี่ยนพื้นหลังจริงของหน้าฟีด
           ให้เป็น #000000 เป๊ะๆ ตรงกับค่าเริ่มต้นไปเลย (จากที่ไล่ไล่ #feed-bg-fx ไล่เฉดไปทางดำสนิทอยู่
           แล้วที่ขอบนอกสุด เปลี่ยนสีพื้นฐานไม่ทำให้ดีไซน์เพี้ยนอะไร) 🌟 */
        --v2-bg: #000000;
        --v2-surface: #181818;
        --v2-surface-hover: #242424;
        --v2-text: #ffffff;
        --v2-subtext: #b3b3b3;
        --v2-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        --v2-ease: cubic-bezier(0.4, 0, 0.2, 1);
    }

    #view-feed {
        background: var(--v2-bg);
        color: var(--v2-text);
        /* 🐞 100vh บน Safari ใหญ่กว่าพื้นที่มองเห็นจริงตอนแถบเครื่องมือโผล่อยู่ — เดิมไม่มีผลเพราะ
           .app-view เคยบังคับความสูงตายตัวทับอยู่แล้ว ดู [[project_hqux_full_page_scroll]] 🌟 */
        min-height: 100vh; min-height: 100dvh;
        padding-bottom: 120px;
        padding-top: max(24px, env(safe-area-inset-top));
        font-family: 'Noto Sans Thai', 'Circular', 'Inter', -apple-system, sans-serif;
        overflow-x: hidden; overflow-x: clip;   /* clip ไม่ใช่ hidden: hidden ทำให้แกน y เป็น auto → หน้านี้กลายเป็นกล่องเลื่อนซ้อนใต้หน้าต่างหลัก ลูกกลิ้งใน Chrome ค้าง (ดู index.html) */
    }

    /* ══════════════════════════════════════════════════════
       🖤 Dark Gradient Background — ไล่เฉดดำ/เทาดำเข้ม แบบมีมิติ (นิ่ง ไม่เคลื่อนไหว)
       ══════════════════════════════════════════════════════ */
    #feed-bg-fx {
        position: fixed; inset: 0; z-index: 0; pointer-events: none;
        background:
            /* vignette ขอบจอเพิ่มความลึก */
            radial-gradient(135% 115% at 50% 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.72) 100%),
            /* แสงนุ่มด้านบน */
            radial-gradient(120% 78% at 50% -12%, #2c2c2c 0%, rgba(0,0,0,0) 46%),
            /* ไล่แสงมุมขวาบน */
            radial-gradient(90% 65% at 88% 8%, #202020 0%, rgba(0,0,0,0) 40%),
            /* ไล่แสงมุมซ้ายล่าง */
            radial-gradient(110% 80% at 8% 104%, #1c1c1c 0%, rgba(0,0,0,0) 52%),
            /* ฐานไล่เฉดทแยงมุม ดำ→เทาดำ */
            linear-gradient(157deg, #191919 0%, #101010 40%, #090909 70%, #040404 100%);
    }
    /* 🌟 วางเนื้อหาให้อยู่เหนือชั้นพื้นหลัง — ต้องตั้งที่ #view-feed-content (ไม่ใช่ #feed-container
       ที่ห่อทั้งตัวเนื้อหาและวงแหวน pull-to-refresh อยู่ด้วยกัน) เพราะถ้า #feed-container เป็น
       position:relative จะกลายเป็น containing block ของ .ptr-indicator (position:absolute) ไปด้วย
       ทำให้ top ของวงแหวนไปนับจากขอบบนของ #feed-container ที่ถูก padding-top ของ #view-feed
       (max(24px, safe-area)) ดันลงมาอีกที แทนที่จะนับจากขอบบนจริงของจอเหมือนหน้าโปรไฟล์
       (ที่ไม่มี padding-top แบบนี้) วงแหวนเลยไปโผล่ต่ำกว่าที่ควร ทับข้อความ "อันดับสูงสุด" 🌟 */
    #view-feed-content { position: relative; z-index: 1; }


    /* ── Typography & Headers ── */
    .v2-section {
        margin-top: 20px; /* ลดจาก 40px เหลือ 20px (ชิดขึ้น 50%) */
    }
    /* 🐞 บั๊กที่แจ้ง: เนื้อหาดูเหมือนถูกเว้นพื้นที่บนเกินจำเป็นจน "ล็อค" ไม่เต็มจอ — ต้นเหตุคือ
       margin-top: 20px ของ .v2-section ตัวแรก บวกซ้อนเพิ่มเข้าไปอีกชั้นบน padding-top (safe-area)
       ของ #view-feed ที่กันพื้นที่ Dynamic Island/สถานะไว้แล้วอยู่ก่อนแล้ว กลายเป็นช่องว่างรวมเกินจำเป็น —
       section แรกไม่ต้องมี margin-top ซ้ำอีก เพราะ padding-top ของพ่อทำหน้าที่เว้นระยะให้แล้ว 🌟 */
    #view-feed-content > .v2-section:first-child { margin-top: 0; }
    .v2-section-head { 
        padding: 0 20px; 
        margin-bottom: 10px; /* ลดจาก 20px เหลือ 10px */
        display: flex; flex-direction: column; 
    }
    .v2-subtitle { font-size: 13px; font-weight: 600; color: var(--v2-subtext); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
    .v2-title { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; }

    /* ── Elegant Podium (Levels) ── */
    .v2-podium-wrapper { 
        display: flex; justify-content: center; align-items: flex-end; 
        gap: 12px; 
        margin: 15px 0 15px; /* ลดระยะขอบบนล่างลงให้กระชับ */
        padding: 0 20px; height: 210px;
    }
    .v2-podium-col { 
        display: flex; flex-direction: column; align-items: center; 
        position: relative; cursor: pointer; transition: transform 0.2s var(--v2-ease);
    }
    .v2-podium-col:active { transform: scale(0.95); }
    .podium-1 { order: 2; z-index: 3; margin-bottom: 20px; } /* ลดจาก 30px เหลือ 20px */
    .podium-2 { order: 1; z-index: 2; }
    .podium-3 { order: 3; z-index: 1; }
    
    .v2-podium-av-wrap { 
        border-radius: 50%; position: relative; display: flex; 
        align-items: center; justify-content: center; 
        background: var(--v2-surface); padding: 6px; 
        box-shadow: none !important;
    }
    .podium-1 .v2-podium-av-wrap { width: 130px; height: 130px; background: linear-gradient(135deg, #FFD700, #FF8C00); }
    .podium-2 .v2-podium-av-wrap { width: 100px; height: 100px; background: linear-gradient(135deg, #C0C0C0, #808080); }
    .podium-3 .v2-podium-av-wrap { width: 100px; height: 100px; background: linear-gradient(135deg, #CD7F32, #8B4513); }
    
    .v2-podium-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: none; display: block; }
    /* ช่องว่างระหว่างรูปกับวงเหรียญ ใช้สีพื้นแทน (กันขอบขาวจางๆ) */
    .v2-podium-av-wrap { border: none; }
    
    .v2-podium-badge { 
        position: absolute; bottom: -8px; 
        background: var(--v2-bg); color: #fff; 
        width: 32px; height: 32px; border-radius: 50%; 
        display: flex; align-items: center; justify-content: center;
        font-size: 16px; font-weight: 800; border: 2px solid var(--v2-surface);
        z-index: 10; box-shadow: none !important;
    }
    .v2-podium-name { font-size: 15px; font-weight: 700; color: #fff; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; margin-top: 16px; }
    .v2-podium-stat { font-size: 12px; font-weight: 700; color: #fff; margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 2px; }
    .v2-podium-stat i { font-size: 13px; color: #fff; }

    /* ── Horizontal Scrolling Rows (Cards) ── */
    .v2-row {
        display: flex;
        overflow-x: auto;
        padding: 0 0 10px 0; /* ลดจาก 20px เหลือ 10px (กระชับกับ Section ถัดไป) */
        gap: 11px; /* ลดจาก 16px อีก ~30% ให้ชิดขึ้น */
        scrollbar-width: none;
        /* เลื่อนแบบลากลื่นๆ ไม่ดีดข้ามการ์ด (เอา scroll-snap ออก) */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        /* แกน y ต้อง hidden ชัดเจน (ไม่งั้นเบราว์เซอร์ตั้งเป็น auto ตาม overflow-x) — ถ้าเนื้อหาสูงเกินกรอบแม้ 1px
           แถวจะกลายเป็นกล่องเลื่อนแนวตั้ง Chrome ผูกลูกกลิ้งไว้ที่แถวแล้วหน้าเว็บไม่เลื่อน */
        overflow-y: hidden;
        width: 100%;
    }
    .v2-row::-webkit-scrollbar { display: none; }
    /* 🌟 ระหว่างโหลดครั้งแรก (ยังเป็น skeleton ว่างๆ อยู่) ปิดเลื่อนซ้าย-ขวาไว้ก่อน กันนิ้วลากแล้วค้าง
       เจอที่ว่างเปล่า ให้เลื่อนขึ้น-ลงหน้าปกติได้แทนตามที่แจ้ง (ดู loadHNextPage) 🌟 */
    .v2-row.loading { overflow-x: hidden; touch-action: pan-y; }

    .v2-card {
        box-sizing: border-box;
        flex-shrink: 0;
        width: 132px;
        max-width: 132px;
        display: flex; flex-direction: column; align-items: center; text-align: center;
        transition: transform 0.2s var(--v2-ease), background 0.2s var(--v2-ease); cursor: pointer;
        background: var(--v2-surface);
        padding: 18px 13px;
        border-radius: 26px;
        box-shadow: none !important;
        gap: 9px;
        overflow: hidden;
    }
    
    .v2-card:first-child {
        margin-left: 20px;
    }
    .v2-card:last-child {
        margin-right: 20px;
    }

    /* ไม่เปลี่ยนพื้นหลังตอน hover (กันขึ้นสีขาว/เทาตอนเอาเมาส์ชี้) */
    .v2-card:active { transform: scale(0.96); }
    
    .v2-card-img-wrap {
        width: 88px; height: 88px;
        border-radius: 50%;
        overflow: hidden;
        background: transparent;
        box-shadow: none !important; border: none !important;
        flex-shrink: 0;
    }
    .v2-img-el { width: 101%; height: 101%; object-fit: cover; border-radius: 50%; display: block; border: none; margin: -0.5%; }
    
    .v2-card-name-row {
        display: flex; align-items: center; justify-content: center; gap: 4px; 
        width: 100%; min-width: 0; 
    }
    .v2-card-badge-inline { 
        font-size: 13px; font-weight: 800; color: var(--v2-text); 
        flex-shrink: 0; 
    }
    .v2-card-name {
        font-size: 14px; font-weight: 700; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; color: var(--v2-text);
        min-width: 0;
    }
    .v2-card-stat { font-size: 12px; font-weight: 500; color: var(--v2-subtext); margin-top: 2px; }

    /* ── หมวด "เรื่องราว": การ์ดตัวอย่างสตอรี่ 4:5 เลื่อนไปทางขวาเหมือนแถวการ์ดโปรไฟล์ ── */
    .fd-story-row { align-items: stretch; }
    /* 🌟 ขนาดการ์ดเท่าช่องใน grid สตอรี่ของไฮไลต์เป๊ะ — คิดสูตรเดียวกัน:
          .sg-content มี padding ข้างละ 8px, .sg-grid กว้างสุด 600px แบ่ง 2 ช่อง gap 8px 🌟 */
    .fd-story-card {
        box-sizing: border-box; flex-shrink: 0;
        /* 🌟 เล็กลง 30% จากขนาดเดิม (ที่เท่าช่องกริดไฮไลต์) 🌟 */
        width: calc(((min(100vw - 16px, 600px) - 8px) / 2) * 0.7); aspect-ratio: 4 / 5;
        border-radius: 24px; overflow: hidden; position: relative;
        background: var(--v2-surface); cursor: pointer;
        transition: transform 0.2s var(--v2-ease);
    }
    .fd-story-card:first-child { margin-left: 20px; }
    .fd-story-card:last-child { margin-right: 20px; }
    .fd-story-card:active { transform: scale(0.96); }
    .fd-story-card .v2-skeleton { position: absolute; inset: 0; }

    /* ปกความละเอียดต่ำอยู่ชั้นล่าง ปกชัดทับทีหลัง — ไม่มีอนิเมชันเฟด ทับเนียน ๆ ไปเลย */
    .fd-story-ph, .fd-story-img {
        position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; display: block;
    }
    .fd-story-ph { filter: blur(14px); transform: scale(1.3); z-index: 1; }
    .fd-story-img { z-index: 2; }

    /* 🌟 การ์ดนี้ไม่ต้องมีกรอบขาวบอกสถานะ/ชื่อสตอรี่แล้ว — เอาแค่รูป/วิดีโอล้วน ๆ 🌟 */

    /* แคปซูล "กำลังติดตาม" ในการ์ด (กดเพื่อเลิกติดตาม) */
    .fd-follow-cap {
        border: none; cursor: pointer; font-family: inherit;
        font-size: 11px; font-weight: 700; color: #fff;
        background: rgba(255,255,255,0.16);
        padding: 5px 12px; border-radius: 20px;
        display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        transition: transform 0.15s var(--v2-ease), background 0.2s var(--v2-ease);
    }
    .fd-follow-cap i { font-size: 13px; }
    .fd-follow-cap:active { transform: scale(0.9); background: rgba(255,255,255,0.26); }
    /* ปุ่ม "ติดตาม" (แนะนำ) — พื้นขาวเด่น */
    .fd-follow-cap--do { background: #fff; color: #000; }
    .fd-follow-cap--do:active { background: rgba(255,255,255,0.82); }
    /* สถิติกิจกรรมล่าสุดในการ์ดกำลังติดตาม */
    .fd-card-activity { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,0.82); white-space: nowrap; }

    /* ── Post Grid (Explore / Feed) — masonry 2 คอลัมน์ (JS ต่อลงคอลัมน์สั้นกว่า โพสต์เก่าไม่ขยับ) ── */
    .v2-masonry {
        display: flex; gap: 14px; align-items: flex-start;
        padding: 0 20px; width: 100%; max-width: 600px; margin: 0 auto;
    }
    .v2-mcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
    /* skeleton grid ยังใช้ column-count ธรรมดา */
    .v2-skel-grid {
        column-count: 2; column-gap: 14px; padding: 0 20px;
        width: 100%; max-width: 600px; margin: 0 auto;
    }
    .v2-skel-grid .v2-post-wrapper { break-inside: avoid; margin-bottom: 16px; }

    /* 🖥️ มือถือ: ฟีดกว้างสุด 600px กลางจอ / แท็บเล็ต-คอม (≥640px): เต็มหน้าต่างเหมือนหน้าแจ้งเตือน
       โพสต์เพิ่มคอลัมน์ตามความกว้าง (feedColCount) แทนการยืดการ์ด 2 คอลัมน์ให้ใหญ่ */
    #feed-container { max-width: 600px; }
    @media (min-width: 640px) {
        #feed-container { max-width: none; }
        .v2-masonry, .v2-skel-grid { max-width: none; padding: 0 32px; }
        .v2-skel-grid { column-count: auto; column-width: 240px; }
    }

    /* การ์ดชวนสมัคร (เฉพาะผู้เยี่ยมชม) — แทรกในกริดสำรวจเหมือนโพสต์ใบหนึ่ง */
    .fd-join-card {
        width: 100%; border-radius: 20px; background: var(--v2-surface); padding: 22px 14px 16px;
        display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    }
    .fd-join-logo { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 2px; }
    .fd-join-title { font-size: 15px; font-weight: 700; color: var(--v2-text); }
    .fd-join-sub { font-size: 12px; line-height: 1.5; color: var(--v2-subtext); margin-bottom: 6px; }
    .fd-join-btn {
        width: 100%; border: 0; border-radius: 100px; padding: 9px 10px; font: inherit; font-size: 13px; font-weight: 600;
        background: #fff; color: #000; cursor: pointer; transition: transform 0.2s var(--v2-ease), opacity 0.2s;
    }
    .fd-join-btn.ghost { background: transparent; color: var(--v2-text); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }
    .fd-join-btn:active { transform: scale(0.96); opacity: 0.8; }

    .v2-post-wrapper {
        width: 100%;
        display: flex; flex-direction: column; gap: 10px;
    }

    .v2-grid-thumb {
        border-radius: 20px; position: relative; overflow: hidden;
        width: 100%; background: var(--v2-surface); cursor: pointer;
        transition: transform 0.2s var(--v2-ease), filter 0.2s;
        box-shadow: none !important;
    }
    .v2-grid-thumb:active { transform: scale(0.96); filter: brightness(0.8); }
    .v2-grid-img { width: 100%; height: 100%; display: block; object-fit: cover; position: relative; z-index: 1; opacity: 0; transition: opacity 0.4s ease; border-radius: inherit; }
    .v2-grid-img.loaded { opacity: 1; }
    /* 🦴 รูปยังไม่พร้อมแสดง = การ์ดกระพริบแบบโครงกระดูก (เหมือน .v2-skeleton) จนกว่ารูปจะขึ้น */
    .v2-grid-thumb:has(> .v2-grid-img:not(.loaded)) { background: linear-gradient(90deg, #181818 25%, #242424 50%, #181818 75%); background-size: 200% 100%; animation: v2-shimmer 1.5s infinite linear; }
    /* ไอคอนบนการ์ด ขึ้นพร้อมรูปเท่านั้น (ระหว่างรอ การ์ดกระพริบโหลดเปล่า ๆ) */
    .v2-grid-thumb > .v2-icon { transition: opacity 0.3s ease; }
    .v2-grid-thumb:has(> .v2-grid-img:not(.loaded)) > .v2-icon { opacity: 0; }
    /* 🌟 ปกโพสต์ความละเอียดต่ำ (blur-up) — ขึ้นก่อนทันทีระหว่างรอรูปจริงโหลด เหมือนหน้าโปรไฟล์/ป๊อปอัพโพสต์
       ไม่งั้นโพสต์ที่รูปไฟล์ใหญ่จะเห็นเป็นช่องว่าง/skeleton เฉยๆ จนกว่ารูปเต็มจะโหลดเสร็จ
       🌟 เดิมเคยลองใส่ border-radius:inherit ตรงที่รูป <img> เอง (ไม่พึ่ง overflow:hidden ของกรอบแม่
       .v2-grid-thumb อย่างเดียว) แต่ยังไม่พอ — บาง engine (Safari) ไม่คลิปมุมโค้งให้ตัวเองถูกต้อง 100%
       เมื่อมี filter (blur) ติดอยู่บนตัวเดียวกันกับ border-radius ด้วยซ้ำ ทำให้เห็นรูปเบลอมุมเหลี่ยม
       โผล่พ้นกรอบโค้งออกมาอยู่ดี แก้แบบเด็ดขาดโดยแยกชั้น: .v2-grid-ph-wrap ทำหน้าที่คลิปมุมโค้งล้วนๆ
       (ไม่มี filter ติดตัว จึง overflow:hidden ได้ชัวร์ 100% ทุกเบราว์เซอร์) ส่วนตัวรูปเบลอจริงอยู่ข้างใน
       แค่ scale ขยายเผื่อขอบเบลอเกินเฟรมเล็กน้อย กันเห็นขอบจางๆ ตอนถูกคลิป 🌟 */
    .v2-grid-ph-wrap { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; border-radius: inherit; transition: opacity 0.3s ease; }
    .v2-grid-ph { width: 100%; height: 100%; object-fit: cover; filter: blur(20px); transform: scale(1.35); display: block; }   /* 🐞 เบลอทำขอบภาพจางโปร่ง — ขยายพอ (×1.35) ไม่งั้นการ์ดเล็กเห็นเป็นวงรีเทามุมมืดตอนรูปจริงยังโหลด */
    /* รูปสไลด์ในโพสต์ — เปลี่ยนแบบลื่นไหล (crossfade) เหมือนในโปรไฟล์ */
    .v2-slide-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; z-index: 2; pointer-events: none; border-radius: inherit; }
    .v2-slide-img.active-slide { opacity: 1; }
    /* 🐞 เส้นขอบขาวแวบตอนเฟดเปลี่ยนรูป — พื้นการ์ดเป็นดำเมื่อรูปขึ้นแล้ว (ดู posts.html .grid-slide-img) */
    .v2-grid-thumb:has(> .v2-grid-img.loaded) { background-color: #000; }   /* ขนาดรูปสไลด์เท่ารูปปกเป๊ะ (ไม่ขยับตอนเปลี่ยนรูป) · ขอบเศษพิกเซลเห็นเป็นดำ */
    
    .v2-icon { position: absolute; color: #fff; font-size: 20px; pointer-events: none; z-index: 3; filter: none !important; }
    .v2-icon-like { top: 10px; right: 10px; display: none; align-items: center; justify-content: center; }
    .v2-icon-multi { top: 10px; left: 10px; font-weight: 300; }
    .v2-icon-tag { bottom: 8px; left: 8px; background: rgba(0,0,0,0.38); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 50%; width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
    .v2-icon-repost { bottom: 10px; right: 10px; display: none; }

    /* Author Meta */
    .v2-post-meta {
        display: flex; align-items: center; gap: 8px; padding: 0 4px;
    }
    /* แตะได้เฉพาะรูป+ชื่อ (ไม่กินพื้นที่ว่างทั้งแถว) */
    .v2-meta-user { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; cursor: pointer; transition: opacity 0.2s, transform 0.15s; }
    .v2-meta-user:active { opacity: 0.6; transform: scale(0.96); }
    .v2-post-meta .v2-meta-more { margin-left: auto; }
    .v2-meta-av { width: 32px; height: 32px; border-radius: 50%; background: transparent; object-fit: cover; border: none; flex-shrink: 0; }
    .v2-meta-name { color: var(--v2-text); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.2px; }
    /* ปุ่มจุดสามจุดใต้โพสต์ (เหมือนใน pop up) */
    .v2-meta-more { flex-shrink: 0; background: transparent; border: none; color: var(--v2-subtext); font-size: 22px; line-height: 1; padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.2s, transform 0.15s; }
    .v2-meta-more:active { transform: scale(0.85); color: var(--v2-text); }

    /* ── Utilities & Skeletons ── */
    .v2-skeleton { background: linear-gradient(90deg, #181818 25%, #242424 50%, #181818 75%); background-size: 200% 100%; animation: v2-shimmer 1.5s infinite linear; border-radius: inherit; width: 100%; height: 100%; }
    @keyframes v2-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    /* ── Following Strip ── */
    .fd-fs-row { display: flex; overflow-x: auto; gap: 14px; padding: 4px 16px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .fd-fs-row::-webkit-scrollbar { display: none; }
    .fd-fp-item { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; width: 92px; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
    .fd-fp-ring-wrap { width: 92px; height: 92px; position: relative; transition: transform 0.15s; flex-shrink: 0; }
    .fd-fp-item:active .fd-fp-ring-wrap { transform: scale(0.88); }
    .fd-fp-av { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; background: #242426; position: absolute; top: 7px; left: 7px; border: 2.5px solid #121212; }
    .fd-fp-name { font-size: 13px; color: var(--v2-text); text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
    .fd-card-story-hint { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: #fff; }
    .fd-card-story-hint i { font-size: 7px; background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

    /* Following pop-up */
    #fd-fp-popup { position: fixed; inset: 0; z-index: 10001; display: none; align-items: flex-end; justify-content: center; padding: 0 16px 44px; }
    #fd-fp-popup.open { display: flex; }
    .fd-fp-popup-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.72); animation: fdFpFadeIn 0.22s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    @keyframes fdFpFadeIn { from { opacity:0; } to { opacity:1; } }
    @keyframes fdFpSlideUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .fd-fp-popup-card { position: relative; width: 100%; max-width: 420px; border-radius: 28px; overflow: hidden; animation: fdFpSlideUp 0.34s cubic-bezier(0.16,1,0.3,1); }
    .fd-fp-popup-bg-layer { position: absolute; inset: 0; }
    .fd-fp-popup-wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(10px); transform: scale(1.1); }
    .fd-fp-popup-theme-ov { position: absolute; inset: 0; opacity: 0.65; }
    .fd-fp-popup-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.25) 50%, transparent 100%); }
    .fd-fp-popup-content { position: relative; z-index: 1; padding: 28px 20px 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 230px; justify-content: flex-end; }
    .fd-fp-popup-av-wrap { width: 74px; height: 74px; position: relative; flex-shrink: 0; }
    .fd-fp-popup-av { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: #242426; position: absolute; top: 7px; left: 7px; border: 2px solid rgba(0,0,0,0.5); }
    .fd-fp-popup-name { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.5px; text-align: center; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
    .fd-fp-popup-uname { font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 500; text-align: center; }
    .fd-fp-popup-btns { display: flex; gap: 10px; margin-top: 10px; width: 100%; }
    .fd-fp-popup-btn { flex: 1; height: 46px; border-radius: 23px; border: none; cursor: pointer; font-size: 14px; font-weight: 700; font-family: inherit; transition: transform 0.15s, opacity 0.15s; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .fd-fp-popup-btn:active { transform: scale(0.93); opacity: 0.7; }
    .fd-fp-popup-btn.primary { background: rgba(255,255,255,0.92); color: #000; }
    .fd-fp-popup-btn.secondary { background: rgba(255,255,255,0.14); color: #fff; backdrop-filter: blur(8px); }

    /* 🌟 ดึงจอลงมาบนสุด = รีเฟรชข้อมูลในหน้านี้ (ไม่ใช่โหลดหน้าเว็บใหม่) แบบเดียวกับเฟซบุ๊ค/ทวิตเตอร์
       เนื้อหา (#view-feed-content) เลื่อนลงตามระยะที่ดึง เผยพื้นที่ว่างด้านบนออกมา ตัวชี้วัดโผล่มาโชว์
       "ในพื้นที่ว่างนั้นเป๊ะ"
       🌟 ควบคุมการโชว์/ซ่อนด้วย opacity ตรงๆ จาก JS เท่านั้น (ของเดิมใช้ top ติดลบ + overflow ของ
       .app-view บังไว้แทน ซึ่งบางเบราว์เซอร์/โหมด PWA เอาไม่อยู่ ทำให้บางทีโผล่ให้เห็นทั้งที่ยังไม่ได้
       ดึงจอเลย) การันตีว่าโผล่มาเฉพาะตอนกำลังดึงจอลงจริงๆ เท่านั้น 100%
       🌟 เปลี่ยนจากวงแหวนหมุนเป็นจุดไข่ปลา 3 จุด — ตอนแรกเป็นวงกลมกลวง (แค่เส้นขอบ) ยิ่งดึงจอลงจุด
       จะค่อยๆ ทึบขึ้นทีละจุดจนครบ 3 จุด (ดู setPct ใน setupPullToRefresh ที่หาร progress เป็น 3 ช่วง) 🌟 */
    .ptr-indicator {
        position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; z-index: 5;
        width: 34px; height: 34px;
        transform: translate(-50%, 0);
        display: flex; align-items: center; justify-content: center; gap: 6px;
        opacity: 0; visibility: hidden; pointer-events: none;
    }
    .ptr-indicator .ptr-dot {
        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
        border: 1.5px solid rgba(255,255,255,0.5);
        box-sizing: border-box; position: relative;
    }
    .ptr-indicator .ptr-dot-fill {
        position: absolute; inset: 0; border-radius: 50%; background: #fff;
        transform: scale(0); transition: transform 0.08s linear;
    }
    .ptr-indicator.ptr-spinning .ptr-dot-fill { animation: ptrDotPulse 1s ease-in-out infinite; }
    .ptr-indicator.ptr-spinning .ptr-dot:nth-child(2) .ptr-dot-fill { animation-delay: 0.15s; }
    .ptr-indicator.ptr-spinning .ptr-dot:nth-child(3) .ptr-dot-fill { animation-delay: 0.3s; }
    @keyframes ptrDotPulse { 0%, 100% { transform: scale(0.3); opacity: 0.4; } 50% { transform: scale(1); opacity: 1; } }