.navbar{background-color:#ffffffeb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1.5px solid var(--card-border);height:70px;position:sticky;top:0;z-index:100;box-shadow:0 4px 20px #0ea5e90f}.navbar-container{max-width:1280px;margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;justify-content:space-between}.navbar-brand{display:flex;align-items:center;gap:14px}.navbar-logo-icon{width:42px;height:42px;border-radius:var(--radius-md);background:var(--color-primary-gradient);color:var(--text-white);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;box-shadow:0 6px 14px #0284c74d}.navbar-brand-name{font-size:20px;font-weight:900;color:var(--text-heading);letter-spacing:-.5px}.navbar-cohort-badge{display:inline-flex;align-items:center;gap:6px;background-color:var(--color-primary-light);color:var(--color-primary-hover);border:1.5px solid var(--card-border);padding:6px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:700}.navbar-actions{display:flex;align-items:center;gap:16px}.navbar-user-points{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#fffbeb,#fef3c7);border:1.5px solid #fde68a;color:#b45309;padding:6px 14px;border-radius:var(--radius-full);font-weight:800;font-size:14px;box-shadow:0 4px 10px #f59e0b26}.navbar-profile-menu{position:relative}.navbar-avatar-btn{display:flex;align-items:center;gap:10px;background:transparent;padding:6px 10px;border-radius:var(--radius-lg);transition:var(--transition-fast)}.navbar-avatar-btn:hover{background-color:var(--color-primary-light)}.navbar-avatar{width:40px;height:40px;border-radius:50%;background:var(--color-accent-gold-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;box-shadow:0 4px 12px #f59e0b4d}.navbar-user-info{text-align:left}.navbar-user-name{font-size:14px;font-weight:800;color:var(--text-heading)}.navbar-user-role{font-size:12px;color:var(--text-muted)}.navbar-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:240px;background-color:var(--card-bg);border:1.5px solid var(--card-border);border-radius:var(--radius-xl);box-shadow:0 15px 35px #0000001f;padding:10px;z-index:200;animation:fadeIn .15s ease-out}.navbar-dropdown-header{padding:10px 12px;border-bottom:1px solid var(--card-border);margin-bottom:6px}.navbar-dropdown-student-no{font-size:13px;font-weight:700;color:var(--color-primary)}.navbar-dropdown-item{width:100%;padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text-body);border-radius:var(--radius-md);background:transparent;transition:var(--transition-fast)}.navbar-dropdown-item:hover{background-color:var(--color-primary-light);color:var(--color-primary)}.navbar-dropdown-item-danger{color:var(--color-danger)}.navbar-dropdown-item-danger:hover{background-color:var(--color-danger-bg);color:var(--color-danger)}@media(max-width:768px){.navbar-container{padding:0 14px}.navbar-cohort-badge{display:none}.navbar-brand-name{font-size:17px}.navbar-user-info{display:none}.navbar-actions{gap:8px}.navbar-user-points{padding:4px 10px;font-size:12px}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-size:15px;font-weight:700;border-radius:var(--radius-md);transition:var(--transition-fast);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none}.btn-primary{background:var(--color-primary-gradient);color:var(--text-white);box-shadow:0 6px 16px #0284c740}.btn-primary:hover:not(:disabled){transform:translateY(-2px) scale(1.02);box-shadow:0 10px 22px #0284c759}.btn-primary:active:not(:disabled){transform:translateY(0) scale(.98)}.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn-secondary{background-color:var(--color-primary-light);color:var(--color-primary)}.btn-secondary:hover:not(:disabled){background-color:#bae6fd;transform:translateY(-2px)}.btn-outline{background-color:transparent;border:2px solid var(--card-border);color:var(--text-subheading)}.btn-outline:hover:not(:disabled){border-color:var(--color-primary);background-color:var(--color-primary-light)}.btn-success{background-color:var(--color-success);color:var(--text-white);box-shadow:0 6px 16px #10b98140}.btn-success:hover:not(:disabled){background-color:#059669;transform:translateY(-2px) scale(1.02)}.btn-danger{background-color:var(--color-danger);color:var(--text-white)}.btn-danger:hover:not(:disabled){background-color:#dc2626}.btn-sm{padding:8px 16px;font-size:13px;border-radius:var(--radius-sm)}.btn-lg{padding:16px 32px;font-size:17px;border-radius:var(--radius-lg)}.card{background-color:var(--card-bg);border:1.5px solid var(--card-border);border-radius:var(--radius-xl);box-shadow:var(--card-shadow);padding:28px;transition:var(--transition-normal)}.card:hover{border-color:var(--card-border-hover);box-shadow:var(--card-shadow-hover)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.card-title{font-size:20px;font-weight:800;color:var(--text-heading);display:flex;align-items:center;gap:10px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0f172a8c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .2s ease-out}.modal-container{background-color:var(--card-bg);border-radius:var(--radius-xl);box-shadow:0 25px 50px -12px #00000040;width:100%;max-width:540px;overflow:hidden;animation:modalPop .3s cubic-bezier(.34,1.56,.64,1)}.modal-header{padding:20px 24px;background-color:var(--bg-primary);border-bottom:1px solid var(--card-border);display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:18px;font-weight:800;color:var(--text-heading)}.modal-close-btn{background:transparent;color:var(--text-muted);font-size:22px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.modal-close-btn:hover{background-color:var(--color-danger-bg);color:var(--color-danger)}.modal-body{padding:24px}.modal-footer{padding:16px 24px;background-color:var(--input-bg);border-top:1px solid var(--card-border);display:flex;align-items:center;justify-content:flex-end;gap:12px}.celebration-modal{background:linear-gradient(180deg,#fff,#fefce8 60%,#e0f2fe);border:4px solid #fde047;text-align:center;position:relative;overflow:hidden;padding:32px 24px}.celebration-badge-icon{font-size:84px;margin:16px 0;display:inline-block;animation:badgePopBounce 1.2s infinite ease-in-out;filter:drop-shadow(0 12px 24px rgba(245,158,11,.4))}.celebration-title{font-size:26px;font-weight:900;color:#b45309;margin-bottom:10px}.celebration-desc{font-size:16px;color:var(--text-body);margin-bottom:24px;line-height:1.6}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px}.badge-card{background-color:var(--card-bg);border:2px solid var(--card-border);border-radius:var(--radius-lg);padding:16px;text-align:center;transition:var(--transition-fast);display:flex;flex-direction:column;align-items:center;gap:8px}.badge-card:hover{transform:translateY(-4px);border-color:var(--color-primary)}.badge-card.unlocked{background:linear-gradient(180deg,#fff,#fef3c7);border-color:#fde68a;box-shadow:0 8px 20px #f59e0b26}.badge-card.locked{opacity:.6;filter:grayscale(80%);background-color:#f8fafc}.badge-icon{font-size:40px}.badge-name{font-size:14px;font-weight:800;color:var(--text-heading)}.badge-desc{font-size:11px;color:var(--text-muted);line-height:1.4}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalPop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes badgePopBounce{0%,to{transform:translateY(0) scale(1) rotate(0)}50%{transform:translateY(-14px) scale(1.15) rotate(4deg)}}.form-group{margin-bottom:20px}.form-label{display:block;font-size:14px;font-weight:700;color:var(--text-heading);margin-bottom:8px}.form-input,.form-select,.form-textarea{width:100%;padding:12px 16px;border:2px solid var(--input-border);border-radius:var(--radius-md);background-color:var(--input-bg);color:var(--input-text);font-size:15px;transition:var(--transition-fast)}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--input-focus);box-shadow:0 0 0 4px #38bdf833;background-color:#fff}.form-textarea{min-height:100px;resize:vertical}.status-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-full);font-size:13px;font-weight:700}.status-pill-success{background-color:var(--color-success-bg);color:var(--color-success)}.status-pill-warning{background-color:var(--color-warning-bg);color:var(--color-warning)}.status-pill-info{background-color:var(--color-primary-light);color:var(--color-primary)}.status-pill-danger{background-color:var(--color-danger-bg);color:var(--color-danger)}.admin-container{max-width:1100px;margin:16px auto 32px;padding:0 24px}.admin-header{margin-bottom:12px}.admin-title-row{display:flex;align-items:center;justify-content:space-between}.admin-main-title{font-size:22px;font-weight:800;color:var(--text-heading)}.admin-subtitle{font-size:13px;color:var(--text-muted);margin-top:2px}.admin-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.stat-card{background-color:var(--card-bg);border:1.5px solid var(--card-border);border-radius:var(--radius-md);padding:10px 14px;display:flex;align-items:center;gap:12px;box-shadow:var(--card-shadow);transition:var(--transition-fast)}.stat-card:hover{transform:translateY(-2px);border-color:var(--color-primary)}.stat-icon-wrapper{width:36px;height:36px;border-radius:10px;background-color:var(--color-primary-light);color:var(--color-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-content{display:flex;flex-direction:column}.stat-value{font-size:20px;font-weight:900;color:var(--text-heading);line-height:1.1}.stat-label{font-size:12px;color:var(--text-muted);font-weight:600}.admin-tabs{display:flex;gap:10px;border-bottom:2px solid var(--card-border);margin-bottom:20px;padding-bottom:2px}.admin-tab-item{padding:10px 18px;border:none;background:none;font-size:14px;font-weight:700;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-md) var(--radius-md) 0 0;display:flex;align-items:center;gap:8px;transition:var(--transition-fast);position:relative}.admin-tab-item:hover{color:var(--color-primary-hover);background-color:var(--color-primary-light)}.admin-tab-item.active{color:var(--color-primary);background-color:var(--color-primary-light)}.admin-tab-item.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:3px;background:var(--color-primary);border-radius:3px 3px 0 0}.invite-code-pill{background-color:var(--color-primary-light);color:var(--color-primary-hover);font-family:monospace;font-weight:800;font-size:15px;padding:4px 10px;border-radius:var(--radius-sm);letter-spacing:1px;display:inline-flex;align-items:center;gap:6px}.data-table-wrapper{background-color:var(--card-bg);border:1.5px solid var(--card-border);border-radius:var(--radius-lg);overflow-x:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--card-shadow)}.data-table{width:100%;min-width:600px;border-collapse:collapse;text-align:left}.data-table th{background-color:#f8fafc;padding:12px 16px;font-size:13px;font-weight:700;color:var(--text-muted);border-bottom:1.5px solid var(--card-border)}.data-table td{padding:14px 16px;font-size:14px;color:var(--text-body);border-bottom:1px solid var(--card-border)}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover{background-color:#f8fafc}.status-pill{display:inline-block;padding:4px 10px;border-radius:var(--radius-full);font-size:12px;font-weight:700}.status-pill-success{background-color:#dcfce7;color:#15803d}.status-pill-info{background-color:#e0f2fe;color:#0369a1}.status-pill-warning{background-color:#fef3c7;color:#b45309}.status-pill-danger{background-color:#ffe4e6;color:#be123c}.badge-builder-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:24px}@media(max-width:900px){.admin-stats-grid{grid-template-columns:repeat(2,1fr)}.admin-tabs{overflow-x:auto;white-space:nowrap;padding-bottom:6px}.badge-builder-grid{grid-template-columns:1fr}}@media(max-width:600px){.admin-container{padding:0 12px;margin:12px auto}.admin-stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}.stat-card{padding:8px 10px}.stat-value{font-size:18px}}.student-container{max-width:1000px;margin:28px auto;padding:0 24px}.archive-banner{background:linear-gradient(135deg,#fef2f2,#ffe4e6);border:2px solid #fecdd3;color:#9f1239;padding:16px 24px;border-radius:var(--radius-xl);margin-bottom:24px;display:flex;align-items:center;gap:14px;font-weight:700;box-shadow:0 6px 16px #e11d481a}.makeup-notice-banner{background:linear-gradient(135deg,#eff6ff,#e0f2fe);border:1.5px solid #bae6fd;color:#0369a1;padding:14px 20px;border-radius:var(--radius-lg);margin-bottom:20px;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600}.future-notice-banner{background:linear-gradient(135deg,#fffbeb,#fef3c7);border:1.5px solid #fde68a;color:#b45309;padding:14px 20px;border-radius:var(--radius-lg);margin-bottom:20px;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700}.calendar-strip-wrapper{background-color:var(--card-bg);border:1.5px solid var(--card-border);border-radius:var(--radius-xl);padding:10px 16px;margin-bottom:16px;box-shadow:var(--card-shadow)}.calendar-strip-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.calendar-title{font-size:15px;font-weight:800;color:var(--text-heading);display:flex;align-items:center;gap:6px}.calendar-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}.calendar-day-item{flex:1;min-width:60px;padding:6px 8px;background-color:var(--bg-primary);border:2px solid var(--card-border);border-radius:var(--radius-md);text-align:center;cursor:pointer;transition:var(--transition-fast);display:flex;flex-direction:column;align-items:center;gap:2px}.calendar-day-item:hover{border-color:var(--color-primary);background-color:var(--color-primary-light);transform:translateY(-2px)}.calendar-day-item.active{background:var(--color-primary-gradient);border-color:var(--color-primary);color:var(--text-white);box-shadow:0 6px 14px #0284c74d}.calendar-day-item.active .calendar-day-name,.calendar-day-item.active .calendar-day-number{color:var(--text-white)}.calendar-day-name{font-size:11px;font-weight:700;color:var(--text-muted)}.calendar-day-number{font-size:14px;font-weight:900;color:var(--text-heading)}.calendar-status-dot{width:9px;height:9px;border-radius:50%;margin-top:3px;display:inline-block}.calendar-status-completed{background-color:#10b981;box-shadow:0 0 6px #10b98199}.calendar-status-missing{background-color:#ef4444;box-shadow:0 0 6px #ef444499}.calendar-status-future{background-color:#f59e0b;box-shadow:0 0 6px #f59e0b99}.task-accordion-card{background-color:var(--card-bg);border:1.5px solid var(--card-border);border-radius:var(--radius-xl);margin-bottom:20px;overflow:hidden;box-shadow:var(--card-shadow);transition:var(--transition-normal)}.task-accordion-card:hover{border-color:var(--card-border-hover);box-shadow:var(--card-shadow-hover)}.task-accordion-header{padding:22px 28px;background-color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:space-between;-webkit-user-select:none;user-select:none}.task-title-group{display:flex;align-items:center;gap:14px}.task-day-badge{background-color:var(--color-primary-light);color:var(--color-primary-hover);font-weight:900;font-size:14px;padding:6px 14px;border-radius:var(--radius-full)}.task-main-title{font-size:18px;font-weight:800;color:var(--text-heading)}.task-accordion-content{padding:0 28px 28px;border-top:1px solid var(--card-border);background-color:#fff;animation:fadeIn .25s ease-out}.netdisk-card{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:1.5px solid #a7f3d0;border-radius:var(--radius-lg);padding:18px 22px;margin:20px 0;display:flex;align-items:center;justify-content:space-between}.netdisk-info{display:flex;align-items:center;gap:12px}.netdisk-icon{font-size:28px}.netdisk-title{font-weight:800;color:#065f46;font-size:15px}.netdisk-subtitle{font-size:12px;color:#047857}.checklist-group{margin:20px 0}.checklist-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background-color:var(--bg-primary);border:1.5px solid var(--card-border);border-radius:var(--radius-md);margin-bottom:10px;cursor:pointer;transition:var(--transition-fast)}.checklist-item:hover{background-color:var(--color-primary-light);border-color:var(--color-primary)}.checklist-checkbox{width:20px;height:20px;accent-color:var(--color-primary);cursor:pointer}.checklist-text{font-size:15px;font-weight:600;color:var(--text-body)}.photo-upload-zone{border:2.5px dashed var(--color-primary);border-radius:var(--radius-xl);padding:36px 24px;text-align:center;background-color:var(--color-primary-light);cursor:pointer;transition:var(--transition-fast);margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box}.photo-upload-zone:hover{background-color:#bae6fd;transform:translateY(-2px)}.photo-upload-icon{width:48px;height:48px;color:var(--color-primary);margin:0 auto}.photo-preview-box{position:relative;margin:20px auto;max-width:360px;text-align:center}.photo-preview-img{width:100%;max-height:280px;object-fit:cover;border-radius:var(--radius-md);border:3px solid var(--color-primary);box-shadow:var(--card-shadow)}:root{--bg-primary: #f8fafc;--bg-secondary: #f0fdf4;--bg-warm-tint: #fefce8;--bg-gradient: linear-gradient(180deg, #f8fafc 0%, #f0fdf4 100%);--card-bg: #ffffff;--card-border: #e2e8f0;--card-border-hover: #bae6fd;--card-shadow: 0 10px 25px -5px rgba(14, 165, 233, .08);--card-shadow-hover: 0 18px 32px -8px rgba(14, 165, 233, .15);--text-heading: #0f172a;--text-subheading: #0369a1;--text-body: #1e293b;--text-muted: #64748b;--text-light: #94a3b8;--text-white: #ffffff;--color-primary: #0284c7;--color-primary-hover: #0369a1;--color-primary-light: #e0f2fe;--color-primary-gradient: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);--color-accent-gold: #f59e0b;--color-accent-gold-bg: #fef3c7;--color-accent-gold-gradient: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);--color-accent-pink: #f43f5e;--color-accent-pink-bg: #ffe4e6;--color-success: #10b981;--color-success-bg: #d1fae5;--color-warning: #f59e0b;--color-warning-bg: #fef3c7;--color-danger: #ef4444;--color-danger-bg: #fee2e2;--input-bg: #f8fafc;--input-border: #cbd5e1;--input-focus: #38bdf8;--input-text: #0f172a;--radius-sm: 10px;--radius-md: 16px;--radius-lg: 20px;--radius-xl: 28px;--radius-full: 9999px;--transition-fast: all .2s cubic-bezier(.34, 1.56, .64, 1);--transition-normal: all .3s cubic-bezier(.34, 1.56, .64, 1);--font-sans: "Plus Jakarta Sans", "Noto Sans SC", system-ui, -apple-system, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg-gradient);color:var(--text-body);line-height:1.7;min-height:100vh;-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex;flex-direction:column}a{color:var(--color-primary);text-decoration:none;transition:var(--transition-fast)}a:hover{color:var(--color-primary-hover)}button{font-family:inherit;cursor:pointer;border:none;outline:none}input,textarea,select{font-family:inherit;outline:none}