*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh}.header{text-align:center;margin-bottom:40px;padding-top:40px}.header h1{color:#2c3e50;font-size:2.8em;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.1);font-weight:700}.header p{color:#7f8c8d;font-size:1.2em;font-weight:500}.dropdown-container{display:flex;justify-content:center;align-items:center;gap:30px;margin-bottom:40px;flex-wrap:wrap;padding-left:0;box-sizing:border-box}.dropdown-wrapper{position:relative;background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 32px #0000001a;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.dropdown-wrapper:hover{transform:translateY(-5px);box-shadow:0 12px 40px #00000026}.dropdown-wrapper label{display:block;margin-bottom:12px;font-weight:600;color:#2c3e50;font-size:16px;display:flex;align-items:center;gap:8px}select{padding:14px 40px 14px 18px;border:2px solid transparent;border-radius:12px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#667eea,#764ba2) border-box;font-size:16px;color:#2c3e50;cursor:pointer;transition:all .3s ease;min-width:220px;font-weight:500;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 12px center;background-repeat:no-repeat;background-size:16px}select:hover{border-color:#667eea4d;box-shadow:0 4px 16px #667eea33;transform:translateY(-2px)}select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.chart-section{margin-bottom:60px}.chart-title{text-align:center;font-size:2em;color:#2c3e50;margin-bottom:30px;font-weight:600}.chart-container{background:#fff;border-radius:20px;padding:40px 40px 20px;box-shadow:0 15px 50px #0000001a;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:1400px;margin:0 auto;position:relative}.chart-wrapper{display:flex;flex-direction:column;align-items:center}.chart{display:flex;align-items:end;justify-content:center;height:400px;padding:20px 0;border-bottom:3px solid #ecf0f1;gap:20px;position:relative;width:100%}.chart.overview{justify-content:center;gap:80px}.chart.faculty{justify-content:space-between;gap:15px}.bar-container{display:flex;flex-direction:column;align-items:center;position:relative}.bar{border-radius:8px 8px 0 0;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;animation:growUp 1.2s ease-out;box-shadow:0 4px 12px #0000001a}.bar.overview-bar{width:100px;min-width:90px}.bar.faculty-bar{width:80px;min-width:60px}.bar:hover{transform:scale(1.08) translateY(-5px);box-shadow:0 12px 30px #0003;z-index:50}.tooltip{position:absolute;background:#2c3e50f2;color:#fff;padding:10px 15px;border-radius:8px;font-size:14px;font-weight:600;white-space:nowrap;pointer-events:none;z-index:1000;opacity:0;transition:opacity .3s ease;box-shadow:0 8px 25px #0000004d}.tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#2c3e50f2}.tooltip.show{opacity:1}.chart-labels{display:flex;justify-content:center;margin-top:20px;gap:20px;width:100%}.chart-labels.overview{gap:80px}.chart-labels.faculty{justify-content:space-between;gap:15px}.label{text-align:center;font-size:16px;color:#2c3e50;font-weight:600;line-height:1.3;padding:10px 5px;transition:color .3s ease}.label.overview-label{width:100px;font-size:18px;color:#2c3e50}.label.faculty-label{width:80px;min-width:60px;font-size:12px;word-wrap:break-word}.label:hover{color:#667eea;font-weight:700;transform:translateY(-2px)}@keyframes growUp{0%{height:0;opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.section-divider{border-top:4px solid #ecf0f1;padding-top:50px;margin-top:40px}.loading{text-align:center;padding:40px;color:#7f8c8d;font-size:18px}.loading:after{content:"";display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin-left:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.total{background:linear-gradient(135deg,#667eea,#764ba2)}.employer{background:linear-gradient(135deg,#43e97b,#38f9d7)}.academic{background:linear-gradient(135deg,#4facfe,#00f2fe)}.faculty-fip{background:linear-gradient(135deg,#e5233c,#c41e3a)}.faculty-fbs{background:linear-gradient(135deg,#dda73a,#bf9000)}.faculty-fmipa{background:linear-gradient(135deg,#4c9f38,#2d5016)}.faculty-ft{background:linear-gradient(135deg,#c5192d,#8b0000)}.faculty-fis{background:linear-gradient(135deg,#ff3a21,#e73c7e)}.faculty-fe{background:linear-gradient(135deg,#26bde2,#1a8fb8)}.faculty-fpp{background:linear-gradient(135deg,#fcc30b,#d90)}.faculty-fik{background:linear-gradient(135deg,#a21942,#8b1538)}.status-belum{background:linear-gradient(135deg,#e5233c,#c41e3a)}.status-done{background:linear-gradient(135deg,#43e97b,#38f9d7)}.status-dones{background:linear-gradient(135deg,#4facfe,#00f2fe)}.status-clear{background:linear-gradient(135deg,#667eea,#764ba2)}@media (max-width: 768px){.header h1{font-size:2.2em}.dropdown-container{flex-direction:column;gap:20px}.dropdown-wrapper{padding:16px}select{min-width:200px;font-size:15px}.chart{height:350px;gap:15px;padding:15px 0}.chart.overview{gap:40px}.chart.faculty{gap:10px}.chart-labels.overview{gap:40px}.chart-labels.faculty{gap:10px}.bar.overview-bar{width:80px;min-width:70px}.bar.faculty-bar{width:60px;min-width:45px}.label.overview-label{width:80px;font-size:16px}.label.faculty-label{width:60px;min-width:45px;font-size:10px}.chart-container{padding:30px 20px 15px}}@media (max-width: 480px){.main-content-wrapper{padding:15px}.header h1{font-size:1.8em}.chart{height:300px;gap:8px;padding:10px 0}.chart.overview,.chart-labels.overview{gap:20px}.bar.overview-bar{width:70px;min-width:60px}.bar.faculty-bar{width:40px;min-width:35px}.label.overview-label{width:70px;font-size:14px}.label.faculty-label{width:40px;min-width:35px;font-size:9px}}