/* glass-fx.css — เอฟเฟกต์ที่ใช้ร่วมกันทั้งหน้าฝั่งผู้ใช้และหลังบ้านแอดมิน (ไม่ผูกกับคลาสของหน้าใดหน้าหนึ่ง)
   • ตัวโหลด "หยดน้ำวนเกลียว" (Orbit) — คลาส .goo-orbit สร้างโดย glass-ui.js
   • หน้าต่างส่งข้อมูล "วงน้ำเติม → ติ๊กถูก" — คลาส .send-dlg สร้างโดย GlassUI.send()
   ต้องการตัวแปร: --text --text-muted --green --green-pale --green-pale-text --red --red-pale --red-pale-text --line --head
   --glass-strong --glass-line --scrim --water-1 --water-2 --spring (theme.css ให้ครบแล้ว; หลังบ้านกำหนดใน glass-admin.css) */
/* ───── 1 · ตัวโหลด "หยดน้ำวนเกลียว" (Orbit) — สร้างโดย glass-ui.js ───── */
@property --r { syntax: '<length>'; inherits: true; initial-value: 0px; }
.gl-svg { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.goo-orbit { --S: 2.9em; --b: .95em; --g1: #4f8cff; --g2: #8b6dff; --g3: #5ec8ff; position: relative; display: inline-block; flex-shrink: 0; vertical-align: middle; font-size: 14px; width: var(--S); height: var(--S);
  filter: url(#gl-goo) drop-shadow(0 .3em .35em rgba(37,99,235,.32)); animation: gl-spin 2.6s cubic-bezier(.5,0,.5,1) infinite; }
.goo-orbit.sm { font-size: 7px; filter: url(#gl-goo-sm); }
.goo-orbit.lg { font-size: 18px; }
.goo-orbit.on-dark { --g1: #ffffff; --g2: #cfe0ff; --g3: #f3dd9e; filter: url(#gl-goo) drop-shadow(0 .3em .35em rgba(0,0,0,.25)); }
.goo-orbit.on-btn { --g1: currentColor; --g2: currentColor; --g3: currentColor; }
.goo-orbit > i { position: absolute; left: 50%; top: 50%; display: block; width: var(--b); height: var(--b); margin: calc(var(--b) / -2); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gc) 52%, #fff), var(--gc) 72%); transform: rotate(var(--ang)) translateY(var(--r)); animation: gl-in 2.6s cubic-bezier(.65,0,.35,1) infinite; }
.goo-orbit.on-btn > i { background: currentColor; }
.goo-orbit > i:nth-child(1) { --ang: 0deg; --gc: var(--g1); } .goo-orbit > i:nth-child(2) { --ang: 120deg; --gc: var(--g2); } .goo-orbit > i:nth-child(3) { --ang: 240deg; --gc: var(--g3); }
@keyframes gl-spin { to { transform: rotate(360deg); } }
@keyframes gl-in { 0%, 100% { --r: 1.02em; scale: 1; } 40%, 60% { --r: 0em; scale: 1.25; } }
.gl-center { display: flex; align-items: center; justify-content: center; }

/* ───── 2 · หน้าต่างส่งข้อมูล: วงน้ำเติม → ติ๊กถูก (GlassUI.send) ───── */
.send-dlg { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; font-family: var(--font); }
.send-dlg.show { opacity: 1; }
.send-card { width: 100%; max-width: 300px; padding: 26px 22px 24px; text-align: center; border-radius: 30px; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); transform: translateY(24px) scale(.94); transition: transform .55s var(--spring); position: relative; overflow: hidden; color: var(--text); }
.send-dlg.show .send-card { transform: none; }
.send-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 150px; background: radial-gradient(220px 120px at 50% 0%, var(--green-pale), transparent 75%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.send-dlg.done .send-card::before { opacity: 1; }
.send-dlg.fail .send-card::before { background: radial-gradient(220px 120px at 50% 0%, var(--red-pale), transparent 75%); opacity: 1; }
.send-stage { position: relative; width: 150px; height: 150px; margin: 0 auto 16px; transition: transform .55s cubic-bezier(.3,1.25,.5,1), margin .55s; }
.send-dlg.done .send-stage, .send-dlg.fail .send-stage { transform: scale(.66); margin: -26px auto -8px; }
.send-orb { position: absolute; inset: 0; border-radius: 50%; border: 6px solid #fff; overflow: hidden; background: radial-gradient(circle at 34% 26%, #fff, #eef3fb 72%); box-shadow: 0 0 0 1px var(--line), 0 22px 44px -18px color-mix(in srgb, var(--water-2) 70%, transparent), inset 0 5px 16px rgba(15,23,42,.08); transition: opacity .35s, transform .5s; --lvl: 0; }
html[data-theme="dark"] .send-orb { border-color: #2b3a52; background: radial-gradient(circle at 34% 26%, #223048, #0f1829 72%); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .send-orb { border-color: #2b3a52; background: radial-gradient(circle at 34% 26%, #223048, #0f1829 72%); } }
.send-dlg.done .send-orb, .send-dlg.fail .send-orb { opacity: 0; transform: scale(.7); }
.s-fill { position: absolute; left: 0; right: 0; top: 0; height: 240px; transform: translateY(calc((100 - var(--lvl)) * 1.4px - 12px)); will-change: transform; }
.s-fill::before { content: ''; position: absolute; left: 0; right: 0; top: 14px; bottom: 0; background: linear-gradient(180deg, var(--water-1), var(--water-2)); }
.s-wave { position: absolute; left: 0; width: 100%; height: 24px; top: 0; background: var(--water-1); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24' viewBox='0 0 60 24'%3E%3Cpath d='M0 12Q15 0 30 12T60 12V24H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 60px 24px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24' viewBox='0 0 60 24'%3E%3Cpath d='M0 12Q15 0 30 12T60 12V24H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 60px 24px; animation: gl-wave 1.4s linear infinite; }
.s-wave.w2 { opacity: .5; top: -5px; -webkit-mask-size: 80px 24px; mask-size: 80px 24px; animation-duration: 2.4s; animation-direction: reverse; }
@keyframes gl-wave { to { -webkit-mask-position-x: 60px; mask-position-x: 60px; } }
.s-b { position: absolute; bottom: 14px; border-radius: 50%; background: rgba(255,255,255,.65); opacity: 0; animation: gl-bub 2.8s ease-in infinite; }
.s-b.b1 { left: 24%; width: 8px; height: 8px; } .s-b.b2 { left: 58%; width: 6px; height: 6px; animation-delay: 1s; } .s-b.b3 { left: 74%; width: 10px; height: 10px; animation-delay: 1.8s; }
@keyframes gl-bub { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .85; } 100% { transform: translateY(-96px) scale(1); opacity: 0; } }
.s-gloss { position: absolute; left: 14%; right: 14%; top: 5%; height: 34%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); pointer-events: none; }
.s-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--heading); color: #17233f; text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 0 14px rgba(255,255,255,.7); }
html[data-theme="dark"] .s-pct { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .s-pct { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.55); } }
.s-pct span { font-size: 2.6rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } 
.send-dlg:not(.done):not(.fail) .send-orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-100%); animation: gl-sheen 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes gl-sheen { to { transform: translateX(100%); } }
.s-badge { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: var(--green-pale); color: var(--green); opacity: 0; transform: scale(.55); pointer-events: none; transition: opacity .35s .12s, transform .6s cubic-bezier(.2,1.4,.4,1) .12s; }
.s-badge::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.send-dlg.fail .s-badge { background: var(--red-pale); color: var(--red); }
.s-badge svg { width: 46%; height: 46%; overflow: visible; } .s-badge .draw { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.send-dlg.done .s-badge, .send-dlg.fail .s-badge { opacity: 1; transform: scale(1); } .send-dlg.done .s-badge .draw, .send-dlg.fail .s-badge .draw { animation: gl-draw .5s ease .45s forwards; } .send-dlg.done .s-badge::after, .send-dlg.fail .s-badge::after { animation: gl-ring 1.5s ease-out .4s 2; }
@keyframes gl-draw { to { stroke-dashoffset: 0; } } @keyframes gl-ring { 0% { opacity: .55; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.35); } }
.s-title { font-family: var(--heading); font-size: 1.15rem; font-weight: 600; color: var(--text); } .s-text { margin-top: 4px; font-size: .86rem; color: var(--text-muted); min-height: 1.4em; }
.send-dlg.done .s-title { color: var(--green-pale-text); } .send-dlg.fail .s-title { color: var(--red-pale-text); }


/* ───── 3 · ไอคอนแทนอีโมจิ (สร้างโดย glass-icons.js) ───── */
.gi-w { display: inline-flex; align-items: center; vertical-align: -.12em; position: relative; }
.gi-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }   /* อีโมจิเดิม: ซ่อนไว้ให้โปรแกรมอ่านจอ/โค้ดเดิมที่อ่านข้อความ */
.gi { font-size: 1.06em; line-height: 1; margin-right: .3em; display: inline-block; font-style: normal; }
.gi-w:last-child > .gi { margin-right: 0; }
.gi-w.gi-sp > .gi { margin-right: .3em; }
.gi-ok { color: #12a370; } .gi-warn { color: #d98a00; } .gi-danger { color: #e5484d; } .gi-info { color: #0891b2; } .gi-brand { color: #3b82f6; }
.gi-gold { color: #d4a017; } .gi-silver { color: #94a3b8; } .gi-bronze { color: #b9743a; } .gi-fire { color: #f97316; } .gi-neutral { color: inherit; opacity: .85; }
html[data-theme="dark"] .gi-brand { color: #7aa7ff; } html[data-theme="dark"] .gi-warn { color: #fbbf24; }
.icon-slot { display: flex; justify-content: center; }
.icon-slot .gi-w { display: grid; place-items: center; }
.icon-slot .gi { margin: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; position: relative;
  background: color-mix(in srgb, currentColor 14%, transparent); animation: gl-icon-pop .6s var(--spring, cubic-bezier(.3,1.45,.5,1)) both; }
.icon-slot .gi-neutral { color: #3b82f6; }
.icon-slot .gi::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: gl-icon-ring 1.6s ease-out .4s 2; }
@keyframes gl-icon-pop { from { transform: scale(.4); opacity: 0; } }
@keyframes gl-icon-ring { 0% { opacity: .5; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
/* ช่องค้นหาที่เดิมมีแว่นขยายเป็นอีโมจิใน placeholder */
.gl-search { padding-left: 44px !important; background-repeat: no-repeat !important; background-position: 15px center !important; background-size: 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%238794ad' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .icon-slot .gi, .icon-slot .gi::after { animation: none; } }

/* ───── 4 · ริปเปิลตอนแตะปุ่ม (สร้างโดย glass-ui.js) ───── */
.btn { position: relative; overflow: hidden; }
.gl-rip { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: gl-rip .6s ease-out forwards; pointer-events: none; z-index: 0; }
.btn-ghost .gl-rip, .btn-outline-navy .gl-rip, .btn-red .gl-rip, .btn-green .gl-rip { background: rgba(29,78,216,.16); }
@keyframes gl-rip { to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gl-rip { display: none; } }

/* ───── 5 · ไอคอนที่อยู่บนพื้นสีเข้ม/ไล่เฉด → สืบสีตัวหนังสือของพ่อ (สืบสีตัวหนังสือ กันไอคอนฟ้าบนพื้นฟ้าจนมองไม่เห็น) ───── */
.btn-primary .gi, .btn-gold .gi, .btn-blue .gi, .btn-ok .gi, .btn-checkin .gi, .profile-card .gi, .proj-card.registered .gi, .hot-challenge-card .gi, .sec-banner .gi,
.eval-cat-header .gi, .resp-section-header .gi, .form-banner .gi, .ty-score .gi, .rw-panel-header .gi, .chat-panel-header .gi, .rw-fab .gi, .chat-fab .gi,
.nav-drawer-link.active .gi, .nav-item.active .gi, .lb-subtab-btn.active .gi, .chip.active .gi, .cat-tab.active .gi, .page-btn.active .gi, .tab-btn.active .gi,
.nav-item.active .gi, .chat-panel button .gi, .rw-panel button .gi, .toast .gi, .eaip-toast .gi, #celebrateOverlay .gi, .hero-badge .gi, .rank-badge .gi, .doc-dl .gi, .hamburger-btn .gi { color: inherit !important; opacity: 1; }

/* ───── 6 · ตัวเลข % ในหน้าต่างส่งข้อมูล: ความกว้างคงที่ ไม่สั่นตอนเลขเปลี่ยน ───── */
.s-pct span { font-variant-numeric: tabular-nums; display: inline-block; min-width: 2ch; text-align: center; }