@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap";.home{background:#fff;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.home-container{box-sizing:border-box;color:#1f2937;background:#fff;width:100%;min-height:100vh;margin-top:42px;padding:72px 24px 48px;font-family:IBM Plex Sans Thai,sans-serif}.home-hero,.activities-section{width:min(1180px,100%);margin:0 auto}.home-hero{border-bottom:1px solid #e5e7eb;grid-template-columns:minmax(0,1fr) minmax(260px,330px);align-items:end;gap:48px;padding-bottom:48px;display:grid}.home-header{text-align:left;margin:0}.home-eyebrow,.section-eyebrow,.clock-label{letter-spacing:.16em;text-transform:uppercase;color:#7c3aed;margin:0 0 10px;font-size:.78rem;font-weight:700}.home-header h1{color:#111827;letter-spacing:-.02em;margin:0;font-size:clamp(2rem,4vw,3.4rem);font-weight:700;line-height:1.12}.home-header h2{color:#374151;margin:16px 0 6px;font-size:1.15rem;font-weight:600}.subtitle{color:#6b7280;letter-spacing:.02em;margin:0;font-size:1rem}.date-text{color:#6b7280;margin:10px 0 0;font-size:.92rem;font-weight:500}.time-text{letter-spacing:-.03em;color:#7c3aed;margin:0;font-family:Space Grotesk,Outfit,IBM Plex Sans Thai,sans-serif;font-size:clamp(2.2rem,4.5vw,3.3rem);font-weight:500;line-height:1}.activities-section{padding-top:42px}.activities-heading-row{justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px;display:flex}.activities-title{color:#111827;align-items:center;gap:10px;margin:0;font-size:1.6rem;font-weight:700;display:flex}.activities-hint{color:#6b7280;text-align:right;margin:0;font-size:.95rem}.loading-text{color:#6b7280;margin:40px 0;font-size:1.05rem}.no-activities-box{text-align:center;color:#ef4444;background:#f9fafb;border:1px dashed #d1d5db;border-radius:18px;margin:20px 0;padding:32px;font-size:.95rem}.action-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:100%;display:grid}.action-card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;flex-direction:column;min-width:0;transition:transform .25s,box-shadow .25s;display:flex;overflow:hidden;box-shadow:0 14px 34px #0f172a14}.action-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px #0f172a1f}.card-image-wrapper{aspect-ratio:16/9;background:#f3f4f6;width:100%;position:relative;overflow:hidden}.card-cover-image{object-fit:cover;width:100%;height:100%;transition:transform .3s;display:block}.action-card:hover .card-cover-image{transform:scale(1.025)}.card-icon-fallback{background:linear-gradient(135deg,#ecfdf5 0%,#eff6ff 100%);justify-content:center;align-items:center;width:100%;height:100%;font-size:3rem;display:flex}.card-badge{z-index:2;position:absolute;top:14px;left:14px}.badge{-webkit-backdrop-filter:blur(10px);border-radius:999px;padding:6px 11px;font-size:.75rem;font-weight:700;display:inline-block}.badge.open{color:#15803d;background:#ecfdf5eb;border:1px solid #22c55e4d}.badge.closed{color:#dc2626;background:#fef2f2eb;border:1px solid #ef44444d}.card-content{flex-direction:column;flex:1;padding:22px;display:flex}.activity-time-text{color:#6b7280;margin:0 0 8px;font-size:.9rem}.action-card h2{text-align:left;color:#111827;min-height:auto;margin:0;font-size:1.25rem;font-weight:700;line-height:1.35;display:block}.activity-subtitle-text{color:#6b7280;text-align:left;width:100%;margin:10px 0 22px;font-size:.9rem;line-height:1.6}.card-buttons-group{grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:auto;display:grid}.action-btn{cursor:pointer;border:none;border-radius:10px;width:100%;padding:11px 12px;font-size:.9rem;font-weight:600;transition:transform .2s,box-shadow .2s,background .2s}.action-btn:hover{transform:translateY(-1px)}.checkin-btn{color:#fff;background:linear-gradient(135deg,#5f3da2b3,#a548ec99);box-shadow:0 6px 18px #691b9a1c}.checkin-btn:hover:not(:disabled){background:linear-gradient(135deg,#5f3da2,#a548ec);box-shadow:0 8px 20px #6a1b9a59}.checkin-btn:disabled,.checkin-btn.disabled{opacity:.85;color:#94a3b8!important;box-shadow:none!important;cursor:not-allowed!important;background:#e2e8f0!important;transform:none!important}.action-card.closed{opacity:.9}.action-card.closed:hover{transform:none;box-shadow:0 14px 34px #0f172a14}.verify-link-btn{color:#374151;background:linear-gradient(135deg,#e5e7eb,#d1d5db);box-shadow:0 6px 18px #6b72802e}.verify-link-btn:hover{background:linear-gradient(135deg,#d1d5db,#c4cbd4);box-shadow:0 8px 20px #6b72803d}@media (width<=900px){.home-container{padding:48px 20px 40px}.home-hero{grid-template-columns:1fr;align-items:start;gap:24px}.live-clock-card{max-width:420px}.action-cards{grid-template-columns:1fr}}@media (width<=640px){.home-container{padding:32px 14px}.home-header h1{font-size:2rem}.live-clock-card{text-align:center;width:100%;max-width:360px;margin:0 auto}.home-header h2{font-size:1rem}.activities-heading-row{flex-direction:column;align-items:flex-start;gap:8px}.activities-hint{text-align:left}.card-content{padding:18px}.card-buttons-group{grid-template-columns:1fr}}.card-wrapper{box-shadow:none;background:0 0;border:none;padding:0}.toast-banner{color:#fff;z-index:10;text-align:center;background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);border:1px solid #fff3;border-radius:10px;width:90%;max-width:380px;padding:12px 20px;font-size:14px;font-weight:600;animation:.3s cubic-bezier(.175,.885,.32,1.275) slideDown;position:absolute;top:-45px;left:50%;transform:translate(-50%);box-shadow:0 8px 20px #ef44444d}@keyframes slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.card{box-sizing:border-box;background:#fff;border-radius:18px;width:min(100%,460px);padding:12px 24px 24px;font-family:IBM Plex Sans Thai,sans-serif}.card-header{justify-content:flex-start;margin-bottom:14px;display:flex}.back-btn{color:#475569;cursor:pointer;background:#fff;border:1px solid #d6deea;border-radius:10px;justify-content:center;align-items:center;gap:7px;padding:9px 14px;font-size:14px;font-weight:600;transition:all .2s;display:inline-flex;box-shadow:0 2px 6px #0f172a0d}.card h2{text-align:center;color:#1e293b;justify-content:center;align-items:center;gap:8px;margin:0 0 8px;font-size:clamp(1.35rem,4vw,1.65rem);line-height:1.35;display:flex}.time-info{text-align:center;color:#64748b;justify-content:center;align-items:center;gap:6px;margin:0 0 24px;font-size:13px;font-weight:500;line-height:1.5;display:flex}.form-group{margin-bottom:18px}.form-group label{color:#475569;margin-bottom:7px;font-size:14px;font-weight:600;display:block}.form-group input{box-sizing:border-box;border:1px solid #cbd5e1;border-radius:10px;outline:none;width:100%;min-height:46px;padding:11px 14px;font-size:15px;transition:border-color .2s,box-shadow .2s}.form-group input:focus{border-color:#3b82f6}.bypass-checkbox{justify-content:center;align-items:center;margin-top:15px;display:flex}.bypass-checkbox label{color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:13px;display:flex}.bypass-checkbox input{cursor:pointer}.submit-btn{color:#fff;cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;width:100%;margin-top:15px;padding:12px;font-size:16px;font-weight:600;transition:all .3s;display:inline-flex;box-shadow:0 4px 10px #0000001a}.submit-btn.checkin{color:#fff;background:linear-gradient(135deg,#5f3da2b3,#a548ec99);box-shadow:0 6px 18px #6a1b9a40}.submit-btn.checkin:hover{background:linear-gradient(135deg,#5f3da2,#a548ec);transform:translateY(-1px);box-shadow:0 8px 22px #6a1b9a59}.step-card-view{text-align:center;padding:35px 30px}.step-card-view:has(.verify-form){transform:translateY(-170px)}.step-icon{margin-bottom:18px;font-size:3.5rem;animation:.6s cubic-bezier(.175,.885,.32,1.275) bounceIn;display:inline-block}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}.step-desc{color:#64748b;margin-top:8px;margin-bottom:25px;font-size:14px;line-height:1.6}.step-desc.font-medium{color:#334155;font-size:15px;font-weight:500}.evaluate-btn{background:linear-gradient(135deg,#f97316 0%,#ea580c 100%)}.evaluate-btn:hover{background:linear-gradient(135deg,#ea580c 0%,#d97706 100%);box-shadow:0 4px 12px #ea580c4d}.verify-btn{color:#374151;background:linear-gradient(135deg,#e5e7eb,#d1d5db);box-shadow:0 6px 18px #6b72802e}.verify-btn:hover{background:linear-gradient(135deg,#d1d5db,#c4cbd4);transform:translateY(-1px);box-shadow:0 8px 20px #6b72803d}.skip-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;margin-top:10px;font-size:13px;text-decoration:underline;transition:color .2s;display:inline-block}.skip-btn:hover{color:#64748b}.verify-form{gap:8px;margin-bottom:20px;display:flex}.verify-input{border:1px solid #cbd5e1;border-radius:8px;outline:none;flex:1;padding:10px 14px;font-size:14px;transition:border-color .2s}.verify-input:focus{border-color:#3b82f6}.verify-submit-btn{color:#fff;cursor:pointer;background:#334155;border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;transition:background .2s}.verify-submit-btn:hover{background:#1e293b}.results-status{text-align:center;color:#64748b;padding:15px;font-size:13px}.result-item{border-radius:8px;align-items:flex-start;gap:10px;margin-bottom:5px;padding:10px 12px;font-size:13px;display:flex}.result-item:last-child{margin-bottom:0}.result-item.found{background:#22c55e14;border:1px solid #22c55e26}.result-item.not-found{color:#dc2626;background:#ef444414;border:1px solid #ef444426;justify-content:center;padding:15px;font-weight:500}.bullet{margin-top:2px;font-size:12px}.result-details{flex-direction:column;display:flex}.res-name{color:#0f172a;margin-bottom:2px;font-weight:600}.res-school{color:#475569;margin-bottom:2px}.res-time{color:#22c55e;font-weight:500}.verify-actions{justify-content:space-between;align-items:center;margin-top:15px;display:flex}.verify-actions .back-btn{padding:8px 16px}.verify-actions .skip-btn{margin:0}.form-select{box-sizing:border-box;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:10px;outline:none;width:100%;min-height:46px;padding:11px 14px;font-size:15px;transition:border-color .2s,box-shadow .2s}.form-select:focus{border-color:#3b82f6}.res-activity{color:#ea580c;margin-bottom:2px;font-size:12px;font-weight:600}.form-group input.input-error,.form-select.input-error{background-color:#fef2f2!important;border-color:#ef4444!important}.form-group input.input-error:focus,.form-select.input-error:focus{border-color:#ef4444!important;box-shadow:0 0 0 3px #ef444426!important}.error-text{color:#ef4444;text-align:left;margin-top:5px;font-size:12.5px;font-weight:600;animation:.2s ease-in-out validationFadeIn;display:block}@keyframes validationFadeIn{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){.card-wrapper{width:100%}.card{border-radius:0;width:100%;padding:0 18px 24px}.card-header{margin-bottom:18px}.back-btn{border-radius:9px;padding:8px 12px;font-size:13px}.card h2{font-size:1.45rem}.time-info{margin-bottom:22px;font-size:12.5px}.form-group{margin-bottom:16px}.form-group label{font-size:13.5px}.form-group input,.form-select{min-height:44px;padding:10px 13px;font-size:14px}.step-card-view:has(.verify-form){transform:translateY(-120px)}}.camera-box{color:#666;background:#fafafa;border:2px dashed #999;border-radius:10px;justify-content:center;align-items:center;height:220px;margin-top:10px;display:flex;overflow:hidden}.preview-image{object-fit:cover;width:100%;height:100%}.camera-placeholder{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.camera-buttons{gap:10px;margin-top:15px;display:flex}.camera-buttons button{color:#374151;cursor:pointer;background:linear-gradient(135deg,#e5e7eb,#d1d5db);border:none;border-radius:7px;flex:1;justify-content:center;align-items:center;gap:6px;min-height:36px;padding:7px 10px;font-size:12px;font-weight:600;transition:all .25s;display:inline-flex;box-shadow:0 6px 18px #6b72802e}.camera-buttons button:hover{background:linear-gradient(135deg,#d1d5db,#c4cbd4);transform:translateY(-1px);box-shadow:0 8px 20px #6b72803d}.dashboard{color:#334155;background:#f8fafc;min-height:100vh;padding:40px;font-family:IBM Plex Sans Thai,sans-serif}.dashboard-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;margin-bottom:30px;display:flex}.header-left{gap:10px;display:flex}.header-actions{flex-wrap:wrap;gap:10px;display:flex}.dashboard-header h1{color:#0f172a;margin:0;font-size:1.8rem;font-weight:700}.back-btn{color:#475569;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600;transition:all .2s;box-shadow:0 1px 3px #0000000d}.back-btn:hover{color:#0f172a;background:#f1f5f9;border-color:#94a3b8}.logout-btn{color:#fff;cursor:pointer;background:#64748b;border:none;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600;transition:all .2s}.logout-btn:hover{background:#475569}.create-act-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#475569 0%,#334155 100%);border:none;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600;transition:all .2s;box-shadow:0 4px 10px #33415533}.create-act-btn:hover{background:linear-gradient(135deg,#334155 0%,#1e293b 100%);box-shadow:0 4px 12px #33415559}.export-btn{color:#fff;cursor:pointer;background:#10b981;border:none;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600;transition:all .2s;box-shadow:0 4px 10px #10b98133}.export-btn:hover{background:#059669;box-shadow:0 4px 12px #10b98159}.refresh-btn{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600;transition:all .2s;box-shadow:0 4px 10px #3b82f640}.refresh-btn:hover{background:#2563eb;box-shadow:0 4px 12px #3b82f659}.loading-container{color:#64748b;justify-content:center;align-items:center;height:200px;font-size:18px;display:flex}.cards{flex-wrap:wrap;gap:20px;margin-bottom:30px;display:flex}.stats-card{background:#fff;border-left:6px solid #cbd5e1;border-radius:16px;flex:1;min-width:250px;padding:24px;position:relative;overflow:hidden;box-shadow:0 4px 15px #00000008}.stats-card h3{color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:14px;font-weight:600}.stats-card h2{margin-bottom:5px;font-size:28px;font-weight:700}.stats-card p{color:#94a3b8;font-size:12px}.stats-card.green{border-left-color:#10b981}.stats-card.green h2{color:#059669}.dashboard-controls{flex-wrap:wrap;align-items:center;gap:20px;width:100%;margin-bottom:25px;display:flex}.activity-filter-box{flex-shrink:0;align-items:center;gap:8px;display:flex}.activity-filter-box label{color:#475569;white-space:nowrap;font-size:14px;font-weight:600}.activity-select-filter{cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:12px;outline:none;padding:12px 16px;font-size:14px;transition:all .2s;box-shadow:0 2px 6px #00000005}.activity-select-filter:focus{border-color:#3b82f6;box-shadow:0 2px 8px #3b82f626}.search-bar{flex:1;gap:10px;min-width:280px;display:flex}.search-bar input{background:#fff;border:1px solid #cbd5e1;border-radius:12px;outline:none;width:100%;padding:12px 18px;font-size:15px;transition:all .2s;box-shadow:0 2px 6px #00000005}.search-bar input:focus{border-color:#3b82f6;box-shadow:0 2px 8px #3b82f626}.clear-search-btn{color:#64748b;cursor:pointer;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:12px;padding:10px 16px;font-size:14px;transition:all .2s}.clear-search-btn:hover{color:#334155;background:#e2e8f0}.table-container{background:#fff;border-radius:16px;padding:25px;overflow-x:auto;box-shadow:0 4px 20px #00000005}.table-container h2{color:#1e293b;margin-bottom:20px;font-size:1.3rem;font-weight:600}.no-data{text-align:center;color:#94a3b8;padding:40px;font-size:15px}table{border-collapse:collapse;text-align:left;width:100%}th{color:#475569;background:#f8fafc;border-bottom:2px solid #e2e8f0;padding:16px;font-size:14px;font-weight:600}td{vertical-align:middle;border-bottom:1px solid #f1f5f9;padding:16px;font-size:15px}tr:hover td{background:#f8fafc}td.bold{color:#0f172a;font-weight:600}.activity-badge-cell{white-space:nowrap}.activity-name-badge{color:#ea580c;background:#ea580c1a;border:1px solid #ea580c26;border-radius:50px;padding:5px 12px;font-size:12px;font-weight:600}.table-img{object-fit:cover;cursor:pointer;border:1px solid #e2e8f0;border-radius:8px;width:50px;height:50px;transition:transform .2s,box-shadow .2s}.table-img:hover{transform:scale(1.15);box-shadow:0 4px 10px #00000026}.no-img{color:#94a3b8;font-size:13px;font-style:italic}.time-display{flex-direction:column;font-weight:500;display:flex}.date-sub{color:#94a3b8;margin-top:2px;font-size:11px}.status-badge{border-radius:50px;padding:6px 14px;font-size:12px;font-weight:600;display:inline-block}.status-badge.status-in{color:#059669;background:#10b9811a;border:1px solid #10b98133}.modal-overlay{-webkit-backdrop-filter:blur(4px);z-index:999;box-sizing:border-box;background:#0f172aa6;justify-content:center;align-items:center;width:100vw;height:100vh;padding:16px;display:flex;position:fixed;top:0;left:0}.modal-content{box-sizing:border-box;background:#fff;border-radius:20px;flex-direction:column;width:100%;max-width:460px;max-height:calc(100vh - 32px);padding:24px;animation:.3s cubic-bezier(.16,1,.3,1) modalSlideUp;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #00000040}.modal-content.manager-modal{max-width:600px;padding:20px 24px}.modal-header-row{flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.modal-header-row h2{color:#0f172a;text-align:left;margin:0;font-size:1.35rem;font-weight:700}.modal-close-btn{color:#64748b;cursor:pointer;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:16px;font-weight:700;transition:all .2s;display:flex}.modal-close-btn:hover{color:#ef4444;background:#fee2e2;border-color:#fecaca;transform:scale(1.05)}.manager-modal-body{flex:1;margin-bottom:12px;padding-right:6px;overflow-y:auto}.manager-modal-body::-webkit-scrollbar{width:6px}.manager-modal-body::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}.manager-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.manager-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.manager-modal-footer{border-top:1px solid #e2e8f0;flex-shrink:0;justify-content:flex-end;gap:10px;padding-top:12px;display:flex}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.modal-divider{background:#e2e8f0;border:0;height:1px;margin:20px 0}.manager-list-section h3,.manager-create-section h3{color:#475569;margin-bottom:12px;font-size:14px;font-weight:700}.manager-list-container{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;max-height:200px;padding:8px;overflow-y:auto}.manager-act-item{background:#fff;border:1px solid #f1f5f9;border-radius:10px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:10px 14px;display:flex;box-shadow:0 1px 3px #00000005}.manager-act-item:last-child{margin-bottom:0}.manager-act-info{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.manager-act-thumb{object-fit:cover;border:1px solid #e2e8f0;border-radius:8px;flex-shrink:0;width:42px;height:42px}.manager-act-text{flex-direction:column;min-width:0;display:flex}.act-item-name{color:#1e293b;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;overflow:hidden}.act-item-sub{color:#64748b;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:11px;overflow:hidden}.delete-act-btn{color:#ef4444;cursor:pointer;background:#fee2e2;border:1px solid #ef444433;border-radius:8px;flex-shrink:0;padding:6px 12px;font-size:12px;font-weight:700;transition:all .2s}.delete-act-btn:hover{color:#fff;background:#dc2626;border-color:#dc2626}.manager-act-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.edit-act-btn{color:#3b82f6;cursor:pointer;background:#eff6ff;border:1px solid #3b82f633;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;transition:all .2s}.edit-act-btn:hover{color:#fff;background:#2563eb;border-color:#2563eb}.form-row-time{grid-template-columns:1fr 1fr;gap:12px;display:grid}.form-actions-row{align-items:center;gap:10px;margin-top:10px;display:flex}.cancel-edit-btn{color:#475569;cursor:pointer;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;transition:all .2s}.cancel-edit-btn:hover{color:#1e293b;background:#e2e8f0}@media (width<=480px){.manager-act-item{flex-direction:column;align-items:stretch;gap:10px}.manager-act-actions{justify-content:flex-end}.form-row-time{grid-template-columns:1fr;gap:8px}.form-actions-row{flex-direction:row;align-items:center;gap:10px;width:100%;margin-top:10px;display:flex}.form-actions-row button{white-space:nowrap;flex:1;width:auto!important;margin:0!important;padding:10px 8px!important;font-size:13px!important}}.manager-create-form-vertical{flex-direction:column;gap:12px;display:flex}.manager-create-form-vertical .form-group{margin-bottom:0}.manager-create-form-vertical .form-group label{color:#475569;margin-bottom:6px;font-size:13px;font-weight:600;display:block}.manager-create-form-vertical .form-group input{border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;padding:10px 14px;font-size:14px;transition:all .2s}.manager-create-form-vertical .form-group input:focus{border-color:#f97316;box-shadow:0 0 0 2px #f9731626}.file-input-btn{cursor:pointer;background:#f8fafc;font-size:13px;padding:8px 12px!important}.modal-actions{justify-content:flex-end;gap:12px;display:flex}.modal-actions button{cursor:pointer;border:none;border-radius:10px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s}.cancel-btn{color:#475569;background:#f1f5f9}.cancel-btn:hover{color:#1e293b;background:#e2e8f0}.login-wrapper{background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;font-family:IBM Plex Sans Thai,sans-serif;display:flex}.login-card{-webkit-backdrop-filter:blur(16px);color:#fff;background:#ffffff14;border:1px solid #ffffff1f;border-radius:20px;width:100%;max-width:420px;padding:35px 30px;box-shadow:0 20px 40px #0006}.login-back-btn{color:#cbd5e1;cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:8px;margin-bottom:20px;padding:6px 12px;font-size:13px;transition:all .2s}.login-back-btn:hover{color:#fff;background:#ffffff1a;border-color:#fff6}.login-card h2{text-align:center;margin-bottom:8px;font-size:1.6rem;font-weight:700}.login-subtitle{color:#94a3b8;text-align:center;margin-bottom:25px;font-size:13px}.error-message{color:#f87171;text-align:center;background:#ef444426;border:1px solid #ef444466;border-radius:8px;margin-bottom:15px;padding:10px;font-size:13px}.login-card .form-group{margin-bottom:20px}.login-card .form-group label{color:#cbd5e1;margin-bottom:8px;font-size:13px;font-weight:600;display:block}.login-card .form-group input{color:#fff;background:#ffffff0d;border:1px solid #fff3;border-radius:10px;outline:none;width:100%;padding:12px;font-size:15px;transition:all .2s}.login-card .form-group input:focus{background:#ffffff14;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f64d}.login-submit-btn{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:10px;width:100%;padding:12px;font-size:16px;font-weight:600;transition:all .2s;box-shadow:0 4px 12px #3b82f64d}.login-submit-btn:hover{background:#2563eb;box-shadow:0 4px 15px #3b82f666}.save-btn{color:#fff!important;background:#7c3aed!important;box-shadow:0 4px 12px #7c3aed40!important}.save-btn:hover{background:#6d28d9!important;box-shadow:0 4px 15px #7c3aed66!important}.edit-save-btn{color:#fff!important;background:#f97316!important;box-shadow:0 4px 12px #f9731640!important}.edit-save-btn:hover{background:#ea580c!important;box-shadow:0 4px 15px #f9731666!important}.status-badge-btn{cursor:pointer;text-align:center;border-radius:50px;outline:none;padding:6px 14px;font-family:inherit;font-size:12px;font-weight:600;transition:all .2s;display:inline-block}.status-badge-btn.checked{color:#059669;background:#10b9811a;border:1px solid #10b98133}.status-badge-btn.checked:hover{background:#10b98133;transform:scale(1.03)}.status-badge-btn.unchecked{color:#dc2626;background:#ef44441a;border:1px solid #ef444433}.status-badge-btn.unchecked:hover{background:#ef44442e;transform:scale(1.03)}.delete-record-btn{color:#ef4444;cursor:pointer;background:#fee2e2;border:1px solid #ef444440;border-radius:10px;padding:6px 14px;font-family:inherit;font-size:13px;font-weight:600;transition:all .2s}.delete-record-btn:hover{color:#fff;background:#dc2626;border-color:#dc2626;box-shadow:0 2px 8px #dc262633}.admin-profile-container{display:inline-block;position:relative}.admin-profile-badge{cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff26;border:1px solid #ffffff40;border-radius:50px;align-items:center;gap:10px;padding:6px 14px;transition:all .2s;display:flex}.admin-profile-badge:hover{background:#ffffff38;border-color:#ffffff59;box-shadow:0 2px 8px #0000001a}.admin-avatar{object-fit:cover;background-color:#f3f4f6;border:1.5px solid #fff;border-radius:50%;width:32px;height:32px}.admin-username{color:#fff;font-size:14px;font-weight:600}.dropdown-arrow{color:#ffffffb3;margin-left:2px;font-size:10px}.admin-profile-dropdown{z-index:110;background:#fff;border:1px solid #00000014;border-radius:12px;width:190px;padding:6px;animation:.2s slideDownFade;position:absolute;top:calc(100% + 8px);left:0;box-shadow:0 4px 20px #00000026}@keyframes slideDownFade{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.admin-profile-dropdown button{text-align:left;color:#374151;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;width:100%;padding:10px 14px;font-family:inherit;font-size:13.5px;font-weight:500;transition:all .15s;display:flex}.admin-profile-dropdown button:hover{color:#111827;background:#f3f4f6}.admin-profile-dropdown button.dropdown-logout{color:#dc2626;border-top:1px solid #f3f4f6;border-radius:0 0 8px 8px;margin-top:4px}.admin-profile-dropdown button.dropdown-logout:hover{color:#b91c1c;background:#fef2f2}.profile-modal{max-width:420px!important}.modal-actions-row{gap:12px;margin-top:24px;display:flex}.modal-actions-row button{flex:1}.check-all-btn{color:#fff;cursor:pointer;background:#059669;border:none;border-radius:8px;padding:8px 16px;font-family:inherit;font-size:13.5px;font-weight:600;transition:all .2s;box-shadow:0 2px 6px #05966933}.check-all-btn:hover{background:#047857;transform:scale(1.02);box-shadow:0 4px 10px #05966959}.uncheck-all-btn{color:#fff;cursor:pointer;background:#dc2626;border:none;border-radius:8px;padding:8px 16px;font-family:inherit;font-size:13.5px;font-weight:600;transition:all .2s;box-shadow:0 2px 6px #dc262633}.uncheck-all-btn:hover{background:#b91c1c;transform:scale(1.02);box-shadow:0 4px 10px #dc262659}@media (width<=768px){.user-management-grid{grid-template-columns:1fr!important;gap:16px!important}}#root:has(.vmix-container){background:0 0!important}.vmix-container{z-index:9999;justify-content:center;align-items:center;width:100vw;height:100vh;margin:0;padding:0;font-family:IBM Plex Sans Thai,sans-serif;display:flex;position:fixed;top:0;left:0;overflow:hidden}.vmix-fullscreen-overlay{opacity:0;justify-content:center;align-items:center;width:100vw;height:100vh;transition:opacity .8s cubic-bezier(.25,1,.5,1);display:flex;overflow:hidden}.vmix-fullscreen-overlay.show{opacity:1}.vmix-fullscreen-overlay.hide{opacity:0}.vmix-ambient-backdrop{z-index:1;pointer-events:none;width:100vw;height:100vh;position:absolute;top:0;left:0;overflow:hidden}.vmix-ambient-img{object-fit:cover;filter:blur(40px)brightness(.45)saturate(1.5);width:100%;height:100%;transform:scale(1.18)}.vmix-ambient-vignette{background:radial-gradient(circle,#0000 35%,#000c 100%);width:100%;height:100%;position:absolute;top:0;left:0}.vmix-photo-frame{z-index:2;justify-content:center;align-items:center;transition:all .5s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vmix-photo-frame.vmix-frame-16-9-ambient,.vmix-photo-frame:not([class*=vmix-frame-]){background-color:#0b0f19;border:4px solid #fffffff2;border-radius:20px;max-width:90vw;height:92vh;animation:.8s cubic-bezier(.16,1,.3,1) scaleIn;overflow:hidden;box-shadow:0 25px 70px #000000e6}.vmix-sharp-photo.vmix-photo-16-9-ambient,.vmix-sharp-photo:not([class*=vmix-photo-]){object-fit:contain;width:auto;max-width:100%;height:100%}.vmix-photo-frame.vmix-frame-16-9-cover{width:100vw;height:100vh;box-shadow:none;border:none;border-radius:0;animation:.8s ease-out fadeIn;top:0;left:0;overflow:hidden;transform:none}.vmix-sharp-photo.vmix-photo-16-9-cover{object-fit:cover;width:100vw;height:100vh}.vmix-photo-frame.vmix-frame-16-9-contain{border:2px solid #ffffff80;border-radius:12px;max-width:96vw;height:96vh;animation:.8s cubic-bezier(.16,1,.3,1) scaleIn;overflow:hidden;box-shadow:0 15px 50px #000c}.vmix-sharp-photo.vmix-photo-16-9-contain{object-fit:contain;width:auto;height:100%}.vmix-photo-frame.vmix-frame-classic-34{aspect-ratio:3/4;background-color:#111;border:4px solid #fff;border-radius:16px;height:88vh;animation:.8s cubic-bezier(.16,1,.3,1) scaleIn;overflow:hidden;box-shadow:0 15px 45px #000000b3}.vmix-sharp-photo.vmix-photo-classic-34{object-fit:cover;width:100%;height:100%}.vmix-student-info-pill{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;z-index:3;white-space:nowrap;text-overflow:ellipsis;background:#0f172ad9;border:1.5px solid #ffffff40;border-radius:30px;align-items:center;gap:8px;max-width:85%;padding:8px 24px;font-family:IBM Plex Sans Thai,sans-serif;font-size:18px;font-weight:700;animation:.6s slideDown;display:inline-flex;position:absolute;top:5vh;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 8px 25px #0009}.vmix-student-name{color:#fff;font-weight:800}.vmix-student-school{color:#93c5fd;font-size:15px;font-weight:600}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-50%)scale(.9)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.vmix-caption-banner{color:#fff;text-align:center;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 2px 4px #000000b3;z-index:3;background:linear-gradient(45deg,#ff007f,#ff7f00,#f0f,#0ff,#7f00ff,#ff007f) 0 0/400% 400%;border:2.5px solid #fff;border-radius:30px;max-width:85%;padding:8px 26px;font-family:IBM Plex Sans Thai,sans-serif;font-size:24px;font-weight:700;animation:8s infinite rainbowFlow;position:absolute;bottom:14vh;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 10px 30px #0009}.vmix-rainbow-hashtag{text-align:center;background:linear-gradient(45deg,#ff007f,#ff7f00,#f0f,#0ff,#7f00ff,#ff007f) 0 0/400% 400%;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px #fff;filter:drop-shadow(0 3px 8px #000000b3);letter-spacing:.8px;white-space:nowrap;text-overflow:ellipsis;z-index:3;-webkit-background-clip:text;max-width:90%;font-family:IBM Plex Sans Thai,sans-serif;font-size:44px;font-weight:900;animation:8s infinite rainbowFlow;position:absolute;bottom:5vh;left:50%;overflow:hidden;transform:translate(-50%)}@keyframes rainbowFlow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.vmix-standby-screen{flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative}.vmix-standby-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;color:#fff;background:#0f172ad9;border:1px solid #ffffff26;border-radius:20px;max-width:600px;padding:40px 60px;animation:.8s ease-out fadeIn;box-shadow:0 20px 50px #0009}.vmix-standby-icon{color:#8b5cf6;margin-bottom:16px;animation:2s ease-in-out infinite pulse}.vmix-standby-card h2{color:#f8fafc;margin:0 0 10px;font-size:26px;font-weight:800}.vmix-standby-card p{color:#94a3b8;margin:0 0 20px;font-size:15px}.vmix-standby-pulse{color:#4ade80;background:#22c55e26;border:1px solid #4ade804d;border-radius:30px;align-items:center;gap:8px;padding:6px 16px;font-size:13px;font-weight:700;display:inline-flex}.pulse-dot{background:#4ade80;border-radius:50%;width:8px;height:8px;animation:1.5s cubic-bezier(0,0,.2,1) infinite ping}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}.vmix-floating-toolbar{z-index:100;opacity:.25;pointer-events:auto;justify-content:space-between;align-items:center;transition:opacity .3s,transform .3s;display:flex;position:absolute;top:16px;left:20px;right:20px}.vmix-floating-toolbar:hover{opacity:1}.vmix-toolbar-info{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;background:#0f172ad9;border:1px solid #ffffff26;border-radius:20px;align-items:center;gap:8px;padding:6px 14px;font-size:13px;font-weight:600;display:flex;box-shadow:0 4px 12px #0000004d}.vmix-live-dot{background:#ef4444;border-radius:50%;width:8px;height:8px;animation:1s infinite alternate pulse}.vmix-activity-tag{color:#a78bfa;font-weight:700}.vmix-toolbar-actions{gap:8px;display:flex}.vmix-tool-btn{color:#f1f5f9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;background:#0f172ad9;border:1px solid #ffffff2e;border-radius:10px;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:600;transition:all .2s;display:inline-flex;box-shadow:0 4px 12px #0000004d}.vmix-tool-btn:hover{color:#fff;background:#1e293bf2;border-color:#8b5cf6;transform:translateY(-1px)}.vmix-tool-btn.settings{background:linear-gradient(135deg,#7c3aed,#6366f1);border:none}.vmix-tool-btn.settings:hover{background:linear-gradient(135deg,#6d28d9,#4f46e5)}.vmix-hub-wrapper{color:#f8fafc;box-sizing:border-box;background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%);min-height:100vh;padding:40px 20px 80px;font-family:IBM Plex Sans Thai,sans-serif}.vmix-hub-container{max-width:1200px;margin:0 auto}.vmix-hub-header{text-align:center;margin-bottom:35px}.vmix-hub-badge{color:#a78bfa;text-transform:uppercase;letter-spacing:.5px;background:#8b5cf626;border:1px solid #8b5cf64d;border-radius:20px;align-items:center;gap:6px;margin-bottom:12px;padding:5px 14px;font-size:12px;font-weight:700;display:inline-flex}.vmix-hub-header h1{background:linear-gradient(135deg,#fff 0%,#cbd5e1 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0 0 10px;font-size:34px;font-weight:900}.vmix-hub-header p{color:#94a3b8;max-width:650px;margin:0 auto 20px;font-size:16px}.vmix-hub-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.vmix-hub-back-btn,.vmix-hub-primary-btn{cursor:pointer;border-radius:10px;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:700;transition:all .2s;display:inline-flex}.vmix-hub-back-btn{color:#e2e8f0;background:#ffffff14;border:1px solid #ffffff26}.vmix-hub-back-btn:hover{background:#ffffff26}.vmix-hub-primary-btn{color:#fff;border:none;box-shadow:0 4px 15px #6366f159}.vmix-hub-primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f180}.vmix-global-text-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#1e293bbf;border:1px solid #ffffff26;border-radius:18px;margin-bottom:40px;padding:26px;box-shadow:0 12px 35px #00000059}.vmix-text-card-header{align-items:flex-start;gap:12px;margin-bottom:16px;display:flex}.vmix-text-card-header h3{color:#f1f5f9;margin:0 0 4px;font-size:19px;font-weight:800}.vmix-text-card-header p{color:#94a3b8;margin:0;font-size:13px}.vmix-text-input-group{flex-wrap:wrap;gap:10px;margin-bottom:16px;display:flex}.vmix-hub-text-input{color:#fff;background:#0f172ad9;border:1.5px solid #8b5cf666;border-radius:10px;outline:none;flex:1;min-width:280px;padding:12px 18px;font-size:15px;font-weight:600;transition:all .2s}.vmix-hub-text-input:focus{border-color:#ec4899;box-shadow:0 0 0 3px #ec489940}.vmix-quick-tag-btn{color:#f472b6;cursor:pointer;background:#ec489926;border:1px solid #ec48994d;border-radius:10px;padding:0 14px;font-size:13px;font-weight:700;transition:all .2s}.vmix-quick-tag-btn:hover{color:#fff;background:#ec489940}.vmix-hub-color-presets{background:#0f172a99;border:1px solid #ffffff1a;border-radius:12px;margin-bottom:16px;padding:14px 18px}.vmix-preset-label{color:#cbd5e1;align-items:center;gap:6px;margin-bottom:10px;font-size:13px;font-weight:700;display:inline-flex}.vmix-preset-chips{flex-wrap:wrap;gap:8px;display:flex}.vmix-color-chip{color:#e2e8f0;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;transition:all .2s}.vmix-color-chip:hover{color:#fff;background:#ffffff2e}.vmix-color-chip.active{color:#fff;background:linear-gradient(135deg,#ec4899,#8b5cf6);border-color:#0000;box-shadow:0 4px 12px #ec489959}.vmix-hub-custom-color-row{color:#cbd5e1;align-items:center;gap:10px;margin-top:12px;font-size:13px;display:flex}.vmix-color-picker-input{cursor:pointer;background:0 0;border:2px solid #ffffff4d;border-radius:8px;width:38px;height:38px;padding:0}.vmix-hex-input{color:#fff;background:#1e293b;border:1px solid #fff3;border-radius:8px;width:110px;padding:8px 12px;font-size:13px;font-weight:600}.vmix-hub-live-preview-box{background:#000;border:1.5px dashed #fff3;border-radius:12px;justify-content:center;align-items:center;min-height:80px;padding:20px 24px;display:flex;position:relative;overflow:hidden}.vmix-preview-tag{color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600;position:absolute;top:8px;left:12px}.vmix-form-row-2col{grid-template-columns:1fr 1fr;gap:14px;display:grid}.vmix-custom-color-box{align-items:center;gap:10px;margin-top:8px;display:flex}.vmix-modal-preview-card{background:#000;border:1px solid #fff3;border-radius:12px;justify-content:center;align-items:center;min-height:70px;padding:24px 20px 20px;display:flex;position:relative;overflow:hidden}@keyframes pulseGlow{0%,to{filter:drop-shadow(0 3px 8px #000000b3)drop-shadow(0 0 15px #ec489980);transform:translate(-50%)scale(1)}50%{filter:drop-shadow(0 3px 12px #000000e6)drop-shadow(0 0 25px #ec4899e6);transform:translate(-50%)scale(1.03)}}.vmix-section-title{color:#f8fafc;align-items:center;gap:10px;margin:0 0 20px;font-size:20px;font-weight:800;display:flex}.vmix-cards-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;display:grid}.vmix-act-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1e293ba6;border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;overflow:hidden;box-shadow:0 6px 20px #00000040}.vmix-act-card:hover{border-color:#8b5cf666;transform:translateY(-4px);box-shadow:0 12px 30px #0006}.vmix-card-media{background:#0f172a;width:100%;height:160px;position:relative}.vmix-card-media img{object-fit:cover;width:100%;height:100%}.vmix-act-id-pill{color:#a78bfa;background:#0f172ad9;border:1px solid #8b5cf64d;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;position:absolute;top:12px;right:12px}.vmix-card-body{flex-direction:column;flex:1;padding:20px;display:flex;position:relative}.vmix-act-title{color:#fff;margin:0 0 6px;font-size:18px;font-weight:800;line-height:1.35}.vmix-act-sub{color:#94a3b8;margin:0 0 14px;font-size:13px;line-height:1.4}.vmix-act-meta{color:#cbd5e1;flex-wrap:wrap;gap:14px;margin-bottom:20px;font-size:12px;display:flex}.vmix-act-meta span{align-items:center;gap:5px;display:inline-flex}.vmix-card-btn-group{grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;margin-bottom:10px;display:grid}.vmix-launch-btn{cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:10px 12px;font-size:13px;font-weight:700;transition:all .2s;display:flex}.vmix-launch-btn.black-bg{color:#fff;background:#000;border:1px solid #fff3}.vmix-launch-btn.black-bg:hover{background:#1e293b;border-color:#fff}.vmix-launch-btn.transparent-bg{color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 12px #2563eb4d}.vmix-launch-btn.transparent-bg:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);transform:translateY(-1px)}.vmix-copy-url-btn{color:#94a3b8;cursor:pointer;background:#ffffff0d;border:1px dashed #fff3;border-radius:8px;justify-content:center;align-items:center;gap:6px;width:100%;padding:8px;font-size:12px;font-weight:600;transition:all .2s;display:flex}.vmix-copy-url-btn:hover{color:#fff;background:#ffffff1a;border-color:#8b5cf6}.vmix-hub-loading,.vmix-hub-empty{text-align:center;color:#94a3b8;padding:60px 20px;font-size:16px}.vmix-modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10000;box-sizing:border-box;background:#000000bf;justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;display:flex;position:fixed;top:0;left:0}.vmix-modal-card{color:#f8fafc;background:#0f172a;border:1px solid #ffffff26;border-radius:20px;width:100%;max-width:620px;animation:.3s scaleIn;overflow:hidden;box-shadow:0 25px 60px #000000b3}.vmix-modal-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.vmix-modal-header h2{color:#f1f5f9;margin:0;font-size:18px;font-weight:800}.vmix-modal-close{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:20px}.vmix-modal-close:hover{color:#fff;background:#ffffff1a}.vmix-modal-body{flex-direction:column;gap:20px;max-height:70vh;padding:24px;display:flex;overflow-y:auto}.vmix-form-group{flex-direction:column;gap:8px;display:flex}.vmix-form-group label{color:#e2e8f0;align-items:center;gap:8px;font-size:14px;font-weight:700;display:flex}.vmix-modal-input,.vmix-modal-select{color:#fff;box-sizing:border-box;background:#1e293b;border:1px solid #ffffff26;border-radius:8px;width:100%;padding:10px 14px;font-size:14px;font-weight:600}.vmix-modal-input:focus,.vmix-modal-select:focus{border-color:#8b5cf6;outline:none;box-shadow:0 0 0 2px #8b5cf640}.vmix-quick-tags-row{flex-wrap:wrap;gap:8px;display:flex}.vmix-quick-tags-row button{color:#cbd5e1;cursor:pointer;background:#ffffff14;border:1px solid #ffffff1f;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600;transition:all .2s}.vmix-quick-tags-row button:hover{color:#fff;background:#8b5cf6}.vmix-radio-group{flex-wrap:wrap;gap:10px;display:flex}.vmix-radio-pill{cursor:pointer;background:#1e293b;border:1px solid #ffffff1f;border-radius:8px;flex:1;align-items:center;gap:8px;min-width:140px;padding:10px 14px;font-size:13px;font-weight:600;transition:all .2s;display:flex}.vmix-radio-pill.active{color:#fff;background:#8b5cf633;border-color:#8b5cf6}.vmix-radio-pill input{display:none}.vmix-modal-copy-btn{color:#fff;cursor:pointer;white-space:nowrap;background:#3b82f6;border:none;border-radius:8px;align-items:center;gap:6px;padding:0 16px;font-size:13px;font-weight:700;display:inline-flex}.vmix-modal-copy-btn:hover{background:#2563eb}.vmix-modal-footer{border-top:1px solid #ffffff1a;justify-content:flex-end;padding:16px 24px;display:flex}.vmix-modal-save-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#ec4899);border:none;border-radius:10px;padding:10px 24px;font-size:14px;font-weight:700;transition:all .2s;box-shadow:0 4px 15px #ec489959}.vmix-modal-save-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #ec489980}.vmix-hub-toast,.vmix-overlay-toast{color:#fff;z-index:10001;background:#10b981;border-radius:30px;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:700;animation:.3s slideDown;display:inline-flex;position:fixed;top:24px;left:50%;transform:translate(-50%);box-shadow:0 10px 25px #0006}.navbar{z-index:9999;width:100%;box-shadow:none;background:0 0;padding:10px 0;font-family:IBM Plex Sans Thai,sans-serif;transition:transform .4s,opacity .4s,background .4s,-webkit-backdrop-filter .4s,backdrop-filter .4s;display:flex;position:absolute;top:0;left:0}.nav-hide{width:100%;height:64px}.fixed-nav{z-index:9999;width:100%;position:fixed;top:0;left:0}.fixed-nav.hide{animation:.5s backwards slideDown}.nav-group{align-items:center;width:100%;padding:0 20px;display:flex}.nav-border-centered{grid-template-columns:1fr auto 1fr;align-items:center;width:100%;max-width:1200px;margin:0 auto;display:grid}.nav-center-logo{justify-content:center;align-items:center;display:flex}.nav-logo-centered{object-fit:contain;width:auto;height:48px;transition:transform .3s}.nav-logo-centered:hover{transform:scale(1.04)}.nav-right-toggle{justify-content:flex-end;align-items:center;display:flex}.theme-toggle-nav{color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;transition:all .25s;display:flex}.theme-toggle-nav:hover{background:#ffffff2e;border-color:#ffffff4d;transform:rotate(12deg)scale(1.05)}.theme-toggle-nav:active{transform:scale(.95)}@media (width<=480px){.nav-group{padding:0 12px}.nav-logo-centered{height:42px}.theme-toggle-nav{width:34px;height:34px}}.footer{color:#5f3da2;text-align:center;background:#fff;border-top:1px solid #5f3da214;width:100%;padding:30px;font-family:IBM Plex Sans Thai,sans-serif;transition:all .3s ease-in-out;box-shadow:0 -5px 20px #0000001a}.footer-link{color:#5f3da2;text-decoration:none;transition:all .3s}.footer-link:hover{color:#b796ff}.footer p{color:#5f3da2;margin:10px 0;font-size:15px;line-height:1.6}.footer-author{opacity:.9;color:#5f3da2;margin-top:15px;font-size:14px;font-weight:400}.footer-social{justify-content:center;gap:15px;margin-top:15px;display:flex}.footer-social a{color:#5f3da2;background:#f5f3ff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:all .3s;display:flex}.footer-social a:hover{color:#fff;background:#b796ff;transform:scale(1.15)}@media (width<=480px){.footer{padding:20px 16px}.footer-link h3{font-size:15px;line-height:1.4}.footer p{font-size:13px;line-height:1.5}.footer-author{font-size:12px;line-height:1.4}.footer-social{gap:10px}.footer-social a{width:32px;height:32px}}@media (width<=375px){.footer-link h3{font-size:14px}.footer p{font-size:12px}.footer-author{font-size:11px}}.developer-link{color:inherit;text-decoration:underline;transition:all .25s}.developer-link:hover{color:#c084fc}*{box-sizing:border-box;margin:0;padding:0;font-family:IBM Plex Sans Thai,sans-serif}body{background:#f4f6f9;font-family:IBM Plex Sans Thai,sans-serif}