/* ============================================================
   FORMATIX CREATIONS — Liquid Glass
   ใช้เฉพาะชั้นที่ลอยเหนือเนื้อหา (แถบเมนู แถบล่างมือถือ เม็ดแท็บ คำบรรยาย/ปุ่มของสไลด์ เมนู/หน้าต่าง กล่องแจ้งเตือน การ์ดหน้าแรก)
   ส่วนเนื้อหาหลักยังเป็นพื้นเรียบแบบมินิมอล

   ทิศทางแบบ iOS รุ่นใหม่: กระจกใสเป็นหลัก ไม่ใช่ฝ้าหนา — ภาพข้างหลังยังเห็นชัด แต่โค้งงอที่ขอบเหมือนเลนส์นูน
     · เนื้อกระจก   สี --lg-tint ความทึบตามค่า "ความโปร่งใส" ที่ผู้ใช้ตั้ง (--lg-c) + เบลอ/ดันความอิ่มสีของที่อยู่ข้างหลัง
     · เลนส์ขอบ     glass.js วาดแผนที่การหักเหตามขนาด/มุมโค้งของแต่ละแผ่น → --lg-lens (Chromium เท่านั้น)
     · ขอบรับแสง    เส้น 1px สว่างที่มุมบนซ้ายกับล่างขวา (แสงเข้าหนึ่งด้าน สะท้อนในเนื้อกระจกอีกด้าน) — ::after + mask
     · ประกายผิว    แสงวาวจาง ๆ ครึ่งบน + แสงเรืองในเนื้อ (::before / inset shadow)
     · จุดสะท้อน    ตามเมาส์ — glass.js ตั้ง --mx / --my
     · สัมผัส       กดแล้วพองขึ้นเล็กน้อยแบบสปริง ไม่ยุบลง
   ทุกกฎอยู่ใต้ :root:not([data-glass="off"]) — ปิด Liquid Glass แล้วไม่เหลือเศษของกระจกเลย
   ดีไซน์ตอนปิด (คลาสสิก: พื้นทึบ ขอบคม แถบติดขอบจอ) อยู่ใน style.css หัวข้อ 15
   ============================================================ */

/* ---------- เนื้อกระจก ---------- */
:root:not([data-glass="off"]) :is(.topbar-in, .tabbar, .tab-lens, .acct-menu, .modal-card, .newver, .splash-skip, .splash-cold,
.intro-tile, .btn-glass, .slide-cap, .arrow, .slider-rail, .glass-demo-pane) {
  isolation: isolate;
  background-color: var(--lg-bg);
  background-image: radial-gradient(190px 130px at var(--mx, 50%) var(--my, -999px), var(--lg-spec), transparent 70%);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border-color: transparent;
  box-shadow:
    inset 0 0 16px -6px var(--lg-inner),
    inset 0 -8px 16px -14px var(--lg-hi),
    0 0 0 .5px var(--lg-edge),
    var(--lg-shadow);
}
:root:not([data-glass="off"]) :is(.topbar-in, .splash-cold, .intro-tile, .btn-glass, .arrow, .slider-rail) { position: relative; }

/* ประกายผิว — อยู่ใต้ตัวหนังสือ (z-index -1 ภายในแผ่นกระจกเอง) */
:root:not([data-glass="off"]) :is(.topbar-in, .tabbar, .tab-lens, .acct-menu, .modal-card, .newver, .splash-skip, .splash-cold,
.intro-tile, .btn-glass, .slide-cap, .arrow, .slider-rail, .glass-demo-pane)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--lg-gloss) 0, transparent min(48%, 30px));
  opacity: .5;
}

/* ขอบรับแสง — สว่างที่มุมบนซ้าย จางหายช่วงกลาง แล้วสะท้อนกลับที่มุมล่างขวา */
:root:not([data-glass="off"]) :is(.topbar-in, .tabbar, .tab-lens, .acct-menu, .modal-card, .newver, .splash-skip, .splash-cold,
.intro-tile, .btn-glass, .slide-cap, .arrow, .slider-rail, .glass-demo-pane, .pin-flag)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--lg-hi) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 62%, var(--lg-lo) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* เลนส์ขอบ (Chromium) — ต่อแผนที่การหักเหของแผ่นนั้นไว้หน้าเบลอ */
:root.lg-refract:not([data-glass="off"]) :is(.topbar-in, .tabbar, .tab-lens, .intro-tile, .btn-glass, .slide-cap, .arrow, .slider-rail, .glass-demo-pane) {
  -webkit-backdrop-filter: var(--lg-lens,) var(--lg-blur);
  backdrop-filter: var(--lg-lens,) var(--lg-blur);
}

/* ชั้นที่ต้องอ่านข้อความยาว ๆ (เมนู หน้าต่าง กล่องแจ้งเตือน คำบรรยายสไลด์) ใช้กระจกทึบขึ้น */
:root:not([data-glass="off"]) :is(.acct-menu, .modal-card, .newver, .splash-cold, .slide-cap) { background-color: var(--lg-bg-strong); }
:root:not([data-glass="off"]) .topbar.is-stuck .topbar-in { background-color: var(--lg-bg-strong); }

/* ---------- เม็ดเลนส์ของแท็บ: แผ่นกระจกเล็กที่ไหลไปหาแท็บที่เลือก ---------- */
:root:not([data-glass="off"]) .tab-lens { background-color: var(--lg-bg-strong); box-shadow: inset 0 0 10px -4px var(--lg-inner), 0 0 0 .5px var(--lg-edge), 0 6px 16px -8px rgba(10, 8, 30, .35); }
:root:not([data-glass="off"]) .tabs { background: rgb(127 127 150 / .08); }

