:root{--color-primary: #4f46e5;--color-primary-hover: #4338ca;--color-primary-light: #e0e7ff;--color-success: #10b981;--color-success-hover: #059669;--color-success-light: #d1fae5;--color-danger: #ef4444;--color-danger-light: #fee2e2;--color-warning: #f59e0b;--color-warning-light: #fef3c7;--color-bg-muted: #f3f4f6;--color-border: #e5e7eb;--color-text: #1f2937;--color-text-muted: #4b5563}.attendance-container{max-width:900px;margin:0 auto;padding:1.5rem 1rem}.card{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000006;border:1px solid var(--color-border);padding:1.5rem;margin-bottom:1.5rem;transition:transform .2s ease,box-shadow .2s ease}.card-title{font-size:1.25rem;font-weight:700;color:var(--color-text);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.tab-container{display:flex;overflow-x:auto;border-bottom:2px solid var(--color-border);margin-bottom:1.5rem;gap:.5rem;scrollbar-width:none}.tab-container::-webkit-scrollbar{display:none}.tab-btn{padding:.75rem 1rem;font-weight:600;font-size:.95rem;color:var(--color-text-muted);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all .2s ease}.tab-btn:hover{color:var(--color-primary)}.tab-btn.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.timetable-wrapper{overflow-x:auto;margin-top:1rem;border-radius:8px;border:1px solid var(--color-border)}.timetable-table{width:100%;border-collapse:collapse;text-align:center;font-size:.9rem;min-width:650px}.timetable-table th,.timetable-table td{border:1px solid var(--color-border);padding:.75rem .5rem}.timetable-table th{background-color:var(--color-bg-muted);font-weight:600;color:var(--color-text)}.timetable-table td.period-label{font-weight:700;background-color:var(--color-bg-muted);width:80px}.timetable-input{width:100%;padding:.5rem;border:1px solid transparent;border-radius:4px;text-align:center;font-size:.9rem;transition:all .15s ease}.timetable-input:focus{border-color:var(--color-primary);background-color:#fff;box-shadow:0 0 0 3px var(--color-primary-light);outline:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;font-weight:600;font-size:.875rem;padding:.5rem 1rem;border-radius:6px;transition:all .15s ease;cursor:pointer}.btn-primary{background-color:var(--color-primary);color:#fff;border:1px solid transparent}.btn-primary:hover{background-color:var(--color-primary-hover)}.btn-secondary{background-color:#fff;color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:var(--color-bg-muted)}.btn-danger{background-color:var(--color-danger);color:#fff;border:1px solid transparent}.btn-danger:hover{background-color:#dc2626}.btn-success{background-color:var(--color-success);color:#fff;border:1px solid transparent}.btn-success:hover{background-color:var(--color-success-hover)}.btn-sm{padding:.25rem .5rem;font-size:.75rem;border-radius:4px}.badge{display:inline-flex;align-items:center;padding:.125rem .5rem;font-size:.75rem;font-weight:600;border-radius:9999px}.badge-primary{background-color:var(--color-primary-light);color:var(--color-primary)}.badge-success{background-color:var(--color-success-light);color:var(--color-success-hover)}.badge-danger{background-color:var(--color-danger-light);color:#dc2626}.badge-warning{background-color:var(--color-warning-light);color:var(--color-warning)}.form-group{margin-bottom:1rem}.form-group label{display:block;font-size:.875rem;font-weight:600;color:var(--color-text-muted);margin-bottom:.375rem}.form-input{width:100%;padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:6px;font-size:.95rem;transition:all .15s ease;background-color:#fff}.form-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light);outline:none}.time-input{width:100%;min-width:0;flex:1 1 0%;padding:.25rem .125rem!important;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem;text-align:center}.timeline-item{position:relative;padding-left:1.5rem;padding-bottom:1.5rem;border-left:2px solid var(--color-border)}.timeline-item:last-child{border-bottom-color:transparent}.timeline-dot{position:absolute;left:-5px;top:26px;width:8px;height:8px;border-radius:50%;background-color:var(--color-border)}.timeline-dot.active{background-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.timeline-dot.completed{background-color:var(--color-success)}.search-highlight{background-color:#fef08a;padding:.125rem .25rem;border-radius:2px}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .2s ease-out forwards}