Upload index.html

index.html

@@ -8,234 +8,28 @@
 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Noto+Serif+Thai:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
-/* ═══════════════════════════════════════
-   TLCC CareChurch OS v8.0 — Unified Design System
-   Glassmorphism + Dark SaaS + Role-Based UI
-   ═══════════════════════════════════════ */
-:root{
-  /* Core */
-  --bg:#0a0d10;--bg-elev:#11151a;--surface:rgba(24,28,35,0.8);
-  --glass:rgba(24,28,35,0.6);--glass-border:rgba(255,255,255,0.06);
-  /* Accent — Neon Green (TLCC) + Cyan (CareChurch) */
-  --neon:#00FF88;--neon-dim:rgba(0,255,136,0.12);--neon-glow:rgba(0,255,136,0.3);
-  --cyan:#00E0FF;--cyan-dim:rgba(0,224,255,0.12);--cyan-glow:rgba(0,224,255,0.2);
-  --amber:#FFB340;--amber-dim:rgba(255,179,64,0.12);
-  --pink:#FF7AAE;--pink-dim:rgba(255,122,174,0.12);
-  --red:#FF5252;--red-dim:rgba(255,82,82,0.12);
-  --purple:#B388FF;
-  /* Text */
-  --text:#F0F2F5;--text-sec:rgba(240,242,245,0.65);--muted:#7A8194;
-  /* Depth */
-  --border:rgba(255,255,255,0.06);--shadow-sm:0 2px 8px rgba(0,0,0,0.3);
-  --shadow-md:0 8px 32px rgba(0,0,0,0.4);--shadow-glow:0 0 40px rgba(0,255,136,0.15);
-  /* Typography */
-  --fh:'Noto Serif Thai',Georgia,serif;--fb:'Noto Sans Thai',system-ui,sans-serif;
-  --fm:'JetBrains Mono',monospace;
-  /* Motion */
-  --ease-out:cubic-bezier(0.16,1,0.3,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);
-  --dur-fast:0.2s;--dur-normal:0.35s;--dur-slow:0.6s;
-}
-*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
-html{font-size:16px;overflow:hidden}body{font-family:var(--fb);background:var(--bg);color:var(--text);overflow:hidden;height:100vh;display:flex;flex-direction:column;accent-color:var(--neon)}
-::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--muted);border-radius:4px}
-
-/* ── Animation Keyframes ── */
-@keyframes fadeSlideUp{from{opacity:0;transform:translateY(20px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
-@keyframes fadeScale{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
-@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
-@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
-@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,0.3)}50%{box-shadow:0 0 20px 6px rgba(0,255,136,0)}}
-@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
-@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
-@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
-@keyframes toastIn{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
-@keyframes rippleAnim{to{transform:scale(3);opacity:0}}
-@keyframes barBounce{0%,100%{height:3px}50%{height:16px}}
-@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}
-
-/* ── Prototype Chrome ── */
-.proto-bar{background:var(--glass);backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid var(--glass-border);padding:.45rem 1rem;display:flex;align-items:center;gap:1rem;z-index:9999;flex-shrink:0}
-.proto-title{font-family:var(--fm);font-size:.65rem;color:var(--neon);letter-spacing:2px;text-transform:uppercase}
-.proto-screens{display:flex;gap:.3rem;flex-wrap:wrap}
-.proto-btn{background:var(--bg);border:1px solid var(--border);color:var(--muted);padding:.25rem .65rem;border-radius:20px;font-size:.62rem;cursor:pointer;font-family:var(--fb);transition:all var(--dur-fast) var(--ease-out);white-space:nowrap}
-.proto-btn:hover{color:var(--neon);border-color:var(--neon-dim)}
-.proto-btn.active{background:rgba(0,255,136,0.1);color:var(--neon);border-color:rgba(0,255,136,0.25);box-shadow:0 0 8px rgba(0,255,136,.1)}
-.proto-device{margin-left:auto;display:flex;align-items:center;gap:.3rem}
-.device-btn{background:none;border:1px solid var(--border);color:var(--muted);padding:.2rem .5rem;border-radius:6px;cursor:pointer;font-size:.65rem;transition:all var(--dur-fast)}
-.device-btn:hover,.device-btn.active{color:var(--neon);border-color:var(--neon)}
-.proto-badge{font-family:var(--fm);font-size:.55rem;color:var(--muted);padding:.1rem .4rem;background:var(--bg);border-radius:6px;border:1px solid var(--border)}
-.role-badge{font-size:.55rem;padding:.12rem .5rem;border-radius:12px;font-weight:600;margin-left:auto}
-.role-pastor{background:rgba(0,255,136,.15);color:var(--neon);border:1px solid rgba(0,255,136,.25)}
-.role-leader{background:rgba(0,224,255,.15);color:var(--cyan);border:1px solid rgba(0,224,255,.25)}
-.role-member{background:rgba(255,179,64,.15);color:var(--amber);border:1px solid rgba(255,179,64,.25)}
-.role-visitor{background:var(--surface);color:var(--muted);border:1px solid var(--border)}
-
-/* ── Viewport & Device ── */
-.viewport{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 30% 20%,rgba(0,255,136,.02) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(0,224,255,.015) 0%,transparent 50%),var(--bg);position:relative}
-.device{position:relative;transition:all var(--dur-slow) var(--ease-out);display:flex;flex-direction:column}
-.device.mobile{width:390px;height:844px;border-radius:48px;border:10px solid #07080a;box-shadow:0 0 0 1px rgba(42,46,55,.8),0 48px 96px rgba(0,0,0,.7),inset 0 0 0 1px rgba(26,29,35,.8),0 0 60px rgba(0,255,136,.05)}
-.device.tablet{width:768px;height:720px;border-radius:28px;border:8px solid #07080a;box-shadow:0 0 0 1px rgba(42,46,55,.8),0 48px 96px rgba(0,0,0,.7)}
-.device.desktop{width:1100px;height:720px;border-radius:16px;border:6px solid #07080a;box-shadow:0 0 0 1px rgba(42,46,55,.8),0 48px 96px rgba(0,0,0,.7)}
-.device.mobile::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:130px;height:32px;background:#07080a;border-radius:0 0 22px 22px;z-index:100}
-.screen{flex:1;background:var(--bg-elev);overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
-.device.mobile .screen{border-radius:38px;padding-top:42px}
-.device.tablet .screen{border-radius:20px}
-.device.desktop .screen{border-radius:10px}
-
-/* ── Screens ── */
-.s{display:none;flex-direction:column;min-height:100%}
-.s.show{display:flex;animation:fadeSlideUp .45s var(--ease-out)}
-.s.show.splash-anim{animation:fadeScale .6s var(--ease-out)}
-
-/* ── Glass Cards ── */
-.glass{background:var(--glass);backdrop-filter:blur(16px) saturate(1.2);border:1px solid var(--glass-border);border-radius:18px;box-shadow:var(--shadow-sm);transition:all var(--dur-fast) var(--ease-out);position:relative;overflow:hidden}
-.glass:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
-.glass::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
-
-/* ── Buttons ── */
-.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.75rem 1.5rem;border-radius:50px;font-family:var(--fb);font-weight:600;font-size:.85rem;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);border:none;text-decoration:none;position:relative;overflow:hidden}
-.btn::after{content:'';position:absolute;inset:0;border-radius:50px;opacity:0;transition:opacity var(--dur-fast);background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.12) 0%,transparent 60%)}
-.btn:hover::after{opacity:1}
-.btn:active{transform:scale(0.96)}
-.btn-primary{background:linear-gradient(135deg,var(--neon) 0%,#00D470 100%);color:#08090C;box-shadow:0 4px 16px rgba(0,255,136,.25),inset 0 1px 0 rgba(255,255,255,.2)}
-.btn-primary:hover{box-shadow:0 6px 24px rgba(0,255,136,.35)}
-.btn-glass{background:var(--glass);backdrop-filter:blur(10px);color:var(--text);border:1px solid var(--glass-border);box-shadow:var(--shadow-sm)}
-.btn-glass:hover{border-color:rgba(0,255,136,.2);color:var(--neon)}
-.btn-icon{width:38px;height:38px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem}
-
-/* ── Ripple ── */
-.ripple{position:relative;overflow:hidden}
-.ripple-circle{position:absolute;border-radius:50%;background:rgba(255,255,255,.2);transform:scale(0);animation:rippleAnim .5s linear;pointer-events:none}
-
-/* ── Bottom Nav ── */
-.bot-nav{position:fixed;bottom:0;left:0;right:0;background:var(--glass);backdrop-filter:blur(20px) saturate(1.3);border-top:1px solid var(--glass-border);display:flex;z-index:500;padding-bottom:env(safe-area-inset-bottom,0);box-shadow:0 -6px 24px rgba(0,0,0,.25)}
-.device .bot-nav{position:sticky;bottom:0;margin-top:auto}
-.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.55rem .15rem;cursor:pointer;gap:.15rem;border:none;background:none;color:var(--muted);position:relative;transition:all var(--dur-fast)}
-.nav-item i{font-size:1.05rem;transition:all var(--dur-fast)}
-.nav-item span{font-size:.55rem;letter-spacing:.2px;font-weight:500}
-.nav-item.active{color:var(--neon)}
-.nav-item.active i{filter:drop-shadow(0 0 6px rgba(0,255,136,.4));transform:translateY(-2px)}
-.nav-item.active span{font-weight:600}
-.nav-item::after{content:'';position:absolute;bottom:0;width:0;height:2px;border-radius:2px;background:var(--neon);transition:width var(--dur-normal) var(--ease-spring);box-shadow:0 0 6px var(--neon-glow)}
-.nav-item.active::after{width:20px}
-.nav-badge{position:absolute;top:0;right:calc(50% - 12px);width:6px;height:6px;border-radius:50%;background:var(--red);border:2px solid var(--bg-elev);animation:pulseGlow 2s infinite}
-
-/* ── Section Title ── */
-.sec-title{padding:.5rem 1rem .3rem;font-size:.62rem;color:var(--muted);letter-spacing:2px;text-transform:uppercase;font-family:var(--fm);font-weight:500;animation:fadeSlideUp .3s var(--ease-out) both}
-
-/* ── Status Chips ── */
-.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .55rem;border-radius:10px;font-size:.58rem;font-weight:600}
-.chip-visitor{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(255,179,64,.15)}
-.chip-believer{background:rgba(0,255,136,.1);color:var(--neon);border:1px solid rgba(0,255,136,.15)}
-.chip-leader{background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(0,224,255,.15)}
-.chip-inactive{background:rgba(122,129,148,.1);color:var(--muted);border:1px solid rgba(122,129,148,.15)}
-.chip-urgent{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,82,82,.15)}
-
-/* ── AI Suggestion Card ── */
-.ai-card{margin:0 1rem .75rem;border-radius:16px;padding:1rem;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(0,255,136,.05) 0%,rgba(0,224,255,.03) 100%);border:1px solid rgba(0,255,136,.1);animation:fadeSlideUp .45s var(--ease-out) both}
-.ai-card::before{content:'';position:absolute;top:0;left:0;width:2px;height:100%;background:var(--neon);border-radius:2px;box-shadow:0 0 10px var(--neon-glow)}
-.ai-icon{width:28px;height:28px;border-radius:8px;background:rgba(0,255,136,.08);display:flex;align-items:center;justify-content:center;color:var(--neon);font-size:.8rem;margin-right:.6rem;flex-shrink:0}
-.ai-title{font-size:.82rem;font-weight:600;margin-bottom:.15rem}
-.ai-text{font-size:.68rem;color:var(--text-sec);line-height:1.5}
-.ai-action{margin-top:.6rem;font-size:.65rem;color:var(--neon);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
-.ai-action:hover{text-decoration:underline}
-
-/* ── Member Card ── */
-.mem-card{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;margin:0 1rem .5rem;border-radius:16px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-border);cursor:pointer;transition:all var(--dur-fast);box-shadow:var(--shadow-sm);animation:fadeSlideUp .4s var(--ease-out) both}
-.mem-card:hover{transform:translateX(3px);border-color:rgba(255,255,255,.08);box-shadow:var(--shadow-md)}
-.mem-avatar{width:42px;height:42px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.9rem;flex-shrink:0;position:relative}
-.mem-avatar .status-dot{position:absolute;bottom:1px;right:1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg-elev)}
-.mem-avatar .status-dot.online{background:var(--neon)}
-.mem-avatar .status-dot.away{background:var(--amber)}
-.mem-avatar .status-dot.offline{background:var(--muted)}
-.mem-info{flex:1;min-width:0}
-.mem-name{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.mem-meta{font-size:.6rem;color:var(--text-sec);margin-top:.1rem;display:flex;align-items:center;gap:.4rem}
-.mem-stage{font-size:.55rem;padding:.1rem .4rem;border-radius:6px;background:rgba(0,224,255,.1);color:var(--cyan);font-weight:500}
-
-/* ── Journey Timeline ── */
-.journey-line{position:relative;padding-left:1.5rem;margin:0 1rem}
-.journey-line::before{content:'';position:absolute;left:.45rem;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--neon),var(--cyan),transparent);border-radius:1px}
-.j-node{position:relative;margin-bottom:1rem;animation:slideInRight .4s var(--ease-out) both}
-.j-dot{position:absolute;left:-1.12rem;top:.3rem;width:10px;height:10px;border-radius:50%;background:var(--neon);border:2px solid var(--bg-elev);box-shadow:0 0 8px var(--neon-glow)}
-.j-dot.done{background:var(--neon)}
-.j-dot.current{background:var(--cyan);animation:pulseGlow 2s infinite}
-.j-dot.pending{background:var(--border)}
-.j-card{padding:.75rem 1rem;border-radius:14px;background:var(--glass);border:1px solid var(--glass-border);margin-left:.3rem}
-.j-title{font-size:.78rem;font-weight:600;margin-bottom:.1rem}
-.j-date{font-size:.58rem;color:var(--muted);font-family:var(--fm)}
-
-/* ── Attendance Tracker ── */
-.att-track{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;margin:0 1rem .5rem;border-radius:16px;background:var(--glass);border:1px solid var(--glass-border)}
-.att-circle{width:44px;height:44px;border-radius:50%;background:var(--bg);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}
-.att-circle.present{border-color:var(--neon);background:rgba(0,255,136,.08)}
-.att-circle.absent{border-color:var(--red);background:var(--red-dim)}
-.att-circle.excused{border-color:var(--amber);background:var(--amber-dim)}
-.att-day{font-size:.55rem;color:var(--muted);font-family:var(--fm)}
-.att-check{font-size:1rem;color:var(--neon)}
-.att-info{flex:1}
-.att-name{font-size:.82rem;font-weight:600}
-.att-rate{font-size:.6rem;color:var(--text-sec)}
-.att-bar{height:4px;background:var(--bg);border-radius:2px;margin-top:.3rem;overflow:hidden;border:1px solid var(--border)}
-.att-fill{height:100%;background:linear-gradient(90deg,var(--neon),var(--cyan));border-radius:2px;transition:width .5s var(--ease-out)}
-
-/* ── Stats Grid ── */
-.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:0 1rem .75rem}
-.stat-card{padding:.9rem;border-radius:16px;background:var(--glass);border:1px solid var(--glass-border);position:relative;overflow:hidden;animation:fadeSlideUp .4s var(--ease-out) both}
-.stat-card::before{content:'';position:absolute;top:0;left:0;width:2px;height:100%}
-.stat-card.s-neon::before{background:var(--neon);box-shadow:0 0 8px var(--neon-glow)}
-.stat-card.s-cyan::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow)}
-.stat-card.s-amber::before{background:var(--amber)}
-.stat-card.s-pink::before{background:var(--pink)}
-.stat-num{font-family:var(--fm);font-size:1.6rem;font-weight:700;line-height:1}
-.stat-card.s-neon .stat-num{color:var(--neon)}
-.stat-card.s-cyan .stat-num{color:var(--cyan)}
-.stat-card.s-amber .stat-num{color:var(--amber)}
-.stat-card.s-pink .stat-num{color:var(--pink)}
-.stat-label{font-size:.6rem;color:var(--muted);margin-top:.2rem;text-transform:uppercase;letter-spacing:.5px}
-
-/* ── Toast ── */
-.toast-container{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:.4rem;pointer-events:none}
-.toast{background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:14px;padding:.7rem 1rem;color:var(--text);font-size:.78rem;display:flex;align-items:center;gap:.5rem;box-shadow:var(--shadow-md);animation:toastIn .35s var(--ease-out);pointer-events:auto}
-.toast i{color:var(--neon);font-size:.85rem}
-
-/* ── Skeleton ── */
-.skeleton{background:linear-gradient(90deg,var(--bg-elev) 25%,rgba(255,255,255,.03) 50%,var(--bg-elev) 75%);background-size:200% 100%;animation:shimmer 1.6s infinite;border-radius:6px}
-
-/* ── Modal ── */
-.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);z-index:900;display:none;align-items:flex-end;justify-content:center}
-.modal-overlay.open{display:flex;animation:fadeSlideUp .3s var(--ease-out)}
-.modal-sheet{background:var(--glass);backdrop-filter:blur(24px) saturate(1.3);border:1px solid var(--glass-border);border-radius:28px 28px 0 0;width:100%;max-width:500px;max-height:85vh;overflow-y:auto;padding:1.4rem;box-shadow:0 -12px 40px rgba(0,0,0,.4)}
-.modal-handle{width:40px;height:3px;background:var(--border);border-radius:2px;margin:0 auto 1.1rem}
-
-/* ── Form Fields ── */
-.fld-label{font-size:.62rem;color:var(--muted);margin-bottom:.3rem;display:block;padding-left:.25rem;font-weight:500;letter-spacing:.5px}
-.fld-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:.75rem .9rem;color:var(--text);font-family:var(--fb);font-size:.82rem;transition:all var(--dur-fast);outline:none;margin-bottom:.6rem}
-.fld-input:focus{border-color:rgba(0,255,136,.2);box-shadow:0 0 0 3px var(--neon-dim),0 0 12px rgba(0,255,136,.08)}
-.fld-input::placeholder{color:var(--muted)}
-
-/* ── Login Overlay (Role Selector) ── */
-.login-overlay{position:absolute;inset:0;background:var(--bg-elev);z-index:800;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}
-.login-overlay.hidden{display:none}
-.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;width:100%;max-width:280px;margin-top:1.2rem}
-.role-btn{padding:1rem;border-radius:16px;background:var(--glass);border:1px solid var(--glass-border);cursor:pointer;transition:all var(--dur-fast);display:flex;flex-direction:column;align-items:center;gap:.4rem}
-.role-btn:hover{border-color:rgba(0,255,136,.15);transform:translateY(-2px)}
-.role-btn.active{border-color:var(--neon);background:rgba(0,255,136,.08);box-shadow:0 0 16px rgba(0,255,136,.1)}
-.role-btn i{font-size:1.3rem;color:var(--muted);transition:color var(--dur-fast)}
-.role-btn.active i{color:var(--neon)}
-.role-btn span{font-size:.65rem;color:var(--text-sec);font-weight:500}
-.role-btn.active span{color:var(--text)}
-
-/* ── Page Transitions ── */
-.page-enter{animation:fadeSlideUp .4s var(--ease-out)}
-.page-enter-right{animation:slideInRight .4s var(--ease-out)}
-.page-enter-left{animation:slideInLeft .4s var(--ease-out)}
-
-/* ── Responsive font sizing for desktop ── */
-.device.desktop .screen{font-size:1.05rem}
-.device.desktop .nav-item span{font-size:.65rem}
-.device.desktop .sec-title{font-size:.68rem}
-.device.desktop .btn{font-size:.9rem;padding:.85rem 1.8rem}
+:root{--bg:#0a0d10;--bg-elev:#11151a;--surface:rgba(24,28,35,0.8);--glass:rgba(24,28,35,0.6);--glass-border:rgba(255,255,255,0.06);--neon:#00FF88;--neon-dim:rgba(0,255,136,0.12);--neon-glow:rgba(0,255,136,0.3);--cyan:#00E0FF;--cyan-dim:rgba(0,224,255,0.12);--amber:#FFB340;--amber-dim:rgba(255,179,64,0.12);--pink:#FF7AAE;--pink-dim:rgba(255,122,174,0.12);--red:#FF5252;--red-dim:rgba(255,82,82,0.12);--purple:#B388FF;--text:#F0F2F5;--text-sec:rgba(240,242,245,0.65);--muted:#7A8194;--border:rgba(255,255,255,0.06);--shadow-sm:0 2px 8px rgba(0,0,0,0.3);--shadow-md:0 8px 32px rgba(0,0,0,0.4);--shadow-glow:0 0 40px rgba(0,255,136,0.15);--fh:'Noto Serif Thai',Georgia,serif;--fb:'Noto Sans Thai',system-ui,sans-serif;--fm:'JetBrains Mono',monospace;--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);--dur-fast:0.2s;--dur-normal:0.35s;--dur-slow:0.6s}
+*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{font-size:16px;overflow:hidden}body{font-family:var(--fb);background:var(--bg);color:var(--text);overflow:hidden;height:100vh;display:flex;flex-direction:column;accent-color:var(--neon)}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--muted);border-radius:4px}
+@keyframes f{from{opacity:0;transform:translateY(20px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fs{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}@keyframes sr{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}@keyframes sl{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes pg{0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,0.3)}50%{box-shadow:0 0 20px 6px rgba(0,255,136,0)}}@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes sp{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes sh{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes ti{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes rp{to{transform:scale(3);opacity:0}}@keyframes bb{0%,100%{height:3px}50%{height:16px}}@keyframes lp{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}
+.p{background:var(--glass);backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid var(--glass-border);padding:.45rem 1rem;display:flex;align-items:center;gap:1rem;z-index:9999;flex-shrink:0}.pt{font-family:var(--fm);font-size:.65rem;color:var(--neon);letter-spacing:2px;text-transform:uppercase}.ps{display:flex;gap:.3rem;flex-wrap:wrap}.pb{background:var(--bg);border:1px solid var(--border);color:var(--muted);padding:.25rem .65rem;border-radius:20px;font-size:.62rem;cursor:pointer;font-family:var(--fb);transition:all var(--dur-fast) var(--ease-out);white-space:nowrap}.pb:hover{color:var(--neon);border-color:var(--neon-dim)}.pb.ac{background:rgba(0,255,136,0.1);color:var(--neon);border-color:rgba(0,255,136,0.25);box-shadow:0 0 8px rgba(0,255,136,.1)}.pd{margin-left:auto;display:flex;align-items:center;gap:.3rem}.db{background:none;border:1px solid var(--border);color:var(--muted);padding:.2rem .5rem;border-radius:6px;cursor:pointer;font-size:.65rem;transition:all var(--dur-fast)}.db:hover,.db.ac{color:var(--neon);border-color:var(--neon)}.bd{font-family:var(--fm);font-size:.55rem;color:var(--muted);padding:.1rem .4rem;background:var(--bg);border-radius:6px;border:1px solid var(--border)}.rb{font-size:.55rem;padding:.12rem .5rem;border-radius:12px;font-weight:600;margin-left:auto}.rpst{background:rgba(0,255,136,.15);color:var(--neon);border:1px solid rgba(0,255,136,.25)}.rldr{background:rgba(0,224,255,.15);color:var(--cyan);border:1px solid rgba(0,224,255,.25)}.rmb{background:rgba(255,179,64,.15);color:var(--amber);border:1px solid rgba(255,179,64,.25)}.rv{background:var(--surface);color:var(--muted);border:1px solid var(--border)}
+.v{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 30% 20%,rgba(0,255,136,.02) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(0,224,255,.015) 0%,transparent 50%),var(--bg);position:relative}.d{position:relative;transition:all var(--dur-slow) var(--ease-out);display:flex;flex-direction:column}.d.m{width:390px;height:844px;border-radius:48px;border:10px solid #07080a;box-shadow:0 0 0 1px rgba(42,46,55,.8),0 48px 96px rgba(0,0,0,.7),inset 0 0 0 1px rgba(26,29,35,.8),0 0 60px rgba(0,255,136,.05)}.d.t{width:768px;height:720px;border-radius:28px;border:8px solid #07080a;box-shadow:0 0 0 1px rgba(42,46,55,.8),0 48px 96px rgba(0,0,0,.7)}.d.x{width:1100px;height:720px;border-radius:16px;border:6px solid #07080a;box-shadow:0 0 0 1px rgba(42,46,55,.8),0 48px 96px rgba(0,0,0,.7)}.d.m::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:130px;height:32px;background:#07080a;border-radius:0 0 22px 22px;z-index:100}.sc{flex:1;background:var(--bg-elev);overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin;scrollbar-color:var(--muted) transparent}.d.m .sc{border-radius:38px;padding-top:42px}.d.t .sc{border-radius:20px}.d.x .sc{border-radius:10px}
+.s{display:none;flex-direction:column;min-height:100%}.s.sh{display:flex;animation:f .45s var(--ease-out)}.s.sa{animation:fs .6s var(--ease-out)}
+.g{background:var(--glass);backdrop-filter:blur(16px) saturate(1.2);border:1px solid var(--glass-border);border-radius:18px;box-shadow:var(--shadow-sm);transition:all var(--dur-fast) var(--ease-out);position:relative;overflow:hidden}.g:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.g::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
+.b{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.75rem 1.5rem;border-radius:50px;font-family:var(--fb);font-weight:600;font-size:.85rem;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);border:none;position:relative;overflow:hidden}.b::after{content:'';position:absolute;inset:0;border-radius:50px;opacity:0;transition:opacity var(--dur-fast);background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.12) 0%,transparent 60%)}.b:hover::after{opacity:1}.b:active{transform:scale(0.96)}.bp{background:linear-gradient(135deg,var(--neon) 0%,#00D470 100%);color:#08090C;box-shadow:0 4px 16px rgba(0,255,136,.25),inset 0 1px 0 rgba(255,255,255,.2)}.bp:hover{box-shadow:0 6px 24px rgba(0,255,136,.35)}.bg{background:var(--glass);backdrop-filter:blur(10px);color:var(--text);border:1px solid var(--glass-border);box-shadow:var(--shadow-sm)}.bg:hover{border-color:rgba(0,255,136,.2);color:var(--neon)}.bi{width:38px;height:38px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem}
+.rp{position:relative;overflow:hidden}.rpc{position:absolute;border-radius:50%;background:rgba(255,255,255,.2);transform:scale(0);animation:rp .5s linear;pointer-events:none}
+.bn{position:fixed;bottom:0;left:0;right:0;background:var(--glass);backdrop-filter:blur(20px) saturate(1.3);border-top:1px solid var(--glass-border);display:flex;z-index:500;padding-bottom:env(safe-area-inset-bottom,0);box-shadow:0 -6px 24px rgba(0,0,0,.25)}.d .bn{position:sticky;bottom:0;margin-top:auto}.ni{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.55rem .15rem;cursor:pointer;gap:.15rem;border:none;background:none;color:var(--muted);position:relative;transition:all var(--dur-fast)}.ni i{font-size:1.05rem;transition:all var(--dur-fast)}.ni span{font-size:.55rem;letter-spacing:.2px;font-weight:500}.ni.ac{color:var(--neon)}.ni.ac i{filter:drop-shadow(0 0 6px rgba(0,255,136,.4));transform:translateY(-2px)}.ni.ac span{font-weight:600}.ni::after{content:'';position:absolute;bottom:0;width:0;height:2px;border-radius:2px;background:var(--neon);transition:width var(--dur-normal) var(--ease-spring);box-shadow:0 0 6px var(--neon-glow)}.ni.ac::after{width:20px}.nb{position:absolute;top:0;right:calc(50% - 12px);width:6px;height:6px;border-radius:50%;background:var(--red);border:2px solid var(--bg-elev);animation:pg 2s infinite}
+.st{padding:.5rem 1rem .3rem;font-size:.62rem;color:var(--muted);letter-spacing:2px;text-transform:uppercase;font-family:var(--fm);font-weight:500;animation:f .3s var(--ease-out) both}
+.ch{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .55rem;border-radius:10px;font-size:.58rem;font-weight:600}.cv{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(255,179,64,.15)}.cb{background:rgba(0,255,136,.1);color:var(--neon);border:1px solid rgba(0,255,136,.15)}.cl{background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(0,224,255,.15)}.ci{background:rgba(122,129,148,.1);color:var(--muted);border:1px solid rgba(122,129,148,.15)}.cu{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,82,82,.15)}
+.ai{margin:0 1rem .75rem;border-radius:16px;padding:1rem;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(0,255,136,.05) 0%,rgba(0,224,255,.03) 100%);border:1px solid rgba(0,255,136,.1);animation:f .45s var(--ease-out) both}.ai::before{content:'';position:absolute;top:0;left:0;width:2px;height:100%;background:var(--neon);border-radius:2px;box-shadow:0 0 10px var(--neon-glow)}.aii{width:28px;height:28px;border-radius:8px;background:rgba(0,255,136,.08);display:flex;align-items:center;justify-content:center;color:var(--neon);font-size:.8rem;margin-right:.6rem;flex-shrink:0}.ait{font-size:.82rem;font-weight:600;margin-bottom:.15rem}.aix{font-size:.68rem;color:var(--text-sec);line-height:1.5}.aia{margin-top:.6rem;font-size:.65rem;color:var(--neon);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
+.mc{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;margin:0 1rem .5rem;border-radius:16px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-border);cursor:pointer;transition:all var(--dur-fast);box-shadow:var(--shadow-sm);animation:f .4s var(--ease-out) both}.mc:hover{transform:translateX(3px);border-color:rgba(255,255,255,.08);box-shadow:var(--shadow-md)}.ma{width:42px;height:42px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.9rem;flex-shrink:0;position:relative}.ma .sd{position:absolute;bottom:1px;right:1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg-elev)}.ma .sd.on{background:var(--neon)}.ma .sd.aw{background:var(--amber)}.ma .sd.of{background:var(--muted)}.mn{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mm{font-size:.6rem;color:var(--text-sec);margin-top:.1rem;display:flex;align-items:center;gap:.4rem}.ms{font-size:.55rem;padding:.1rem .4rem;border-radius:6px;background:rgba(0,224,255,.1);color:var(--cyan);font-weight:500}
+.jl{position:relative;padding-left:1.5rem;margin:0 1rem}.jl::before{content:'';position:absolute;left:.45rem;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--neon),var(--cyan),transparent);border-radius:1px}.jn{position:relative;margin-bottom:1rem;animation:sr .4s var(--ease-out) both}.jd{position:absolute;left:-1.12rem;top:.3rem;width:10px;height:10px;border-radius:50%;background:var(--neon);border:2px solid var(--bg-elev);box-shadow:0 0 8px var(--neon-glow)}.jd.dn{background:var(--neon)}.jd.cr{background:var(--cyan);animation:pg 2s infinite}.jd.pd{background:var(--border)}.jc{padding:.75rem 1rem;border-radius:14px;background:var(--glass);border:1px solid var(--glass-border);margin-left:.3rem}.jt{font-size:.78rem;font-weight:600;margin-bottom:.1rem}.jdt{font-size:.58rem;color:var(--muted);font-family:var(--fm)}
+.at{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;margin:0 1rem .5rem;border-radius:16px;background:var(--glass);border:1px solid var(--glass-border)}.ac{width:44px;height:44px;border-radius:50%;background:var(--bg);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}.ac.pr{border-color:var(--neon);background:rgba(0,255,136,.08)}.ac.ab{border-color:var(--red);background:var(--red-dim)}.ac.ex{border-color:var(--amber);background:var(--amber-dim)}.ad{font-size:.55rem;color:var(--muted);font-family:var(--fm)}.ai2{flex:1}.an{font-size:.82rem;font-weight:600}.ar{font-size:.6rem;color:var(--text-sec)}.ab2{height:4px;background:var(--bg);border-radius:2px;margin-top:.3rem;overflow:hidden;border:1px solid var(--border)}.af{height:100%;background:linear-gradient(90deg,var(--neon),var(--cyan));border-radius:2px;transition:width .5s var(--ease-out)}
+.sg{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:0 1rem .75rem}.sc2{padding:.9rem;border-radius:16px;background:var(--glass);border:1px solid var(--glass-border);position:relative;overflow:hidden;animation:f .4s var(--ease-out) both}.sc2::before{content:'';position:absolute;top:0;left:0;width:2px;height:100%}.sc2.sn::before{background:var(--neon);box-shadow:0 0 8px var(--neon-glow)}.sc2.sc::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow)}.sc2.sa::before{background:var(--amber)}.sc2.sp::before{background:var(--pink)}.sn2{font-family:var(--fm);font-size:1.6rem;font-weight:700;line-height:1}.sc2.sn .sn2{color:var(--neon)}.sc2.sc .sn2{color:var(--cyan)}.sc2.sa .sn2{color:var(--amber)}.sc2.sp .sn2{color:var(--pink)}.sl{font-size:.6rem;color:var(--muted);margin-top:.2rem;text-transform:uppercase;letter-spacing:.5px}
+.tc{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:.4rem;pointer-events:none}.t{background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:14px;padding:.7rem 1rem;color:var(--text);font-size:.78rem;display:flex;align-items:center;gap:.5rem;box-shadow:var(--shadow-md);animation:ti .35s var(--ease-out);pointer-events:auto}.t i{color:var(--neon);font-size:.85rem}.sk{background:linear-gradient(90deg,var(--bg-elev) 25%,rgba(255,255,255,.03) 50%,var(--bg-elev) 75%);background-size:200% 100%;animation:sh 1.6s infinite;border-radius:6px}
+.mo{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);z-index:900;display:none;align-items:flex-end;justify-content:center}.mo.op{display:flex;animation:f .3s var(--ease-out)}.ms2{background:var(--glass);backdrop-filter:blur(24px) saturate(1.3);border:1px solid var(--glass-border);border-radius:28px 28px 0 0;width:100%;max-width:500px;max-height:85vh;overflow-y:auto;padding:1.4rem;box-shadow:0 -12px 40px rgba(0,0,0,.4)}.mh{width:40px;height:3px;background:var(--border);border-radius:2px;margin:0 auto 1.1rem}
+.fl{font-size:.62rem;color:var(--muted);margin-bottom:.3rem;display:block;padding-left:.25rem;font-weight:500;letter-spacing:.5px}.fi{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:.75rem .9rem;color:var(--text);font-family:var(--fb);font-size:.82rem;transition:all var(--dur-fast);outline:none;margin-bottom:.6rem}.fi:focus{border-color:rgba(0,255,136,.2);box-shadow:0 0 0 3px var(--neon-dim),0 0 12px rgba(0,255,136,.08)}.fi::placeholder{color:var(--muted)}
+.lo{position:absolute;inset:0;background:var(--bg-elev);z-index:800;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.lo.hd{display:none}.rg{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;width:100%;max-width:280px;margin-top:1.2rem}.rbtn{padding:1rem;border-radius:16px;background:var(--glass);border:1px solid var(--glass-border);cursor:pointer;transition:all var(--dur-fast);display:flex;flex-direction:column;align-items:center;gap:.4rem}.rbtn:hover{border-color:rgba(0,255,136,.15);transform:translateY(-2px)}.rbtn.ac{border-color:var(--neon);background:rgba(0,255,136,.08);box-shadow:0 0 16px rgba(0,255,136,.1)}.rbtn i{font-size:1.3rem;color:var(--muted);transition:color var(--dur-fast)}.rbtn.ac i{color:var(--neon)}.rbtn span{font-size:.65rem;color:var(--text-sec);font-weight:500}.rbtn.ac span{color:var(--text)}
+.d.x .sc{font-size:1.05rem}.d.x .ni span{font-size:.65rem}.d.x .st{font-size:.68rem}.d.x .b{font-size:.9rem;padding:.85rem 1.8rem}
 </style>
 </head>
 <body>