.roles-page-v2{background:transparent;display:flex;flex-direction:column}.roles-layout{flex:1;min-height:0;display:flex;padding-bottom:24px}.roles-layout__row{width:100%;margin:0!important;height:100%}.roles-layout__side,.roles-layout__detail{height:100%;display:flex;flex-direction:column}.roles-side-card,.roles-detail-card{flex:1;min-height:0;border-radius:18px!important;display:flex;flex-direction:column;box-shadow:0 4px 20px #0000000a!important;border:1px solid rgba(226,232,240,.8)!important}.roles-side-card .ant-card-body,.roles-detail-card .ant-card-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px!important;overflow:hidden}.role-search-panel{flex-shrink:0;display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.role-search-bar{display:flex;gap:10px}.role-search-bar .ant-input-affix-wrapper{flex:1;border-radius:8px}.role-search-bar .ant-btn{border-radius:8px}.role-list-container-v3{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:8px;margin-right:-8px}.role-list-container-v3::-webkit-scrollbar{width:6px}.role-list-container-v3::-webkit-scrollbar-track{background:transparent}.role-list-container-v3::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:10px}.role-list-container-v3::-webkit-scrollbar-thumb:hover{background:#cbd5e1}.role-item-card-v3{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:10px;border:1px solid #f1f5f9;border-radius:12px;background:#fff;transition:all .2s ease;cursor:pointer;position:relative;overflow:hidden}.role-item-card-v3:hover{border-color:#cbd5e1;background:#f8fafc;transform:translateY(-1px);box-shadow:0 4px 12px #00000008}.role-item-card-v3.active{border-color:#bfdbfe;background:#eff6ff}.role-item-card-v3.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#3b82f6}.role-item-card-v3.active .role-name{color:#1e3a8a;font-weight:600}.role-item-card-v3.active .role-item-symbol{background:#3b82f6;color:#fff}.role-item-symbol{width:40px;height:40px;border-radius:10px;background:#f1f5f9;color:#64748b;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;transition:all .2s ease}.role-item-main{flex:1;min-width:0}.role-item-name-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}.role-name{font-size:14px;font-weight:500;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.role-code{font-size:12px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.role-item-actions{display:flex;gap:4px;opacity:0;transition:opacity .2s ease}.role-item-actions .ant-btn{color:#64748b}.role-item-actions .ant-btn:hover{color:#3b82f6;background:#e2e8f0}.role-item-actions .ant-btn.ant-btn-dangerous:hover{color:#ef4444;background:#fee2e2}.role-item-card-v3:hover .role-item-actions,.role-item-card-v3.active .role-item-actions{opacity:1}.role-list-pagination{flex-shrink:0;padding-top:16px;margin-top:auto;border-top:1px solid #f1f5f9;display:flex;justify-content:flex-end}.role-detail-header{display:flex;align-items:center;gap:16px}.role-detail-icon{width:48px;height:48px;border-radius:12px;background:#eff6ff;color:#3b82f6;display:flex;align-items:center;justify-content:center;font-size:24px}.role-detail-heading{display:flex;flex-direction:column;min-width:0}.role-detail-title{font-size:18px;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.role-detail-code{font-size:13px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.role-detail-tabs{flex:1;display:flex;flex-direction:column;min-height:0}.role-detail-tabs .ant-tabs-nav{margin-bottom:16px!important}.role-detail-tabs .ant-tabs-nav:before{border-bottom:1px solid #f1f5f9}.role-detail-tabs .ant-tabs-content-holder{flex:1;min-height:0;overflow-y:auto}.role-detail-tabs .ant-tabs-content-holder::-webkit-scrollbar{width:6px}.role-detail-tabs .ant-tabs-content-holder::-webkit-scrollbar-track{background:transparent}.role-detail-tabs .ant-tabs-content-holder::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:10px}.role-detail-pane{padding:4px}.permission-tree-wrapper{padding:16px;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0}.role-members-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.role-members-toolbar h5.ant-typography{color:#334155;font-weight:600}.roles-count-badge{background:#f1f5f9!important;color:#64748b!important;border:1px solid #e2e8f0}.app-page__empty-state{height:100%;display:flex;align-items:center;justify-content:center;background:#ffffffc7;border-radius:16px;border:1px dashed rgba(148,163,184,.5);margin:0}