body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}nav{background-color:#0e1937;display:flex;align-items:center;padding:8px 0;height:45px;position:sticky;top:0;z-index:50;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;transition:box-shadow .3s ease;width:100%}.container{margin:0;display:flex;align-items:center;padding:0 40px;justify-content:space-between;width:100%;box-sizing:border-box}.brand{display:flex;align-items:center;flex-shrink:0;margin-right:20px;gap:12px}.brand-logo{height:40px;width:auto;display:block}.brand-text{display:flex;flex-direction:column}.brand-title{color:#fff;font-size:14px;line-height:20px;font-weight:500}.brand-subtitle{color:#fff;font-size:12px;line-height:16px;font-weight:400}.service-subtitle{padding-left:16px;border-left:1px solid rgba(255,255,255,.3)}.service-subtitle-text{color:#fff;font-size:13px;line-height:18px;font-weight:500;opacity:.9}#presensiBtn{height:100%;display:flex;align-items:center;justify-content:center;min-height:29px}#presensiBtn .agenda-link{display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:0 12px;font-size:14px;font-weight:500;gap:8px}.custom-html-container{margin-left:10px;padding-left:16px}.custom-html-container button,.custom-html-container a{color:#fff;background:none;border:none;cursor:pointer;font-size:14px;padding:4px 8px;border-radius:4px;transition:all .2s ease}.custom-html-container button:hover,.custom-html-container a:hover{background:#ffffff1a}.nav-right{display:flex;align-items:center;gap:20px;justify-content:flex-end;flex:1;min-width:0}.agenda-link span{color:#fff;font-size:14px;transition:color .2s ease;cursor:pointer;flex-shrink:0}@media (max-width: 768px){.agenda-link span{display:none!important}#presensiBtn .agenda-link{display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:0 5px;font-size:14px;font-weight:500;gap:8px}}.agenda-link:hover{color:#e5e7eb}.profile-section{display:flex;align-items:center;gap:8px;flex-shrink:0}.profile-image{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2);transition:border-color .2s ease;margin-left:-8px}.profile-image:hover{border-color:#fff6}.login-button{background:none;color:#fff;border:none;padding:0 12px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s ease;display:flex;align-items:center;gap:6px;width:100%;height:100%;min-height:29px}.login-button:hover{transform:translateY(-1px)}.login-button:active{transform:translateY(0)}.login-icon{font-size:14px}.login-button.hidden{display:none}.hidden{display:none!important}.block{display:block!important}.user-info{display:none;align-items:center;gap:8px;padding:5px 15px!important;background:#ffffff1a;border-radius:8px;font-size:12px;color:#fff;height:100%;min-height:29px}.user-info.show{display:flex}.user-avatar{width:24px;height:24px;border-radius:50%;background:#10b981;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;transition:all .2s ease}.user-avatar:hover{background:#059669;transform:scale(1.05)}.user-avatar.active{background:#047857;transform:scale(1.1)}@media (max-width: 768px){.user-details,.brand-text{display:none}.service-subtitle{margin-left:12px;padding-left:12px}.service-subtitle-text{font-size:12px;line-height:16px}.custom-html-container{margin-left:12px;padding-left:12px}.custom-html-container button,.custom-html-container a{font-size:12px;padding:3px 6px}}.logout-button{background:none;border:none;color:#ef4444;cursor:pointer;font-size:11px;padding:4px 8px;border-radius:6px;transition:background-color .2s}.logout-button:hover{background:#ef44441a}.dropdown-button{background:transparent;border:none;color:#fff;width:30px;height:100%;min-height:29px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.dropdown-button:hover{background:#ffffff1a}.dropdown-button.active{background:#ffffff26}.dropdown-button svg{width:24px;height:24px}.dropdown-container{position:relative;flex-shrink:0}.error-message{color:#ef4444;font-size:12px;margin-top:5px}.access-denied{background-color:#fee2e2;border:1px solid #fecaca;color:#dc2626;padding:20px;text-align:center;font-family:sans-serif}@media (max-width: 1024px){.container{padding:0 20px}}@media (max-width: 768px){.container{padding:0 16px}.brand{margin-right:16px}.brand-logo{height:36px}.brand-title{font-size:13px}.brand-subtitle{font-size:11px}.nav-right{gap:16px}.profile-image{width:36px;height:36px}.login-button{font-size:11px}.dropdown-button{width:36px;height:100%;min-height:29px}.dropdown-button svg{width:20px;height:20px}}@media (max-width: 480px){.container{padding:0 12px}.brand{margin-right:12px}.brand-logo{height:32px}.brand-title{font-size:12px}.brand-subtitle{font-size:10px}.nav-right{gap:12px}.profile-image{width:32px;height:32px}.login-button{padding:5px 10px;font-size:10px}.dropdown-button{width:32px;height:100%;min-height:29px}.dropdown-button svg{width:20px;height:20px}}@media (max-width: 360px){.container{padding:0 8px}.brand{margin-right:8px}.brand-logo{height:28px}.brand-title{font-size:11px}.brand-subtitle{font-size:9px}.nav-right{gap:8px}.profile-image{width:28px;height:28px}.login-button{padding:4px 8px;font-size:9px}.dropdown-button{width:32px;height:100%;min-height:29px}.dropdown-button svg{width:20px;height:20px}}@media (hover: none) and (pointer: coarse){.app-item:hover{transform:none;background:#ffffff1a}.app-item:active{background:#ffffff26;transform:scale(.95)}.login-button:hover{transform:none}.login-button:active{transform:scale(.95)}.dropdown-button:hover{transform:none}.dropdown-button:active{transform:scale(.95)}}.glass-card{padding:5px;background:#ffffff0f;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-radius:10px;border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #0000001a,inset 0 1px #ffffff80,inset 0 -1px #ffffff1a,inset 0 0 #fff0;position:relative;overflow:hidden;display:flex;align-items:center;height:100%;min-height:29px}.glass-card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}.glass-card:after{content:"";position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.8),transparent,rgba(255,255,255,.3))}