@import"https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap";:root{--primary-blue:#2563eb;--primary-hover:#1d4ed8;--dark-blue:#0f172a;--light-blue:#eff6ff;--accent-green:#10b981;--accent-green-hover:#059669;--secondary-yellow:#f59e0b;--accent-yellow:#fffbeb;--card-bg:#fff;--font-family:"Sarabun",sans-serif;--motion-smooth:cubic-bezier(.22,1,.36,1);--transition-springy:all .26s var(--motion-smooth)}*,:after,:before{box-sizing:border-box}:not(.fa):not(.fab):not(.fad):not(.fal):not(.far):not(.fas):not([class^=fa-]):not([class*=" fa-"]){font-family:Sarabun,sans-serif!important}a,body,button,div,input,label,p,select,span,td,th{font-size:16px;font-weight:400;color:#334155}.font-bold,h1,h2,h3,strong,th{font-weight:700!important}h1{font-size:24px!important;margin:0 0 10px}.title-lg,h1,h2{color:var(--primary-blue)}.title-lg,h2{font-size:20px!important;margin:0 0 15px}.title-md,h3{font-size:18px!important;color:var(--primary-blue);margin:0 0 10px}body{background:linear-gradient(135deg,#eff6ff,#dbeafe);background-attachment:fixed;margin:0;padding:0;min-height:100vh}#__nuxt{min-height:100vh}#__nuxt,.app-container{width:100%;display:flex;flex-direction:column}.app-container{max-width:1440px;margin:0 auto;padding:20px;align-items:center;justify-content:flex-start}.app-header,.home-container{width:100%;align-self:stretch}.app-header{justify-content:space-between;padding:16px 28px;background:var(--card-bg);border-radius:24px;border:1px solid rgba(60,99,130,.08);box-shadow:0 16px 40px #3c63820a,0 4px 12px #3c638205;margin-bottom:25px;flex-wrap:wrap;gap:15px;transition:var(--transition-springy)}.app-header,.header-left{display:flex;align-items:center}.header-left{gap:20px;text-align:left}.logo-box{width:58px;height:58px;background:#fff;border:2px solid #3498db;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#3498db;font-size:24px;box-shadow:0 4px 15px #3498db1f;transition:var(--transition-springy)}.app-header:hover .logo-box{transform:rotate(-10deg) scale(1.05)}.header-info h1{font-size:22px!important;color:#2c3e50;margin:0 0 4px;font-weight:700!important}.header-info p{font-size:15px;color:#7f8c8d;margin:0;font-weight:400}main{width:100%;min-height:500px;position:relative}.view-card{width:100%;align-self:stretch;background:var(--card-bg);border-radius:24px;border:1px solid rgba(60,99,130,.06);padding:30px;box-shadow:0 16px 40px #3c63820d,0 4px 12px #3c638205;animation:slideDown .42s var(--motion-smooth) forwards}@keyframes slideDown{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.dropdown-center,.dropdown-left{text-align:center;-moz-text-align-last:center;text-align-last:center}input,select{width:100%;max-width:400px;padding:12px 18px;border:1.5px solid rgba(60,99,130,.15);border-radius:16px;margin-bottom:15px;background-color:#fff;transition:var(--transition-springy);outline:none;text-align:center}.dropdown-left option{text-align:left;-moz-text-align-last:left;text-align-last:left;padding-left:20px}input:focus,select:focus{border-color:var(--primary-blue);box-shadow:0 0 0 4px #3c63821f;transform:scale(1.01)}label{display:block;margin-bottom:6px;font-weight:700!important;color:var(--primary-blue);text-align:left;width:100%;max-width:400px}.btn-group-center{display:flex;justify-content:center;gap:15px;margin:20px 0;flex-wrap:wrap;width:100%}.btn,button{padding:12px 28px;border:none;border-radius:50px;font-weight:700!important;cursor:pointer;transition:var(--transition-springy);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;box-shadow:0 4px 10px #00000005;white-space:nowrap}.btn-primary{background-color:var(--primary-blue);color:#fff!important}.btn-primary:hover{background-color:var(--dark-blue);transform:translateY(-2px) scale(1.01);box-shadow:0 10px 25px #3c63822e}.btn-secondary{background-color:var(--secondary-yellow);color:var(--dark-blue)!important}.btn-secondary:hover{background-color:#e5b667;transform:translateY(-2px) scale(1.01);box-shadow:0 10px 25px #fad39059}.btn-danger{background-color:#ff7675;color:#fff!important}.btn-danger:hover{background-color:#e84393;transform:translateY(-2px) scale(1.01);box-shadow:0 10px 25px #ff767540}.btn-neutral{background-color:#dfe6e9;color:#2d3436!important}.btn-neutral:hover{background-color:#b2bec3;transform:translateY(-2px)}.btn:disabled,button:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;align-self:stretch;margin-bottom:30px}.stat-card{background:#fff;border-radius:24px;padding:16px 20px;text-align:center;border:1.5px solid rgba(60,99,130,.06);position:relative;overflow:visible;transition:var(--transition-springy);box-shadow:0 10px 30px #3c638208;display:flex;flex-direction:column;align-items:center;justify-content:center}.stat-card:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 16px 40px #3c63820f}.stat-card:after{display:none!important}.stat-card.total-card{border:1.5px solid #dff0ff}.stat-card.enrolled-card{border:1.5px solid #e1fbf2}.stat-card.remaining-card{border:1.5px solid #fff5db}.stat-pill{font-size:14px;font-weight:700!important;padding:4px 14px;border-radius:50px;margin-bottom:12px;display:inline-block}.total-pill{background-color:#e8f3ff;color:#3498db}.enrolled-pill{background-color:#e1fbf2;color:#2ecc71}.remaining-pill{background-color:#fff5db;color:#f1c40f}.stat-val{font-size:28px!important;font-weight:700!important;color:#2c3e50;margin:0}.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;width:100%;align-self:stretch;margin-top:15px}.role-card{background:#fff;border:1.5px solid rgba(60,99,130,.05);border-radius:24px;padding:30px 24px;text-align:center;cursor:pointer;transition:var(--transition-springy);box-shadow:0 10px 35px #3c63820a}.role-card:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 20px 45px #3c638214}.role-icon-box{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 20px;transition:var(--transition-springy)}.student-icon-box{background-color:#ebf5fb;color:#3498db}.teacher-icon-box{background-color:#e8f8f5;color:#2ecc71}.admin-icon-box{background-color:#f5eef8;color:#9b59b6}.role-card:hover .student-icon-box{background-color:#3498db;color:#fff;transform:rotate(-6deg) scale(1.04)}.role-card:hover .teacher-icon-box{background-color:#2ecc71;color:#fff;transform:rotate(-6deg) scale(1.04)}.role-card:hover .admin-icon-box{background-color:#9b59b6;color:#fff;transform:rotate(-6deg) scale(1.04)}.role-card h3{font-size:20px!important;color:#2c3e50;font-weight:700!important;margin:0 0 8px}.role-card p{font-size:14px;color:#7f8c8d;margin:0;font-weight:400}.table-container{width:100%;overflow-x:auto;margin:20px 0;border-radius:18px;border:1px solid rgba(60,99,130,.08);box-shadow:0 8px 24px #00000005;-webkit-overflow-scrolling:touch}table{width:100%;border-collapse:collapse;text-align:left}td,th{padding:12px 16px;border-bottom:1px solid rgba(60,99,130,.05)}th{background-color:var(--primary-blue);color:#fff;font-weight:700!important;white-space:nowrap}td,th{font-size:16px!important}td{font-weight:300!important;color:#2c3e50}td :not(i):not([class^=fa-]):not([class*=" fa-"]),th :not(i):not([class^=fa-]):not([class*=" fa-"]){font-size:16px!important}td :not(i):not([class^=fa-]):not([class*=" fa-"]){font-weight:300!important}.btn-success-green{background-color:#2ecc71!important;color:#fff!important}.btn-success-green:hover{background-color:#27ae60!important;transform:translateY(-4px) scale(1.04);box-shadow:0 10px 25px #2ecc7140}.btn-excel{background-color:#27ae60!important;color:#fff!important}.btn-excel:hover{background-color:#219653!important;transform:translateY(-4px) scale(1.04);box-shadow:0 10px 25px #27ae6040}.admin-panel{background-color:var(--light-blue);border-radius:12px;padding:25px}.admin-subtabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;background-color:#3c638214;border-radius:50px;padding:6px}.admin-form-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px;margin-bottom:18px;text-align:left}.admin-form-grid label{max-width:none}.admin-form-grid input,.admin-form-grid select,.admin-search-row input{max-width:none;margin-bottom:0}.admin-check{align-self:end;display:flex;align-items:center;gap:10px;min-height:48px}.admin-check input{width:20px;height:20px;margin:0}.admin-actions,.admin-search-row,.table-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.admin-actions{margin-bottom:20px}.admin-search-row{margin:25px 0 5px}.admin-search-row input{flex:1;min-width:240px}.table-actions{justify-content:center}.btn-compact{width:42px;height:42px;padding:0}td.club-name-col{white-space:normal;word-break:break-word}td:not(.club-name-col){white-space:nowrap}tr:nth-child(2n) td{background-color:#3c638203}tr:hover td{background-color:#fad39014}.club-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;align-self:stretch;margin-top:20px}@media(max-width:992px){.club-list-grid{grid-template-columns:repeat(2,1fr)}}.club-card{background:#fff;border:1.5px solid rgba(60,99,130,.06);border-radius:24px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,border-color .3s ease,background-color .3s ease;box-shadow:0 8px 24px #3c638208}.club-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px #2563eb1a,0 10px 15px #2563eb0d;border-color:var(--primary-blue);background:linear-gradient(180deg,#fff,#f8fafc)}.club-cond{display:inline-block;padding:4px 12px;background:var(--accent-yellow);color:#d35400;font-weight:700!important;border-radius:12px;margin-bottom:10px;align-self:flex-start}.club-spots{margin:15px 0;display:flex;justify-content:space-between;align-items:center}.progress-bar-bg{background-color:#dfe6e9;border-radius:10px;width:100%;height:10px;overflow:hidden;margin-top:5px}.progress-bar-fill{background-color:var(--primary-blue);height:100%;width:0;border-radius:10px;transition:width .5s var(--motion-smooth)}.tab-bar{display:flex;justify-content:center;gap:8px;border-bottom:none;padding:6px;margin-bottom:25px;width:100%;flex-wrap:wrap;background-color:#3c63820d;border-radius:50px}.tab-btn{background:none;border:none;color:#555;font-weight:700!important;padding:10px 22px;border-radius:50px;transition:var(--transition-springy)}.tab-btn:hover{color:var(--primary-blue);background-color:#ffffff80;transform:translateY(-1px)}.tab-btn.active{background-color:var(--primary-blue);color:#fff!important;box-shadow:0 4px 12px #3c638233}.tab-btn.active:after{display:none!important}.mobile-menu-backdrop,.mobile-menu-toggle,.mobile-menu-user-card,.tab-sidebar,.tab-sidebar-head{display:none}body.mobile-menu-open{overflow:hidden}.horizontal-center-flex{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center}.welcome-title{margin:0 0 6px!important;font-size:26px!important;color:var(--dark-blue);letter-spacing:-.5px}.welcome-subtitle{margin:0 0 24px!important;font-size:15px;color:#7f8c8d}.badge{display:inline-block;padding:4px 12px;border-radius:12px;font-weight:700!important}.badge-success{background-color:#e3fcef;color:#10b981}.badge-danger{background-color:#fee2e2;color:#ef4444}.warning-banner{background-color:#fffbeb;border:1px solid #fef3c7;border-left:5px solid var(--secondary-yellow);color:#b45309;padding:15px;border-radius:16px;text-align:center;margin:20px 0;width:100%;box-shadow:0 6px 15px #d9770605}#loader-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#3c63824d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff}.spinner{border:4px solid hsla(0,0%,100%,.3);border-top:4px solid var(--secondary-yellow);border-radius:50%;width:52px;height:52px;animation:spin .8s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.toggle-switch-wrapper{display:flex;align-items:center;gap:15px;margin:10px 0;justify-content:center}.swal2-popup{font-family:var(--font-family)!important;border-radius:24px!important;box-shadow:0 20px 50px #0000001a!important}.custom-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a3d6240;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}.custom-modal-card{background:#fff;border-radius:24px;padding:30px;max-width:500px;width:92%;box-shadow:0 20px 50px #3c63821f;animation:slideDown .34s var(--motion-smooth) forwards}@media(max-width:768px){.app-container{padding:10px}.view-card{padding:20px}.view-card,header{border-radius:20px}header{padding:15px}.tab-bar{border-radius:24px;padding:4px}.tab-btn{padding:8px 14px;font-size:15px}.btn-group-center{flex-direction:column;align-items:stretch}.btn,button{width:100%;border-radius:50px}.password-wrapper,input,select{max-width:100%;border-radius:12px}label{max-width:100%}.mobile-menu-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:50px;margin:0 0 18px;padding:12px 16px;border-radius:16px;background:#fff;color:var(--primary-blue)!important;border:1px solid rgba(60,99,130,.08);box-shadow:0 12px 28px #3c63820f}.mobile-menu-toggle i,.mobile-menu-toggle span{color:var(--primary-blue)!important;font-weight:700!important}.portal-user-bar{display:none!important}.mobile-menu-backdrop{position:fixed;inset:0;z-index:10000;display:block;pointer-events:none;opacity:0;background:#0a3d6238;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .24s var(--motion-smooth)}.mobile-menu-backdrop.active{pointer-events:auto;opacity:1}.tab-sidebar.tab-bar{position:fixed;top:0;left:0;z-index:10001;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:18px 18px 28px;border-radius:0;background:#fffffffa;box-shadow:none;opacity:0;transform:translateY(10px) scale(.98);pointer-events:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transition:opacity .24s var(--motion-smooth),transform .3s var(--motion-smooth)}.tab-sidebar.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.tab-sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 2px 14px;margin-bottom:4px;border-bottom:1px solid rgba(60,99,130,.1)}.tab-sidebar-head i,.tab-sidebar-head span{color:var(--primary-blue);font-weight:700!important}.mobile-menu-user-card{display:grid;gap:12px;padding:14px;margin:0 0 4px;border-radius:18px;background:#3c63820f;border:1px solid rgba(60,99,130,.08)}.mobile-menu-user-card strong{display:block;margin-top:3px;color:var(--primary-blue);font-size:18px!important}.mobile-menu-user-label{display:block;color:#7f8c8d;font-size:14px;font-weight:700!important}.mobile-menu-logout{width:100%;min-height:46px;border-radius:14px!important}.tab-close-btn{width:42px;height:42px;min-height:42px;padding:0;border-radius:50%;background:#3c638214;box-shadow:none}.tab-close-btn i{color:var(--primary-blue)}.tab-sidebar .tab-btn{justify-content:flex-start;width:100%;min-height:48px;padding:14px 16px;border-radius:16px;opacity:0;transform:translateY(10px);animation:none}.tab-sidebar.open .tab-btn{animation:sidebarItemIn .34s var(--motion-smooth) forwards}.tab-sidebar.open .tab-btn:first-of-type{animation-delay:.02s}.tab-sidebar.open .tab-btn:nth-of-type(2){animation-delay:.05s}.tab-sidebar.open .tab-btn:nth-of-type(3){animation-delay:.08s}.tab-sidebar.open .tab-btn:nth-of-type(4){animation-delay:.11s}.tab-sidebar.open .tab-btn:nth-of-type(5){animation-delay:.14s}.tab-sidebar.open .tab-btn:nth-of-type(6){animation-delay:.17s}.desktop-tab-bar{display:none}.club-list-grid{grid-template-columns:1fr}.role-grid,.stats-grid{grid-template-columns:1fr!important}.admin-panel{padding:18px}.admin-subtabs{border-radius:18px}.admin-form-grid{grid-template-columns:1fr}.admin-actions,.admin-search-row{align-items:stretch}.admin-actions .btn,.admin-search-row .btn{width:100%}}@media(max-width:640px){.app-container{padding:8px}.view-card{padding:16px}.table-container{overflow:visible;border:0;border-radius:0;box-shadow:none;margin:16px 0}.table-container table,.table-container tbody,.table-container td,.table-container th,.table-container thead,.table-container tr{display:block;width:100%!important}.table-container thead{position:absolute;width:1px!important;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.table-container tbody{display:grid;gap:12px}.table-container tr{overflow:hidden;background:#fff;border:1px solid rgba(60,99,130,.08);border-radius:16px;box-shadow:0 10px 24px #3c63820d;animation:tableRowIn .28s var(--motion-smooth) both}.table-container td{display:grid;grid-template-columns:minmax(92px,35%) 1fr;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid rgba(60,99,130,.06);text-align:right!important;white-space:normal!important;word-break:break-word;font-size:14px!important}.table-container td:before{content:attr(data-label);color:var(--primary-blue);font-size:13px;font-weight:700!important;text-align:left}.table-container td:last-child{border-bottom:0}.table-container td[colspan]{display:block;text-align:center!important}.table-container td[colspan]:before,.table-container td[data-label=""]:before{content:none}.table-container td>div[style*="display: flex"]{justify-content:flex-end!important;flex-wrap:wrap;width:100%}.table-container .btn,.table-container button{width:auto;min-height:38px;padding:8px 12px!important;border-radius:10px!important;font-size:14px!important}.table-container .club-cond{max-width:100%;margin:0!important;text-align:right}.app-header:hover .logo-box,.btn-danger:hover,.btn-neutral:hover,.btn-primary:hover,.btn-secondary:hover,.club-card:hover,.role-card:hover,.role-card:hover .admin-icon-box,.role-card:hover .student-icon-box,.role-card:hover .teacher-icon-box,.stat-card:hover{transform:none}}@keyframes tableRowIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes sidebarItemIn{to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.password-wrapper{position:relative;width:100%;max-width:400px;margin-bottom:15px;display:block}.password-wrapper input{display:block!important;width:100%!important;max-width:100%!important;margin-bottom:0!important;padding-right:48px!important}.password-toggle-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:40px!important;height:40px!important;padding:0!important;background:none;border:none;cursor:pointer;color:#7f8c8d;font-size:18px;display:flex;align-items:center;justify-content:center;transition:color .2s ease;z-index:10}.password-toggle-btn:hover{color:#2c3e50}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite;border-radius:8px;display:inline-block;pointer-events:none}@keyframes skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-text{height:15px;width:100%;border-radius:4px}.skeleton-text.short{width:60%}.skeleton-text.heading{height:24px;width:40%;margin-bottom:12px}.skeleton-title{height:24px;width:70%;border-radius:6px;margin-bottom:15px}.skeleton-avatar{border-radius:50%;width:50px;height:50px;flex-shrink:0}.skeleton-button{height:40px;width:100%;border-radius:50px}.skeleton-card{width:100%;height:220px;border-radius:24px}.skeleton-list-item{width:100%;height:60px;border-radius:12px}.skeleton-table-row{width:100%;height:45px;border-radius:6px}.page-enter-active,.page-leave-active{transition:opacity .4s cubic-bezier(.25,.8,.25,1),transform .4s cubic-bezier(.25,.8,.25,1)}.page-enter-from{opacity:0;transform:translateY(12px) scale(.995)}.page-leave-to{opacity:0;transform:translateY(-12px) scale(.995)}.fade-slide-enter-active,.fade-slide-leave-active{transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1)}.fade-slide-enter-from{opacity:0;transform:translateY(8px) scale(.99)}.fade-slide-leave-to{opacity:0;transform:translateY(-8px) scale(.99)}.modal-enter-active,.modal-leave-active{transition:opacity .3s ease}.modal-enter-active .modal-card-animate,.modal-leave-active .modal-card-animate{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.modal-enter-from{opacity:0}.modal-enter-from .modal-card-animate{transform:scale(.9) translateY(20px)}.modal-leave-to{opacity:0}.modal-leave-to .modal-card-animate{transform:scale(.95) translateY(15px)}.swal2-show{animation:swal-bounce .4s cubic-bezier(.34,1.56,.64,1)!important}.swal2-hide{animation:swal-fade-out .25s ease forwards!important}@keyframes swal-bounce{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}@keyframes swal-fade-out{0%{transform:scale(1);opacity:1}to{transform:scale(.95);opacity:0}}