@import"https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;700&family=Noto+Serif+Thai:wght@400;600;700&family=Bebas+Neue&display=swap";:root{--gold: #D4A843;--gold-light: #FFD966;--gold-dim: #8A6E2F;--bg: #050b14;--bg-2: #091120;--bg-3: #0e1929;--bg-4: #14243a;--surface: rgba(255,255,255,.05);--surface-2: rgba(255,255,255,.09);--glass-bg: rgba(12,22,42,.65);--glass-bg-2: rgba(18,32,58,.72);--glass-border: rgba(255,255,255,.08);--blur: blur(20px);--border: rgba(255,255,255,.07);--border-2: rgba(201,168,76,.28);--text: #EBE9F5;--text-2: #8892AA;--text-3: #505A72;--red: #E05555;--green: #3CB87A;--blue: #5B9CF6;--purple: #818CF8;--radius: 12px;--radius-lg: 18px;--shadow-gold: 0 0 40px rgba(201,168,76,.14);--shadow-glass: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);--font-display: "Bebas Neue", sans-serif;--font-thai: "Sarabun", sans-serif;--font-serif: "Noto Serif Thai", serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-thai);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#c9a84c59}h1,h2,h3{font-family:var(--font-serif);color:var(--gold-light);line-height:1.3}a{color:var(--gold);text-decoration:none}a:hover{color:var(--gold-light)}.page-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--bg)}.page-bg:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 70% at 10% -5%,rgba(99,102,241,.18) 0%,transparent 55%),radial-gradient(ellipse 60% 55% at 90% 105%,rgba(79,70,229,.12) 0%,transparent 50%),radial-gradient(ellipse 55% 45% at 55% 50%,rgba(201,168,76,.05) 0%,transparent 60%)}.page-bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px}.card{background:var(--glass-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-glass);transition:border-color .2s,box-shadow .2s}.card:hover{border-color:#ffffff21;box-shadow:0 12px 40px #00000080,inset 0 1px #ffffff12}.card-gold{background:linear-gradient(135deg,#c9a84c1a,#0c162ab3);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-gold),var(--shadow-glass)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.65rem 1.5rem;border-radius:var(--radius);border:none;cursor:pointer;font-family:var(--font-thai);font-size:.95rem;font-weight:500;transition:all .18s;white-space:nowrap}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-gold{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 60%,var(--gold) 100%);color:#1a1408;box-shadow:0 4px 16px #c9a84c4d}.btn-gold:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 8px 28px #c9a84c7a}.btn-outline{background:#ffffff0a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);color:var(--text-2)}.btn-outline:hover:not(:disabled){border-color:#c9a84c73;color:var(--gold-light);background:#c9a84c12}.btn-ghost{background:transparent;color:var(--text-2);padding:.5rem 1rem}.btn-ghost:hover{color:var(--text);background:#ffffff0d}.btn-danger{background:#e055551a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(224,85,85,.28);color:var(--red)}.btn-danger:hover:not(:disabled){background:#e0555529}.input{width:100%;background:#ffffff0a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:.7rem 1rem;color:var(--text);font-family:var(--font-thai);font-size:.95rem;outline:none;transition:border-color .2s,box-shadow .2s}.input:focus{border-color:#c9a84c80;box-shadow:0 0 0 3px #c9a84c1f}.input::placeholder{color:var(--text-3)}.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:.75rem;font-weight:500;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.badge-gold{background:#c9a84c1f;color:var(--gold-light);border:1px solid rgba(201,168,76,.3)}.badge-green{background:#3cb87a1a;color:var(--green);border:1px solid rgba(60,184,122,.22)}.badge-red{background:#e055551a;color:var(--red);border:1px solid rgba(224,85,85,.22)}.badge-blue{background:#5b9cf61a;color:var(--blue);border:1px solid rgba(91,156,246,.22)}.badge-gray{background:#ffffff0f;color:var(--text-2);border:1px solid rgba(255,255,255,.1)}.stat-num{font-family:var(--font-display);font-size:2.2rem;color:var(--gold-light);line-height:1}.num-ball{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font-family:var(--font-display);font-size:1.2rem;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:var(--text-2);transition:all .2s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.num-ball.hot{background:#c9a84c26;border-color:#c9a84c73;color:var(--gold-light);box-shadow:0 0 16px #c9a84c33}.num-ball.cold{background:#5b9cf61a;border-color:#5b9cf659;color:var(--blue)}.num-ball.win{background:#3cb87a26;border-color:#3cb87a80;color:var(--green);box-shadow:0 0 22px #3cb87a4d;animation:pulse-win .6s ease}@keyframes pulse-win{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes fade-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes shimmer{0%,to{opacity:.4}50%{opacity:.8}}@keyframes spin{to{transform:rotate(360deg)}}.anim-fade-up{animation:fade-up .4s ease both}.anim-fade-in{animation:fade-in .3s ease both}.skeleton{background:linear-gradient(90deg,#ffffff0a 25%,#ffffff14,#ffffff0a 75%);background-size:200%;animation:shimmer 1.6s infinite;border-radius:6px}.layout{display:flex;min-height:100vh}.sidebar{width:240px;flex-shrink:0;background:#050b14d1;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;padding:1.5rem 0;position:sticky;top:0;height:100vh}.main-content{flex:1;overflow-y:auto;padding:2rem;max-width:1100px}.nav-item{display:flex;align-items:center;gap:10px;padding:.65rem 1.5rem;color:var(--text-2);font-size:.9rem;cursor:pointer;transition:all .15s;border-left:3px solid transparent}.nav-item:hover{color:var(--text);background:#ffffff0a}.nav-item.active{color:var(--gold-light);background:linear-gradient(90deg,#c9a84c1f,#c9a84c05);border-left-color:var(--gold-light)}.table{width:100%;border-collapse:collapse;font-size:.9rem}.table th{text-align:left;padding:.75rem 1rem;color:var(--text-3);font-weight:500;border-bottom:1px solid rgba(255,255,255,.06);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}.table td{padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text-2)}.table tr:hover td{background:#ffffff06}.progress-bar{height:6px;background:#ffffff0f;border-radius:3px;overflow:hidden}.progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold-dim),var(--gold-light));transition:width .4s ease}.divider{border:none;border-top:1px solid rgba(255,255,255,.06);margin:1.25rem 0}.form-label{font-size:.8rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem;display:block}.grid-charts{display:grid;grid-template-columns:2fr 1fr;gap:1.25rem;margin-bottom:1.5rem}.grid-endpoints{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2rem}.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}@media (max-width: 768px){.sidebar{display:none}.main-content,.card,.card-gold{padding:1rem}.grid-charts,.grid-endpoints{grid-template-columns:1fr}.table-scroll{border-radius:var(--radius-lg)}.table th,.table td{padding:.55rem .75rem;font-size:.8rem}}.no-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}.no-select img{pointer-events:none;-webkit-user-drag:none}