#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:20px}.container{max-width:1200px;margin:0 auto;padding:0 20px}header{margin-bottom:30px}header h1{color:#42b983;font-size:2.5rem}.home[data-v-993e561c]{padding:20px}.card[data-v-993e561c]{background-color:#fff;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.1);padding:30px;max-width:900px;margin:0 auto}h2[data-v-993e561c]{color:#42b983;margin-bottom:10px}p[data-v-993e561c]{color:#666;margin-bottom:20px}.upload-area[data-v-993e561c]{border:2px dashed #ccc;border-radius:8px;padding:30px;text-align:center;cursor:pointer;transition:all .3s;margin-bottom:20px}.upload-area.drag-over[data-v-993e561c]{border-color:#42b983;background-color:rgba(66,185,131,.1)}.file-input[data-v-993e561c]{display:none}.upload-icon[data-v-993e561c]{color:#42b983;margin-bottom:15px}.file-name[data-v-993e561c]{color:#42b983;font-weight:700;margin-top:10px}.progress-container[data-v-993e561c]{width:100%;height:20px;background-color:#f0f0f0;border-radius:10px;overflow:hidden;margin:20px 0;position:relative}.progress-bar[data-v-993e561c]{height:100%;background-color:#42b983;transition:width .3s}.progress-text[data-v-993e561c]{position:absolute;top:0;left:50%;transform:translateX(-50%);line-height:20px;color:#fff;font-weight:700;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.button-group[data-v-993e561c]{display:flex;gap:15px;justify-content:center;margin-bottom:30px}.btn[data-v-993e561c]{padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:16px;display:flex;align-items:center;gap:8px;transition:all .3s}.btn.primary[data-v-993e561c]{background-color:#42b983;color:#fff}.btn.primary[data-v-993e561c]:hover{background-color:#3aa876}.btn.secondary[data-v-993e561c]{background-color:#f0f0f0;color:#333}.btn.secondary[data-v-993e561c]:hover{background-color:#e0e0e0}.btn[data-v-993e561c]:disabled{opacity:.5;cursor:not-allowed}.class-list[data-v-993e561c]{margin-top:30px}h3[data-v-993e561c]{color:#333;margin-bottom:20px}.classes-grid[data-v-993e561c]{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px}.class-card[data-v-993e561c]{border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;transition:all .3s}.class-card[data-v-993e561c]:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-3px)}.class-link[data-v-993e561c]{display:block;padding:15px;text-decoration:none;color:#333}.class-header[data-v-993e561c]{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #f0f0f0}h4[data-v-993e561c]{margin:0;color:#42b983}.student-count[data-v-993e561c]{background-color:#f0f0f0;padding:3px 8px;border-radius:12px;font-size:12px}.class-body p[data-v-993e561c]{margin:5px 0;font-size:14px;color:#666;text-align:left}.more[data-v-993e561c]{color:#999;font-style:italic}.shuffling-animation[data-v-993e561c]{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:1000}.spinner-container[data-v-993e561c]{text-align:center;color:#fff}.spinner[data-v-993e561c]{width:60px;height:60px;border:6px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#42b983;animation:spin-data-v-993e561c 1s ease-in-out infinite;margin:0 auto 20px}@keyframes spin-data-v-993e561c{to{transform:rotate(1turn)}}.class-display[data-v-a6b13da0]{padding:20px}.card[data-v-a6b13da0]{background-color:#fff;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.1);padding:20px;max-width:1200px;margin:0 auto}.header[data-v-a6b13da0]{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #f0f0f0}h2[data-v-a6b13da0]{color:#42b983;margin:0}.btn[data-v-a6b13da0]{padding:8px 15px;border:none;border-radius:5px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:6px;transition:all .3s}.export-btn[data-v-a6b13da0]{background-color:#42b983;color:#fff}.export-btn[data-v-a6b13da0]:hover{background-color:#3aa876}.back-link[data-v-a6b13da0]{color:#666;text-decoration:none;display:flex;align-items:center;gap:6px;font-size:14px}.back-link[data-v-a6b13da0]:hover{color:#42b983}.class-stats[data-v-a6b13da0]{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px;padding:15px;background-color:#f9f9f9;border-radius:8px}.stat-item[data-v-a6b13da0]{display:flex;align-items:center;gap:8px}.stat-label[data-v-a6b13da0]{color:#666;font-weight:700}.stat-value[data-v-a6b13da0]{color:#333}.table-container[data-v-a6b13da0]{overflow-x:auto}.student-table[data-v-a6b13da0]{width:100%;border-collapse:collapse}.student-table td[data-v-a6b13da0],.student-table th[data-v-a6b13da0]{padding:12px 15px;text-align:left;border-bottom:1px solid #e0e0e0}.student-table th[data-v-a6b13da0]{background-color:#f0f0f0;font-weight:700;color:#333}.even-row[data-v-a6b13da0]{background-color:#f9f9f9}.no-data[data-v-a6b13da0]{color:#999}.loading[data-v-a6b13da0],.no-data[data-v-a6b13da0]{text-align:center;padding:40px 0}.spinner[data-v-a6b13da0]{width:40px;height:40px;border:4px solid rgba(0,0,0,.1);border-radius:50%;border-top-color:#42b983;animation:spin-data-v-a6b13da0 1s ease-in-out infinite;margin:0 auto 15px}@keyframes spin-data-v-a6b13da0{to{transform:rotate(1turn)}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;color:#333;line-height:1.6}@media (max-width:768px){.container{padding:0 15px}.button-group{flex-direction:column}.btn{width:100%;justify-content:center}.classes-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.class-stats{flex-direction:column;gap:10px}}.loading-spinner{width:50px;height:50px;border:5px solid rgba(0,0,0,.1);border-radius:50%;border-top-color:#42b983;animation:spin 1s ease-in-out infinite;margin:20px auto}@keyframes spin{to{transform:rotate(1turn)}}.btn{padding:10px 18px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background-color:#42b983;color:#fff}.btn-primary:hover{background-color:#3aa876}.btn-secondary{background-color:#f0f0f0;color:#333}.btn-secondary:hover{background-color:#e0e0e0}.btn:disabled{opacity:.5;cursor:not-allowed}.card{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.08);padding:24px;margin-bottom:24px}h1,h2,h3,h4,h5,h6{color:#333;margin-bottom:16px;font-weight:600}h1{font-size:28px}h2{font-size:24px}h3{font-size:20px}h4{font-size:18px}.table{width:100%;border-collapse:collapse}.table td,.table th{padding:12px 16px;text-align:left;border-bottom:1px solid #e0e0e0}.table th{background-color:#f5f5f5;font-weight:600}.table tbody tr:hover{background-color:#f9f9f9}.form-control{width:100%;padding:10px 14px;border:1px solid #ddd;border-radius:4px;font-size:14px;transition:border-color .3s}.form-control:focus{outline:none;border-color:#42b983;box-shadow:0 0 0 2px rgba(66,185,131,.2)}.alert{padding:16px;border-radius:4px;margin-bottom:24px}.alert-success{background-color:rgba(66,185,131,.1);color:#3aa876;border-left:4px solid #42b983}.alert-error{background-color:rgba(245,87,87,.1);color:#e74c3c;border-left:4px solid #e74c3c}.alert-info{background-color:rgba(52,152,219,.1);color:#2980b9;border-left:4px solid #3498db}.pagination{gap:8px;margin-top:24px}.pagination,.pagination-item{display:flex;justify-content:center}.pagination-item{width:36px;height:36px;border:1px solid #ddd;border-radius:4px;align-items:center;cursor:pointer;transition:all .3s}.pagination-item.active{background-color:#42b983;color:#fff;border-color:#42b983}.pagination-item:hover:not(.active){border-color:#42b983;color:#42b983}.progress{height:8px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;margin-bottom:16px}.progress-bar{height:100%;background-color:#42b983;transition:width .3s}.fade-enter{opacity:0}.fade-enter-active{opacity:1;transition:opacity .3s}.fade-leave{opacity:1}.fade-leave-active{opacity:0;transition:opacity .3s}.slide-enter{transform:translateY(20px);opacity:0}.slide-enter-active{transition:transform .3s,opacity .3s}.slide-enter-active,.slide-leave{transform:translateY(0);opacity:1}.slide-leave-active{transform:translateY(20px);opacity:0;transition:transform .3s,opacity .3s}