: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-wrapper{position:relative;margin-bottom:1.5rem}.tab-container{display:flex;overflow-x:auto;border-bottom:2px solid var(--color-border);gap:.5rem;padding-bottom:4px;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;-webkit-overflow-scrolling:touch}.tab-container::-webkit-scrollbar{height:5px}.tab-container::-webkit-scrollbar-track{background:#00000008;border-radius:4px}.tab-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.tab-container::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.tab-scroll-hint-fade{position:absolute;top:0;right:0;bottom:6px;width:36px;background:linear-gradient(to right,#f3f4f600,#f3f4f6f2);pointer-events:none;border-radius:0 4px 4px 0}.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}.screenshot-placeholder{border:2px dashed #cbd5e1;background-color:#f8fafc;border-radius:10px;padding:1.25rem 1rem;text-align:center;margin:1rem 0;transition:border-color .2s ease,background-color .2s ease}.screenshot-placeholder:hover{border-color:var(--color-primary);background-color:#f1f5f9}.screenshot-placeholder .placeholder-icon{font-size:1.75rem;margin-bottom:.25rem}.screenshot-placeholder .placeholder-title{font-weight:700;font-size:.95rem;color:#1e293b}.screenshot-placeholder .placeholder-desc{font-size:.825rem;color:#64748b;margin-top:.35rem;line-height:1.4}.guide-step{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1.25rem}.guide-step-num{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;background-color:var(--color-primary);color:#fff;font-weight:700;font-size:.875rem;display:flex;align-items:center;justify-content:center}.guide-step-content{flex-grow:1}.sub-tab-btn{padding:.5rem 1rem;font-size:.875rem;font-weight:600;border-radius:6px;border:1px solid var(--color-border);background-color:#fff;color:var(--color-text-muted);cursor:pointer;transition:all .15s ease}.sub-tab-btn.active{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}