.att-page{padding:20px 24px;width:100%;min-height:100%;position:relative}.att-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:300px;color:#9ca3af;font-size:14px}.att-spinner{width:32px;height:32px;border:3px solid #e5e7eb;border-top-color:#00aeef;border-radius:50%;animation:att-spin .8s linear infinite}@keyframes att-spin{to{transform:rotate(360deg)}}.att-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;text-align:center}.att-empty p{font-size:14px;color:#6b7280;max-width:400px;margin:0;line-height:1.5}.att-group-tabs{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}.att-group-tab{display:inline-flex;align-items:center;gap:7px;padding:6px 16px;border-radius:20px;border:1.5px solid #e5e7eb;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s ease;background:#fff;color:#374151;white-space:nowrap}.att-group-tab:hover{filter:brightness(.96)}.att-group-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.att-session-tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid #e5e7eb}.att-session-tab{display:inline-flex;align-items:center;padding:8px 16px;border:none;background:none;font-size:13px;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s ease;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}.att-session-tab:hover{color:#374151}.att-session-tab--active{color:#2563eb;border-bottom-color:#2563eb;font-weight:600}.att-grid-container{background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}.att-grid-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #f3f4f6}.att-breadcrumb{font-size:13px;font-weight:500;color:#374151}.att-student-count{font-size:12px;color:#9ca3af;font-weight:400}.att-table-wrap{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.att-table-wrap::-webkit-scrollbar{height:5px}.att-table-wrap::-webkit-scrollbar-track{background:#f3f4f6}.att-table-wrap::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.att-table-wrap::-webkit-scrollbar-thumb:hover{background:#9ca3af}.att-table{width:100%;border-collapse:separate;border-spacing:0;min-width:max-content}.att-table thead{position:sticky;top:0;z-index:10}.att-th-week{position:sticky;left:0;z-index:12;background:#fff;padding:14px 18px;text-align:left;font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #e5e7eb;min-width:160px;white-space:nowrap}.att-th-student{background:#fff;padding:14px 10px;text-align:center;font-size:12px;font-weight:600;color:#1f2937;border-bottom:1px solid #e5e7eb;min-width:120px;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.att-td-week{position:sticky;left:0;z-index:5;background:#fff;padding:10px 18px;border-bottom:1px solid #f3f4f6;min-width:160px;white-space:nowrap;vertical-align:center}.att-week-label{display:block;font-size:13px;font-weight:700;color:#1f2937;line-height:1.3}.att-week-date{display:block;font-size:10px;color:#9ca3af;margin-top:1px;font-weight:400}.att-td-cell{padding:6px 8px;text-align:center;border-bottom:1px solid #f3f4f6;vertical-align:middle}.att-td-cell--expected{background:#fffdf5}.att-cell{width:40px;height:40px;border-radius:8px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s ease;margin:0 auto;background:transparent;position:relative}.att-cell:hover{transform:scale(1.12)}.att-cell:active{transform:scale(.95)}.att-cell-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;line-height:1}.att-cell-icon--green{background:#22c55e;color:#fff;box-shadow:0 1px 4px #22c55e4d}.att-cell-icon--red{background:#ef4444;color:#fff;box-shadow:0 1px 4px #ef44444d}.att-cell-icon--amber{background:transparent;border:2px dashed #d4a017;color:#d4a017;font-size:13px;font-weight:600}.att-cell-dash{color:#c4c8cf;font-size:16px;font-weight:400;line-height:1}.att-legend{display:flex;align-items:center;gap:24px;padding:12px 18px;border-top:1px solid #f3f4f6}.att-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:#6b7280;white-space:nowrap}.att-legend-icon{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;flex-shrink:0}.att-legend-icon--green{background:#22c55e;color:#fff}.att-legend-icon--red{background:#ef4444;color:#fff}.att-legend-icon--amber{background:transparent;border:1.5px dashed #d4a017;color:#d4a017;font-size:9px}.att-legend-dash{color:#c4c8cf;font-size:14px;font-weight:400;width:18px;text-align:center;flex-shrink:0}.att-toast{position:fixed;top:20px;right:20px;padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;z-index:1000;animation:att-toast-in .2s ease;box-shadow:0 4px 12px #0000001f}.att-toast-success{background:#dcfce7;color:#16a34a;border:1px solid #bbf7d0}.att-toast-error{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}@keyframes att-toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.att-table tbody tr:hover .att-td-week,.att-table tbody tr:hover .att-td-cell{background:#fafbfc}.att-table tbody tr:hover .att-td-cell--expected{background:#fefcf0}.att-no-access{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 32px;max-width:480px;margin:60px auto 0}.att-no-access-icon{width:80px;height:80px;border-radius:50%;background:#fef2f2;display:flex;align-items:center;justify-content:center;margin-bottom:24px}.att-no-access-title{font-size:22px;font-weight:700;color:#1f2937;margin-bottom:12px}.att-no-access-text{font-size:15px;color:#4b5563;line-height:1.6;margin-bottom:8px}.att-no-access-text strong{color:#1f2937}.att-no-access-subtext{font-size:13px;color:#9ca3af;line-height:1.6;margin-bottom:20px}.att-no-access-hint{font-size:13px;color:#6b7280;background:#f3f4f6;border-radius:8px;padding:12px 20px;line-height:1.5}@keyframes att-spin-anim{0%{transform:rotate(0)}to{transform:rotate(360deg)}}