@import"https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap";:root{--bg-primary: #0a0a0f;--bg-gradient-start: #1a1a2e;--bg-gradient-end: #0f0f1a;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--glass-hover: rgba(255, 255, 255, .08);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--text-tertiary: rgba(255, 255, 255, .5);--accent-primary: #0a84ff;--accent-hover: #409cff;--accent-glow: rgba(10, 132, 255, .3);--success: #30d158;--success-glow: rgba(48, 209, 88, .2);--warning: #ff9f0a;--warning-glow: rgba(255, 159, 10, .2);--error: #ff453a;--error-glow: rgba(255, 69, 58, .2);--font-family: "Work Sans", "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--blur-sm: 10px;--blur-md: 20px;--blur-lg: 40px}body{background:#000;color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-normal);letter-spacing:var(--letter-spacing-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;position:relative}@keyframes BackgroundGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--glass-bg);border-radius:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}::-webkit-scrollbar-thumb:hover{background:var(--glass-hover)}input,textarea,select{background:var(--glass-bg);backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));color:var(--text-primary);border:2px solid var(--glass-border);padding:.875rem 1rem;min-height:44px;width:100%;border-radius:var(--radius-md);font-size:var(--font-size-base);font-family:var(--font-family);line-height:var(--line-height-normal);transition:all .3s cubic-bezier(.4,0,.2,1);outline:none}input:hover,textarea:hover,select:hover{background:var(--glass-hover);border-color:#fff3}input:focus,textarea:focus,select:focus{background:#ffffff1a;border-color:var(--accent-primary);border-width:2px;box-shadow:0 0 0 4px var(--accent-glow),0 8px 16px #0000004d;transform:translateY(-1px);outline:2px solid transparent;outline-offset:2px}select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23ffffff' stroke-opacity='0.7' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:1.25em 1.25em;padding-right:2.5rem}button{background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-hover) 100%);color:#fff;border:none;padding:.875rem 1.75rem;min-height:44px;min-width:44px;cursor:pointer;border-radius:var(--radius-md);font-weight:600;font-size:var(--font-size-base);font-family:var(--font-family);line-height:var(--line-height-tight);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px var(--accent-glow),0 2px 4px #0003;position:relative;overflow:hidden}button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 100%);opacity:0;transition:opacity .3s ease}button:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--accent-glow),0 4px 8px #0000004d}button:hover:before{opacity:1}button:active{transform:translateY(0)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}button.secondary{background:var(--glass-bg);backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));color:var(--text-primary);border:1px solid var(--glass-border);box-shadow:0 4px 12px #0003}button.secondary:hover{background:var(--glass-hover);border-color:#fff3;box-shadow:0 8px 20px #0000004d}label{display:block;font-size:var(--font-size-xs);font-weight:600;color:var(--text-secondary);margin-bottom:var(--spacing-sm);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider);line-height:var(--line-height-tight)}.glass-card{background:var(--glass-bg);backdrop-filter:blur(var(--blur-lg));-webkit-backdrop-filter:blur(var(--blur-lg));border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a}.border{border:1px solid var(--glass-border)}.border-b{border-bottom:1px solid var(--glass-border)}.transition{transition:all .3s cubic-bezier(.4,0,.2,1)}.badge{display:inline-flex;align-items:center;padding:.375rem 1rem;border-radius:9999px;font-size:var(--font-size-xs);font-weight:600;letter-spacing:.025em;backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));border:1px solid}.badge-primary{background:var(--accent-glow);color:var(--accent-primary);border-color:var(--accent-primary);box-shadow:0 0 20px var(--accent-glow)}.badge-success{background:var(--success-glow);color:var(--success);border-color:var(--success);box-shadow:0 0 20px var(--success-glow)}.badge-warning{background:var(--warning-glow);color:var(--warning);border-color:var(--warning);box-shadow:0 0 20px var(--warning-glow)}.badge-error{background:var(--error-glow);color:var(--error);border-color:var(--error);box-shadow:0 0 20px var(--error-glow)}input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;padding:0}input[type=range]::-webkit-slider-track{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:9999px;height:8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-hover));height:20px;width:20px;border-radius:50%;border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 8px var(--accent-glow);transition:all .2s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px var(--accent-glow)}input[type=range]::-moz-range-track{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:9999px;height:8px}input[type=range]::-moz-range-thumb{background:linear-gradient(135deg,var(--accent-primary),var(--accent-hover));height:20px;width:20px;border-radius:50%;border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 8px var(--accent-glow)}.glow-accent{box-shadow:0 0 20px var(--accent-glow)}.glow-success{box-shadow:0 0 20px var(--success-glow)}.glow-warning{box-shadow:0 0 20px var(--warning-glow)}.glow-error{box-shadow:0 0 20px var(--error-glow)}:root{--bg-primary: #0f1419;--bg-secondary: #1a1f2e;--bg-tertiary: #252d3d;--bg-elevated: #2a3447;--text-primary: #f0f2f5;--text-secondary: #9ca3af;--text-tertiary: #6b7280;--accent-primary: #3b82f6;--accent-hover: #2563eb;--accent-light: rgba(59, 130, 246, .1);--success: #10b981;--success-light: rgba(16, 185, 129, .1);--warning: #f59e0b;--warning-light: rgba(245, 158, 11, .1);--error: #ef4444;--error-light: rgba(239, 68, 68, .1);--border-primary: #374151;--border-secondary: #4b5563;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5), 0 4px 6px -2px rgba(0, 0, 0, .4);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .6), 0 10px 10px -5px rgba(0, 0, 0, .4);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-secondary)}input,textarea,select{background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-primary);padding:.625rem .875rem;width:100%;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-family:var(--font-family);transition:all .2s ease;outline:none}input::placeholder,textarea::placeholder{color:var(--text-tertiary)}input:hover,textarea:hover,select:hover{border-color:var(--border-secondary)}input:focus,textarea:focus,select:focus{border-color:var(--accent-primary);background-color:var(--bg-tertiary);box-shadow:0 0 0 3px var(--accent-light)}input[type=date]{color-scheme:dark}textarea{resize:vertical;min-height:80px}select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}button{background:var(--accent-primary);color:#fff;border:none;padding:.625rem 1.25rem;cursor:pointer;border-radius:var(--radius-md);font-weight:600;font-size:var(--font-size-sm);font-family:var(--font-family);transition:all .2s ease;box-shadow:var(--shadow-sm)}button:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button.secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-primary);box-shadow:none}button.secondary:hover{background:var(--bg-elevated);border-color:var(--border-secondary);transform:none;box-shadow:none}label{display:block;font-size:var(--font-size-xs);font-weight:600;color:var(--text-secondary);margin-bottom:.375rem;text-transform:uppercase;letter-spacing:.05em}.text-xs{font-size:var(--font-size-xs)}.text-sm{font-size:var(--font-size-sm)}.text-base{font-size:var(--font-size-base)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.grid{display:grid}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:var(--spacing-xs)}.gap-2{gap:var(--spacing-sm)}.gap-3{gap:.75rem}.gap-4{gap:var(--spacing-md)}.gap-6{gap:var(--spacing-lg)}.gap-8{gap:var(--spacing-xl)}.border{border:1px solid var(--border-primary)}.border-b{border-bottom:1px solid var(--border-primary)}.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.transition{transition:all .2s ease}.badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:9999px;font-size:var(--font-size-xs);font-weight:600;letter-spacing:.025em}.badge-primary{background:var(--accent-light);color:var(--accent-primary)}.badge-success{background:var(--success-light);color:var(--success)}.badge-warning{background:var(--warning-light);color:var(--warning)}.badge-error{background:var(--error-light);color:var(--error)}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin 1.2s linear infinite;color:var(--accent-primary)}@keyframes pulseDot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.pulse{animation:pulseDot 1.4s ease-in-out infinite}
