@import"https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";:root{--color-surface:#fff;--color-surface-dim:#94a3b8;--color-surface-bright:#fff;--color-surface-container-lowest:#fff;--color-surface-container-low:#f8fafc;--color-surface-container:#f1f5f9;--color-surface-container-high:#e2e8f0;--color-surface-container-highest:#cbd5e1;--color-on-surface:#072f4f;--color-on-surface-variant:#00080b;--color-inverse-surface:#00080b;--color-inverse-on-surface:#1e293b;--color-outline:#072f4f;--color-outline-variant:#b5c7d8;--color-surface-tint:#0c4da2;--color-primary:#0c4da2;--color-on-primary:#fff;--color-primary-container:#145139;--color-on-primary-container:#fff;--color-inverse-primary:#9ec2f7;--color-secondary:#f4d25d;--color-on-secondary:#00080b;--color-secondary-container:#f58465;--color-on-secondary-container:#00080b;--color-tertiary:#d88529;--color-on-tertiary:#fff;--color-tertiary-container:#ffe95e;--color-on-tertiary-container:#00080b;--color-error:#dd5734;--color-on-error:#fff;--color-error-container:#fceae5;--color-on-error-container:#dd5734;--color-primary-fixed:#cbdffa;--color-primary-fixed-dim:#9ec2f7;--color-on-primary-fixed:#00080b;--color-on-primary-fixed-variant:#0c4da2;--color-secondary-fixed:#fdf4d6;--color-secondary-fixed-dim:#f9e5a8;--color-on-secondary-fixed:#00080b;--color-on-secondary-fixed-variant:#d88529;--color-tertiary-fixed:#fce9e4;--color-tertiary-fixed-dim:#f8cfc3;--color-on-tertiary-fixed:#00080b;--color-on-tertiary-fixed-variant:#dd5734;--color-background:#b8c6d4;--color-on-background:#00080b;--color-surface-variant:#e2e8f0;--color-golden-yellow:#f4d25d;--color-leaf-green:#145139;--spacing-base:8px;--spacing-container-padding:24px;--spacing-section-gap:64px;--spacing-gutter:16px;--spacing-margin-mobile:16px;--rounded-sm:.25rem;--rounded-default:.5rem;--rounded-md:.75rem;--rounded-lg:1rem;--rounded-xl:1.5rem;--rounded-full:9999px;--primary-blue:var(--color-primary);--primary-hover:#073c82;--dark-blue:#072f4f;--light-blue:#eaf2fc;--accent-green:var(--color-primary-container);--accent-green-hover:#0d3827;--secondary-yellow:var(--color-secondary);--accent-yellow:#f2c04e;--card-bg:var(--color-surface-container);--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(.fa-solid):not(.fa-regular):not(.fa-brands):not([class^=fa-]):not([class*=" fa-"]){font-family:Sarabun,sans-serif!important}.display-lg{line-height:1.2;letter-spacing:-.02em}.display-lg,.headline-lg{font-family:Sarabun,sans-serif;font-size:24px;font-weight:700}.headline-lg{line-height:1.3}.headline-md{font-family:Sarabun,sans-serif;font-size:20px;font-weight:600;line-height:1.4}.body-lg,.body-md{font-size:14px;font-weight:400;line-height:1.6}.body-lg,.body-md,.label-lg{font-family:Sarabun,sans-serif}.label-lg{font-size:12px;font-weight:600;line-height:1.2}@media(max-width:768px){.display-lg{font-size:22px}.headline-lg{font-size:18px}.headline-md{font-size:14px}.body-lg,.body-md{font-size:12px}.label-lg{font-size:10px}}a,body,button,div,input,label,p,select,span,td,th{font-size:14px;font-weight:400;color:var(--color-on-surface-variant)}.font-bold,h1,h2,h3,strong,th{font-weight:700!important}h1{margin:0 0 10px;line-height:1.3}.title-lg,h1,h2{font-size:24px!important;color:var(--primary-blue)}.title-lg,h2{margin:0 0 15px;line-height:1.4}.title-md,h3{font-size:20px!important;color:var(--primary-blue);margin:0 0 10px}@media(max-width:768px){h1{font-size:22px!important}.title-lg,h2{font-size:16px!important}.title-md,h3{font-size:14px!important}a,body,button,div,input,label,p,select,span,td,th{font-size:12px}input,select,textarea{font-size:16px!important}}html{height:-webkit-fill-available;overflow-x:hidden;max-width:100vw}body{background-color:var(--color-background);margin:0;padding:0}#__nuxt,body{min-height:100vh;min-height:-webkit-fill-available;min-height:100dvh;overflow-x:hidden;max-width:100vw}#__nuxt,.app-container{width:100%;display:flex;flex-direction:column}.app-container{max-width:1200px;margin:0 auto;padding:20px 20px 40px;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:var(--rounded-xl);border:1px solid var(--color-outline-variant);box-shadow:0 4px 20px #0000000a;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 var(--primary-blue);border-radius:18px;display:flex;align-items:center;justify-content:center;color:var(--primary-blue);font-size:24px;box-shadow:0 4px 15px #0023661f;transition:var(--transition-springy)}.app-header:hover .logo-box{transform:rotate(-10deg) scale(1.05)}.header-info h1{font-size:22px!important;color:var(--color-on-surface);margin:0 0 4px;font-weight:700!important}.header-info p{font-size:15px;color:var(--color-on-surface-variant);margin:0;font-weight:400}main{min-height:500px}.view-card,main{width:100%;position:relative}.view-card{align-self:stretch;background:var(--card-bg);border-radius:var(--rounded-xl);border:1px solid var(--color-outline-variant);padding:40px;box-shadow:0 4px 20px #0000000d;animation:slideDown .42s var(--motion-smooth) forwards}.view-header-block{display:flex;flex-direction:column;gap:8px;width:100%;margin-bottom:12px}.floating-page-tag{align-self:center;margin-bottom:4px;position:relative;background-color:transparent;border:none;color:#00080b;font-size:14px;font-weight:300;padding:0;border-radius:0;box-shadow:none;z-index:10;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center}.view-heading-text{width:100%;white-space:normal;word-break:break-word;margin:0!important;text-align:center!important;font-size:16px!important;font-weight:700!important}@media(max-width:768px){.view-heading-text{font-size:14px!important}}@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,textarea{width:100%;max-width:400px;padding:12px 18px;border:1.5px solid var(--color-outline-variant);border-radius:var(--rounded-default);margin-bottom:15px;background-color:var(--color-surface-container-low);transition:var(--transition-springy);outline:none;text-align:center;font-size:16px!important}.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 3px #e9a82573;transform:scale(1.01)}input[type=file]{font-family:Sarabun,sans-serif!important;cursor:pointer}input[type=file]::file-selector-button{font-family:Sarabun,sans-serif!important;font-weight:700;background-color:var(--light-blue);color:var(--primary-blue);border:1.5px solid rgba(37,99,235,.2);padding:6px 16px;border-radius:12px;cursor:pointer;margin-right:12px;transition:var(--transition-springy)}input[type=file]::file-selector-button:hover{background-color:var(--primary-blue);color:#fff;border-color:var(--primary-blue)}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:12px;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:var(--color-secondary-container);transform:translateY(-2px) scale(1.01);box-shadow:0 10px 25px #e9a82559}.btn-danger{background-color:var(--color-error);color:#fff!important}.btn-danger:hover{background-color:var(--color-on-error-container);transform:translateY(-2px) scale(1.01);box-shadow:0 10px 25px #ba1a1a40}.btn-neutral{background-color:var(--color-surface-container-highest);color:var(--color-on-surface)!important}.btn-neutral:hover{background-color:var(--color-surface-dim);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 var(--color-primary-fixed-dim)}.stat-card.enrolled-card{border:1.5px solid var(--color-tertiary-fixed)}.stat-card.remaining-card{border:1.5px solid var(--color-secondary-fixed)}.stat-pill{font-size:14px;font-weight:700!important;padding:4px 14px;border-radius:8px;margin-bottom:12px;display:inline-block}.total-pill{background-color:var(--color-primary-fixed);color:var(--color-primary)}.enrolled-pill{background-color:var(--color-tertiary-fixed);color:var(--color-tertiary)}.remaining-pill{background-color:var(--color-secondary-fixed);color:var(--color-secondary)}.stat-val{font-size:24px!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:var(--color-primary-fixed);color:var(--color-primary)}.teacher-icon-box{background-color:var(--color-tertiary-fixed);color:var(--color-tertiary)}.admin-icon-box{background-color:var(--color-secondary-fixed);color:var(--color-secondary)}.role-card:hover .student-icon-box{background-color:var(--color-primary);color:#fff;transform:rotate(-6deg) scale(1.04)}.role-card:hover .teacher-icon-box{background-color:var(--color-tertiary);color:#fff;transform:rotate(-6deg) scale(1.04)}.role-card:hover .admin-icon-box{background-color:var(--color-secondary);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,.table-container table,.table-container tbody,.table-container td,.table-container th,.table-container thead,.table-container tr{border-radius:0!important}.table-container{width:100%;overflow-x:auto;margin:20px 0;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;white-space:nowrap}td,th{font-size:10px!important;font-weight:300!important}td{color:#2c3e50}.table-container,.table-container table,.table-container td,.table-container td *,.table-container th,.table-container th *,table,table td,table td *,table th,table th *{font-size:12px!important}@media(min-width:769px){.table-container,.table-container table,.table-container td,.table-container td *,.table-container th,.table-container th *,table,table td,table td *,table th,table th *{font-size:13px!important;font-weight:400!important}.table-container td,.table-container th,table td,table th{padding:8px 10px!important}.table-container th,table th{font-weight:600!important}.table-container .font-bold,.table-container strong,table .font-bold,table strong{font-weight:700!important}}.table-container,.table-container table,.table-container td,.table-container td :not(i):not([class^=fa-]):not([class*=" fa-"]),.table-container th,.table-container th :not(i):not([class^=fa-]):not([class*=" fa-"]),table,table td,table td :not(i):not([class^=fa-]):not([class*=" fa-"]),table th,table th :not(i):not([class^=fa-]):not([class*=" fa-"]){font-weight:300!important}.btn-success-green{background-color:var(--color-leaf-green)!important;color:#fff!important}.btn-success-green:hover{background-color:var(--accent-green-hover)!important;transform:translateY(-4px) scale(1.04);box-shadow:0 10px 25px #5d7b4340}.btn-excel{background-color:#14513914!important;color:var(--color-leaf-green)!important;padding:12px 28px!important;font-size:15px!important;font-weight:600!important;border-radius:12px!important;border:1.5px solid var(--color-leaf-green)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;height:auto!important;transition:all .2s ease!important;box-shadow:none!important;cursor:pointer!important}.btn-excel:hover:not(:disabled){background-color:#14513929!important;border-color:var(--accent-green-hover)!important;color:var(--accent-green-hover)!important;transform:translateY(-2px)!important;box-shadow:0 4px 12px #1451391a!important}.btn-excel:disabled{opacity:.6!important;cursor:not-allowed!important;background-color:#f1f5f9!important;border-color:#cbd5e1!important;color:#94a3b8!important}.btn-excel i{color:var(--color-leaf-green)!important;font-size:16px!important;transition:all .2s ease!important}.btn-excel:hover:not(:disabled) i{color:var(--accent-green-hover)!important}.btn-excel:disabled i{color:#94a3b8!important}.btn-zip{background-color:#0c4da214!important;color:var(--primary-blue)!important;padding:12px 28px!important;font-size:15px!important;font-weight:600!important;border-radius:12px!important;border:1.5px solid var(--primary-blue)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;height:auto!important;transition:all .2s ease!important;box-shadow:none!important;cursor:pointer!important}.btn-zip:hover:not(:disabled){background-color:#0c4da229!important;border-color:var(--dark-blue)!important;color:var(--dark-blue)!important;transform:translateY(-2px)!important;box-shadow:0 4px 12px #0c4da21a!important}.btn-zip:disabled{opacity:.6!important;cursor:not-allowed!important;background-color:#f1f5f9!important;border-color:#cbd5e1!important;color:#94a3b8!important}.btn-zip i{color:var(--primary-blue)!important;font-size:16px!important;transition:all .2s ease!important}.btn-zip:hover:not(:disabled) i{color:var(--dark-blue)!important}.btn-zip:disabled i{color:#94a3b8!important}.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:12px;padding:6px}.club-card{background:#eef3fa;border:2px solid #1b4d3e;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:#1b4d3e;background:#faf8f2!important}.club-card .btn{padding:10px 16px;font-size:14px!important}.club-cond{display:block;font-size:11px;font-weight:300!important;color:#df9845!important;background:none!important;border:none!important;padding:0!important;margin:4px 0 8px!important;align-self:flex-start}.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{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.table-actions{display:inline-flex;gap:6px;align-items:center;justify-content:center;flex-wrap:nowrap!important}.admin-actions{margin-bottom:20px}.teacher-submit-btn{background-color:var(--primary-blue);color:#fff;border:none;font-weight:700;padding:10px 28px;border-radius:12px;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;gap:8px;transition:var(--transition-springy);box-shadow:0 4px 12px #3c638233}.teacher-submit-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px #3c63824d;filter:brightness(1.08)}.teacher-submit-btn:active{transform:translateY(0);box-shadow:0 2px 8px #3c638226}.admin-search-row{margin:25px 0 5px}.admin-search-row input{flex:1;min-width:240px}.btn-compact{width:32px!important;height:32px!important;padding:0!important}.btn-compact i{font-size:13px!important}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,minmax(0,1fr));gap:20px;width:100%;align-self:stretch;margin-top:20px}@media(max-width:1024px){.club-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.club-spots{margin:15px 0;display:flex;justify-content:space-between;align-items:center}.progress-bar-bg{background-color:var(--color-surface-container-high);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:12px}.tab-btn{background:none;border:none;color:#555;font-weight:700!important;padding:10px 22px;border-radius:12px;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:24px!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:#d1e7dd;color:#0f5132}.badge-danger{background-color:#f8d7da;color:#842029}.filter-subject-select{padding:8px 12px!important;border:1px solid var(--color-outline-variant)!important;border-radius:6px!important;font-size:14px!important;font-weight:500!important;outline:none!important;min-width:200px!important;cursor:pointer!important;text-align:center!important;-moz-text-align-last:center!important;text-align-last:center!important;width:auto!important;max-width:none!important;margin-bottom:0!important}.filter-subject-select,.filter-subject-select option{background-color:#fff!important;color:var(--color-on-surface)!important}.filter-subject-select option.center-opt{text-align:center!important;-moz-text-align-last:center!important;text-align-last:center!important}.filter-subject-select option.left-indent-opt{text-align:left!important;-moz-text-align-last:left!important;text-align-last:left!important;padding-left:10%!important}.warning-banner{background-color:var(--color-secondary-fixed);border:1px solid var(--color-secondary-container);border-left:5px solid var(--secondary-yellow);color:var(--color-on-secondary-container);padding:15px;border-radius:16px;text-align:center;margin:20px 0;width:100%;box-shadow:0 6px 15px #6e4c0005}#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;border-radius:20px}header{padding:15px;border-radius:0}.tab-bar{border-radius:24px;padding:4px}.tab-btn{padding:8px 14px;font-size:15px;width:auto}.btn-group-center{flex-direction:column;align-items:stretch}.btn,button{width:100%;border-radius:12px}.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-x:auto;border:1px solid rgba(60,99,130,.08);border-radius:0;box-shadow:0 4px 12px #00000003;margin:16px 0}.table-container table{display:table!important;width:100%!important}.table-container thead{display:table-header-group!important;position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important}.table-container tbody{display:table-row-group!important}.table-container tr{display:table-row!important;background:transparent;border:none;border-radius:0;box-shadow:none}.table-container td,.table-container th{display:table-cell!important;width:auto!important;padding:6px 4px!important;text-align:center!important;white-space:nowrap!important}.table-container td,.table-container td :not(i):not([class^=fa-]):not([class*=" fa-"]),.table-container th,.table-container th :not(i):not([class^=fa-]):not([class*=" fa-"]){font-size:10px!important;font-weight:300!important}.table-container td.student-name-text{text-align:left!important;padding-left:8px!important}.table-container .btn-text-label{display:none!important}.table-container .btn,.table-container button{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:6px 8px!important;min-height:auto;border-radius:6px!important;width:auto!important;font-size:10px!important}.table-container .btn i,.table-container button i{margin:0!important;font-size:10px!important}.table-container .club-cond{max-width:100%;margin:0!important;text-align:center}.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}.table-container .btn,.table-container .btn :not(i):not([class^=fa-]):not([class*=" fa-"]),.table-container .club-container .club-name-text,.table-container .club-name-text,.table-container .font-bold,.table-container .student-name-text,.table-container .teacher-name-text,.table-container button,.table-container button :not(i):not([class^=fa-]):not([class*=" fa-"]),.table-container strong,table .btn,table .btn :not(i):not([class^=fa-]):not([class*=" fa-"]),table .club-name-text,table .font-bold,table .student-name-text,table .teacher-name-text,table button,table button :not(i):not([class^=fa-]):not([class*=" fa-"]),table strong{font-size:10px!important;font-weight:300!important}.fa-solid,.fas,.table-container .fa-solid,.table-container .fas,.table-container button .fa-solid,.table-container button .fas,.table-container td .fa-solid,.table-container td .fas,table .fa-solid,table .fas,table button .fa-solid,table button .fas{font-family:Font Awesome\ 6 Free!important;font-weight:900!important}.fa-brands,.fa-regular,.fab,.far,.table-container .fa-regular,.table-container .far,.table-container button .fa-regular,.table-container button .far,.table-container td .fa-regular,.table-container td .far,table .fa-brands,table .fa-regular,table .fab,table .far,table button .fa-regular,table button .far{font-family:Font Awesome\ 6 Free!important;font-weight:400!important}.fa-brands,.fab{font-family:Font Awesome\ 6 Brands!important;font-weight:400!important}}@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,var(--color-surface-container-low) 25%,var(--color-surface-container-high) 50%,var(--color-surface-container-low) 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:12px}.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}}.club-name-text{color:#0c4da2!important;font-weight:700!important}.teacher-name-text{color:#145139!important;font-weight:600!important}.student-name-text{color:#dd5734!important;font-weight:600!important}.student-name-enrolled{color:#145139!important}.student-name-not-enrolled{color:#d84b16!important}.table-container .btn,.table-container .btn :not(i):not([class^=fa-]):not([class*=" fa-"]),.table-container .club-container .club-name-text,.table-container .club-name-text,.table-container .font-bold,.table-container .student-name-text,.table-container .teacher-name-text,.table-container button,.table-container button :not(i):not([class^=fa-]):not([class*=" fa-"]),.table-container strong,table .btn,table .btn :not(i):not([class^=fa-]):not([class*=" fa-"]),table .club-name-text,table .font-bold,table .student-name-text,table .teacher-name-text,table button,table button :not(i):not([class^=fa-]):not([class*=" fa-"]),table strong{font-size:10px!important;font-weight:300!important}.fa-solid,.fas,.table-container .fa-solid,.table-container .fas,.table-container button .fa-solid,.table-container button .fas,.table-container td .fa-solid,.table-container td .fas,table .fa-solid,table .fas,table button .fa-solid,table button .fas{font-family:Font Awesome\ 6 Free!important;font-weight:900!important}.fa-regular,.far,.table-container .fa-regular,.table-container .far,.table-container button .fa-regular,.table-container button .far,.table-container td .fa-regular,.table-container td .far,table .fa-regular,table .far,table button .fa-regular,table button .far{font-family:Font Awesome\ 6 Free!important;font-weight:400!important}.fa-brands,.fab,.table-container .fa-brands,.table-container .fab,.table-container button .fa-brands,.table-container button .fab,.table-container td .fa-brands,.table-container td .fab,table .fa-brands,table .fab,table button .fa-brands,table button .fab{font-family:Font Awesome\ 6 Brands!important;font-weight:400!important}@media(min-width:769px){.table-container .club-name-text,.table-container .teacher-name-text,table .club-name-text,table .teacher-name-text{font-size:16px!important;font-weight:400!important}.table-container .club-name-text,.table-container .student-name-text,.table-container .teacher-name-text,table .club-name-text,table .student-name-text,table .teacher-name-text{font-size:14px!important;font-weight:400!important}}body.swal2-shown,html.swal2-shown{overflow-y:scroll!important;height:100%!important}body.swal2-shown{padding-right:0!important}html.swal2-height-auto{height:100%!important}.fa-spin,.fa-spinner{display:inline-block;will-change:transform;backface-visibility:hidden}.btn:active,button:active{transform:translateY(0) scale(.98)!important;box-shadow:0 2px 5px #0000000d!important}input[type=checkbox],input[type=radio]{width:20px!important;height:20px!important;max-width:none!important;padding:0!important;border:1.5px solid var(--color-outline-variant)!important;border-radius:4px!important;transition:none!important;transform:none!important;box-shadow:none!important;cursor:pointer}input[type=checkbox]:focus,input[type=radio]:focus{transform:none!important;box-shadow:none!important;outline:2px solid var(--primary-blue)!important;outline-offset:2px}