.draggable-card[data-v-79687bb4]{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;transition:var(--transition-normal);cursor:pointer;position:relative;border:1px solid var(--border-color);animation:fadeInUp-79687bb4 .6s ease-out forwards;opacity:0;transform:translateY(20px);width:600px;min-height:420px}.draggable-card[data-v-79687bb4]:hover{transform:translateY(-4px);box-shadow:0 12px 40px #227a5326;border-color:var(--brand-main)}@keyframes fadeInUp-79687bb4{to{opacity:1;transform:translateY(0)}}.card-image[data-v-79687bb4]{position:relative;height:200px;overflow:hidden;background:var(--bg-tertiary)}.card-image img[data-v-79687bb4]{width:100%;height:100%;object-fit:cover;transition:var(--transition-normal)}.draggable-card:hover .card-image img[data-v-79687bb4]{transform:scale(1.05)}.card-overlay[data-v-79687bb4]{position:absolute;inset:0;background:var(--bg-overlay);opacity:0;transition:var(--transition-normal);display:flex;align-items:center;justify-content:center}.draggable-card:hover .card-overlay[data-v-79687bb4]{opacity:1}.card-hover-content[data-v-79687bb4]{text-align:center}.view-more[data-v-79687bb4]{color:var(--text-inverse);font-weight:600;font-size:var(--font-size-sm);padding:10px 20px;border:2px solid var(--text-inverse);border-radius:var(--radius-2xl);background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:var(--transition-normal);cursor:pointer}.view-more[data-v-79687bb4]:hover{background:var(--text-inverse);color:var(--brand-main);transform:scale(1.05)}.card-badge[data-v-79687bb4]{position:absolute;top:12px;left:12px;background:var(--brand-main);color:var(--text-inverse);padding:4px 8px;border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.card-content[data-v-79687bb4]{padding:var(--spacing-lg);display:flex;flex-direction:column;height:220px;overflow:hidden}.content-main[data-v-79687bb4]{display:flex;gap:var(--spacing-md);flex:1;min-height:0}.content-left[data-v-79687bb4]{flex:1;display:flex;flex-direction:column;min-width:0}.content-right[data-v-79687bb4]{flex-shrink:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;min-width:120px}.card-title[data-v-79687bb4]{font-size:var(--font-size-base);font-weight:700;color:var(--text-primary);margin:0 0 6px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex-shrink:0}.card-description[data-v-79687bb4]{color:var(--text-secondary);font-size:var(--font-size-sm);line-height:1.3;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex-shrink:0}.card-tags[data-v-79687bb4]{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;flex-shrink:0}.tag[data-v-79687bb4]{background:var(--bg-secondary);color:var(--text-secondary);padding:3px 6px;border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:500;border:1px solid var(--border-color);transition:var(--transition-fast);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag[data-v-79687bb4]:hover{background:var(--brand-main);color:var(--text-inverse)}.card-stats[data-v-79687bb4]{display:flex;flex-direction:column;gap:6px;align-items:flex-end}.stat[data-v-79687bb4]{color:var(--text-tertiary);font-size:var(--font-size-xs);font-weight:500;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;text-align:right}.card-actions[data-v-79687bb4]{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md);flex-shrink:0;min-height:50px}.left-actions[data-v-79687bb4]{display:flex;align-items:center}.right-actions[data-v-79687bb4]{display:flex;gap:8px;align-items:center}.enroll-btn[data-v-79687bb4]{background:#22c55ee6;color:#fff!important;border:2px solid rgba(34,197,94,.3);padding:8px 16px;border-radius:var(--radius-md);font-weight:600;font-size:var(--font-size-sm);cursor:pointer;transition:all .3s ease;white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #22c55e33}.enroll-btn[data-v-79687bb4]:hover{background:#22c55e;border-color:#22c55e80;transform:translateY(-2px);box-shadow:0 4px 16px #22c55e4d}.enroll-btn[data-v-79687bb4]:active{transform:translateY(0)}.enroll-btn.create-btn[data-v-79687bb4]{background:#16a34ae6;color:#fff!important;border-color:#16a34a4d}.enroll-btn.create-btn[data-v-79687bb4]:hover{background:#16a34a;border-color:#16a34a80}.delete-btn[data-v-79687bb4]{background:#ef4444e6;color:#fff!important;border:2px solid rgba(239,68,68,.3);padding:6px 10px;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-xs);transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #ef444433}.delete-btn[data-v-79687bb4]:hover{background:#ef4444;border-color:#ef444480;transform:translateY(-2px);box-shadow:0 4px 16px #ef44444d}.delete-btn[data-v-79687bb4]:active{transform:translateY(0)}.summary-btn[data-v-79687bb4]{background:#3b82f6cc;color:#fff!important;border:2px solid rgba(59,130,246,.3);padding:6px 10px;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-xs);transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #3b82f633}.summary-btn[data-v-79687bb4]:hover{background:#3b82f6;border-color:#3b82f680;transform:translateY(-2px);box-shadow:0 4px 16px #3b82f64d}.summary-btn[data-v-79687bb4]:active{transform:translateY(0)}.members-btn[data-v-79687bb4]{background:#22c55ecc;color:#fff!important;border:2px solid rgba(34,197,94,.3);padding:6px 10px;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-xs);transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #22c55e33}.members-btn[data-v-79687bb4]:hover{background:#22c55e;border-color:#22c55e80;transform:translateY(-2px);box-shadow:0 4px 16px #22c55e4d}.members-btn[data-v-79687bb4]:active{transform:translateY(0)}.draggable-card.create-class-view[data-v-79687bb4]{width:100%;min-height:600px;max-width:100%;margin:0;border-radius:0}.draggable-card.create-class-view .card-image[data-v-79687bb4]{height:250px}.draggable-card.create-class-view .card-content[data-v-79687bb4]{height:350px;padding:var(--spacing-xl);border-radius:0}.draggable-card.create-class-view .card-title[data-v-79687bb4]{font-size:var(--font-size-lg);margin:0 0 8px;line-height:1.4}.draggable-card.create-class-view .card-description[data-v-79687bb4]{font-size:var(--font-size-base);margin:0 0 12px;line-height:1.4}.draggable-card.create-class-view .card-tags[data-v-79687bb4]{gap:6px;margin-bottom:12px}.draggable-card.create-class-view .enroll-btn[data-v-79687bb4]{padding:12px 24px;font-size:var(--font-size-base)}.draggable-card.create-class-view .delete-btn[data-v-79687bb4],.draggable-card.create-class-view .members-btn[data-v-79687bb4]{padding:10px 16px;font-size:var(--font-size-sm)}.draggable-card.create-class-view .content-main[data-v-79687bb4]{gap:var(--spacing-lg)}.draggable-card.create-class-view .content-right[data-v-79687bb4]{min-width:140px}.draggable-card.create-class-view .card-actions[data-v-79687bb4]{min-height:60px}.draggable-card.create-class-view .right-actions[data-v-79687bb4]{gap:12px}.draggable-card.home-view[data-v-79687bb4]{width:300px;min-height:400px}.draggable-card.home-view .card-image[data-v-79687bb4]{height:180px}.draggable-card.home-view .card-content[data-v-79687bb4]{height:220px;padding:var(--spacing-lg)}.draggable-card.home-view .card-title[data-v-79687bb4]{font-size:var(--font-size-base);margin:0 0 6px;line-height:1.3}.draggable-card.home-view .card-description[data-v-79687bb4]{font-size:var(--font-size-sm);margin:0 0 8px;line-height:1.3}.draggable-card.home-view .card-tags[data-v-79687bb4]{gap:4px;margin-bottom:8px}.draggable-card.home-view .enroll-btn[data-v-79687bb4]{padding:10px 20px;font-size:var(--font-size-sm)}.draggable-card.home-view .delete-btn[data-v-79687bb4],.draggable-card.home-view .members-btn[data-v-79687bb4]{padding:8px 14px;font-size:var(--font-size-xs)}.draggable-card.home-view .content-main[data-v-79687bb4]{gap:var(--spacing-sm)}.draggable-card.home-view .content-right[data-v-79687bb4]{min-width:110px}.draggable-card.home-view .card-actions[data-v-79687bb4]{min-height:45px}.draggable-card.home-view .right-actions[data-v-79687bb4]{gap:6px}@media (prefers-color-scheme: dark){.draggable-card[data-v-79687bb4]{background:var(--bg-card);border-color:var(--border-dark)}.card-title[data-v-79687bb4]{color:var(--text-primary)}.card-description[data-v-79687bb4]{color:var(--text-secondary)}.tag[data-v-79687bb4]{background:var(--bg-tertiary);color:var(--text-secondary);border-color:var(--border-dark)}.tag[data-v-79687bb4]:hover{background:var(--brand-main);color:var(--text-inverse)}.stat[data-v-79687bb4]{color:var(--text-tertiary)}}@media (max-width: 768px){.draggable-card[data-v-79687bb4]{width:100%;max-width:300px}.content-main[data-v-79687bb4]{flex-direction:column;gap:var(--spacing-sm)}.content-right[data-v-79687bb4]{align-items:flex-start;min-width:auto}.card-stats[data-v-79687bb4]{align-items:flex-start}.stat[data-v-79687bb4]{text-align:left}.card-actions[data-v-79687bb4]{flex-direction:column;gap:var(--spacing-sm)}.left-actions[data-v-79687bb4],.right-actions[data-v-79687bb4]{justify-content:center;width:100%}.enroll-btn[data-v-79687bb4]{flex:1;max-width:200px}}.home-view{min-height:100vh;background-color:var(--bg-secondary);transition:background-color var(--transition-normal)}.logo{height:40px;width:auto}.brand-text{font-size:var(--font-size-2xl);font-weight:700;color:var(--brand-main);transition:color var(--transition-normal)}.welcome-text{color:#4a5568;font-size:var(--font-size-sm);transition:color var(--transition-normal);font-weight:500}.dark-mode .welcome-text{color:#cbd5e0}.main-content{padding-top:var(--spacing-md)}.team-section{padding:var(--spacing-xl) 0;background-color:var(--bg-secondary);transition:background-color var(--transition-normal)}.draggable-cards-section{padding:var(--spacing-2xl) 0;background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--border-color) 100%);transition:background var(--transition-normal)}.section-header{text-align:center;margin-bottom:var(--spacing-xl);max-width:800px;margin-left:auto;margin-right:auto}.header-badge{display:inline-block;background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:var(--text-inverse);font-size:var(--font-size-sm);font-weight:600;padding:8px 16px;border-radius:20px;margin-bottom:var(--spacing-md);text-transform:uppercase;letter-spacing:.5px}.section-title{font-size:var(--font-size-4xl);font-weight:700;color:var(--brand-main);margin-bottom:var(--spacing-md);transition:color var(--transition-normal)}.dark-mode .section-title{color:#fff}.section-subtitle{font-size:var(--font-size-lg);color:#4a5568;line-height:1.6;transition:color var(--transition-normal);font-weight:500}.dark-mode .section-subtitle{color:#cbd5e0}.tab-buttons{display:flex;gap:.5rem;background:var(--bg-tertiary);padding:.5rem;border-radius:12px;margin-top:var(--spacing-lg);max-width:800px;width:100%;margin-left:auto;margin-right:auto}.tab-btn{flex:1;padding:1rem 2rem;border:none;background:transparent;color:var(--text-secondary);font-size:var(--font-size-base);font-weight:600;cursor:pointer;border-radius:8px;transition:all .3s ease}.tab-btn:hover{background:#227a531a;color:var(--brand-main)}.tab-btn.active{background:var(--brand-main);color:#fff!important;box-shadow:0 2px 8px #227a534d}.tab-btn.active:hover{background:var(--brand-accent);color:#fff!important;transform:translateY(-1px);box-shadow:0 4px 12px #227a5366}.cards-container-wrapper{position:relative;max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:var(--spacing-md)}.nav-button{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:var(--bg-primary);border:2px solid var(--border-color);color:var(--brand-main);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal);z-index:10;box-shadow:var(--shadow-sm)}.nav-button:hover:not(:disabled){background:var(--brand-main);color:var(--text-inverse);border-color:var(--brand-main);transform:translateY(-50%) scale(1.1);box-shadow:var(--shadow-md)}.nav-button:disabled{opacity:.3;cursor:not-allowed;transform:translateY(-50%) scale(1)}.prev-button{left:-24px}.next-button{right:-24px}.cards-container{flex:1;overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none;padding:0 var(--spacing-md)}.cards-container:active{cursor:grabbing}.cards-wrapper{display:flex;gap:var(--spacing-lg);padding:var(--spacing-md) 0;transition:transform .3s cubic-bezier(.4,0,.2,1)}.cards-wrapper.dragging{transition:none}.draggable-card{flex:0 0 300px;background:var(--bg-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden;transition:all var(--transition-normal);cursor:pointer;animation:cardSlideIn .6s ease-out both;position:relative;border:1px solid var(--border-color)}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.draggable-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-lg)}.card-image{width:100%;height:200px;overflow:hidden;position:relative}.card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-normal)}.card-badge{position:absolute;top:12px;left:12px;background:#227a53e6;color:var(--text-inverse);font-size:var(--font-size-xs);font-weight:600;padding:4px 8px;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.card-overlay{position:absolute;inset:0;background:#227a53cc;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-normal)}.draggable-card:hover .card-overlay{opacity:1}.draggable-card:hover .card-image img{transform:scale(1.05)}.card-hover-content{color:var(--text-inverse);text-align:center}.view-more{color:#fff;font-weight:600;font-size:1rem;cursor:pointer;padding:.5rem 1rem;background:#000000b3;border-radius:var(--radius-md);transition:all var(--transition-normal);-webkit-user-select:none;user-select:none}.view-more:hover{background:#000000e6;transform:scale(1.05)}.draggable-card:hover .view-more{background:var(--text-inverse);color:var(--brand-main)}.card-content{padding:var(--spacing-lg)}.card-title{font-size:var(--font-size-xl);font-weight:700;color:var(--brand-main);margin-bottom:var(--spacing-sm);line-height:1.3;transition:color var(--transition-normal)}.card-description{font-size:var(--font-size-sm);color:#4a5568;line-height:1.6;margin-bottom:var(--spacing-md);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--transition-normal);font-weight:500}.dark-mode .card-description{color:#cbd5e0}.card-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.tag{background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:var(--text-inverse);font-size:var(--font-size-xs);font-weight:500;padding:4px var(--spacing-sm);border-radius:20px;white-space:nowrap;transition:transform var(--transition-fast)}.tag:hover{transform:scale(1.05)}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--border-color)}.card-stats{display:flex;gap:var(--spacing-sm)}.stat{font-size:var(--font-size-xs);color:#4a5568;font-weight:600}.dark-mode .stat{color:#cbd5e0}.enroll-btn{background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:var(--text-inverse);border:none;padding:8px 16px;border-radius:20px;font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.enroll-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.create-btn{background:linear-gradient(135deg,#ff6b6b,#ee5a52)!important;color:#fff!important;border:none;padding:8px 16px;border-radius:20px;font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.create-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #ff6b6b66;background:linear-gradient(135deg,#ff5252,#d32f2f)!important}.cards-indicator{display:flex;justify-content:center;margin-top:var(--spacing-xl)}.indicator-dots{display:flex;gap:var(--spacing-sm)}.indicator-dot{width:12px;height:12px;border-radius:50%;background:var(--border-color);cursor:pointer;transition:all var(--transition-normal)}.indicator-dot:hover{background:var(--brand-sub);transform:scale(1.2)}.indicator-dot.active{background:var(--brand-main);transform:scale(1.3)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl);text-align:center}.loading-spinner{animation:spin 1s linear infinite;margin-bottom:var(--spacing-md)}.loading-spinner svg{color:var(--brand-main)}.loading-state p{color:var(--text-secondary);font-size:var(--font-size-lg);font-weight:500}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl);text-align:center}.error-icon{font-size:48px;margin-bottom:var(--spacing-md)}.error-state p{color:var(--text-secondary);font-size:var(--font-size-lg);font-weight:500;margin-bottom:var(--spacing-lg)}.retry-btn{background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:var(--text-inverse);border:none;padding:12px 24px;border-radius:8px;font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.retry-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00000026}@media (max-width: 768px){.draggable-cards-section{padding:var(--spacing-xl) 0}.section-title{font-size:var(--font-size-3xl)}.section-subtitle{font-size:var(--font-size-base)}.cards-container-wrapper{gap:var(--spacing-sm)}.nav-button{width:40px;height:40px}.prev-button{left:-20px}.next-button{right:-20px}.cards-container{padding:0 var(--spacing-sm)}.draggable-card{flex:0 0 280px}.card-content{padding:var(--spacing-md)}.card-title{font-size:var(--font-size-lg)}.indicator-dots{gap:var(--spacing-sm)}.indicator-dot{width:10px;height:10px}}.team-layout{display:flex;max-width:1400px;margin:0 auto;gap:var(--spacing-xl);min-height:600px}.team-detail-panel{flex:2;background:var(--bg-primary);border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-card);display:flex;align-items:center;transition:background-color var(--transition-normal),box-shadow var(--transition-normal);border:1px solid var(--border-color)}.team-member-detail{display:flex;gap:var(--spacing-xl);width:100%}.member-photo-container{position:relative;flex-shrink:0}.member-photo{width:300px;height:400px;object-fit:cover;border-radius:var(--radius-xl);box-shadow:var(--shadow-md);position:relative;z-index:2}.photo-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#227a531a,#227a530d);border-radius:var(--radius-xl);z-index:1}.member-info{flex:1;display:flex;flex-direction:column;gap:var(--spacing-md)}.member-badge{display:inline-block;background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:var(--text-inverse);font-size:var(--font-size-sm);font-weight:600;padding:6px 12px;border-radius:16px;align-self:flex-start;text-transform:uppercase;letter-spacing:.5px}.member-name{font-size:var(--font-size-3xl);font-weight:700;color:var(--brand-main);margin:0;transition:color var(--transition-normal)}.member-quote{font-size:var(--font-size-xl);color:var(--brand-main);font-style:italic;margin:0;padding:var(--spacing-md);background:var(--bg-tertiary);border-radius:var(--radius-md);border-left:4px solid var(--brand-main);transition:background-color var(--transition-normal),color var(--transition-normal)}.member-description{font-size:var(--font-size-base);line-height:1.7;color:#2d3748;margin:0;transition:color var(--transition-normal);font-weight:500}.dark-mode .member-description{color:#e2e8f0}.member-social{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.social-btn{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);padding:8px 16px;border-radius:20px;font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.social-btn:hover{background:var(--brand-main);color:var(--text-inverse);border-color:var(--brand-main)}.team-overview{text-align:center;width:100%}.overview-badge{display:inline-block;background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:var(--text-inverse);font-size:var(--font-size-sm);font-weight:600;padding:8px 16px;border-radius:20px;margin-bottom:var(--spacing-md);text-transform:uppercase;letter-spacing:.5px}.team-title{font-size:var(--font-size-4xl);font-weight:700;color:var(--brand-main);margin-bottom:var(--spacing-lg);transition:color var(--transition-normal)}.team-description{font-size:var(--font-size-base);line-height:1.7;color:#2d3748;margin-bottom:var(--spacing-xl);max-width:600px;margin-left:auto;margin-right:auto;transition:color var(--transition-normal);font-weight:500}.dark-mode .team-description{color:#e2e8f0}.team-stats{display:flex;justify-content:center;gap:60px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.stat-number{font-size:var(--font-size-4xl);font-weight:700;color:var(--brand-main);transition:color var(--transition-normal)}.stat-label{font-size:var(--font-size-base);color:#4a5568;transition:color var(--transition-normal);font-weight:600}.dark-mode .stat-label{color:#cbd5e0}.team-cards-panel{flex:1;display:flex;align-items:center}.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);width:100%}.member-card{background:var(--bg-primary);border:2px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-md);text-align:center;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);position:relative;overflow:hidden;transition:all var(--transition-normal),border-color var(--transition-normal),background-color var(--transition-normal)}.member-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(34,122,83,.1),transparent);transition:left .6s ease}.member-card:hover:before{left:100%}.member-card:hover{border-color:var(--brand-main);transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg)}.member-card.active{border-color:var(--brand-main);background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:var(--text-inverse);transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg);animation:pulse 2s infinite}@keyframes pulse{0%,to{box-shadow:var(--shadow-lg)}50%{box-shadow:0 16px 40px #227a5380}}.card-icon{font-size:var(--font-size-3xl);color:var(--brand-main);margin-bottom:var(--spacing-sm);transition:color var(--transition-normal)}.member-card.active .card-icon{color:var(--text-inverse)}.card-name{font-size:var(--font-size-base);font-weight:600;margin:0;transition:color var(--transition-normal)}.card-role{font-size:var(--font-size-sm);margin:0;color:#4a5568;font-weight:500;transition:color var(--transition-normal)}.dark-mode .card-role{color:#cbd5e0}.member-card.active .card-role{color:#ffffffe6}.image-wrapper{display:flex;justify-content:center;align-items:center;height:50vh}.backImage{max-width:100%;height:auto;margin-top:445px}.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:var(--spacing-2xl) var(--spacing-lg);margin:0;position:relative;overflow:hidden}-background{position:absolute;inset:0;z-index:0}.gradient-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#227a531a,#227a530d,#227a5314)}.floating-shapes{position:absolute;inset:0;overflow:hidden}.shape{position:absolute;border-radius:50%;background:linear-gradient(135deg,#227a531a,#227a530d);animation:float 6s ease-in-out infinite}.shape-1{width:100px;height:100px;top:20%;left:10%;animation-delay:0s}.shape-2{width:150px;height:150px;top:60%;right:15%;animation-delay:2s}.shape-3{width:80px;height:80px;bottom:20%;left:20%;animation-delay:4s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}.hero-title{font-size:4.5rem;font-weight:800;margin-bottom:var(--spacing-lg);color:var(--brand-main);text-shadow:0 4px 8px rgba(0,0,0,.15);transition:color var(--transition-normal);letter-spacing:-.03em;line-height:1.1;text-align:center;position:relative;z-index:2;cursor:default;-webkit-user-select:none;user-select:none}.title-line{display:block;cursor:default;-webkit-user-select:none;user-select:none;pointer-events:none}.title-line.highlight{background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline;cursor:default;-webkit-user-select:none;user-select:none}.hero-subtitle{font-size:var(--font-size-xl);color:#2d3748;text-align:center;margin-bottom:var(--spacing-xl);max-width:600px;line-height:1.6;position:relative;z-index:2;font-weight:500;text-shadow:0 1px 2px rgba(255,255,255,.8)}.dark-mode .hero-subtitle{color:#e2e8f0;text-shadow:0 1px 2px rgba(0,0,0,.3)}.hero-actions{display:flex;gap:var(--spacing-md);position:relative;z-index:2}.hero-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-lg) var(--spacing-2xl);font-size:var(--font-size-lg);font-weight:600;border-radius:50px;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;letter-spacing:.5px;border:none;text-decoration:none}.primary-btn{background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:var(--text-inverse);box-shadow:0 8px 25px #227a534d}.primary-btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px #227a5366}.secondary-btn{background:transparent;color:var(--brand-main);border:2px solid var(--brand-main)}.secondary-btn:hover{background:var(--brand-main);color:var(--text-inverse);transform:translateY(-3px);box-shadow:0 8px 25px #227a534d}.btn-icon{font-size:var(--font-size-lg);transition:transform var(--transition-normal)}.primary-btn:hover .btn-icon{transform:translate(4px)}.main-section{padding:var(--spacing-xl) 0 0 0;margin:0 auto var(--spacing-xl) auto}.layout-container{display:flex;max-width:1400px;margin:0 auto;min-height:600px;background:var(--bg-primary);border-radius:24px;box-shadow:0 20px 60px #0000001a;overflow:hidden;position:relative;border:1px solid var(--border-color)}.dark-mode .layout-container{background:var(--bg-card);box-shadow:0 20px 60px #0000004d;border-color:var(--border-color)}.text-badge{display:inline-block;background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:var(--text-inverse);font-size:var(--font-size-sm);font-weight:600;padding:6px 12px;border-radius:16px;margin-bottom:var(--spacing-md);text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 15px #227a5333}.dark-mode .text-badge{box-shadow:0 4px 15px #4ade804d}.main-text{flex:1.2}.main-heading{font-size:var(--font-size-3xl);font-weight:700;margin-bottom:var(--spacing-sm);color:#1a202c;transition:color var(--transition-normal)}.dark-mode .main-heading{color:#f7fafc}.main-subheading{font-size:var(--font-size-base);color:#4a5568;margin-bottom:var(--spacing-md);transition:color var(--transition-normal);font-weight:500}.dark-mode .main-subheading{color:#a0aec0}.main-body{font-size:var(--font-size-base);color:#2d3748;line-height:1.7;margin-bottom:var(--spacing-lg);transition:color var(--transition-normal);font-weight:500}.dark-mode .main-body{color:#e2e8f0}.learn-more-btn{display:inline-flex;align-items:center;gap:var(--spacing-sm);background:transparent;color:var(--brand-main);border:2px solid var(--brand-main);padding:var(--spacing-md) var(--spacing-lg);border-radius:25px;font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-normal);box-shadow:0 4px 15px #227a531a}.learn-more-btn:hover{background:var(--brand-main);color:var(--text-inverse);transform:translateY(-2px);box-shadow:0 8px 25px #227a534d}.dark-mode .learn-more-btn{box-shadow:0 4px 15px #4ade8033}.dark-mode .learn-more-btn:hover{box-shadow:0 8px 25px #4ade8066}.arrow{transition:transform var(--transition-normal)}.learn-more-btn:hover .arrow{transform:translate(4px)}.image-container{flex:1;position:relative;max-width:500px;border-radius:20px}.main-image{width:100%;border-radius:20px;transition:transform var(--transition-normal)}.image-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#227a530d,#227a5305);border-radius:20px;pointer-events:none;transition:background var(--transition-normal)}.dark-mode .image-overlay{background:linear-gradient(135deg,#4ade8014,#4ade8008)}.main-image:hover{transform:scale(1.02)}.main-text{flex:1;padding:0 var(--spacing-lg);max-width:400px}.left-panel{width:280px;background:linear-gradient(180deg,#92e1af,#4dc45b,#34c266);padding:var(--spacing-2xl) var(--spacing-lg);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;position:relative;overflow:hidden;box-shadow:0 20px 40px #22c55e66,inset 0 1px #fff3}.left-panel:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none}.left-panel:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.6) 50%,transparent 100%)}.nav-buttons{display:flex;flex-direction:column;gap:var(--spacing-md);position:relative;z-index:2;width:100%;margin-top:var(--spacing-xl)}.nav-btn{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-base);font-weight:600;color:var(--text-inverse);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:left;position:relative;overflow:hidden;display:flex;align-items:center;gap:var(--spacing-md);box-shadow:0 4px 15px #0000001a;width:100%}.nav-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s ease}.nav-btn:hover:before{left:100%}.nav-icon{font-size:var(--font-size-lg);flex-shrink:0;transition:all .3s ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.nav-text{flex:1;font-weight:500;letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.3)}.nav-btn:hover{background:#fff3;border-color:#fff6;transform:translateY(-2px);box-shadow:0 8px 25px #0003,0 0 0 1px #ffffff1a}.nav-btn:hover .nav-icon{transform:scale(1.2) rotate(8deg);filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}.nav-btn.active{background:#ffffff40;border-color:#fff9;box-shadow:0 8px 25px #00000040,0 0 0 2px #ffffff4d,inset 0 1px #fff3;transform:translateY(-2px)}.nav-btn.active:after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:5px;height:70%;background:linear-gradient(180deg,#fff,#ffffffb3);border-radius:3px 0 0 3px;box-shadow:0 0 15px #fff9}.content-area{flex:1;background:var(--bg-secondary);padding:var(--spacing-2xl);display:flex;align-items:center;transition:background-color var(--transition-normal);position:relative}.dark-mode .content-area{background:var(--bg-tertiary)}.content-wrapper{display:flex;align-items:center;gap:var(--spacing-2xl);width:100%;max-width:900px;margin:0 auto}.slide-fade-enter-active{transition:all .6s ease-out}.slide-fade-leave-active{transition:all .4s ease-in}.slide-fade-enter-from{opacity:0;transform:translate(30px)}.slide-fade-leave-to{opacity:0;transform:translate(-30px)}.animate-photo{animation:slideInFromLeft .8s ease-out .2s both}.animate-text{animation:slideInFromRight .8s ease-out both}.animate-text:nth-child(1){animation-delay:.3s}.animate-text:nth-child(2){animation-delay:.4s}.animate-text:nth-child(3){animation-delay:.5s}.animate-text:nth-child(4){animation-delay:.6s}.team-overview .team-title{animation:fadeInUp .8s ease-out .2s both}.team-overview .team-subtitle{animation:fadeInUp .8s ease-out .3s both}.team-overview .team-description{animation:fadeInUp .8s ease-out .4s both}.team-overview .team-stats{animation:fadeInUp .8s ease-out .5s both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.carousel-item{width:100%}.carousel-item .main-image{animation:slideInFromLeft .8s ease-out .3s both}.carousel-item .main-text{animation:slideInFromRight .8s ease-out .5s both}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-40px)}to{opacity:1;transform:translate(0)}}@keyframes slideInFromRight{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@media (max-width: 768px){.hero{min-height:80vh;padding:var(--spacing-xl) var(--spacing-md)}.hero-title{font-size:3rem;margin-bottom:var(--spacing-lg)}.hero-subtitle{font-size:var(--font-size-lg)}.hero-actions{flex-direction:column;gap:var(--spacing-sm)}.hero-btn{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-base)}.nav-container{padding:0 var(--spacing-md)}.brand-text{font-size:var(--font-size-xl)}.nav-menu{gap:var(--spacing-md)}.welcome-text{display:none}.nav-btn{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.layout-container{flex-direction:column;min-height:auto}.left-panel{width:100%;border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--spacing-md)}.nav-buttons{flex-direction:row;justify-content:center;gap:var(--spacing-sm)}.nav-btn{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm);text-align:center}.content-area{border-radius:0 0 var(--radius-xl) var(--radius-xl);padding:var(--spacing-md)}.content-wrapper{flex-direction:column;gap:var(--spacing-md)}.main-image{max-width:100%}.main-text{padding:0}.team-layout{flex-direction:column;gap:var(--spacing-md)}.team-detail-panel{padding:var(--spacing-md)}.team-member-detail{flex-direction:column;text-align:center}.member-photo{width:200px;height:250px;margin:0 auto}.card-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}.member-card{padding:var(--spacing-md)}.card-icon{font-size:var(--font-size-2xl)}.card-name{font-size:var(--font-size-sm)}.card-role{font-size:var(--font-size-xs)}}.intro-text{text-align:center;margin-bottom:var(--spacing-xl);z-index:2;position:relative}.intro-btn{display:block;margin:0 auto}.footer{width:100%;background:var(--bg-tertiary);padding:var(--spacing-lg) 0 var(--spacing-md) 0;text-align:center;font-size:var(--font-size-sm);color:#4a5568;margin-top:0;transition:background-color var(--transition-normal),color var(--transition-normal);font-weight:500}.dark-mode .footer{color:#cbd5e0}.footer-content{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--spacing-sm)}.footer-title{font-weight:700;color:var(--brand-main);transition:color var(--transition-normal)}.footer-divider{color:#718096;transition:color var(--transition-normal);font-weight:500}.dark-mode .footer-divider{color:#a0aec0}@media (max-width: 600px){.footer-content{flex-direction:column;gap:var(--spacing-xs)}}.card-actions{display:flex;align-items:center;gap:8px}.delete-btn{background:none;border:none;color:#ef4444;font-size:18px;cursor:pointer;padding:8px;border-radius:6px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:36px;height:36px}.delete-btn:hover{background-color:#fef2f2;color:#dc2626;transform:scale(1.1)}.delete-btn:active{transform:scale(.95)}.dark-mode .delete-btn{color:#f87171}.dark-mode .delete-btn:hover{background-color:#7f1d1d;color:#fca5a5}.modal-overlay[data-v-99a2130f]{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal-content[data-v-99a2130f]{background:var(--bg-primary);border-radius:20px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;border:1px solid var(--border-color);animation:modalSlideIn-99a2130f .3s ease-out}@keyframes modalSlideIn-99a2130f{0%{opacity:0;transform:translateY(-50px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header[data-v-99a2130f]{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 16px;border-bottom:1px solid var(--border-color)}.modal-badge[data-v-99a2130f]{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:var(--text-inverse);padding:8px 16px;border-radius:20px;font-size:var(--font-size-sm);font-weight:600}.modal-icon[data-v-99a2130f]{font-size:var(--font-size-lg)}.close-btn[data-v-99a2130f]{background:none;border:none;font-size:24px;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-btn[data-v-99a2130f]:hover{background:var(--bg-tertiary);color:var(--text-primary)}.modal-body[data-v-99a2130f]{padding:24px}.modal-title[data-v-99a2130f]{font-size:var(--font-size-2xl);font-weight:700;color:var(--brand-main);margin:0 0 16px;line-height:1.3}.modal-description[data-v-99a2130f]{font-size:var(--font-size-base);color:var(--text-secondary);line-height:1.6;margin:0 0 32px}.feature-details[data-v-99a2130f]{display:flex;flex-direction:column;gap:20px}.detail-item[data-v-99a2130f]{display:flex;gap:16px;padding:16px;background:var(--bg-tertiary);border-radius:12px;border:1px solid var(--border-color);transition:all .2s ease}.detail-item[data-v-99a2130f]:hover{background:var(--bg-secondary);border-color:var(--brand-main);transform:translateY(-2px);box-shadow:0 4px 12px #227a531a}.detail-icon[data-v-99a2130f]{font-size:24px;flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--brand-main);color:var(--text-inverse);border-radius:10px}.detail-content[data-v-99a2130f]{flex:1}.detail-title[data-v-99a2130f]{font-size:var(--font-size-base);font-weight:600;color:var(--text-primary);margin:0 0 4px}.detail-text[data-v-99a2130f]{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.5;margin:0}.modal-footer[data-v-99a2130f]{padding:16px 24px 24px;border-top:1px solid var(--border-color);display:flex;justify-content:center}.try-btn[data-v-99a2130f]{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:var(--text-inverse);border:none;padding:12px 24px;border-radius:25px;font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #227a534d}.try-btn[data-v-99a2130f]:hover{transform:translateY(-2px);box-shadow:0 8px 25px #227a5366}.arrow[data-v-99a2130f]{transition:transform .2s ease}.try-btn:hover .arrow[data-v-99a2130f]{transform:translate(4px)}@media (max-width: 768px){.modal-content[data-v-99a2130f]{width:95%;max-height:90vh}.modal-header[data-v-99a2130f]{padding:20px 20px 12px}.modal-body[data-v-99a2130f]{padding:20px}.modal-footer[data-v-99a2130f]{padding:12px 20px 20px}.modal-title[data-v-99a2130f]{font-size:var(--font-size-xl)}.detail-item[data-v-99a2130f]{padding:12px}.detail-icon[data-v-99a2130f]{width:36px;height:36px;font-size:20px}}.modal-overlay[data-v-ca7f22b9]{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content[data-v-ca7f22b9]{background:var(--bg-primary);border-radius:16px;padding:0;width:90%;max-width:500px;box-shadow:0 20px 60px #0000004d;animation:modalSlideIn-ca7f22b9 .3s ease-out}@keyframes modalSlideIn-ca7f22b9{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header[data-v-ca7f22b9]{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid var(--border-color)}.modal-title[data-v-ca7f22b9]{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0}.close-btn[data-v-ca7f22b9]{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:8px;transition:all .2s ease}.close-btn[data-v-ca7f22b9]:hover{background:var(--bg-tertiary);color:var(--text-primary)}.modal-body[data-v-ca7f22b9]{padding:1.5rem}.class-info[data-v-ca7f22b9]{margin-bottom:1.5rem;padding:1rem;background:var(--bg-secondary);border-radius:8px;border-left:4px solid var(--brand-main)}.class-title[data-v-ca7f22b9]{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin:0 0 .5rem}.class-description[data-v-ca7f22b9]{font-size:.9rem;color:var(--text-secondary);margin:0}.form-group[data-v-ca7f22b9]{margin-bottom:1.5rem}.form-group[data-v-ca7f22b9]:last-child{margin-bottom:0}.form-group label[data-v-ca7f22b9]{display:block;font-size:.9rem;font-weight:500;color:var(--text-primary);margin-bottom:.5rem}.form-input[data-v-ca7f22b9]{width:100%;padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;background:var(--bg-secondary);color:var(--text-primary);transition:all .2s ease}.form-input[data-v-ca7f22b9]:focus{outline:none;border-color:var(--brand-main);box-shadow:0 0 0 3px #227a531a}.form-input[data-v-ca7f22b9]::placeholder{color:var(--text-tertiary)}.modal-footer[data-v-ca7f22b9]{display:flex;gap:1rem;padding:1rem 1.5rem 1.5rem;border-top:1px solid var(--border-color)}.cancel-btn[data-v-ca7f22b9]{flex:1;padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease}.cancel-btn[data-v-ca7f22b9]:hover{background:var(--bg-tertiary);border-color:var(--text-secondary)}.join-btn[data-v-ca7f22b9]{flex:1;padding:.75rem 1rem;border:none;border-radius:8px;background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.join-btn[data-v-ca7f22b9]:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 15px #227a534d}.join-btn[data-v-ca7f22b9]:disabled{opacity:.5;cursor:not-allowed;transform:none}.dark-mode .modal-content[data-v-ca7f22b9]{background:var(--bg-primary);border:1px solid var(--border-color)}.dark-mode .form-input[data-v-ca7f22b9],.dark-mode .cancel-btn[data-v-ca7f22b9]{background:var(--bg-secondary);color:var(--text-primary)}@media (max-width: 768px){.modal-content[data-v-ca7f22b9]{width:95%;margin:1rem}.modal-footer[data-v-ca7f22b9]{flex-direction:column}.cancel-btn[data-v-ca7f22b9],.join-btn[data-v-ca7f22b9]{flex:none}}.modal-overlay[data-v-c3ae3aa7]{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content[data-v-c3ae3aa7]{background:var(--bg-primary);border-radius:16px;padding:0;width:90%;max-width:500px;box-shadow:0 20px 60px #0000004d;animation:modalSlideIn-c3ae3aa7 .3s ease-out}@keyframes modalSlideIn-c3ae3aa7{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header[data-v-c3ae3aa7]{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid var(--border-color)}.modal-title[data-v-c3ae3aa7]{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0}.close-btn[data-v-c3ae3aa7]{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:8px;transition:all .2s ease}.close-btn[data-v-c3ae3aa7]:hover{background:var(--bg-tertiary);color:var(--text-primary)}.modal-body[data-v-c3ae3aa7]{padding:1.5rem}.form-group[data-v-c3ae3aa7]{margin-bottom:1.5rem}.form-group[data-v-c3ae3aa7]:last-child{margin-bottom:0}.form-group label[data-v-c3ae3aa7]{display:block;font-size:.9rem;font-weight:500;color:var(--text-primary);margin-bottom:.5rem}.form-input[data-v-c3ae3aa7]{width:100%;padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;background:var(--bg-secondary);color:var(--text-primary);transition:all .2s ease}.form-input[data-v-c3ae3aa7]:focus{outline:none;border-color:var(--brand-main);box-shadow:0 0 0 3px #227a531a}.form-input.error[data-v-c3ae3aa7]{border-color:#f56565;box-shadow:0 0 0 3px #f565651a}.form-textarea[data-v-c3ae3aa7]{width:100%;padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;background:var(--bg-secondary);color:var(--text-primary);transition:all .2s ease;resize:vertical;min-height:80px;font-family:inherit}.form-textarea[data-v-c3ae3aa7]:focus{outline:none;border-color:var(--brand-main);box-shadow:0 0 0 3px #227a531a}.form-input[data-v-c3ae3aa7]::placeholder,.form-textarea[data-v-c3ae3aa7]::placeholder{color:var(--text-tertiary)}.error-message[data-v-c3ae3aa7]{display:block;color:#f56565;font-size:.8rem;margin-top:.25rem}.modal-footer[data-v-c3ae3aa7]{display:flex;gap:1rem;padding:1rem 1.5rem 1.5rem;border-top:1px solid var(--border-color)}.cancel-btn[data-v-c3ae3aa7]{flex:1;padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease}.cancel-btn[data-v-c3ae3aa7]:hover{background:var(--bg-tertiary);border-color:var(--text-secondary)}.create-btn[data-v-c3ae3aa7]{flex:1;padding:.75rem 1rem;border:none;border-radius:8px;background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.create-btn[data-v-c3ae3aa7]:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 15px #227a534d}.create-btn[data-v-c3ae3aa7]:disabled{opacity:.5;cursor:not-allowed;transform:none}.loading-spinner[data-v-c3ae3aa7]{animation:spin-c3ae3aa7 1s linear infinite}@keyframes spin-c3ae3aa7{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dark-mode .modal-content[data-v-c3ae3aa7]{background:var(--bg-primary);border:1px solid var(--border-color)}.dark-mode .form-input[data-v-c3ae3aa7],.dark-mode .form-textarea[data-v-c3ae3aa7],.dark-mode .cancel-btn[data-v-c3ae3aa7]{background:var(--bg-secondary);color:var(--text-primary)}@media (max-width: 768px){.modal-content[data-v-c3ae3aa7]{width:95%;margin:1rem}.modal-footer[data-v-c3ae3aa7]{flex-direction:column}.cancel-btn[data-v-c3ae3aa7],.create-btn[data-v-c3ae3aa7]{flex:none}}.login-view{min-height:100vh;display:flex;background:var(--bg-primary);transition:background var(--transition-normal)}.brand-section:before{content:"";position:absolute;inset:0;background:url(/assets/mainim19-BT10hCkK.png) center/cover no-repeat;opacity:.1;z-index:0}.login-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.login-btn{background:var(--brand-main);color:#fff;border:none;padding:var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-normal);margin-top:var(--spacing-md)}.login-btn:hover:not(:disabled){background:var(--brand-sub);transform:translateY(-2px);box-shadow:var(--shadow-md)}.login-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.forgot-password{text-align:center;margin-top:var(--spacing-md)}.forgot-link{color:#4a5568;text-decoration:none;font-size:var(--font-size-sm);transition:color var(--transition-normal);font-weight:500}.dark-mode .forgot-link{color:#cbd5e0}.forgot-link:hover{color:var(--brand-main)}.signup-link{text-align:center;margin-top:var(--spacing-lg);color:#4a5568;font-size:var(--font-size-sm);font-weight:500}.dark-mode .signup-link{color:#cbd5e0}.signup-link a{color:var(--brand-main);text-decoration:none;font-weight:500;transition:color var(--transition-normal)}.signup-link a:hover{color:var(--brand-sub)}@media (max-width: 768px){.login-view{flex-direction:column}.brand-section{padding:var(--spacing-xl) var(--spacing-md);min-height:40vh}.brand-title{font-size:2.5rem}.brand-footer{gap:var(--spacing-md)}.form-section{padding:var(--spacing-xl) var(--spacing-md)}.role-buttons{flex-wrap:wrap}.role-btn{min-width:80px;padding:var(--spacing-sm)}}@media (max-width: 480px){.brand-title{font-size:2rem}.form-title{font-size:var(--font-size-2xl)}.role-buttons{flex-direction:column;align-items:center}.role-btn{width:100%;max-width:200px}}.social-login-section{margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--border-color)}.social-login-label{font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary);margin-bottom:var(--spacing-md);text-align:center}.dark-mode .social-login-label{color:var(--text-secondary-dark)}.social-login-buttons{display:flex;justify-content:center;gap:var(--spacing-md)}.kakao-login-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;transition:all var(--transition-normal);padding:var(--spacing-sm);width:90%;height:auto}.kakao-login-btn:hover:not(:disabled){transform:scale(1.02)}.kakao-login-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.kakao-icon{width:100%;height:auto;border-radius:var(--radius-md)}.kakao-text{display:none}.kakao-login-btn[data-v-144049e7]{width:100%;background:#fee500;color:#3c1e1e;border:none;padding:12px;border-radius:8px;font-weight:700;cursor:pointer;transition:all .2s ease;margin-top:10px}.kakao-login-btn[data-v-144049e7]:hover{background:#ffd900;transform:translateY(-1px)}.kakao-login-btn[data-v-144049e7]:disabled{opacity:.6;cursor:not-allowed;transform:none}.kakao-btn-content[data-v-144049e7]{display:flex;align-items:center;justify-content:center;font-size:14px}.social-login-section[data-v-144049e7]{margin-top:20px;text-align:center}.social-login-label[data-v-144049e7]{margin-bottom:10px;color:#666;font-size:14px}.signup-view{min-height:100vh;display:flex;background:var(--bg-primary);transition:background var(--transition-normal)}.brand-section{flex:1;background:linear-gradient(135deg,#227a53e6,#227a53cc);position:relative;display:flex;align-items:center;justify-content:center;padding:var(--spacing-2xl);overflow:hidden}.brand-section:before{content:"";position:absolute;inset:0;background:url(/assets/mainim29-D-jaG1g3.png) center/cover no-repeat;opacity:.1;z-index:0}.brand-content{position:relative;z-index:1;color:#fff;text-align:center;max-width:500px;width:100%}.brand-header{margin-bottom:var(--spacing-2xl)}.brand-logo{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.logo-icon{font-size:2rem}.brand-name{font-size:var(--font-size-2xl);font-weight:700;margin:0}.brand-slogan{font-size:var(--font-size-sm);opacity:.9;margin:0}.brand-main{margin-bottom:var(--spacing-2xl)}.brand-title{font-size:3.5rem;font-weight:800;margin-bottom:var(--spacing-lg);line-height:1.1}.brand-description{font-size:var(--font-size-base);line-height:1.6;opacity:.9;margin:0}.brand-footer{display:flex;justify-content:center;gap:var(--spacing-xl);opacity:.7}.region{font-size:var(--font-size-sm);font-weight:500}.form-section{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--spacing-2xl);background:var(--bg-primary)}.form-container{max-width:450px;width:100%}.form-title{font-size:var(--font-size-3xl);font-weight:700;color:var(--brand-main);margin-bottom:var(--spacing-lg);text-align:center;position:relative}.form-title:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:60px;height:3px;background:var(--brand-main);border-radius:2px}.role-selection{margin-bottom:var(--spacing-xl)}.role-label{font-size:var(--font-size-sm);color:#4a5568;margin-bottom:var(--spacing-md);text-align:center;font-weight:600}.dark-mode .role-label{color:#cbd5e0}.role-buttons{display:flex;gap:var(--spacing-sm);justify-content:center}.role-btn{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md);border:2px solid var(--border-color);border-radius:var(--radius-md);background:transparent;cursor:pointer;transition:all var(--transition-normal);min-width:100px}.role-btn:hover{border-color:var(--brand-main);transform:translateY(-2px)}.role-btn.active{border-color:var(--brand-main);background:var(--brand-main);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}.role-icon{font-size:var(--font-size-xl)}.role-text{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase}.signup-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}label{font-weight:600;color:#4a5568;font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.5px}.dark-mode label{color:#cbd5e0}.input-wrapper{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:var(--spacing-md);font-size:var(--font-size-base);color:#718096;z-index:1}.dark-mode .input-icon{color:#a0aec0}input{width:100%;padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) * 2 + 20px);border:2px solid var(--border-color);border-radius:var(--radius-md);font-size:var(--font-size-base);transition:all var(--transition-normal);background:var(--bg-primary);color:var(--text-primary)}input:focus{outline:none;border-color:var(--brand-main);box-shadow:0 0 0 3px #227a531a}input.error{border-color:#e74c3c}.error-message{color:#e74c3c;font-size:var(--font-size-xs);margin-top:var(--spacing-xs)}.signup-btn{background:var(--brand-main);color:#fff;border:none;padding:var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-normal);margin-top:var(--spacing-md)}.signup-btn:hover:not(:disabled){background:var(--brand-sub);transform:translateY(-2px);box-shadow:var(--shadow-md)}.signup-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.login-link{text-align:center;margin-top:var(--spacing-lg);color:#4a5568;font-size:var(--font-size-sm);font-weight:500}.dark-mode .login-link{color:#cbd5e0}.login-link a{color:var(--brand-main);text-decoration:none;font-weight:500;transition:color var(--transition-normal)}.login-link a:hover{color:var(--brand-sub)}.message{margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);text-align:center;font-weight:500;font-size:var(--font-size-sm)}.message.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.message.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.email-verification-section{margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border-color)}.verification-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.verification-label{font-size:var(--font-size-sm);font-weight:600;color:#4a5568;margin:0}.dark-mode .verification-label{color:#cbd5e0}.send-verification-btn{background:var(--brand-main);color:#fff;border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.send-verification-btn:hover:not(:disabled){background:var(--brand-sub);transform:translateY(-1px)}.send-verification-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.verification-content{margin-top:var(--spacing-md)}.verification-description{font-size:var(--font-size-sm);color:#4a5568;margin-bottom:var(--spacing-md);line-height:1.5;font-weight:500}.dark-mode .verification-description{color:#cbd5e0}.code-input-section{margin-bottom:var(--spacing-md)}.code-input-section label{display:block;font-weight:600;color:#4a5568;font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-sm)}.dark-mode .code-input-section label{color:#cbd5e0}.code-input-wrapper{display:flex;gap:var(--spacing-sm);justify-content:center;margin-bottom:var(--spacing-sm)}.code-input{width:40px;height:45px;text-align:center;font-size:var(--font-size-base);font-weight:700;padding:var(--spacing-sm);border:2px solid var(--border-color);border-radius:var(--radius-md);transition:all var(--transition-normal);background:var(--bg-primary);color:var(--text-primary)}.code-input:focus{outline:none;border-color:var(--brand-main);box-shadow:0 0 0 3px #227a531a}.code-input.error{border-color:#e74c3c}.timer-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);padding:var(--spacing-sm);background:var(--bg-primary);border-radius:var(--radius-md);border:1px solid var(--border-color)}.timer-text{font-size:var(--font-size-xs);color:#4a5568;margin:0;font-weight:500}.dark-mode .timer-text{color:#cbd5e0}.timer-countdown{font-weight:700;color:var(--brand-main)}.resend-btn{background:transparent;color:var(--brand-main);border:1px solid var(--brand-main);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.resend-btn:hover:not(:disabled){background:var(--brand-main);color:#fff}.resend-btn:disabled{opacity:.5;cursor:not-allowed}.verify-btn{width:100%;background:var(--brand-main);color:#fff;border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.verify-btn:hover:not(:disabled){background:var(--brand-sub);transform:translateY(-1px)}.verify-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.email-verified{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-md);background:#d4edda;border:1px solid #c3e6cb;border-radius:var(--radius-md);color:#155724}.verified-icon{font-size:var(--font-size-lg)}.verified-text{font-size:var(--font-size-sm);font-weight:600;margin:0}@media (max-width: 768px){.signup-view{flex-direction:column}.brand-section{padding:var(--spacing-xl) var(--spacing-md);min-height:40vh}.brand-title{font-size:2.5rem}.brand-footer{gap:var(--spacing-md)}.form-section{padding:var(--spacing-xl) var(--spacing-md)}.role-buttons{flex-wrap:wrap}.role-btn{min-width:80px;padding:var(--spacing-sm)}}@media (max-width: 480px){.brand-title{font-size:2rem}.form-title{font-size:var(--font-size-2xl)}.role-buttons{flex-direction:column;align-items:center}.role-btn{width:100%;max-width:200px}.code-input-wrapper{gap:var(--spacing-xs)}.code-input{width:35px;height:40px;font-size:var(--font-size-sm)}.timer-section{flex-direction:column;gap:var(--spacing-sm)}.verification-header{flex-direction:column;gap:var(--spacing-sm);align-items:flex-start}}.resources-view{background:var(--bg-secondary);min-height:100vh;padding:32px 0 0}.tabs{display:flex;justify-content:center;gap:32px;margin-bottom:24px}.tabs button{background:none;border:none;font-size:22px;font-weight:500;color:var(--text-primary);padding:4px 16px;border-radius:8px;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.tabs button.active{background:var(--bg-tertiary);color:var(--brand-main)}.top-bar{display:flex;justify-content:center;align-items:center;gap:24px;margin-bottom:32px}.search-box{display:flex;align-items:center;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:0 12px;height:40px;min-width:320px}.search-box input{border:none;outline:none;background:transparent;font-size:16px;flex:1;padding:8px 0;color:var(--text-primary)}.search-btn{background:none;border:none;cursor:pointer;color:var(--brand-main);padding-left:8px;display:flex;align-items:center}.write-btn{background:var(--bg-primary);border:1.5px solid var(--brand-sub);color:var(--brand-main);font-size:16px;font-weight:500;border-radius:8px;padding:8px 18px;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.write-btn:hover{background:var(--bg-tertiary)}.post-list{display:flex;flex-direction:column;gap:32px;max-width:900px;margin:0 auto}.post-card{display:flex;align-items:flex-start;background:var(--bg-card);border-radius:16px;box-shadow:var(--shadow-card);padding:32px 32px 32px 24px;gap:32px;min-height:120px;border:1px solid var(--border-color)}.post-thumb{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border-radius:12px;flex-shrink:0}.img-placeholder{width:64px;height:64px;display:flex;align-items:center;justify-content:center}.post-content{flex:1;display:flex;flex-direction:column;gap:12px;align-items:flex-start}.post-title{font-size:20px;font-weight:700;color:var(--brand-main)}.post-body{color:var(--text-secondary);font-size:15px;margin-bottom:8px}.post-btn{background:var(--bg-primary);border:1.5px solid var(--brand-sub);color:var(--brand-main);font-size:14px;border-radius:6px;padding:4px 16px;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.post-btn:hover{background:var(--bg-tertiary)}@media (max-width: 700px){.post-card{flex-direction:column;align-items:stretch;gap:16px;padding:20px 10px}.post-thumb{margin:0 auto}}.search-view[data-v-02dca8b6]{max-width:700px;margin:60px auto;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000a;padding:40px 32px;text-align:center}.about-view{min-height:100vh;background:#f8fafc;color:#1e293b;transition:all .3s ease}.dark-mode .about-view{background:#0f172a;color:#f1f5f9}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.hero{background:#fff;color:#1a202c;padding:8rem 0;position:relative;overflow:hidden;transition:all .3s ease}.dark-mode .hero{background:#0f172a;color:#f1f5f9}.hero-container{max-width:1400px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;gap:6rem;position:relative;z-index:1}.hero-content{flex:1;max-width:600px}.hero-badge{display:inline-flex;align-items:center;background:#f1f5f9;color:#475569;padding:.5rem 1rem;border-radius:50px;font-size:.875rem;font-weight:600;margin-bottom:2rem;border:1px solid #e2e8f0;transition:all .3s ease}.dark-mode .hero-badge{background:#1e293b;color:#cbd5e0;border:1px solid #334155}.hero-title{font-size:clamp(3rem,6vw,4.5rem);font-weight:800;line-height:1.1;margin-bottom:1.5rem;color:#1a202c;transition:all .3s ease}.dark-mode .hero-title{color:#f1f5f9}.title-line{display:block}.title-line.highlight{color:#22c55e;background:linear-gradient(135deg,#22c55e,#16a34a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-description{font-size:1.25rem;line-height:1.7;margin-bottom:2.5rem;color:#4a5568;font-weight:500;transition:all .3s ease}.dark-mode .hero-description{color:#cbd5e0}.hero-actions{display:flex;gap:1rem;align-items:center}.btn{display:inline-flex;align-items:center;padding:1rem 2rem;border-radius:.75rem;text-decoration:none;font-weight:600;transition:all .3s ease;min-width:160px;justify-content:center;font-size:1rem}.btn-primary{background:#22c55e;color:#fff;box-shadow:0 4px 15px #22c55e4d}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 25px #22c55e66;background:#16a34a}.btn-secondary{background:transparent;color:#22c55e;border:2px solid transparent;font-weight:600;transition:all .3s ease}.btn-secondary:hover{color:#16a34a;transform:translateY(-2px)}.dark-mode .btn-secondary{color:#4ade80}.dark-mode .btn-secondary:hover{color:#22c55e}.hero-visual{flex:1;position:relative;height:500px;display:flex;align-items:center;justify-content:center}.hero-images{display:flex;gap:2rem;align-items:center;justify-content:center;width:100%;height:100%}.image-container{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem}.hero-image{width:280px;height:200px;border-radius:1rem;object-fit:cover;box-shadow:0 20px 40px #00000026;transition:all .3s ease;animation:float 6s ease-in-out infinite}.image-1{animation-delay:0s}.image-2{animation-delay:2s}.ui-bubble{background:#fff;border-radius:1rem;box-shadow:0 20px 40px #0000001a;border:1px solid #e2e8f0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:float 5s ease-in-out infinite;position:relative;z-index:2;transition:all .3s ease}.dark-mode .ui-bubble{background:#1e293b;border:1px solid #334155;box-shadow:0 20px 40px #0000004d}.bubble-1{width:240px;padding:1rem;animation-delay:1s}.bubble-2{width:200px;padding:.75rem;animation-delay:3s}.bubble-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.sparkle-icon{font-size:1rem;background:linear-gradient(135deg,#8b5cf6,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.bubble-title{font-size:.75rem;font-weight:600;color:#374151;transition:all .3s ease}.dark-mode .bubble-title{color:#e2e8f0}.bubble-input{display:flex;align-items:center;gap:.5rem;background:#f8fafc;padding:.5rem;border-radius:.5rem;border:1px solid #e2e8f0;transition:all .3s ease}.dark-mode .bubble-input{background:#334155;border:1px solid #475569}.input-text{flex:1;font-size:.75rem;color:#6b7280;transition:all .3s ease}.dark-mode .input-text{color:#9ca3af}.send-icon{color:#22c55e;font-weight:700;font-size:.875rem}.bubble-content{display:flex;align-items:center;gap:.5rem}.doc-icon{font-size:1rem;color:#6b7280;transition:all .3s ease}.dark-mode .doc-icon{color:#9ca3af}.bubble-text{font-size:.75rem;font-weight:600;color:#374151;transition:all .3s ease}.dark-mode .bubble-text{color:#e2e8f0}@keyframes float{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-15px) rotate(2deg)}66%{transform:translateY(-8px) rotate(-1deg)}}.section-header{text-align:center;margin-bottom:4rem}.section-header h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#1e293b;margin-bottom:1rem;transition:all .3s ease}.dark-mode .section-header h2{color:#f1f5f9}.section-header p{font-size:1.25rem;color:#64748b;max-width:600px;margin:0 auto;line-height:1.6;transition:all .3s ease}.dark-mode .section-header p{color:#cbd5e0}.features{padding:6rem 0;background:#fff;transition:all .3s ease}.dark-mode .features{background:#1e293b}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem}.feature-card{background:#fff;border-radius:1rem;padding:2rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border:1px solid #e2e8f0;transition:all .3s ease;position:relative;overflow:hidden}.dark-mode .feature-card{background:#334155;border:1px solid #475569;box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#22c55e,#16a34a);transform:scaleX(0);transition:transform .3s ease}.feature-card:hover:before{transform:scaleX(1)}.feature-card:hover{transform:translateY(-8px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.feature-icon{font-size:3rem;margin-bottom:1.5rem;display:block}.feature-card h3{font-size:1.5rem;font-weight:700;color:#1e293b;margin-bottom:1rem;transition:all .3s ease}.dark-mode .feature-card h3{color:#f1f5f9}.feature-card p{color:#64748b;line-height:1.6;margin-bottom:1.5rem;transition:all .3s ease}.dark-mode .feature-card p{color:#cbd5e0}.feature-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}.metric{text-align:center;padding:1rem;background:#f8fafc;border-radius:.5rem;border:1px solid #e2e8f0;transition:all .3s ease}.dark-mode .metric{background:#475569;border:1px solid #64748b}.metric-value{display:block;font-size:1.25rem;font-weight:700;color:#22c55e;margin-bottom:.25rem;transition:all .3s ease}.metric-label{font-size:.875rem;color:#64748b;transition:all .3s ease}.dark-mode .metric-label{color:#9ca3af}.how-it-works{padding:6rem 0;background:#f8fafc;transition:all .3s ease}.dark-mode .how-it-works{background:#0f172a}.steps{display:flex;flex-direction:column;gap:2rem;max-width:800px;margin:0 auto}.step{display:flex;align-items:center;gap:2rem;background:#fff;padding:2rem;border-radius:1rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border:1px solid #e2e8f0;transition:all .3s ease}.dark-mode .step{background:#334155;border:1px solid #475569;box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003}.step:hover{transform:translate(8px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.step-number{width:60px;height:60px;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;flex-shrink:0;box-shadow:0 10px 25px #22c55e4d}.step-content{flex:1}.step-content h3{font-size:1.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem;transition:all .3s ease}.dark-mode .step-content h3{color:#f1f5f9}.step-content p{color:#64748b;line-height:1.6;margin-bottom:1rem;transition:all .3s ease}.dark-mode .step-content p{color:#cbd5e0}.step-button{display:inline-flex;align-items:center;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;padding:.75rem 1.5rem;border-radius:.5rem;text-decoration:none;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #22c55e4d}.step-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #22c55e66}.technology{padding:6rem 0;background:#fff;transition:all .3s ease}.dark-mode .technology{background:#1e293b}.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.tech-category{background:#fff;border-radius:1rem;padding:2rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border:1px solid #e2e8f0;transition:all .3s ease}.dark-mode .tech-category{background:#334155;border:1px solid #475569;box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003}.tech-category:hover{transform:translateY(-8px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.tech-category h3{font-size:1.25rem;font-weight:700;color:#1e293b;margin-bottom:1.5rem;text-align:center;position:relative;transition:all .3s ease}.dark-mode .tech-category h3{color:#f1f5f9}.tech-category h3:after{content:"";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:40px;height:3px;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:2px}.tech-items{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.tech-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:#f8fafc;border-radius:.5rem;border:1px solid #e2e8f0;transition:all .3s ease;cursor:pointer}.dark-mode .tech-item{background:#475569;border:1px solid #64748b}.tech-item:hover{background:#f1f5f9;border-color:#22c55e;transform:translateY(-4px)}.dark-mode .tech-item:hover{background:#64748b;border-color:#22c55e}.tech-icon{font-size:2rem}.tech-name{font-size:.875rem;font-weight:600;color:#1e293b;text-align:center;transition:all .3s ease}.dark-mode .tech-name{color:#f1f5f9}.cta{padding:6rem 0;background:#f8fafc;color:#1e293b;text-align:center;transition:all .3s ease}.dark-mode .cta{background:#1a202c;color:#fff}.cta h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin-bottom:1rem}.cta p{font-size:1.25rem;margin-bottom:2rem;opacity:.9;max-width:600px;margin-left:auto;margin-right:auto}.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;padding:1rem 2rem;border-radius:.5rem;text-decoration:none;font-weight:600;transition:all .3s ease;min-width:160px;justify-content:center}.cta .btn-primary{background:#22c55e;color:#fff;box-shadow:0 4px 15px #22c55e4d}.cta .btn-primary:hover{transform:translateY(-3px);background:#16a34a;box-shadow:0 8px 25px #22c55e66}.cta .btn-secondary{background:transparent;color:#22c55e;border:2px solid #22c55e}.cta .btn-secondary:hover{background:#22c55e;color:#fff;transform:translateY(-3px);box-shadow:0 8px 25px #22c55e33}.dark-mode .cta .btn-primary{background:#4ade80;color:#1e293b;box-shadow:0 4px 15px #4ade804d}.dark-mode .cta .btn-primary:hover{background:#22c55e;color:#fff}.dark-mode .cta .btn-secondary{background:transparent;color:#4ade80;border:2px solid #4ade80}.dark-mode .cta .btn-secondary:hover{background:#4ade80;color:#1e293b}@media (max-width: 768px){.hero-container{flex-direction:column;text-align:center;gap:3rem}.hero-content{max-width:100%}.hero-visual{height:400px}.hero-images{flex-direction:column;gap:1.5rem}.image-container{flex-direction:row;gap:1rem}.hero-image{width:200px;height:140px}.bubble-1{width:200px;padding:.75rem}.bubble-2{width:160px;padding:.5rem}.features-grid{grid-template-columns:1fr}.step{flex-direction:column;text-align:center}.tech-grid{grid-template-columns:1fr}.tech-items{grid-template-columns:repeat(2,1fr)}.cta-buttons{flex-direction:column;align-items:center}.btn{width:100%;max-width:300px}}@media (max-width: 480px){.container{padding:0 1rem}.hero{padding:4rem 0}.hero-actions{flex-direction:column;align-items:center}.btn{width:100%;max-width:280px}.hero-visual{height:300px}.hero-images{flex-direction:column;gap:1rem}.image-container{flex-direction:row;gap:.75rem}.hero-image{width:150px;height:100px}.bubble-1{width:160px;padding:.5rem}.bubble-2{width:120px;padding:.5rem}.features,.how-it-works,.technology,.cta{padding:4rem 0}.feature-metrics,.tech-items{grid-template-columns:1fr}}.create-form-section[data-v-8dfd9f77]{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.form-card[data-v-8dfd9f77]{background:var(--bg-primary);border-radius:20px;padding:2rem;box-shadow:0 20px 60px #0000004d;border:1px solid var(--border-color);max-width:500px;width:90%;max-height:90vh;overflow-y:auto}.form-header[data-v-8dfd9f77]{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.form-title[data-v-8dfd9f77]{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:0}.close-btn[data-v-8dfd9f77]{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.close-btn[data-v-8dfd9f77]:hover{background:var(--bg-card);border-color:var(--border-dark);color:var(--text-primary)}.create-form[data-v-8dfd9f77]{display:flex;flex-direction:column;gap:1.5rem}.form-group[data-v-8dfd9f77]{position:relative}.form-label[data-v-8dfd9f77]{display:flex;align-items:center;gap:.5rem;font-weight:500;color:var(--text-primary);margin-bottom:.5rem}.form-input[data-v-8dfd9f77],.form-textarea[data-v-8dfd9f77]{width:100%;padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:12px;background:var(--bg-secondary);color:var(--text-primary);font-size:1rem;transition:all .3s ease}.form-input[data-v-8dfd9f77]:focus,.form-textarea[data-v-8dfd9f77]:focus{outline:none;border-color:var(--brand-main);box-shadow:0 0 0 3px #227a531a}.form-textarea[data-v-8dfd9f77]{resize:vertical;min-height:100px}.file-upload-area[data-v-8dfd9f77]{border:2px dashed var(--border-color);border-radius:12px;padding:2rem;text-align:center;transition:all .3s ease;background:var(--bg-secondary)}.file-upload-area[data-v-8dfd9f77]:hover{border-color:var(--brand-main);background:var(--bg-tertiary)}.file-upload-area.has-file[data-v-8dfd9f77]{border-style:solid;border-color:var(--brand-main)}.file-input[data-v-8dfd9f77]{display:none}.file-upload-label[data-v-8dfd9f77]{display:flex;flex-direction:column;align-items:center;gap:1rem;cursor:pointer;color:var(--text-secondary)}.upload-icon[data-v-8dfd9f77]{color:var(--brand-main)}.upload-text[data-v-8dfd9f77]{font-weight:500}.file-info[data-v-8dfd9f77]{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;padding:.5rem 1rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px}.file-name[data-v-8dfd9f77]{font-size:.9rem;color:var(--text-primary)}.remove-file-btn[data-v-8dfd9f77]{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.25rem;border-radius:4px;transition:all .3s ease}.remove-file-btn[data-v-8dfd9f77]:hover{color:#f56565;background:#f565651a}.tags-preview[data-v-8dfd9f77]{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.tag-item[data-v-8dfd9f77]{background:var(--brand-main);color:#fff;padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:500}.create-btn[data-v-8dfd9f77]{background:linear-gradient(135deg,var(--brand-main),var(--brand-accent));color:#fff;border:none;padding:1rem 2rem;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.create-btn[data-v-8dfd9f77]:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #227a534d}.create-btn[data-v-8dfd9f77]:disabled{opacity:.6;cursor:not-allowed}.loading-spinner[data-v-8dfd9f77]{animation:spin-8dfd9f77 1s linear infinite}@keyframes spin-8dfd9f77{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message[data-v-8dfd9f77]{display:flex;align-items:center;gap:.5rem;color:#f56565;background:#f565651a;padding:1rem;border-radius:8px;margin-top:1rem;font-size:.9rem}.dark-mode{background:var(--bg-primary);border-color:var(--border-color)}.dark-mode{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-color)}.dark-mode{background:var(--bg-secondary);border-color:var(--border-color)}.modal-overlay[data-v-7801c931]{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content[data-v-7801c931]{background:#fff;border-radius:12px;width:90%;max-width:500px;max-height:80vh;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a}.modal-header[data-v-7801c931]{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e5e7eb}.modal-title[data-v-7801c931]{font-size:18px;font-weight:600;color:#111827;margin:0}.close-btn[data-v-7801c931]{background:none;border:none;font-size:20px;cursor:pointer;color:#6b7280;padding:4px;border-radius:4px;transition:all .2s}.close-btn[data-v-7801c931]:hover{background:#f3f4f6;color:#374151}.modal-body[data-v-7801c931]{padding:24px;max-height:400px;overflow-y:auto}.loading[data-v-7801c931]{text-align:center;padding:40px 20px}.spinner[data-v-7801c931]{width:40px;height:40px;border:4px solid #f3f4f6;border-top:4px solid #3b82f6;border-radius:50%;animation:spin-7801c931 1s linear infinite;margin:0 auto 16px}@keyframes spin-7801c931{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error[data-v-7801c931]{text-align:center;padding:40px 20px;color:#ef4444}.retry-btn[data-v-7801c931]{background:#3b82f6;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;margin-top:12px}.empty[data-v-7801c931]{text-align:center;padding:40px 20px;color:#6b7280}.members-list[data-v-7801c931]{display:flex;flex-direction:column;gap:12px}.member-item[data-v-7801c931]{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;background:#f9fafb;transition:background .2s}.member-item[data-v-7801c931]:hover{background:#f3f4f6}.member-avatar[data-v-7801c931]{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#1d4ed8);display:flex;align-items:center;justify-content:center;flex-shrink:0}.avatar-text[data-v-7801c931]{color:#fff;font-weight:600;font-size:16px}.member-info[data-v-7801c931]{flex:1;min-width:0}.member-name[data-v-7801c931]{font-size:14px;font-weight:600;color:#111827;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-email[data-v-7801c931]{font-size:12px;color:#6b7280;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-role[data-v-7801c931]{flex-shrink:0}.role-badge[data-v-7801c931]{font-size:11px;font-weight:600;padding:4px 8px;border-radius:12px;background:#e5e7eb;color:#374151}.role-badge.teacher[data-v-7801c931]{background:#fef3c7;color:#92400e}.modal-footer[data-v-7801c931]{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-top:1px solid #e5e7eb;background:#f9fafb}.member-count[data-v-7801c931]{font-size:14px;color:#6b7280;margin:0}.close-modal-btn[data-v-7801c931]{background:#3b82f6;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:background .2s}.close-modal-btn[data-v-7801c931]:hover{background:#2563eb}@media (prefers-color-scheme: dark){.modal-content[data-v-7801c931]{background:#1f2937;color:#f9fafb}.modal-header[data-v-7801c931]{border-bottom-color:#374151}.modal-title[data-v-7801c931]{color:#f9fafb}.member-item[data-v-7801c931]{background:#374151}.member-item[data-v-7801c931]:hover{background:#4b5563}.member-name[data-v-7801c931]{color:#f9fafb}.member-email[data-v-7801c931]{color:#9ca3af}.modal-footer[data-v-7801c931]{border-top-color:#374151;background:#374151}.member-count[data-v-7801c931]{color:#9ca3af}}.modal-overlay[data-v-8715d017]{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;z-index:9999;transition:opacity .3s ease}.modal-container[data-v-8715d017]{background:var(--bg-primary);border-radius:12px;width:90%;max-width:800px;box-shadow:0 5px 15px #0000004d;display:flex;flex-direction:column;max-height:90vh;overflow:hidden;animation:slide-in-8715d017 .3s ease-out}.modal-header[data-v-8715d017]{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;border-bottom:1px solid var(--border-color);background:var(--bg-secondary)}.modal-title[data-v-8715d017]{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:0}.close-btn[data-v-8715d017]{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:6px;transition:all .2s ease}.close-btn[data-v-8715d017]:hover{color:var(--text-primary);background:var(--bg-tertiary)}.modal-body[data-v-8715d017]{padding:1.5rem;overflow-y:auto;flex-grow:1}.section-title[data-v-8715d017]{font-size:1.3rem;font-weight:600;color:var(--text-primary);margin:0 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--border-color)}.summary-section[data-v-8715d017]{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.loading-state[data-v-8715d017]{text-align:center;padding:2rem 1rem;color:var(--text-secondary)}.loading-icon[data-v-8715d017]{font-size:2rem;margin-bottom:1rem;animation:spin-8715d017 1s linear infinite}.loading-text[data-v-8715d017]{font-size:1rem;margin:0}.summary-content[data-v-8715d017]{background:var(--bg-secondary);border-radius:8px;padding:1rem}.summary-info[data-v-8715d017]{display:flex;flex-direction:column;gap:.75rem}.summary-item[data-v-8715d017]{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--bg-primary);border-radius:6px;border:1px solid var(--border-color)}.summary-icon[data-v-8715d017]{font-size:1.2rem;flex-shrink:0}.summary-label[data-v-8715d017]{font-weight:500;color:var(--text-primary);flex:1}.summary-link[data-v-8715d017]{text-decoration:none}.view-btn[data-v-8715d017]{padding:.5rem 1rem;background:var(--brand-main);color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .2s ease}.view-btn[data-v-8715d017]:hover{background:var(--brand-accent)}.no-summary[data-v-8715d017]{text-align:center;padding:2rem 1rem;background:var(--bg-tertiary);border-radius:8px}.no-summary-icon[data-v-8715d017]{font-size:2rem;margin-bottom:1rem}.no-summary-text[data-v-8715d017]{color:var(--text-secondary);font-style:italic;margin:0}.live-section[data-v-8715d017]{margin-top:1rem}@keyframes spin-8715d017{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.empty-state[data-v-8715d017]{text-align:center;padding:3rem 1rem;color:var(--text-secondary)}.empty-icon[data-v-8715d017]{font-size:3rem;margin-bottom:1rem}.empty-text[data-v-8715d017]{font-size:1.1rem;margin:0}.live-info-list[data-v-8715d017]{display:flex;flex-direction:column;gap:1.5rem}.live-info-item[data-v-8715d017]{background:var(--bg-secondary);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color);transition:box-shadow .2s ease}.live-info-item[data-v-8715d017]:hover{box-shadow:0 2px 10px #0000001a}.info-header[data-v-8715d017]{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;gap:1rem}.info-title[data-v-8715d017]{font-size:1.2rem;font-weight:600;color:var(--text-primary);margin:0;flex:1}.info-status[data-v-8715d017]{padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:500;white-space:nowrap}.info-status.live[data-v-8715d017]{background:#ef44441a;color:#ef4444}.info-status.scheduled[data-v-8715d017]{background:#f59e0b1a;color:#f59e0b}.info-status.ended[data-v-8715d017]{background:#9ca3af1a;color:#6b7280}.info-description[data-v-8715d017]{margin-bottom:1rem}.info-description p[data-v-8715d017]{color:var(--text-secondary);line-height:1.6;margin:0}.info-meta[data-v-8715d017]{display:flex;gap:1.5rem;margin-bottom:1rem;flex-wrap:wrap}.meta-item[data-v-8715d017]{display:flex;gap:.5rem;font-size:.9rem}.meta-label[data-v-8715d017]{color:var(--text-secondary);font-weight:500}.meta-value[data-v-8715d017]{color:var(--text-primary);font-weight:600}.info-files[data-v-8715d017]{background:var(--bg-tertiary);border-radius:8px;padding:1rem}.files-title[data-v-8715d017]{font-size:1rem;font-weight:600;color:var(--text-primary);margin:0 0 1rem}.file-list[data-v-8715d017]{display:flex;flex-direction:column;gap:.75rem}.file-item[data-v-8715d017]{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem;background:var(--bg-primary);border-radius:8px;border:1px solid var(--border-color)}.file-info[data-v-8715d017]{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.file-icon[data-v-8715d017]{font-size:1.2rem;flex-shrink:0}.file-name[data-v-8715d017]{font-weight:500;color:var(--text-primary);word-break:break-word;flex:1}.file-size[data-v-8715d017]{font-size:.8rem;color:var(--text-secondary);flex-shrink:0}.download-btn[data-v-8715d017]{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--brand-main);color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .2s ease;flex-shrink:0}.download-btn[data-v-8715d017]:hover:not(:disabled){background:var(--brand-accent)}.download-btn[data-v-8715d017]:disabled{background:var(--bg-tertiary);color:var(--text-secondary);cursor:not-allowed}.no-files[data-v-8715d017]{text-align:center;padding:2rem 1rem;background:var(--bg-tertiary);border-radius:8px}.no-files-text[data-v-8715d017]{color:var(--text-secondary);font-style:italic;margin:0}.modal-footer[data-v-8715d017]{padding:1rem 1.5rem;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;background:var(--bg-secondary)}.close-footer-btn[data-v-8715d017]{padding:.75rem 1.5rem;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease}.close-footer-btn[data-v-8715d017]:hover{background:var(--bg-card);border-color:var(--border-dark)}@keyframes slide-in-8715d017{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 768px){.modal-container[data-v-8715d017]{width:95%;max-height:95vh}.info-header[data-v-8715d017]{flex-direction:column;align-items:flex-start;gap:.5rem}.info-meta[data-v-8715d017]{flex-direction:column;gap:.5rem}.file-item[data-v-8715d017]{flex-direction:column;align-items:stretch;gap:.75rem}.file-info[data-v-8715d017]{justify-content:space-between}}.invite-modal-overlay[data-v-17c5d824]{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.invite-modal[data-v-17c5d824]{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;width:90%;max-width:500px;max-height:90vh;overflow-y:auto}.invite-modal-header[data-v-17c5d824]{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 16px;border-bottom:1px solid #e5e7eb}.invite-modal-header h3[data-v-17c5d824]{margin:0;font-size:20px;font-weight:600;color:#111827}.close-btn[data-v-17c5d824]{background:none;border:none;font-size:24px;cursor:pointer;color:#6b7280;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:background-color .2s}.close-btn[data-v-17c5d824]:hover{background-color:#f3f4f6;color:#374151}.invite-modal-content[data-v-17c5d824]{padding:24px}.invite-form[data-v-17c5d824]{display:flex;flex-direction:column;gap:20px}.invite-form label[data-v-17c5d824]{font-weight:500;color:#374151;font-size:14px}.search-container[data-v-17c5d824]{position:relative}.invite-form input[data-v-17c5d824]{width:100%;padding:12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;transition:border-color .2s;box-sizing:border-box}.invite-form input[data-v-17c5d824]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.invite-form input[data-v-17c5d824]:disabled{background-color:#f9fafb;color:#6b7280;cursor:not-allowed}.search-loading[data-v-17c5d824]{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#6b7280;font-size:14px}.search-results[data-v-17c5d824]{margin-top:16px}.search-results h4[data-v-17c5d824]{margin:0 0 12px;font-size:14px;font-weight:600;color:#374151}.user-list[data-v-17c5d824]{max-height:200px;overflow-y:auto;border:1px solid #e5e7eb;border-radius:8px}.user-item[data-v-17c5d824]{display:flex;align-items:center;padding:12px 16px;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #f3f4f6}.user-item[data-v-17c5d824]:last-child{border-bottom:none}.user-item[data-v-17c5d824]:hover{background-color:#f9fafb}.user-item.selected[data-v-17c5d824]{background-color:#eff6ff;border-color:#3b82f6}.user-avatar[data-v-17c5d824]{width:40px;height:40px;border-radius:50%;overflow:hidden;margin-right:12px;flex-shrink:0}.user-avatar.small[data-v-17c5d824]{width:32px;height:32px}.user-avatar img[data-v-17c5d824]{width:100%;height:100%;object-fit:cover}.avatar-placeholder[data-v-17c5d824]{width:100%;height:100%;background-color:#3b82f6;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:600;font-size:14px}.user-info[data-v-17c5d824]{flex:1;display:flex;flex-direction:column;gap:2px}.user-name[data-v-17c5d824]{font-weight:500;color:#111827;font-size:14px}.user-email[data-v-17c5d824]{color:#6b7280;font-size:12px}.user-action[data-v-17c5d824]{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:16px;font-weight:700}.selected-icon[data-v-17c5d824]{color:#10b981}.add-icon[data-v-17c5d824]{color:#6b7280}.selected-users[data-v-17c5d824]{margin-top:16px;padding:16px;background-color:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}.selected-users h4[data-v-17c5d824]{margin:0 0 12px;font-size:14px;font-weight:600;color:#374151}.selected-list[data-v-17c5d824]{display:flex;flex-direction:column;gap:8px}.selected-item[data-v-17c5d824]{display:flex;align-items:center;padding:8px 12px;background-color:#fff;border-radius:6px;border:1px solid #e5e7eb}.remove-btn[data-v-17c5d824]{background:none;border:none;color:#ef4444;font-size:18px;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s}.remove-btn[data-v-17c5d824]:hover:not(:disabled){background-color:#fef2f2}.remove-btn[data-v-17c5d824]:disabled{opacity:.5;cursor:not-allowed}.invite-actions[data-v-17c5d824]{display:flex;gap:12px;justify-content:flex-end;margin-top:8px}.btn[data-v-17c5d824]{padding:10px 20px;border-radius:8px;font-weight:500;font-size:14px;cursor:pointer;transition:all .2s;border:none;min-width:80px}.btn.cancel[data-v-17c5d824]{background-color:#f3f4f6;color:#374151}.btn.cancel[data-v-17c5d824]:hover:not(:disabled){background-color:#e5e7eb}.btn.invite[data-v-17c5d824]{background-color:#3b82f6;color:#fff}.btn.invite[data-v-17c5d824]:hover:not(:disabled){background-color:#2563eb}.btn[data-v-17c5d824]:disabled{opacity:.6;cursor:not-allowed}.invite-message[data-v-17c5d824]{padding:12px 16px;background-color:#d1fae5;color:#065f46;border-radius:8px;font-size:14px;text-align:center;margin-top:12px}.dark-mode .invite-modal[data-v-17c5d824]{background:#1f2937;color:#f9fafb}.dark-mode .invite-modal-header[data-v-17c5d824]{border-bottom-color:#374151}.dark-mode .invite-modal-header h3[data-v-17c5d824]{color:#f9fafb}.dark-mode .close-btn[data-v-17c5d824]{color:#9ca3af}.dark-mode .close-btn[data-v-17c5d824]:hover{background-color:#374151;color:#d1d5db}.dark-mode .invite-form label[data-v-17c5d824]{color:#d1d5db}.dark-mode .invite-form input[data-v-17c5d824]{background-color:#374151;border-color:#4b5563;color:#f9fafb}.dark-mode .invite-form input[data-v-17c5d824]:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa1a}.dark-mode .invite-form input[data-v-17c5d824]:disabled{background-color:#1f2937;color:#6b7280}.dark-mode .search-loading[data-v-17c5d824]{color:#9ca3af}.dark-mode .search-results h4[data-v-17c5d824]{color:#d1d5db}.dark-mode .user-list[data-v-17c5d824]{border-color:#374151;background-color:#1f2937}.dark-mode .user-item[data-v-17c5d824]{border-bottom-color:#374151}.dark-mode .user-item[data-v-17c5d824]:hover{background-color:#374151}.dark-mode .user-item.selected[data-v-17c5d824]{background-color:#1e3a8a;border-color:#3b82f6}.dark-mode .user-name[data-v-17c5d824]{color:#f9fafb}.dark-mode .user-email[data-v-17c5d824],.dark-mode .add-icon[data-v-17c5d824]{color:#9ca3af}.dark-mode .selected-users[data-v-17c5d824]{background-color:#1f2937;border-color:#374151}.dark-mode .selected-users h4[data-v-17c5d824]{color:#d1d5db}.dark-mode .selected-item[data-v-17c5d824]{background-color:#374151;border-color:#4b5563}.dark-mode .remove-btn[data-v-17c5d824]:hover:not(:disabled){background-color:#7f1d1d}.dark-mode .btn.cancel[data-v-17c5d824]{background-color:#374151;color:#d1d5db}.dark-mode .btn.cancel[data-v-17c5d824]:hover:not(:disabled){background-color:#4b5563}.dark-mode .invite-message[data-v-17c5d824]{background-color:#065f46;color:#d1fae5}.notice-content img{max-width:100%;height:auto;display:block;margin:0 auto}.image-modal-overlay[data-v-080bcaa3]{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:1100}.image-modal-container[data-v-080bcaa3]{position:relative;max-width:90%;max-height:90%}.image-modal-container img[data-v-080bcaa3]{width:100%;height:auto;border-radius:4px}.close-btn[data-v-080bcaa3]{position:absolute;top:10px;right:10px;background:#fff;border:none;cursor:pointer;font-size:1.2rem;padding:.2rem .5rem}[data-v-31b06ce3]:root{--bg-color: #f8fafc;--card-bg: #ffffff;--text-color: #1f2937;--text-secondary: #6b7280;--border-color: #e5e7eb;--input-bg: #ffffff;--primary-color: #2563eb;--primary-hover: #1e3a8a;--success-color: #10b981;--success-hover: #047857;--danger-color: #ef4444;--danger-hover: #dc2626;--disabled-color: #9ca3af;--video-bg: #000000;--shadow-color: rgba(0, 0, 0, .08);--brand-main: #2563eb;--brand-sub: #eff6ff;--text-inverse: #ffffff}.dark-mode[data-v-31b06ce3]{--bg-color: #1f2937;--card-bg: #374151;--text-color: #f9fafb;--text-secondary: #d1d5db;--border-color: #4b5563;--input-bg: #374151;--primary-color: #3b82f6;--primary-hover: #1d4ed8;--success-color: #10b981;--success-hover: #047857;--danger-color: #ef4444;--danger-hover: #dc2626;--video-bg: #111827;--shadow-color: rgba(0, 0, 0, .3);--brand-main: #3b82f6;--brand-sub: #1e3a8a;--text-inverse: #ffffff}.modal-overlay[data-v-31b06ce3]{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-container[data-v-31b06ce3]{background:var(--card-bg);color:var(--text-color);border-radius:8px;width:600px;max-width:95%;max-height:90%;overflow-y:auto;box-shadow:0 8px 16px #00000080;padding:0}.modal-header[data-v-31b06ce3]{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;font-size:1.5rem;font-weight:700;border-bottom:1px solid var(--border-color);background:var(--bg-color)}.close-btn[data-v-31b06ce3]{background:none;border:none;font-size:1.25rem;cursor:pointer;color:var(--text-color)}.modal-title[data-v-31b06ce3]{margin:0;padding:0}.section[data-v-31b06ce3]{padding:1.5rem;background-color:var(--card-bg);border-bottom:1px solid var(--border-color);max-height:200px;overflow-y:hidden;transition:all .3s ease}.section[data-v-31b06ce3]:hover{overflow-y:auto}.section[data-v-31b06ce3]:last-of-type{border-bottom:none}.section-title-box[data-v-31b06ce3]{background-color:var(--input-bg);padding:.75rem 1.5rem;border-radius:8px;margin-bottom:1rem;width:fit-content}.section-title[data-v-31b06ce3]{margin:0;font-weight:700;color:var(--text-color);font-size:1.2rem}.section-content p[data-v-31b06ce3]{margin:0}.attachment-files ul[data-v-31b06ce3]{list-style:none;padding-left:0}.file-btn[data-v-31b06ce3],.file-link[data-v-31b06ce3]{color:var(--text-secondary);text-decoration:underline;background:none;border:none;cursor:pointer;display:flex;align-items:center}.file-btn[data-v-31b06ce3]:before,.file-link[data-v-31b06ce3]:before{content:"📄";margin-right:8px;color:var(--primary-color)}.image-btn[data-v-31b06ce3]:before{content:"🖼️";color:var(--success-color)}.student-submission-status .section-content[data-v-31b06ce3]{max-height:400px;overflow-y:auto}.student-submission-item[data-v-31b06ce3]{margin-bottom:1.5rem;padding:1rem;border:1px solid var(--border-color);border-radius:8px;background-color:var(--bg-color)}.student-submission-item[data-v-31b06ce3]:last-child{margin-bottom:0}.student-header[data-v-31b06ce3]{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.student-name[data-v-31b06ce3]{font-weight:600;color:var(--text-color);font-size:1rem}.status-badge[data-v-31b06ce3]{padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase}.status-badge.submitted[data-v-31b06ce3]{background-color:var(--success-color);color:var(--text-inverse);border:1px solid var(--success-color)}.status-badge.not-submitted[data-v-31b06ce3]{background-color:var(--danger-color);color:var(--text-inverse);border:1px solid var(--danger-color)}.submitted-at[data-v-31b06ce3]{font-size:.8rem;color:var(--text-secondary);margin-left:auto}.submission-details[data-v-31b06ce3]{padding-top:.75rem}.submission-content[data-v-31b06ce3]{margin-bottom:1rem}.content-title[data-v-31b06ce3],.files-title[data-v-31b06ce3]{font-size:.9rem;font-weight:600;color:var(--text-secondary);margin:0 0 .5rem}.content-text[data-v-31b06ce3]{background-color:var(--input-bg);padding:.75rem;border-radius:6px;border-left:3px solid var(--primary-color);color:var(--text-color);font-size:.9rem;line-height:1.5;margin:0;white-space:pre-wrap;word-wrap:break-word}.submission-files[data-v-31b06ce3]{margin-bottom:1rem}.files-list[data-v-31b06ce3]{list-style:none;padding-left:0;margin:0}.file-item[data-v-31b06ce3]{margin-bottom:.5rem}.no-content[data-v-31b06ce3]{padding:.75rem;text-align:center;color:var(--text-secondary);font-style:italic;background-color:var(--input-bg);border-radius:6px}.no-content-text[data-v-31b06ce3]{font-size:.9rem}.form-input[data-v-31b06ce3]{width:100%;padding:.5rem;margin-top:.25rem;background-color:var(--input-bg);border:1px solid var(--border-color);color:var(--text-color)}.submit-btn[data-v-31b06ce3]{background-color:var(--primary-color);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:4px;cursor:pointer;width:100%;font-weight:700;margin-top:1rem}.submit-btn[data-v-31b06ce3]:hover{background-color:var(--primary-hover)}.submission-status .status-message[data-v-31b06ce3]{padding:1rem;border-radius:8px;background-color:var(--success-color);border:1px solid var(--success-color);color:var(--text-inverse);font-weight:700;text-align:center}.submission-date[data-v-31b06ce3]{display:block;font-size:.9rem;color:var(--text-inverse);font-weight:400;margin-top:.5rem}.download-btn[data-v-31b06ce3]{color:var(--primary-color)!important;text-decoration:underline;background:none;border:none;cursor:pointer;display:flex;align-items:center}.download-btn[data-v-31b06ce3]:before{content:"📥";margin-right:8px;color:var(--primary-color)}.download-btn[data-v-31b06ce3]:hover{color:var(--primary-hover)!important}.file-item-with-actions[data-v-31b06ce3]{display:flex;justify-content:space-between;align-items:center;padding:.75rem;margin-bottom:.5rem;background-color:var(--input-bg);border-radius:6px;border:1px solid var(--border-color)}.file-item-with-actions[data-v-31b06ce3]:hover{background-color:var(--bg-color)}.file-info[data-v-31b06ce3]{flex:1;display:flex;align-items:center}.file-name[data-v-31b06ce3]{color:var(--text-color);font-size:.9rem;display:flex;align-items:center}.file-actions[data-v-31b06ce3]{margin-left:1rem}.download-link-btn[data-v-31b06ce3]{display:inline-flex;align-items:center;padding:.5rem 1rem;background-color:var(--primary-color);color:var(--text-inverse);text-decoration:none;border-radius:6px;font-size:.8rem;font-weight:500;transition:background-color .2s ease;border:1px solid var(--primary-color);cursor:pointer}.download-link-btn[data-v-31b06ce3]:hover{background-color:var(--primary-hover);color:var(--text-inverse);text-decoration:none}.download-link-btn[data-v-31b06ce3]:visited{color:var(--text-inverse)}.download-link-btn[data-v-31b06ce3]:focus{outline:none;box-shadow:0 0 0 2px var(--primary-hover)}.attachment-files ul[data-v-31b06ce3],.submission-files ul[data-v-31b06ce3],.submitted-files ul[data-v-31b06ce3]{list-style:none;padding-left:0;margin:0}.files-list[data-v-31b06ce3]{margin:0}.section[data-v-31b06ce3]::-webkit-scrollbar{width:8px}.section[data-v-31b06ce3]::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:4px}.section[data-v-31b06ce3]::-webkit-scrollbar-track{background-color:var(--bg-color)}.class-info{background:var(--bg-primary);border-radius:16px;padding:1.5rem;border:1px solid var(--border-color);box-shadow:0 4px 20px #0000000d;height:100%;overflow-y:auto;display:flex;flex-direction:column}.info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.class-title{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.class-status{padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:500}.class-status.active{background:#10b9811a;color:#10b981}.class-status.completed{background:#3b82f61a;color:#3b82f6}.class-status.upcoming{background:#f59e0b1a;color:#f59e0b}.info-content{flex:1;display:flex;flex-direction:column;gap:1.5rem;margin-bottom:1rem}.assignment-info{display:flex;gap:1rem;align-items:center}.assignment-circle{position:relative;width:60px;height:60px}.assignment-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.9rem;font-weight:600}.assignment-details{display:flex;flex-direction:column;gap:.25rem}.detail-item{display:flex;justify-content:space-between;font-size:.8rem}.detail-item .label{color:var(--text-secondary)}.detail-item .value{font-weight:600}.notice-board{display:flex;flex-direction:column;gap:.5rem}.notice-item{padding:.5rem;border-radius:6px;background:var(--bg-secondary);display:flex;justify-content:space-between;align-items:center;gap:.5rem;cursor:pointer;transition:background .2s}.notice-item:hover{background:var(--bg-tertiary)}.notice-item.required{background:#ef44441a;color:#ef4444}.notice-item-content{display:flex;align-items:center;gap:.5rem;flex-grow:1}.small-btn{padding:.3rem .6rem;font-size:.75rem;border-radius:6px;cursor:pointer;border:1px solid var(--border-color);transition:background-color .3s ease,color .3s ease,border-color .3s ease;white-space:nowrap}.delete-btn{background-color:transparent;color:#ef4444;border-color:#ef4444}.delete-btn:hover{background-color:#ef4444;color:#fff}.badge{display:inline-block;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:600;margin-right:.5rem;background:var(--bg-tertiary);color:var(--text-color)}.assignment-board{display:flex;flex-direction:column;gap:.5rem}.task-item{padding:.7rem;border-radius:8px;background:var(--bg-secondary);display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background .2s}.task-item:hover{background:var(--bg-tertiary)}.task-info-left{display:flex;align-items:center;gap:.8rem}.task-item .status{font-size:.75rem;font-weight:600;padding:.2rem .5rem;border-radius:4px}.task-item.done .status{background:#10b9811a;color:#10b981}.task-item:not(.done) .status{background:#ef44441a;color:#ef4444}.task-item .text{font-size:.95rem}.tab-buttons{display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:1px solid var(--border-color);padding-bottom:.5rem}.tab-btn{padding:.5rem 1rem;border:none;border-bottom:2px solid transparent;font-size:.9rem;font-weight:500;cursor:pointer;color:var(--text-secondary);background:none;transition:.3s ease}.tab-btn.active{color:var(--brand-main);border-bottom-color:var(--brand-main)}.tab-btn:hover{color:var(--brand-main)}.filter-section{margin-bottom:1rem}.filter-select{padding:.5rem;border:1px solid var(--border-color);border-radius:.375rem;background:var(--bg-color);color:var(--text-color);font-size:.875rem;cursor:pointer;transition:border-color .2s}.filter-select:focus{outline:none;border-color:var(--brand-main);box-shadow:0 0 0 2px #3b82f61a}.filter-select:hover{border-color:var(--border-dark)}.info-actions{display:flex;gap:.75rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--border-color)}.action-btn{flex:1;padding:.75rem 1rem;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;border:none;transition:.3s ease}.action-btn.primary{background:var(--brand-main);color:#fff}.action-btn.primary:hover{background:var(--brand-accent)}.action-btn.secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.action-btn.secondary:hover{background:var(--bg-card);border-color:var(--border-dark)}.action-bar{margin-bottom:1rem}.add-btn{padding:.75rem 1rem;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);transition:all .3s ease;width:100%}.add-btn:hover{background:var(--bg-tertiary);border-color:var(--brand-main);color:var(--brand-main)}.submit-btn{padding:.3rem .6rem;font-size:.75rem;border-radius:6px;background-color:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color);cursor:pointer;transition:background-color .3s ease,color .3s ease,border-color .3s ease}.submit-btn:hover{background-color:var(--brand-light);color:var(--brand-main);border-color:var(--brand-main)}.view-btn{padding:.3rem .6rem;font-size:.75rem;border-radius:6px;background-color:#065f46;color:#d1fae5;border:1px solid #10b981;cursor:pointer;transition:background-color .3s ease,color .3s ease,border-color .3s ease}.view-btn:hover{background-color:#047857;color:#ecfdf5;border-color:#059669}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;z-index:1000;transition:opacity .3s ease}.modal-container{background:var(--bg-primary);border-radius:12px;width:90%;max-width:600px;box-shadow:0 5px 15px #0000004d;display:flex;flex-direction:column;max-height:80vh;overflow:hidden;animation:slide-in .3s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;border-bottom:1px solid var(--border-color)}.modal-title{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:0}.close-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer}.close-btn:hover{color:var(--text-primary)}.modal-body{padding:1.5rem;overflow-y:auto;flex-grow:1}.notice-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.notice-meta .badge.required{background:#ef44441a;color:#ef4444}.date{font-size:.9rem;color:var(--text-secondary)}.notice-content{font-size:1rem;line-height:1.6;color:var(--text-primary);white-space:pre-wrap}.assignment-meta{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.assignment-meta .status{padding:.25rem .75rem;border-radius:4px;font-size:.8rem;font-weight:600}.assignment-meta .status.done{background:#10b9811a;color:#10b981}.assignment-meta .status:not(.done){background:#ef44441a;color:#ef4444}.due-date{font-size:.9rem;color:var(--text-secondary)}.assignment-content{font-size:1rem;line-height:1.6;color:var(--text-primary);white-space:pre-wrap}.modal-footer .submit-btn{padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;background:var(--brand-main);color:#fff;border:none;transition:background .3s ease}.modal-footer .submit-btn:hover{background:var(--brand-accent)}.form-group{margin-bottom:1.5rem}.form-group label{display:block;font-weight:600;margin-bottom:.5rem;color:var(--text-primary)}.form-input,.form-textarea{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:1rem}.form-textarea{min-height:150px;resize:vertical}.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--brand-main);box-shadow:0 0 0 2px #3b82f61a}.form-check{display:flex;align-items:center}.form-checkbox{width:1.25rem;height:1.25rem;margin-right:.5rem;cursor:pointer}.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end}.submit-btn{padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;background:var(--brand-main);color:#fff;border:none;transition:background .3s ease}.submit-btn:hover{background:var(--brand-accent)}@keyframes slide-in{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-footer{display:flex;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid #eee}.notice-views{display:flex;align-items:center;gap:8px;color:#555;font-size:14px}.notice-views .badge.view-label{background-color:#f0f0f0;color:#888;padding:4px 8px;border-radius:4px;font-weight:500}.notice-views .view-count{font-weight:700;color:#3e7c43;font-size:16px}.student-submission-status{margin-top:1.5rem}.student-submission-status ul{list-style:none;padding-left:0}.student-submission-status li{margin-bottom:.5rem}.student-name{font-weight:600}.submission-status{font-weight:700;margin-left:.5rem}.submitted{color:green}.not-submitted{color:red}.submitted-at{font-size:.8rem;color:#666;margin-left:.5rem}.class-layout{display:grid;grid-template-columns:320px 1fr;gap:2rem;max-width:1300px;margin:2rem auto;padding:1rem}.create-class-section{background:var(--card-bg-light);border-radius:16px;padding:2rem 1.5rem;box-shadow:0 10px 24px #00000014;text-align:center}.create-class-section h1{font-size:1.6rem;margin-bottom:1.5rem;color:var(--text-dark)}.create-class-section input,.create-class-section textarea{width:100%;border:1px solid var(--border-light);background:var(--bg-light);color:var(--text-dark);border-radius:12px;padding:12px;font-size:1rem;margin-bottom:1rem}.create-class-section input:focus,.create-class-section textarea:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 2px #00b57833}.create-class-section button{width:100%;padding:14px;background:var(--primary-color);color:var(--text-light);border:none;border-radius:12px;font-weight:600;font-size:1.1rem;cursor:pointer;transition:all .2s ease}.create-class-section button:hover{background:var(--primary-dark)}.error{color:#ff5a5a;font-size:.9rem;margin-top:.5rem}.my-classes-section{background:var(--card-bg-light);border-radius:16px;padding:2rem;box-shadow:0 10px 24px #00000014}.my-classes-section h1{font-size:1.6rem;margin-bottom:1.5rem;text-align:center;color:var(--text-dark)}.class-card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.room-layout{display:flex;gap:2rem;padding:2rem;background:var(--bg-color);min-height:100vh}.join-section,.active-rooms-section{background:var(--card-bg);border-radius:12px;padding:1.5rem;box-shadow:0 6px 18px var(--shadow-color);border:1px solid var(--border-color)}.join-section{flex:1;display:flex;flex-direction:column;gap:1rem}.join-section h2{color:var(--text-color);margin-bottom:1rem}.join-section label{color:var(--text-color);font-weight:500;margin-bottom:.5rem;display:block}.join-section input{border:1px solid var(--border-color);border-radius:8px;padding:.6rem;background:var(--input-bg);color:var(--text-color);transition:border-color .2s}.join-section input:focus{outline:none;border-color:var(--primary-color)}.join-section button{border:none;background:var(--primary-color);color:#fff;padding:.8rem;border-radius:8px;font-weight:700;cursor:pointer;transition:.2s}.join-section button:hover{background:var(--primary-hover)}.join-section button:disabled{background:var(--disabled-color);cursor:not-allowed}.active-rooms-section{flex:2}.active-rooms-section h2{color:var(--text-color);margin-bottom:1rem}.active-rooms-section ul{list-style:none;padding:0;margin:0}.room-card{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border-color);border-radius:8px;padding:.8rem;margin-bottom:.8rem;background:var(--card-bg);transition:border-color .2s}.room-card:hover{border-color:var(--primary-color)}.room-card strong{color:var(--text-color)}.room-card p{color:var(--text-secondary);margin:.2rem 0 0}.room-card button{background:var(--success-color);color:#fff;border:none;padding:.4rem .8rem;border-radius:6px;cursor:pointer;transition:.2s}.room-card button:hover{background:var(--success-hover)}.empty{color:var(--text-secondary);text-align:center;margin-top:1rem}.video-room{padding:20px;background:var(--bg-color);min-height:100vh;width:100%;margin:0}.video-body{display:flex;gap:20px;height:calc(100vh - 120px);max-width:1400px;margin:0 auto}.main-content{flex:1;display:flex;flex-direction:column;gap:1rem;align-items:center}.video-section{width:100%;max-width:800px;display:flex;flex-direction:column;align-items:center;position:relative}.chat-section{width:280px;background:var(--card-bg);border-radius:12px;padding:.8rem;box-shadow:0 6px 18px var(--shadow-color);border:1px solid var(--border-color);display:flex;flex-direction:column;height:100%}.video-room-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.header-info{display:flex;align-items:center;gap:1rem}.video-room-header h2{color:var(--text-color);margin:0}.user-role{display:flex;align-items:center}.creator-badge{background:linear-gradient(135deg,gold,#ffed4e);color:#8b4513;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600;box-shadow:0 2px 8px #ffd7004d}.participant-badge{background:linear-gradient(135deg,#4a90e2,#7bb3f0);color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600;box-shadow:0 2px 8px #4a90e24d}.hamburger-btn{position:fixed;width:50px;height:50px;border-radius:50%;border:none;cursor:grab;background:#000c;color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 16px #0000004d;z-index:1000;-webkit-user-select:none;user-select:none}.hamburger-btn:hover{background:#000000e6;transform:translateY(-1px);cursor:grab}.hamburger-btn:active{cursor:grabbing;transform:scale(.95)}.control-panel{position:fixed;width:280px;background:#000000e6;border-radius:16px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 8px 32px #0006;z-index:999;animation:slideIn .3s ease-out}.control-panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1)}.control-panel-header h3{color:#fff;margin:0;font-size:16px;font-weight:600}.close-btn{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:4px;border-radius:4px;transition:background .2s}.close-btn:hover{background:#ffffff1a}.control-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 20px}.control-buttons button{width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;background:#ffffff1a;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.control-buttons button:hover{background:#fff3;transform:translateY(-1px)}.control-buttons button.off{color:#ef4444;background:#ef444433}.control-buttons button.off:hover{background:#ef44444d}.control-buttons button.leave{color:#ef4444;background:#ef444433;grid-column:span 3;width:100%;border-radius:12px}.control-buttons button.leave:hover{background:#ef44444d}@keyframes slideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.main-video{width:100%;height:30vh;margin-bottom:15rem;display:flex;justify-content:center;align-items:flex-start;padding:0 20px 10px;position:relative;z-index:10}.main-tile{width:100%;max-width:800px;aspect-ratio:5/3;border-radius:16px;background:var(--video-bg);border:2px solid var(--border-color);overflow:hidden;box-shadow:0 8px 32px #0000004d;position:relative;z-index:10}.thumbnail-grid{display:flex;flex-wrap:nowrap;gap:.5rem;width:100%;max-width:800px;margin-top:2rem;overflow-x:auto;padding-bottom:.5rem;position:relative;z-index:1}.thumbnail{width:120px;height:90px;flex-shrink:0;border-radius:8px;background:var(--video-bg);cursor:pointer;border:1px solid var(--border-color);transition:.3s ease;position:relative;box-shadow:0 2px 8px #0000001a;top:auto;left:auto}.thumbnail:hover{border-color:var(--primary-color)}.thumbnail.creator{border:3px solid #ffd700}.thumbnail.participant{border:2px solid #4a90e2}.thumbnail-label{position:absolute;bottom:4px;left:4px;background:#000000b3;color:#fff;padding:1px 4px;border-radius:3px;font-size:8px;font-weight:600}:root{--bg-color: #f8fafc;--card-bg: #ffffff;--text-color: #1f2937;--text-secondary: #6b7280;--border-color: #e5e7eb;--input-bg: #ffffff;--primary-color: #2563eb;--primary-hover: #1e3a8a;--success-color: #10b981;--success-hover: #047857;--danger-color: #ef4444;--danger-hover: #dc2626;--disabled-color: #9ca3af;--video-bg: #000000;--shadow-color: rgba(0, 0, 0, .08)}.dark-mode{--bg-color: #1f2937;--card-bg: #374151;--text-color: #f9fafb;--text-secondary: #d1d5db;--border-color: #4b5563;--input-bg: #374151;--primary-color: #3b82f6;--primary-hover: #1d4ed8;--success-color: #10b981;--success-hover: #047857;--danger-color: #ef4444;--danger-hover: #dc2626;--disabled-color: #6b7280;--video-bg: #111827;--shadow-color: rgba(0, 0, 0, .3)}@media (max-width: 768px){.room-layout{flex-direction:column;gap:1rem;padding:1rem}.join-section,.active-rooms-section{flex:none}.video-room-header{flex-direction:column;gap:1rem;align-items:stretch}.controls{display:flex;flex-wrap:wrap;gap:.5rem}.controls button{margin-left:0;flex:1;min-width:120px}.thumbnail-grid{grid-template-columns:repeat(2,1fr)}.video-body{flex-direction:column;height:auto}.chat-section{width:100%;height:300px}.chat-box{max-height:200px}}.chat-section h3{margin:0 0 1rem;color:var(--text-color);font-size:1.1rem}.chat-box{flex:1;overflow-y:auto;border:1px solid var(--border-color);border-radius:8px;padding:.8rem;background:var(--input-bg);margin-bottom:1rem;max-height:calc(100vh - 300px)}.chat-message{margin-bottom:.5rem;padding:.5rem;border-radius:6px;background:var(--bg-color);font-size:.9rem;line-height:1.4}.chat-message strong{color:var(--primary-color);font-weight:600}.chat-input{display:flex;gap:.5rem;margin-top:auto}.chat-input input{flex:1;border:1px solid var(--border-color);border-radius:6px;padding:.6rem;background:var(--input-bg);color:var(--text-color);font-size:.9rem}.chat-input input:focus{outline:none;border-color:var(--primary-color)}.chat-input button{padding:.6rem 1rem;background:var(--primary-color);color:#fff;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:.2s;font-size:.9rem}.chat-input button:hover{background:var(--primary-hover)}.cards-section{flex:1;min-height:0}.cards-scroll-container{height:900px;overflow-y:auto;padding:var(--spacing-lg);border-radius:var(--radius-lg);background:var(--bg-secondary);border:1px solid var(--border-color)}.cards-scroll-container::-webkit-scrollbar{width:8px}.cards-scroll-container::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:var(--radius-sm)}.cards-scroll-container::-webkit-scrollbar-thumb{background:var(--border-dark);border-radius:var(--radius-sm);transition:background var(--transition-normal)}.cards-scroll-container::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.class-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--spacing-lg);padding-bottom:var(--spacing-lg)}.class-card-item{transition:transform var(--transition-normal),box-shadow var(--transition-normal);cursor:pointer}.class-card-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;text-align:center;color:var(--text-secondary)}.empty-icon{font-size:4rem;margin-bottom:var(--spacing-lg);opacity:.6}.empty-state h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-sm);color:var(--text-color)}.empty-state p{font-size:var(--font-size-base);line-height:1.5}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;color:var(--text-secondary)}.loading-spinner{font-size:2rem;margin-bottom:var(--spacing-md);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:#fef2f2;border:1px solid #fecaca;border-radius:var(--radius-md);color:#dc2626;margin-top:var(--spacing-md)}.error-icon{font-size:1.25rem}@media (max-width: 768px){.cards-scroll-container{height:400px}.class-cards-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.empty-state,.loading-state{height:250px}}@media (max-width: 480px){.cards-scroll-container{height:350px}}.class-detail-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:modalFadeIn .3s ease-out}.modal-content{background:#a2caa699;border-radius:var(--radius-xl);max-width:150px;width:90vw;max-height:90vh;overflow:hidden;box-shadow:var(--shadow-lg);animation:modalSlideIn .3s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xl);border-bottom:1px solid var(--border-color);background:var(--bg-secondary)}.modal-title{font-size:var(--font-size-2xl);font-weight:700;color:var(--text-color);margin:0}.close-btn{background:none;border:none;font-size:var(--font-size-xl);color:var(--text-secondary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-sm);transition:all var(--transition-normal)}.close-btn:hover{background:var(--bg-tertiary);color:var(--text-color)}.modal-body{padding:var(--spacing-xl);max-height:70vh;overflow-y:auto}.class-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.class-image-section{display:flex;align-items:center;justify-content:center}.class-detail-image{width:100%;max-width:300px;height:200px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.class-info-section{display:flex;flex-direction:column;gap:var(--spacing-lg)}.info-item{display:flex;flex-direction:column;gap:var(--spacing-sm)}.info-label{font-weight:600;color:var(--text-secondary);font-size:var(--font-size-sm)}.info-value{color:var(--text-color);margin:0;line-height:1.5}.tags-container{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.tag-item{background:var(--brand-sub);color:var(--brand-main);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:500}.status-badge{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:600;text-align:center}.status-active{background:#dcfce7;color:#166534}.status-inactive{background:#fef2f2;color:#dc2626}.status-pending{background:#fef3c7;color:#d97706}.status-default{background:var(--bg-tertiary);color:var(--text-secondary)}.modal-actions{display:flex;gap:var(--spacing-md);justify-content:center;padding-top:var(--spacing-lg);border-top:1px solid var(--border-color)}.action-btn{padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all var(--transition-normal);font-size:var(--font-size-base)}.action-btn.primary{background:var(--brand-main);color:var(--text-inverse)}.action-btn.primary:hover{background:var(--primary-hover);transform:translateY(-2px)}.action-btn.secondary{background:var(--bg-secondary);color:var(--text-color);border:1px solid var(--border-color)}.action-btn.secondary:hover{background:var(--bg-tertiary);border-color:var(--border-dark)}.action-btn.danger{background:var(--danger-color);color:var(--text-inverse)}.action-btn.danger:hover{background:#dc2626;transform:translateY(-2px)}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (max-width: 768px){.class-info-grid{grid-template-columns:1fr;gap:var(--spacing-lg)}.modal-content{width:95vw;margin:var(--spacing-md)}.modal-actions{flex-direction:column}.action-btn{width:100%}}.exit-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000}.exit-modal-content{background:#fff;padding:2rem;border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:400px;width:90%;text-align:center}.exit-modal-content h3{margin:0 0 1rem;color:#1f2937;font-size:1.5rem;font-weight:600}.exit-modal-content p{margin:0 0 1.5rem;color:#6b7280;line-height:1.5}.exit-modal-buttons{display:flex;flex-direction:column;gap:.75rem}.exit-modal-buttons button{padding:.75rem 1.5rem;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease}.exit-modal-buttons .summary-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.exit-modal-buttons .summary-btn:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1);transform:translateY(-1px)}.exit-modal-buttons .leave-btn{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.exit-modal-buttons .leave-btn:hover{background:linear-gradient(135deg,#e91e63,#f44336);transform:translateY(-1px)}.exit-modal-buttons .cancel-btn{background:#f3f4f6;color:#374151}.exit-modal-buttons .cancel-btn:hover{background:#e5e7eb;transform:translateY(-1px)}.create-class-container[data-v-bcaa7781]{min-height:100vh;background:var(--bg-color);padding:2rem}.header-section[data-v-bcaa7781]{text-align:center;margin-bottom:3rem;position:relative}.page-title[data-v-bcaa7781]{font-size:2.5rem;font-weight:700;color:var(--text-color);margin-bottom:.5rem;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-subtitle[data-v-bcaa7781]{font-size:1.1rem;color:var(--text-secondary);margin:0 0 2rem}.create-btn-header[data-v-bcaa7781]{background:linear-gradient(135deg,var(--brand-main),var(--brand-accent));color:#fff;border:none;padding:1rem 2rem;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem;box-shadow:0 4px 15px #227a534d}.create-btn-header[data-v-bcaa7781]:hover{transform:translateY(-2px);box-shadow:0 8px 25px #227a5366}.content-layout[data-v-bcaa7781]{display:grid;grid-template-columns:1fr 1fr;gap:3rem;max-width:1400px;margin:0 auto;min-height:600px}.classes-section[data-v-bcaa7781]{display:flex;flex-direction:column;gap:1.5rem}.classes-header[data-v-bcaa7781]{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.section-title[data-v-bcaa7781]{font-size:1.75rem;font-weight:600;color:var(--text-color);margin:0}.classes-count[data-v-bcaa7781]{font-size:.9rem;color:var(--text-secondary);background:var(--bg-tertiary);padding:.5rem 1rem;border-radius:20px}.tab-buttons[data-v-bcaa7781]{display:flex;gap:.5rem;background:var(--bg-tertiary);padding:.5rem;border-radius:12px}.tab-btn[data-v-bcaa7781]{flex:1;padding:.75rem 1rem;border:none;background:transparent;color:var(--text-secondary);font-size:.9rem;font-weight:500;cursor:pointer;border-radius:8px;transition:all .3s ease}.tab-btn.active[data-v-bcaa7781]{background:var(--bg-primary);color:var(--text-color)!important;box-shadow:0 2px 8px #0000001a}.class-cards-container[data-v-bcaa7781]{flex:1;overflow-y:auto}.class-cards-grid[data-v-bcaa7781]{display:flex;flex-direction:column;gap:1rem;align-items:center}.class-card-item[data-v-bcaa7781]{cursor:pointer;transition:all .3s ease;border-radius:12px;overflow:hidden}.class-card-item[data-v-bcaa7781]:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.class-card-item.selected[data-v-bcaa7781]{border:2px solid var(--brand-main);box-shadow:0 0 0 4px #227a531a}.class-info-section[data-v-bcaa7781]{display:flex;flex-direction:column}.class-info-wrapper[data-v-bcaa7781]{height:100%}.no-selection[data-v-bcaa7781]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--text-secondary);background:var(--bg-primary);border-radius:16px;padding:3rem;border:2px dashed var(--border-color)}.no-selection-icon[data-v-bcaa7781]{margin-bottom:1rem;color:var(--text-tertiary)}.no-selection h3[data-v-bcaa7781]{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0 0 .5rem}.no-selection p[data-v-bcaa7781]{font-size:.9rem;margin:0}.loading-state[data-v-bcaa7781]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:var(--text-secondary)}.loading-spinner[data-v-bcaa7781]{animation:spin-bcaa7781 1s linear infinite;margin-bottom:1rem}@keyframes spin-bcaa7781{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.empty-state[data-v-bcaa7781]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;color:var(--text-secondary)}.empty-icon[data-v-bcaa7781]{margin-bottom:1rem;color:var(--text-tertiary)}.empty-state h3[data-v-bcaa7781]{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0 0 .5rem}.empty-state p[data-v-bcaa7781]{font-size:.9rem;margin:0}.error-message[data-v-bcaa7781]{display:flex;align-items:center;gap:.5rem;color:#f56565;background:#f565651a;padding:1rem;border-radius:8px;font-size:.9rem}@media (max-width: 1200px){.content-layout[data-v-bcaa7781]{grid-template-columns:1fr;gap:2rem}.class-info-section[data-v-bcaa7781]{order:-1}}@media (max-width: 768px){.create-class-container[data-v-bcaa7781]{padding:1rem}.page-title[data-v-bcaa7781]{font-size:2rem}.content-layout[data-v-bcaa7781]{gap:1.5rem}.tab-buttons[data-v-bcaa7781]{flex-direction:column}.tab-btn[data-v-bcaa7781]{text-align:center}}.kakao-container[data-v-566d61b8]{max-width:400px;margin:0 auto;padding:20px;text-align:center}.loading[data-v-566d61b8]{padding:40px;color:#666}.login-section h3[data-v-566d61b8],.user-section h3[data-v-566d61b8]{margin-bottom:20px;color:#333}.kakao-login-btn[data-v-566d61b8]{cursor:pointer;display:inline-block;background:none;border:none;padding:0}.kakao-btn-custom[data-v-566d61b8]{background:#fee500;color:#3c1e1e;padding:15px 40px;border-radius:12px;font-weight:700;font-size:16px;border:2px solid #ffd900;transition:all .2s ease;display:inline-block;min-width:200px}.kakao-btn-custom[data-v-566d61b8]:hover{background:#ffd900;transform:translateY(-2px);box-shadow:0 4px 12px #ffd9004d}.user-info[data-v-566d61b8]{background:#f8f9fa;padding:15px;border-radius:8px;margin-bottom:20px;text-align:left}.user-info p[data-v-566d61b8]{margin:8px 0;color:#333}.logout-btn[data-v-566d61b8]{background:#dc3545;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:14px}.logout-btn[data-v-566d61b8]:hover{background:#c82333}.oauth-success-view[data-v-41e6b70f]{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-secondary);padding:var(--spacing-2xl);transition:background-color var(--transition-normal)}.status-container[data-v-41e6b70f]{max-width:480px;width:100%;margin-bottom:var(--spacing-2xl)}.status-content[data-v-41e6b70f]{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-2xl);text-align:center;box-shadow:var(--shadow-card);border:1px solid var(--border-color);transition:all var(--transition-normal)}.status-icon[data-v-41e6b70f]{margin-bottom:var(--spacing-lg);display:flex;align-items:center;justify-content:center}.spinner[data-v-41e6b70f]{width:40px;height:40px;border:3px solid var(--border-color);border-top:3px solid var(--brand-main);border-radius:50%;animation:spin-41e6b70f 1s linear infinite}@keyframes spin-41e6b70f{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.icon-error[data-v-41e6b70f],.icon-success[data-v-41e6b70f]{font-size:2.5rem;line-height:1}.status-title[data-v-41e6b70f]{font-size:var(--font-size-2xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-md);transition:color var(--transition-normal)}.status-message[data-v-41e6b70f]{font-size:var(--font-size-base);color:var(--text-secondary);margin-bottom:var(--spacing-sm);line-height:1.5;transition:color var(--transition-normal)}.status-submessage[data-v-41e6b70f]{font-size:var(--font-size-sm);color:var(--text-tertiary);margin-bottom:var(--spacing-lg);transition:color var(--transition-normal)}.progress-container[data-v-41e6b70f]{margin-top:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm)}.progress-bar[data-v-41e6b70f]{width:100%;height:6px;background:var(--border-color);border-radius:var(--radius-full);overflow:hidden}.progress-fill[data-v-41e6b70f]{height:100%;background:var(--brand-main);border-radius:var(--radius-full);transition:width var(--transition-slow)}.progress-text[data-v-41e6b70f]{font-size:var(--font-size-xs);color:var(--text-tertiary);font-weight:500;align-self:center}.retry-btn[data-v-41e6b70f]{background:var(--brand-main);color:var(--text-inverse);border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.retry-btn[data-v-41e6b70f]:hover{background:var(--brand-accent);transform:translateY(-1px);box-shadow:var(--shadow-md)}.loading .status-title[data-v-41e6b70f]{color:var(--brand-main)}.error .status-title[data-v-41e6b70f],.error .status-message[data-v-41e6b70f]{color:var(--danger-color)}.success .status-title[data-v-41e6b70f],.success .status-message[data-v-41e6b70f]{color:var(--success-color)}.brand-footer[data-v-41e6b70f]{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);margin-top:auto}.brand-info[data-v-41e6b70f]{display:flex;align-items:center;gap:var(--spacing-sm)}.brand-logo[data-v-41e6b70f]{height:32px;width:auto}.brand-name[data-v-41e6b70f]{font-size:var(--font-size-lg);font-weight:700;color:var(--brand-main)}.brand-slogan[data-v-41e6b70f]{font-size:var(--font-size-sm);color:var(--text-tertiary);font-weight:500}.debug-info[data-v-41e6b70f]{position:fixed;bottom:var(--spacing-md);right:var(--spacing-md);background:var(--text-primary);color:var(--text-inverse);padding:var(--spacing-sm);border-radius:var(--radius-md);font-size:var(--font-size-xs);max-width:250px;z-index:1000}.debug-title[data-v-41e6b70f]{font-weight:600;margin-bottom:var(--spacing-xs);border-bottom:1px solid var(--border-color);padding-bottom:var(--spacing-xs)}.debug-item[data-v-41e6b70f]{margin-bottom:2px}.debug-item.error[data-v-41e6b70f]{color:#ff6b6b}.debug-item.success[data-v-41e6b70f]{color:#51cf66}@media (max-width: 768px){.oauth-success-view[data-v-41e6b70f]{padding:var(--spacing-lg)}.status-content[data-v-41e6b70f]{padding:var(--spacing-xl)}.status-title[data-v-41e6b70f]{font-size:var(--font-size-xl)}.status-message[data-v-41e6b70f]{font-size:var(--font-size-sm)}.brand-logo[data-v-41e6b70f]{height:28px}.brand-name[data-v-41e6b70f]{font-size:var(--font-size-base)}.debug-info[data-v-41e6b70f]{bottom:var(--spacing-sm);right:var(--spacing-sm);max-width:200px}}@media (max-width: 480px){.oauth-success-view[data-v-41e6b70f]{padding:var(--spacing-md)}.status-content[data-v-41e6b70f]{padding:var(--spacing-lg)}.status-title[data-v-41e6b70f]{font-size:var(--font-size-lg)}.spinner[data-v-41e6b70f]{width:32px;height:32px;border-width:2px}.icon-error[data-v-41e6b70f],.icon-success[data-v-41e6b70f]{font-size:2rem}}.video-container[data-v-bcb6a629]{position:relative;background:#3b3b3b;aspect-ratio:16/9;border-radius:6px;overflow:hidden;z-index:1}.video-container video[data-v-bcb6a629]{width:100%;height:100%;position:relative;z-index:1}.video-container .participant-data[data-v-bcb6a629]{position:absolute;top:0;left:0}.participant-data p[data-v-bcb6a629]{background:#f8f8f8;margin:0;padding:0 5px;color:#777;font-weight:700;border-bottom-right-radius:4px}@media screen and (max-width: 480px){.video-container[data-v-bcb6a629]{aspect-ratio:9/16}}.shared-caption-overlay[data-v-ef76d2be]{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:1000;width:90%;max-width:800px}.caption-container[data-v-ef76d2be]{background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:20px;border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000004d}.caption-header[data-v-ef76d2be]{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:#ffffffe6;font-size:14px;font-weight:500}.caption-icon[data-v-ef76d2be]{font-size:16px}.caption-title[data-v-ef76d2be]{flex:1}.creator-indicator[data-v-ef76d2be]{background:#ffd7004d;padding:2px 8px;border-radius:12px;font-size:12px;color:gold}.caption-toggle-btn[data-v-ef76d2be]{background-color:#3b82f6;color:#fff;padding:6px 12px;border-radius:8px;border:none;cursor:pointer;font-size:12px;font-weight:600;transition:background-color .3s ease;white-space:nowrap}.caption-toggle-btn[data-v-ef76d2be]:hover:not(:disabled){background-color:#2563eb}.caption-toggle-btn[data-v-ef76d2be]:disabled{background-color:#9ca3af;cursor:not-allowed;opacity:.7}.caption-toggle-btn.active[data-v-ef76d2be]{background-color:#ef4444}.error-message[data-v-ef76d2be]{color:#f87171;font-size:12px;text-align:center;margin-top:10px;padding:8px;background-color:#ff00001a;border-radius:8px}.caption-content[data-v-ef76d2be]{display:flex;flex-direction:column;gap:8px}.caption-text[data-v-ef76d2be]{color:#fff;font-size:20px;line-height:1.6;font-weight:500;text-shadow:0 2px 4px rgba(0,0,0,.7);min-height:32px}.confidence-indicator[data-v-ef76d2be]{display:flex;align-items:center;gap:8px}.confidence-bar[data-v-ef76d2be]{flex:1;height:4px;background:#fff3;border-radius:2px;overflow:hidden}.confidence-fill[data-v-ef76d2be]{height:100%;background:linear-gradient(90deg,#10b981,#3b82f6);border-radius:2px;transition:width .3s ease}.confidence-text[data-v-ef76d2be]{font-size:12px;color:#ffffffb3;min-width:30px}.waiting-message[data-v-ef76d2be]{color:#ffffffb3;font-style:italic;text-align:center;padding:8px}.caption-status[data-v-ef76d2be]{font-size:12px;color:#fff9;font-style:italic;margin-top:8px}@media (max-width: 768px){.shared-caption-overlay[data-v-ef76d2be]{width:95%;bottom:10px}.caption-container[data-v-ef76d2be]{padding:12px}.caption-text[data-v-ef76d2be]{font-size:18px}}.audio-recorder-modal[data-v-89af248f]{position:fixed;width:200px;background:#000c;border-radius:12px;color:#fff;box-shadow:0 4px 16px #0000004d;z-index:1000;-webkit-user-select:none;user-select:none;cursor:move}.modal-content[data-v-89af248f]{padding:16px;position:relative}.recorder-controls[data-v-89af248f]{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.record-btn[data-v-89af248f]{padding:10px 20px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:100px}.start-btn[data-v-89af248f]{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.start-btn[data-v-89af248f]:hover{transform:translateY(-2px);box-shadow:0 4px 15px #10b9814d}.pause-btn[data-v-89af248f]{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.pause-btn[data-v-89af248f]:hover{transform:translateY(-2px);box-shadow:0 4px 15px #f59e0b4d}.resume-btn[data-v-89af248f]{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.resume-btn[data-v-89af248f]:hover{transform:translateY(-2px);box-shadow:0 4px 15px #3b82f64d}.summary-btn[data-v-89af248f]{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}.summary-btn[data-v-89af248f]:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #8b5cf64d}.summary-btn[data-v-89af248f]:disabled{opacity:.6;cursor:not-allowed;transform:none}.recording-status[data-v-89af248f]{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px}.status-indicator[data-v-89af248f]{display:flex;align-items:center;gap:6px;font-weight:600;font-size:12px}.recording-dot[data-v-89af248f]{width:6px;height:6px;background:#ef4444;border-radius:50%;animation:pulse-89af248f 1s infinite}.recording-dot.paused[data-v-89af248f]{background:#f59e0b;animation:none}@keyframes pulse-89af248f{0%,to{opacity:1}50%{opacity:.5}}.recording-time[data-v-89af248f]{font-family:monospace;font-size:16px;font-weight:600}.chunk-info[data-v-89af248f]{font-size:11px;opacity:.8}.upload-status[data-v-89af248f],.summary-status[data-v-89af248f]{margin-top:8px}.status-message[data-v-89af248f]{font-size:12px;margin-bottom:6px;text-align:center}.status-message.uploading[data-v-89af248f]{color:#fbbf24}.status-message.success[data-v-89af248f]{color:#10b981}.status-message.error[data-v-89af248f]{color:#ef4444}.progress-bar[data-v-89af248f]{width:100%;height:3px;background:#fff3;border-radius:2px;overflow:hidden}.progress-fill[data-v-89af248f]{height:100%;background:linear-gradient(90deg,#10b981,#059669);transition:width .3s ease}.close-button[data-v-89af248f]{position:absolute;top:6px;right:6px;background:transparent;border:none;color:#fff;font-size:14px;cursor:pointer}.audio-recorder-modal[data-v-89af248f]:active{cursor:grabbing}@media (max-width: 768px){.audio-recorder-modal[data-v-89af248f]{width:180px}}.screen-share-container[data-v-1bd3be85]{display:flex;flex-direction:column;gap:1rem;padding:1rem;background:#000c;border-radius:8px;color:#fff}.screen-share-controls[data-v-1bd3be85]{display:flex;justify-content:center}.screen-share-btn[data-v-1bd3be85]{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:6px;background:#007bff;color:#fff;cursor:pointer;font-size:.9rem;transition:all .2s ease}.screen-share-btn[data-v-1bd3be85]:hover:not(:disabled){background:#0056b3;transform:translateY(-1px)}.screen-share-btn[data-v-1bd3be85]:disabled{opacity:.6;cursor:not-allowed}.screen-share-btn.stop[data-v-1bd3be85]{background:#dc3545}.screen-share-btn.stop[data-v-1bd3be85]:hover{background:#c82333}.btn-icon[data-v-1bd3be85]{font-size:1.2rem}.screen-share-info[data-v-1bd3be85]{display:flex;justify-content:center}.info-badge[data-v-1bd3be85]{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#ffffff1a;border-radius:20px;font-size:.85rem}.info-icon[data-v-1bd3be85]{font-size:1rem}.audio-recorder-container[data-v-08abc108]{position:fixed;top:20px;right:20px;z-index:1000;max-width:400px}.screen-share-section[data-v-08abc108]{width:300px;background:#000c;border-left:1px solid rgba(255,255,255,.1);overflow-y:auto}.control-buttons button.openvidu-btn[data-v-08abc108]{background:#28a745}.control-buttons button.openvidu-btn[data-v-08abc108]:hover{background:#218838}.main-tile.screen-share[data-v-08abc108]{border:3px solid #28a745;box-shadow:0 0 20px #28a7454d;margin-bottom:.5rem}.thumbnail.camera[data-v-08abc108]{border:2px solid #007bff}.video-room-header[data-v-08abc108]{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#477856fc;border-bottom:1px solid rgba(255,255,255,.1);border-radius:12px}.header-info[data-v-08abc108]{display:flex;align-items:center;gap:15px}.header-info h2[data-v-08abc108]{margin:0;color:#fff;font-size:1.5rem}.user-role[data-v-08abc108]{display:flex;gap:10px}.creator-badge[data-v-08abc108],.participant-badge[data-v-08abc108]{padding:5px 10px;border-radius:20px;font-size:.9rem;font-weight:500}.creator-badge[data-v-08abc108]{background:#ffc10733;color:#ffc107;border:1px solid rgba(255,193,7,.3)}.participant-badge[data-v-08abc108]{background:#6c757d33;color:#6c757d;border:1px solid rgba(108,117,125,.3)}.header-controls[data-v-08abc108]{display:flex;gap:10px;align-items:center}.header-controls button[data-v-08abc108]{width:40px;height:40px;border-radius:50%;border:none;background:#ffffff1a;color:#fff;font-size:16px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.header-controls button[data-v-08abc108]:hover{background:#fff3;transform:scale(1.1)}.header-controls button.off[data-v-08abc108]{background:#ffffff0d;opacity:.5}.header-controls button.leave[data-v-08abc108]{background:#dc3545cc}.header-controls button.leave[data-v-08abc108]:hover{background:#dc3545}.control-panel-overlay[data-v-08abc108]{position:fixed;top:0;left:0;width:100%;height:100%;background:#0000004d;z-index:1000;cursor:pointer}.hamburger-btn-fixed[data-v-08abc108]{position:absolute;bottom:10px;right:10px;width:40px;height:40px;background:#000c;border:none;border-radius:50%;color:#fff;font-size:18px;cursor:pointer;z-index:1000;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.hamburger-btn-fixed[data-v-08abc108]:hover{background:#000000e6;transform:scale(1.1)}.control-panel-fixed[data-v-08abc108]{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#000000b3;border-radius:12px;padding:15px;z-index:1001;box-shadow:0 8px 25px #0006;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);display:flex;flex-direction:row;gap:8px;align-items:center;animation:slideInFromCenter-08abc108 .3s ease-out}.control-panel-fixed .control-panel-header[data-v-08abc108]{display:none}.control-panel-fixed .control-buttons[data-v-08abc108]{display:flex;flex-direction:row;gap:8px;align-items:center}.control-panel-fixed .control-buttons button[data-v-08abc108]{width:45px;height:45px;border-radius:50%;border:none;background:#ffffff26;color:#fff;font-size:16px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.control-panel-fixed .control-buttons button[data-v-08abc108]:hover{background:#ffffff40;transform:scale(1.1);box-shadow:0 4px 15px #fff3}.control-panel-fixed .control-buttons button.off[data-v-08abc108]{background:#ffffff14;opacity:.6}.control-panel-fixed .control-buttons button.leave[data-v-08abc108]{background:#dc3545b3}.control-panel-fixed .control-buttons button.leave[data-v-08abc108]:hover{background:#dc3545e6;box-shadow:0 4px 15px #dc35454d}.control-buttons button.active[data-v-08abc108]{background:#dc3545!important;color:#fff;animation:pulse-08abc108 2s infinite}.control-buttons button.active[data-v-08abc108]:hover{background:#c82333!important}@keyframes pulse-08abc108{0%{box-shadow:0 0 #dc3545b3}70%{box-shadow:0 0 0 10px #dc354500}to{box-shadow:0 0 #dc354500}}.loading-layout[data-v-08abc108]{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg-color)}.loading-section[data-v-08abc108]{text-align:center;padding:3rem;background:var(--bg-primary);border-radius:16px;box-shadow:0 8px 32px #0000001a;border:1px solid var(--border-color)}.loading-spinner[data-v-08abc108]{animation:spin-08abc108 1s linear infinite;margin-bottom:1.5rem;color:var(--brand-main)}.loading-section h2[data-v-08abc108]{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:0 0 .5rem}.loading-section p[data-v-08abc108]{font-size:1rem;color:var(--text-secondary);margin:0}@keyframes spin-08abc108{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slideInFromCenter-08abc108{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.exit-modal[data-v-08abc108]{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.exit-modal-content[data-v-08abc108]{background:var(--bg-primary);border-radius:16px;padding:2rem;max-width:500px;width:90%;text-align:center;box-shadow:0 8px 32px #0000004d;border:1px solid var(--border-color);animation:slideInFromCenter-08abc108 .3s ease-out}.exit-modal-content h3[data-v-08abc108]{color:var(--text-primary);font-size:1.5rem;font-weight:600;margin:0 0 1rem}.exit-modal-content p[data-v-08abc108]{color:var(--text-secondary);font-size:1rem;margin:0 0 2rem;line-height:1.5}.exit-modal-buttons[data-v-08abc108]{display:flex;flex-direction:column;gap:1rem;align-items:center}.exit-modal-buttons button[data-v-08abc108]{width:100%;max-width:300px;padding:12px 24px;border:none;border-radius:12px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px}.summary-btn[data-v-08abc108]{background:linear-gradient(135deg,#477856,#5a8a6b);color:#fff;box-shadow:0 4px 15px #4778564d}.summary-btn[data-v-08abc108]:hover{background:linear-gradient(135deg,#5a8a6b,#477856);transform:translateY(-2px);box-shadow:0 6px 20px #47785666}.leave-btn[data-v-08abc108]{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;box-shadow:0 4px 15px #dc35454d}.leave-btn[data-v-08abc108]:hover{background:linear-gradient(135deg,#c82333,#dc3545);transform:translateY(-2px);box-shadow:0 6px 20px #dc354566}.cancel-btn[data-v-08abc108]{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.cancel-btn[data-v-08abc108]:hover{background:var(--bg-tertiary);transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}.mypage-view[data-v-29d74727]{min-height:100vh;background-color:var(--bg-secondary);transition:background-color var(--transition-normal)}.mypage-header[data-v-29d74727]{padding:var(--spacing-2xl) 0;background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--border-color) 100%);transition:background var(--transition-normal)}.header-container[data-v-29d74727]{max-width:1200px;margin:0 auto;padding:0 var(--spacing-xl);display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-2xl);align-items:center}.header-content[data-v-29d74727]{text-align:left}.header-badge[data-v-29d74727]{display:inline-block;background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:var(--text-inverse);font-size:var(--font-size-sm);font-weight:600;padding:8px 16px;border-radius:20px;margin-bottom:var(--spacing-md);text-transform:uppercase;letter-spacing:.5px}.header-title[data-v-29d74727]{font-size:var(--font-size-4xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-md);line-height:1.2;transition:color var(--transition-normal)}.header-title .highlight[data-v-29d74727]{color:var(--brand-main)}.header-description[data-v-29d74727]{font-size:var(--font-size-lg);color:var(--text-secondary);line-height:1.6;transition:color var(--transition-normal)}.header-visual[data-v-29d74727]{display:flex;justify-content:center}.profile-card[data-v-29d74727]{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-card);transition:all var(--transition-normal);border:1px solid var(--border-color)}.profile-card[data-v-29d74727]:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.profile-avatar[data-v-29d74727]{position:relative;width:120px;height:120px;margin:0 auto var(--spacing-lg);border-radius:50%;overflow:hidden;border:4px solid var(--brand-main)}.avatar-image[data-v-29d74727]{width:100%;height:100%;object-fit:cover}.avatar-overlay[data-v-29d74727]{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-normal)}.profile-avatar:hover .avatar-overlay[data-v-29d74727]{opacity:1}.edit-icon[data-v-29d74727]{font-size:24px;color:#fff}.profile-info[data-v-29d74727]{text-align:center}.profile-name[data-v-29d74727]{font-size:var(--font-size-xl);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm);transition:color var(--transition-normal)}.profile-email[data-v-29d74727]{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--spacing-md);transition:color var(--transition-normal)}.profile-role[data-v-29d74727]{display:inline-block}.role-badge[data-v-29d74727]{background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:var(--text-inverse);font-size:var(--font-size-sm);font-weight:600;padding:4px 12px;border-radius:12px}.my-classes-section[data-v-29d74727],.my-joined-classes-section[data-v-29d74727],.my-created-classes-section[data-v-29d74727],.learning-stats-section[data-v-29d74727]{padding:var(--spacing-2xl) 0}.my-classes-section[data-v-29d74727],.my-joined-classes-section[data-v-29d74727],.learning-stats-section[data-v-29d74727]{background-color:var(--bg-secondary)}.my-created-classes-section[data-v-29d74727]{background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--border-color) 100%)}.section-container[data-v-29d74727]{max-width:1200px;margin:0 auto;padding:0 var(--spacing-xl)}.section-header[data-v-29d74727]{text-align:center;margin-bottom:var(--spacing-xl)}.section-title[data-v-29d74727]{font-size:var(--font-size-3xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-md);transition:color var(--transition-normal)}.section-subtitle[data-v-29d74727]{font-size:var(--font-size-lg);color:var(--text-secondary);line-height:1.6;transition:color var(--transition-normal)}.loading-state[data-v-29d74727]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:var(--text-secondary)}.loading-spinner[data-v-29d74727]{animation:spin-29d74727 1s linear infinite;margin-bottom:1rem}@keyframes spin-29d74727{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.activity-list[data-v-29d74727]{display:flex;flex-direction:column;gap:1rem}.horizontal-cards[data-v-29d74727]{display:flex;flex-direction:column;gap:1.5rem}.horizontal-card[data-v-29d74727]{background:var(--bg-card);border-radius:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--border-color);display:flex;gap:2rem;padding:1.5rem;position:relative;overflow:hidden}.horizontal-card[data-v-29d74727]:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-main),var(--brand-sub));opacity:0;transition:opacity .3s ease}.horizontal-card[data-v-29d74727]:hover{transform:translateY(-2px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.horizontal-card[data-v-29d74727]:hover:before{opacity:1}.card-left[data-v-29d74727]{display:flex;gap:1rem;flex:1;min-width:0}.card-icon[data-v-29d74727]{flex-shrink:0;width:60px;height:60px;border-radius:12px;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a}.card-content[data-v-29d74727]{flex:1;display:flex;flex-direction:column;gap:.75rem;min-width:0;justify-content:space-between}.card-title[data-v-29d74727]{font-size:1.125rem;font-weight:700;color:var(--text-primary);margin:0;line-height:1.4;letter-spacing:-.025em}.card-description[data-v-29d74727]{font-size:.875rem;color:var(--text-secondary);margin:0;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}.card-meta[data-v-29d74727]{display:flex;justify-content:space-between;align-items:center;margin-top:auto;margin-bottom:.5rem}.card-time[data-v-29d74727]{font-size:.75rem;color:var(--text-secondary);font-weight:500}.card-status[data-v-29d74727]{font-size:.625rem;font-weight:700;padding:.25rem .75rem;border-radius:9999px;text-transform:uppercase;letter-spacing:.05em}.card-status.completed[data-v-29d74727]{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 2px 4px #10b9814d}.card-actions[data-v-29d74727]{display:flex;gap:.5rem;margin-top:0}.card-right[data-v-29d74727]{flex:1;min-width:300px;max-width:400px}.live-info-section[data-v-29d74727]{background:var(--bg-tertiary);border-radius:12px;padding:1rem;height:100%;display:flex;flex-direction:column;overflow:hidden}.live-info-title[data-v-29d74727]{font-size:.875rem;font-weight:600;color:var(--text-primary);margin:0 0 .75rem;flex-shrink:0}.live-info-list[data-v-29d74727]{display:flex;flex-direction:column;gap:.75rem;flex:1;padding-right:.5rem}.live-info-list.scrollable[data-v-29d74727]{overflow-y:auto;max-height:200px}.live-info-list.scrollable[data-v-29d74727]::-webkit-scrollbar{width:4px}.live-info-list.scrollable[data-v-29d74727]::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:2px}.live-info-list.scrollable[data-v-29d74727]::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}.live-info-list.scrollable[data-v-29d74727]::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.live-info-item[data-v-29d74727]{background:var(--bg-card);border-radius:8px;padding:.75rem;border:1px solid var(--border-color)}.info-header[data-v-29d74727]{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}.info-title[data-v-29d74727]{font-size:.75rem;font-weight:600;color:var(--text-primary);margin:0;line-height:1.4}.info-status[data-v-29d74727]{font-size:.625rem;font-weight:700;padding:.125rem .5rem;border-radius:9999px;text-transform:uppercase;letter-spacing:.05em}.info-status.live[data-v-29d74727]{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.info-status.scheduled[data-v-29d74727]{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.info-status.ended[data-v-29d74727]{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.info-description[data-v-29d74727]{margin-bottom:.5rem}.info-description p[data-v-29d74727]{font-size:.75rem;color:var(--text-secondary);margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.info-meta[data-v-29d74727]{display:flex;gap:.5rem;margin-bottom:.5rem}.meta-date[data-v-29d74727],.meta-time[data-v-29d74727]{font-size:.625rem;color:var(--text-secondary);font-weight:500}.info-files[data-v-29d74727]{margin-top:.5rem}.download-btn[data-v-29d74727]{width:100%;background:linear-gradient(135deg,var(--brand-main),var(--brand-sub));color:#fff;border:none;padding:.5rem .75rem;border-radius:8px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:.25rem}.download-btn[data-v-29d74727]:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.no-live-info[data-v-29d74727]{text-align:center;padding:1rem;color:var(--text-secondary);font-size:.875rem;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.debug-info[data-v-29d74727]{font-size:.75rem;color:var(--text-tertiary);margin-top:.5rem;font-style:italic}.view-details-btn[data-v-29d74727]{background:transparent;color:var(--text-primary);border:2px solid var(--border-color);padding:.5rem .75rem;border-radius:8px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:.25rem}.view-details-btn[data-v-29d74727]:hover{background:var(--bg-tertiary);transform:translateY(-1px)}.activity-card[data-v-29d74727]{background:var(--bg-card);border-radius:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--border-color);cursor:pointer;display:flex;align-items:flex-start;gap:1.25rem;padding:1.5rem;position:relative;overflow:hidden}.activity-card[data-v-29d74727]:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-main),var(--brand-sub));opacity:0;transition:opacity .3s ease}.activity-card[data-v-29d74727]:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.activity-card[data-v-29d74727]:hover:before{opacity:1}.activity-icon[data-v-29d74727]{flex-shrink:0;width:80px;height:80px;border-radius:12px;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a;position:relative}.class-thumbnail[data-v-29d74727]{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.activity-card:hover .class-thumbnail[data-v-29d74727]{transform:scale(1.05)}.activity-content[data-v-29d74727]{flex:1;display:flex;flex-direction:column;gap:.75rem;min-width:0}.activity-title[data-v-29d74727]{font-size:1.125rem;font-weight:700;color:var(--text-primary);margin:0;line-height:1.4;letter-spacing:-.025em}.activity-description[data-v-29d74727]{font-size:.875rem;color:var(--text-secondary);margin:0;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.activity-meta[data-v-29d74727]{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.activity-time[data-v-29d74727]{font-size:.75rem;color:var(--text-secondary);font-weight:500}.activity-status[data-v-29d74727]{font-size:.625rem;font-weight:700;padding:.25rem .75rem;border-radius:9999px;text-transform:uppercase;letter-spacing:.05em}.activity-status.pending[data-v-29d74727]{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 2px 4px #f59e0b4d}.activity-status.completed[data-v-29d74727]{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 2px 4px #10b9814d}.activity-status.in_progress[data-v-29d74727]{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 2px 4px #3b82f64d}.no-classes[data-v-29d74727]{text-align:center;padding:var(--spacing-xl);color:var(--text-tertiary);font-style:italic}.activity-actions[data-v-29d74727]{display:flex;gap:.75rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color)}.invite-buttons[data-v-29d74727]{display:flex;gap:.5rem;width:100%}.accept-invite-btn[data-v-29d74727],.reject-invite-btn[data-v-29d74727]{flex:1;background:transparent;color:var(--text-primary);border:2px solid;padding:.75rem 1rem;border-radius:12px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:.5rem;position:relative;overflow:hidden}.accept-invite-btn[data-v-29d74727]{border-color:#10b981;color:#10b981}.accept-invite-btn[data-v-29d74727]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(16,185,129,.1),transparent);transition:left .5s ease}.accept-invite-btn[data-v-29d74727]:hover:before{left:100%}.accept-invite-btn[data-v-29d74727]:hover{background:#10b981;color:#fff;transform:translateY(-2px);box-shadow:0 8px 25px #10b9814d}.reject-invite-btn[data-v-29d74727]{border-color:#ef4444;color:#ef4444}.reject-invite-btn[data-v-29d74727]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(239,68,68,.1),transparent);transition:left .5s ease}.reject-invite-btn[data-v-29d74727]:hover:before{left:100%}.reject-invite-btn[data-v-29d74727]:hover{background:#ef4444;color:#fff;transform:translateY(-2px);box-shadow:0 8px 25px #ef44444d}.accept-invite-btn[data-v-29d74727]:disabled,.reject-invite-btn[data-v-29d74727]:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.btn-icon[data-v-29d74727]{font-size:1rem;font-weight:700}.btn-text[data-v-29d74727]{font-weight:600}.join-class-btn[data-v-29d74727],.create-class-btn[data-v-29d74727]{width:100%;background:linear-gradient(135deg,var(--brand-main),var(--brand-sub));color:#fff;border:none;padding:.75rem 1rem;border-radius:10px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:.5rem;position:relative;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a}.join-class-btn[data-v-29d74727]:before,.create-class-btn[data-v-29d74727]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.join-class-btn[data-v-29d74727]:hover:before,.create-class-btn[data-v-29d74727]:hover:before{left:100%}.join-class-btn[data-v-29d74727]:hover,.create-class-btn[data-v-29d74727]:hover{transform:translateY(-2px);box-shadow:0 10px 25px #00000026}.create-class-link[data-v-29d74727]{display:inline-block;background:var(--brand-main);color:var(--text-inverse);text-decoration:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;margin-top:var(--spacing-md);transition:all var(--transition-normal)}.create-class-link[data-v-29d74727]:hover{background:var(--brand-sub);transform:translateY(-1px)}.stats-grid[data-v-29d74727]{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-lg)}.stat-card[data-v-29d74727]{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-card);transition:all var(--transition-normal);border:1px solid var(--border-color);display:flex;align-items:center;gap:var(--spacing-lg)}.stat-card[data-v-29d74727]:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.stat-icon[data-v-29d74727]{font-size:2.5rem;width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,var(--brand-main) 0%,var(--brand-sub) 100%);color:#fff}.stat-content[data-v-29d74727]{flex:1}.stat-number[data-v-29d74727]{font-size:var(--font-size-3xl);font-weight:700;color:var(--text-primary);line-height:1;margin-bottom:var(--spacing-xs)}.stat-label[data-v-29d74727]{font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:500}@media (max-width: 768px){.header-container[data-v-29d74727]{grid-template-columns:1fr;gap:var(--spacing-lg);text-align:center}.header-title[data-v-29d74727]{font-size:var(--font-size-3xl)}.activity-list[data-v-29d74727]{gap:.75rem}.activity-card[data-v-29d74727]{flex-direction:column;text-align:center;gap:1rem;padding:1.25rem}.activity-icon[data-v-29d74727]{width:60px;height:60px;align-self:center}.invite-buttons[data-v-29d74727]{flex-direction:column;gap:.5rem}.accept-invite-btn[data-v-29d74727],.reject-invite-btn[data-v-29d74727]{width:100%}.horizontal-card[data-v-29d74727]{flex-direction:column;gap:1rem;padding:1.25rem}.card-left[data-v-29d74727]{flex-direction:column;text-align:center;gap:.75rem}.card-icon[data-v-29d74727]{align-self:center}.card-actions[data-v-29d74727]{flex-direction:column;gap:.5rem}.card-right[data-v-29d74727]{min-width:auto;max-width:none}.live-info-section[data-v-29d74727]{padding:.75rem;max-height:250px}.live-info-list[data-v-29d74727]{max-height:150px}.stats-grid[data-v-29d74727]{grid-template-columns:repeat(2,1fr)}.stat-card[data-v-29d74727]{flex-direction:column;text-align:center;gap:var(--spacing-md)}.stat-icon[data-v-29d74727]{width:50px;height:50px;font-size:2rem}}@media (max-width: 480px){.stats-grid[data-v-29d74727]{grid-template-columns:1fr}.header-title[data-v-29d74727],.section-title[data-v-29d74727]{font-size:var(--font-size-2xl)}}body{margin:0;padding:0;font-family:var(--font-family);background-color:var(--bg-secondary);color:var(--text-primary);transition:background-color var(--transition-normal),color var(--transition-normal)}#app{min-height:100vh}.navbar{display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-xl);height:56px;background-color:var(--bg-primary);border-bottom:1px solid var(--border-color);position:relative;box-shadow:var(--shadow-navbar);transition:background-color var(--transition-normal),border-color var(--transition-normal)}.navbar-left{display:flex;align-items:center;gap:var(--spacing-md)}.navbar-left a{text-decoration:none}.navbar-left span{font-size:var(--font-size-2xl);font-weight:700;color:var(--brand-main);text-decoration:none}.logo{height:45px;width:auto}.navbar-center{display:flex;align-items:center;gap:var(--spacing-lg);flex:1;justify-content:center}.navbar-right{display:flex;align-items:center;gap:var(--spacing-md)}.search-button{background:var(--bg-tertiary);border:1px solid var(--border-color);color:#4a5568;padding:var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;width:100%;height:40px;font-weight:500}.dark-mode .search-button{color:#cbd5e0}.search-button:hover{background:var(--bg-card);border-color:var(--border-dark);color:var(--brand-main)}.class-button{background:var(--bg-tertiary);border:1px solid var(--border-color);color:#4a5568;padding:var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;width:100%;height:40px;font-weight:500;text-decoration:none}.dark-mode .class-button{color:#cbd5e0}.class-button:hover{background:var(--bg-card);border-color:var(--border-dark);color:var(--brand-main)}.dark-mode-button{background:var(--bg-tertiary);border:1px solid var(--border-color);color:#4a5568;padding:var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;width:100%;height:40px;font-weight:500}.dark-mode .dark-mode-button{color:#cbd5e0}.dark-mode-button:hover{background:var(--bg-card);border-color:var(--border-dark);color:var(--brand-main)}.btn{padding:var(--spacing-sm) var(--spacing-lg);border:1px solid var(--border-color)}.btn.login{background:transparent;color:var(--text-primary)}.btn.login:hover{background:var(--bg-tertiary);border-color:var(--border-dark)}.btn.signup{background:var(--brand-main);color:var(--text-inverse)}.btn.signup:hover{background:var(--brand-accent);transform:translateY(-1px);box-shadow:var(--shadow-md)}.desktop-only{display:flex}.mobile-only{display:none}@media (max-width: 1400px){.desktop-only{display:none!important}.mobile-only{display:flex!important}}.hamburger{font-size:24px;background:none;border:none;cursor:pointer;margin-right:8px;color:var(--text-primary)}.sidebar{position:fixed;top:0;left:0;width:80vw;max-width:320px;height:100vh;background:var(--bg-primary);box-shadow:var(--shadow-lg);z-index:3000;display:flex;flex-direction:column;overflow:hidden;transition:background-color var(--transition-normal)}.sidebar-content{flex:1;overflow-y:auto;padding:var(--spacing-xl) var(--spacing-md) var(--spacing-md) var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-lg)}.sidebar-header{position:sticky;top:0;background:var(--bg-primary);z-index:10;padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color);margin-bottom:var(--spacing-sm);transition:background-color var(--transition-normal),border-color var(--transition-normal)}.close-btn{background:var(--bg-tertiary);border:1px solid var(--border-color);color:#4a5568;width:32px;height:32px;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);transition:all var(--transition-normal);font-weight:500}.dark-mode .close-btn{color:#cbd5e0}.close-btn:hover{background:var(--bg-card);border-color:var(--border-dark);color:var(--text-primary)}.sidebar a{color:var(--text-primary);text-decoration:none;padding:var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-normal)}.sidebar a:hover{background:var(--bg-tertiary);color:var(--brand-main)}.sidebar-search{display:flex;align-items:center;gap:var(--spacing-sm);background:var(--bg-tertiary);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);border:none;color:var(--text-primary);font-size:var(--font-size-base);cursor:pointer;transition:background-color var(--transition-normal);margin:var(--spacing-sm) 0}.sidebar-search:hover{background:var(--bg-card);color:var(--brand-main)}.sidebar-class{display:flex;align-items:center;gap:var(--spacing-sm);background:var(--bg-tertiary);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);border:none;color:var(--text-primary);font-size:var(--font-size-base);cursor:pointer;transition:background-color var(--transition-normal);margin:var(--spacing-sm) 0;width:100%;justify-content:center;white-space:nowrap;text-decoration:none}.sidebar-class:hover{background:var(--bg-card);color:var(--brand-main)}.sidebar-dark-mode{display:flex;align-items:center;gap:var(--spacing-sm);background:var(--bg-tertiary);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);border:none;color:var(--text-primary);font-size:var(--font-size-base);cursor:pointer;transition:background-color var(--transition-normal);margin:var(--spacing-sm) 0;width:100%;justify-content:center;white-space:nowrap}.sidebar-dark-mode:hover{background:var(--bg-card);color:var(--brand-main)}.sidebar .btn{margin:var(--spacing-sm) 0;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);text-decoration:none;font-size:var(--font-size-sm);font-weight:500;text-align:center;transition:all var(--transition-normal)}.sidebar .btn.login{background:transparent;color:var(--text-primary);border:1px solid var(--border-color)}.sidebar .btn.login:hover{background:var(--bg-tertiary);border-color:var(--border-dark)}.sidebar .btn.signup{background:var(--brand-main);color:var(--text-inverse);border:1px solid var(--brand-main)}.sidebar .btn.signup:hover{background:var(--brand-accent)}.search-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--bg-overlay);display:flex;align-items:flex-start;justify-content:center;z-index:2000;transition:background-color var(--transition-normal);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer}.search-modal-content{display:flex;align-items:center;margin-top:80px;cursor:default}.search-modal-input{font-size:var(--font-size-xl);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-full);border:1px solid var(--border-color);outline:none;background:var(--bg-primary);color:var(--text-primary);min-width:320px;max-width:90vw;transition:background-color var(--transition-normal),border-color var(--transition-normal),color var(--transition-normal)}.search-modal-input:focus{border-color:var(--brand-main);box-shadow:0 0 0 3px #227a531a}.dark-mode .search-modal-input:focus{box-shadow:0 0 0 3px #4ade8033}.search-modal-btn{margin-left:var(--spacing-sm);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal)}.search-modal-btn:hover{background:var(--bg-tertiary);border-color:var(--border-dark)}@keyframes sidebarIn{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes modalIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.navbar{padding:0 var(--spacing-md)}.navbar-center{display:none}.hamburger{display:flex}.welcome-text,.search-button{display:none}.btn{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}}.user-info{display:flex;align-items:center;gap:var(--spacing-md)}.profile-link{text-decoration:none;display:flex;align-items:center}.profile-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid var(--brand-main);cursor:pointer;transition:all var(--transition-normal);flex-shrink:0}.profile-avatar:hover{transform:scale(1.1);border-color:var(--brand-sub);box-shadow:0 4px 12px #227a534d}.avatar-image{width:100%;height:100%;object-fit:cover}.user-details{display:flex;flex-direction:column;gap:var(--spacing-xs);min-width:0;flex:1}.user-info-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm)}.user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--text-primary);transition:color var(--transition-normal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.user-email{font-size:var(--font-size-xs);color:var(--text-secondary);transition:color var(--transition-normal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.dark-mode .user-name{color:var(--text-primary)}.dark-mode .user-email{color:var(--text-secondary)}.btn.logout{background:transparent;color:var(--text-secondary);border:none;padding:var(--spacing-xs);font-size:var(--font-size-xs);border-radius:var(--radius-sm);transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;cursor:pointer}.btn.logout:hover{background:#f56565;color:#fff;transform:scale(1.05)}.sidebar-user{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-md);border-top:1px solid var(--border-color);margin-top:auto}.sidebar-user .profile-avatar{width:50px;height:50px}.sidebar-user .user-details{width:100%}.sidebar-user .user-name{font-size:var(--font-size-base);max-width:none}.sidebar-user .user-email{font-size:var(--font-size-sm);max-width:none}.sidebar-user .user-info-row{margin-bottom:var(--spacing-xs)}@media (max-width: 768px){.user-info{gap:var(--spacing-sm)}.profile-avatar{width:35px;height:35px}.user-details{gap:2px}.user-name{font-size:var(--font-size-xs);max-width:80px}.user-email{font-size:10px;max-width:80px}.btn.logout{padding:4px;min-width:28px;height:28px}.btn.logout svg{width:14px;height:14px}}.modal-overlay[data-v-233c7d22]{position:fixed;inset:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:999}.modal-content[data-v-233c7d22]{background:#fff;color:#333;padding:20px;border-radius:12px;width:600px;text-align:center;max-height:80vh;overflow-y:auto}.modal-content.dark[data-v-233c7d22]{background:#1f1f1f;color:#f2f2f2}.member-list[data-v-233c7d22]{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}.member-item[data-v-233c7d22]{display:flex;flex-direction:column;align-items:center;background:#f8f8f8;padding:10px;border-radius:10px}.member-item.dark[data-v-233c7d22]{background:#2c2c2c}.member-item img[data-v-233c7d22]{width:100px;height:100px;border-radius:50%}.name[data-v-233c7d22]{margin:10px 0 5px;font-weight:700}.heart[data-v-233c7d22]{margin-bottom:8px;font-size:16px}.report-btn[data-v-233c7d22]{background:#e74c3c;color:#fff;padding:6px 10px;border:none;border-radius:6px;cursor:pointer}.report-overlay[data-v-233c7d22]{position:fixed;inset:0;background:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.report-content[data-v-233c7d22]{background:#fff;padding:20px;border-radius:10px;width:400px;text-align:center}.report-content h3[data-v-233c7d22]{font-size:20px;font-weight:700;color:#333;margin-bottom:10px;opacity:1}.report-content textarea[data-v-233c7d22]{width:100%;height:80px;margin:10px 0;padding:8px}.report-content .btns[data-v-233c7d22]{display:flex;justify-content:space-between}.report-content button[data-v-233c7d22]{flex:1;margin:5px;padding:8px;border:none;border-radius:6px;cursor:pointer}.report-content button.cancel[data-v-233c7d22]{background:#ccc}.report-content button[data-v-233c7d22]:not(.cancel){background:#e74c3c;color:#fff}.report-target[data-v-233c7d22]{font-weight:700;font-size:18px;margin-bottom:10px;color:#e74c3c}:root{--brand-main: #227a53;--brand-sub: #b3f0c7;--brand-accent: #27ae60;--primary-color: #227a53;--primary-hover: #27ae60;--success-color: #10b981;--danger-color: #ef4444;--disabled-color: #9ca3af;--bg-primary: #ffffff;--bg-secondary: #fafafd;--bg-tertiary: #f8fafc;--bg-card: #ffffff;--bg-overlay: rgba(0, 0, 0, .5);--bg-color: #ffffff;--card-bg: #ffffff;--input-bg: #fafafd;--text-primary: #1a202c;--text-secondary: #4a5568;--text-tertiary: #718096;--text-inverse: #ffffff;--text-color: #1a202c;--border-color: #e2e8f0;--border-light: #f1f5f9;--border-dark: #cbd5e1;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--shadow-card: 0 8px 32px rgba(0, 0, 0, .1);--shadow-navbar: 0 2px 8px rgba(0, 0, 0, .08);--shadow-color: rgba(0, 0, 0, .1);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-base: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 32px;--font-size-4xl: 48px;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}.dark-mode{--brand-main: #4ade80;--brand-sub: #22c55e;--brand-accent: #16a34a;--primary-color: #4ade80;--primary-hover: #22c55e;--success-color: #10b981;--danger-color: #ef4444;--disabled-color: #6b7280;--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--bg-card: #1e293b;--bg-overlay: rgba(0, 0, 0, .7);--bg-color: #0f172a;--card-bg: #1e293b;--input-bg: #1e293b;--text-primary: #f7fafc;--text-secondary: #e2e8f0;--text-tertiary: #cbd5e0;--text-inverse: #0f172a;--text-color: #f7fafc;--border-color: #334155;--border-light: #475569;--border-dark: #64748b;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .3);--shadow-card: 0 8px 32px rgba(0, 0, 0, .4);--shadow-navbar: 0 2px 8px rgba(0, 0, 0, .2);--shadow-color: rgba(0, 0, 0, .4)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);line-height:1.6;color:var(--text-primary);background-color:var(--bg-secondary);transition:background-color var(--transition-normal),color var(--transition-normal)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;text-decoration:none;border:none;cursor:pointer;transition:all var(--transition-normal)}.btn-primary{background:var(--brand-main);color:var(--text-inverse)}.btn-primary:hover{background:var(--brand-accent);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-card);border-color:var(--border-dark)}.input{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:var(--font-size-base);background:var(--bg-primary);color:var(--text-primary);transition:all var(--transition-normal)}.input:focus{outline:none;border-color:var(--brand-main);box-shadow:0 0 0 3px #227a531a}.dark-mode .input:focus{box-shadow:0 0 0 3px #4ade8033}.card{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);border:1px solid var(--border-color);transition:all var(--transition-normal)}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.section{padding:var(--spacing-2xl) 0;background:var(--bg-primary)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--border-dark)}::selection{background:var(--brand-sub);color:var(--text-inverse)}*:focus-visible{outline:2px solid var(--brand-main);outline-offset:2px}