:root {
        --hq-nav-tone: linear-gradient(120deg, rgba(54, 54, 58, 0.7) 0%, rgba(34, 34, 37, 0.63) 45%, rgba(24, 24, 26, 0.6) 100%);   /* = .mnb-wrap */
        --hq-field-bg: rgba(255,255,255,0.1); --hq-field-line: transparent;
    }
    html body :is(.sys-card, .sys-ul-card, .sys-search-sheet, .ep-modal .ep-content, .level-modal .ep-content,
                  .svd-panel, .svd-dialog-card) {
        background: var(--hq-nav-tone) !important;
        border: none !important; box-shadow: none !important;
        backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
    }
    html body .sys-list-group .sys-list-item { border-color: rgba(255,255,255,0.06) !important; }
    /* แผ่นเมนูตัวเลือก (การแสดงผล ฯลฯ) = กระจกโทนเมนูบาร์ เหมือนหน้าต่างโปรไฟล์
       🐞 เดิมขึ้นมาจางก่อนแล้วค่อยเข้ม: Safari ใส่เบลอ (backdrop-filter) ให้ชิ้นที่อยู่ในอนิเมชันเลื่อนขึ้นตอนจบเท่านั้น
       → แผ่นเมนูขึ้นทันทีไม่มีอนิเมชันเลื่อน — เบลอ/สีเข้มเท่ากันตั้งแต่เฟรมแรก */
    html body :is(.sys-list-group, .sys-list-cancel) {
        background: var(--hq-nav-tone) !important; border: none !important;
        backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
    }
    html body .sys-sheet-card { animation: none !important; }
    /* หน้าต่างเต็มจอ (สร้างไฮไลต์ / ลงสตอรี่ / ลงโพสต์) */
    html body :is(.hl-manage-modal, .su-modal, .pu-modal) { background: var(--hq-nav-tone) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; }
    /* 🐞 แถบหัวหน้าลงโพสต์เป็นสีดำทึบ ไม่เข้ากับพื้นหลัง → โปร่ง (เห็นพื้นเดียวกันทั้งหน้า) */
    /* ── 🪟 หน้าต่างกรอกข้อมูล (เพิ่มลิงก์ / อีเมล / รหัสผ่าน / 2FA) — แบบ "ป้ายลอยในช่อง": หัวข้อชิดซ้าย · ป้ายกำกับอยู่ในช่อง
          ช่องที่กำลังพิมพ์มีขอบขาว · ปุ่มหลักขาวเต็มกว้าง + ยกเลิกเป็นตัวหนังสือ · กระจกโทนเมนูบาร์ ── */
    html body :is(.pl-card, .pwd-content) {
        max-width: 380px !important; border-radius: 30px !important; padding: 24px 20px 14px !important;
        display: flex !important; flex-direction: column; gap: 0; text-align: left; animation: none !important;
        background: var(--hq-nav-tone) !important; border: none !important;
        backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
    }
    html body .pwd-content .hq-win-ic { display: none; }
    .hq-win-title, html body .pwd-header { text-align: left !important; font-size: 20px !important; font-weight: 750 !important; letter-spacing: -0.3px !important;
        color: #fff !important; text-transform: none !important; padding: 0 !important; border: 0 !important; margin: 0 0 4px !important; }
    .hq-win-sub { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.55); margin: 0 0 18px; }
    html body .pwd-content > div [style*="text-align:center"][style*="color:#9a9a9a"], html body .pwd-content [style*="color:#9a9a9a"] { color: rgba(255,255,255,0.55) !important; }
    html body .pwd-content [style*="margin-bottom:14px;text-align:center"] { text-align: left !important; }
    /* ช่องป้ายลอย */
    .hq-fl { position: relative; display: block; flex: none; height: 60px; border-radius: 16px; background: rgba(255,255,255,0.09); margin-bottom: 10px; cursor: text; }
    .hq-fl > span { position: absolute; left: 16px; top: 8px; font-size: 11.5px; line-height: 1.3; font-weight: 600; color: rgba(255,255,255,0.55); pointer-events: none; }
    html body :is(#profile-link-modal, .pwd-modal) .hq-fl > input { position: absolute !important; left: 0; right: 0; bottom: 5px; top: auto; width: 100% !important; height: 30px !important; box-sizing: border-box;
        padding: 0 16px !important; margin: 0 !important; border: none !important; border-radius: 16px !important; background: transparent !important;
        color: #fff !important; font-size: 16px !important; outline: none; letter-spacing: normal; }
    .hq-fl:focus-within { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6); }
    html body .hq-fl > input::placeholder { color: rgba(255,255,255,0.3); }
    html body :is(#profile-link-modal, .pwd-modal) .hq-fl.hq-fl-code > input { text-align: center !important; letter-spacing: 8px !important; font-size: 20px !important; }
    .pl-preview { display: flex; align-items: center; gap: 10px; margin: 2px 4px 16px; min-height: 34px; }
    .pl-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 16px; background: rgba(255,255,255,0.12);
        font-size: 13px; color: #fff; max-width: 60%; overflow: hidden; white-space: nowrap; }
    .pl-chip b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
    .pl-preview small { font-size: 12px; color: rgba(255,255,255,0.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hq-win-primary, html body .pwd-btn.save { width: 100%; height: 50px; border: none !important; border-radius: 25px !important; background: #fff !important; color: #000 !important;
        font-size: 15.5px !important; font-weight: 700 !important; cursor: pointer; font-family: inherit; flex: none !important; padding: 0 !important; margin-top: 6px; }
    .hq-win-primary:active, html body .pwd-btn.save:active { transform: scale(0.98); }
    .hq-win-secondary, html body .pwd-btn.cancel { width: 100%; height: 42px; margin-top: 2px; border: none !important; background: transparent !important;
        color: rgba(255,255,255,0.55) !important; font-size: 14.5px !important; font-weight: 600 !important; cursor: pointer; font-family: inherit; flex: none !important; padding: 0 !important; }
    html body .pwd-btn-group { flex-direction: column-reverse !important; gap: 0 !important; margin-top: 4px !important; }
    html body .pwd-mode { background: rgba(255,255,255,0.08) !important; border-radius: 16px !important; }
    html body #pwd-otp-send { width: auto !important; height: 60px !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 16px !important;
        border-radius: 16px !important; background: rgba(255,255,255,0.12) !important; color: #fff !important; font-size: 13.5px !important; }

    /* ── 🎵🏷️📤🖼️ แผ่นเลือกเพลง / ค้นหาแท็กผู้คน / แชร์โพสต์ / เลือกกรอบรูป — กระจกโทนเมนูบาร์ (ทึบขึ้นเล็กน้อย: แผ่นเหล่านี้เลื่อนขึ้น
          ระหว่างนั้น Safari ยังไม่ใส่เบลอ — สีเกือบเท่ากันทั้งมีและไม่มีเบลอ) + ฟอนต์ของเครื่อง ── */
    html body :is(.snd-sheet, .ch-share-sheet, .hqf-sheet, .sys-search-sheet) {
        background: linear-gradient(120deg, rgba(50,50,54,0.95) 0%, rgba(32,32,35,0.95) 45%, rgba(23,23,25,0.95) 100%) !important;
        backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: none !important; color: #fff;
    }
    :is(.snd-sheet-bg, .ch-share, .hqf-sheet-bg, #sys-search-modal, .ios-search-overlay),
    :is(.snd-sheet-bg, .ch-share, .hqf-sheet-bg, #sys-search-modal, .ios-search-overlay) :not(i):not(.bx):not([class*="bx-"]):not([class*="ph-"]):not([class^="ph"]) {
        font-family: var(--hq-sys-font) !important;
    }
    html body :is(.ch-share-qwrap, .sys-search-input-wrap) { background: rgba(255,255,255,0.09) !important; border: none !important; border-radius: 14px !important; }
    /* 📤 แผ่น "ส่งถึง" = ขนาด/ช่องค้นหาแบบเดียวกับแผ่นค้นหาแท็กผู้คน (.sys-search-sheet) */
    html body .ch-share { padding: 12px; }
    html body .ch-share { background: rgba(0,0,0,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    html body .ch-share-list { flex: 0 1 auto; min-height: 120px; }
    html body .ch-share-sheet { max-width: 450px; height: auto; max-height: 70vh; border-radius: 34px 34px 0 0;
        padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); gap: 14px; }
    html body .ch-share-grab { width: 36px; height: 4px; margin: 4px auto 0; }
    html body .ch-share-title { font-size: 16px; font-weight: 700; padding: 0; }
    .ch-share-qwrap { display: flex; align-items: center; gap: 10px; flex: none; padding: 10px 16px; }
    .ch-share-qwrap > i { font-size: 18px; color: rgba(255,255,255,0.5); }
    html body .ch-share-qwrap .ch-share-q { flex: 1; min-width: 0; margin: 0; height: auto; padding: 0; background: transparent !important; border: none; border-radius: 0;
        color: #fff; font-size: 15px; outline: none; -webkit-appearance: none; appearance: none; }
    html body .ch-share-row { padding: 8px 4px; }
    html body .hqf-chip { border: none !important; background: rgba(255,255,255,0.09) !important; }
    html body .hqf-chip.on { background: #fff !important; color: #000 !important; }
    html body .snd-row.sel { background: rgba(255,255,255,0.1) !important; }

    /* ── 💬 กล่องข้อความ + ห้องแชท: กระจกโทนเมนูบาร์ ── */
    html body #view-chats .cl-search input,
    html body :is(.cl-hbtns, .cl-act-box, .cl-act button, .gi-acts button:not(.on)),
    html body #chat-screen :is(.ch-who, .ch-input, .ch-ibtn:not(.ch-send), .ch-replybar, .ch-menu) {
        background: var(--hq-nav-tone) !important; border: none !important;
        backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
    }
    html body .cl-sheet { background: linear-gradient(120deg, rgba(50,50,54,0.97) 0%, rgba(32,32,35,0.97) 45%, rgba(23,23,25,0.97) 100%) !important; }
    html body .cl-gname { background: rgba(255,255,255,0.09) !important; }
    html body #view-chats .cl-search i { z-index: 2; }
    html body #view-chats .cl-row:active, html body #view-chats .cl-row.pressing { background: rgba(255,255,255,0.07) !important; }
    /* ฟองข้อความอีกฝ่าย = โทนเมนูบาร์ (ของเรายังเป็นขาว) */
    html body #chat-screen { --tg-them: rgba(52, 52, 56, 0.9); }
    html body #chat-screen .ch-row:not(.me) .ch-b:not(.ch-post) { background: linear-gradient(120deg, rgba(58,58,62,0.92) 0%, rgba(40,40,44,0.92) 100%) !important; }
    html body #chat-screen .ch-b.ch-post { background: linear-gradient(120deg, rgba(54,54,58,0.92) 0%, rgba(30,30,33,0.92) 100%) !important; color: #fff !important; }

    /* ── ⚙️ หน้าตั้งค่าบัญชี/ความปลอดภัย: การ์ดเป็นกระจกโทนเมนูบาร์ (เหมือนหน้าต่างลอย) ไม่มีขอบ ── */
    html body :is(#view-account, #view-safety) :is(.acc-card, .acc-warn-btn, .acc-danger-btn, .safe-menu-box) {
        background: var(--hq-nav-tone) !important; border: none !important;
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    }
    html body :is(#view-account, #view-safety) :is(.acc-row, .acc-blocked-item, .safe-menu-item) { border-bottom-color: rgba(255,255,255,0.07) !important; }
    html body :is(#view-account, #view-safety) .acc-row:active { background: rgba(255,255,255,0.06) !important; }
    html body #view-account .acc-header { background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.55)) !important; }
    html body #view-account .acc-icon-chip:not(.warn):not(.danger) { color: rgba(255,255,255,0.75); }
    html body .pu-modal .pu-header { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    /* 🐞 เลื่อนรายชื่อแล้วมีแถบขาวโผล่ที่ขอบล่าง (Safari แสดงแถบเลื่อนแนวนอน) — กล่องเลื่อนในหน้าต่างลอยเลื่อนได้แค่แนวตั้ง */
    html body :is(.sys-ul-body, .ep-body, .svd-panel-body, .sys-search-results, #views-list) { overflow-x: hidden !important; }
    /* 🐞 เลื่อนรายชื่อแล้วเห็นขีดขาว ๆ ที่ขอบบน/ล่าง: ปุ่ม "ติดตาม" (สีขาว) ของแถวที่เลื่อนพ้นขอบถูกตัดเหลือเป็นเส้น
       → ขอบบน/ล่างของกล่องเลื่อนจางหายแทนการตัดคม */
    html body :is(.sys-ul-body, .svd-panel-body, .sys-search-results, .views-modal .ep-body) {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
                mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    }

    /* ช่องกรอก = กล่องชัด (พื้นจาง + ขอบ + มุมโค้ง) */
    html body :is(.sys-overlay, .ep-modal, .level-modal, .svd-sheet, .svd-dialog, .hl-manage-modal, .su-modal)
        :is(input[type="text"], input[type="url"], input[type="email"], input[type="search"], input[type="number"], input:not([type]), textarea):not(.sys-search-input-wrap input) {
        background: var(--hq-field-bg) !important; border: 1px solid var(--hq-field-line) !important; border-radius: 14px !important;
        padding: 12px 14px !important; color: #fff !important; outline: none; box-sizing: border-box;
    }
    html body :is(.sys-overlay, .ep-modal, .level-modal, .svd-sheet, .svd-dialog, .hl-manage-modal, .su-modal)
        :is(input, textarea):not(.sys-search-input-wrap input):focus { background: rgba(255,255,255,0.15) !important; }
    html body .sys-search-input-wrap { background: var(--hq-field-bg) !important; border: 1px solid var(--hq-field-line) !important; }
    html body .hl-m-caption { font-size: 17px !important; }
    html body .svd-create input { border: none !important; }

    /* ปุ่ม = เห็นเป็นปุ่มชัด: ปุ่มรองมีพื้น+ขอบ · ปุ่มยืนยัน (ไอคอนส่ง) พื้นขาว */
    html body :is(.hl-m-close-btn, .su-close-btn, .pu-close-btn, .sys-ul-close, .ep-close, .svd-panel-close, .svd-btn.ghost, .su-gallery-btn) {
        background: rgba(255,255,255,0.12) !important; border: 1px solid var(--hq-field-line) !important; color: #fff !important;
    }
    html body :is(.hl-m-submit-btn, .su-submit-btn, .pu-submit-btn) {
        background: #fff !important; color: #000 !important; border: none !important; border-radius: 50% !important;
    }
    html body :is(.hl-m-submit-btn, .su-submit-btn, .pu-submit-btn):disabled { background: rgba(255,255,255,0.14) !important; color: rgba(255,255,255,0.6) !important; opacity: 1 !important; }
    html body .svd-row:not(.sel) { background: rgba(255,255,255,0.04); }
    html body .svd-row + .svd-row { margin-top: 4px; }