@import"https://fonts.googleapis.com/css2?family=Sarabun:wght@100;200;300;400;500;600;700;800;900&display=swap";:root{--ku-green-50: #f0fdf4;--ku-green-100: #dcfce7;--ku-green-200: #bbf7d0;--ku-green-300: #86efac;--ku-green-400: #4ade80;--ku-green-500: #22c55e;--ku-green-600: #16a34a;--ku-green-700: #15803d;--ku-green-800: #166534;--ku-green-900: #14532d;--ku-blue-50: #eff6ff;--ku-blue-100: #dbeafe;--ku-blue-200: #bfdbfe;--ku-blue-300: #93c5fd;--ku-blue-400: #60a5fa;--ku-blue-500: #3b82f6;--ku-blue-600: #2563eb;--ku-blue-700: #1d4ed8;--ku-blue-800: #1e40af;--ku-blue-900: #1e3a8a;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-2xl: 2rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25)}*{box-sizing:border-box}body{font-family:Sarabun,sans-serif;line-height:1.6;color:#f6f8f9;background:linear-gradient(135deg,#f8fafc,#e2e8f0);min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,var(--ku-green-400),var(--ku-blue-500));border-radius:4px;transition:background var(--transition-normal)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,var(--ku-green-500),var(--ku-blue-600))}.glass-effect{background:#ffffffe6;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);box-shadow:var(--shadow-xl)}.nav-glass{background:#fffffff2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.3);box-shadow:var(--shadow-lg)}.mobile-menu-glass{background:#fffffffa;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.3)}.luxury-card{background:#fffffff2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-md);box-shadow:var(--shadow-2xl);transition:all var(--transition-normal);position:relative;overflow:hidden}.luxury-card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);opacity:0;transition:opacity var(--transition-normal)}.luxury-card:hover{transform:translateY(-5px);box-shadow:0 35px 60px -12px #0003;border-color:#fff6}.luxury-card:hover:before{opacity:1}.luxury-gradient{background:linear-gradient(135deg,#667eea,#764ba2)}.ku-gradient{background:linear-gradient(135deg,var(--ku-green-500) 0%,var(--ku-green-600) 50%,var(--ku-green-700) 100%)}.hero-gradient{background:linear-gradient(135deg,var(--ku-blue-900) 0%,var(--ku-blue-700) 25%,var(--ku-blue-600) 50%,var(--ku-green-500) 75%,var(--ku-green-600) 100%)}.btn-luxury{background:linear-gradient(135deg,var(--ku-green-500),var(--ku-green-600));color:#fff;padding:.75rem 1.5rem;border-radius:var(--radius-xl);font-weight:600;border:none;cursor:pointer;transition:all var(--transition-normal);box-shadow:0 10px 25px -5px #22c55e4d;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}.btn-luxury:hover{transform:translateY(-2px);box-shadow:0 15px 35px -5px #22c55e66;background:linear-gradient(135deg,var(--ku-green-600),var(--ku-green-700))}.btn-luxury:active{transform:translateY(0)}.btn-luxury:disabled{opacity:.6;cursor:not-allowed;transform:none}.menu-item{transition:all var(--transition-normal);position:relative;overflow:hidden;cursor:pointer}.menu-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease;z-index:1}.menu-item:hover:before{left:100%}.menu-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}.menu-item.active{background:#22c55e1a;border-color:var(--ku-green-500);color:var(--ku-green-700)}.status-indicator{position:relative;display:inline-block}.status-indicator:before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.3;animation:pulse-indicator 2s cubic-bezier(.4,0,.6,1) infinite}.status-indicator.online:before{background-color:var(--ku-green-400)}.status-indicator.offline:before{background-color:#ef4444}.status-indicator.warning:before{background-color:#f59e0b}.notification-badge{animation:pulse-notification 2s cubic-bezier(.4,0,.6,1) infinite}.loading-spinner{border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top:3px solid var(--ku-green-500);width:20px;height:20px;animation:spin 1s linear infinite}.chart-container{position:relative;height:300px;width:100%}.form-control{width:100%;padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:var(--radius-lg);background:#fff;transition:all var(--transition-normal);font-family:inherit}.form-control:focus{outline:none;border-color:var(--ku-green-500);box-shadow:0 0 0 3px #22c55e1a}.form-control:disabled{background:#f9fafb;cursor:not-allowed}.progress-bar{width:100%;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--ku-green-500),var(--ku-blue-500));border-radius:inherit;transition:width var(--transition-slow);position:relative}.progress-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse-indicator{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}@keyframes pulse-notification{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUp{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleZ(1)}}.animate-fade-in{animation:fadeIn .5s ease-in-out}.animate-slide-down{animation:slideDown .3s ease-out}.animate-slide-up{animation:slideUp .3s ease-out}.animate-bounce-in{animation:bounceIn .6s ease-out}.animate-pulse-slow{animation:pulse-indicator 3s cubic-bezier(.4,0,.6,1) infinite}@media (prefers-color-scheme: dark){.luxury-card{background:#1e293be6;border-color:#4755694d;color:#f1f5f9}.glass-effect{background:#1e293be6;border-color:#4755694d}.nav-glass{background:#0f172af2;border-color:#4755694d}}@media (max-width: 768px){.chart-container{height:250px}.luxury-card{padding:1rem;margin:.5rem}.btn-luxury{padding:.5rem 1rem;font-size:.875rem}.menu-item{padding:.75rem}}@media (max-width: 640px){.hero-gradient{padding:1.5rem 1rem}.chart-container{height:200px}}@media print{.luxury-card{background:#fff!important;box-shadow:none!important;border:1px solid #e5e7eb!important}.btn-luxury,.menu-item,.nav-glass{display:none!important}.chart-container{height:400px!important}}@media (prefers-contrast: high){.luxury-card{border-width:2px;border-color:#000}.btn-luxury{border:2px solid #000}.menu-item:hover{outline:2px solid #000}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.loading-spinner{animation:none;border-top-color:var(--ku-green-500)}}.focus-visible:focus{outline:2px solid var(--ku-green-500);outline-offset:2px}.toast-container{position:fixed;bottom:1rem;right:1rem;z-index:9999;max-width:420px}.toast{background:var(--glass-effect);border-radius:var(--radius-xl);padding:1rem;margin-bottom:.5rem;border-left:4px solid var(--ku-green-500);box-shadow:var(--shadow-xl);transform:translate(100%);transition:transform var(--transition-normal)}.toast.show{transform:translate(0)}.toast.success{border-left-color:var(--ku-green-500)}.toast.error{border-left-color:#ef4444}.toast.warning{border-left-color:#f59e0b}.toast.info{border-left-color:var(--ku-blue-500)}