/* ---------- ปุ่มกระจก ---------- */
:root:not([data-glass="off"]) .btn-glass { color: var(--ink); border: none; }
:root:not([data-glass="off"]) :is(.btn-glass:hover:not(:disabled), .intro-tile:hover, .arrow:hover) { background-color: var(--lg-bg-strong); }
:root:not([data-glass="off"]) :is(.btn-glass, .arrow, .intro-tile) { transition: transform .45s var(--spring), background-color .25s; }
:root:not([data-glass="off"]) :is(.btn-glass, .arrow):active { transform: scale(1.06); }
:root:not([data-glass="off"]) .intro-tile:active { transform: scale(1.02); }

/* ป้ายบนภาพปกการ์ด: กระจกใสบนภาพ ตัวหนังสือขาวเสมอ */
:root:not([data-glass="off"]) .pin-flag {
  background-color: rgba(12, 12, 18, .28);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5);
  --lg-hi: rgba(255, 255, 255, .7); --lg-lo: rgba(255, 255, 255, .25);
}

/* ---------- จอคอม: แถบบนเต็มความกว้างติดขอบจอ (ไม่ใช่แผ่นลอยแบบ Dynamic Island) ----------
   ยังเป็นกระจก (เบลอ/อิ่มสี + ประกายผิว) แต่ไม่มีเลนส์ขอบ — ขอบซ้าย/ขวาชนขอบจอ งอภาพตรงนั้นจะดูเพี้ยน
   ตัวบอกแท็บเป็นเส้นสีเน้นเรืองแสงใต้แท็บ แทนเม็ดกระจกในรางมน */
@media (min-width: 821px) {
  :root:not([data-glass="off"]) .topbar { padding: 0; }
  :root:not([data-glass="off"]) .topbar-in,
  :root.lg-refract:not([data-glass="off"]) .topbar-in {
    max-width: none; height: calc(var(--nav-h) + 4px);
    padding: 0 max(var(--gutter), calc((100% - var(--shell)) / 2));
    border-radius: 0;
    -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
    box-shadow: 0 .5px 0 var(--lg-edge);
  }
  :root:not([data-glass="off"]) .topbar-in::after { display: none; }
  :root:not([data-glass="off"]) .topbar.is-stuck .topbar-in { box-shadow: 0 .5px 0 var(--lg-edge), 0 14px 30px -24px rgba(0, 0, 0, .5); }

  :root:not([data-glass="off"]) .tabs { align-self: stretch; align-items: stretch; gap: 4px; padding: 0; background: none; border-radius: 0; }
  :root:not([data-glass="off"]) .tab { display: flex; align-items: center; padding: 0 16px; border-radius: 0; }
  :root:not([data-glass="off"]) .tab-lens,
  :root.lg-refract:not([data-glass="off"]) .tab-lens {
    top: auto; bottom: -1px; height: 2px; border-radius: 2px;
    background: var(--accent); background-image: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 0 12px 1px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  :root:not([data-glass="off"]) .tab-lens::before, :root:not([data-glass="off"]) .tab-lens::after { display: none; }
  :root:not([data-glass="off"]) .tab-lens.is-press { scale: 1; }
  :root:not([data-glass="off"]) .acct-menu { top: calc(var(--nav-h) + 12px + env(safe-area-inset-top)); }
}

/* ---------- มือถือ: แถบบนเต็มความกว้าง ใสจนกว่าจะเลื่อน แล้วค่อยเป็นกระจกที่มีแค่เส้นล่างบาง ๆ ---------- */
@media (max-width: 820px) {
  :root:not([data-glass="off"]) .topbar-in,
  :root.lg-refract:not([data-glass="off"]) .topbar-in {
    box-shadow: none; background-color: transparent; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  :root:not([data-glass="off"]) .topbar-in::before, :root:not([data-glass="off"]) .topbar-in::after { display: none; }
  :root:not([data-glass="off"]) .topbar.is-stuck .topbar-in,
  :root.lg-refract:not([data-glass="off"]) .topbar.is-stuck .topbar-in {
    background-color: var(--lg-bg-strong);
    -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
    box-shadow: 0 .5px 0 var(--lg-edge);
  }
  :root:not([data-glass="off"]) .tabbar { background-color: var(--lg-bg); }
  :root:not([data-glass="off"]) :is(.rail, .sticky-seg, .page-tabs-wrap) {
    background: var(--lg-bg-strong); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  }
  :root:not([data-glass="off"]) .modal-card { background-color: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root:not([data-glass="off"]) :is(.intro-tile, .slide-cap),
  :root.lg-refract:not([data-glass="off"]) :is(.intro-tile, .slide-cap) {
    background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; isolation: auto;
  }
  :root:not([data-glass="off"]) :is(.intro-tile, .slide-cap)::before,
  :root:not([data-glass="off"]) :is(.intro-tile, .slide-cap)::after { display: none; }
  :root:not([data-glass="off"]) .intro-tile:hover { background: var(--surface-2); }
  :root:not([data-glass="off"]) .intro-tile:active { transform: none; }
}

/* เบราว์เซอร์ที่ไม่มี backdrop-filter: กระจกโปร่งจะอ่านยาก — ใช้พื้นทึบแทน */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --lg-bg: var(--surface); --lg-bg-strong: var(--surface); }
}