@import"https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap";:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);--danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);--info-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);--text-primary: #2d3748;--text-secondary: #4a5568;--text-light: #718096;--border-radius: 12px;--border-radius-lg: 16px;--border-radius-xl: 20px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 25px rgba(0, 0, 0, .2);--shadow-xl: 0 12px 35px rgba(0, 0, 0, .25);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:Kanit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:var(--text-primary);background:var(--primary-gradient);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}.container{max-width:1200px;margin:0 auto;padding:var(--spacing-md);flex:1}.header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-lg);margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);text-align:center}.header h1{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-sm)}.header p{font-size:clamp(.875rem,2.5vw,1.125rem);color:var(--text-secondary);font-weight:400}.nav-tabs{display:flex;background:#ffffffe6;border-radius:var(--border-radius-lg);padding:var(--spacing-xs);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-xl);overflow-x:auto;-webkit-overflow-scrolling:touch}.nav-tab{flex:1;min-width:120px;padding:var(--spacing-md) var(--spacing-sm);border:none;background:transparent;border-radius:var(--border-radius);font-size:clamp(.75rem,2vw,.875rem);font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all .3s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs)}.nav-tab:hover{background:#667eea1a;color:var(--text-primary);transform:translateY(-1px)}.nav-tab.active{background:var(--primary-gradient);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-2px)}.card{background:#fffffff2;border-radius:var(--border-radius-lg);padding:clamp(1rem,3vw,2rem);box-shadow:var(--shadow-md);transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);margin-bottom:var(--spacing-lg)}.card:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px)}.card-header{margin-bottom:var(--spacing-lg);text-align:center}.card-title{font-size:clamp(1.25rem,3vw,1.875rem);font-weight:700;margin-bottom:var(--spacing-md);background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.card-description{font-size:clamp(.875rem,2.5vw,1rem);color:var(--text-secondary);line-height:1.6}.form-group{margin-bottom:var(--spacing-lg)}.form-label{display:block;font-size:clamp(.875rem,2.5vw,1rem);font-weight:600;margin-bottom:var(--spacing-sm);color:var(--text-primary)}.form-input,.form-select,.form-textarea{width:100%;padding:clamp(.75rem,2vw,1rem);border:2px solid #e2e8f0;border-radius:var(--border-radius);font-size:clamp(.875rem,2.5vw,1rem);font-family:inherit;transition:all .3s ease;background:#ffffffe6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;background:#fff}.form-textarea{resize:vertical;min-height:100px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:clamp(.75rem,2vw,1rem) clamp(1rem,3vw,1.5rem);border:none;border-radius:var(--border-radius);font-size:clamp(.875rem,2.5vw,1rem);font-weight:600;font-family:inherit;cursor:pointer;transition:all .3s ease;text-decoration:none;white-space:nowrap;min-height:44px}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn-primary{background:var(--primary-gradient);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-secondary{background:var(--secondary-gradient);color:#fff;box-shadow:var(--shadow-md)}.btn-secondary:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-outline{background:#ffffffe6;color:var(--text-primary);border:2px solid #e2e8f0;box-shadow:var(--shadow-sm)}.btn-outline:hover:not(:disabled){background:#fff;border-color:#667eea;box-shadow:var(--shadow-md);transform:translateY(-1px)}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fade-in{animation:fadeIn .6s ease-out}.slide-in{animation:slideIn .4s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.grid{display:grid;gap:var(--spacing-lg)}.grid-cols-1{grid-template-columns:1fr}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-3{gap:.75rem}.gap-4{gap:var(--spacing-md)}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:var(--spacing-md)}.py-8{padding-top:var(--spacing-xl);padding-bottom:var(--spacing-xl)}.text-center{text-align:center}.text-sm{font-size:.875rem}.text-white{color:#fff}.text-gray-800{color:#1f2937}.whitespace-pre-wrap{white-space:pre-wrap}.leading-relaxed{line-height:1.625}.bg-gray-50{background-color:#f9fafb}.border-2{border-width:2px}.border-gray-200{border-color:#e5e7eb}.rounded-lg{border-radius:var(--border-radius-lg)}@media (max-width: 640px){.container{padding:var(--spacing-sm)}.card{padding:var(--spacing-md)}.nav-tabs{padding:2px;gap:2px}.nav-tab{min-width:100px;padding:var(--spacing-sm);font-size:.75rem}.btn{padding:.75rem 1rem;font-size:.875rem}.form-input,.form-select,.form-textarea{padding:.75rem;font-size:16px}.flex-col-mobile{flex-direction:column}.gap-mobile-3{gap:.75rem}}@media (max-width: 480px){.nav-tabs{flex-direction:column;gap:var(--spacing-xs)}.nav-tab{min-width:auto;width:100%}}@media (max-width: 375px){.container{padding:var(--spacing-xs)}.card{padding:var(--spacing-sm)}.btn{padding:.625rem .875rem;font-size:.8125rem}}.min-h-screen{min-height:100vh}footer{margin-top:auto;padding:var(--spacing-xl) 0}*:focus{outline:2px solid #667eea;outline-offset:2px}.btn:focus,.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;box-shadow:0 0 0 3px #667eea4d}@media (pointer: coarse){.btn,.nav-tab,.form-input,.form-select{min-height:44px;min-width:44px}}