@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap";:root{--primary: #2E7D32;--primary-dark: #1B5E20;--primary-light: #4CAF50;--secondary: #FF6F00;--secondary-light: #FF8F00;--accent: #8BC34A;--bg-body: #FAFAFA;--bg-surface: #FFFFFF;--text-main: #1F2937;--text-muted: #6B7280;--text-inverse: #FFFFFF;--border: #E5E7EB;--status-success: #10B981;--status-error: #EF4444;--status-warning: #F59E0B;--status-info: #3B82F6;--spacing-2xs: 4px;--spacing-xs: 8px;--spacing-sm: 16px;--spacing-md: 24px;--spacing-lg: 32px;--spacing-xl: 48px;--spacing-2xl: 64px;--container-width: 1200px;--header-height: 4rem;--font-heading: "Outfit", system-ui, -apple-system, sans-serif;--font-body: "Inter", system-ui, -apple-system, sans-serif;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: 1rem}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background-color:var(--bg-body);color:var(--text-main);line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--primary-dark);font-weight:700;line-height:1.2}a{text-decoration:none;color:inherit;transition:color .2s ease}button{cursor:pointer;border:none;font-family:inherit}.container{max-width:var(--container-width);margin:0 auto;padding:0 var(--spacing-md)}.flex-center{display:flex;align-items:center;justify-content:center}.grid-auto-fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-md)}.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-md)}@media(max-width:1024px){.dashboard-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.dashboard-grid{grid-template-columns:1fr}}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--radius-md);font-weight:600;transition:all .2s ease;font-family:var(--font-heading)}.btn-primary{background-color:var(--primary);color:var(--text-inverse);border:1px solid var(--primary)}.btn-primary:hover:not(:disabled){background-color:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-1px)}.btn-secondary{background-color:var(--secondary);color:var(--text-inverse);border:1px solid var(--secondary)}.btn-secondary:hover:not(:disabled){background-color:var(--secondary-light);border-color:var(--secondary-light);transform:translateY(-1px)}.btn-outline{border:1px solid var(--primary);color:var(--primary);background:transparent}.btn-outline:hover:not(:disabled){background-color:var(--primary);color:var(--text-inverse)}.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid transparent}.btn-ghost:hover:not(:disabled){background-color:#0000000d;color:var(--text-main)}.btn-danger{background-color:var(--status-error);color:var(--text-inverse);border:1px solid var(--status-error)}.btn-danger:hover:not(:disabled){background-color:#dc2626;border-color:#dc2626}.btn-sm{padding:.5rem 1rem;font-size:.875rem}.btn-md{padding:.75rem 1.5rem;font-size:1rem}.btn-lg{padding:1rem 2rem;font-size:1.125rem}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn-loading{position:relative;color:transparent!important;pointer-events:none}.btn-loading:after{content:"";position:absolute;width:1em;height:1em;top:50%;left:50%;margin-left:-.5em;margin-top:-.5em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .75s linear infinite;color:var(--text-muted)}.btn-primary.btn-loading:after,.btn-secondary.btn-loading:after,.btn-danger.btn-loading:after{color:var(--text-inverse)}.btn-outline.btn-loading:after,.btn-ghost.btn-loading:after{color:var(--primary)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:0% center}to{background-position:200% center}}.animate-fade-in{animation:fadeIn .5s ease-in}.glass-panel{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);padding:var(--spacing-md)}.section-title{font-size:1.5rem;font-weight:700;margin-bottom:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-xs);color:var(--primary-dark);font-family:var(--font-heading)}.section-title:before{content:"";display:block;width:6px;height:24px;background-color:var(--secondary);border-radius:3px}.app-card{display:block;position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--bg-surface);transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--border);height:100%}.app-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--primary)}.app-card-header{height:200px;background-size:cover;background-position:center;position:relative}.app-card-header:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.4))}.app-card-body{padding:var(--spacing-sm) var(--spacing-md)}.app-card h3{margin-bottom:.4rem;font-size:1.125rem;color:var(--text-main)}.app-card p{color:var(--text-muted);font-size:.85rem;line-height:1.5}.news-item{padding:var(--spacing-sm);border-bottom:1px solid var(--border);transition:background-color .2s}.news-item:last-child{border-bottom:none}.news-item:hover{background-color:var(--bg-body)}.news-date{font-size:.8rem;color:var(--secondary);font-weight:600;margin-bottom:.25rem}.content-output{text-align:left!important;max-width:100%}.content-output *{word-break:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;hyphens:none!important;-webkit-hyphens:none!important;white-space:normal!important;text-align:left!important;max-width:100%}.content-output p,.content-output div,.content-output span,.content-output li{margin-bottom:1.25em;line-height:1.8;color:var(--text-main)}.content-output h1,.content-output h2,.content-output h3{color:var(--text-main);font-weight:700;margin-top:1.5em;margin-bottom:.5em;line-height:1.2}.content-output ul,.content-output ol{margin-left:var(--spacing-md);margin-bottom:var(--spacing-sm)}.content-output img{max-width:100%;height:auto;border-radius:var(--radius-md);margin:var(--spacing-md) 0}.content-output a{word-break:break-all!important;color:#2563eb;text-decoration:underline}.w-full{width:100%!important}.hidden{display:none!important}.badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1;white-space:nowrap}.badge-primary{background-color:var(--primary);color:var(--text-inverse)}.badge-secondary{background-color:var(--secondary);color:var(--text-inverse)}.badge-outline{background-color:transparent;border:1px solid var(--border);color:var(--text-main)}.badge-success{background-color:#ecfdf5;color:#047857;border:1px solid #A7F3D0}.badge-warning{background-color:#fffbeb;color:#b45309;border:1px solid #FDE68A}.badge-error{background-color:#fef2f2;color:#b91c1c;border:1px solid #FECACA}.badge-info{background-color:#eff6ff;color:#1d4ed8;border:1px solid #BFDBFE}.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.card-header{padding:var(--spacing-md);border-bottom:1px solid var(--border)}.card-title{font-size:1.25rem;font-weight:600;color:var(--text-main)}.card-description{font-size:.875rem;color:var(--text-muted)}.card-content{padding:var(--spacing-md)}.card-footer{padding:var(--spacing-md);border-top:1px solid var(--border);background-color:var(--bg-body);display:flex;align-items:center}:root{--magang-primary: #667eea;--magang-primary-dark: #764ba2;--magang-accent: #f093fb;--magang-bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);--magang-btn-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--input-border: #E5E7EB;--input-border-focus: #667eea;--input-bg-disabled: #F9FAFB;--input-icon-color: #9CA3AF}.magang-login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--magang-bg-gradient);padding:var(--spacing-lg) var(--spacing-sm)}.magang-login-card{width:100%;max-width:480px;background:var(--bg-surface);border-radius:var(--spacing-md);box-shadow:0 20px 60px #0000004d;overflow:hidden;animation:slideUp .6s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(var(--spacing-lg))}to{opacity:1;transform:translateY(0)}}.magang-login-header{background:var(--magang-btn-gradient);padding:var(--spacing-xl) var(--spacing-lg);text-align:center;color:var(--text-inverse)}.magang-login-icon-wrapper{width:80px;height:80px;background:#fff3;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-md);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.magang-login-title{font-size:2rem;font-weight:800;margin-bottom:var(--spacing-xs);text-shadow:0 2px 10px rgba(0,0,0,.2)}.magang-login-subtitle{font-size:1rem;opacity:.95;font-weight:500}.magang-login-form{padding:var(--spacing-xl) var(--spacing-lg) var(--spacing-lg)}.magang-form-group{margin-bottom:var(--spacing-md)}.magang-form-label{display:block;font-size:.9375rem;font-weight:600;color:var(--text-main);margin-bottom:var(--spacing-xs)}.magang-input-wrapper{position:relative}.magang-input-icon{position:absolute;left:var(--spacing-sm);top:50%;transform:translateY(-50%);color:var(--input-icon-color);pointer-events:none}.magang-input-field{width:100%;padding:14px var(--spacing-sm) 14px var(--spacing-xl);font-size:1rem;border:2px solid var(--input-border);border-radius:12px;outline:none;transition:all .3s ease;font-family:var(--font-body)}.magang-input-field:focus{border-color:var(--input-border-focus);box-shadow:0 0 0 3px #667eea1a}.magang-input-field:disabled{background:var(--input-bg-disabled);cursor:not-allowed}.magang-input-field--with-toggle{padding-right:56px}.magang-password-toggle{position:absolute;right:var(--spacing-sm);top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--input-icon-color);padding:var(--spacing-2xs);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.magang-password-toggle:hover:not(:disabled){color:var(--magang-primary)}.magang-password-toggle:disabled{cursor:not-allowed}.magang-password-toggle--active{color:var(--magang-primary)}.magang-submit-btn{width:100%;padding:var(--spacing-sm);font-size:1.125rem;font-weight:700;color:var(--text-inverse);background:var(--magang-btn-gradient);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 4px 15px #667eea4d;margin-top:var(--spacing-lg);font-family:var(--font-heading)}.magang-submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.magang-submit-btn:disabled{background:var(--input-icon-color);cursor:not-allowed;transform:none}.magang-login-footer{padding:var(--spacing-md) var(--spacing-lg) var(--spacing-lg);text-align:center;border-top:1px solid var(--border)}.magang-footer-text{font-size:.875rem;color:var(--text-muted);margin:0}@media(max-width:640px){.magang-login-container{padding:var(--spacing-md) var(--spacing-sm)}.magang-login-header{padding:var(--spacing-lg) var(--spacing-md)}.magang-login-form{padding:var(--spacing-lg) var(--spacing-md) var(--spacing-md)}.magang-login-title{font-size:1.75rem}}.magang-dashboard{min-height:100vh;background:var(--bg-body);padding:var(--spacing-lg)}.magang-dashboard-header{background:var(--magang-btn-gradient);color:var(--text-inverse);padding:var(--spacing-xl);border-radius:var(--spacing-md);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-lg)}.magang-header-content{display:flex;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.magang-avatar{width:80px;height:80px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;border:3px solid rgba(255,255,255,.3)}.magang-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.magang-header-info{flex:1;min-width:200px}.magang-greeting{font-size:1rem;opacity:.9;margin-bottom:var(--spacing-2xs)}.magang-student-name{font-size:1.75rem;font-weight:800;margin-bottom:var(--spacing-2xs)}.magang-student-nim{font-size:.875rem;opacity:.85}.magang-logout-btn{padding:var(--spacing-xs) var(--spacing-md);background:#fff3;border:1px solid rgba(255,255,255,.3);color:var(--text-inverse);border-radius:var(--spacing-xs);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:var(--spacing-xs);font-weight:600;font-family:var(--font-heading)}.magang-logout-btn:hover{background:#ffffff4d;transform:translateY(-2px)}.magang-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.magang-stat-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--spacing-md);padding:var(--spacing-md);box-shadow:var(--shadow-sm);transition:all .3s ease}.magang-stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--magang-primary)}.magang-stat-icon{width:48px;height:48px;border-radius:var(--spacing-xs);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea1a,#764ba21a);color:var(--magang-primary);margin-bottom:var(--spacing-sm)}.magang-stat-label{font-size:.875rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-xs)}.magang-stat-value{font-size:2rem;font-weight:800;color:var(--magang-primary-dark);font-family:var(--font-heading);margin-bottom:var(--spacing-2xs)}.magang-stat-unit{font-size:1rem;color:var(--text-muted);font-weight:500}.magang-quick-actions{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--spacing-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm)}.magang-section-title{font-size:1.25rem;font-weight:700;color:var(--text-main);margin-bottom:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-xs);font-family:var(--font-heading)}.magang-section-title:before{content:"";width:4px;height:24px;background:var(--magang-primary);border-radius:2px}.magang-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--spacing-md)}.magang-action-card{background:linear-gradient(135deg,#667eea0d,#764ba20d);border:2px dashed var(--magang-primary);border-radius:var(--spacing-md);padding:var(--spacing-lg);cursor:pointer;transition:all .3s ease;text-align:center}.magang-action-card:hover{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:var(--magang-primary-dark);transform:translateY(-4px);box-shadow:var(--shadow-md)}.magang-action-icon{width:64px;height:64px;margin:0 auto var(--spacing-md);background:var(--magang-btn-gradient);color:var(--text-inverse);border-radius:50%;display:flex;align-items:center;justify-content:center}.magang-action-title{font-size:1.125rem;font-weight:700;color:var(--magang-primary-dark);margin-bottom:var(--spacing-xs);font-family:var(--font-heading)}.magang-action-desc{font-size:.875rem;color:var(--text-muted);line-height:1.5}@media(max-width:768px){.magang-dashboard{padding:var(--spacing-md)}.magang-dashboard-header{padding:var(--spacing-md);background:var(--student-gradient, var(--magang-btn-gradient))!important}.magang-header-content{flex-direction:column;text-align:center}.magang-stats-grid,.magang-actions-grid{grid-template-columns:1fr}}.magang-stat-card-new{background:#fff;border-radius:24px;padding:24px;display:flex;align-items:center;gap:20px;box-shadow:0 10px 25px -5px #0000000d,0 8px 10px -6px #00000003;border:1px solid rgba(0,0,0,.03);transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.magang-stat-card-new:after{content:"";position:absolute;top:0;right:0;width:100px;height:100px;background:var(--student-gradient);opacity:.03;border-radius:0 0 0 100%}.magang-stat-card-new:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 35px -10px #0000001a;border-color:var(--student-soft)}.magang-stat-icon-wrapper{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 15px -3px #0000001a;flex-shrink:0}.magang-stat-label-new{font-size:.75rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}.magang-stat-value-new{font-size:1.75rem;font-weight:850;letter-spacing:-.02em;display:flex;align-items:baseline;gap:4px}.magang-stat-unit-new{font-size:.85rem;font-weight:600;color:#94a3b8}.magang-dashboard-header{background:var(--student-gradient, var(--magang-btn-gradient))!important;color:#fff!important;border-radius:32px;border:none;position:relative;overflow:hidden;box-shadow:0 15px 30px -10px var(--student-soft)}.magang-dashboard-header *{color:#fff!important}.magang-dashboard-header:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 10% 20%,rgba(255,255,255,.1) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(255,255,255,.1) 0%,transparent 40%);pointer-events:none}.magang-student-name{font-size:2.25rem;letter-spacing:-.03em;margin-bottom:4px;text-shadow:0 2px 4px rgba(0,0,0,.1)}.magang-greeting{font-weight:500;opacity:.9;font-size:1rem;letter-spacing:.02em}.magang-student-nim{opacity:.8;font-weight:500}.magang-logout-btn{background:#ffffff26!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;border-radius:14px!important;padding:10px 20px!important;font-size:.9rem}.magang-logout-btn:hover{background:#ffffff40!important;transform:translateY(-2px);box-shadow:0 5px 15px #0000001a}.magang-avatar{border:4px solid rgba(255,255,255,.3);background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 24px #00000026;width:90px;height:90px}.magang-profile{min-height:100vh;background:var(--bg-body);padding:var(--spacing-lg)}.magang-profile-card{max-width:800px;margin:0 auto;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--spacing-md);padding:var(--spacing-xl);box-shadow:var(--shadow-md)}.magang-profile-header{text-align:center;margin-bottom:var(--spacing-xl)}.magang-profile-title{font-size:1.75rem;font-weight:800;color:var(--magang-primary-dark);margin-bottom:var(--spacing-xs);font-family:var(--font-heading)}.magang-profile-subtitle{font-size:.9375rem;color:var(--text-muted)}.magang-photo-section{text-align:center;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-xl);border-bottom:1px solid var(--border)}.magang-photo-preview{width:120px;height:120px;margin:0 auto var(--spacing-md);border-radius:50%;background:linear-gradient(135deg,#667eea1a,#764ba21a);border:3px solid var(--magang-primary);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.magang-photo-preview img{width:100%;height:100%;object-fit:cover}.magang-photo-placeholder{font-size:3rem;color:var(--magang-primary);font-weight:700}.magang-photo-upload-btn{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);background:var(--magang-btn-gradient);color:var(--text-inverse);border:none;border-radius:var(--spacing-xs);cursor:pointer;font-weight:600;transition:all .3s ease;font-family:var(--font-heading)}.magang-photo-upload-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.magang-profile-form{display:grid;gap:var(--spacing-md)}.magang-form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.magang-back-btn{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);background:var(--bg-body);border:1px solid var(--border);color:var(--text-main);border-radius:var(--spacing-xs);cursor:pointer;transition:all .3s ease;font-weight:600;margin-bottom:var(--spacing-md);font-family:var(--font-heading)}.magang-back-btn:hover{border-color:var(--magang-primary);color:var(--magang-primary)}.magang-save-btn{width:100%;padding:var(--spacing-sm);background:var(--magang-btn-gradient);color:var(--text-inverse);border:none;border-radius:var(--spacing-sm);cursor:pointer;font-size:1.125rem;font-weight:700;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);margin-top:var(--spacing-lg);font-family:var(--font-heading)}.magang-save-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.magang-save-btn:disabled{background:var(--input-icon-color);cursor:not-allowed}@media(max-width:768px){.magang-profile,.magang-profile-card{padding:var(--spacing-md)}.magang-form-row{grid-template-columns:1fr}}.magang-alert-badge{position:relative;display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);background:linear-gradient(135deg,#ef4444,#dc2626);color:var(--text-inverse);border-radius:9999px;font-size:.875rem;font-weight:700;box-shadow:0 4px 12px #ef444466;animation:pulse-alert 2s ease-in-out infinite}@keyframes pulse-alert{0%,to{opacity:1;transform:scale(1);box-shadow:0 4px 12px #ef444466}50%{opacity:.85;transform:scale(1.05);box-shadow:0 6px 20px #ef444499}}.magang-blink-dot{width:12px;height:12px;border-radius:50%;background:#ef4444;animation:blink-dot 1.5s ease-in-out infinite;box-shadow:0 0 #ef4444b3}@keyframes blink-dot{0%,to{opacity:1;box-shadow:0 0 #ef4444b3}50%{opacity:.3;box-shadow:0 0 0 8px #ef444400}}.magang-alert-banner{background:linear-gradient(135deg,#ef44441a,#dc262626);border:2px solid #ef4444;border-radius:var(--spacing-md);padding:var(--spacing-md);margin-bottom:var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-md);animation:pulse-banner 3s ease-in-out infinite}@keyframes pulse-banner{0%,to{border-color:#ef4444;background:linear-gradient(135deg,#ef44441a,#dc262626)}50%{border-color:#dc2626;background:linear-gradient(135deg,#ef444426,#dc262633)}}.magang-alert-icon{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#ef4444,#dc2626);color:var(--text-inverse);display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:blink-icon 1s ease-in-out infinite}@keyframes blink-icon{0%,to{opacity:1}50%{opacity:.6}}.magang-alert-content{flex:1}.magang-alert-title{font-size:1.125rem;font-weight:700;color:#dc2626;margin-bottom:var(--spacing-2xs);font-family:var(--font-heading)}.magang-alert-text{font-size:.9375rem;color:var(--text-main)}.magang-alert-action{padding:var(--spacing-xs) var(--spacing-md);background:linear-gradient(135deg,#ef4444,#dc2626);color:var(--text-inverse);border:none;border-radius:var(--spacing-xs);cursor:pointer;font-weight:700;transition:all .3s ease;white-space:nowrap;font-family:var(--font-heading)}.magang-alert-action:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ef444466}.magang-action-card--alert{border-color:#ef4444!important;background:linear-gradient(135deg,#ef444414,#dc26261f)!important;animation:glow-alert 2s ease-in-out infinite}@keyframes glow-alert{0%,to{box-shadow:0 0 #ef444400}50%{box-shadow:0 0 20px #ef444466}}.magang-action-card--alert .magang-action-icon{background:linear-gradient(135deg,#ef4444,#dc2626);animation:pulse-icon 1.5s ease-in-out infinite}@keyframes pulse-icon{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.magang-action-card--alert .magang-action-title{color:#dc2626!important}.magang-modal-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--spacing-md);z-index:1000;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.magang-modal{background:var(--bg-surface);border-radius:var(--spacing-md);box-shadow:0 20px 60px #0000004d;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-32px)}to{opacity:1;transform:translateY(0)}}.magang-modal-header{padding:var(--spacing-lg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg-surface);z-index:10}.magang-modal-title{font-size:1.5rem;font-weight:800;color:var(--magang-primary-dark);font-family:var(--font-heading);display:flex;align-items:center;gap:var(--spacing-sm)}.magang-modal-close{width:40px;height:40px;border-radius:50%;background:var(--bg-body);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.magang-modal-close:hover{background:#fee2e2;border-color:#ef4444;color:#ef4444}.magang-modal-body{padding:var(--spacing-lg)}.magang-time-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.magang-photos-section{margin-top:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid var(--border)}.magang-photos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);margin-top:var(--spacing-md)}.magang-photo-upload-box{aspect-ratio:1;border:2px dashed var(--border);border-radius:var(--spacing-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;background:var(--bg-body);position:relative;overflow:hidden}.magang-photo-upload-box:hover{border-color:var(--magang-primary);background:#667eea0d}.magang-photo-upload-box img{width:100%;height:100%;object-fit:cover}.magang-photo-remove{position:absolute;top:var(--spacing-2xs);right:var(--spacing-2xs);width:24px;height:24px;border-radius:50%;background:#ef4444;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.magang-photo-upload-box:hover .magang-photo-remove{opacity:1}.magang-modal-footer{padding:var(--spacing-lg);border-top:1px solid var(--border);display:flex;gap:var(--spacing-sm);justify-content:flex-end;position:sticky;bottom:0;background:var(--bg-surface)}.magang-btn-cancel{padding:var(--spacing-sm) var(--spacing-lg);background:var(--bg-body);border:1px solid var(--border);color:var(--text-main);border-radius:var(--spacing-sm);cursor:pointer;font-weight:600;transition:all .3s ease;font-family:var(--font-heading)}.magang-btn-cancel:hover{border-color:var(--text-muted)}.magang-btn-submit{padding:var(--spacing-sm) var(--spacing-lg);background:var(--magang-btn-gradient);border:none;color:var(--text-inverse);border-radius:var(--spacing-sm);cursor:pointer;font-weight:700;transition:all .3s ease;display:flex;align-items:center;gap:var(--spacing-xs);font-family:var(--font-heading)}.magang-btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #667eea66}.magang-btn-submit:disabled{background:var(--input-icon-color);cursor:not-allowed}@media(max-width:768px){.magang-modal{max-height:95vh;margin:var(--spacing-xs)}.magang-modal-body{padding:var(--spacing-md)}.magang-time-row{grid-template-columns:1fr!important;gap:var(--spacing-md)}.magang-photos-grid{grid-template-columns:repeat(2,1fr)}.magang-modal-footer{flex-direction:column;padding:var(--spacing-md)}.magang-btn-cancel,.magang-btn-submit{width:100%;justify-content:center}}@media(max-width:428px){.magang-modal{max-width:95vw}.magang-modal-header{padding:var(--spacing-md)}.magang-modal-title{font-size:1.25rem}.magang-form-label{font-size:.875rem}.magang-input-field{font-size:1rem;min-height:44px}.magang-time-row{grid-template-columns:1fr!important}}@media(max-width:375px){.magang-modal-body{padding:var(--spacing-sm)}.magang-photos-grid{grid-template-columns:1fr}}.magang-logbook-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.magang-logbook-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:all .3s ease}.magang-logbook-card:hover{border-color:var(--magang-primary-light);transform:translateY(-2px);box-shadow:0 4px 6px -1px #0000000d}.magang-logbook-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-md)}.magang-logbook-date-group{display:flex;gap:var(--spacing-sm)}.magang-logbook-day{font-family:var(--font-heading);font-weight:700;color:var(--foreground);margin-bottom:var(--spacing-2xs);font-size:1rem}.magang-logbook-time{display:flex;align-items:center;gap:var(--spacing-xs);font-size:.8125rem;color:var(--text-muted);font-weight:500;background:var(--bg-body);padding:2px 8px;border-radius:var(--radius-full);width:fit-content}.magang-logbook-edit-btn{background:none;border:none;padding:var(--spacing-xs);color:var(--text-muted);border-radius:var(--radius-md);cursor:pointer;transition:all .2s}.magang-logbook-edit-btn:hover{background:var(--bg-body);color:var(--magang-primary)}.magang-logbook-content{margin-bottom:var(--spacing-md)}.magang-logbook-desc{color:var(--text-secondary);font-size:.9375rem;line-height:1.6;white-space:pre-wrap}.magang-logbook-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--spacing-sm)}.magang-logbook-thumb{aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border)}.magang-logbook-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.magang-logbook-thumb:hover img{transform:scale(1.1)}@media(max-width:640px){.magang-logbook-card{padding:var(--spacing-md)}}.magang-table-container{overflow-x:auto;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}.magang-table{width:100%;border-collapse:collapse;font-size:.9rem}.magang-table thead{background:#f9fafb;border-bottom:2px solid #E5E7EB}.magang-table th{padding:12px 16px;text-align:left;font-weight:600;color:#374151;white-space:nowrap}.magang-table tbody tr{border-bottom:1px solid #E5E7EB;transition:background-color .2s ease}.magang-table tbody tr:hover{background:#f9fafb}.magang-table td{padding:12px 16px;vertical-align:top;color:#111827}.magang-status-badge{display:inline-block;padding:6px 12px;border-radius:8px;font-size:.8rem;font-weight:600;transition:all .2s ease}.magang-status-badge.active{background:#dcfce7;color:#166534}.magang-status-badge.inactive{background:#fee2e2;color:#991b1b}.magang-action-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px;border-radius:8px;border:none;cursor:pointer;transition:all .2s ease}.magang-action-btn.view{background:#dbeafe;color:#1e40af}.magang-action-btn.view:hover{background:#bfdbfe;transform:translateY(-1px)}.magang-action-btn.edit{background:#fef3c7;color:#92400e}.magang-action-btn.edit:hover{background:#fde68a;transform:translateY(-1px)}.magang-action-btn.delete{background:#fee2e2;color:#991b1b}.magang-action-btn.delete:hover{background:#fecaca;transform:translateY(-1px)}.magang-search-box{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #E5E7EB;border-radius:12px;transition:all .2s ease}.magang-search-box:focus-within{border-color:#10b981;box-shadow:0 0 0 3px #10b9811a}.magang-search-box input{border:none;outline:none;flex:1;font-size:.9rem;color:#111827}.magang-search-box input::placeholder{color:#9ca3af}.magang-btn-primary{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 6px -1px #10b9814d}.magang-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #10b98166}.magang-btn-secondary{padding:10px 20px;background:#fff;color:#6b7280;border:1px solid #E5E7EB;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.magang-btn-secondary:hover{background:#f9fafb;border-color:#d1d5db}.magang-modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:9999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.magang-modal-content{background:#fff;border-radius:24px;max-width:600px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px -12px #00000040}@media(max-width:768px){.magang-table-container{border-radius:8px}.magang-table{font-size:.85rem}.magang-table th,.magang-table td{padding:8px 12px}.magang-action-btn{padding:6px}}